add chapter support to VideoPlayer, use for next/previous in VideoEditPanel

source/Ox.UI/js/Video/VideoEditPanel.js

@@ -89,7 +89,10 @@ Ox.VideoEditPanel = function(options, self) {
                 self.$timeline.options({type: self.options.timeline});
             },
             video: function() {
-                self.$video.options({video: self.options.video});
+                self.$video.options({
+                    chapters: getChapters(),
+                    video: self.options.video
+                });
             },
             width: function() {
                 self.$video.options({width: getPlayerWidth()});
@@ -133,6 +136,7 @@ Ox.VideoEditPanel = function(options, self) {
     self.$player = Ox.Element().css({overflowX: 'hidden'});
 
     self.$video = Ox.VideoPlayer({
+            chapters: getChapters(),
             controlsTop: ['fullscreen', 'space', 'open'],
             controlsBottom: [
                 'play', 'playInToOut', 'volume', 'scale', 'timeline',
@@ -312,6 +316,18 @@ Ox.VideoEditPanel = function(options, self) {
         return Ox.getObjectById(self.options.clips, id);
     }
 
+    function getChapters() {
+        var currentTime = 0;
+        return self.options.clips.map(function(clip) {
+            var chapter = {
+                position: currentTime,
+                title: clip.title || clip.id
+            };
+            currentTime += clip.duration;
+            return chapter;
+        });
+    }
+
     function getPlayerHeight() {
         return self.options.height - 24
             - self.options.showTimeline * 80 - 1;

source/Ox.UI/js/Video/VideoElement.js

@@ -428,24 +428,6 @@ Ox.VideoElement = function(options, self) {
         return that;
     };
 
-    /*@
-    playNext <f> play next
-    @*/
-    that.playNext = function() {
-        Ox.Log('Video', 'PLAY NEXT');
-        setCurrentItem(self.currentItem + 1);
-        self.video.play();
-    };
-
-    /*@
-    playPrevious <f> play previous
-    @*/
-    that.playPrevious = function() {
-        Ox.Log('Video', 'PLAY PREVIOUS');
-        setCurrentItem(self.currentItem - 1);
-        self.video.play();
-    };
-
     /*@
     videoHeight <f> get videoHeight
     @*/

source/Ox.UI/js/Video/VideoPlayer.js

@@ -11,6 +11,7 @@ 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
         controlsBottom <[s]|[]> Bottom controls, from left to right
             Can be 'close', fullscreen', 'scale', 'title', 'find', 'open',
             'play', 'playInToOut', 'previous', 'next', 'loop', 'mute', 'volume',
@@ -722,7 +723,7 @@ Ox.VideoPlayer = function(options, self) {
                     })
                     .bindEvent({
                         click: function() {
-                            goToNextClip(1);
+                            goToNextChapter(1);
                         }
                     })
                     .appendTo(self['$controls' + titleCase]);
@@ -845,7 +846,7 @@ Ox.VideoPlayer = function(options, self) {
                     })
                     .bindEvent({
                         click: function() {
-                            goToNextClip(-1);
+                            goToNextChapter(-1);
                         }
                     })
                     .appendTo(self['$controls' + titleCase]);
@@ -1679,8 +1680,24 @@ Ox.VideoPlayer = function(options, self) {
         return symbol;
     }
 
-    function goToNextClip(direction) {
+    function goToNextChapter(direction) {
-        self.$video[direction == 1 ? 'playNext' : 'playPrevious']();
+        var next,
+            points = self.options.chapters.map(function(chapter) {
+                return chapter.position;
+            }).concat([self.options.duration]);
+        if (direction == 1) {
+            next = points.filter(function(point) {
+                return point > self.options.position;
+            })[0];
+        } else {
+            next = points.filter(function(point) {
+                return point < self.options.position;
+            }).slice(-1)[0];
+        }
+        if (Ox.isUndefined(next)) {
+            next = direction == 1 ? self.options.duration : 0;
+        }
+        setPosition(next);
     }
 
     function goToNextResult(direction) {