add close buttons to controls, better behaviour of mute vs volume 0, make range properly resizable, hide title overflow
This commit is contained in:
rolux
parent
cf3d611bac
commit
4ca5734a9d
4 changed files with 68 additions and 31 deletions
|
|
@ -78,7 +78,11 @@ Ox.load('UI', {
|
|||
top: '16px'
|
||||
}),
|
||||
Ox.VideoPlayer({
|
||||
controlsBottom: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
|
||||
controlsTop: ['fullscreen', 'title', 'find'],
|
||||
controlsBottom: ['play', 'playInToOut', 'volume', 'size', 'space', 'position'],
|
||||
enableFind: true,
|
||||
enableFullscreen: true,
|
||||
enableVolume: true,
|
||||
externalControls: true,
|
||||
height: 192,
|
||||
'in': 3128.725,
|
||||
|
|
@ -87,6 +91,7 @@ Ox.load('UI', {
|
|||
showMilliseconds: 2,
|
||||
subtitles: 'srt/' + id + '.srt',
|
||||
timeline: timeline,
|
||||
title: 'Brick - Rian Johnson - 2005',
|
||||
video: url + '?' + + Ox.random(1000000),
|
||||
width: 360
|
||||
})
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ Ox.Range = function(options, self) {
|
|||
min: 0,
|
||||
orientation: 'horizontal',
|
||||
step: 1,
|
||||
size: 128,
|
||||
size: 128, // fixme: shouldn't this be width?
|
||||
thumbSize: 16,
|
||||
thumbValue: false,
|
||||
trackColors: [],
|
||||
|
|
@ -191,12 +191,18 @@ Ox.Range = function(options, self) {
|
|||
self.trackColorsStart = self.thumbSize / 2 / self.options.size;
|
||||
self.trackColorsStep = (self.options.size - self.thumbSize) /
|
||||
(self.trackColors - 1) / self.options.size;
|
||||
that.css({
|
||||
width: self.options.size + 'px'
|
||||
});
|
||||
self.$track && self.$track.css({
|
||||
width: (self.trackSize - 2) + 'px'
|
||||
});
|
||||
self.$thumb && self.$thumb.options({
|
||||
width: self.thumbSize
|
||||
});
|
||||
if (self.$thumb) {
|
||||
self.$thumb.options({
|
||||
width: self.thumbSize
|
||||
});
|
||||
setThumb();
|
||||
}
|
||||
}
|
||||
|
||||
function setThumb(animate) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
@ -480,6 +467,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);
|
||||
|
||||
}
|
||||
|
||||
['top', 'bottom'].forEach(function(edge) {
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue