speedtrans/js/app.js

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

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 = parseFloat($('#seekTime').val());
            var currTime = Video.get();
            var newTime = currTime - seekTime;
            Video.set(newTime);
        }
        //Alt - Seek Fwd.
        if (e.keyCode == 18) {
            var seekTime = parseFloat($('#seekTime').val());
            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;
                textArea.elem.val('');
                var path = data.files[0].name;
                var extension = Ox.last(path.toLowerCase().split('.'));
                if (Ox.contains([
                    'oga', 'ogg', 'ogv', 'ogx', 'wav', 'webm', 'mp4', 'm4v'
                ], extension)) {
                    loadVideo(data.files[0]);
                } else {
                        alert('You can only open videos in formats supported by the 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 (!Ox.isUndefined(videoHash)) {
            saveTxt();
        }
    }, 60000);

});

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

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

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

function saveContent(content, type, path) {
    var blob = new Blob([content], {type: type});
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = path;
    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        a.dispatchEvent(event);
    } else {
        a.click();
    }
    window.URL.revokeObjectURL(url);
}

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 localStorage) {
            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);
    });
};

$(window).unload(function() {
    saveTxt();
});