sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

add close buttons to controls, better behaviour of mute vs volume 0, make range properly resizable, hide title overflow

Browse source
This commit is contained in:
rolux 2011-05-17 09:05:21 +02:00
commit 4ca5734a9d
4 changed files with 68 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

3
source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js
View file

@ -19,6 +19,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
width: self.options.width + 'px'
});
// fixme: unless we do a block timeline,
// we can always use a single 1920 png
self.height = self.options.type == 'player' ? 16 : 24;
self.imageHeight = self.options.type == 'player' ? 16 : 18;
self.imageTop = self.options.type == 'player' ? 0 : 3;

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

@ -239,6 +239,7 @@ Ox.VideoPlayer = function(options, self) {
self.$videoContainer = $('<div>')
.css({
position: 'absolute',
top: self.options.externalControls && self.options.controlsTop ? '16px' : 0,
background: 'rgb(0, 0, 0)',
overflow: 'hidden'
})
@ -367,20 +368,6 @@ Ox.VideoPlayer = function(options, self) {
.hide()
.appendTo(that.$element);
self.$playResultsButton = Ox.Button({
style: 'symbol',
title: 'PlayInToOut',
tooltip: 'Play Results',
type: 'image'
})
.css({float: 'left', opacity: 0.25})
.bindEvent({
click: function() {
}
})
.appendTo(self.$find);
self.$results = $('<div>')
.css({
float: 'left',
@ -479,6 +466,20 @@ Ox.VideoPlayer = function(options, self) {
})
.appendTo(self.$find);
//*/
self.$hideFindButton = Ox.Button({
style: 'symbol',
title: 'close',
tooltip: 'Hide',
type: 'image'
})
.css({float: 'left'})
.bindEvent({
click: function() {
self.$find.hide();
}
})
.appendTo(self.$find);
}
@ -514,11 +515,8 @@ Ox.VideoPlayer = function(options, self) {
self.$findButton = Ox.Button({
style: 'symbol',
title: [
{id: 'find', title: 'find'},
{id: 'close', title: 'close'}
],
tooltip: ['Find', 'Close'],
title: 'find',
tooltip: 'Find',
type: 'image'
})
.css({float: 'left'})
@ -736,7 +734,9 @@ Ox.VideoPlayer = function(options, self) {
float: 'left',
paddingTop: '1px',
textAlign: 'center',
color: 'rgb(255, 255, 255)'
color: 'rgb(255, 255, 255)',
overflow: 'hidden',
textOverflow: 'ellipsis'
})
.html(self.options.title)
.appendTo(self['$controls' + titlecase].$element);
@ -783,6 +783,20 @@ Ox.VideoPlayer = function(options, self) {
.hide()
.appendTo(that.$element);
self.$hideVolumeButton = Ox.Button({
style: 'symbol',
title: 'close',
tooltip: 'Hide',
type: 'image'
})
.css({float: 'left'})
.bindEvent({
click: function() {
self.$volume.hide();
}
})
.appendTo(self.$volume);
self.$muteButton = Ox.Button({
style: 'symbol',
title: [
@ -1006,7 +1020,7 @@ Ox.VideoPlayer = function(options, self) {
};
} else if (element == 'volume') {
css = {
width: Math.min(168, self.width)
width: Math.min(184, self.width)
};
}
return css;
@ -1376,7 +1390,7 @@ Ox.VideoPlayer = function(options, self) {
if (self.$volume) {
self.$volume.animate(getCSS('volume'), ms);
self.$volumeInput.options({
width: Math.min(128, self.width - 40)
size: Math.min(128, self.width - 56)
});
}
}
@ -1394,11 +1408,16 @@ Ox.VideoPlayer = function(options, self) {
function setVolume(data) {
self.options.volume = data.value;
if (!!self.options.volume == self.options.muted) {
self.options.muted = !self.options.muted;
self.video.muted = self.options.muted;
self.$muteButton.toggleTitle();
}
self.video.volume = self.options.volume;
self.$volumeButton.attr({
src: getVolumeImageURL()
});
self.$volumeValue.html(self.options.muted ? 0 : Math.round(self.options.volume * 100));
self.video.volume = self.options.volume;
}
function showInterface() {
@ -1578,6 +1597,10 @@ Ox.VideoPlayer = function(options, self) {
function toggleMuted(toggleButton) {
self.options.muted = !self.options.muted;
self.video.muted = self.options.muted;
if (!self.options.muted && !self.options.volume) {
self.options.volume = 1;
self.video.volume = 1;
}
if (toggleButton && self.$muteButton) {
self.$muteButton.toggleTitle();
}
@ -1587,9 +1610,9 @@ Ox.VideoPlayer = function(options, self) {
self.$volumeInput && self.$volumeInput.options({
value: self.options.muted ? 0 : self.options.volume
});
self.$volumeValue &&
self.$volumeValue.html(self.options.muted ? 0 : Math.round(self.options.volume * 100));
self.$volumeValue && self.$volumeValue.html(
self.options.muted ? 0 : Math.round(self.options.volume * 100)
);
}
function togglePaused(toggleButton) {