CAMP/oxspeed
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

working with updated oxjs, load srt, different layers, etc

Browse Source
This commit is contained in:
Sanjay B 2014-01-22 19:26:04 +05:30
parent a8f1c960c9
commit 8c06be3a5d
15 changed files with 483 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -7,8 +7,6 @@
<!-- <script type="text/javascript" src="js/classes.js"></script> -->
<script type="text/javascript" src="js/staticfuncs.js"></script>
</head>
<body>
foo
</body>
<body></body>
</html>

26
js/speedtrans.js
View File

@ -10,7 +10,7 @@
}, loadSpeedtrans);
function loadSpeedtrans(browserSupported) {
console.log("loaded speedtrans");
if (!browserSupported) { alert("your browser is not supported"); return; }
window.pandora = {
'load': function() {
@ -27,6 +27,7 @@
storage: Ox.localStorage("speedtrans"),
ui: {},
site: {},
state: {},
user: {}
});
@ -35,15 +36,16 @@
'width': pandora.$ui.textPanel.width() - 20,
'height': pandora.$ui.textPanel.height() - 40
});
}
};
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 filesToLoad = Ox.map(files, function(v) {
return prefix + v + ".js";
});
//console.log(filesToLoad);
Ox.getFile(filesToLoad, function() {
console.log("got filed");
initSpeedtrans();
});
}
@ -52,11 +54,25 @@
}
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.openSRTDialog = pandora.ui.openSRTDialog();
pandora.resizeWindow();
//console.log("am here");
}

19
js/staticfuncs.js
View File

@ -229,6 +229,25 @@ function spansToSrt(duration, arr, fmt, start_no) {
}
var srt = '';
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++) {
var s = arr[k];
if (s.text.trim() == '') {

100
js/ui/annotationsPanel.js Normal file
View 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;
};

1
js/ui/appPanel.js
View File

@ -6,6 +6,7 @@ pandora.ui.appPanel = function() {
size: 20
},
{
//element: Ox.Element().text("Please load a video, etc.")
element: pandora.$ui.mainPanel = pandora.ui.mainPanel()
}
],

20
js/ui/mainMenu.js
View File

@ -29,7 +29,7 @@ pandora.ui.mainMenu = function() {
]
})
.bindKeyboard()
.bindEvent({
.bindEvent(Ox.extend(pandora.utils.commonKeyboardEvents, {
click: function(data) {
// Ox.print(data);
var selected = data.id;
@ -38,18 +38,7 @@ pandora.ui.mainMenu = function() {
// 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]);
pandora.utils.loadLocalFile(file);
} else if (data.id == 'openRemoteFileMenu') {
pandora.$ui.openRemoteDialog.open();
} else if (data.id == 'openSRT') {
@ -57,11 +46,8 @@ pandora.ui.mainMenu = function() {
} else if (data.id == 'TestMenu1') {
alert("clicked TestMenu1");
}
},
key_control_shift_s: function() {
pandora.$ui.textArea.speedtrans.save();
}
});
}));
return that;
}

8
js/ui/newSRTDialog.js Normal file
View File

@ -0,0 +1,8 @@
pandora.ui.newSRTDialog = function() {
var that = Ox.Dialog({
});
return that;
};

11
js/ui/openRemoteDialog.js
View File

