search implemented, but is foobar. i sleep
This commit is contained in:
Sanjay B
parent
ff6afd480c
commit
32d6263392
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user