From c726380a55df205b9747ff45e421801e8975458d Mon Sep 17 00:00:00 2001 From: Sanjay B Date: Mon, 4 Mar 2013 13:55:54 +0530 Subject: [PATCH] basic load video works, before splitting files --- js/pandora-ui.js | 152 ++++++++++++++++++++++++++++++++++++++++------- js/speedtrans.js | 17 +++--- 2 files changed, 140 insertions(+), 29 deletions(-) diff --git a/js/pandora-ui.js b/js/pandora-ui.js index b233e39..8b7495b 100644 --- a/js/pandora-ui.js +++ b/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') { - pandora.$ui.textArea.speedtrans.load("/A/480p.webm"); + } 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() { @@ -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({ - video: '/A/480p.webm', - controlsTop: ['play', 'fullscreen', 'scale', 'position'], - controlsBottom: ['timeline'], + +//FIXME: should be ui.videoPlayer +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: '/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 = $('
').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) { - var val = pandora.storage(filename) || ''; - that.value(val); + 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({ diff --git a/js/speedtrans.js b/js/speedtrans.js index 920a207..3f79f02 100644 --- a/js/speedtrans.js +++ b/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({ - 'load': function(data) { + window.pandora = { + 'load': function() { // console.log(data); Ox.extend(pandora, { @@ -36,19 +36,20 @@ 'height': pandora.$ui.textPanel.height() - 40 }); } - var prefix = "/speedtrans/js/"; - Ox.loadFile(prefix + "pandora-ui.js", function() { - initSpeedtrans(data); + var prefix = "js/"; + + Ox.getFile([prefix + "pandora-ui.js"], function() { + initSpeedtrans(); }); } - }); - + }; + pandora.load(); } function initSpeedtrans(data) { pandora.$ui.appPanel = pandora.ui.appPanel().appendTo(pandora.$ui.body); pandora.resizeWindow(); - + }