working with updated oxjs, load srt, different layers, etc
This commit is contained in:
parent
a8f1c960c9
commit
8c06be3a5d
|
@ -7,8 +7,6 @@
|
||||||
<!-- <script type="text/javascript" src="js/classes.js"></script> -->
|
<!-- <script type="text/javascript" src="js/classes.js"></script> -->
|
||||||
<script type="text/javascript" src="js/staticfuncs.js"></script>
|
<script type="text/javascript" src="js/staticfuncs.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body></body>
|
||||||
foo
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
}, loadSpeedtrans);
|
}, loadSpeedtrans);
|
||||||
|
|
||||||
function loadSpeedtrans(browserSupported) {
|
function loadSpeedtrans(browserSupported) {
|
||||||
|
console.log("loaded speedtrans");
|
||||||
if (!browserSupported) { alert("your browser is not supported"); return; }
|
if (!browserSupported) { alert("your browser is not supported"); return; }
|
||||||
window.pandora = {
|
window.pandora = {
|
||||||
'load': function() {
|
'load': function() {
|
||||||
|
@ -27,6 +27,7 @@
|
||||||
storage: Ox.localStorage("speedtrans"),
|
storage: Ox.localStorage("speedtrans"),
|
||||||
ui: {},
|
ui: {},
|
||||||
site: {},
|
site: {},
|
||||||
|
state: {},
|
||||||
user: {}
|
user: {}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -35,15 +36,16 @@
|
||||||
'width': pandora.$ui.textPanel.width() - 20,
|
'width': pandora.$ui.textPanel.width() - 20,
|
||||||
'height': pandora.$ui.textPanel.height() - 40
|
'height': pandora.$ui.textPanel.height() - 40
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
var prefix = "js/";
|
var prefix = "js/";
|
||||||
var files = ['appPanel', 'mainMenu', 'mainPanel', 'videoPanel', 'videoPlayer', 'openRemoteDialog', 'openSRTDialog', 'helpPanel', 'textPanel', 'textArea', 'textToolBar'];
|
var files = ['appPanel', 'mainMenu', 'mainPanel', 'videoPanel', 'annotationsPanel', 'videoPlayer', 'openRemoteDialog', 'openSRTDialog', 'newSRTDialog', 'selectAnnotationType', 'helpPanel', 'textPanel', 'textArea', 'textToolBar', 'utils'];
|
||||||
var prefix = "js/ui/";
|
var prefix = "js/ui/";
|
||||||
var filesToLoad = Ox.map(files, function(v) {
|
var filesToLoad = Ox.map(files, function(v) {
|
||||||
return prefix + v + ".js";
|
return prefix + v + ".js";
|
||||||
});
|
});
|
||||||
//console.log(filesToLoad);
|
//console.log(filesToLoad);
|
||||||
Ox.getFile(filesToLoad, function() {
|
Ox.getFile(filesToLoad, function() {
|
||||||
|
console.log("got filed");
|
||||||
initSpeedtrans();
|
initSpeedtrans();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -52,11 +54,25 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function initSpeedtrans(data) {
|
function initSpeedtrans(data) {
|
||||||
pandora.$ui.appPanel = pandora.ui.appPanel().appendTo(pandora.$ui.body);
|
console.log("init speedtrans");
|
||||||
|
var $loadButton = Ox.FileInput({
|
||||||
|
maxFiles: 1,
|
||||||
|
width: 512
|
||||||
|
})
|
||||||
|
.bindEvent("change", function(data) {
|
||||||
|
console.log(data);
|
||||||
|
var file = data.value[0];
|
||||||
|
this.remove();
|
||||||
|
pandora.$ui.appPanel.appendTo(pandora.$ui.body);
|
||||||
|
pandora.utils.loadLocalFile(file);
|
||||||
|
pandora.resizeWindow();
|
||||||
|
}).appendTo(pandora.$ui.body);
|
||||||
|
|
||||||
|
pandora.$ui.appPanel = pandora.ui.appPanel() //.appendTo(pandora.$ui.body);
|
||||||
pandora.$ui.openRemoteDialog = pandora.ui.openRemoteDialog();
|
pandora.$ui.openRemoteDialog = pandora.ui.openRemoteDialog();
|
||||||
pandora.$ui.openSRTDialog = pandora.ui.openSRTDialog();
|
pandora.$ui.openSRTDialog = pandora.ui.openSRTDialog();
|
||||||
pandora.resizeWindow();
|
pandora.resizeWindow();
|
||||||
|
//console.log("am here");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -229,6 +229,25 @@ function spansToSrt(duration, arr, fmt, start_no) {
|
||||||
}
|
}
|
||||||
var srt = '';
|
var srt = '';
|
||||||
var srtNo = start_no;
|
var srtNo = start_no;
|
||||||
|
// Ox.print(arr, fmt);
|
||||||
|
if (fmt == 'layers') {
|
||||||
|
var layers = Ox.map(arr, function(v) {
|
||||||
|
// Ox.print(v);
|
||||||
|
if (!v.tcOutMs) {
|
||||||
|
v.tcOutMs = parseInt(duration * 1000);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
'in': v.tcInMs / 1000,
|
||||||
|
'out': v.tcOutMs / 1000,
|
||||||
|
'value': v.text,
|
||||||
|
'duration': (v.tcOutMs - v.tcInMs) / 1000,
|
||||||
|
'id': '_' + Ox.uid()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
//console.log("layers", layers);
|
||||||
|
return layers;
|
||||||
|
}
|
||||||
|
|
||||||
for (var k=0; k < arr.length; k++) {
|
for (var k=0; k < arr.length; k++) {
|
||||||
var s = arr[k];
|
var s = arr[k];
|
||||||
if (s.text.trim() == '') {
|
if (s.text.trim() == '') {
|
||||||
|
|
100
js/ui/annotationsPanel.js
Normal file
100
js/ui/annotationsPanel.js
Normal file
|
@ -0,0 +1,100 @@
|
||||||
|
pandora.ui.annotationsPanel = function(layers) {
|
||||||
|
console.log('annotationsPanel init')
|
||||||
|
var layers = layers || [];
|
||||||
|
//Ox.print("layers", layers);
|
||||||
|
var showLayers = {};
|
||||||
|
layers.forEach(function(v,i) {
|
||||||
|
showLayers[v.id] = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
Ox.print("annotation layers", layers);
|
||||||
|
var that = Ox.AnnotationPanel({
|
||||||
|
'layers': Ox.clone(layers, true),
|
||||||
|
'width': 256,
|
||||||
|
'range': 'position',
|
||||||
|
'showLayers': showLayers
|
||||||
|
});
|
||||||
|
|
||||||
|
that.interval = setInterval(function() {
|
||||||
|
//console.log("interval");
|
||||||
|
var changed = pandora.$ui.textArea.changed;
|
||||||
|
if (changed) {
|
||||||
|
//console.log("interval changed");
|
||||||
|
pandora.$ui.textArea.changed = false;
|
||||||
|
var currentTrack = pandora.$ui.textArea.currentTrack;
|
||||||
|
//Ox.print("current layers", pandora.$ui.textArea.speedtrans.toSrt("layers"));
|
||||||
|
//Ox.print("layer", currentTrack);
|
||||||
|
|
||||||
|
//var currentLayers = that.options('layers');
|
||||||
|
//console.log("current layers", layers);
|
||||||
|
//console.log("current track", currentTrack);
|
||||||
|
var layerIndex = Ox.getIndexById(layers, currentTrack);
|
||||||
|
layers[layerIndex].items = pandora.$ui.textArea.speedtrans.toSrt("layers");
|
||||||
|
Ox.print("setting these layers", layers);
|
||||||
|
that.options('layers', Ox.clone(layers, true));
|
||||||
|
//that.updateLayer(currentTrack, pandora.$ui.textArea.speedtrans.toSrt("layers"));
|
||||||
|
}
|
||||||
|
}, 1500);
|
||||||
|
|
||||||
|
|
||||||
|
var $panelMenuButton = Ox.MenuButton({
|
||||||
|
'title': 'edit',
|
||||||
|
'type': 'image',
|
||||||
|
'style': 'symbol',
|
||||||
|
'tooltip': 'Add Layer',
|
||||||
|
'items': [
|
||||||
|
{
|
||||||
|
'id': 'newSRT',
|
||||||
|
'title': 'New Layer'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 'openSRT',
|
||||||
|
'title': 'Import SRT ...'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
}).css({'float': 'right'}).bindEvent("click", function(data) {
|
||||||
|
if (data.id == 'openSRT') {
|
||||||
|
pandora.$ui.openSRTDialog.open();
|
||||||
|
} else if (data.id == 'newSRT') {
|
||||||
|
var title = pandora.utils.getUntitledName();
|
||||||
|
pandora.storage(pandora.$ui.textArea.storage)[title] = '';
|
||||||
|
pandora.$ui.textArea.currentTrack = title;
|
||||||
|
pandora.$ui.annotationsPanel.addLayer({
|
||||||
|
'id': title,
|
||||||
|
'title': title,
|
||||||
|
'items': []
|
||||||
|
});
|
||||||
|
pandora.$ui.selectAnnotationType.value(title);
|
||||||
|
pandora.utils.updateFolderMenus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// var $addButton = Ox.Button({
|
||||||
|
// 'title': 'add',
|
||||||
|
// 'type': 'image',
|
||||||
|
// 'style': 'symbol',
|
||||||
|
// 'tooltip': 'New annotation layer'
|
||||||
|
// }).css({'float': 'right'}).bindEvent("click", function() {
|
||||||
|
// pandora.$ui.newSRTDialog.open();
|
||||||
|
// });
|
||||||
|
|
||||||
|
// var $loadSRTButton = Ox.Button({
|
||||||
|
// 'title': 'upload',
|
||||||
|
// 'type': 'image',
|
||||||
|
// 'style': 'symbol',
|
||||||
|
// 'tooltip': 'Import SRT'
|
||||||
|
// }).css({'float': 'right'}).bindEvent("click", function() {
|
||||||
|
// pandora.$ui.openSRTDialog.open();
|
||||||
|
// });
|
||||||
|
|
||||||
|
Ox.print("panel menu button", $panelMenuButton);
|
||||||
|
$(that.find('.OxBar')[0]).append($panelMenuButton);
|
||||||
|
|
||||||
|
// that.updateLayers = function() {
|
||||||
|
// var layers = that.getLayers();
|
||||||
|
// that.options("layers", layers);
|
||||||
|
// };
|
||||||
|
|
||||||
|
return that;
|
||||||
|
};
|
|
@ -6,6 +6,7 @@ pandora.ui.appPanel = function() {
|
||||||
size: 20
|
size: 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
//element: Ox.Element().text("Please load a video, etc.")
|
||||||
element: pandora.$ui.mainPanel = pandora.ui.mainPanel()
|
element: pandora.$ui.mainPanel = pandora.ui.mainPanel()
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
|
@ -29,7 +29,7 @@ pandora.ui.mainMenu = function() {
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
.bindKeyboard()
|
.bindKeyboard()
|
||||||
.bindEvent({
|
.bindEvent(Ox.extend(pandora.utils.commonKeyboardEvents, {
|
||||||
click: function(data) {
|
click: function(data) {
|
||||||
// Ox.print(data);
|
// Ox.print(data);
|
||||||
var selected = data.id;
|
var selected = data.id;
|
||||||
|
@ -38,18 +38,7 @@ pandora.ui.mainMenu = function() {
|
||||||
// speedtrans.saveFile();
|
// speedtrans.saveFile();
|
||||||
} else if (data.id == 'openLocalFileMenu') {
|
} else if (data.id == 'openLocalFileMenu') {
|
||||||
var file = data.files[0];
|
var file = data.files[0];
|
||||||
Ox.oshash(file, function(oshash) {
|
pandora.utils.loadLocalFile(file);
|
||||||
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') {
|
} else if (data.id == 'openRemoteFileMenu') {
|
||||||
pandora.$ui.openRemoteDialog.open();
|
pandora.$ui.openRemoteDialog.open();
|
||||||
} else if (data.id == 'openSRT') {
|
} else if (data.id == 'openSRT') {
|
||||||
|
@ -57,11 +46,8 @@ pandora.ui.mainMenu = function() {
|
||||||
} else if (data.id == 'TestMenu1') {
|
} else if (data.id == 'TestMenu1') {
|
||||||
alert("clicked TestMenu1");
|
alert("clicked TestMenu1");
|
||||||
}
|
}
|
||||||
},
|
|
||||||
key_control_shift_s: function() {
|
|
||||||
pandora.$ui.textArea.speedtrans.save();
|
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
}
|
}
|
||||||
|
|
8
js/ui/newSRTDialog.js
Normal file
8
js/ui/newSRTDialog.js
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
pandora.ui.newSRTDialog = function() {
|
||||||
|
|
||||||
|
var that = Ox.Dialog({
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
return that;
|
||||||
|
};
|
|
@ -15,19 +15,19 @@ pandora.ui.openRemoteDialog = function() {
|
||||||
// 'width': 250
|
// 'width': 250
|
||||||
// });
|
// });
|
||||||
|
|
||||||
//FIXME: convert to SelectInput
|
|
||||||
|
|
||||||
var instances = [
|
var instances = [
|
||||||
{
|
{
|
||||||
'id': 'http://pad.ma',
|
'id': 'https://pad.ma',
|
||||||
'title': 'Pad.ma'
|
'title': 'Pad.ma'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'id': 'http://0xdb.org',
|
'id': 'https://0xdb.org',
|
||||||
'title': 'Oxdb'
|
'title': 'Oxdb'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'id': 'http://indiancine.ma',
|
'id': 'https://indiancine.ma',
|
||||||
'title': 'IndianCine.ma'
|
'title': 'IndianCine.ma'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -75,7 +75,8 @@ pandora.ui.openRemoteDialog = function() {
|
||||||
var options = {
|
var options = {
|
||||||
'name': base_url,
|
'name': base_url,
|
||||||
'url': base_url + "/480p.webm",
|
'url': base_url + "/480p.webm",
|
||||||
'type': 'remote'
|
'type': 'remote',
|
||||||
|
'title': base_url
|
||||||
};
|
};
|
||||||
pandora.$ui.textArea.speedtrans.load(options);
|
pandora.$ui.textArea.speedtrans.load(options);
|
||||||
that.close();
|
that.close();
|
||||||
|
|
|
@ -1,4 +1,33 @@
|
||||||
pandora.ui.openSRTDialog = function() {
|
pandora.ui.openSRTDialog = function() {
|
||||||
|
var $layerName = Ox.Input({
|
||||||
|
'label': 'Layer name'
|
||||||
|
});
|
||||||
|
var $fileInput = Ox.FileInput({
|
||||||
|
maxFiles: 1,
|
||||||
|
label: 'Select SRT File'
|
||||||
|
}).bindEvent("change", function() {
|
||||||
|
var fil = this.value()[0];
|
||||||
|
//console.log(fil);
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.onload = function() {
|
||||||
|
var txt = reader.result;
|
||||||
|
pandora.$ui.textArea.speedtrans.fromSrt(txt);
|
||||||
|
var title = pandora.utils.getUntitledName(fil.name);
|
||||||
|
var storage = pandora.storage(pandora.$ui.textArea.storage);
|
||||||
|
storage[title] = txt;
|
||||||
|
pandora.$ui.textArea.currentTrack = title;
|
||||||
|
pandora.$ui.selectAnnotationType.value(title);
|
||||||
|
//var layers = pandora.$ui.textArea.speedtrans.getLayers();
|
||||||
|
pandora.$ui.annotationsPanel.addLayer({
|
||||||
|
'id': title,
|
||||||
|
'title': title,
|
||||||
|
'items': pandora.$ui.textArea.speedtrans.toSrt('layers', txt)
|
||||||
|
});
|
||||||
|
pandora.utils.updateFolderMenus();
|
||||||
|
//console.log(reader.result);
|
||||||
|
};
|
||||||
|
reader.readAsText(fil);
|
||||||
|
});
|
||||||
var $textInput = Ox.Input({
|
var $textInput = Ox.Input({
|
||||||
'type': 'textarea',
|
'type': 'textarea',
|
||||||
'label': 'Paste SRT',
|
'label': 'Paste SRT',
|
||||||
|
@ -7,10 +36,12 @@ pandora.ui.openSRTDialog = function() {
|
||||||
'width': 500,
|
'width': 500,
|
||||||
'height': 400
|
'height': 400
|
||||||
});
|
});
|
||||||
var $content = Ox.Element().append($textInput);
|
var $content = Ox.Element().append($layerName).append($fileInput).append($textInput);
|
||||||
var that = Ox.Dialog({
|
var that = Ox.Dialog({
|
||||||
'content': $content,
|
'content': $content,
|
||||||
'closeButton': true,
|
'closeButton': true,
|
||||||
|
'width': 600,
|
||||||
|
'height': 450,
|
||||||
'buttons': [
|
'buttons': [
|
||||||
Ox.Button({
|
Ox.Button({
|
||||||
'group': true,
|
'group': true,
|
||||||
|
|
64
js/ui/selectAnnotationType.js
Normal file
64
js/ui/selectAnnotationType.js
Normal file
|
@ -0,0 +1,64 @@
|
||||||
|
pandora.ui.selectAnnotationType = function() {
|
||||||
|
// var annot_types = [
|
||||||
|
// {
|
||||||
|
// 'id': 'transcript',
|
||||||
|
// 'title': 'Transcript'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// 'id': 'description',
|
||||||
|
// 'title': 'Description'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// 'id': 'other',
|
||||||
|
// 'title': 'Other...'
|
||||||
|
// }
|
||||||
|
// ];
|
||||||
|
|
||||||
|
var that = Ox.Input({
|
||||||
|
//'items': annot_types,
|
||||||
|
'label': 'Type',
|
||||||
|
'placeholder': 'type annotation type',
|
||||||
|
labelWidth: 256,
|
||||||
|
width: 512,
|
||||||
|
//'max': 1,
|
||||||
|
//'min': 1,
|
||||||
|
'value': 'untitled',
|
||||||
|
}).bindEvent("blur", function(e) {
|
||||||
|
//alert("changed annot type");
|
||||||
|
//console.log(e);
|
||||||
|
var videoKey = pandora.$ui.textArea.storage;
|
||||||
|
var storageData = pandora.storage(videoKey);
|
||||||
|
var currentName = pandora.$ui.textArea.currentTrack;
|
||||||
|
console.log(currentName);
|
||||||
|
//console.log(storage);
|
||||||
|
var newName = this.value();
|
||||||
|
console.log(newName);
|
||||||
|
if (currentName == newName) return;
|
||||||
|
storageData[newName] = pandora.$ui.textArea.value();
|
||||||
|
delete(storageData[currentName]);
|
||||||
|
pandora.storage(videoKey, storageData);
|
||||||
|
pandora.$ui.textArea.currentTrack = newName;
|
||||||
|
//delete(storage[currentName]);
|
||||||
|
pandora.$ui.annotationsPanel.removeLayer(currentName);
|
||||||
|
pandora.$ui.annotationsPanel.addLayer({
|
||||||
|
'id': newName,
|
||||||
|
'title': newName,
|
||||||
|
'items': pandora.$ui.textArea.speedtrans.toSrt("layers", storageData[newName])
|
||||||
|
});
|
||||||
|
//var storage = pandora.storage
|
||||||
|
// var typ = this.value();
|
||||||
|
// var textArea = pandora.$ui.textArea;
|
||||||
|
// var val = pandora.storage(textArea.storage);
|
||||||
|
// if (val[typ]) {
|
||||||
|
// var txt = val[typ];
|
||||||
|
// } else {
|
||||||
|
// var txt = val[typ] = '';
|
||||||
|
// pandora.storage(textArea.storage, val);
|
||||||
|
// }
|
||||||
|
// textArea.value(txt);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return that;
|
||||||
|
};
|
|
@ -4,8 +4,15 @@ pandora.ui.textArea = function() {
|
||||||
width: 400,
|
width: 400,
|
||||||
height: 400,
|
height: 400,
|
||||||
changeOnKeypress: true
|
changeOnKeypress: true
|
||||||
|
}).bindEvent("change", function() {
|
||||||
|
Ox.print("textarea changed");
|
||||||
|
that.speedtrans.save();
|
||||||
|
that.changed = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
var $video = pandora.$ui.videoPlayer;
|
var $video = pandora.$ui.videoPlayer;
|
||||||
|
that.changed = false;
|
||||||
|
|
||||||
that.speedtrans = {
|
that.speedtrans = {
|
||||||
spans: [],
|
spans: [],
|
||||||
|
@ -60,9 +67,12 @@ pandora.ui.textArea = function() {
|
||||||
var word = val.substring(firstLetter, lastLetter);
|
var word = val.substring(firstLetter, lastLetter);
|
||||||
return word;
|
return word;
|
||||||
},
|
},
|
||||||
toSrt: function(fmt) {
|
toSrt: function(fmt, txt) {
|
||||||
if (!fmt) var fmt = 'srt';
|
if (!fmt) var fmt = 'srt';
|
||||||
var text = cleanNewlines(that.value());
|
if (txt === undefined) {
|
||||||
|
txt = that.value();
|
||||||
|
}
|
||||||
|
var text = cleanNewlines(txt);
|
||||||
var lines = [];
|
var lines = [];
|
||||||
lines = text.split("\n");
|
lines = text.split("\n");
|
||||||
var i=0;
|
var i=0;
|
||||||
|
@ -99,6 +109,7 @@ pandora.ui.textArea = function() {
|
||||||
}
|
}
|
||||||
this.spans = spans;
|
this.spans = spans;
|
||||||
var duration = pandora.$ui.videoPlayer.options("duration");
|
var duration = pandora.$ui.videoPlayer.options("duration");
|
||||||
|
//Ox.print(duration, spans, fmt);
|
||||||
var srt = spansToSrt(duration, spans, fmt);
|
var srt = spansToSrt(duration, spans, fmt);
|
||||||
// console.log(srt);
|
// console.log(srt);
|
||||||
return srt;
|
return srt;
|
||||||
|
@ -116,7 +127,7 @@ pandora.ui.textArea = function() {
|
||||||
i++;
|
i++;
|
||||||
return obj;
|
return obj;
|
||||||
});
|
});
|
||||||
console.log(spans);
|
//console.log(spans);
|
||||||
var out = '';
|
var out = '';
|
||||||
for (span in spans) {
|
for (span in spans) {
|
||||||
if (spans.hasOwnProperty(span)) {
|
if (spans.hasOwnProperty(span)) {
|
||||||
|
@ -127,7 +138,8 @@ pandora.ui.textArea = function() {
|
||||||
//If the outpoint of current span is equal to inpoint of next span, dont print out timecode, and just add the extra \n to go to next span.
|
//If the outpoint of current span is equal to inpoint of next span, dont print out timecode, and just add the extra \n to go to next span.
|
||||||
if (span < spans.length - 1) {
|
if (span < spans.length - 1) {
|
||||||
var p = parseInt(span) + 1;
|
var p = parseInt(span) + 1;
|
||||||
if (spans[p].tcInMs != sp.tcOutMs) {
|
if ((spans[p].tcInMs - sp.tcOutMs) > 1) {
|
||||||
|
// if (spans[p].tcInMs != sp.tcOutMs) {
|
||||||
out += ms2npt(sp.tcOutMs) + "\n\n";
|
out += ms2npt(sp.tcOutMs) + "\n\n";
|
||||||
} else {
|
} else {
|
||||||
out += "\n";
|
out += "\n";
|
||||||
|
@ -135,15 +147,20 @@ pandora.ui.textArea = function() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(out);
|
//console.log(out);
|
||||||
that.value(out);
|
that.value(out);
|
||||||
},
|
},
|
||||||
save: function() {
|
save: function() {
|
||||||
console.log(that.value());
|
//console.log(that.value());
|
||||||
//var videoName = pandora.$ui.videoPlayer.videoName;
|
//var videoName = pandora.$ui.videoPlayer.videoName;
|
||||||
//console.log(videoName);
|
//console.log(videoName);
|
||||||
console.log(that.storage);
|
//console.log(that.storage);
|
||||||
pandora.storage(that.storage, {'text': that.value()});
|
//FIXME get type
|
||||||
|
var typ = pandora.$ui.selectAnnotationType.value();
|
||||||
|
var currStorage = pandora.storage(that.storage);
|
||||||
|
currStorage[typ] = that.value();
|
||||||
|
// pandora.storage(that.storage, {typ: that.value()});
|
||||||
|
pandora.storage(that.storage, currStorage);
|
||||||
},
|
},
|
||||||
load: function(options) {
|
load: function(options) {
|
||||||
console.log(options);
|
console.log(options);
|
||||||
|
@ -155,35 +172,78 @@ pandora.ui.textArea = function() {
|
||||||
// var url = options.url;
|
// var url = options.url;
|
||||||
// var name = options.name;
|
// var name = options.name;
|
||||||
// }
|
// }
|
||||||
var val = pandora.storage(options.name) || {'text': ''};
|
var val = pandora.storage(options.name) || {};
|
||||||
|
var typ = options.typ || Object.keys(val)[0] || pandora.utils.getUntitledName();
|
||||||
that.storage = options.name;
|
that.storage = options.name;
|
||||||
that.value(val.text);
|
that.currentTrack = typ;
|
||||||
|
pandora.$ui.selectAnnotationType.value(typ);
|
||||||
|
if (!val[typ]) {
|
||||||
|
val[typ] = '';
|
||||||
|
};
|
||||||
|
that.value(val[typ]);
|
||||||
|
pandora.storage(that.storage, val);
|
||||||
var videoOptions = {
|
var videoOptions = {
|
||||||
'url': options.url
|
'url': options.url
|
||||||
};
|
};
|
||||||
|
console.log(videoOptions);
|
||||||
pandora.$ui.videoPlayer = pandora.ui.videoPlayer(videoOptions);
|
pandora.$ui.videoPlayer = pandora.ui.videoPlayer(videoOptions);
|
||||||
//pandora.$ui.videoPlayer = videoElem;
|
//pandora.$ui.videoPlayer = videoElem;
|
||||||
pandora.$ui.videoPanel.replaceElement(0, pandora.$ui.videoPlayer);
|
pandora.$ui.videoPanel.replaceElement(0, pandora.$ui.videoPlayer);
|
||||||
|
//Ox.print(that.speedtrans.getLayers());
|
||||||
|
clearInterval(pandora.$ui.annotationsPanel.interval);
|
||||||
|
pandora.$ui.annotationsPanel.replaceWith(
|
||||||
|
pandora.$ui.annotationsPanel = pandora.ui.annotationsPanel(that.speedtrans.getLayers())
|
||||||
|
);
|
||||||
|
pandora.$ui.videoPanel.replaceElement(1, pandora.$ui.annotationsPanel);
|
||||||
|
pandora.utils.updateFolderMenus();
|
||||||
//console.log(filename);
|
//console.log(filename);
|
||||||
//$video.options("video", filename);
|
//$video.options("video", filename);
|
||||||
|
},
|
||||||
|
getLayers: function() {
|
||||||
|
var $textArea = pandora.$ui.textArea;
|
||||||
|
var speedtrans = pandora.$ui.textArea.speedtrans;
|
||||||
|
var storageName = $textArea.storage;
|
||||||
|
if (!storageName) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
var storage = pandora.storage(storageName);
|
||||||
|
var keys = Object.keys(storage);
|
||||||
|
return $.map(keys, function(key) {
|
||||||
|
if (!key) { return null; }
|
||||||
|
return {
|
||||||
|
'id': key,
|
||||||
|
'title': key,
|
||||||
|
'items': speedtrans.toSrt('layers', storage[key]),
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
that.bindEvent({
|
that.bindEvent(Ox.extend(pandora.utils.commonKeyboardEvents, {
|
||||||
key_control_space: function() {
|
|
||||||
$video.options("paused", !$video.options("paused"));
|
|
||||||
that.find("textarea").focus(); //FIXME
|
|
||||||
},
|
|
||||||
key_control_x: function() {
|
key_control_x: function() {
|
||||||
that.speedtrans.insertTc();
|
that.speedtrans.insertTc();
|
||||||
},
|
}//,
|
||||||
key_control_shift_s: function() {
|
// key_tab: function() {
|
||||||
that.speedtrans.save();
|
// Ox.print("tab pressed");
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
}));
|
||||||
|
|
||||||
|
that.keydown(function(e) {
|
||||||
|
Ox.print("keydown");
|
||||||
|
if (e.keyCode == 9) {
|
||||||
|
e.preventDefault();
|
||||||
|
that.speedtrans.insertTc();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
that.dblclick(function() {
|
that.dblclick(function() {
|
||||||
|
//console.log("dblclicked");
|
||||||
var tc = that.speedtrans.isTc();
|
var tc = that.speedtrans.isTc();
|
||||||
|
//Ox.print($video);
|
||||||
|
//Ox.print(tc);
|
||||||
if (tc) {
|
if (tc) {
|
||||||
$video.options("position", tc / 1000);
|
//GLOB = $video;
|
||||||
|
pandora.$ui.videoPlayer.options("position", tc / 1000);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return that;
|
return that;
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
pandora.ui.textPanel = function() {
|
pandora.ui.textPanel = function() {
|
||||||
var that = Ox.SplitPanel({
|
var that = Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
|
{
|
||||||
|
element: pandora.$ui.selectAnnotationType = pandora.ui.selectAnnotationType()
|
||||||
|
},
|
||||||
{
|
{
|
||||||
element: pandora.$ui.textArea = pandora.ui.textArea()
|
element: pandora.$ui.textArea = pandora.ui.textArea()
|
||||||
},
|
},
|
||||||
|
|
116
js/ui/utils.js
Normal file
116
js/ui/utils.js
Normal file
|
@ -0,0 +1,116 @@
|
||||||
|
pandora.utils = {};
|
||||||
|
|
||||||
|
pandora.utils.updateFolderMenus = function() {
|
||||||
|
//Ox.print("updateFolderMenus called");
|
||||||
|
$(".OxAnnotationFolder").each(function() {
|
||||||
|
//Ox.print("each");
|
||||||
|
var $this = $(this);
|
||||||
|
var $bar = $this.children().eq(0);
|
||||||
|
var title = $bar.find(".OxTitle").text();
|
||||||
|
var $extras = $bar.find(".OxExtras");
|
||||||
|
$extras.empty();
|
||||||
|
//Ox.print($extras);
|
||||||
|
var disabled = title == pandora.$ui.selectAnnotationType.value();
|
||||||
|
var $folderMenuButton = Ox.MenuButton({
|
||||||
|
'title': 'edit',
|
||||||
|
'type': 'image',
|
||||||
|
'style': 'symbol',
|
||||||
|
'tooltip': 'Add Layer',
|
||||||
|
'items': [
|
||||||
|
{
|
||||||
|
'id': 'editSRT',
|
||||||
|
'title': 'Edit this layer',
|
||||||
|
'disabled': disabled
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 'exportSRT',
|
||||||
|
'title': 'Export SRT for this layer'
|
||||||
|
|
||||||
|
},
|
||||||
|
{},
|
||||||
|
{
|
||||||
|
'id': 'removeSRT',
|
||||||
|
'title': 'Remove this layer'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}).appendTo($extras).bindEvent("click", function(data) {
|
||||||
|
Ox.print(data.id);
|
||||||
|
if (data.id == 'editSRT') {
|
||||||
|
pandora.$ui.selectAnnotationType.value(title);
|
||||||
|
var storage = pandora.$ui.textArea.storage;
|
||||||
|
var txt = pandora.storage(storage)[title];
|
||||||
|
pandora.$ui.textArea.value(txt);
|
||||||
|
pandora.utils.updateFolderMenus();
|
||||||
|
} else if (data.id == 'exportSRT') {
|
||||||
|
|
||||||
|
} else if (data.id == 'removeSRT') {
|
||||||
|
var storageData = pandora.storage(pandora.$ui.textArea.storage);
|
||||||
|
if (Object.keys(storageData).length == 1) {
|
||||||
|
alert("Cannot remove the only annotation layer");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (confirm("Are you sure you wish to permanently delete this annotation track?")) {
|
||||||
|
pandora.$ui.annotationsPanel.removeLayer(title);
|
||||||
|
delete(storageData[title]);
|
||||||
|
pandora.storage(pandora.$ui.textArea.storage, currStorage);
|
||||||
|
var newTitle = Object.keys(storageData)[0];
|
||||||
|
var txt = storageData[newTitle];
|
||||||
|
pandora.$ui.selectAnnotationType.value(newTitle);
|
||||||
|
pandora.$ui.textArea.value(txt);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
pandora.utils.getUntitledName = function(name) {
|
||||||
|
var currStorage = pandora.storage(pandora.$ui.textArea.storage);
|
||||||
|
// var keys = Object.keys(currStorage);
|
||||||
|
// console.log(keys);
|
||||||
|
var title = name || "untitled";
|
||||||
|
var i = 1;
|
||||||
|
while (currStorage.hasOwnProperty(title)) {
|
||||||
|
title = title + "-" + i;
|
||||||
|
i++;
|
||||||
|
};
|
||||||
|
return title;
|
||||||
|
};
|
||||||
|
|
||||||
|
pandora.utils.loadLocalFile = function(file) {
|
||||||
|
Ox.oshash(file, function(oshash) {
|
||||||
|
//console.log(oshash);
|
||||||
|
var url = window.URL.createObjectURL(file);
|
||||||
|
var options = {
|
||||||
|
'type': 'local',
|
||||||
|
'url': url,
|
||||||
|
'name': oshash,
|
||||||
|
'title': file.name
|
||||||
|
}
|
||||||
|
pandora.$ui.textArea.speedtrans.load(options);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
pandora.utils.commonKeyboardEvents = {
|
||||||
|
key_control_up: function() {
|
||||||
|
Ox.print("ctrl left");
|
||||||
|
pandora.$ui.videoPlayer.seek(-1);
|
||||||
|
},
|
||||||
|
key_control_down: function() {
|
||||||
|
Ox.print("ctrl right");
|
||||||
|
pandora.$ui.videoPlayer.seek(1);
|
||||||
|
},
|
||||||
|
key_control_shift_up: function() {
|
||||||
|
pandora.$ui.videoPlayer.seek(-0.040);
|
||||||
|
},
|
||||||
|
key_control_shift_down: function() {
|
||||||
|
pandora.$ui.videoPlayer.seek(0.040);
|
||||||
|
},
|
||||||
|
key_control_space: function() {
|
||||||
|
pandora.$ui.videoPlayer.options("paused", !pandora.$ui.videoPlayer.options("paused"));
|
||||||
|
pandora.$ui.textArea.find("textarea").focus(); //FIXME
|
||||||
|
},
|
||||||
|
key_control_shift_s: function() {
|
||||||
|
pandora.$ui.textArea.speedtrans.save();
|
||||||
|
}
|
||||||
|
}
|
|
@ -6,7 +6,9 @@ pandora.ui.videoPanel = function() {
|
||||||
size: 300
|
size: 300
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
element: pandora.$ui.helpPanel = pandora.ui.helpPanel()
|
// element: pandora.$ui.helpPanel = pandora.ui.helpPanel()
|
||||||
|
//element: pandora.$ui.annotationsPanel = pandora.ui.annotationsPanel()
|
||||||
|
element: pandora.$ui.annotationsPanel = Ox.Element()
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
orientation: 'vertical'
|
orientation: 'vertical'
|
||||||
|
|
|
@ -1,22 +1,42 @@
|
||||||
pandora.ui.videoPlayer = function(options) {
|
pandora.ui.videoPlayer = function(options) {
|
||||||
// var url = options.url;
|
// var url = options.url;
|
||||||
|
console.log(options.url);
|
||||||
var timeline = options.timeline || "foo.png"; //FIXME
|
var timeline = options.timeline || "foo.png"; //FIXME
|
||||||
var that = pandora.$ui.videoPlayer = Ox.VideoPlayer({
|
var that = pandora.$ui.videoPlayer = Ox.VideoPlayer({
|
||||||
video: options.url,
|
video: [options.url],
|
||||||
|
//video: ["/oxspeed/jaaga.webm"],
|
||||||
controlsTop: ['fullscreen'],
|
controlsTop: ['fullscreen'],
|
||||||
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position'],
|
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position'],
|
||||||
height: 300,
|
height: 300,
|
||||||
width: 400,
|
width: 400,
|
||||||
showControlsOnLoad: true,
|
showControlsOnLoad: true,
|
||||||
duration: 35,
|
duration: 35, //FIXME
|
||||||
timeline: options.timeline || 'foo.png',
|
paused: true,
|
||||||
title: 'Test Video',
|
timeline: options.timeline || 'foo.png', //FIXME
|
||||||
|
title: options.title,
|
||||||
enableTimeline: true,
|
enableTimeline: true,
|
||||||
enableKeyboard: true,
|
enableKeyboard: true,
|
||||||
enableMouse: true,
|
enableMouse: true,
|
||||||
externalControls: true
|
externalControls: false
|
||||||
// enableTimeline: true
|
// enableTimeline: true
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
"position": setPosition,
|
||||||
|
'playing': setPosition
|
||||||
});
|
});
|
||||||
|
|
||||||
|
that.seek = function(by) {
|
||||||
|
var position = that.options("position");
|
||||||
|
var newPosition = position + by;
|
||||||
|
that.options("position", newPosition);
|
||||||
|
//setPosition({'position': newPosition});
|
||||||
|
};
|
||||||
|
|
||||||
|
function setPosition(data) {
|
||||||
|
//var position = pandora.$ui.videoPlayer.options("position");
|
||||||
|
pandora.$ui.annotationsPanel.options("position", data.position);
|
||||||
|
|
||||||
|
};
|
||||||
//that.videoName = options.name;
|
//that.videoName = options.name;
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue
Block a user