speedtrans/js/app.js

//init globals
//var seekBar;
var textArea;
var Video;
var filePath = false;
var videoListener;
var seekBar;
var globalUser;
var srtFilePath = undefined;
var videoPath = undefined;
var videoHash = undefined;

function adjustSize() {
  var baseHeight = $(window).height() - 24 - 16;
  $('#txt').height(baseHeight);
  var baseWidth = $(window).width() - 400 - 64;
  $('#txt').width(baseWidth);
}

Ox.load({
    UI: {theme: 'oxlight'},
}, function() {
  Ox.$body.show();
  globalUser = new User();
  adjustSize();
  $(document).keydown(function(e) {
    if (!Video)
      return; 
    //Esc
    if (e.keyCode == 27) {
      Video.togglePause();
      if (!textArea.hasFocus) {
        textArea.elem.focus();
      }
      e.preventDefault();
    }

    //The weird `~ key, currently in as a silly hack because Ranjana's Esc key does not work.
    if (e.keyCode == 192) {
      Video.togglePause();
      e.preventDefault();
    }

    //Ins or TAB
    if (e.keyCode == 45 || e.keyCode == 9) {
      if (!textArea.isTc()) {
        textArea.insertTc();
        return false;
      } else {
        return false;
      }
    }
    //Ctrl - Seek Back
    if (e.keyCode == 17) {
      var seekTime = parseInt(parseFloat($('#seekTime').val()) * 1000);
      var currTime = Video.get();
      var newTime = currTime - seekTime;
      Video.set(newTime);
    }
    //Alt - Seek Fwd.
    if (e.keyCode == 18) {
      var seekTime = parseInt(parseFloat($('#seekTime').val()) * 1000);
      var currTime = Video.get();
      var newTime = currTime + seekTime;
      Video.set(newTime);
    }

    //Space - togglePause if no focus on TA
    if (e.keyCode == 32 && textArea.hasFocus == false) {
      Video.togglePause();
    }

    //PageUp - volume Up:
    if (e.keyCode == 33) {
      Video.volUp();
      return false;
    }

    if (e.keyCode == 34) {
      Video.volDown();
      return false;
    }
  });
  $(window).bind('resize', adjustSize);
  var mainMenu = new Ox.MainMenu({
    extras: [],
    menus: [
          {
              id: "speedtrans",
              title: "SpeedTrans",
              items: [
                  { id: "about", title: "About" },
                  {},
                  { id: "contact", title: "Contact", disabled: true}
              ]
          },
          {
              id: "open",
              title: "Open",
              items: [
                  { id: "load_video", title: "Video", file: {width: 192}},
                  { id: "load_srt", title: "Open SRT File", file: {width: 192}},
              ]
          },
          {
              id: "save",
              title: "Save",
              items: [
                  { id: "save_srt", title: "Save SRT"},
              ]
          },
          {
              id: "edit",
              title: "Edit",
              items: [
                { id: "preferences", title: "Preferences" }
              ]
          },
          {
              id: "tools",
              title: "Tools",
              items: [
                  { id: "add_time", title: "Add / Subtract time and export", disabled: true },
                  { id: "export_encore", title: "Export Adobe Encore Subtitle Format" },
                  { id: "export_html", title: "Export HTML" },
                  {},
                  { id: "load_cuts", title: "Load cuts from pan.do/ra", disabled: false }
              ]
          },
          {
              id: "upload",
              title: "Upload",
              items: [
                  { id: "upload_padma", title: "Upload Transcript to Pad.ma", disabled: true }
              ]
          },
          {
              id: "help",
              title: "Help",
              items: [
                  { id: "shortcuts", title: "Keyboard Shortcuts" }
              ]
          }
      ],
      size: "large"
  })
    .css({'position': 'fixed', 'top': '0px', 'left': '0px', 'right': '0px', 'height': '20px'})
    .appendTo(Ox.$body)
    .bindEvent({
        click: function(data) {
            if (data.id == 'load_video') {
                saveTxt();
                videoPath = undefined;
                videoHash = undefined;
                srtFilePath = undefined;
                textArea.elem.val('');
                var path = data.files[0].name;
                if ($.inArray(getFileNameExt(path.toLowerCase()), [
                    'oga', 'ogg', 'ogv', 'ogx', 'wav', 'webm', 'mp4', 'm4v'
                ]) != -1) {
                  loadVideo(data.files[0]);
                } else {
                    alert('can only open video formats supported by browser');
                }
            } else if(data.id == 'about') {
                var html = Ox.tmpl("dialog_about", {});
                stDialog("About", html);
            } else if(data.id == 'preferences') {
                var prefs = globalUser.get_prefs(["fontSize", "theme", "autosave"]);
                var html = Ox.tmpl("dialog_preferences", {});
                stDialog("Preferences", html);
                $('.pref_select').each(function() {
                  var that = this;
                  var pref = $(this).attr("data-pref");
                  var prefVal = prefs[pref];
                  $(this).children('option').each(function() {
                    if ($(this).val() == prefVal) {
                      $(this).attr("selected", "selected");
                    }
                  });
                });
                $('.pref_select').change(function() {
                  var key = $(this).attr("data-pref");
                  var val = $(this).val();
                  globalUser.set_pref(key, val);
                });
            /*
                $('#pref_fontSize > option').each(function() {
                  if ($(this).val() == prefs.fontSize) {
                    $(this).attr("selected", "selected");
                  }
                });
                $('#pref_theme > option').each(function() {
                  if ($(this).val() == prefs.theme) {
                    $(this).attr("selected", "selected");
                  }
                });
            */  
            } else if(data.id == 'shortcuts') {
                var html = Ox.tmpl("dialog_shortcuts", {});
                stDialog("Keyboard Shortcuts", html);
            } else if(data.id == 'save_srt') {
                var content = textArea.toSrt();
                saveContent(content, 'text/plain', getFileNameSansExt(videoPath) + '.srt');
            } else if(data.id == 'load_srt') {
                loadSrt(data.files[0]);
            } else if(data.id == 'export_encore') {
                var content = textArea.toSrt("enc");
                saveContent(content, 'text/plain', getFileNameSansExt(videoPath) + '.enc.txt');
            } else if(data.id == 'export_html') {
                var content = textArea.toHTML();
                saveContent(content, 'text/html', getFileNameSansExt(videoPath) + '.html');
            } else if(data.id == 'load_cuts') {
                var html = Ox.tmpl("dialog_load_cuts");
                var loadDialog = Ox.Dialog({
                  buttons: [
                        Ox.Button({
                            title: "Cancel"
                        }).bindEvent({
                            click: function() {
                                loadDialog.close()
                            }
                        }),
                        Ox.Button({
                            title: "Load Cuts"
                        }).bindEvent({
                            click: function() {
                              var url = loadDialog.find('input')[0].value.trim();
                              var match = url.match(/(.*)\/([A-Z]+)$/);
                              if (match) {
                                loadCuts(match[1] + '/api/', match[2]);
                              }
                              loadDialog.close();
                            }
                        }),
                  ],
                  content: Ox.Element().append(html)
                }).open();
            }
        }
    });
  textArea = new TextArea("txt");
  textArea.elem.val('');
  globalUser.init();

  //autosave every 1 minute.
  window.autosaveInterval = setInterval(function() {
    if (typeof(videoHash) !== 'undefined') {
      saveTxt();
    }
  }, 60000);

});

