diff --git a/source/Ox.UI/js/Video/VideoPlayer.js b/source/Ox.UI/js/Video/VideoPlayer.js index 9a701695..62ea9b36 100644 --- a/source/Ox.UI/js/Video/VideoPlayer.js +++ b/source/Ox.UI/js/Video/VideoPlayer.js @@ -71,6 +71,8 @@ Ox.VideoPlayer Generic Video Player out Out point (sec) text Text timeline Timeline image URL + timelineType Current timeline type id + timelineTypes <[o]|[]> Array of timeline type objects (id and title) title Video title type 'play', 'in' or 'out' video Video URL @@ -99,6 +101,7 @@ Ox.VideoPlayer 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 = $('
') - .addClass('OxItem') - .on({ + .addClass('OxItem' + (item.disabled ? ' OxDisabled' : '')) + .appendTo($settings); + if (!item.disabled) { + $item.on({ mouseenter: function() { $(this).addClass('OxSelected'); }, mouseleave: function() { $(this).removeClass('OxSelected'); } - }) - .appendTo($settings); + }); + } $('
').html(item.title).appendTo($item); $('').attr({ src: Ox.UI.getImageURL( @@ -2147,12 +2187,9 @@ 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 setTimelineType() { + that.triggerEvent('timeline', {type: self.options.timelineType}); + } 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);