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