2010-11-23 16:44:24 +00:00
|
|
|
var $padmaQuery = jQuery.noConflict();
|
|
|
|
|
|
|
|
|
|
|
|
(function($) {
|
|
|
|
var p = padmaConfig;
|
|
|
|
var padmaContainer;
|
|
|
|
var wikiContainer;
|
2010-11-05 22:51:50 +00:00
|
|
|
|
2010-11-23 16:44:24 +00:00
|
|
|
$(function() {
|
|
|
|
padmaContainer = $('<div />').attr("id", "padmaSidebar").css({'position': 'fixed', 'bottom': '0px', 'top': '0px', 'right': '0px', 'width': '0px', 'background': p.background, 'color': p.color}).appendTo('body');
|
|
|
|
padmaContainer.data("currentVideo", false);
|
|
|
|
wikiContainer = $('<div />').attr("id", "wikiWrapper").css({'width': '100%'});
|
|
|
|
$('body').wrapInner(wikiContainer);
|
2010-11-05 22:51:50 +00:00
|
|
|
});
|
|
|
|
|
2010-11-23 16:44:24 +00:00
|
|
|
function setupPadmaLink(videoObj, data) {
|
|
|
|
var $a = $(data.jq);
|
|
|
|
// $a.data("isDisplayed", false);
|
|
|
|
var linkData = data.linkData;
|
2010-11-05 22:51:50 +00:00
|
|
|
|
2010-11-23 16:44:24 +00:00
|
|
|
var $container = padmaContainer;
|
|
|
|
videoObj.currentLayers = [];
|
|
|
|
switch (linkData.type) {
|
|
|
|
case "tcRange":
|
|
|
|
var mid_frame_npt = ms2npt(parseInt((npt2ms(linkData.tcIn) + npt2ms(linkData.tcOut)) / 2));
|
|
|
|
var thumbUrl = videoObj.getFrame(mid_frame_npt);
|
|
|
|
default:
|
|
|
|
var frame_npt = ms2npt(videoObj.video.poster_frame);
|
|
|
|
var thumbUrl = videoObj.getFrame(frame_npt);
|
2010-11-05 22:51:50 +00:00
|
|
|
}
|
|
|
|
|
2010-11-23 16:44:24 +00:00
|
|
|
var html = videoObj.video.title + "<br />";
|
|
|
|
html += "<img src='" + thumbUrl + "' /> <br />";
|
|
|
|
html += "Click to Play";
|
|
|
|
$a.tooltip({
|
|
|
|
bodyHandler: function() {
|
|
|
|
return html;
|
|
|
|
},
|
|
|
|
showURL: false
|
|
|
|
});
|
|
|
|
|
|
|
|
$a.click(function(e) {
|
2010-11-05 22:51:50 +00:00
|
|
|
|
2010-11-23 16:44:24 +00:00
|
|
|
function sidebarAnimateIn() {
|
|
|
|
$container.show();
|
|
|
|
$container.animate({'width': '400px'});
|
|
|
|
var docWidth = $(document).width();
|
|
|
|
var newWidth = docWidth - 440;
|
|
|
|
$('#wikiWrapper').animate({'width': newWidth + "px"});
|
2010-11-05 22:51:50 +00:00
|
|
|
}
|
2010-11-23 16:44:24 +00:00
|
|
|
|
|
|
|
function sidebarAnimateOut() {
|
|
|
|
$container.animate({'width': '0px'}).hide();
|
|
|
|
sidebarWrap.remove();
|
|
|
|
$('#wikiWrapper').animate({'width': '100%'});
|
|
|
|
cleanupVideo(videoObj);
|
2010-11-05 22:51:50 +00:00
|
|
|
}
|
2010-11-23 16:44:24 +00:00
|
|
|
|
|
|
|
function isSidebarVisible() {
|
|
|
|
if (padmaContainer.width() > 0) {
|
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
return false;
|
2010-11-05 22:51:50 +00:00
|
|
|
}
|
2010-11-23 16:44:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
var currentVideo = $container.data("currentVideo");
|
|
|
|
if (currentVideo) {
|
|
|
|
cleanupVideo(currentVideo);
|
|
|
|
}
|
|
|
|
$container.data("currentVideo", videoObj);
|
|
|
|
if (!isSidebarVisible()) {
|
|
|
|
sidebarAnimateIn();
|
|
|
|
}
|
|
|
|
padmaContainer.empty();
|
|
|
|
var sidebarWrap = $('<div />').attr("id", "padmaSidebarWrapper").css({'position': 'relative'}).appendTo($container);
|
|
|
|
var videoElem = $('<video />').addClass('padmaVideo').attr("src", videoObj.getLayerVideo(linkData.tcIn, linkData.tcOut)).attr("autoplay", "autoplay").attr("controls", "controls").appendTo(sidebarWrap).css({'width': '400px'});
|
|
|
|
var annotHeight = $(document).height() - 300;
|
|
|
|
var annotations = $('<div />').addClass('annotationText').css({'height': annotHeight + "px", "overflow-y": "auto"}).appendTo(sidebarWrap);
|
|
|
|
var html = getLayersHtml(npt2ms(linkData.tcIn), p.default_layers);
|
|
|
|
$('.annotationText').html(html);
|
|
|
|
|
|
|
|
//tc in ms
|
|
|
|
//tracks is an array like ['transcript', 'description']
|
|
|
|
function getLayersHtml(tc, tracks) {
|
|
|
|
//FIXME: This code is retarded, but we do want a way to group transcripts, descriptions, etc.
|
|
|
|
var currentLayers = videoObj.getLayersAtTimecode(tc);
|
|
|
|
var annotLayers = [];
|
|
|
|
var annotHtml = '';
|
|
|
|
for (var t=0; t < tracks.length; t++) {
|
|
|
|
var thisTrack = tracks[t];
|
|
|
|
var thisTrackLayers = filterLayersByTracks(currentLayers, [thisTrack]);
|
|
|
|
if (thisTrackLayers.length > 0) {
|
|
|
|
annotHtml += thisTrack + "s<br />";
|
|
|
|
}
|
|
|
|
for (var i=0; i < thisTrackLayers.length; i++) {
|
|
|
|
var thisTrack = thisTrackLayers[i];
|
|
|
|
var thisHtml = '';
|
|
|
|
thisHtml += "<span class='padmaContributor'>" + thisTrack.creator + ":</span>";
|
|
|
|
thisHtml += " <span class='padmaAnnotation'>" + thisTrack.value_html + "</span>";
|
|
|
|
thisHtml += "<br /><br />";
|
|
|
|
annotHtml += thisHtml;
|
|
|
|
}
|
2010-11-06 17:10:29 +00:00
|
|
|
}
|
2010-11-23 16:44:24 +00:00
|
|
|
return annotHtml;
|
|
|
|
}
|
2010-11-05 22:51:50 +00:00
|
|
|
|
|
|
|
|
2010-11-23 16:44:24 +00:00
|
|
|
var closeBtn = $('<div />')
|
|
|
|
.addClass("closeBtn")
|
|
|
|
.click(function() {
|
|
|
|
sidebarAnimateOut();
|
|
|
|
})
|
|
|
|
.text("x")
|
|
|
|
.appendTo(sidebarWrap)
|
|
|
|
.css({'position': 'absolute', 'top': '2px', 'right': '2px', 'cursor': 'pointer', 'z-index': '100'});
|
|
|
|
|
|
|
|
videoElem.bind("play", function() {
|
|
|
|
var that = this
|
|
|
|
videoObj.interval = setInterval(function() {
|
|
|
|
var currentTime = parseInt(that.currentTime * 1000);
|
|
|
|
var time_ms = currentTime + npt2ms(linkData.tcIn);
|
|
|
|
var html = getLayersHtml(time_ms, p.default_layers);
|
|
|
|
if (html != $('.annotationText').html()) {
|
|
|
|
$('.annotationText').html(html);
|
|
|
|
}
|
|
|
|
}, 150);
|
|
|
|
});
|
|
|
|
|
|
|
|
videoElem.bind("pause", function() {
|
|
|
|
clearInterval(videoObj.interval);
|
|
|
|
});
|
|
|
|
|
|
|
|
videoElem.bind("ended", function() {
|
|
|
|
clearInterval(videoObj.interval);
|
|
|
|
// cleanupVideo(videoObj);
|
|
|
|
// sidebarAnimateOut();
|
|
|
|
});
|
|
|
|
|
2010-11-05 22:51:50 +00:00
|
|
|
});
|
|
|
|
|
2010-11-23 16:44:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
window.setupPadmaLink = setupPadmaLink;
|
|
|
|
|
|
|
|
//All functions that destroy the video must call this to ensure clean-ups are handled
|
|
|
|
// parameter is a padmaVideo object.
|
|
|
|
function cleanupVideo(videoObj) {
|
|
|
|
if ($('.padmaVideo').length > 0) {
|
|
|
|
// console.log("cleaning");
|
|
|
|
$('.padmaVideo').get(0).pause();
|
|
|
|
$('.padmaVideo').remove();
|
|
|
|
}
|
|
|
|
clearInterval(videoObj.interval);
|
|
|
|
// $('.padmaViewer').remove();
|
|
|
|
padmaContainer.data("currentVideo", false);
|
|
|
|
}
|
2010-11-05 22:51:50 +00:00
|
|
|
|
2010-11-23 16:44:24 +00:00
|
|
|
})(jQuery);
|