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

fix bugs in video player: allow for setting volume from outside, only show volume control if enabled

Browse source
This commit is contained in:
rlx 2012-04-17 11:58:17 +00:00
parent 8c963339fd
commit 7e8f5bef32
1 changed files with 16 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -173,6 +173,8 @@ Ox.VideoPlayer = function(options, self) {
} }
self.options.position = Ox.limit(self.options.position, self['in'], self.out); self.options.position = Ox.limit(self.options.position, self['in'], self.out);
self.hasVolumeControl = self.options.controlsTop.indexOf('volume') > -1
|| self.options.controlsBottom.indexOf('volume') > -1;
self.millisecondsPerFrame = 1000 / self.options.fps; self.millisecondsPerFrame = 1000 / self.options.fps;
self.secondsPerFrame = 1 / self.options.fps; self.secondsPerFrame = 1 / self.options.fps;
self.barHeight = 16; self.barHeight = 16;
@ -651,8 +653,8 @@ Ox.VideoPlayer = function(options, self) {
} else if (control == 'position') { } else if (control == 'position') {
self.positionWidth = 48 + self.positionWidth = 48
!!self.options.showMilliseconds * 2 + !!self.options.showMilliseconds * 2
+ self.options.showMilliseconds * 6; + self.options.showMilliseconds * 6;
self.$position = Ox.Element({ self.$position = Ox.Element({
@ -662,7 +664,7 @@ Ox.VideoPlayer = function(options, self) {
}) })
.addClass('OxPosition') .addClass('OxPosition')
.css({ .css({
width: (self.positionWidth - 4) + 'px', width: self.positionWidth - 4 + 'px',
}) })
.html(formatPosition()) .html(formatPosition())
.bind({ .bind({
@ -1001,7 +1003,7 @@ Ox.VideoPlayer = function(options, self) {
---------------------------------------------------------------------------- ----------------------------------------------------------------------------
*/ */
if (self.options.enableVolume || true) { // fixme if (self.hasVolumeControl) {
self.$volume = $('<div>') self.$volume = $('<div>')
.addClass('OxControls OxVolume') .addClass('OxControls OxVolume')
@ -1094,7 +1096,7 @@ Ox.VideoPlayer = function(options, self) {
} }
function changeVolume(num) { function changeVolume(num) {
showVolume(); self.hasVolumeControl && showVolume();
self.options.volume = Ox.limit(self.options.volume + num, 0, 1); self.options.volume = Ox.limit(self.options.volume + num, 0, 1);
setVolume(self.options.volume); setVolume(self.options.volume);
self.$volumeInput && self.$volumeInput.value(self.options.volume); self.$volumeInput && self.$volumeInput.value(self.options.volume);
@ -1406,15 +1408,10 @@ Ox.VideoPlayer = function(options, self) {
type: 'player', type: 'player',
width: getTimelineWidth() width: getTimelineWidth()
}) })
.css({ .css({float: 'left'})
float: 'left' .css({background: '-moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'})
}) .css({background: '-o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'})
.css({ .css({background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'})
background: '-moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
})
.css({
background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
})
.bindEvent({ .bindEvent({
position: function(data) { position: function(data) {
setPosition(data.position, 'timeline'); setPosition(data.position, 'timeline');
@ -2044,10 +2041,10 @@ Ox.VideoPlayer = function(options, self) {
if (!!self.options.volume == self.options.muted) { if (!!self.options.volume == self.options.muted) {
toggleMuted(); toggleMuted();
} else { } else {
self.$volumeButton.options({ self.$volumeButton && self.$volumeButton.options({
title: getVolumeImage() title: getVolumeImage()
}); });
self.$volumeValue.html( self.$volumeValue && self.$volumeValue.html(
self.options.muted ? 0 : Math.round(self.options.volume * 100) self.options.muted ? 0 : Math.round(self.options.volume * 100)
); );
} }
@ -2235,7 +2232,7 @@ Ox.VideoPlayer = function(options, self) {
} }
function toggleMuted(from) { function toggleMuted(from) {
showVolume(); self.hasVolumeControl && showVolume();
self.options.muted = !self.options.muted; self.options.muted = !self.options.muted;
self.$video.muted(self.options.muted); self.$video.muted(self.options.muted);
if (!self.options.muted && !self.options.volume) { if (!self.options.muted && !self.options.volume) {
@ -2380,6 +2377,8 @@ Ox.VideoPlayer = function(options, self) {
toggleScale(); toggleScale();
} else if (key == 'sizeIsLarge') { } else if (key == 'sizeIsLarge') {
self.$sizeButton.toggle(); self.$sizeButton.toggle();
} else if (key == 'volume') {
setVolume(value);
} }
}; };