From 67c154547c30bf19b4df59df47b613755be8810c Mon Sep 17 00:00:00 2001 From: rolux Date: Thu, 19 May 2011 09:06:42 +0200 Subject: [PATCH] fix a resizing bug in the video editor demo --- demos/videoeditor/js/videoeditor.js | 38 +++++++++++++------ .../Ox.UI/js/Video/Ox.BlockVideoTimeline.js | 1 - source/Ox.UI/js/Video/Ox.VideoEditor.js | 6 ++- source/Ox.js | 7 +++- 4 files changed, 36 insertions(+), 16 deletions(-) diff --git a/demos/videoeditor/js/videoeditor.js b/demos/videoeditor/js/videoeditor.js index e2520906..99430503 100644 --- a/demos/videoeditor/js/videoeditor.js +++ b/demos/videoeditor/js/videoeditor.js @@ -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 }); } }); + }); }); diff --git a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js index a1e6a90c..cb6f6ae2 100644 --- a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js @@ -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); } diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index c6d11d4e..ebee29d1 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -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 + diff --git a/source/Ox.js b/source/Ox.js index 6a17fff7..82249f20 100644 --- a/source/Ox.js +++ b/source/Ox.js @@ -3951,7 +3951,7 @@ Ox.parseSRT 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],