split up js into multiple files

js/speedtrans.js

@@ -37,8 +37,13 @@
                     });
                 }
                 var prefix = "js/";
-
+                var files = ['appPanel', 'mainMenu', 'mainPanel', 'videoPanel', 'videoPlayer', 'openRemoteDialog', 'helpPanel', 'textPanel', 'textArea', 'textToolBar'];
-                Ox.getFile([prefix + "pandora-ui.js"], function() {
+                var prefix = "js/ui/";
+                var filesToLoad = Ox.map(files, function(v) {
+                    return prefix + v + ".js";
+                });
+                //console.log(filesToLoad);
+                Ox.getFile(filesToLoad, function() {
                     initSpeedtrans();
                 });
             }

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;
+}
+
+

js/ui/helpPanel.js

@@ -0,0 +1,6 @@
+
+pandora.ui.helpPanel = function() {
+    var that = Ox.Element().text("Help Panel");
+    return that;
+};
+

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;
+}
+

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;
+}
+

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;
+};
+

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;
+}
+

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;
+}
+

js/ui/textToolBar.js

@@ -0,0 +1,4 @@
+pandora.ui.textToolBar = function() {
+    var that = Ox.Bar();
+    return that;
+}

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;
+}
+

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;
+};
+