oxjs/demos/videoeditor/js/videoeditor.js
2011-05-19 14:37:19 +02:00

127 lines
3.8 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) {
$videoEditor.options({
height: size
});
}
});
});
});