function loadTxt() {
  var txt = globalUser.get_txt(videoHash);
  //console.log('loadTxt', videoHash, txt.length);
  textArea.elem.val(txt);
}

function saveTxt() {
  var content = textArea.toSrt();
  var txt = textArea.elem.val();
  //console.log('saveTxt', videoHash, txt.length);
  globalUser.set_txt(videoHash, txt);
}

function saveContent(content, type, path) {
    var uriContent = 'data:'+type+';base64,' + btoa(content);
    var pom = document.createElement('a');
    pom.setAttribute('href', content);
    pom.setAttribute('download', path);
    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    } else {
        pom.click();
    }
}

function stDialog(titleTxt, text) {
    var that = Ox.Dialog({
        buttons: [
            Ox.Button({
                title: "Close"
            }).bindEvent({
                click: function() {
                    that.close();
                }
            })
          ],
        title: titleTxt,
        content: Ox.Element().css({padding: '16px'}).append(text)
    }).open()
    return that;
}

function loadVideo(videoFile) {
  Ox.oshash(videoFile, function(hash) {
    videoHash = hash;
    var storageKey = 'txt_' + videoHash;
    if (storageKey in storage) {
      loadTxt();
    }
  });
  var videoUrl = URL.createObjectURL(videoFile);
  videoPath = videoFile.name;
  $('#video').attr("src", videoUrl);
  $('#filepath').text(videoFile.path);
  document.getElementById("video").load();
  $('#video').one("loadedmetadata", function() {
    Video = new VideoPlayer();
    Video.init("video");  
    Video.setDuration(Video.player.duration);  
    $('#insertTc').click(textArea.insertTc);
    videoListener = setInterval(Video.listener, 250);
  });
};


/*
Functions to generate preview while encoding: see http://firefogg.org/examples
*/
  //intialize interval to update preview and add event liseners.
  //any previous listeners and intervals are cleared
  var previewI=null;

  function seekToEnd() {
//    console.log("seeking to end of video");
    var v = document.getElementById('previewVideo');
    v.currentTime = v.duration-0.4;
  }
  //callback function render frame into canvas after seeking
  function getFrame() {
    var v = document.getElementById('previewVideo');
    var canvas = document.getElementById('previewCanvas');
    canvas.width = 400;
    canvas.height = canvas.width * v.videoHeight/v.videoWidth;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(v, 0, 0, canvas.width, canvas.height);
  }

/*
End Preview functions
*/


$(window).unload(function() {
    console.log('unload');
  if (typeof filePath != 'undefined' && typeof srtFilePath != 'undefined') {
    globalUser.set_prefs({
      'recentVideo': $('#video').attr("src").replace("file://", ""),
      'recentSrt': srtFilePath
    });
  }
  saveTxt();
});