diff --git a/app.js b/app.js index 746ffb4..87ff9ef 100644 --- a/app.js +++ b/app.js @@ -17,9 +17,11 @@ function adjustSize() { $('#txt').width(baseWidth); } -$(document).ready(function() { - //alert("hi"); - globalUser = new User(); +Ox.load({ + UI: {theme: 'oxlight'}, +}, function() { + Ox.$body.show(); + globalUser = new User(); adjustSize(); $(document).keydown(function(e) { if (!Video) @@ -80,12 +82,6 @@ $(document).ready(function() { } }); $(window).bind('resize', adjustSize); - var loadingIcon = new Ox.LoadingIcon({ - size: "medium" - }) - .css({ - marginLeft: "4px" - }); var mainMenu = new Ox.MainMenu({ extras: [], menus: [ @@ -102,19 +98,15 @@ $(document).ready(function() { id: "open", title: "Open", items: [ - { id: "load_video", title: "Video"}, - { id: "load_srt", title: "Srt File"}, - {}, - { id: "convertvideo", title: "Convert and load Video", disabled: true } + { 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_txt", title: "Save" }, - { id: "save_srt", title: "Save Srt"}, - { id: "save_as", title: "Save Srt As.."} + { id: "save_srt", title: "Save SRT"}, ] }, { @@ -151,166 +143,112 @@ $(document).ready(function() { } ], size: "large" - }); - mainMenu.css({'position': 'fixed', 'top': '0px', 'left': '0px', 'right': '0px'}).appendTo('body'); + }) + .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) { + loadVideoObject(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(); + uriContent = 'data:text/plain;base64,' + btoa(Ox.encodeUTF8(content)); + saveContent(uriContent, videoPath + '.srt'); + } else if(data.id == 'load_srt') { + var filters = {'Srt files': '*.srt'}; + var fileObj = selectFile(filters); + if (fileObj) { + var srtPath = fileObj.file.path; + loadSrt(srtPath); + } + } else if(data.id == 'export_encore') { + var content = textArea.toSrt("enc"); + uriContent = 'data:text/plain;base64,' + btoa(Ox.encodeUTF8(content)); + saveContent(uriContent, videoPath + '.enc.txt'); + } else if(data.id == 'export_html') { + var content = textArea.toHTML(); + uriContent = 'data:text/html;base64,' + btoa(Ox.encodeUTF8(content)); + saveContent(uriContent, 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(''); - Ox.Event.bind(null, "click_load_video", function() { - saveTxt(); - videoPath = undefined; - videoHash = undefined; - srtFilePath = undefined; - textArea.elem.val(''); - var filters = {'Video Files': '*.dv;*.ogg;*.ogv;*.ogx;*.avi;*.mov;*.mp4;*.mpeg;*.mpg;*.vob;*.mp3;*.wav;*.webm;*.mkv;*.mts;*.m4v'}; - fileObject = selectFile(filters); - if (!fileObject) { return false; } - var path = fileObject.file.path; - - if ($.inArray(getFileNameExt(path.toLowerCase()), [ - 'oga', 'ogg', 'ogv', 'ogx', 'wav', 'webm', 'mp4', 'm4v' - ]) != -1) { - loadVideo(path); - } else { - if (typeof Firefogg != 'undefined') { - var encodeConfirmDialog = new Ox.Dialog({ - buttons: [ - {'value': 'Continue', 'click': function() { encodeVideo(fileObject.file); encodeConfirmDialog.close(); }}, - {'value': 'Cancel', 'click': function() { encodeConfirmDialog.close(); }} - ], - title: "Convert Video" - }); - var e = new Ox.Element(); - var html = "Video needs to be encoded. Continue? (may take some time)"; - e.html(html); - - // Ox.tmpl("dialog_encode_confirm", {'filename': path}); - // alert(html); - // e.html(html); - // e.from_tmpl("dialog_encode_confirm", {'filename': path }); - encodeConfirmDialog.append(e); - encodeConfirmDialog.open(); - // encodeVideo(fileObject.file); - } else { - stDialog("Download Firefogg", "You will need the Firefogg add-on to be able to import videos that are not in the Ogg Theora format. Once you install Firefogg, restart your browser and try opening the video again and you should be given an option to transcode the video."); - } - } - }); - - Ox.Event.bind(null, "click_about", function() { - var html = Ox.tmpl("dialog_about", {}); - stDialog("About", html); - }); - - Ox.Event.bind(null, "click_preferences", function() { - 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"); - } - }); -*/ - }); - - Ox.Event.bind(null, "click_shortcuts", function() { - var html = Ox.tmpl("dialog_shortcuts", {}); - stDialog("Keyboard Shortcuts", html); - }); - - Ox.Event.bind(null, "click_save_srt", function() { - if (typeof srtFilePath == 'undefined') { -// srtFilePath = filePath + ".srt"; - var path = mozillaSaveAs(); - if (path) { - srtFilePath = path; - } - } - saveSrt(srtFilePath); - }); - Ox.Event.bind(null, "click_load_srt", function() { - var filters = {'Srt files': '*.srt'}; - var fileObj = selectFile(filters); - if (fileObj) { - var srtPath = fileObj.file.path; - loadSrt(srtPath); - } - }); - Ox.Event.bind(null, "click_save_as", function() { - var path = mozillaSaveAs(); - if (path) { - srtFilePath = path; - saveSrt(path); - return true; - } - }); - - Ox.Event.bind(null, "click_export_html", function() { - var path = srtFilePath.replace(".srt", ".html"); - saveHTML(path); - }); - Ox.Event.bind(null, "click_load_cuts", function() { - var html = Ox.tmpl("dialog_load_cuts"); - var loadDialog = new Ox.Dialog({ - buttons: [ - {'value': 'Cancel', 'click': function() { - loadDialog.close(); - } - }, - {'value': 'Load Cuts', '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(); - } - } - ] - }).append(html).open(); - }); - - if (globalUser.get_pref("recentVideo") != '') { - var html = Ox.tmpl("dialog_load_video", globalUser.get_prefs(["recentVideo", "recentSrt"])); - var loadDialog = new Ox.Dialog({ - buttons: [ - {'value': 'Load Recent', 'click': function() { - var isRecent = true; - loadVideo(globalUser.get_pref("recentVideo"), isRecent); - loadDialog.close(); - } - }, - {'value': 'Load New', 'click': function() { - Ox.Event.trigger("click_load_video"); - loadDialog.close(); - } - } - ] - }).append(html).open(); - } else { - Ox.Event.trigger("click_load_video"); - } globalUser.init(); //autosave every 1 minute. @@ -335,55 +273,69 @@ function saveTxt() { globalUser.set_txt(videoHash, txt); } -//pass second argument = 'dont_confirm' to not show confirmation dialog. -function saveSrt(path) { - if (!path) { return } - var content = textArea.toSrt(); - var txt = textArea.elem.val(); - if (mozillaSaveFile(path, content)) { - if (arguments[1] != 'dont_confirm') { - stDialog("Saved File", "Saved File at " + path); - } - } else { - stDialog("Error Saving File", "Your file could not be saved. Please make a backup of your transcription and email b@pad.ma for help."); - } +function saveContent(content, path) { + 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 saveSrt() { + var content = textArea.toSrt(); + uriContent = 'data:text/plain;base64,' + btoa(Ox.encodeUTF8(content)); + saveContent(uriContent, videoPath + '.srt'); } function saveHTML(path) { - if (!path) { return } var content = textArea.toHTML(); - if (mozillaSaveFile(path, content)) { - if (arguments[1] != 'dont_confirm') { - stDialog("Saved File", "Saved File at " + path); - } - } else { - stDialog("Error Saving File", "Your file could not be saved. Please make a backup of your transcription and email b@pad.ma for help."); - } + uriContent = 'data:text/plain;base64,' + btoa(Ox.encodeUTF8(content)); + saveContent(uriContent, videoPath + '.html'); } - -function saveEncore() { - if (!filePath) { return } - var encPath = filePath + ".enc.txt"; - var content = textArea.toSrt("enc"); - if (mozillaSaveFile(encPath, content)) { - alert("saved encore compatible subtitle file at " + encPath); - } else { - alert("error creating encore compatible subtitle file"); - } +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 stDialog(titleTxt, text) { - var dialog = new Ox.Dialog({ - buttons: - [ - { value: "Close", click: function() { dialog.close(); } } - ], - title: titleTxt - }).append(text); - dialog.open(); - return dialog; -} +function loadVideoObject(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); + }); +}; + function loadVideo(videoFile, isRecent) { videoPath = videoFile; @@ -419,48 +371,6 @@ function loadVideo(videoFile, isRecent) { }); }; -function encodeVideo(file) { - var ogg = new Firefogg(); - if(!ogg.setInputVideo(file)) { - $('#encodingStatus').text('Could not select file.'); - return; - } - var options = JSON.stringify({'maxSize': 640, 'videoQuality': 5, 'audioQuality': 3, 'channels': 2, 'noUpscaling': true, 'videoCodec': 'vp8'}); - ogg.encode(options, function(result, video) { - result = JSON.parse(result); - if (result.progress != 1) { - $('#encodingStatus').text('Encoding failed.'); - } else { - statusDialog.close(); - loadVideo(oggPath); - } - }, function(progress, video) { - var v = document.getElementById('previewVideo'); - if(video && !v.src) { - v.removeEventListener("loadedmetadata", seekToEnd, true); - v.addEventListener("loadedmetadata", seekToEnd, true); - v.removeEventListener("seeked", getFrame, true); - v.addEventListener("seeked", getFrame, true); - v.src = URL.createObjectURL(video); - } - progress = JSON.parse(progress).progress || 0; - var percentProgress = parseInt(progress * 100); - $('#progressBar').css("width", percentProgress.toString() + "%"); - $('#encodedPercent').text(percentProgress.toString()); - }); - var oggPath = getFileNameSansExt(file.path) + ".webm"; - var statusDialog = new Ox.Dialog({ - title: 'Encoding Video', - buttons: [{ value: "Cancel", click: function() { window.location.reload(); } }], - height: 480, - width: 440 - }); - var e = new Ox.Element(); - e.from_tmpl("dialog_encoding", {'filename': file.path}); - statusDialog.append(e); - statusDialog.open(); -} - /* Functions to generate preview while encoding: see http://firefogg.org/examples diff --git a/classes.js b/classes.js index c147997..ebe5d72 100755 --- a/classes.js +++ b/classes.js @@ -1,14 +1,6 @@ var url = "http://speedtrans.pad.ma"; -var ios = Components.classes["@mozilla.org/network/io-service;1"] - .getService(Components.interfaces.nsIIOService); -var ssm = Components.classes["@mozilla.org/scriptsecuritymanager;1"] - .getService(Components.interfaces.nsIScriptSecurityManager); -var dsm = Components.classes["@mozilla.org/dom/storagemanager;1"] - .getService(Components.interfaces.nsIDOMStorageManager); -var uri = ios.newURI(url, "", null); -var principal = ssm.getCodebasePrincipal ? ssm.getCodebasePrincipal(uri) : ssm.getSimpleCodebasePrincipal(uri); -var storage = dsm.getLocalStorageForPrincipal(principal, ""); +var storage = window.localStorage; //elem = string (elementId to make TextArea) var TextArea = function(elem) { @@ -354,7 +346,7 @@ var User = function() { this.hostname = 'chrome://speedtrans'; this.defaults = { 'fontSize': '13', - 'theme': 'classic', + 'theme': 'oxlight', 'recentVideo': '', 'recentSrt': '', 'autosave': 5, @@ -366,11 +358,11 @@ var User = function() { textArea.elem.css("font-size", newSize + "px"); }, 'theme': function(theme) { - if(['modern', 'classic'].indexOf(theme) == -1) { - console.log('only supporting modern, classinc, but ' + theme + ' was requested'); - theme = 'classic'; + if(['oxdark', 'oxmedium', 'oxlight'].indexOf(theme) == -1) { + console.log('only supporting oxlight, oxmedium, oxdark, but ' + theme + ' was requested'); + theme = 'oxlight'; } - Ox.theme(theme); + Ox.Theme(theme); }, 'recentVideo': $.noop, 'recentSrt': $.noop, diff --git a/dnd.js b/dnd.js new file mode 100644 index 0000000..ec936d6 --- /dev/null +++ b/dnd.js @@ -0,0 +1,14 @@ +$(function() { + document.addEventListener('dragenter', function(event) { + event.preventDefault(); + }); + document.addEventListener('dragover', function(event) { + event.preventDefault(); + }); + document.addEventListener('drop', function(event) { + if (event.dataTransfer.files && event.dataTransfer.files.length) { + event.preventDefault(); + loadVideoObject(event.dataTransfer.files[0]) + } + }); +}); diff --git a/index.html b/index.html index 1b73639..bdc68cd 100755 --- a/index.html +++ b/index.html @@ -2,27 +2,19 @@ - - SpeedTrans - - + SpeedTrans + + - - - - - - - + - - + @@ -90,8 +82,9 @@ A transcribing and subtitling tool for Firefox. It is used for transcribing vide
Theme:
Text Direction: " ] || - - !tags.indexOf("", "" ] || - - tags.match(/^<(thead|tbody|tfoot|colg|cap)/) && - [ 1, "", "
" ] || - - !tags.indexOf("", "" ] || - - // matched above - (!tags.indexOf("", "" ] || - - !tags.indexOf("", "" ] || - - // IE can't serialize and