From 32d626339230d73617b4607ef7a27b3530120f6d Mon Sep 17 00:00:00 2001 From: Sanjay B Date: Mon, 15 Jun 2009 06:04:10 +0530 Subject: [PATCH] search implemented, but is foobar. i sleep --- static/css/padmaList.css | 38 ++++++++++ static/js/padmaList.js | 146 ++++++++++++++++++++++++++++++++++++++- static/js/padmaLists.js | 3 - templates/list.html | 15 +++- 4 files changed, 196 insertions(+), 6 deletions(-) diff --git a/static/css/padmaList.css b/static/css/padmaList.css index 809a2a1..a2c84b4 100644 --- a/static/css/padmaList.css +++ b/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; + } diff --git a/static/js/padmaList.js b/static/js/padmaList.js index 2d40b3c..23d6a1e 100644 --- a/static/js/padmaList.js +++ b/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 = ""; + $('#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 = $('
'); + e.addClass('matchedLayer'); + e.attr("id", that.id); + var 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 += "
"; + html += $(this).attr('data-track'); + html += '
'; + 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 += "
"; html += ""; html += "
"; + html += "
"; + html += ""; + html += "
"; html += "
"; html += "Loading..."; html += "
"; @@ -43,8 +147,17 @@ 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() { var that = this; @@ -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; +} + diff --git a/static/js/padmaLists.js b/static/js/padmaLists.js index f9f9f22..707dfd7 100644 --- a/static/js/padmaLists.js +++ b/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 = "" + this.title + ""; - 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); } diff --git a/templates/list.html b/templates/list.html index efd1d59..ff99141 100644 --- a/templates/list.html +++ b/templates/list.html @@ -11,10 +11,23 @@ var listId = "{{ listId|escapejs }}" {% block body %}
+
+
+ +
+
+
+
- +
+



+
+
+
+ Search: +
{% endblock %}