added js files
This commit is contained in:
sanj
parent
67dc10565f
commit
794febfc6d
93
static/js/padmaLayer.js
Normal file
93
static/js/padmaLayer.js
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
112
static/js/padmaSearch.js
Normal file
112
static/js/padmaSearch.js
Normal file
|
|
@ -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;
|
||||||
|
};
|
||||||
|
|
||||||
103
static/js/padmaVideo.js
Normal file
103
static/js/padmaVideo.js
Normal file
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user