padmaEssay/taha.js

/*
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); 
}