From 7743617aace49a0c9150da6d7f42ef13c832145e Mon Sep 17 00:00:00 2001 From: Sanjay B Date: Mon, 4 Mar 2013 14:14:48 +0530 Subject: [PATCH] split up js into multiple files --- js/speedtrans.js | 9 ++- js/ui/appPanel.js | 18 +++++ js/ui/helpPanel.js | 6 ++ js/ui/mainMenu.js | 66 ++++++++++++++++ js/ui/mainPanel.js | 18 +++++ js/ui/openRemoteDialog.js | 62 +++++++++++++++ js/ui/textArea.js | 155 ++++++++++++++++++++++++++++++++++++++ js/ui/textPanel.js | 16 ++++ js/ui/textToolBar.js | 4 + js/ui/videoPanel.js | 16 ++++ js/ui/videoPlayer.js | 22 ++++++ 11 files changed, 390 insertions(+), 2 deletions(-) create mode 100644 js/ui/appPanel.js create mode 100644 js/ui/helpPanel.js create mode 100644 js/ui/mainMenu.js create mode 100644 js/ui/mainPanel.js create mode 100644 js/ui/openRemoteDialog.js create mode 100644 js/ui/textArea.js create mode 100644 js/ui/textPanel.js create mode 100644 js/ui/textToolBar.js create mode 100644 js/ui/videoPanel.js create mode 100644 js/ui/videoPlayer.js diff --git a/js/speedtrans.js b/js/speedtrans.js index 3f79f02..5e2a81c 100644 --- a/js/speedtrans.js +++ b/js/speedtrans.js @@ -37,8 +37,13 @@ }); } var prefix = "js/"; - - Ox.getFile([prefix + "pandora-ui.js"], function() { + var files = ['appPanel', 'mainMenu', 'mainPanel', 'videoPanel', 'videoPlayer', 'openRemoteDialog', 'helpPanel', 'textPanel', 'textArea', 'textToolBar']; + var prefix = "js/ui/"; + var filesToLoad = Ox.map(files, function(v) { + return prefix + v + ".js"; + }); + //console.log(filesToLoad); + Ox.getFile(filesToLoad, function() { initSpeedtrans(); }); } diff --git a/js/ui/appPanel.js b/js/ui/appPanel.js new file mode 100644 index 0000000..d789894 --- /dev/null +++ b/js/ui/appPanel.js @@ -0,0 +1,18 @@ +pandora.ui.appPanel = function() { + var that = Ox.SplitPanel({ + elements: [ + { + element: pandora.$ui.mainMenu = pandora.ui.mainMenu(), + size: 20 + }, + { + element: pandora.$ui.mainPanel = pandora.ui.mainPanel() + } + ], + orientation: 'vertical' + }); + + return that; +} + + diff --git a/js/ui/helpPanel.js b/js/ui/helpPanel.js new file mode 100644 index 0000000..b7ad555 --- /dev/null +++ b/js/ui/helpPanel.js @@ -0,0 +1,6 @@ + +pandora.ui.helpPanel = function() { + var that = Ox.Element().text("Help Panel"); + return that; +}; + diff --git a/js/ui/mainMenu.js b/js/ui/mainMenu.js new file mode 100644 index 0000000..7e3fc7b --- /dev/null +++ b/js/ui/mainMenu.js @@ -0,0 +1,66 @@ +pandora.ui.mainMenu = function() { + var that = Ox.MainMenu({ + extras: [], + id: 'mainMenu', + menus: [ + { + 'id': 'speedtransMenu', + 'title': 'Speedtrans', + 'items': [ + { id: 'TestMenu1', title: 'Test Menu Item'}, + { id: 'TestMenu2', title: 'Test Menu Itemm'} + ] + + }, + { + 'id': 'fileMenu', + 'title': 'File', + 'items': [ + { id: 'openLocalFileMenu', title: 'Open Local File', 'file': { + 'maxFiles': 1 + } + }, + { id: 'openRemoteFileMenu', title: 'Open online pan.do/ra file'}, + { id: 'saveFileMenu', title: 'Save File', keyboard: 'shift control s'} + ] + } + + ] + }) + .bindKeyboard() + .bindEvent({ + click: function(data) { +// Ox.print(data); + var selected = data.id; + if (data.id == 'saveFileMenu') { + pandora.$ui.textArea.speedtrans.save(); + // speedtrans.saveFile(); + } else if (data.id == 'openLocalFileMenu') { + var file = data.files[0]; + Ox.oshash(file, function(oshash) { + console.log(oshash); + var url = window.URL.createObjectURL(file); + var options = { + 'type': 'local', + 'url': url, + 'name': oshash + } + pandora.$ui.textArea.speedtrans.load(options); + }); + //console.log(data.files[0]); + + } else if (data.id == 'openRemoteFileMenu') { + pandora.$ui.openRemoteDialog = pandora.ui.openRemoteDialog().open(); + + } else if (data.id == 'TestMenu1') { + alert("clicked TestMenu1"); + } + }, + key_control_shift_s: function() { + pandora.$ui.textArea.speedtrans.save(); + } + }); + + return that; +} + diff --git a/js/ui/mainPanel.js b/js/ui/mainPanel.js new file mode 100644 index 0000000..bb83053 --- /dev/null +++ b/js/ui/mainPanel.js @@ -0,0 +1,18 @@ +pandora.ui.mainPanel = function() { + var that = Ox.SplitPanel({ + elements: [ + { + element: pandora.$ui.videoPanel = pandora.ui.videoPanel(), + size: 400, + resizable: true, + resize: [0,600] + }, + { + element: pandora.$ui.textPanel = pandora.ui.textPanel() + } + ], + orientation: 'horizontal' + }); + return that; +} + diff --git a/js/ui/openRemoteDialog.js b/js/ui/openRemoteDialog.js new file mode 100644 index 0000000..0cb8b77 --- /dev/null +++ b/js/ui/openRemoteDialog.js @@ -0,0 +1,62 @@ +pandora.ui.openRemoteDialog = function() { +// var $inputs = Ox.InputGroup({ +// 'inputs': [ +// Ox.Input({ +// 'label': 'Pan.do/ra instance URL', +// 'id': 'pandoraInstance', +// 'width': 250 +// }), +// Ox.Input({ +// 'label': 'Pan.do/ra Video ID', +// 'id': 'pandoraID', +// 'width': 250 +// }) +// ], +// 'width': 250 +// }); + + //FIXME: convert to SelectInput + var $input1 = Ox.Input({ + 'label': 'Pan.do/ra instance URL', + 'id': 'pandoraInstance', + 'labelWidth': 250, + 'width': 600 + }).css({'margin': '4px'}); + + var $input2 = Ox.Input({ + 'label': 'Pan.do/ra Video ID', + 'id': 'pandoraID', + 'labelWidth': 250, + 'width': 600 + }).css({'margin': '4px'}); + + + var $content = Ox.Element().append($input1).append($input2); + var that = Ox.Dialog({ + 'content': $content.css({'padding': '12px'}), + 'buttons': [ + Ox.Button({ + 'group': true, + 'id': 'loadRemoteVideoButton', + 'title': 'Load Video' + }).bindEvent("click", function() { + var pandoraInstance = $input1.value(); + var pandoraID = $input2.value(); + var base_url = pandoraInstance + "/" + pandoraID; + var options = { + 'name': base_url, + 'url': base_url + "/480p.webm", + 'type': 'remote' + }; + pandora.$ui.textArea.speedtrans.load(options); + that.close(); + }) + ], + 'closeButton': true, + 'title': 'Open Remote Video', + 'width': 700, + 'fixedSize': true + }); + return that; +}; + diff --git a/js/ui/textArea.js b/js/ui/textArea.js new file mode 100644 index 0000000..86ce905 --- /dev/null +++ b/js/ui/textArea.js @@ -0,0 +1,155 @@ +pandora.ui.textArea = function() { + var that = Ox.Input({ + type: 'textarea', + width: 400, + height: 400, + changeOnKeypress: true + }); + var $video = pandora.$ui.videoPlayer; + + that.speedtrans = { + spans: [], + insertTc: function() { + var eDom = that.find("textarea").get(0); //FIXME + var scrollTop = eDom.scrollTop; + var val = that.value(); + var pos = eDom.selectionStart; + var tcNpt = ms2npt(pandora.$ui.videoPlayer.options("position") * 1000); + var newVal = val.substring(0,pos) + "\n" + tcNpt + "\n" + val.substring(pos, val.length); + that.value(newVal); + that.find("textarea").focus(); //FIXME + eDom.selectionStart = pos + tcNpt.length + 2; + eDom.selectionEnd = pos + tcNpt.length + 2; + eDom.scrollTop = scrollTop + 15; + }, + isTc: function() { + var eDom = that.find("textarea").get(0); + var val = that.value(); + var pos = eDom.selectionStart; + var word = that.speedtrans.getWord(pos, val); + + if (isValidTimecode(word)) { + return npt2ms(word); + } else { + return false; + } + }, + getWord: function(pos, val) { + var c; + var i = pos; + var j = pos; + while (c != " " && c != "\n") { + if (i==0) { + i = -1; + break; + } + i--; + c = val.substring(i,i+1); + } + var firstLetter = i+1; + var d; + while (d != " " && d != "\n") { + if (j >= val.length) { + break; + } + j++; + d = val.substring(j,j+1); + } + var lastLetter = j; + var word = val.substring(firstLetter, lastLetter); + return word; + }, + toSrt: function(fmt) { + if (!fmt) var fmt = 'srt'; + var text = cleanNewlines(that.value()); + var lines = []; + lines = text.split("\n"); + var i=0; + var j=0; + var spans = this.spans = []; + while (i < lines.length) { + var l = lines[i]; + if (isValidTimecode(l.trim())) { + var tcIn = l.trim(); + var t = ""; + var thisLine = ''; + while (!isValidTimecode(thisLine.trim())) { + i++; + if (i >= lines.length) { + break; + } + thisLine = lines[i]; + if (!isValidTimecode(thisLine.trim())) { + t += thisLine + "\n"; + } + } + var tcOut = $.trim(thisLine); + spans[j] = { + tcInMs: npt2ms(tcIn), + tcOutMs: npt2ms(tcOut), + text: t, + index: j + }; + //this.spans.push(spans[j]); + j++; + } else { + i++; + } + } + this.spans = spans; + var duration = pandora.$ui.videoPlayer.options("duration"); + var srt = spansToSrt(duration, spans, fmt); + // console.log(srt); + return srt; + }, + + save: function() { + + console.log(that.value()); + var filename = pandora.$ui.videoPlayer.options("video"); + console.log(filename); + pandora.storage(filename, {'text': that.value()}); + }, + load: function(options) { + console.log(options); +// if (options.type == 'local') { +// var file = options.file; +// var name = file.name; +// var url = window.URL.createObjectURL(file); +// } else if (options.type == 'remote') { +// var url = options.url; +// var name = options.name; +// } + var val = pandora.storage(options.name) || {'text': ''}; + that.value(val.text); + var videoOptions = { + 'url': options.url + }; + pandora.$ui.videoPlayer = pandora.ui.videoPlayer(videoOptions); + //pandora.$ui.videoPlayer = videoElem; + pandora.$ui.videoPanel.replaceElement(0, pandora.$ui.videoPlayer); + //console.log(filename); + //$video.options("video", filename); + } + }; + that.bindEvent({ + key_control_space: function() { + $video.options("paused", !$video.options("paused")); + that.find("textarea").focus(); //FIXME + }, + key_control_x: function() { + that.speedtrans.insertTc(); + }, + key_control_shift_s: function() { + that.speedtrans.save(); + } + }); + that.dblclick(function() { + var tc = that.speedtrans.isTc(); + if (tc) { + $video.options("position", tc / 1000); + } + }); + return that; +} + diff --git a/js/ui/textPanel.js b/js/ui/textPanel.js new file mode 100644 index 0000000..66aea6d --- /dev/null +++ b/js/ui/textPanel.js @@ -0,0 +1,16 @@ +pandora.ui.textPanel = function() { + var that = Ox.SplitPanel({ + elements: [ + { + element: pandora.$ui.textArea = pandora.ui.textArea() + }, + { + element: pandora.$ui.textToolBar = pandora.ui.textToolBar(), + size: 20 + } + ], + orientation: 'vertical' + }); + return that; +} + diff --git a/js/ui/textToolBar.js b/js/ui/textToolBar.js new file mode 100644 index 0000000..0e0e282 --- /dev/null +++ b/js/ui/textToolBar.js @@ -0,0 +1,4 @@ +pandora.ui.textToolBar = function() { + var that = Ox.Bar(); + return that; +} diff --git a/js/ui/videoPanel.js b/js/ui/videoPanel.js new file mode 100644 index 0000000..800a470 --- /dev/null +++ b/js/ui/videoPanel.js @@ -0,0 +1,16 @@ +pandora.ui.videoPanel = function() { + var that = pandora.$ui.videoPanel = Ox.SplitPanel({ + elements: [ + { + element: pandora.$ui.videoPlayer = Ox.Element().text("no video yet"), + size: 300 + }, + { + element: pandora.$ui.helpPanel = pandora.ui.helpPanel() + } + ], + orientation: 'vertical' + }); + return that; +} + diff --git a/js/ui/videoPlayer.js b/js/ui/videoPlayer.js new file mode 100644 index 0000000..2db0a0a --- /dev/null +++ b/js/ui/videoPlayer.js @@ -0,0 +1,22 @@ +pandora.ui.videoPlayer = function(options) { + var url = options.url; + var timeline = options.timeline || "foo.png"; //FIXME + var that = pandora.$ui.videoPlayer = Ox.VideoPlayer({ + video: url, + controlsTop: ['fullscreen'], + controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position'], + height: 300, + width: 400, + showControlsOnLoad: true, + duration: 35, + timeline: timeline, + title: 'Test Video', + enableTimeline: true, + enableKeyboard: true, + enableMouse: true, + externalControls: true +// enableTimeline: true + }); + return that; +}; +