VideoPlayer: add timelineType and timelineTypes options, update settings menu
This commit is contained in:
rolux
parent
235b47c1d1
commit
35d2aecc4a
1 changed files with 60 additions and 16 deletions
|
|
@ -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')
|
||||
.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);
|
||||
});
|
||||
}
|
||||
$('<div>').html(item.title).appendTo($item);
|
||||
$('<img>').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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue