add close buttons to controls, better behaviour of mute vs volume 0, make range properly resizable, hide title overflow
This commit is contained in:
parent
cf3d611bac
commit
4ca5734a9d
4 changed files with 68 additions and 31 deletions
|
@ -78,7 +78,11 @@ Ox.load('UI', {
|
||||||
top: '16px'
|
top: '16px'
|
||||||
}),
|
}),
|
||||||
Ox.VideoPlayer({
|
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,
|
externalControls: true,
|
||||||
height: 192,
|
height: 192,
|
||||||
'in': 3128.725,
|
'in': 3128.725,
|
||||||
|
@ -87,6 +91,7 @@ Ox.load('UI', {
|
||||||
showMilliseconds: 2,
|
showMilliseconds: 2,
|
||||||
subtitles: 'srt/' + id + '.srt',
|
subtitles: 'srt/' + id + '.srt',
|
||||||
timeline: timeline,
|
timeline: timeline,
|
||||||
|
title: 'Brick - Rian Johnson - 2005',
|
||||||
video: url + '?' + + Ox.random(1000000),
|
video: url + '?' + + Ox.random(1000000),
|
||||||
width: 360
|
width: 360
|
||||||
})
|
})
|
||||||
|
|
|
@ -36,7 +36,7 @@ Ox.Range = function(options, self) {
|
||||||
min: 0,
|
min: 0,
|
||||||
orientation: 'horizontal',
|
orientation: 'horizontal',
|
||||||
step: 1,
|
step: 1,
|
||||||
size: 128,
|
size: 128, // fixme: shouldn't this be width?
|
||||||
thumbSize: 16,
|
thumbSize: 16,
|
||||||
thumbValue: false,
|
thumbValue: false,
|
||||||
trackColors: [],
|
trackColors: [],
|
||||||
|
@ -191,12 +191,18 @@ Ox.Range = function(options, self) {
|
||||||
self.trackColorsStart = self.thumbSize / 2 / self.options.size;
|
self.trackColorsStart = self.thumbSize / 2 / self.options.size;
|
||||||
self.trackColorsStep = (self.options.size - self.thumbSize) /
|
self.trackColorsStep = (self.options.size - self.thumbSize) /
|
||||||
(self.trackColors - 1) / self.options.size;
|
(self.trackColors - 1) / self.options.size;
|
||||||
|
that.css({
|
||||||
|
width: self.options.size + 'px'
|
||||||
|
});
|
||||||
self.$track && self.$track.css({
|
self.$track && self.$track.css({
|
||||||
width: (self.trackSize - 2) + 'px'
|
width: (self.trackSize - 2) + 'px'
|
||||||
});
|
});
|
||||||
self.$thumb && self.$thumb.options({
|
if (self.$thumb) {
|
||||||
width: self.thumbSize
|
self.$thumb.options({
|
||||||
});
|
width: self.thumbSize
|
||||||
|
});
|
||||||
|
setThumb();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setThumb(animate) {
|
function setThumb(animate) {
|
||||||
|
|
|
@ -19,6 +19,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
||||||
width: self.options.width + 'px'
|
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.height = self.options.type == 'player' ? 16 : 24;
|
||||||
self.imageHeight = self.options.type == 'player' ? 16 : 18;
|
self.imageHeight = self.options.type == 'player' ? 16 : 18;
|
||||||
self.imageTop = self.options.type == 'player' ? 0 : 3;
|
self.imageTop = self.options.type == 'player' ? 0 : 3;
|
||||||
|
|
|
@ -239,6 +239,7 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
self.$videoContainer = $('<div>')
|
self.$videoContainer = $('<div>')
|
||||||
.css({
|
.css({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
|
top: self.options.externalControls && self.options.controlsTop ? '16px' : 0,
|
||||||
background: 'rgb(0, 0, 0)',
|
background: 'rgb(0, 0, 0)',
|
||||||
overflow: 'hidden'
|
overflow: 'hidden'
|
||||||
})
|
})
|
||||||
|
@ -367,20 +368,6 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
.hide()
|
.hide()
|
||||||
.appendTo(that.$element);
|
.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>')
|
self.$results = $('<div>')
|
||||||
.css({
|
.css({
|
||||||
float: 'left',
|
float: 'left',
|
||||||
|
@ -480,6 +467,20 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
.appendTo(self.$find);
|
.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) {
|
['top', 'bottom'].forEach(function(edge) {
|
||||||
|
@ -514,11 +515,8 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
|
|
||||||
self.$findButton = Ox.Button({
|
self.$findButton = Ox.Button({
|
||||||
style: 'symbol',
|
style: 'symbol',
|
||||||
title: [
|
title: 'find',
|
||||||
{id: 'find', title: 'find'},
|
tooltip: 'Find',
|
||||||
{id: 'close', title: 'close'}
|
|
||||||
],
|
|
||||||
tooltip: ['Find', 'Close'],
|
|
||||||
type: 'image'
|
type: 'image'
|
||||||
})
|
})
|
||||||
.css({float: 'left'})
|
.css({float: 'left'})
|
||||||
|
@ -736,7 +734,9 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
float: 'left',
|
float: 'left',
|
||||||
paddingTop: '1px',
|
paddingTop: '1px',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
color: 'rgb(255, 255, 255)'
|
color: 'rgb(255, 255, 255)',
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis'
|
||||||
})
|
})
|
||||||
.html(self.options.title)
|
.html(self.options.title)
|
||||||
.appendTo(self['$controls' + titlecase].$element);
|
.appendTo(self['$controls' + titlecase].$element);
|
||||||
|
@ -783,6 +783,20 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
.hide()
|
.hide()
|
||||||
.appendTo(that.$element);
|
.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({
|
self.$muteButton = Ox.Button({
|
||||||
style: 'symbol',
|
style: 'symbol',
|
||||||
title: [
|
title: [
|
||||||
|
@ -1006,7 +1020,7 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
};
|
};
|
||||||
} else if (element == 'volume') {
|
} else if (element == 'volume') {
|
||||||
css = {
|
css = {
|
||||||
width: Math.min(168, self.width)
|
width: Math.min(184, self.width)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return css;
|
return css;
|
||||||
|
@ -1376,7 +1390,7 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
if (self.$volume) {
|
if (self.$volume) {
|
||||||
self.$volume.animate(getCSS('volume'), ms);
|
self.$volume.animate(getCSS('volume'), ms);
|
||||||
self.$volumeInput.options({
|
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) {
|
function setVolume(data) {
|
||||||
self.options.volume = data.value;
|
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({
|
self.$volumeButton.attr({
|
||||||
src: getVolumeImageURL()
|
src: getVolumeImageURL()
|
||||||
});
|
});
|
||||||
self.$volumeValue.html(self.options.muted ? 0 : Math.round(self.options.volume * 100));
|
self.$volumeValue.html(self.options.muted ? 0 : Math.round(self.options.volume * 100));
|
||||||
self.video.volume = self.options.volume;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function showInterface() {
|
function showInterface() {
|
||||||
|
@ -1578,6 +1597,10 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
function toggleMuted(toggleButton) {
|
function toggleMuted(toggleButton) {
|
||||||
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) {
|
||||||
|
self.options.volume = 1;
|
||||||
|
self.video.volume = 1;
|
||||||
|
}
|
||||||
if (toggleButton && self.$muteButton) {
|
if (toggleButton && self.$muteButton) {
|
||||||
self.$muteButton.toggleTitle();
|
self.$muteButton.toggleTitle();
|
||||||
}
|
}
|
||||||
|
@ -1587,9 +1610,9 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
self.$volumeInput && self.$volumeInput.options({
|
self.$volumeInput && self.$volumeInput.options({
|
||||||
value: self.options.muted ? 0 : self.options.volume
|
value: self.options.muted ? 0 : self.options.volume
|
||||||
});
|
});
|
||||||
self.$volumeValue &&
|
self.$volumeValue && self.$volumeValue.html(
|
||||||
self.$volumeValue.html(self.options.muted ? 0 : Math.round(self.options.volume * 100));
|
self.options.muted ? 0 : Math.round(self.options.volume * 100)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function togglePaused(toggleButton) {
|
function togglePaused(toggleButton) {
|
||||||
|
|
Loading…
Reference in a new issue