padmatexts/padmaTexts/static/js/views/sidebar.js

var padmaContainer;

$(function() {
  padmaContainer = $('#padmaSidebar');
  padmaContainer.data("currentVideo", false);
  function resize() {
    var docWidth = $(document).width();
    var barsWidth = $('#leftBar').length > 0 ? 650 : 400;
    var essayWidth = docWidth - barsWidth;
    $('#essayWrapper').css("width", essayWidth);
  }
  resize();
  $(window).resize(resize);
});

function setupPadmaLink(videoObj, data) {
  var $a = $(data.jq);

//  $a.data("isDisplayed", false);

  //FIXME: tc is WRONG!!!
  if (!$.inArray(data.linkData.type, ["info", "editor", "tc", "tcRange", "layer"])) {
    return false;
  }
//    console.log(data.linkData);

  //FIXME: this whole thing is a bit of rubbish, and they should not set type = 'tcRange'
  if (data.linkData.type == 'info' || data.linkData.type == 'editor' || data.linkData.type == "tc") {
    data.linkData.tcIn = ms2npt(0);
    data.linkData.tcOut = ms2npt(videoObj.video.duration);
    data.linkData.type = "tcRange";
  }
  
  if (data.linkData.type == 'layer') {
//    console.log("LAYER");
//    console.log(data.linkData);
    var layer = videoObj.getLayerById(data.linkData.layerId);
//    console.log(videoObj);
    data.linkData.tcIn = ms2npt(layer.time_in);
    data.linkData.tcOut = ms2npt(layer.time_out);
    data.linkData.type = "tcRange";
  }

  var linkData = data.linkData;




  //FIXME: put this as a variable, option somewhere?
  var $container = padmaContainer;
  videoObj.currentLayers = [];

  var mid_frame_npt = ms2npt(parseInt((npt2ms(linkData.tcIn) + npt2ms(linkData.tcOut)) / 2));
//      console.log(mid_frame_npt);
  var thumbUrl = videoObj.getFrame(mid_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': videoObj, 'thumbUrl': thumbUrl, 'linkData': linkData});
//  $a.attr("title", title);
  $a.tooltip({
    bodyHandler: function() {
      return html;
    },
    showURL: false
  });

  $a.click(function(e) {


//    sidebarAnimateIn();
    e.preventDefault();
    var currentVideo = padmaContainer.data("currentVideo");

    if ($(this).hasClass("nowPlaying")) {     
      return;
    }

    if (currentVideo) {
      cleanupVideo(currentVideo);
    }
    $container.data("currentVideo", videoObj); 
    if (!isSidebarVisible()) {
      sidebarAnimateIn();
    }
    $('.nowPlaying').removeClass('nowPlaying');
    $(this).addClass("nowPlaying");
    videoObj.getLayersData(displayLayer, {'linkData': linkData});
//    $('#loading').show().fadeTo(0.5);
    
    function displayLayer(videoObj, data) {
//      $('#loading').fadeOut().hide();
      var linkData = data.linkData;
      var html = tmpl("tmpl_sidebar", {'video': videoObj, 'linkData': linkData});
      $('#padmaSidebarWrapper').html(html);
      $('#aboutTxt').hide();

      //FIXME: should be a better way to deal with displaying default layer.
      var currentLayers = videoObj.getLayersAtTimecode(npt2ms(linkData.tcIn));
//      var annotHtml = getLayersHtml(npt2ms(linkData.tcIn), ['transcript']);  
//      var transcripts = filterLayersByTracks(currentLayers, ['transcript']);

//      if (transcripts.length > 0) {
//        var annotHtml = transcripts[0].value_html;
//      } else {
//        var annotHtml = '';
//      }

//      $('.annotationText').html(annotHtml);
      var annotHeight = $(window).height() - 340;
      $('.annotationText').css({'height': annotHeight + "px"});
      var videoElem = $('video');
      var in_ms = npt2ms(linkData.tcIn);
      $('.annotationText').html(getLayersHtml(in_ms, padmaConfig.default_layers));
      videoElem.bind("loadedmetadata", function() {
        $(this).get(0).currentTime = parseInt(in_ms / 1000);
        $(this).get(0).play();
      });
      videoElem.bind("play", function() {
        var that = this
        var displayLayers = padmaConfig.default_layers;
        videoObj.interval = setInterval(function() {
          var currentTime = parseInt(that.currentTime * 1000);
          if (currentTime == 0) { return; } //Browser seems to return 0 as current time somewhere in between loadedmetadata, setting currentTime, and the play callback - this is a slightly silly hack - #FIXME.

//          console.log(currentTime);
          if (currentTime > npt2ms(linkData.tcOut)) {
            videoElem.get(0).pause();
            videoElem.trigger("ended");
            return;
          }
          var time_ms = currentTime; // + npt2ms(linkData.tcIn);
          var allLayers = videoObj.getLayersAtTimecode(time_ms);
          if (videoObj.currentLayers == allLayers) {
            return;
          }
          var html = getLayersHtml(time_ms, displayLayers);
          if (html != $('.annotationText').html()) {
            $('.annotationText').html(html);
          }
        }, 150);
      });

      videoElem.bind("pause", function() {
        clearInterval(videoObj.interval);
      });

      videoElem.bind("ended", function() {
        clearInterval(videoObj.interval);
        if (typeof $a.data("playlist") != 'undefined') {
          var playlist = $a.data("playlist");
          playlist.next();
        }
  //      cleanupVideo(videoObj);
  //      sidebarAnimateOut();
      });
    }
    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').fadeOut();
    }

    function sidebarAnimateOut() {
      $container.find('.padmaViewer').empty();
      $('#aboutTxt').show();
             
      /*
      $container.animate({'width': '0px'}, function() { 
        $(this).animate({'backgroundColor': '#ffffff'});
      });
      $('#essay').animate({'width': '100%'});
      */
    }


    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 += '<span class="padmaTrack">' + thisTrack + "s:</span><br />";
        }
        for (var i=0; i < thisTrackLayers.length; i++) {
          var thisTrack = thisTrackLayers[i];
          var thisHtml = '';
          thisHtml += " <span class='padmaAnnotation'>" + thisTrack.value_html + "</span>";
          thisHtml += "<br />";
          thisHtml += "<span class='padmaContributor'> -" + thisTrack.creator + "</span>";
          thisHtml += "<br /><br />";
          annotHtml += thisHtml;  
        }
      }
      return annotHtml;
    }

    function isSidebarVisible() {
      if (padmaContainer.width() > 0) {
        return true;
      } else {
        return false;
      }
    }
  });
}

//All functions that destroy the video must call this to ensure clean-ups are handled
// parameter is a padmaVideo object.
function cleanupVideo(videoObj) {
  $('video')[0].pause();
  $('video').unbind("play").unbind("ended").unbind("loadedmetadata");
  $('video').attr("src", "");
  clearInterval(videoObj.interval);
  $('.padmaViewer').remove();
  padmaContainer.data("currentVideo", false);
}