From 7acf1c37122c7f64fa7656234e6c1c0cad23e592 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Sat, 8 Feb 2014 12:34:06 +0530
Subject: [PATCH] Video Player: Add support for chapter titles

---
 source/Ox.UI/js/Video/VideoPlayer.js | 46 +++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 8 deletions(-)

diff --git a/source/Ox.UI/js/Video/VideoPlayer.js b/source/Ox.UI/js/Video/VideoPlayer.js
index b3f35853..040a1b11 100644
--- a/source/Ox.UI/js/Video/VideoPlayer.js
+++ b/source/Ox.UI/js/Video/VideoPlayer.js
@@ -11,14 +11,14 @@ Ox.VideoPlayer <f> Generic Video Player
         censored <a|[]> Array of censored ranges
         censoredIcon <s|''> 'Censored' icon
         censoredTooltip <s|''> Tooltip for 'censored' icon
-        chapters: <[o]|[]> List of chapter objects with position and title
+        chapters <[o]|[]> List of chapter objects with position and title
         controlsBottom <[s]|[]> Bottom controls, from left to right
-            Can be 'close', fullscreen', 'scale', 'title', 'find', 'open',
-            'play', 'playInToOut', 'previous', 'next', 'loop', 'mute', 'volume',
-            'size', 'timeline', 'position', 'settings', and 'space[int]'. A
-            'space16' control, for example, is empty space that is 16px wide,
-            and a 'space' control is empty space that separates left-aligned
-            from right-aligned controls.
+            Can be 'close', fullscreen', 'scale', 'title', 'chapterTitle',
+            'find', 'open', 'play', 'playInToOut', 'previous', 'next', 'loop',
+            'mute', 'volume', 'size', 'timeline', 'position', 'settings', and
+            'space[int]'. A 'space16' control, for example, is empty space that
+            is 16px wide, and a 'space' control is empty space that separates
+            left-aligned from right-aligned controls.
         controlsTooltips <o|{}> Tooltip text per control id
         controlsTop <[s]|[]> Top controls, from left to right
         duration <n|-1> Duration (sec)
@@ -639,7 +639,14 @@ Ox.VideoPlayer = function(options, self) {
 
             self.options['controls' + titleCase].forEach(function(control) {
 
-                if (control == 'close') {
+                if (control == 'chapterTitle') {
+
+                    self.$chapterTitle = $('<div>')
+                        .addClass('OxTitle')
+                        .html(getChapterTitle())
+                        .appendTo(self['$controls' + titleCase].$element);
+
+                } else if (control == 'close') {
 
                     self.$closeButton = Ox.Button({
                         style: 'video',
@@ -1392,6 +1399,20 @@ Ox.VideoPlayer = function(options, self) {
         return censored;        
     }
 
+    function getChapterTitle() {
+        var chapterTitle = '';
+        self.options.chapters && Ox.forEach(self.options.chapters, function(v) {
+            if (
+                v['in'] <= self.options.position
+                && v.out >= self.options.position
+            ) {
+                chapterTitle = v.text;
+                return false; // break
+            }
+        });
+        return chapterTitle;
+    }
+
     function getCSS(element) {
         var css;
         if (element == 'copyrightIcon') {
@@ -2111,6 +2132,14 @@ Ox.VideoPlayer = function(options, self) {
         }
     }
 
+    function setChapterTitle() {
+        var chapterTitle = getChapterTitle();
+        if (chapterTitle != self.chapterTitle) {
+            self.chapterTitle = chapterTitle;
+            self.$chapterTitle.html(self.chapterTitle)
+        }
+    }
+
     function setMarkers() {
         //Ox.Log('Video', 'SET MARKERS', self.options.position, self.options['in'], self.options.out, self.$pointMarker);
         self.$posterMarker && Ox.forEach(self.$posterMarker, function(marker) {
@@ -2143,6 +2172,7 @@ Ox.VideoPlayer = function(options, self) {
         self.options.paused && self.options.showMarkers && setMarkers();
         self.options.censored.length && setCensored();
         self.options.enableSubtitles && self.$subtitle && setSubtitle();
+        self.$chapterTitle && setChapterTitle();
         self.$position && self.$position.html(formatPosition());
         if (self.options.type == 'play') {
             if (self.loadedMetadata && from != 'video') {