99 lines
3.4 KiB
JavaScript
99 lines
3.4 KiB
JavaScript
/*
|
|
function displayPadmaURL(linkData, elem, opts) {
|
|
if (linkData.type == 'tcRange') {
|
|
var videoId = linkData.videoId;
|
|
|
|
}
|
|
}
|
|
*/
|
|
|
|
/*
|
|
$(function() {
|
|
var docHeight = $('#essay').height();
|
|
$('#padmaSidebar').css('height', (docHeight + 50) + "px");
|
|
});
|
|
*/
|
|
|
|
function setupPadmaLink(video, data) {
|
|
console.log(data);
|
|
// console.log(data);
|
|
var jq = $(data.jq);
|
|
var linkData = data.linkData;
|
|
jq.data("video", video);
|
|
jq.data("linkData", linkData);
|
|
jq.data("videoDisplayed", false);
|
|
jq.mouseover(function() {
|
|
// console.log("mouse");
|
|
if ($(this).data("videoDisplayed") == false) {
|
|
var $that = $(this);
|
|
var video = $(this).data("video");
|
|
var linkData = $(this).data("linkData");
|
|
var parentP = $(this).parents('p');
|
|
var appendElem = $('<div />').addClass('padmaVideo').data("sourceElem", $that).appendTo(parentP).appendTo(parentP);
|
|
var wrapperElem = $('<div />').addClass('padmaWrapper').appendTo(appendElem);
|
|
var videoElem = $('<video />').attr("src", video.getLayerVideo(linkData.tcIn, linkData.tcOut)).attr("controls", true).css("width", "320px").appendTo(wrapperElem);
|
|
var annotElem = $('<div />').addClass('annotation').insertAfter(videoElem);
|
|
var closeBtn = $('<div />').html('x').addClass('closeButton').appendTo(wrapperElem);
|
|
|
|
videoElem.bind("play", function() {
|
|
var that = this;
|
|
var videoObj = $(this).closest('.padmaVideo').data("sourceElem").data("video");
|
|
videoObj.currentLayers = '';
|
|
videoObj.interval = setInterval(function() {
|
|
var currentTime = parseInt(that.currentTime * 1000);
|
|
var time_ms = currentTime + npt2ms(linkData.tcIn);
|
|
var allLayers = videoObj.getLayersAtTimecode(time_ms);
|
|
var layers = filterLayersByTracks(allLayers, ['transcript']);
|
|
var html = tmpl("tmpl_layers", {'layers': layers});
|
|
if (videoObj.currentlyDisplayedLayers == layers) {
|
|
return;
|
|
} else {
|
|
annotElem.html(html);
|
|
videoObj.currentlyDisplayedLayers = layers;
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
videoElem.bind("pause", function() {
|
|
var that = this;
|
|
var videoObj = $(this).closest(".padmaVideo").data("sourceElem").data("video");
|
|
clearInterval(videoObj.interval);
|
|
});
|
|
// var html = tmpl("tmpl_" + linkData.type, {'video': video, 'linkData': linkData});
|
|
|
|
videoElem.bind("ended", function() {
|
|
var that = this;
|
|
closeBtn.click();
|
|
});
|
|
|
|
appendElem.slideDown();
|
|
$(this).data("videoDisplayed", true);
|
|
} else {
|
|
var padmaElem = $(this).parents('p').find('.padmaWrapper');
|
|
if (!padmaElem.is(":visible")) {
|
|
padmaElem.slideDown();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
$('.closeButton').live("click", function() {
|
|
$(this).parents('.padmaWrapper').slideUp();
|
|
});
|
|
|
|
function setupSidenotes(video, data) {
|
|
console.log(video, data);
|
|
var ld = data.linkData;
|
|
if (ld.type != 'tcRange') { return false; }
|
|
var a = $(data.jq);
|
|
// AAA = a;
|
|
var aTop = parseInt(a.offset().top);
|
|
if (data.linkData.type == 'tcRange') {
|
|
var thumb = video.getFrame(ld.tcIn);
|
|
var title = video.video.title;
|
|
}
|
|
var containerElem = $('<div />').addClass('padmaThumb').css('top', aTop + "px").appendTo("#padmaSidebarRelative");
|
|
var imgElem = $('<img />').attr('src', thumb).attr('title', title).appendTo(containerElem);
|
|
}
|
|
|