basic load video works, before splitting files

js/pandora-ui.js

@@ -37,7 +37,11 @@ pandora.ui.mainMenu = function() {
                 'id': 'fileMenu',
                 'title': 'File',
                 'items': [
-                    { id: 'openFileMenu', title: 'Open File'},
+                    { 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'}
                 ]
             }
@@ -52,8 +56,25 @@ pandora.ui.mainMenu = function() {
             if (data.id == 'saveFileMenu') {
                 pandora.$ui.textArea.speedtrans.save();
     //            speedtrans.saveFile();
-            } else if (data.id == 'openFileMenu') {
+            } else if (data.id == 'openLocalFileMenu') {
-                pandora.$ui.textArea.speedtrans.load("/A/480p.webm");
+                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() {
@@ -83,10 +104,10 @@ pandora.ui.mainPanel = function() {
 }
 
 pandora.ui.videoPanel = function() {
-    var that = Ox.SplitPanel({
+    var that = pandora.$ui.videoPanel = Ox.SplitPanel({
         elements: [
             {
-                element: pandora.$ui.videoPlayer = pandora.ui.videoPlayer(),
+                element: pandora.$ui.videoPlayer = Ox.Element().text("no video yet"),
                 size: 300
             },
             {
@@ -98,16 +119,20 @@ pandora.ui.videoPanel = function() {
     return that;
 }
 
-pandora.ui.videoPlayer = function() {
+
-    var that = Ox.VideoPlayer({
+//FIXME: should be ui.videoPlayer
-        video: '/A/480p.webm',
+pandora.ui.videoPlayer = function(options) {
-        controlsTop: ['play', 'fullscreen', 'scale', 'position'],
+    var url = options.url;
-        controlsBottom: ['timeline'],
+    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: '/speedtrans/img/timeline16p.png',
+        timeline: timeline,
         title: 'Test Video',
         enableTimeline: true,
         enableKeyboard: true,
@@ -116,12 +141,77 @@ pandora.ui.videoPlayer = function() {
 //        enableTimeline: true                
     });
     return that;
-}
+};
+
+    
+
+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;
+};
+
 
 pandora.ui.helpPanel = function() {
-    var that = $('<div>').text("Help Panel");
+    var that = Ox.Element().text("Help Panel");
     return that;
-}
+};
 
 pandora.ui.textPanel = function() {
     var that = Ox.SplitPanel({
@@ -155,7 +245,7 @@ pandora.ui.textArea = function() {
             var scrollTop = eDom.scrollTop;
             var val = that.value();
             var pos = eDom.selectionStart;
-            var tcNpt = ms2npt($video.options("position") * 1000);
+            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
@@ -238,19 +328,39 @@ pandora.ui.textArea = function() {
                 }
             }
             this.spans = spans;
-            var duration = $video.options("duration");
+            var duration = pandora.$ui.videoPlayer.options("duration");
             var srt = spansToSrt(duration, spans, fmt);
         //  console.log(srt);
             return srt;
         },
 
         save: function() {
-            var filename = $video.options("video");
+            
-            pandora.storage(filename, that.value);
+            console.log(that.value());
+            var filename = pandora.$ui.videoPlayer.options("video");
+            console.log(filename);
+            pandora.storage(filename, {'text': that.value()});
         },
-        load: function(filename) {
+        load: function(options) {
-            var val = pandora.storage(filename) || '';
+            console.log(options);
-            that.value(val);
+//            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({

js/speedtrans.js

@@ -12,8 +12,8 @@
     function loadSpeedtrans(browserSupported) {
         
         if (!browserSupported) { alert("your browser is not supported"); return; }
-        window.pandora = Ox.App({url: '/api/'}).bindEvent({
+        window.pandora = {
-            'load': function(data) {
+            'load': function() {
 //                console.log(data);
 
                 Ox.extend(pandora, {
@@ -36,13 +36,14 @@
                         'height': pandora.$ui.textPanel.height() - 40
                     });
                 }
-                var prefix = "/speedtrans/js/";
+                var prefix = "js/";
-                Ox.loadFile(prefix + "pandora-ui.js", function() {
+
-                    initSpeedtrans(data);
+                Ox.getFile([prefix + "pandora-ui.js"], function() {
+                    initSpeedtrans();
                 });
             }
-        });
+        };
-
+        pandora.load();
     }
 
     function initSpeedtrans(data) {