137 lines
4.1 KiB
JavaScript
137 lines
4.1 KiB
JavaScript
Ox.load('UI', {
|
|
debug: true,
|
|
theme: 'modern'
|
|
}, function() {
|
|
|
|
//var id = '0393109';
|
|
var id = '0097514';
|
|
|
|
Ox.get('srt/' + id + '.srt', function(srt) {
|
|
|
|
var subtitles = Ox.parseSRT(srt/*, 25*/),
|
|
layers = [
|
|
{
|
|
editable: true,
|
|
id: 'privatenotes',
|
|
items: [],
|
|
title: 'Private Notes'
|
|
},
|
|
{
|
|
editable: true,
|
|
id: 'publicnotes',
|
|
items: [],
|
|
title: 'Public Notes'
|
|
},
|
|
{
|
|
id: 'subtitles',
|
|
items: subtitles.map(function(subtitle, i) {
|
|
return {id: i, 'in': subtitle.in, out: subtitle.out, value: subtitle.text};
|
|
}),
|
|
title: 'Subtitles'
|
|
}
|
|
];
|
|
|
|
var $appPanel, $mainPanel;
|
|
|
|
var $videoEditor = Ox.VideoEditor({
|
|
annotationsSize: 256,
|
|
duration: 3029.96,
|
|
find: 'dode',
|
|
getFrameURL: function(position, width) {
|
|
return 'http://next.0xdb.org/' + id + '/frame/' + width + '/' + position + '.jpg'
|
|
},
|
|
getLargeTimelineImageURL: function(i) {
|
|
return 'http://next.0xdb.org/' + id + '/timelines/timeline.64.' + i + '.png';
|
|
},
|
|
getSmallTimelineImageURL: function(i) {
|
|
return 'http://next.0xdb.org/' + id + '/timelines/timeline.16.' + i + '.png';
|
|
},
|
|
height: window.innerHeight - 129,
|
|
'in': 0,
|
|
layers: layers,
|
|
out: 0,
|
|
position: 0,
|
|
posterFrame: 1515,
|
|
showAnnotations: true,
|
|
subtitles: subtitles,
|
|
video: {
|
|
96: 'http://next.0xdb.org/' + id + '/96p.webm',
|
|
240: 'http://next.0xdb.org/' + id + '/96p.webm?240p',
|
|
480: 'http://next.0xdb.org/' + id + '/96p.webm?480p'
|
|
},
|
|
videoHeight: 96,
|
|
videoSize: 'small',
|
|
videoWidth: 124,
|
|
width: window.innerWidth - 257
|
|
});
|
|
|
|
$appPanel = Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
collapsible: true,
|
|
element: Ox.Element(),
|
|
resizable: true,
|
|
resize: [128, 256, 384],
|
|
size: 256
|
|
},
|
|
{
|
|
element: $mainPanel = Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
collapsible: true,
|
|
element: Ox.Element(),
|
|
resizable: true,
|
|
resize: [64, 128, 192],
|
|
size: 128
|
|
},
|
|
{
|
|
element: $videoEditor
|
|
}
|
|
],
|
|
orientation: 'vertical'
|
|
})
|
|
}
|
|
],
|
|
orientation: 'horizontal'
|
|
})
|
|
.appendTo(Ox.UI.$body);
|
|
|
|
Ox.UI.$window.bind({
|
|
resize: function() {
|
|
$videoEditor.options({
|
|
width: $appPanel.getSize(1),
|
|
height: $mainPanel.getSize(1)
|
|
});
|
|
}
|
|
});
|
|
|
|
$mainPanel.bindEvent({
|
|
resize: function(foo, size) {
|
|
$videoEditor.options({
|
|
width: size
|
|
});
|
|
}
|
|
});
|
|
|
|
$videoEditor.bindEvent({
|
|
resize: function(foo, size) {
|
|
Ox.print('RESIZING', size)
|
|
$videoEditor.options({
|
|
height: size
|
|
});
|
|
}
|
|
});
|
|
|
|
$videoEditor.$element.bindEvent({
|
|
resize: function(foo, size) {
|
|
Ox.print('RESIZING', size)
|
|
$videoEditor.options({
|
|
height: size
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
});
|
|
|
|
});
|