From 37fd8b2ce934342388f9cf0ccc0e60368c6f1fa9 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Tue, 12 Feb 2013 11:58:52 +0530
Subject: [PATCH] add 'invertHighlight' option to video player

---
 source/Ox.UI/js/Video/SmallVideoTimeline.js   |  2 ++
 .../Ox.UI/js/Video/SmallVideoTimelineImage.js | 26 ++++++++++++-------
 source/Ox.UI/js/Video/VideoPlayer.js          |  2 ++
 3 files changed, 20 insertions(+), 10 deletions(-)

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 <f> Generic Video Player
         fullscreen <b|false> If true, video is in fullscreen
         height <n|144> Height in px (excluding external controls)
         in <n> In point (sec)
+        invertHighlight <b|false> If true, invert selection highlight on timeline
         keepIconVisible <b|false> If true, play icon stays visible after mouseleave
         keepLargeTimelineVisible <b|false> If true, large timeline stays visible after mouseleave
         keepLogoVisible <b|false> 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,