VideoPlayer: add timelineType and timelineTypes options, update settings menu

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

@@ -71,6 +71,8 @@ Ox.VideoPlayer <f> Generic Video Player
             out <n> Out point (sec)
             text <s> Text
         timeline <s> Timeline image URL
+        timelineType <s|''> Current timeline type id
+        timelineTypes <[o]|[]> Array of timeline type objects (id and title)
         title <s|''> Video title
         type <s|'play'> 'play', 'in' or 'out'
         video <s|[s]|o|''> Video URL
@@ -99,6 +101,7 @@ Ox.VideoPlayer <f> Generic Video Player
         setpoint <!> setpoint
         size <!> size
         subtitles <!> subtitles
+        timeline <!> timeline
         volume <!> volume
         zap <!> zap
 @*/
@@ -162,6 +165,8 @@ Ox.VideoPlayer = function(options, self) {
             sizeIsLarge: false,
             subtitles: [],
             timeline: '',
+            timelineType: '',
+            timelineTypes: [],
             title: '',
             type: 'play',
             video: '',
@@ -1721,6 +1726,10 @@ Ox.VideoPlayer = function(options, self) {
         return Math.abs(a - b) < 0.001;
     }
 
+    function isResolution(str) {
+        return str.slice(0, -1).match(/^\d+$/) && str.slice(-1) == 'p';
+    }
+
     function loadImage() {
         self.$image
             .one({
@@ -1874,7 +1883,7 @@ Ox.VideoPlayer = function(options, self) {
             .addClass('OxControls OxSettings')
             .on({
                 click: function(e) {
-                    var $target = $(e.target), resolution, title;
+                    var $target = $(e.target), resolution, title, type;
                     self.$settings.hide();
                     if (!$target.is('.OxLine') && !$target.is('.OxSpace')) {
                         title = $(e.target).parent().children()[0].innerHTML;
@@ -1882,12 +1891,22 @@ Ox.VideoPlayer = function(options, self) {
                             that.triggerEvent('download');
                         } else if (title == 'Subtitles') {
                             toggleSubtitles();
-                        } else {
+                        } else if (isResolution(title)) {
                             resolution = parseInt(title, 10);
                             if (resolution != self.options.resolution) {
                                 self.options.resolution = resolution;
                                 setResolution();
                             }
+                        } else {
+                            type = self.options.timelineTypes[
+                                Ox.indexOf(self.options.timelineTypes, function(type) {
+                                    return type.title == title;
+                                })
+                            ].id;
+                            if (type != self.options.timelineType) {
+                                self.options.timelineType = type;
+                                // setTimelineType()
+                            }
                         }
                         self.$settings.children('.OxItem').each(function() {
                             var children = $(this).children(),
@@ -1896,9 +1915,12 @@ Ox.VideoPlayer = function(options, self) {
                                     title == 'Subtitles'
                                     && self.options.enableSubtitles
                                 ) || (
-                                    Ox.last(title) == 'p'
+                                    isResolution(title)
                                     && parseInt(title, 10) == self.options.resolution
-                                );
+                                ) || title == Ox.getObjectById(
+                                    self.options.timelineTypes,
+                                    self.options.timelineType
+                                ).title;
                             $(children[1]).attr({
                                 src: Ox.UI.getImageURL(
                                     'symbol' + (checked ? 'Check' : 'None')
@@ -1908,12 +1930,15 @@ Ox.VideoPlayer = function(options, self) {
                     }
                 }
             }),
-            items = [].concat(
+            items = [{
+                    disabled: true,
+                    title: 'Resolution'
+                }].concat(
                 self.resolutions.map(function(resolution) {
                     return {
                         checked: resolution == self.options.resolution,
                         title: resolution + 'p'
-                    }
+                    };
                 }),
                 self.options.subtitles.length
                     ? [{}, {
@@ -1921,6 +1946,19 @@ Ox.VideoPlayer = function(options, self) {
                         title: 'Subtitles'
                     }]
                     : [],
+                self.options.timelineTypes
+                    ? [{}, {
+                        disabled: true,
+                        title: 'Timeline'
+                    }] : [],
+                self.options.timelineTypes
+                    ? self.options.timelineTypes.map(function(type) {
+                        return {
+                            checked: type.id == self.options.timelineType,
+                            title: type.title
+                        };
+                    })
+                    : [],
                 self.options.enableDownload
                     ? [{}, {title: 'Download'}]
                     : []
@@ -1930,16 +1968,18 @@ Ox.VideoPlayer = function(options, self) {
             var $item;
             if (item.title) {
                 $item = $('<div>')
-                    .addClass('OxItem')
+                    .addClass('OxItem' + (item.disabled ? ' OxDisabled' : ''))
-                    .on({
+                    .appendTo($settings);
+                if (!item.disabled) {
+                    $item.on({
                         mouseenter: function() {
                             $(this).addClass('OxSelected');
                         },
                         mouseleave: function() {
                             $(this).removeClass('OxSelected');
                         }
-                    })
+                    });
-                    .appendTo($settings);
+                }
                 $('<div>').html(item.title).appendTo($item);
                 $('<img>').attr({
                     src: Ox.UI.getImageURL(
@@ -2147,12 +2187,9 @@ Ox.VideoPlayer = function(options, self) {
         );
     }
 
-    function sizechange() {
+    function setTimelineType() {
-        self.videoWidth = self.$video.videoWidth();
+        that.triggerEvent('timeline', {type: self.options.timelineType});
-        self.videoHeight = self.$video.videoHeight();
+    }
-        self.videoCSS = getVideoCSS();
-        self.$video.css(self.videoCSS);
-    };
 
     function setVolume(volume) {
         self.options.volume = volume;
@@ -2230,6 +2267,13 @@ Ox.VideoPlayer = function(options, self) {
         }
     }
 
+    function sizechange() {
+        self.videoWidth = self.$video.videoWidth();
+        self.videoHeight = self.$video.videoHeight();
+        self.videoCSS = getVideoCSS();
+        self.$video.css(self.videoCSS);
+    };
+
     function submitFindInput(value, hasPressedEnter) {
         self.options.find = value;
         self.results = find(self.options.find);