@ -15,19 +15,19 @@ pandora.ui.openRemoteDialog = function() {
// 'width': 250
// });
//FIXME: convert to SelectInput
var instances = [
{
'id': 'http://pad.ma',
'id': 'https://pad.ma',
'title': 'Pad.ma'
},
{
'id': 'http://0xdb.org',
'id': 'https://0xdb.org',
'title': 'Oxdb'
},
{
'id': 'http://indiancine.ma',
'id': 'https://indiancine.ma',
'title': 'IndianCine.ma'
},
{
@ -75,7 +75,8 @@ pandora.ui.openRemoteDialog = function() {
var options = {
'name': base_url,
'url': base_url + "/480p.webm",
'type': 'remote'
'type': 'remote',
'title': base_url
};
pandora.$ui.textArea.speedtrans.load(options);
that.close();

33
js/ui/openSRTDialog.js
View File

@ -1,4 +1,33 @@
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({
'type': 'textarea',
'label': 'Paste SRT',
@ -7,10 +36,12 @@ pandora.ui.openSRTDialog = function() {
'width': 500,
'height': 400
});
var $content = Ox.Element().append($textInput);
var $content = Ox.Element().append($layerName).append($fileInput).append($textInput);
var that = Ox.Dialog({
'content': $content,
'closeButton': true,
'width': 600,
'height': 450,
'buttons': [
Ox.Button({
'group': true,

64
js/ui/selectAnnotationType.js Normal file
View 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;
};

98
js/ui/textArea.js
View File

@ -4,8 +4,15 @@ pandora.ui.textArea = function() {
width: 400,
height: 400,
changeOnKeypress: true
}).bindEvent("change", function() {
Ox.print("textarea changed");
that.speedtrans.save();
that.changed = true;
});
var $video = pandora.$ui.videoPlayer;
that.changed = false;
that.speedtrans = {
spans: [],
@ -60,9 +67,12 @@ pandora.ui.textArea = function() {
var word = val.substring(firstLetter, lastLetter);
return word;
},
toSrt: function(fmt) {
toSrt: function(fmt, txt) {
if (!fmt) var fmt = 'srt';
var text = cleanNewlines(that.value());
if (txt === undefined) {
txt = that.value();
}
var text = cleanNewlines(txt);
var lines = [];
lines = text.split("\n");
var i=0;
@ -99,6 +109,7 @@ pandora.ui.textArea = function() {
}
this.spans = spans;
var duration = pandora.$ui.videoPlayer.options("duration");
//Ox.print(duration, spans, fmt);
var srt = spansToSrt(duration, spans, fmt);
// console.log(srt);
return srt;
@ -116,7 +127,7 @@ pandora.ui.textArea = function() {
i++;
return obj;
});
console.log(spans);
//console.log(spans);
var out = '';
for (span in spans) {
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 (span < spans.length - 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";
} else {
out += "\n";
@ -135,15 +147,20 @@ pandora.ui.textArea = function() {
}
}
}
console.log(out);
//console.log(out);
that.value(out);
},
save: function() {
console.log(that.value());
//console.log(that.value());
//var videoName = pandora.$ui.videoPlayer.videoName;
//console.log(videoName);
console.log(that.storage);
pandora.storage(that.storage, {'text': that.value()});
//console.log(that.storage);
//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) {
console.log(options);
@ -155,35 +172,78 @@ pandora.ui.textArea = function() {
// var url = options.url;
// 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.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 = {
'url': options.url
};
console.log(videoOptions);
pandora.$ui.videoPlayer = pandora.ui.videoPlayer(videoOptions);
//pandora.$ui.videoPlayer = videoElem;
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);
//$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({
key_control_space: function() {
$video.options("paused", !$video.options("paused"));
that.find("textarea").focus(); //FIXME
},
that.bindEvent(Ox.extend(pandora.utils.commonKeyboardEvents, {
key_control_x: function() {
that.speedtrans.insertTc();
},
key_control_shift_s: function() {
that.speedtrans.save();
}//,
// key_tab: function() {
// 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() {
//console.log("dblclicked");
var tc = that.speedtrans.isTc();
//Ox.print($video);
//Ox.print(tc);
if (tc) {
$video.options("position", tc / 1000);
//GLOB = $video;
pandora.$ui.videoPlayer.options("position", tc / 1000);
}
});
return that;

3
js/ui/textPanel.js
View File

@ -1,6 +1,9 @@
pandora.ui.textPanel = function() {
var that = Ox.SplitPanel({
elements: [
{
element: pandora.$ui.selectAnnotationType = pandora.ui.selectAnnotationType()
},
{
element: pandora.$ui.textArea = pandora.ui.textArea()
},

116
js/ui/utils.js Normal file
View 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();
}
}

4
js/ui/videoPanel.js
View File

@ -6,7 +6,9 @@ pandora.ui.videoPanel = function() {
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'

30
js/ui/videoPlayer.js
View File

@ -1,22 +1,42 @@
pandora.ui.videoPlayer = function(options) {
// var url = options.url;
console.log(options.url);
var timeline = options.timeline || "foo.png"; //FIXME
var that = pandora.$ui.videoPlayer = Ox.VideoPlayer({
video: options.url,
video: [options.url],
//video: ["/oxspeed/jaaga.webm"],
controlsTop: ['fullscreen'],
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position'],
height: 300,
width: 400,
showControlsOnLoad: true,
duration: 35,
timeline: options.timeline || 'foo.png',
title: 'Test Video',
duration: 35, //FIXME
paused: true,
timeline: options.timeline || 'foo.png', //FIXME
title: options.title,
enableTimeline: true,
enableKeyboard: true,
enableMouse: true,
externalControls: true
externalControls: false
// 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;
return that;
};