diff --git a/source/Ox.UI/js/Video/SmallVideoTimeline.js b/source/Ox.UI/js/Video/SmallVideoTimeline.js index 7c722dab..46d2061e 100644 --- a/source/Ox.UI/js/Video/SmallVideoTimeline.js +++ b/source/Ox.UI/js/Video/SmallVideoTimeline.js @@ -21,6 +21,7 @@ Ox.SmallVideoTimeline = function(options, self) { find: '', imageURL: '', 'in': 0, + invertHighlight: false, mode: 'player', out: 0, paused: false, @@ -166,6 +167,7 @@ Ox.SmallVideoTimeline = function(options, self) { duration: self.options.duration, imageURL: self.options.imageURL, 'in': self.options['in'], + invertHightlight: self.options.invertHighlight, mode: self.options.mode, out: self.options.out, results: self.options.results, diff --git a/source/Ox.UI/js/Video/SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/SmallVideoTimelineImage.js index 9bd9ee29..18835819 100644 --- a/source/Ox.UI/js/Video/SmallVideoTimelineImage.js +++ b/source/Ox.UI/js/Video/SmallVideoTimelineImage.js @@ -13,6 +13,7 @@ Ox.SmallVideoTimelineImage = function(options, self) { .defaults({ duration: 0, imageURL: '', + invertHighlight: false, 'in': 0, mode: 'player', out: 0, @@ -194,6 +195,9 @@ Ox.SmallVideoTimelineImage = function(options, self) { right = Math.round( self.options.out / self.options.duration * width ) + 1, + spans = self.options.invertHighlight + ? [{left: 0, right: left}, {left: right, right: width + 1}] + : [{left: left, right: right}], top = 0, bottom = height, rgb = self.themeData[ @@ -202,16 +206,18 @@ Ox.SmallVideoTimelineImage = function(options, self) { : self.options.state == 'selected' ? 'videoTimelineSelectedGradient' : 'videoTimelineDefaultGradient' ]; - Ox.loop(left, right, function(x) { - Ox.loop(top, bottom, function(y) { - var alpha = self.options.mode == 'editor' - && (y == top || y == bottom - 1) ? 255 : 128, - color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1], - index = x * 4 + y * 4 * width; - data[index] = color[0]; - data[index + 1] = color[1]; - data[index + 2] = color[2]; - data[index + 3] = alpha; + spans.forEach(function(span) { + Ox.loop(span.left, span.right, function(x) { + Ox.loop(top, bottom, function(y) { + var alpha = self.options.mode == 'editor' + && (y == top || y == bottom - 1) ? 255 : 128, + color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1], + index = x * 4 + y * 4 * width; + data[index] = color[0]; + data[index + 1] = color[1]; + data[index + 2] = color[2]; + data[index + 3] = alpha; + }); }); }); } else if (image == 'subtitles') { diff --git a/source/Ox.UI/js/Video/VideoPlayer.js b/source/Ox.UI/js/Video/VideoPlayer.js index ad1b2eac..233fa56b 100644 --- a/source/Ox.UI/js/Video/VideoPlayer.js +++ b/source/Ox.UI/js/Video/VideoPlayer.js @@ -33,6 +33,7 @@ Ox.VideoPlayer Generic Video Player fullscreen If true, video is in fullscreen height Height in px (excluding external controls) in In point (sec) + invertHighlight If true, invert selection highlight on timeline keepIconVisible If true, play icon stays visible after mouseleave keepLargeTimelineVisible If true, large timeline stays visible after mouseleave keepLogoVisible If true, logo stays visible after mouseleave @@ -1492,6 +1493,7 @@ Ox.VideoPlayer = function(options, self) { find: self.options.find, imageURL: self.options.timeline, 'in': self.options['in'], + invertHighlight: self.options.invertHighlight, mode: 'player', out: self.options.out, paused: self.options.paused,