padmaAPI/static/js/padmaLayer.js

var padmaLayer = function(json, video) {
  this.id = json.id;
  this.video = video.index; //FIXME: Kept for legacy, please clean up.
  this.padmaVideo = video;
  this.time_in = json.time_in;
  this.time_out = json.time_out;
  this.time_center = parseInt((this.time_in + this.time_out) / 2); 
  this.time_in_npt = ms2npt(this.time_in);
  this.time_out_npt = ms2npt(this.time_out);  
  this.time_center_npt = ms2npt(this.time_center);
  this.track = json.track;
  this.value = json.value;
  this.shortValue = this.value.substring(0,100); //FIXME
  this.value_html = json.value_html;
  this.creator = json.creator;
  var that = this;
  this.downloadUrl = PADMA_BASE_URL + "/" + this.padmaVideo.id + "/download/" + this.time_in_npt + "-" + this.time_out_npt + ".ogv";
  this.firstFrameStr = PADMA_BASE_URL + "/" + this.padmaVideo.id + "/frame/" + ms2npt(that.time_in);
  this.firstFrame128 = this.firstFrameStr + ".128.jpg";
  this.firstFrame320 = this.firstFrameStr + ".320.jpg";
  this.middleFrameStr = PADMA_BASE_URL + "/" + this.padmaVideo.id + "/frame/" + ms2npt(that.time_center);
  this.middleFrame128 = this.middleFrameStr + ".128.jpg";
  this.middleFrame320 = this.middleFrameStr + ".320.jpg";
  this.lastFrameStr = PADMA_BASE_URL + "/" + this.padmaVideo.id + "/frame/" + ms2npt(that.time_out);
  this.lastFrame128 = this.lastFrameStr + ".128.jpg";
  this.lastFrame320 = this.lastFrameStr + ".320.jpg";
  this.videoSrc128 = this.padmaVideo.meta.urls['128'] + "?t=" + this.time_in_npt;
  this.videoSrc320 = this.padmaVideo.meta.urls['320'] + "?t=" + this.time_in_npt;
//  this.videoSrc128 = PADMA_BASE_URL + "v/128/" + padmaVideos[this.video].id + ".ogv?t=" + ms2npt(that.time_in);
//  this.videoSrc320 = PADMA_BASE_URL + "v/320/" + padmaVideos[this.video].id + ".ogv?t=" + ms2npt(that.time_in);
}

padmaLayer.prototype.showResult = function(word) {
  var that = this;
//  alert(word);
  var html = tmpl("tmpl_layerResult", {'layer': that, 'word': word});
  this.resultJq = $('<div />').addClass("layerResult").addClass(that.track).attr("id", "layer" + that.id).html(html).data("layer", that);
  this.padmaVideo.jq.find(".searchResults").append(that.resultJq);
  return this;  
}

padmaLayer.prototype.addToClipBin = function() {
  var that = this;  
  var html = tmpl("tmpl_clip", {'layer': that});
  this.clipJq = $('<div />').addClass('padmaClip').attr("id", "clip" + that.id).data("layer", that).html(html);
  var height = Math.ceil(parseInt(that.padmaVideo.meta.stream_width) / that.padmaVideo.meta.aspectratio) + 16;
//  console.log(height);  
  $('#playBin').append(that.clipJq);
  this.clipJq.css({'height': height + "px"});
}

padmaLayer.prototype.getThumbElem = function() {
  var that = this;
  var e = $('<div />');
  e.addClass('matchedLayer');
  e.attr("id", that.id);
  var img = $('<img />');
  if (that.firstFrame128) {
    img.attr("src", that.firstFrame128);
    e.append(img);
  }
  e.attr("data-track", that.track);
  e.attr("data-value", that.value_html);
  e.mouseover(function() {
    var html = '';    
    html += padmaVideos[that.video].title;
    html += "<br />";
    html += $(this).attr('data-track');
    html += '<br />';
    html += $(this).attr('data-value');
    $('#resultDetails').html(html);
    }).mouseout(function() {
    $('#resultDetails').html('');
  });
  return e;
}

padmaLayer.prototype.getVideoElem = function() {
  var that = this;
  var e = $('<video />');
  e.attr("src", that.videoSrc128);
  e.attr("width", "128");
  e.attr("data-track", that.track);
  e.attr("data-value", that.value_html);
  e.mouseover(function() {
    var html = '';
    html += padmaVideos[that.video].title;
    html += "<br />";
    html += $(this).attr('data-track');
    html += '<br />';
    html += $(this).attr('data-value');
    $('#resultDetails').html(html);
    }).mouseout(function() {
    $('#resultDetails').html('');
  });    
  e.attr("poster", that.firstFrame128);
  return e;
}