search implemented, but is foobar. i sleep

static/css/padmaList.css

@@ -16,6 +16,10 @@
   text-align: center;
   }
 
+.matchedLayer {
+  float: left;
+  }
+
 .videoMeta {
   clear: left;
   }
@@ -24,3 +28,37 @@
   margin: 5px;
   float: left;
   }
+
+#bottomBar {
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  height: 30px;
+  width: 100%;
+  background: #000;
+  color: #fff;
+  display: none;
+  }
+
+#searchDiv {
+  margin-right: 20px;
+  text-align: right;
+  }
+
+#search {
+  width: 75%;
+  height: 16px;
+  }
+
+#resultWrapper {
+  position: fixed;
+  top: 0px;
+  left: 10%;
+  width: 80%;
+  }
+
+#resultDetails {
+  background: #333;
+  color: #ccc;
+  clear: both;
+  }

static/js/padmaList.js

@@ -1,15 +1,116 @@
 $(document).ready(function() {
   var apiUrl = "/list/videos?listId=" + listId;
   callPadma(apiUrl, initList);
+  prevSearchTerms = [];
+  $('#search').keyup(function() {
+    var val = $(this).val();
+    if (val == '') {
+      $('#results').html('');
+      }
+    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);
+        }
+      } 
     });
+  });
+
+function doSearch(word) {
+  var matchingLayers = findMatchingLayers(word);
+  for (var l in matchingLayers) {
+    var layer = matchingLayers[l];
+    var imgPath = layer.firstFrame128;
+    var html = layer.getThumbElem();
+//    var imgHtml = "<img src='" + imgPath + "' />";
+    $('#results').append(html);
+    }
+  }
+
+function findMatchingLayers(word) {
+  var matchedLayers = [];
+  for (var v in padmaVideos) {
+    var layers = padmaVideos[v].layers;
+    for (var l in layers) {
+      if (layers[l].value) {
+        var val = layers[l].value;
+        if (val.indexOf(word) != -1) {
+          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;
+  };
+
+var padmaLayer = function(json, videoIndex) {
+  this.id = json.id;
+  this.video = videoIndex;
+  this.time_in = json.time_in;
+  this.time_out = json.time_out;
+  this.track = json.track;
+  this.value = json.value;
+  this.value_html = json.value_html;
+  this.creator = json.creator;
+  var that = this;
+  this.firstFrameStr = "http://pad.ma/" + padmaVideos[this.video].id + "/frame/" + ms2npt(that.time_in);
+  this.firstFrame128 = this.firstFrameStr + ".128.jpg";
+  this.firstFrame320 = this.firstFrameStr + ".320.jpg";
+  this.lastFrameStr = "http://pad.ma/" + padmaVideos[this.video].id + "/frame/" + ms2npt(that.time_out);
+  this.lastFrame128 = this.lastFrameStr + ".128.jpg";
+  this.lastFrame320 = this.lastFrameStr + ".320.jpg";
+  }
+
+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;
+  }
 
 var padmaVideo = function(json, index) {
   this.id = json.id;
   this.index = index;
   this.title = json.title; 
   this.poster = "http://pad.ma/" + this.id + "/poster.jpg";
+  this.timeline = "http://pad.ma/" + this.id + "/timeline.png";
   this.wrapperHtml = this.getWrapperHtml()
   this.init();
+  this.dataLoaded = false;
   }
 
 padmaVideo.prototype.getWrapperHtml = function() {
@@ -24,6 +125,9 @@ padmaVideo.prototype.getWrapperHtml = function() {
   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>";
@@ -43,7 +147,16 @@ padmaVideo.prototype.metaLoaded = function() {
   }
 
 padmaVideo.prototype.layersLoaded = function() {
-  return true;
+  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() {
@@ -68,3 +181,32 @@ function initList(json) {
     padmaVideos.push(thisVideo);
     }
   }
+
+
+/**
+* Returns time-code in npt format from pos in miliseconds
+* @param {Int} pos Position in miliseconds
+* @returns {String} Time-code in npt format.
+*/
+function ms2npt(pos) {
+    var h = Math.floor(pos / 3600000);
+    var m = Math.floor(pos % 3600000 / 60000);
+    var s = Math.floor(pos % 60000 / 1000);
+    var ms = pos % 1000;
+    return h.toString().pad('0', 2) + ':' + m.toString().pad('0', 2) + ':' + s.toString().pad('0', 2) + '.' + ms.toString().pad('0', 3);
+    // return strpad(h.toString(), '0', 2, 'left') + ':' + strpad(m.toString(), '0', 2, 'left') + ':' + strpad(s.toString(), '0', 2, 'left') + '.' + strpad(ms.toString(), '0', 3, 'left');
+}
+
+String.prototype.pad = function(pad, len, dir) {
+    if (typeof(dir) == 'undefined')
+        dir = 'left';
+    var str = this;
+    while (str.length < len) {
+        if (dir == 'left')
+            str = pad + str;
+        else if (dir == 'right')
+            str = str + pad;
+    }
+    return str;
+}
+

static/js/padmaLists.js

@@ -4,7 +4,6 @@ $(document).ready(function() {
   callPadma("/list/get", initLists);
   });
 
-
 var padmaList = function(json) {
   this.listId = json.listId;
   this.description = json.description;
@@ -28,7 +27,6 @@ padmaList.prototype.getHtml = function() {
   titleElem.attr("id", this.listId);
   titleElem.addClass("listTitle");
   var titleHtml = "<a href='/list?id=" + this.listId + "'>" + this.title + "</a>"; 
-  console.log(titleHtml);
   titleElem.html(titleHtml);
   titleElem.hover(function() {
     $(this).next().show();
@@ -56,7 +54,6 @@ padmaList.prototype.getHtml = function() {
 function initLists(json) {
   var allLists = json['lists']
   for (l in allLists) {
-    console.log(allLists[l]);
     var list = new padmaList(allLists[l]);
 //    padmaLists.push(list);
     } 

templates/list.html

@@ -11,10 +11,23 @@ var listId = "{{ listId|escapejs }}"
 
 {% block body %}
 <div id="wrapper">
+  <div id="resultWrapper">
+    <div id="results">
+    
+    </div>
+    <div id="resultDetails">
+    </div>
+  </div>
   <div id="videos">
 
   </div>
-
+  <div id="buffer">
+  <br /><br /><br /><br />
+  </div>
+<div id="bottomBar">
+  <div id="searchDiv">
+    Search: <input type="text" id="search" />
+  </div>
 </div>
 
 {% endblock %}