var padmaContainer; $(function() { padmaContainer = $('#padmaSidebar'); padmaContainer.data("currentVideo", false); var docWidth = $(document).width(); var essayWidth = docWidth - 440; $('#essay').css("width", essayWidth); }); 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(parseInt((npt2ms(linkData.tcIn) + npt2ms(linkData.tcOut)) / 2)); // console.log(mid_frame_npt); 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"}); */ // $container.show(); $('#aboutTxt').hide(); } function sidebarAnimateOut() { $container.find('.padmaViewer').empty(); $('#aboutTxt').show(); /* $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); $('#aboutTxt').hide(); //FIXME: should be a better way to deal with displaying default layer. var currentLayers = video.getLayersAtTimecode(npt2ms(linkData.tcIn)); var transcripts = filterLayersByTracks(currentLayers, ['transcript']); // console.log(transcripts); if (transcripts.length > 0) { var annotHtml = transcripts[0].value_html; } else { var annotHtml = ''; } $('.annotationText').html(annotHtml); var closeBtn = $('
') .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() { clearInterval(videoObj.interval); // 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); }