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) {
|
||||
|
||||
var subtitles = Ox.parseSRT(srt);
|
||||
var subtitles = Ox.parseSRT(srt, 25);
|
||||
|
||||
var $appPanel, $mainPanel;
|
||||
|
||||
var $videoEditor = Ox.VideoEditor({
|
||||
annotationsSize: 256,
|
||||
|
@ -32,11 +34,12 @@ Ox.load('UI', {
|
|||
480: 'http://next.0xdb.org/0393109/96p.webm?480p'
|
||||
},
|
||||
videoHeight: 96,
|
||||
videoSize: 'small',
|
||||
videoWidth: 180,
|
||||
width: window.innerWidth - 257
|
||||
});
|
||||
|
||||
Ox.SplitPanel({
|
||||
$appPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
collapsible: true,
|
||||
|
@ -46,7 +49,7 @@ Ox.load('UI', {
|
|||
size: 256
|
||||
},
|
||||
{
|
||||
element: Ox.SplitPanel({
|
||||
element: $mainPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
collapsible: true,
|
||||
|
@ -61,28 +64,39 @@ Ox.load('UI', {
|
|||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
resize: function(foo, size) {
|
||||
$videoEditor.options({
|
||||
width: size
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
})
|
||||
.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) {
|
||||
Ox.print('HHHHHHHHH', foo, size)
|
||||
$videoEditor.options({
|
||||
width: size
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$videoEditor.bindEvent({
|
||||
resize: function(foo, size) {
|
||||
Ox.print('RESIZE!!!!!!!!!')
|
||||
$videoEditor.options({
|
||||
height: size
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
@ -128,7 +128,6 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
|
||||
function getPosition(e) {
|
||||
//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);
|
||||
}
|
||||
|
||||
|
|
|
@ -101,7 +101,6 @@ Ox.VideoEditor = function(options, self) {
|
|||
},
|
||||
key_shift_left: function() {
|
||||
movePositionBy(1);
|
||||
//movePositionBy(-60);
|
||||
},
|
||||
key_shift_i: function() {
|
||||
goToPoint('in');
|
||||
|
@ -109,9 +108,11 @@ Ox.VideoEditor = function(options, self) {
|
|||
key_shift_o: function() {
|
||||
goToPoint('out');
|
||||
},
|
||||
key_shift_p: function() {
|
||||
// go to poster frame
|
||||
},
|
||||
key_shift_right: function() {
|
||||
movePositionBy(1);
|
||||
//movePositionBy(60);
|
||||
},
|
||||
key_shift_up: function() {
|
||||
movePositionBy(-self.options.position);
|
||||
|
@ -429,6 +430,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
self.$editor.css({
|
||||
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;
|
||||
function getHeight() {
|
||||
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')
|
||||
[{'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')
|
||||
.map(function(block) {
|
||||
var lines = block.split('\n'), points;
|
||||
|
@ -3963,6 +3963,11 @@ Ox.parseSRT = function(str) {
|
|||
[3600, 60, 1, 0.001][i];
|
||||
}, 0);
|
||||
});
|
||||
if (fps) {
|
||||
points = points.map(function(point) {
|
||||
return Math.round(point * fps) / fps;
|
||||
});
|
||||
}
|
||||
return {
|
||||
'in': points[0],
|
||||
out: points[1],
|
||||
|
|
Loading…
Reference in a new issue