fix a resizing bug in the video editor demo
This commit is contained in:
parent
a1deb20f97
commit
67c154547c
4 changed files with 36 additions and 16 deletions
|
@ -5,7 +5,9 @@ Ox.load('UI', {
|
||||||
|
|
||||||
Ox.get('srt/0393109.srt', function(srt) {
|
Ox.get('srt/0393109.srt', function(srt) {
|
||||||
|
|
||||||
var subtitles = Ox.parseSRT(srt);
|
var subtitles = Ox.parseSRT(srt, 25);
|
||||||
|
|
||||||
|
var $appPanel, $mainPanel;
|
||||||
|
|
||||||
var $videoEditor = Ox.VideoEditor({
|
var $videoEditor = Ox.VideoEditor({
|
||||||
annotationsSize: 256,
|
annotationsSize: 256,
|
||||||
|
@ -32,11 +34,12 @@ Ox.load('UI', {
|
||||||
480: 'http://next.0xdb.org/0393109/96p.webm?480p'
|
480: 'http://next.0xdb.org/0393109/96p.webm?480p'
|
||||||
},
|
},
|
||||||
videoHeight: 96,
|
videoHeight: 96,
|
||||||
|
videoSize: 'small',
|
||||||
videoWidth: 180,
|
videoWidth: 180,
|
||||||
width: window.innerWidth - 257
|
width: window.innerWidth - 257
|
||||||
});
|
});
|
||||||
|
|
||||||
Ox.SplitPanel({
|
$appPanel = Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
collapsible: true,
|
collapsible: true,
|
||||||
|
@ -46,7 +49,7 @@ Ox.load('UI', {
|
||||||
size: 256
|
size: 256
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
element: Ox.SplitPanel({
|
element: $mainPanel = Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
collapsible: true,
|
collapsible: true,
|
||||||
|
@ -61,28 +64,39 @@ Ox.load('UI', {
|
||||||
],
|
],
|
||||||
orientation: 'vertical'
|
orientation: 'vertical'
|
||||||
})
|
})
|
||||||
.bindEvent({
|
|
||||||
resize: function(foo, size) {
|
|
||||||
$videoEditor.options({
|
|
||||||
width: size
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
orientation: 'horizontal'
|
orientation: 'horizontal'
|
||||||
})
|
})
|
||||||
.appendTo(Ox.UI.$body);
|
.appendTo(Ox.UI.$body);
|
||||||
|
|
||||||
$videoEditor.$element.bindEvent({
|
Ox.UI.$window.bind({
|
||||||
|
resize: function() {
|
||||||
|
$videoEditor.options({
|
||||||
|
width: $appPanel.size(1),
|
||||||
|
height: $mainPanel.size(1)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$mainPanel.bindEvent({
|
||||||
resize: function(foo, size) {
|
resize: function(foo, size) {
|
||||||
Ox.print('HHHHHHHHH', foo, size)
|
$videoEditor.options({
|
||||||
|
width: size
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$videoEditor.bindEvent({
|
||||||
|
resize: function(foo, size) {
|
||||||
|
Ox.print('RESIZE!!!!!!!!!')
|
||||||
$videoEditor.options({
|
$videoEditor.options({
|
||||||
height: size
|
height: size
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -128,7 +128,6 @@ Ox.BlockVideoTimeline = function(options, self) {
|
||||||
|
|
||||||
function getPosition(e) {
|
function getPosition(e) {
|
||||||
//FIXME: this might still be broken in opera according to http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript
|
//FIXME: this might still be broken in opera according to http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript
|
||||||
Ox.print('offsetX', e.offsetX)
|
|
||||||
return (e.offsetX ? e.offsetX : e.clientX - $(e.target).offset().left);
|
return (e.offsetX ? e.offsetX : e.clientX - $(e.target).offset().left);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -101,7 +101,6 @@ Ox.VideoEditor = function(options, self) {
|
||||||
},
|
},
|
||||||
key_shift_left: function() {
|
key_shift_left: function() {
|
||||||
movePositionBy(1);
|
movePositionBy(1);
|
||||||
//movePositionBy(-60);
|
|
||||||
},
|
},
|
||||||
key_shift_i: function() {
|
key_shift_i: function() {
|
||||||
goToPoint('in');
|
goToPoint('in');
|
||||||
|
@ -109,9 +108,11 @@ Ox.VideoEditor = function(options, self) {
|
||||||
key_shift_o: function() {
|
key_shift_o: function() {
|
||||||
goToPoint('out');
|
goToPoint('out');
|
||||||
},
|
},
|
||||||
|
key_shift_p: function() {
|
||||||
|
// go to poster frame
|
||||||
|
},
|
||||||
key_shift_right: function() {
|
key_shift_right: function() {
|
||||||
movePositionBy(1);
|
movePositionBy(1);
|
||||||
//movePositionBy(60);
|
|
||||||
},
|
},
|
||||||
key_shift_up: function() {
|
key_shift_up: function() {
|
||||||
movePositionBy(-self.options.position);
|
movePositionBy(-self.options.position);
|
||||||
|
@ -429,6 +430,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
self.$editor.css({
|
self.$editor.css({
|
||||||
overflowY: (scrollbarIsVisible && height <= self.options.height) ? 'scroll' : 'auto'
|
overflowY: (scrollbarIsVisible && height <= self.options.height) ? 'scroll' : 'auto'
|
||||||
});
|
});
|
||||||
|
//Ox.print('getSizes', scrollbarIsVisible, height, self.options.height, size)
|
||||||
return (!scrollbarIsVisible && height > self.options.height) ? getSizes(true) : size;
|
return (!scrollbarIsVisible && height > self.options.height) ? getSizes(true) : size;
|
||||||
function getHeight() {
|
function getHeight() {
|
||||||
return size.player[0].height + self.controlsHeight +
|
return size.player[0].height + self.controlsHeight +
|
||||||
|
|
|
@ -3951,7 +3951,7 @@ Ox.parseSRT <f> Parses an srt subtitle file
|
||||||
> Ox.parseSRT('1\n01:02:00,000 --> 01:02:03,400\nHello World')
|
> Ox.parseSRT('1\n01:02:00,000 --> 01:02:03,400\nHello World')
|
||||||
[{'in': 3720, out: 3723.4, text: 'Hello World'}]
|
[{'in': 3720, out: 3723.4, text: 'Hello World'}]
|
||||||
@*/
|
@*/
|
||||||
Ox.parseSRT = function(str) {
|
Ox.parseSRT = function(str, fps) {
|
||||||
return str.replace(/\r\n/g, '\n').replace(/\n+$/, '').split('\n\n')
|
return str.replace(/\r\n/g, '\n').replace(/\n+$/, '').split('\n\n')
|
||||||
.map(function(block) {
|
.map(function(block) {
|
||||||
var lines = block.split('\n'), points;
|
var lines = block.split('\n'), points;
|
||||||
|
@ -3963,6 +3963,11 @@ Ox.parseSRT = function(str) {
|
||||||
[3600, 60, 1, 0.001][i];
|
[3600, 60, 1, 0.001][i];
|
||||||
}, 0);
|
}, 0);
|
||||||
});
|
});
|
||||||
|
if (fps) {
|
||||||
|
points = points.map(function(point) {
|
||||||
|
return Math.round(point * fps) / fps;
|
||||||
|
});
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
'in': points[0],
|
'in': points[0],
|
||||||
out: points[1],
|
out: points[1],
|
||||||
|
|
Loading…
Reference in a new issue