124 lines
3.4 KiB
JavaScript
124 lines
3.4 KiB
JavaScript
var padmaContainer;
|
|
|
|
$(function() {
|
|
padmaContainer = $('#padmaSidebar');
|
|
padmaContainer.data("currentVideo", false);
|
|
});
|
|
|
|
function setupPadmaLink(video, data) {
|
|
var $a = $(data.jq);
|
|
// $a.data("isDisplayed", false);
|
|
var linkData = data.linkData;
|
|
|
|
//FIXME: put this as a variable, option somewhere?
|
|
var $container = padmaContainer;
|
|
video.currentLayers = [];
|
|
switch (linkData.type) {
|
|
case "tcRange":
|
|
var mid_frame_npt = ms2npt((npt2ms(linkData.tcIn) + npt2ms(linkData.tcOut)) / 2);
|
|
var thumbUrl = video.getFrame(mid_frame_npt);
|
|
default:
|
|
var frame_npt = ms2npt(video.video.poster_frame);
|
|
var thumbUrl = video.getFrame(frame_npt);
|
|
}
|
|
|
|
//FIXME: Html may need to be conditional on linkData.type, probably put html in switch case above.
|
|
var html = tmpl("tmpl_tooltip", {'video': video, 'thumbUrl': thumbUrl, 'linkData': linkData});
|
|
// $a.attr("title", title);
|
|
$a.tooltip({
|
|
bodyHandler: function() {
|
|
return html;
|
|
},
|
|
showURL: false
|
|
});
|
|
|
|
$a.click(function(e) {
|
|
|
|
function sidebarAnimateIn() {
|
|
$container.animate({'width': '400px'}, function() {
|
|
$(this).animate({'backgroundColor': '#000000'});
|
|
});
|
|
var docWidth = $(document).width();
|
|
var newWidth = docWidth - 440;
|
|
$('#essay').animate({'width': newWidth + "px"});
|
|
}
|
|
|
|
function sidebarAnimateOut() {
|
|
$container.animate({'width': '0px'}, function() {
|
|
$(this).animate({'backgroundColor': '#ffffff'});
|
|
});
|
|
$('#essay').animate({'width': '100%'});
|
|
}
|
|
|
|
function isSidebarVisible() {
|
|
if (padmaContainer.width() > 0) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
// sidebarAnimateIn();
|
|
e.preventDefault();
|
|
var currentVideo = $container.data("currentVideo");
|
|
if (currentVideo == video) {
|
|
if (!isSidebarVisible()) {
|
|
sidebarAnimateIn();
|
|
}
|
|
return;
|
|
}
|
|
if (currentVideo) {
|
|
cleanupVideo(currentVideo);
|
|
}
|
|
$container.data("currentVideo", video);
|
|
if (!isSidebarVisible()) {
|
|
sidebarAnimateIn();
|
|
}
|
|
var html = tmpl("tmpl_sidebar", {'video': video, 'linkData': linkData});
|
|
$('#padmaSidebarWrapper').html(html);
|
|
var closeBtn = $('<div />')
|
|
.addClass("close")
|
|
.click(function() {
|
|
sidebarAnimateOut();
|
|
})
|
|
.text("x")
|
|
.appendTo('.padmaViewer');
|
|
var videoElem = $('video');
|
|
var videoObj = video;
|
|
|
|
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 allLayers = videoObj.getLayersAtTimecode(time_ms);
|
|
if (videoObj.currentLayers == allLayers) {
|
|
return;
|
|
}
|
|
// GLOBAL_FOO = allLayers;
|
|
var transcript = filterLayersByTracks(allLayers, ['transcript'])[0].value_html;
|
|
$('.annotationText').html(transcript);
|
|
}, 150);
|
|
});
|
|
|
|
videoElem.bind("pause", function() {
|
|
clearInterval(videoObj.interval);
|
|
});
|
|
|
|
videoElem.bind("ended", function() {
|
|
cleanupVideo(videoObj);
|
|
sidebarAnimateOut();
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
//All functions that destroy the video must call this to ensure clean-ups are handled
|
|
//FIXME: actually handle the cleanups.
|
|
// parameter is a padmaVideo object.
|
|
function cleanupVideo(video) {
|
|
clearInterval(video.interval);
|
|
$('.padmaViewer').remove();
|
|
padmaContainer.data("currentVideo", false);
|
|
}
|