revised controls (find, volume)

This commit is contained in:
rolux 2011-05-16 20:05:29 +02:00
parent 6bc75c8627
commit 117c6bff62
4 changed files with 553 additions and 298 deletions

View file

@ -32,17 +32,17 @@ Ox.load('UI', {
videoSize = getVideoSize(), videoSize = getVideoSize(),
$videos = [ $videos = [
Ox.VideoPlayer({ Ox.VideoPlayer({
controls: ['play', 'mute', 'fullscreen', 'scale', 'timeline', 'position'], controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position'],
controlsTop: ['fullscreen', 'title', 'find'],
enableFind: true, enableFind: true,
enableFullscreen: true, enableFullscreen: true,
enableKeyboard: true, enableKeyboard: true,
enableVolume: true,
focus: 'mouseenter', focus: 'mouseenter',
height: 192, height: 192,
'in': 3128.725,
logoLink: 'http://next.0xdb.org/' + id, logoLink: 'http://next.0xdb.org/' + id,
logoTitle: 'Watch on 0xdb', logoTitle: 'Watch on 0xdb',
logo: 'png/logo.png', logo: 'png/logo.png',
out: 3130.725,
paused: true, paused: true,
poster: poster, poster: poster,
showIconOnLoad: true, showIconOnLoad: true,
@ -51,7 +51,7 @@ Ox.load('UI', {
timeline: function(i) { timeline: function(i) {
return 'png/timeline.16.' + i + '.png'; return 'png/timeline.16.' + i + '.png';
}, },
title: '<b>Brick</b> - Rian Johnson - 2005', title: 'Brick - Rian Johnson - 2005',
video: url + '?' + + Ox.random(1000000), video: url + '?' + + Ox.random(1000000),
width: 360 width: 360
}) })
@ -78,9 +78,8 @@ Ox.load('UI', {
top: '16px' top: '16px'
}), }),
Ox.VideoPlayer({ Ox.VideoPlayer({
controls: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'], controlsBottom: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
externalControls: true, externalControls: true,
find: 'brick',
height: 192, height: 192,
'in': 3128.725, 'in': 3128.725,
out: 3130.725, out: 3130.725,

View file

@ -733,6 +733,11 @@ Ox.Input = function(options, self) {
} }
}; };
that.blurInput = function() {
self.$input.blur();
return that;
};
that.focusInput = function(select) { that.focusInput = function(select) {
select = Ox.isUndefined(select) ? true : select; select = Ox.isUndefined(select) ? true : select;
self.$input.focus(); self.$input.focus();

View file

@ -3,7 +3,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
duration: 0, duration: 1920,
editing: false, editing: false,
getTimelineURL: null, getTimelineURL: null,
'in': 0, 'in': 0,
@ -120,7 +120,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
}); });
}); });
}); });
} else if (image == 'selection') { } else if (image == 'selection' && self.options.out > self.options['in']) {
var left = Math.round( var left = Math.round(
self.options['in'] * self.options.width / self.options.duration self.options['in'] * self.options.width / self.options.duration
), ),

View file

@ -10,11 +10,11 @@ Ox.VideoPlayer <f> Generic Video Player
in <n> In point (sec) in <n> In point (sec)
out <n> Out point (sec) out <n> Out point (sec)
text <s> Text text <s> Text
controls <[s]> Controls, from left to right controls <[[s]]|[[][]]> Controls, first top, then bottom, from left to right
Can be 'play', 'playInToOut', 'mute', 'volume', 'size', 'scale', Can be 'fullscreen', 'scale', 'title', 'find', 'menu',
'timeline', 'space', 'position', 'settings'. The 'space' control 'play', 'playInToOut', 'mute', 'volume', 'size', 'timeline', 'space',
is just empty space that separates left-aligned from right-aligned 'position', 'settings'. The 'space' control is just empty space
controls that separates left-aligned from right-aligned controls.
duration <n|-1> Duration (sec) duration <n|-1> Duration (sec)
enableFind <b|false> If true, enable find enableFind <b|false> If true, enable find
enableFullscreen <b|false> If true, enable fullscreen enableFullscreen <b|false> If true, enable fullscreen
@ -69,7 +69,8 @@ Ox.VideoPlayer = function(options, self) {
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
annotations: [], annotations: [],
controls: [], controlsBottom: [],
controlsTop: [],
duration: 0, duration: 0,
enableFind: false, enableFind: false,
enableFullscreen: false, enableFullscreen: false,
@ -139,7 +140,7 @@ Ox.VideoPlayer = function(options, self) {
if (self.options.enableKeyboard) { if (self.options.enableKeyboard) {
that.bindEvent({ that.bindEvent({
key_1: function() { key_1: function() {
toggleScale(); toggleScale(true);
}, },
key_f: function() { key_f: function() {
// need timeout so the "f" doesn't appear in the input field // need timeout so the "f" doesn't appear in the input field
@ -151,6 +152,9 @@ Ox.VideoPlayer = function(options, self) {
key_left: function() { key_left: function() {
setPosition(self.options.position - self.secondsPerFrame, true); setPosition(self.options.position - self.secondsPerFrame, true);
}, },
key_m: function() {
toggleMuted(true);
},
key_p: function() { key_p: function() {
playInToOut(); playInToOut();
}, },
@ -189,8 +193,9 @@ Ox.VideoPlayer = function(options, self) {
} }
if ( if (
(!self.options.externalControls && self.options.controls.length) || (!self.options.externalControls &&
self.options.showIcon || self.options.title (self.options.controlsTop.length || self.options.controlsBottom.length)) ||
self.options.showIcon
) { ) {
that.bind({ that.bind({
mouseenter: function() { mouseenter: function() {
@ -343,38 +348,15 @@ Ox.VideoPlayer = function(options, self) {
.appendTo(self.$videoContainer); .appendTo(self.$videoContainer);
} }
if (self.options.title) {
self.$title = $('<div>')
.addClass('OxInterface')
.css({
position: 'absolute',
height: (self.barHeight - 1) + 'px',
paddingTop: '1px',
textAlign: 'center',
color: 'rgb(255, 255, 255)',
opacity: 0
})
.css({
backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
})
.css({
backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
})
.html(self.options.title)
.appendTo(that.$element);
}
if (self.options.enableFind) { if (self.options.enableFind) {
self.$find = $('<div>') self.$find = $('<div>')
.addClass('OxInterface')
.css({ .css({
position: 'absolute', position: 'absolute',
right: '16px', right: 0,
top: (self.options.title ? 32 : 16) + 'px', top: self.options.controlsTop.length ? '16px' : 0,
width: '128px', borderBottomLeftRadius: '8px',
borderRadius: '8px', borderBottomRightRadius: '8px'
opacity: 0
}) })
.css({ .css({
backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))' backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
@ -382,8 +364,34 @@ Ox.VideoPlayer = function(options, self) {
.css({ .css({
backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))' backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
}) })
.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>')
.css({
float: 'left',
width: '24px',
paddingTop: '2px',
fontSize: '9px',
textAlign: 'center'
})
.html('0')
.appendTo(self.$find);
self.$previousButton = Ox.Button({ self.$previousButton = Ox.Button({
style: 'symbol', style: 'symbol',
title: 'arrowLeft', title: 'arrowLeft',
@ -413,9 +421,7 @@ Ox.VideoPlayer = function(options, self) {
.appendTo(self.$find); .appendTo(self.$find);
self.$findInput = Ox.Input({ self.$findInput = Ox.Input({
placeholder: 'Find', value: self.options.find
value: self.options.find,
width: 86
}) })
.css({ .css({
float: 'left', float: 'left',
@ -450,15 +456,17 @@ Ox.VideoPlayer = function(options, self) {
background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))' background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
}); });
///*
self.$clearButton = Ox.Button({ self.$clearButton = Ox.Button({
style: 'symbol', style: 'symbol',
title: 'close', title: 'delete',
tooltip: 'Clear', tooltip: 'Clear',
type: 'image' type: 'image'
}) })
.css({float: 'left'}) .css({float: 'left'})
.bindEvent({ .bindEvent({
click: function() { click: function() {
self.$results.html('0');
self.$findInput self.$findInput
.options({value: ''}) .options({value: ''})
.focusInput(); .focusInput();
@ -466,27 +474,33 @@ Ox.VideoPlayer = function(options, self) {
self.$timeline && self.$timeline.options({ self.$timeline && self.$timeline.options({
results: self.results results: self.results
}); });
//setTimeout(self.$findInput.focusInput, 10);
} }
}) })
.appendTo(self.$find); .appendTo(self.$find);
//*/
} }
if (self.options.controls.length) { ['top', 'bottom'].forEach(function(edge) {
self.$controls = Ox.Bar({ var titlecase = Ox.toTitleCase(edge);
if (self.options['controls' + titlecase].length) {
self['$controls' + titlecase] = Ox.Bar({
size: self.barHeight size: self.barHeight
}) })
.addClass('OxInterface') .addClass('OxControls OxInterface')
.css({ .css({
position: 'absolute', position: 'absolute',
bottom: 0,
opacity: self.options.externalControls ? 1 : 0 opacity: self.options.externalControls ? 1 : 0
}) })
.css(edge, 0)
.appendTo(that.$element); .appendTo(that.$element);
if (!self.options.externalControls) { if (!self.options.externalControls) {
self.$controls.css({ self['$controls' + titlecase].css({
backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))' backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
}) })
.css({ .css({
@ -494,75 +508,22 @@ Ox.VideoPlayer = function(options, self) {
}); });
} }
self.$control = {}; self.options['controls' + titlecase].forEach(function(control) {
self.options.controls.forEach(function(control) { if (control == 'find') {
if (control == 'play') { self.$findButton = Ox.Button({
self.$playButton = Ox.Button({
style: 'symbol',
// FIXME: this is retarded, fix Ox.Button
title: [
{id: 'play', title: 'play', selected: self.options.paused},
{id: 'pause', title: 'pause', selected: !self.options.paused}
],
tooltip: ['Play', 'Pause'],
type: 'image'
})
.css({float: 'left'})
.bindEvent('click', function() {
togglePaused();
})
.appendTo(self.$controls);
} else if (control == 'playInToOut') {
self.$playInToOutButton = Ox.Button({
style: 'symbol',
title: 'playInToOut',
tooltip: 'Play In to Out',
type: 'image'
})
.css({float: 'left'})
.bindEvent('click', playInToOut)
.appendTo(self.$controls);
} else if (control == 'mute') {
self.$muteButton = Ox.Button({
style: 'symbol', style: 'symbol',
title: [ title: [
{id: 'mute', title: 'mute', selected: !self.options.muted}, {id: 'find', title: 'find'},
{id: 'unmute', title: 'unmute', selected: self.options.muted} {id: 'close', title: 'close'}
], ],
tooltip: ['Mute', 'Unmute'], tooltip: ['Find', 'Close'],
type: 'image' type: 'image'
}) })
.css({float: 'left'}) .css({float: 'left'})
.bindEvent('click', function() { .bindEvent('click', toggleFind)
toggleMuted(); .appendTo(self['$controls' + titlecase]);
})
.appendTo(self.$controls);
} else if (control == 'volume') {
} else if (control == 'scale') {
self.$scaleButton = Ox.Button({
style: 'symbol',
title: [
{id: 'fill', title: 'fill', selected: !self.options.scaleToFill},
{id: 'fit', title: 'fit', selected: self.options.scaleToFill}
],
tooltip: ['Scale to Fill', 'Scale to Fit'],
type: 'image'
})
.css({float: 'left'})
.bindEvent('click', function() {
toggleScale();
})
.appendTo(self.$controls);
} else if (control == 'fullscreen') { } else if (control == 'fullscreen') {
@ -579,56 +540,54 @@ Ox.VideoPlayer = function(options, self) {
.bindEvent('click', function() { .bindEvent('click', function() {
toggleFullscreen(); toggleFullscreen();
}) })
.appendTo(self.$controls); .appendTo(self['$controls' + titlecase]);
} else if (control == 'size') { } else if (control == 'mute') {
self.$sizeButton = Ox.Button({ self.$muteButton = Ox.Button({
style: 'symbol', style: 'symbol',
title: [ title: [
{id: 'grow', title: 'grow', selected: !self.options.sizeIsLarge}, {id: 'mute', title: 'mute', selected: !self.options.muted},
{id: 'shrink', title: 'shrink', selected: self.options.sizeIsLarge} {id: 'unmute', title: 'unmute', selected: self.options.muted}
], ],
tooltip: ['Larger', 'Smaller'], tooltip: ['Mute', 'Unmute'],
type: 'image' type: 'image'
}) })
.css({float: 'left'}) .css({float: 'left'})
.bindEvent('click', toggleSize) .bindEvent('click', function() {
.appendTo(self.$controls); toggleMuted();
} else if (control == 'timeline') {
/*
if (self.options.showProgress) {
self.$progress = $('<img>')
.attr({
src: getProgressImageURL()
}) })
.css({ .appendTo(self['$controls' + titlecase]);
float: 'left',
height: self.barHeight + 'px', } else if (control == 'play') {
self.$playButton = Ox.Button({
style: 'symbol',
// FIXME: this is retarded, fix Ox.Button
title: [
{id: 'play', title: 'play', selected: self.options.paused},
{id: 'pause', title: 'pause', selected: !self.options.paused}
],
tooltip: ['Play', 'Pause'],
type: 'image'
}) })
.appendTo(self.$timelineImages.$element);
}
*/
if (self.options.duration) {
self.$timeline = getTimeline()
} else {
self.$timeline = Ox.Element()
.css({
float: 'left'
})
.html('&nbsp;');
}
self.$timeline.appendTo(self.$controls);
} else if (control == 'space') {
self.$space = $('<div>')
.css({float: 'left'}) .css({float: 'left'})
.html('&nbsp;') // fixme: ?? .bindEvent('click', function() {
.appendTo(self.$controls.$element); togglePaused();
})
.appendTo(self['$controls' + titlecase]);
} else if (control == 'playInToOut') {
self.$playInToOutButton = Ox.Button({
style: 'symbol',
title: 'playInToOut',
tooltip: 'Play In to Out',
type: 'image'
})
.css({float: 'left'})
.bindEvent('click', playInToOut)
.appendTo(self['$controls' + titlecase]);
} else if (control == 'position') { } else if (control == 'position') {
@ -663,7 +622,7 @@ Ox.VideoPlayer = function(options, self) {
.focusInput(false); .focusInput(false);
} }
}) })
.appendTo(self.$controls.$element); .appendTo(self['$controls' + titlecase].$element);
self.$positionInput = Ox.Input({ self.$positionInput = Ox.Input({
value: formatPosition(), value: formatPosition(),
@ -685,7 +644,7 @@ Ox.VideoPlayer = function(options, self) {
} }
}) })
.hide() .hide()
.appendTo(self.$controls.$element); .appendTo(self['$controls' + titlecase].$element);
self.$positionInput.children('input').css({ self.$positionInput.children('input').css({
width: (self.positionWidth - 6) + 'px', width: (self.positionWidth - 6) + 'px',
@ -703,12 +662,198 @@ Ox.VideoPlayer = function(options, self) {
background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))' background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
}); });
} else if (control == 'scale') {
self.$scaleButton = Ox.Button({
style: 'symbol',
title: [
{id: 'fill', title: 'fill', selected: !self.options.scaleToFill},
{id: 'fit', title: 'fit', selected: self.options.scaleToFill}
],
tooltip: ['Scale to Fill', 'Scale to Fit'],
type: 'image'
})
.css({float: 'left'})
.bindEvent('click', function() {
toggleScale();
})
.appendTo(self['$controls' + titlecase]);
} else if (control == 'size') {
self.$sizeButton = Ox.Button({
style: 'symbol',
title: [
{id: 'grow', title: 'grow', selected: !self.options.sizeIsLarge},
{id: 'shrink', title: 'shrink', selected: self.options.sizeIsLarge}
],
tooltip: ['Larger', 'Smaller'],
type: 'image'
})
.css({float: 'left'})
.bindEvent('click', toggleSize)
.appendTo(self['$controls' + titlecase]);
} else if (control == 'space') {
self['$space' + titlecase] = $('<div>')
.css({float: 'left'})
.html('&nbsp;') // fixme: ??
.appendTo(self['$controls' + titlecase].$element);
} else if (control == 'timeline') {
/*
if (self.options.showProgress) {
self.$progress = $('<img>')
.attr({
src: getProgressImageURL()
})
.css({
float: 'left',
height: self.barHeight + 'px',
})
.appendTo(self.$timelineImages.$element);
}
*/
if (self.options.duration) {
self.$timeline = getTimeline()
} else {
self.$timeline = Ox.Element()
.css({
float: 'left'
})
.html('&nbsp;');
}
self.$timeline.appendTo(self['$controls' + titlecase]);
} else if (control == 'title') {
self.$title = $('<div>')
.addClass('OxInterface')
.css({
float: 'left',
paddingTop: '1px',
textAlign: 'center',
color: 'rgb(255, 255, 255)'
})
.html(self.options.title)
.appendTo(self['$controls' + titlecase].$element);
} else if (control == 'volume') {
self.$volumeButton = Ox.Button({
style: 'symbol',
title: 'mute',
tooltip: 'Volume',
type: 'image'
})
.css({float: 'left'})
.bindEvent('click', function() {
self.$volume.toggle();
})
.appendTo(self['$controls' + titlecase]);
} }
}); });
} }
});
if (self.options.enableVolume) {
self.$volume = $('<div>')
.css({
position: 'absolute',
left: 0,
bottom: self.options.controlsBottom.length ? '16px' : 0,
height: '16px',
borderTopLeftRadius: '8px',
borderTopRightRadius: '8px'
})
.css({
backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
})
.css({
backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
})
.hide()
.appendTo(that.$element);
self.$muteButton = Ox.Button({
style: 'symbol',
title: [
{id: 'mute', title: 'mute', selected: !self.options.muted},
{id: 'unmute', title: 'unmute', selected: self.options.muted}
],
tooltip: ['Mute', 'Unmute'],
type: 'image'
})
.css({float: 'left'})
.bindEvent({
click: function() {
toggleMuted();
}
})
.appendTo(self.$volume);
self.$volumeInput = Ox.Range({
max: 1,
min: 0,
step: 0.001,
value: self.options.muted ? 0 : self.options.volume
})
.css({
float: 'left'
})
.bindEvent({
change: setVolume
})
.appendTo(self.$volume);
self.$volumeInput.find('.OxTrack')
.css({
//border: '1px solid rgba(64, 64, 64, 1)'
padding: '1px',
border: 0
})
.css({
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))'
});
self.$volumeInput.find('.OxThumb')
.css({
//border: '1px solid rgba(64, 64, 64, 1)'
padding: '1px 7px 1px 7px',
border: 0
})
.css({
backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
})
.css({
backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
});
self.$volumeValue = $('<div>')
.css({
float: 'left',
width: '24px',
paddingTop: '2px',
fontSize: '9px',
textAlign: 'center'
})
.html(self.options.muted ? 0 : Math.round(self.options.volume * 100))
.appendTo(self.$volume);
}
setSizes(); setSizes();
function clearInterfaceTimeout() { function clearInterfaceTimeout() {
@ -735,13 +880,22 @@ Ox.VideoPlayer = function(options, self) {
} }
function find(query) { function find(query) {
var results = [];
Ox.print(query)
if (query.length) {
query = query.toLowerCase(); query = query.toLowerCase();
return query.length ? Ox.map(self.options.subtitles, function(subtitle) { results = Ox.map(self.options.subtitles, function(subtitle) {
return subtitle.text.toLowerCase().indexOf(query) > -1 ? { return subtitle.text.toLowerCase().indexOf(query) > -1 ? {
'in': subtitle['in'], 'in': subtitle['in'],
out: subtitle.out out: subtitle.out
} : null; } : null;
}) : []; });
if (results.length == 0) {
// fixme: doesn't happen
self.$findInput.focusInput();
}
}
return results;
} }
function formatPosition(position) { function formatPosition(position) {
@ -751,10 +905,14 @@ Ox.VideoPlayer = function(options, self) {
function getCSS(element) { function getCSS(element) {
var css; var css;
if (element == 'controls' || element == 'title') { if (element == 'controlsTop' || element == 'controlsBottom') {
css = { css = {
width: self.width + 'px' width: self.width + 'px'
}; };
} else if (element == 'find') {
css = {
width: Math.min(208, self.width) + 'px'
};
} else if (element == 'loadingIcon') { } else if (element == 'loadingIcon') {
css = { css = {
left: self.iconLeft + 'px', left: self.iconLeft + 'px',
@ -767,7 +925,7 @@ Ox.VideoPlayer = function(options, self) {
logoMargin = Math.round(self.height / 20); logoMargin = Math.round(self.height / 20);
css = { css = {
left: logoMargin + 'px', left: logoMargin + 'px',
top: (logoMargin + !!self.titleIsVisible * 16) + 'px', top: logoMargin + (self.controlsTopAreVisible ? 16 : 0) + 'px',
height: logoHeight + 'px', height: logoHeight + 'px',
}; };
} else if (element == 'player') { } else if (element == 'player') {
@ -777,7 +935,7 @@ Ox.VideoPlayer = function(options, self) {
? window.innerHeight ? window.innerHeight
: self.height + ( : self.height + (
self.options.externalControls self.options.externalControls
? (!!self.options.controls.length + !!self.options.title) * self.barHeight ? (!!self.options.controlsTop.length + !!self.options.controlsBottom.length) * self.barHeight
: 0)) + 'px' : 0)) + 'px'
}, self.options.fullscreen ? { }, self.options.fullscreen ? {
left: 0, left: 0,
@ -828,20 +986,28 @@ Ox.VideoPlayer = function(options, self) {
}; };
} else if (element == 'subtitle') { } else if (element == 'subtitle') {
css = { css = {
bottom: (parseInt(self.height / 16) + !!self.controlsAreVisible * 16) + 'px', bottom: (parseInt(self.height / 16) + !!self.controlsBottomAreVisible * 16) + 'px',
width: self.width + 'px', width: self.width + 'px',
fontSize: parseInt(self.height / 20) + 'px', fontSize: parseInt(self.height / 20) + 'px',
WebkitTextStroke: (self.height / 1000) + 'px rgb(0, 0, 0)' WebkitTextStroke: (self.height / 1000) + 'px rgb(0, 0, 0)'
}; };
} else if (element == 'space' || element == 'timeline') { } else if (element == 'spaceBottom' || element == 'timeline') {
css = { css = {
width: self.timelineWidth + 'px' width: self.timelineWidth + 'px'
}; };
} else if (element == 'spaceTop' || element == 'title') {
css = {
width: getTitleWidth() + 'px'
};
} else if (element == 'videoContainer') { } else if (element == 'videoContainer') {
css = { css = {
width: self.width + 'px', width: self.width + 'px',
height: self.height + 'px' height: self.height + 'px'
}; };
} else if (element == 'volume') {
css = {
width: Math.min(168, self.width)
};
} }
return css; return css;
} }
@ -929,6 +1095,12 @@ Ox.VideoPlayer = function(options, self) {
.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: '-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, true); setPosition(data.position, true);
@ -946,7 +1118,7 @@ Ox.VideoPlayer = function(options, self) {
function getTimelineLeft() { function getTimelineLeft() {
var left = 0; var left = 0;
Ox.forEach(self.options.controls, function(control) { Ox.forEach(self.options.controlsBottom, function(control) {
if (control == 'timeline') { if (control == 'timeline') {
return false; return false;
} }
@ -957,7 +1129,7 @@ Ox.VideoPlayer = function(options, self) {
function getTimelineWidth() { function getTimelineWidth() {
return (self.options.fullscreen ? window.innerWidth : self.options.width) - return (self.options.fullscreen ? window.innerWidth : self.options.width) -
self.options.controls.reduce(function(prev, curr) { self.options.controlsBottom.reduce(function(prev, curr) {
return prev + ( return prev + (
curr == 'timeline' || curr == 'space' ? 0 : curr == 'timeline' || curr == 'space' ? 0 :
curr == 'position' ? self.positionWidth : 16 curr == 'position' ? self.positionWidth : 16
@ -965,13 +1137,45 @@ Ox.VideoPlayer = function(options, self) {
}, 0); }, 0);
} }
function getTitleWidth() {
return (self.options.fullscreen ? window.innerWidth : self.options.width) -
self.options.controlsTop.reduce(function(prev, curr) {
return prev + (
curr == 'title' || curr == 'space' ? 0 : 16
);
}, 0);
}
function getVolumeImageURL() {
var symbol;
if (self.options.muted || self.options.volume == 0) {
symbol = 'unmute';
} else if (self.options.volume < 1/3) {
symbol = 'VolumeUp';
} else if (self.options.volume < 2/3) {
symbol = 'VolumeDown';
} else {
symbol = 'mute';
}
return Ox.UI.getImagePath('symbol' + symbol + '.svg').replace('/classic/', '/modern/');
}
function hideInterface() { function hideInterface() {
Ox.print('hideInterface'); Ox.print('hideInterface');
self.interfaceTimeout = setTimeout(function() { self.interfaceTimeout = setTimeout(function() {
if (!self.exitFullscreen && !self.inputHasFocus && !self.mouseIsInControls) { if (!self.exitFullscreen && !self.inputHasFocus && !self.mouseIsInControls) {
self.titleIsVisible = false; self.controlsTopAreVisible = false;
self.controlsAreVisible = false; self.controlsBottomAreVisible = false;
that.find('.OxInterface').animate({ self.$controlsTop && self.$controlsTop.animate({
opacity: 0
}, 250);
self.$controlsBottom && self.$controlsBottom.animate({
opacity: 0
}, 250);
self.$find && self.$find.is(':visible') && self.$find.animate({
opacity: 0
}, 250);
self.$volume && self.$volume.is(':visible') && self.$volume.animate({
opacity: 0 opacity: 0
}, 250); }, 250);
self.$logo && self.$logo.animate({ self.$logo && self.$logo.animate({
@ -1133,7 +1337,7 @@ Ox.VideoPlayer = function(options, self) {
self.iconTop = parseInt((self.height - self.iconSize) / 2); self.iconTop = parseInt((self.height - self.iconSize) / 2);
if (self.$timeline || self.$space) { if (self.$timeline || self.$space) {
self.timelineWidth = self.width - self.timelineWidth = self.width -
self.options.controls.reduce(function(prev, curr) { self.options.controlsBottom.reduce(function(prev, curr) {
return prev + ( return prev + (
curr == 'timeline' || curr == 'space' ? 0 : curr == 'timeline' || curr == 'space' ? 0 :
curr == 'position' ? self.positionWidth : 16 curr == 'position' ? self.positionWidth : 16
@ -1151,8 +1355,10 @@ Ox.VideoPlayer = function(options, self) {
self.$loadingIcon.animate(getCSS('loadingIcon'), ms); self.$loadingIcon.animate(getCSS('loadingIcon'), ms);
self.$playIcon && self.$playIcon.animate(getCSS('playIcon'), ms); self.$playIcon && self.$playIcon.animate(getCSS('playIcon'), ms);
self.$subtitle && self.$subtitle.animate(getCSS('subtitle'), ms); self.$subtitle && self.$subtitle.animate(getCSS('subtitle'), ms);
self.$controlsTop && self.$controlsTop.animate(getCSS('controlsTop'), ms);
self.$title && self.$title.animate(getCSS('title'), ms); self.$title && self.$title.animate(getCSS('title'), ms);
self.$controls && self.$controls.animate(getCSS('controls'), ms); self.$spaceTop && self.$spaceTop.animate(getCSS('spaceTop'), ms);
self.$controlsBottom && self.$controlsBottom.animate(getCSS('controlsBottom'), ms);
if (self.$timeline) { if (self.$timeline) {
self.$timeline.animate(getCSS('timeline'), ms, function() { self.$timeline.animate(getCSS('timeline'), ms, function() {
self.$timeline.options({ self.$timeline.options({
@ -1160,7 +1366,19 @@ Ox.VideoPlayer = function(options, self) {
}) })
}); });
} }
self.$space && self.$space.animate(getCSS('space'), ms); self.$spaceBottom && self.$spaceBottom.animate(getCSS('spaceBottom'), ms);
if (self.$find) {
self.$find.animate(getCSS('find'), ms);
self.$findInput.options({
width: Math.min(128, self.width - 80)
});
}
if (self.$volume) {
self.$volume.animate(getCSS('volume'), ms);
self.$volumeInput.options({
width: Math.min(128, self.width - 40)
});
}
} }
function setSubtitle() { function setSubtitle() {
@ -1174,16 +1392,34 @@ Ox.VideoPlayer = function(options, self) {
} }
} }
function setVolume(data) {
self.options.volume = data.value;
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() { function showInterface() {
Ox.print('showInterface'); Ox.print('showInterface');
clearTimeout(self.interfaceTimeout); clearTimeout(self.interfaceTimeout);
if (self.$title) { if (self.$controlsTop) {
self.titleIsVisible = true; self.controlsTopAreVisible = true;
} }
if (self.$controls) { if (self.$controlsBottom) {
self.controlsAreVisible = true; self.controlsBottomAreVisible = true;
} }
that.find('.OxInterface').animate({ self.$controlsTop && self.$controlsTop.animate({
opacity: 1
}, 250);
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 opacity: 1
}, 250); }, 250);
self.$logo && self.$logo.animate({ self.$logo && self.$logo.animate({
@ -1219,12 +1455,12 @@ Ox.VideoPlayer = function(options, self) {
function submitFindInput() { function submitFindInput() {
self.options.find = self.$findInput.options('value'); self.options.find = self.$findInput.options('value');
self.results = find(self.options.find); self.results = find(self.options.find);
self.$results.html(self.results.length);
self.$timeline && self.$timeline.options({ self.$timeline && self.$timeline.options({
results: self.results results: self.results
}); });
if (self.results.length) { if (self.results.length) {
setPosition(self.results[0]['in'] + self.secondsPerFrame, true); goToNextResult(1);
self.currentResult = 0;
} }
} }
@ -1262,6 +1498,11 @@ Ox.VideoPlayer = function(options, self) {
self.mouseHasLeft && hideInterface(); self.mouseHasLeft && hideInterface();
} }
function toggleFind() {
self.$find.toggle();
self.$find.is(':visible') && self.$findInput.focusInput(false);
}
function toggleFullscreen(toggleButton) { function toggleFullscreen(toggleButton) {
var parentOffset, wasPlaying; var parentOffset, wasPlaying;
self.options.fullscreen = !self.options.fullscreen; self.options.fullscreen = !self.options.fullscreen;
@ -1295,7 +1536,7 @@ Ox.VideoPlayer = function(options, self) {
} }
} }
}); });
self.$controls && self.$controls.bind({ that.find('.OxControls').bind({
mouseenter: function() { mouseenter: function() {
self.mouseIsInControls = true; self.mouseIsInControls = true;
}, },
@ -1310,7 +1551,7 @@ Ox.VideoPlayer = function(options, self) {
// flag makes the animation end on absolute position // flag makes the animation end on absolute position
self.exitFullscreen = true; self.exitFullscreen = true;
that.unbind('mousemove'); that.unbind('mousemove');
self.$controls && self.$controls that.find('.OxControls')
.trigger('mouseleave') .trigger('mouseleave')
.unbind('mouseenter') .unbind('mouseenter')
.unbind('mouseleave'); .unbind('mouseleave');
@ -1320,7 +1561,8 @@ Ox.VideoPlayer = function(options, self) {
that.detach() that.detach()
.css({ .css({
left: self.relativeOffset.left + 'px', left: self.relativeOffset.left + 'px',
top: self.relativeOffset.top + 'px' top: self.relativeOffset.top + 'px',
zIndex: 1
}) })
.appendTo(self.$parent); .appendTo(self.$parent);
wasPlaying && self.video.play(); wasPlaying && self.video.play();
@ -1339,6 +1581,15 @@ Ox.VideoPlayer = function(options, self) {
if (toggleButton && self.$muteButton) { if (toggleButton && self.$muteButton) {
self.$muteButton.toggleTitle(); self.$muteButton.toggleTitle();
} }
self.$volumeButton && self.$volumeButton.attr({
src: getVolumeImageURL()
});
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));
} }
function togglePaused(toggleButton) { function togglePaused(toggleButton) {