From 4bdae7eb1eda8b5f771f167d6cdedaf9a05f6f1d Mon Sep 17 00:00:00 2001 From: rolux Date: Fri, 15 Feb 2013 10:47:49 +0530 Subject: [PATCH] add showInToOut option to SmallVideoTimelineImage --- .../Ox.UI/js/Video/SmallVideoTimelineImage.js | 122 +++++++++++++++--- 1 file changed, 101 insertions(+), 21 deletions(-) diff --git a/source/Ox.UI/js/Video/SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/SmallVideoTimelineImage.js index 32818100..2510ff6c 100644 --- a/source/Ox.UI/js/Video/SmallVideoTimelineImage.js +++ b/source/Ox.UI/js/Video/SmallVideoTimelineImage.js @@ -18,6 +18,7 @@ Ox.SmallVideoTimelineImage = function(options, self) { mode: 'player', out: 0, results: [], + showInToOut: false, state: 'default', subtitles: [], type: '', @@ -73,19 +74,27 @@ Ox.SmallVideoTimelineImage = function(options, self) { width: self.options.width + 'px' }); - self.images = Ox.isString(self.options.imageURL) ? - 1 : Math.ceil(self.options.duration / 3600); - self.imageWidth = Ox.isString(self.options.imageURL) ? - 1920 : Math.round(self.options.duration); - self.height = self.options.mode == 'player' ? 16 : 24; - self.imageHeight = self.options.mode == 'player' ? 16 : 18; - self.imageTop = self.options.mode == 'player' ? 0 : 3; - self.timelineTop = self.options.mode == 'player' ? 0 : 4; + if (self.options.showInToOut) { + self.pixelsPerSecond = ( + screen.width < 1024 ? 1024 : screen.width + ) / self.options.duration; + } + self.images = Ox.isString(self.options.imageURL) ? 1 + : Math.ceil(self.options.duration / 3600); + self.imageWidth = Ox.isString(self.options.imageURL) ? 1920 + : self.options.showInToOut ? ( + self.pixelsPerSecond <= 1 + ? Math.round(self.options.duration) + : Math.round(self.options.duration * 25) + ) + : Math.round(self.options.duration); + self.height = self.options.mode == 'editor' ? 24 : 16; + self.imageHeight = self.options.mode == 'editor' ? 18 : 16; + self.imageTop = self.options.mode == 'editor' ? 3 : 0; + self.timelineTop = self.options.mode == 'editor' ? 4 : 0; self.themeData = Ox.Theme.getThemeData(); - that.css({ - height: self.height + 'px' - }); + that.css({height: self.height + 'px'}); if (Ox.isString(self.options.imageURL)) { self.$timeline = $('') @@ -99,6 +108,15 @@ Ox.SmallVideoTimelineImage = function(options, self) { height: '16px' }) .appendTo(that); + } else if (self.options.showInToOut) { + self.$timeline = getClipTimeline() + .css({ + position: 'absolute', + top: self.timelineTop + 'px', + width: self.options.width + 'px', + height: '16px' + }) + .appendTo(that); } else { Ox.loop(self.images, function(i) { $('') @@ -152,15 +170,53 @@ Ox.SmallVideoTimelineImage = function(options, self) { }) .appendTo(that); + function getClipTimeline() { + var $canvas, context, image, + firstTile, lastTile, tileHeight, tileOffset, tileWidth; + if (self.pixelsPerSecond <= 1) { + firstTile = Math.floor(self.options['in'] / 3600); + lastTile = Math.floor(self.options.out / 3600); + tileHeight = 16; + tileOffset = -Math.round(self.options['in'] % 3600); + tileWidth = 3600; + } else { + firstTile = Math.floor(self.options['in'] / 60); + lastTile = Math.floor(self.options.out / 60); + tileHeight = 64; + tileOffset = -Math.round(self.options['in'] % 60); + tileWidth = 1500; + } + $canvas = $('').attr({ + width: self.imageWidth, + height: tileHeight + }); + context = $canvas[0].getContext('2d'); + Ox.loop(firstTile, lastTile + 1, function(tileIndex) { + var $image = $('') + .one({ + load: function() { + context.drawImage( + $image[0], + tileOffset + (tileIndex - firstTile) * tileWidth, + 0 + ); + } + }) + .attr({ + src: self.options.imageURL(tileHeight, tileIndex) + }); + }); + return $canvas; + } + function getImageURL(image, callback) { var width = image == 'results' || image == 'selection' ? self.options.width : self.imageWidth, height = self.imageHeight, - canvas = $('') - .attr({ - width: width, - height: height - })[0], + canvas = $('').attr({ + width: width, + height: height + })[0], context = canvas.getContext('2d'), imageData = context.createImageData(width, height), data = imageData.data; @@ -188,7 +244,11 @@ Ox.SmallVideoTimelineImage = function(options, self) { }); }); }); - } else if (image == 'selection' && self.options.out > self.options['in']) { + } else if ( + image == 'selection' + && self.options.out > self.options['in'] + && !self.options.showInToOut + ) { var left = Math.round( self.options['in'] / self.options.duration * width ), @@ -221,15 +281,35 @@ Ox.SmallVideoTimelineImage = function(options, self) { }); }); } else if (image == 'subtitles') { - var bottom = self.options.mode == 'player' ? 14 : 15; - self.options.subtitles.forEach(function(subtitle) { + var bottom = self.options.mode == 'editor' ? 15 : 14, + offset = self.options.showInToOut ? ( + self.pixelsPerSecond <= 1 + ? -self.options['in'] + : -self.options['in'] * 25 + ) : 0, + subtitles = self.options.showInToOut + ? self.options.subtitles.filter(function(subtitle) { + return ( + subtitle['in'] >= self.options['in'] + && subtitle['in'] <= self.options.out + ) || ( + subtitle.out >= self.options['in'] + && subtitle.out <= self.options.out + ) || ( + subtitle['in'] < self.options['in'] + && subtitle.out > self.options.out + ) + }) + : self.options.subtitles; + subtitles.forEach(function(subtitle) { var left = Math.round( subtitle['in'] / self.options.duration * self.imageWidth - ), + ) + offset, right = Math.round( subtitle.out / self.options.duration * self.imageWidth - ) + 1, + ) + offset + 1, top = bottom - subtitle.text.split('\n').length - 2; + Ox.print('XXX', subtitle['in'], subtitle.out, left, right); Ox.loop(left, right, function(x) { Ox.loop(top, bottom, function(y) { var alpha = 128,