Ox.VideoPlayer: add loop option and control

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

@@ -13,11 +13,11 @@ Ox.VideoPlayer <f> Generic Video Player
         censoredTooltip <s|''> Tooltip for 'censored' icon
         controlsBottom <[s]|[]> Bottom controls, from left to right
             Can be 'close', fullscreen', 'scale', 'title', 'find', 'open',
-            'play', 'playInToOut', 'previous', 'next', 'mute', 'volume', 'size',
+            'play', 'playInToOut', 'previous', 'next', 'loop', 'mute', 'volume',
-            'timeline', 'position', 'settings', and 'space[int]'. A 'space16'
+            'size', 'timeline', 'position', 'settings', and 'space[int]'. A
-            control, for example, is empty space that is 16px wide, and a
+            'space16' control, for example, is empty space that is 16px wide,
-            'space' control is empty space that separates left-aligned from
+            and a 'space' control is empty space that separates left-aligned
-            right-aligned controls.
+            from right-aligned controls.
         controlsTooltips <o|{}> Tooltip text per control id
         controlsTop <[s]|[]> Top controls, from left to right
         duration <n|-1> Duration (sec)
@@ -44,6 +44,7 @@ Ox.VideoPlayer <f> Generic Video Player
         logo <s|''> Logo image URL
         logoLink <s|''> Logo link URL
         logoTitle <s|''> Text for Logo tooltip // fixme: shouldn't this be logoTooltip then?s
+        loop <b|false> If true, video loops
         muted <b|false> If true, video is muted
         paused <b|false> If true, video is paused
         playInToOut <b|false> If true, video plays only from in to out
@@ -142,6 +143,7 @@ Ox.VideoPlayer = function(options, self) {
             logo: '',
             logoLink: '',
             logoTitle: '',
+            loop: false,
             muted: false,
             paused: false,
             playInToOut: false,
@@ -677,6 +679,22 @@ Ox.VideoPlayer = function(options, self) {
                     })
                     .appendTo(self['$controls' + titleCase]);
 
+                } else if (control == 'loop') {
+
+                    self.$loopButton = Ox.Button({
+                        style: 'video',
+                        tooltip: [Ox._('Don\'t Loop'), Ox._('Loop')],
+                        type: 'image',
+                        value: self.options.loop ? 'RepeatNone' : 'RepeatAll',
+                        values: ['RepeatNone', 'RepeatAll'] 
+                    })
+                    .bindEvent({
+                        click: function() {
+                            toggleLoop('button');
+                        }
+                    })
+                    .appendTo(self['$controls' + titleCase]);
+
                 } else if (control == 'mute') {
 
                     self.$muteButton = Ox.Button({
@@ -1236,21 +1254,26 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function ended() {
-        !self.options.paused && togglePaused();
+        if (self.options.loop) {
-        if (self.options.poster) {
+            rewind();
-            self.$poster.animate({
+            self.$video.play();
-                opacity: 1
+        } else {
-            }, 250);
+            !self.options.paused && togglePaused();
-            self.posterIsVisible = true;
+            if (self.options.poster) {
+                self.$poster.animate({
+                    opacity: 1
+                }, 250);
+                self.posterIsVisible = true;
+            }
+            if (self.options.showIconOnLoad) {
+                self.$playIcon.animate({
+                    opacity: 1
+                }, 250);
+                self.iconIsVisible = true;
+            }
+            self.options.rewind && setTimeout(rewind, 250);
+            that.triggerEvent('ended');
         }
-        if (self.options.showIconOnLoad) {
-            self.$playIcon.animate({
-                opacity: 1
-            }, 250);
-            self.iconIsVisible = true;
-        }
-        self.options.rewind && rewind();
-        that.triggerEvent('ended');
     }
 
     function enterFullscreen() {
@@ -1832,10 +1855,13 @@ Ox.VideoPlayer = function(options, self) {
         ) {
             if (self.isPlaylist) {
                 self.$video.playNext();
+            } else if (self.options.loop) {
+                rewind();
+                self.$video.play();
             } else {
                 togglePaused();
                 if (self.options.rewind) {
-                    rewind();
+                    setTimeout(rewind, 250);
                 } else {
                     setPosition(self.playInToOut ? self.options.out : self.out/*, 'video'*/);
                 }
@@ -2002,9 +2028,7 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function rewind() {
-        setTimeout(function() {
+        setPosition(self.options.playInToOut ? self.options['in'] : 0);
-            setPosition(self.options.playInToOut ? self.options['in'] : 0);
-        }, 250);
     }
 
     function seeked() {
@@ -2394,6 +2418,16 @@ Ox.VideoPlayer = function(options, self) {
         });
     }
 
+    function toggleLoop(from) {
+        self.options.loop = !self.options.loop;
+        if (self.$loopButton && from != 'button') {
+            self.$loopButton.toggle();
+        }
+        that.triggerEvent('loop', {
+            loop: self.options.loop
+        });
+    }
+
     function toggleMuted(from) {
         self.hasVolumeControl && showVolume();
         self.options.muted = !self.options.muted;