From 794febfc6de3a3c31037c0c469c1062322fae302 Mon Sep 17 00:00:00 2001
From: sanj <sanj@sanj>
Date: Tue, 13 Jul 2010 00:39:53 +0530
Subject: [PATCH] added js files

---
 static/js/padmaLayer.js  |  93 ++++++++++++++++++++++++++++++++
 static/js/padmaSearch.js | 112 +++++++++++++++++++++++++++++++++++++++
 static/js/padmaVideo.js  | 103 +++++++++++++++++++++++++++++++++++
 3 files changed, 308 insertions(+)
 create mode 100644 static/js/padmaLayer.js
 create mode 100644 static/js/padmaSearch.js
 create mode 100644 static/js/padmaVideo.js

diff --git a/static/js/padmaLayer.js b/static/js/padmaLayer.js
new file mode 100644
index 0000000..0d351f6
--- /dev/null
+++ b/static/js/padmaLayer.js
@@ -0,0 +1,93 @@
+var padmaLayer = function(json, video) {
+  this.id = json.id;
+  this.video = video.index; //FIXME: Kept for legacy, please clean up.
+  this.padmaVideo = video;
+  this.time_in = json.time_in;
+  this.time_out = json.time_out;
+  this.time_in_npt = ms2npt(this.time_in);
+  this.time_out_npt = ms2npt(this.time_out);
+  this.track = json.track;
+  this.value = json.value;
+  this.shortValue = this.value.substring(0,100); //FIXME
+  this.value_html = json.value_html;
+  this.creator = json.creator;
+  var that = this;
+  this.firstFrameStr = BASE_URL + padmaVideos[this.video].id + "/frame/" + ms2npt(that.time_in);
+  this.firstFrame128 = this.firstFrameStr + ".128.jpg";
+  this.firstFrame320 = this.firstFrameStr + ".320.jpg";
+  this.lastFrameStr = BASE_URL + padmaVideos[this.video].id + "/frame/" + ms2npt(that.time_out);
+  this.lastFrame128 = this.lastFrameStr + ".128.jpg";
+  this.lastFrame320 = this.lastFrameStr + ".320.jpg";
+  this.videoSrc128 = this.padmaVideo.meta.urls['128'] + "?t=" + ms2npt(that.time_in);
+  this.videoSrc320 = this.padmaVideo.meta.urls['320'] + "?t=" + ms2npt(that.time_in);
+//  this.videoSrc128 = BASE_URL + "v/128/" + padmaVideos[this.video].id + ".ogv?t=" + ms2npt(that.time_in);
+//  this.videoSrc320 = BASE_URL + "v/320/" + padmaVideos[this.video].id + ".ogv?t=" + ms2npt(that.time_in);
+  }
+
+padmaLayer.prototype.showResult = function(word) {
+  var that = this;
+//  alert(word);
+  var html = tmpl("tmpl_layerResult", {'layer': that, 'word': word});
+  this.resultJq = $('<div />').addClass("layerResult").addClass(that.track).attr("id", "layer" + that.id).html(html).data("layer", that);
+  this.padmaVideo.jq.find(".searchResults").append(that.resultJq);
+  return this;  
+}
+
+padmaLayer.prototype.addToClipBin = function() {
+  var that = this;  
+  var html = tmpl("tmpl_clip", {'layer': that});
+  this.clipJq = $('<div />').addClass('padmaClip').attr("id", "clip" + that.id).data("layer", that).html(html);
+  var height = Math.ceil(parseInt(that.padmaVideo.meta.stream_width) / that.padmaVideo.meta.aspectratio) + 16;
+  console.log(height);  
+  $('#playBin').append(that.clipJq);
+  this.clipJq.css({'height': height + "px"});
+}
+
+padmaLayer.prototype.getThumbElem = function() {
+  var that = this;
+  var e = $('<div />');
+  e.addClass('matchedLayer');
+  e.attr("id", that.id);
+  var img = $('<img />');
+  if (that.firstFrame128) {
+    img.attr("src", that.firstFrame128);
+    e.append(img);
+    }
+  e.attr("data-track", that.track);
+  e.attr("data-value", that.value_html);
+  e.mouseover(function() {
+    var html = '';    
+    html += padmaVideos[that.video].title;
+    html += "<br />";
+    html += $(this).attr('data-track');
+    html += '<br />';
+    html += $(this).attr('data-value');
+    $('#resultDetails').html(html);
+    }).mouseout(function() {
+    $('#resultDetails').html('');
+    });
+  return e;
+  }
+
+padmaLayer.prototype.getVideoElem = function() {
+  var that = this;
+  var e = $('<video />');
+  e.attr("src", that.videoSrc128);
+  e.attr("width", "128");
+  e.attr("data-track", that.track);
+  e.attr("data-value", that.value_html);
+  e.mouseover(function() {
+    var html = '';
+    html += padmaVideos[that.video].title;
+    html += "<br />";
+    html += $(this).attr('data-track');
+    html += '<br />';
+    html += $(this).attr('data-value');
+    $('#resultDetails').html(html);
+    }).mouseout(function() {
+    $('#resultDetails').html('');
+    });    
+  e.attr("poster", that.firstFrame128);
+  return e;
+  }
+
diff --git a/static/js/padmaSearch.js b/static/js/padmaSearch.js
new file mode 100644
index 0000000..018c79c
--- /dev/null
+++ b/static/js/padmaSearch.js
@@ -0,0 +1,112 @@
+$(document).ready(function() {
+  $('#searchForm').submit(function(e) {
+    e.preventDefault();
+    var val = $.trim($('#search').val());
+    if (val == '') {
+      $('.searchResults').html('');
+      return;
+    }
+    doSearch(val);
+/*
+    var words = val.split(" ");
+    for (var i = 0; i < words.length; i++) {
+      var thisWord = words[i];
+      if (!prevSearchTerms.inArray(thisWord) && thisWord.length > 3) {
+        doSearch(thisWord);
+        prevSearchTerms.push(thisWord);
+      }
+    }
+*/     
+  });
+
+/*
+  $('#search').keyup(function() {
+
+  });
+*/
+});
+
+function getVideoById(id) {
+  for (var i=0; i < padmaVideos.length; i++) {
+    var thisVideo = padmaVideos[i];
+    if (thisVideo.id == id) {
+      return thisVideo;
+    }
+  }
+  return false;
+}
+
+$('.addToClipBin').live("click", function(e) {
+  e.preventDefault();
+/*
+  var layerId = $(this).parents(".layerResult").attr("data-id");
+  var videoId = $(this).parents(".videoWrapper").attr("id");
+  var video = getVideoById(videoId);
+  var layer = video.getLayerById(layerId);
+*/
+  var parent = $(this).parents('.layerResult');
+  var layer = parent.data("layer");
+  parent.slideUp();
+  layer.addToClipBin();  
+});
+
+function doSearch(word) {
+  var matchingLayers = findMatchingLayers(word);
+  for (var l=0; l < matchingLayers.length; l++) {
+    if (matchingLayers[l]) {
+      var layer = matchingLayers[l];
+      layer.showResult(word);
+/*
+      var imgPath = layer.firstFrame128;
+//      console.log(layer.getVideoElem());
+//     var html = '';
+//    console.log(imgPath);
+      var html = layer.getVideoElem();
+//      console.log(html);
+//    var html = layer.getThumbElem();
+//    var imgHtml = "<img src='" + imgPath + "' />";
+      $('#results').append(html);
+*/
+      }
+    }
+  }
+
+
+/*
+* @param {String} word Word to search for in layers
+* @returns {Array} Array of padmaLayer objects
+*/
+
+function findMatchingLayers(word) {
+  var matchedLayers = [];
+  for (var v=0; v < padmaVideos.length; v++) {
+    if (padmaVideos[v].layers) {
+      var layers = padmaVideos[v].layers;
+      for (var l=0; l < layers.length; l++) {
+        if (layers[l].value) {
+          var val = layers[l].value;
+          if (val.indexOf(word) != -1) {
+            var matchedLayer = padmaVideos[v].layers[l];
+//            var matchedLayer = new padmaLayer(layers[l], v)
+            matchedLayers.push(matchedLayer);
+            }        
+          }      
+        }
+      }
+    }
+  return matchedLayers;
+  }
+
+
+Array.prototype.inArray = function(value) {
+// Returns true if the passed value is found in the
+// array. Returns false if it is not.
+  var i;
+  for (i=0; i < this.length; i++) {
+    if (this[i] == value) {
+      return true;
+      }
+    }
+  return false;
+  };
+
diff --git a/static/js/padmaVideo.js b/static/js/padmaVideo.js
new file mode 100644
index 0000000..25844e7
--- /dev/null
+++ b/static/js/padmaVideo.js
@@ -0,0 +1,103 @@
+var padmaVideo = function(json, index) {
+  this.id = json.id;
+  this.index = index;
+  this.title = json.title;
+  this.jq = {};
+  this.poster = BASE_URL + this.id + "/poster.jpg";
+  this.timeline = BASE_URL + this.id + "/timeline.png";
+  this.wrapperHtml = this.getWrapperHtml()
+  this.init();
+  this.dataLoaded = false;
+  this.layers = [];
+  }
+
+padmaVideo.prototype.getWrapperHtml = function() {
+  var that = this;
+  var videoElem = $('<div />');
+  videoElem.attr('id', that.id);
+  videoElem.addClass("videoWrapper");
+  var html = '';
+  html += "<div class='videoTitle'>";
+  html += this.title;
+  html += "</div>";
+  html += "<div class='videoPoster'>";
+  html += "<img src='" + this.poster + "' />";
+  html += "</div>";
+/*
+  html += "<div class='videoTimeline' data-index='" + this.index + "'>";
+  html += "<img src='" + this.timeline + "' class='timeline' />";
+  html += "</div>";
+*/ 
+  html += "<div class='videoMeta'>";
+  html += "Loading...";
+  html += "</div>";
+  html += "<div class='searchResults'></div>";
+  videoElem.html(html);
+  return videoElem;
+  }
+
+/*
+var Timeline = function(padmaVideo) {
+  this.videoId = padmaVideo.id;
+  this.layers = padmaVideo.layers;
+  this.url = padmaVideo.timeline;
+  this.e = $('.videoTimeline').find('@attr
+  }
+*/
+
+
+padmaVideo.prototype.init = function() {
+  var that = this;
+  $('#videos').append(that.wrapperHtml);
+  this.jq = $('#' + that.id);
+  this.loadData();
+  }
+
+padmaVideo.prototype.getLayerById = function(id) {
+  var that = this;
+  for (var i=0; i < that.layers.length; i++) {
+    var thisLayer = that.layers[i];
+    if (thisLayer.id == id) {
+      return thisLayer;
+    }
+  }
+  return false; 
+}
+
+padmaVideo.prototype.metaLoaded = function() {
+  var that = this;
+  $('#' + that.id + ' .videoMeta').html(that.meta.description_html);
+  }
+
+padmaVideo.prototype.layersLoaded = function() {
+  this.dataLoaded = true;
+  $('#bottomBar').fadeIn();
+/*  $('.videoTimeline').mousemove(function(e) {
+    var offset = $(this).offset();
+    var x = e.pageX - offset.left;
+    var y = e.pageY - offset.top;
+    var index = $(this).attr('data-id');
+    var thisVideo = padmaVideos[index];
+    });
+*/ 
+ }
+
+padmaVideo.prototype.loadData = function() {
+  var that = this;
+  var metaUrl = BASE_URL + that.id + "/video.js";
+  $.getScript(metaUrl, function() {
+    that.meta = video;
+    that.metaLoaded();
+    var layersUrl = BASE_URL + that.id + "/layers.js";
+    $.getScript(layersUrl, function() {
+      var theseLayers = layers;
+      for (var i=0; i < theseLayers.length; i++) {
+        var thisLayer = new padmaLayer(theseLayers[i], that);
+        that.layers.push(thisLayer);
+      }
+      that.layersLoaded();
+      });
+    });
+  }
+
+