0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add settings control to video player

Browse source
This commit is contained in:
rlx 2011-12-22 12:40:01 +00:00
parent 215f1f6c1b
commit 61c3027ee0
1 changed files with 135 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

225
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -14,9 +14,9 @@ Ox.VideoPlayer <f> Generic Video Player
text <s> Text text <s> Text
censored <a|[]> Array of censored ranges censored <a|[]> Array of censored ranges
controlsBottom <[s]|[]> Bottom controls, from left to right controlsBottom <[s]|[]> Bottom controls, from left to right
Can be 'fullscreen', 'scale', 'title', 'find', 'menu', 'play', 'playInToOut', Can be 'close', fullscreen', 'scale', 'title', 'find', 'menu',
'previous', 'next', 'mute', 'volume', 'size', 'timeline', 'space', 'play', 'playInToOut', 'previous', 'next', 'mute', 'volume', 'size',
'position', 'resolution', 'settings'. The 'space' control is just 'timeline', 'space', 'position', 'settings'. The 'space' control is
empty space that separates left-aligned from right-aligned controls. empty space that separates left-aligned from right-aligned controls.
controlsTop <[s]|[]> Top controls, from left to right controlsTop <[s]|[]> Top controls, from left to right
duration <n|-1> Duration (sec) duration <n|-1> Duration (sec)
@ -84,11 +84,13 @@ Ox.VideoPlayer = function(options, self) {
controlsBottom: [], controlsBottom: [],
controlsTop: [], controlsTop: [],
duration: 0, duration: 0,
enableDownload: false,
enableFind: false, enableFind: false,
enableFullscreen: false, enableFullscreen: false,
enableKeyboard: false, enableKeyboard: false,
enableMouse: false, enableMouse: false,
enablePosition: false, enablePosition: false,
enableSubtitles: false,
enableTimeline: false, enableTimeline: false,
externalControls: false, externalControls: false,
find: '', find: '',
@ -474,7 +476,7 @@ Ox.VideoPlayer = function(options, self) {
---------------------------------------------------------------------------- ----------------------------------------------------------------------------
*/ */
if (self.options.subtitles.length || true) { // fixme if (self.options.subtitles.length || true) { // FIXME
self.$subtitle = $('<div>') self.$subtitle = $('<div>')
.addClass('OxSubtitle') .addClass('OxSubtitle')
.appendTo(self.$videoContainer); .appendTo(self.$videoContainer);
@ -538,7 +540,7 @@ Ox.VideoPlayer = function(options, self) {
style: 'symbol', style: 'symbol',
tooltip: ['Enter Fullscreen', 'Exit Fullscreen'], tooltip: ['Enter Fullscreen', 'Exit Fullscreen'],
type: 'image', type: 'image',
value: self.options.fullscreen ? 'shrink' : 'grow' value: self.options.fullscreen ? 'shrink' : 'grow',
values: ['grow', 'shrink'] values: ['grow', 'shrink']
}) })
.bindEvent({ .bindEvent({
@ -696,70 +698,6 @@ Ox.VideoPlayer = function(options, self) {
}) })
.appendTo(self['$controls' + titleCase]); .appendTo(self['$controls' + titleCase]);
} else if (control == 'resolution') {
self.$resolutionButton = Ox.Element({
tooltip: 'Resolution'
})
.addClass('OxResolutionButton')
.html(self.options.resolution + 'p')
.bind({
click: function() {
self.$resolution.toggle();
}
})
.appendTo(self['$controls' + titleCase]);
self.$resolution = $('<div>')
.addClass('OxResolution')
.css({
height: (self.resolutions.length * 16) + 'px'
})
.bind({
click: function(e) {
var resolution = $(e.target).parent().data('resolution');
self.$resolution.hide();
if (resolution != self.options.resolution) {
self.$resolution.children().each(function() {
var $this = $(this);
$this.children()[1].src =
$this.data('resolution') == resolution
? Ox.UI.getImageURL('symbolCheck')
: Ox.UI.PATH + 'png/transparent.png'
});
self.$resolutionButton.html(resolution + 'p');
self.options.resolution = resolution
setResolution();
}
}
})
.appendTo(that.$element);
self.resolutions.forEach(function(resolution, i) {
var $item = $('<div>')
.data({
resolution: resolution
})
.bind({
mouseenter: function() {
$(this).addClass('OxSelected');
},
mouseleave: function() {
$(this).removeClass('OxSelected');
}
})
.appendTo(self.$resolution);
$('<div>')
.html(resolution + 'p')
.appendTo($item);
$('<img>')
.attr({
src: resolution == self.options.resolution ?
Ox.UI.getImageURL('symbolCheck', 'modern') :
Ox.UI.PATH + 'png/transparent.png'
})
.appendTo($item);
});
} else if (control == 'scale') { } else if (control == 'scale') {
self.$scaleButton = Ox.Button({ self.$scaleButton = Ox.Button({
@ -769,7 +707,7 @@ Ox.VideoPlayer = function(options, self) {
value: self.options.scaleToFill ? 'fit' : 'fill', value: self.options.scaleToFill ? 'fit' : 'fill',
values: ['fill', 'fit'] values: ['fill', 'fit']
}) })
.bindEvent('click', function() { .bindEvent('change', function() {
toggleScale('button'); toggleScale('button');
}) })
.appendTo(self['$controls' + titleCase]); .appendTo(self['$controls' + titleCase]);
@ -787,6 +725,23 @@ Ox.VideoPlayer = function(options, self) {
}) })
.appendTo(self['$controls' + titleCase]); .appendTo(self['$controls' + titleCase]);
} else if (control == 'settings') {
self.$settingsButton = Ox.Button({
style: 'symbol',
title: 'set',
tooltip: 'Settings',
type: 'image'
})
.bindEvent({
click: function() {
self.$settings.toggle();
}
})
.appendTo(self['$controls' + titleCase]);
self.$settings = renderSettings().appendTo(that.$element);
} else if (control == 'size') { } else if (control == 'size') {
self.$sizeButton = Ox.Button({ self.$sizeButton = Ox.Button({
@ -796,7 +751,7 @@ Ox.VideoPlayer = function(options, self) {
value: self.options.sizeIsLarge ? 'shrink' : 'grow', value: self.options.sizeIsLarge ? 'shrink' : 'grow',
values: ['grow', 'shrink'] values: ['grow', 'shrink']
}) })
.bindEvent('click', toggleSize) .bindEvent('change', toggleSize)
.appendTo(self['$controls' + titleCase]); .appendTo(self['$controls' + titleCase]);
} else if (control == 'space') { } else if (control == 'space') {
@ -993,7 +948,7 @@ Ox.VideoPlayer = function(options, self) {
self.$muteButton = Ox.Button({ self.$muteButton = Ox.Button({
style: 'symbol', style: 'symbol',
tooltip: ['Mute', 'Unmute'], tooltip: ['Mute', 'Unmute'],
type: 'image' type: 'image',
value: self.options.muted ? 'unmute' : 'mute', value: self.options.muted ? 'unmute' : 'mute',
values: ['mute', 'unmute'] values: ['mute', 'unmute']
}) })
@ -1313,7 +1268,7 @@ Ox.VideoPlayer = function(options, self) {
function getSubtitle() { function getSubtitle() {
var subtitle = ''; var subtitle = '';
Ox.forEach(self.options.subtitles, function(v) { self.options.enableSubtitles && Ox.forEach(self.options.subtitles, function(v) {
if ( if (
v['in'] <= self.options.position v['in'] <= self.options.position
&& v.out >= self.options.position && v.out >= self.options.position
@ -1384,8 +1339,7 @@ Ox.VideoPlayer = function(options, self) {
self.options.controlsBottom.reduce(function(prev, curr) { self.options.controlsBottom.reduce(function(prev, curr) {
return prev + ( return prev + (
curr == 'timeline' || curr == 'space' ? 0 : curr == 'timeline' || curr == 'space' ? 0 :
curr == 'position' ? self.positionWidth : curr == 'position' ? self.positionWidth : 16
curr == 'resolution' ? 36 : 16
); );
}, 0); }, 0);
} }
@ -1471,7 +1425,7 @@ Ox.VideoPlayer = function(options, self) {
} }
function hideControlMenus() { function hideControlMenus() {
['find', 'volume', 'resolution'].forEach(function(element) { ['find', 'settings', 'volume'].forEach(function(element) {
var $element = self['$' + element]; var $element = self['$' + element];
$element && $element.is(':visible') && $element.animate({ $element && $element.is(':visible') && $element.animate({
opacity: 0 opacity: 0
@ -1698,6 +1652,99 @@ Ox.VideoPlayer = function(options, self) {
}); });
} }
function renderSettings() {
var $settings = $('<div>')
.addClass('OxSettings')
.bind({
click: function(e) {
var $target = $(e.target), resolution, title;
self.$settings.hide();
if (!$target.is('.OxLine') && !$target.is('.OxSpace')) {
title = $(e.target).parent().children()[0].innerHTML;
if (title == 'Download') {
that.triggerEvent('download');
} else if (title == 'Subtitles') {
self.options.enableSubtitles = !self.options.enableSubtitles;
setSubtitle();
that.triggerEvent('subtitles', {
subtitles: self.options.enableSubtitles
});
} else {
resolution = parseInt(title);
if (resolution != self.options.resolution) {
self.options.resolution = resolution;
setResolution();
}
}
self.$settings.children('.OxItem').each(function() {
var children = $(this).children(),
title = children[0].innerHTML,
checked = (
title == 'Subtitles'
&& self.options.enableSubtitles
) || (
Ox.last(title) == 'p'
&& parseInt(title) == self.options.resolution
);
$(children[1]).attr({
src: Ox.UI.getImageURL(
'symbol' + (checked ? 'Check' : 'None')
)
});
});
}
}
}),
items = Ox.merge(
self.resolutions.map(function(resolution) {
return {
checked: resolution == self.options.resolution,
title: resolution + 'p'
}
}),
self.options.subtitles
? [{}, {
checked: self.options.enableSubtitles,
title: 'Subtitles'
}]
: [],
self.options.enableDownload
? [{}, {title: 'Download'}]
: []
),
height = 0;
items.forEach(function(item) {
var $item;
if (item.title) {
$item = $('<div>')
.addClass('OxItem')
.bind({
mouseenter: function() {
$(this).addClass('OxSelected');
},
mouseleave: function() {
$(this).removeClass('OxSelected');
}
})
.appendTo($settings);
$('<div>').html(item.title).appendTo($item);
$('<img>').attr({
src: Ox.UI.getImageURL(
'symbol' + (item.checked ? 'Check' : 'None')
)
}).appendTo($item);
height += 16;
} else {
$('<div>').addClass('OxSpace').appendTo($settings);
$('<div>').addClass('OxLine').appendTo($settings);
$('<div>').addClass('OxSpace').appendTo($settings);
height += 1
}
});
$settings.css({height: height + 'px'});
return $settings;
}
function rewind() { function rewind() {
setTimeout(function() { setTimeout(function() {
setPosition(self.options.playInToOut ? self.options['in'] : 0); setPosition(self.options.playInToOut ? self.options['in'] : 0);
@ -1754,7 +1801,7 @@ Ox.VideoPlayer = function(options, self) {
*/ */
self.options.paused && self.options.showMarkers && setMarkers(); self.options.paused && self.options.showMarkers && setMarkers();
self.options.censored.length && setCensored(); self.options.censored.length && setCensored();
self.$subtitle && setSubtitle(); self.options.enableSubtitles && self.$subtitle && setSubtitle();
self.$position && self.$position.html(formatPosition()); self.$position && self.$position.html(formatPosition());
if (self.options.type == 'play') { if (self.options.type == 'play') {
if (self.loadedMetadata && from != 'video') { if (self.loadedMetadata && from != 'video') {
@ -1880,10 +1927,11 @@ Ox.VideoPlayer = function(options, self) {
function setSubtitleText() { function setSubtitleText() {
//Ox.Log('Video', 'setSubTx', self.subtitle, self.options.find) //Ox.Log('Video', 'setSubTx', self.subtitle, self.options.find)
self.$subtitle.html( self.$subtitle.html(
self.subtitle ? self.subtitle
Ox.highlight(self.subtitle, self.options.find, 'OxHighlight') ? Ox.highlight(self.subtitle, self.options.find, 'OxHighlight')
.replace(/\n/g, '<br/>') : '&nbsp;<br/>&nbsp;' .replace(/\n/g, '<br/>')
// FIXME: weird bug, only in fullscreen, only in chrome : '&nbsp;<br/>&nbsp;'
// FIXME: weird bug, only in fullscreen, only in chrome
); );
//Ox.Log('Video', '?!?', self.$subtitle.css('bottom'), self.$subtitle.height()) //Ox.Log('Video', '?!?', self.$subtitle.css('bottom'), self.$subtitle.height())
} }
@ -1937,15 +1985,12 @@ Ox.VideoPlayer = function(options, self) {
self.$controlsBottom && self.$controlsBottom.animate({ self.$controlsBottom && self.$controlsBottom.animate({
opacity: 1 opacity: 1
}, 250); }, 250);
self.$find && self.$find.is(':visible') && self.$find.animate({ ['find', 'settings', 'volume'].forEach(function(element) {
opacity: 1 var $element = self['$' + element];
}, 250); $element && $element.is(':visible') && $element.animate({
self.$volume && self.$volume.is(':visible') && self.$volume.animate({ opacity: 1
opacity: 1 }, 250);
}, 250); });
self.$resolution && self.$resolution.is(':visible') && self.$resolution.animate({
opacity: 1
}, 250);
self.$logo && self.$logo.animate({ self.$logo && self.$logo.animate({
top: getCSS('logo').top, top: getCSS('logo').top,
opacity: 0.5 opacity: 0.5