From ac2ea5f53d9ddf5da764bec872a7b5384915d000 Mon Sep 17 00:00:00 2001 From: rolux Date: Mon, 16 May 2011 09:03:37 +0200 Subject: [PATCH] more efficient composition of block timeline, more efficient resizing of small timeline --- demos/video/js/video.js | 1 + .../Ox.UI/js/Video/Ox.BlockVideoTimeline.js | 33 +++++++------ .../Ox.UI/js/Video/Ox.SmallVideoTimeline.js | 46 ++++++++++--------- .../js/Video/Ox.SmallVideoTimelineImage.js | 46 +++++++++++++++---- 4 files changed, 83 insertions(+), 43 deletions(-) diff --git a/demos/video/js/video.js b/demos/video/js/video.js index 825dc31d..5325365d 100644 --- a/demos/video/js/video.js +++ b/demos/video/js/video.js @@ -128,6 +128,7 @@ Ox.load('UI', { resize: function(foo, size) { $videos[0].options({width: size - 32}); $smallTimeline.options({width: size - 16}); + $playerTimeline.options({width: size - 16}); } }), size: 392, diff --git a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js index 4f204ef5..6d225c96 100644 --- a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js @@ -43,9 +43,24 @@ Ox.BlockVideoTimeline = function(options, self) { setCSS(); - Ox.loop(self.lines, function(i) { - addLine(i); - }); + self.$image = Ox.SmallVideoTimelineImage({ + duration: self.options.duration, + editing: self.options.editing, + getTimelineURL: self.options.getTimelineURL, + 'in': self.options['in'], + out: self.options.out, + results: self.options.results, + subtitles: self.options.subtitles, + width: Math.ceil(self.options.duration), + type: self.options.type + }) + .bindEvent('load', function() { + // wait until the timeline image (the one image that is async) + // has loaded, so we can clone the element + Ox.loop(self.lines, function(i) { + addLine(i); + }); + }) self.$positionMarker = $('') .attr({ @@ -90,17 +105,7 @@ Ox.BlockVideoTimeline = function(options, self) { overflow: 'hidden' }) .appendTo(that.$element); - self.$images[i] = Ox.SmallVideoTimelineImage({ - duration: self.options.duration, - editing: self.options.editing, - getTimelineURL: self.options.getTimelineURL, - 'in': self.options['in'], - out: self.options.out, - results: self.options.results, - subtitles: self.options.subtitles, - width: Math.ceil(self.options.duration), - type: self.options.type - }) + self.$images[i] = self.$image.clone() .css({ position: 'absolute', marginLeft: (-i * self.options.width) + 'px' diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js index d3d77630..52e005aa 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js @@ -35,23 +35,7 @@ Ox.SmallVideoTimeline = function(options, self) { height: self.height + 'px' }); - self.$image = Ox.SmallVideoTimelineImage({ - duration: self.options.duration, - editing: self.options.editing, - getTimelineURL: self.options.getTimelineURL, - 'in': self.options['in'], - out: self.options.out, - results: self.options.results, - subtitles: self.options.subtitles, - width: self.imageWidth, - type: self.options.type - }) - .css({ - position: 'absolute', - left: self.imageLeft + 'px', - width: self.options.width + 'px' - }) - .appendTo(that); + self.$image = getTimelineImage().appendTo(that); self.$interface = Ox.Element() .addClass('OxInterface') @@ -167,6 +151,25 @@ Ox.SmallVideoTimeline = function(options, self) { return subtitle; } + function getTimelineImage() { + return Ox.SmallVideoTimelineImage({ + duration: self.options.duration, + editing: self.options.editing, + getTimelineURL: self.options.getTimelineURL, + 'in': self.options['in'], + out: self.options.out, + results: self.options.results, + subtitles: self.options.subtitles, + width: self.imageWidth, + type: self.options.type + }) + .css({ + position: 'absolute', + left: self.imageLeft + 'px', + width: self.imageWidth + 'px' + }); + } + function mousedown(e) { if ($(e.target).is('.OxInterface')) { self.options.position = getPosition(e); @@ -228,13 +231,14 @@ Ox.SmallVideoTimeline = function(options, self) { } function setWidth() { + self.imageWidth = self.options.width - + (self.options.type == 'player' ? 16 : 8); that.css({ width: self.options.width + 'px' }); - self.$image.css({ - width: self.imageWidth + 'px' - }); - self.$image.children().css({ + self.$image.options({ + width: self.imageWidth + }).css({ width: self.imageWidth + 'px' }); self.$interface.css({ diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js index f6b3bf07..746b76f5 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js +++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js @@ -44,6 +44,7 @@ Ox.SmallVideoTimelineImage = function(options, self) { self.$timeline.attr({ src: imageURL }); + that.triggerEvent('load'); }); self.$subtitles = $('') @@ -83,7 +84,8 @@ Ox.SmallVideoTimelineImage = function(options, self) { .appendTo(that.$element); function getImageURL(image, callback) { - var width = Math.ceil(self.options.duration), + var width = image == 'results' || image == 'selection' ? + self.options.width : Math.ceil(self.options.duration), height = self.imageHeight, canvas = $('') .attr({ @@ -97,11 +99,18 @@ Ox.SmallVideoTimelineImage = function(options, self) { var top = 0, bottom = height; self.options.results.forEach(function(result) { - var left = Math.round(result['in']), - right = Math.round(result.out) + 1; + var left = Math.round( + result['in'] * self.options.width / self.options.duration + ), + right = Math.round( + result.out * self.options.width / self.options.duration + ) + 1; Ox.loop(left, right, function(x) { Ox.loop(top, bottom, function(y) { - var color = (y == top || y == bottom - 1) ? [255, 255, 0, 255] : [255, 255, 0, 64], + var color = self.options.type == 'player' ? + [255, 255, 0, 128] : + (y == top || y == bottom - 1) ? + [255, 255, 0, 255] : [255, 255, 0, 64], index = x * 4 + y * 4 * width; data[index] = color[0]; data[index + 1] = color[1]; @@ -111,14 +120,20 @@ Ox.SmallVideoTimelineImage = function(options, self) { }); }); } else if (image == 'selection') { - var left = Math.round(self.options['in']), - right = Math.round(self.options.out) + 1, + var left = Math.round( + self.options['in'] * self.options.width / self.options.duration + ), + right = Math.round( + self.options.out * self.options.width / self.options.duration + ) + 1, top = 0, bottom = height, rgb = self.options.editing ? [128, 255, 255] : [255, 255, 255]; Ox.loop(left, right, function(x) { Ox.loop(top, bottom, function(y) { - var color = [rgb[0], rgb[1], rgb[2], (y == top || y == bottom - 1) ? 255 : 64], + var color = self.options.type == 'player' ? + [rgb[0], rgb[1], rgb[2], 128] : + [rgb[0], rgb[1], rgb[2], (y == top || y == bottom - 1) ? 255 : 64], index = x * 4 + y * 4 * width; data[index] = color[0]; data[index + 1] = color[1]; @@ -134,7 +149,8 @@ Ox.SmallVideoTimelineImage = function(options, self) { top = bottom - subtitle.text.split('\n').length - 2; Ox.loop(left, right, function(x) { Ox.loop(top, bottom, function(y) { - var color = (y == top || y == bottom - 1) ? [0, 0, 0] : [255, 255, 255], + var color = (y == top || y == bottom - 1) ? + [0, 0, 0] : [255, 255, 255], index = x * 4 + y * 4 * width; data[index] = color[0]; data[index + 1] = color[1]; @@ -175,10 +191,24 @@ Ox.SmallVideoTimelineImage = function(options, self) { self.$results.attr({ src: getImageURL('results') }); + } else if (key == 'selection') { + self.$selection.attr({ + src: getImageURL('selection') + }); } else if (key == 'subtitles') { self.$subtitles.attr({ src: getImageURL('subtitles') }); + } else if (key == 'width') { + that.css({width: value + 'px'}); + self.$results + .attr({src: getImageURL('results')}) + .css({width: value + 'px'}); + self.$selection + .attr({src: getImageURL('selection')}) + .css({width: value + 'px'}); + self.$subtitles.css({width: value + 'px'}); + self.$timeline.css({width: value + 'px'}); } }