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

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

@ -14,9 +14,9 @@ Ox.VideoPlayer <f> Generic Video Player
text <s> Text
censored <a|[]> Array of censored ranges
controlsBottom <[s]|[]> Bottom controls, from left to right
Can be 'fullscreen', 'scale', 'title', 'find', 'menu', 'play', 'playInToOut',
'previous', 'next', 'mute', 'volume', 'size', 'timeline', 'space',
'position', 'resolution', 'settings'. The 'space' control is just
Can be 'close', fullscreen', 'scale', 'title', 'find', 'menu',
'play', 'playInToOut', 'previous', 'next', 'mute', 'volume', 'size',
'timeline', 'space', 'position', 'settings'. The 'space' control is
empty space that separates left-aligned from right-aligned controls.
controlsTop <[s]|[]> Top controls, from left to right
duration <n|-1> Duration (sec)
@ -84,11 +84,13 @@ Ox.VideoPlayer = function(options, self) {
controlsBottom: [],
controlsTop: [],
duration: 0,
enableDownload: false,
enableFind: false,
enableFullscreen: false,
enableKeyboard: false,
enableMouse: false,
enablePosition: false,
enableSubtitles: false,
enableTimeline: false,
externalControls: false,
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>')
.addClass('OxSubtitle')
.appendTo(self.$videoContainer);
@ -538,7 +540,7 @@ Ox.VideoPlayer = function(options, self) {
style: 'symbol',
tooltip: ['Enter Fullscreen', 'Exit Fullscreen'],
type: 'image',
value: self.options.fullscreen ? 'shrink' : 'grow'
value: self.options.fullscreen ? 'shrink' : 'grow',
values: ['grow', 'shrink']
})
.bindEvent({
@ -696,70 +698,6 @@ Ox.VideoPlayer = function(options, self) {
})
.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') {
self.$scaleButton = Ox.Button({
@ -769,7 +707,7 @@ Ox.VideoPlayer = function(options, self) {
value: self.options.scaleToFill ? 'fit' : 'fill',
values: ['fill', 'fit']
})
.bindEvent('click', function() {
.bindEvent('change', function() {
toggleScale('button');
})
.appendTo(self['$controls' + titleCase]);
@ -787,6 +725,23 @@ Ox.VideoPlayer = function(options, self) {
})
.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') {
self.$sizeButton = Ox.Button({
@ -796,7 +751,7 @@ Ox.VideoPlayer = function(options, self) {
value: self.options.sizeIsLarge ? 'shrink' : 'grow',
values: ['grow', 'shrink']
})
.bindEvent('click', toggleSize)
.bindEvent('change', toggleSize)
.appendTo(self['$controls' + titleCase]);
} else if (control == 'space') {
@ -993,7 +948,7 @@ Ox.VideoPlayer = function(options, self) {
self.$muteButton = Ox.Button({
style: 'symbol',
tooltip: ['Mute', 'Unmute'],
type: 'image'
type: 'image',
value: self.options.muted ? 'unmute' : 'mute',
values: ['mute', 'unmute']
})
@ -1313,7 +1268,7 @@ Ox.VideoPlayer = function(options, self) {
function getSubtitle() {
var subtitle = '';
Ox.forEach(self.options.subtitles, function(v) {
self.options.enableSubtitles && Ox.forEach(self.options.subtitles, function(v) {
if (
v['in'] <= self.options.position
&& v.out >= self.options.position
@ -1384,8 +1339,7 @@ Ox.VideoPlayer = function(options, self) {
self.options.controlsBottom.reduce(function(prev, curr) {
return prev + (
curr == 'timeline' || curr == 'space' ? 0 :
curr == 'position' ? self.positionWidth :
curr == 'resolution' ? 36 : 16
curr == 'position' ? self.positionWidth : 16
);
}, 0);
}
@ -1471,7 +1425,7 @@ Ox.VideoPlayer = function(options, self) {
}
function hideControlMenus() {
['find', 'volume', 'resolution'].forEach(function(element) {
['find', 'settings', 'volume'].forEach(function(element) {
var $element = self['$' + element];
$element && $element.is(':visible') && $element.animate({
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() {
setTimeout(function() {
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.censored.length && setCensored();
self.$subtitle && setSubtitle();
self.options.enableSubtitles && self.$subtitle && setSubtitle();
self.$position && self.$position.html(formatPosition());
if (self.options.type == 'play') {
if (self.loadedMetadata && from != 'video') {
@ -1880,9 +1927,10 @@ Ox.VideoPlayer = function(options, self) {
function setSubtitleText() {
//Ox.Log('Video', 'setSubTx', self.subtitle, self.options.find)
self.$subtitle.html(
self.subtitle ?
Ox.highlight(self.subtitle, self.options.find, 'OxHighlight')
.replace(/\n/g, '<br/>') : '&nbsp;<br/>&nbsp;'
self.subtitle
? Ox.highlight(self.subtitle, self.options.find, 'OxHighlight')
.replace(/\n/g, '<br/>')
: '&nbsp;<br/>&nbsp;'
// FIXME: weird bug, only in fullscreen, only in chrome
);
//Ox.Log('Video', '?!?', self.$subtitle.css('bottom'), self.$subtitle.height())
@ -1937,15 +1985,12 @@ Ox.VideoPlayer = function(options, self) {
self.$controlsBottom && self.$controlsBottom.animate({
opacity: 1
}, 250);
self.$find && self.$find.is(':visible') && self.$find.animate({
opacity: 1
}, 250);
self.$volume && self.$volume.is(':visible') && self.$volume.animate({
opacity: 1
}, 250);
self.$resolution && self.$resolution.is(':visible') && self.$resolution.animate({
['find', 'settings', 'volume'].forEach(function(element) {
var $element = self['$' + element];
$element && $element.is(':visible') && $element.animate({
opacity: 1
}, 250);
});
self.$logo && self.$logo.animate({
top: getCSS('logo').top,
opacity: 0.5