104 lines
2.6 KiB
JavaScript
104 lines
2.6 KiB
JavaScript
|
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();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|