split up js into multiple files
This commit is contained in:
parent
c726380a55
commit
7743617aac
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
|
18
js/ui/appPanel.js
Normal file
18
js/ui/appPanel.js
Normal file
|
@ -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;
|
||||
}
|
||||
|
||||
|
6
js/ui/helpPanel.js
Normal file
6
js/ui/helpPanel.js
Normal file
|
@ -0,0 +1,6 @@
|
|||
|
||||
pandora.ui.helpPanel = function() {
|
||||
var that = Ox.Element().text("Help Panel");
|
||||
return that;
|
||||
};
|
||||
|
66
js/ui/mainMenu.js
Normal file
66
js/ui/mainMenu.js
Normal file
|
@ -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;
|
||||
}
|
||||
|
18
js/ui/mainPanel.js
Normal file
18
js/ui/mainPanel.js
Normal file
|
@ -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;
|
||||
}
|
||||
|
62
js/ui/openRemoteDialog.js
Normal file
62
js/ui/openRemoteDialog.js
Normal file
|
@ -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;
|
||||
};
|
||||
|
155
js/ui/textArea.js
Normal file
155
js/ui/textArea.js
Normal file
|
@ -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;
|
||||
}
|
||||
|
16
js/ui/textPanel.js
Normal file
16
js/ui/textPanel.js
Normal file
|
@ -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;
|
||||
}
|
||||
|
4
js/ui/textToolBar.js
Normal file
4
js/ui/textToolBar.js
Normal file
|
@ -0,0 +1,4 @@
|
|||
pandora.ui.textToolBar = function() {
|
||||
var that = Ox.Bar();
|
||||
return that;
|
||||
}
|
16
js/ui/videoPanel.js
Normal file
16
js/ui/videoPanel.js
Normal file
|
@ -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;
|
||||
}
|
||||
|
22
js/ui/videoPlayer.js
Normal file
22
js/ui/videoPlayer.js
Normal file
|
@ -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;
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user