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

fix animation bug when switching back from fullscreen

Browse source
This commit is contained in:
rolux 2011-05-17 22:20:43 +02:00
parent dec0832de6
commit f1f66cce81
1 changed files with 65 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -189,6 +189,12 @@ Ox.VideoPlayer = function(options, self) {
key_shift_g: function() { key_shift_g: function() {
goToNextResult(-1); goToNextResult(-1);
}, },
key_shift_left: function() {
setPosition(self.options.position - 1);
},
key_shift_right: function() {
setPosition(self.options.position + 1);
},
key_space: togglePaused key_space: togglePaused
}) })
} }
@ -374,6 +380,7 @@ Ox.VideoPlayer = function(options, self) {
if (self.options.enableFind) { if (self.options.enableFind) {
self.$find = $('<div>') self.$find = $('<div>')
.addClass('OxControls')
.css({ .css({
position: 'absolute', position: 'absolute',
right: 0, right: 0,
@ -713,6 +720,7 @@ Ox.VideoPlayer = function(options, self) {
.appendTo(self['$controls' + titlecase]); .appendTo(self['$controls' + titlecase]);
self.$resolution = $('<div>') self.$resolution = $('<div>')
.addClass('OxControls')
.css({ .css({
position: 'absolute', position: 'absolute',
right: 0, right: 0,
@ -907,6 +915,7 @@ Ox.VideoPlayer = function(options, self) {
if (self.options.enableVolume) { if (self.options.enableVolume) {
self.$volume = $('<div>') self.$volume = $('<div>')
.addClass('OxControls')
.css({ .css({
position: 'absolute', position: 'absolute',
left: 0, left: 0,
@ -1360,8 +1369,10 @@ Ox.VideoPlayer = function(options, self) {
function hideInterface() { function hideInterface() {
Ox.print('hideInterface'); Ox.print('hideInterface');
clearTimeout(self.interfaceTimeout);
self.interfaceTimeout = setTimeout(function() { self.interfaceTimeout = setTimeout(function() {
if (!self.exitFullscreen && !self.inputHasFocus && !self.mouseIsInControls) { if (!self.exitFullscreen && !self.inputHasFocus && !self.mouseIsInControls) {
self.interfaceIsVisible = false;
self.controlsTopAreVisible = false; self.controlsTopAreVisible = false;
self.controlsBottomAreVisible = false; self.controlsBottomAreVisible = false;
self.$controlsTop && self.$controlsTop.animate({ self.$controlsTop && self.$controlsTop.animate({
@ -1471,10 +1482,12 @@ Ox.VideoPlayer = function(options, self) {
} }
function playInToOut() { function playInToOut() {
self.playInToOut = true; if (self.options.out > self.options['in']) {
setPosition(self.options['in']); self.playInToOut = true;
if (self.options.paused) { setPosition(self.options['in']);
togglePaused(); if (self.options.paused) {
togglePaused();
}
} }
} }
@ -1643,48 +1656,51 @@ Ox.VideoPlayer = function(options, self) {
function showInterface() { function showInterface() {
Ox.print('showInterface'); Ox.print('showInterface');
clearTimeout(self.interfaceTimeout); clearTimeout(self.interfaceTimeout);
if (self.$controlsTop) { if (!self.interfaceIsVisible) {
self.controlsTopAreVisible = true; self.interfaceIsVisible = true;
if (self.$controlsTop) {
self.controlsTopAreVisible = true;
}
if (self.$controlsBottom) {
self.controlsBottomAreVisible = true;
}
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
}, 250);
self.$resolution && self.$resolution.is(':visible') && self.$resolution.animate({
opacity: 1
}, 250);
self.$logo && self.$logo.animate({
top: getCSS('logo').top,
opacity: 0.5
}, 250, function() {
self.options.logoLink && self.$logo
.bind({
click: function() {
document.location.href = self.options.logoLink;
}
});
self.options.logoTitle && self.$logo
.bind({
mouseenter: function(e) {
self.$logoTooltip.show(e);
},
mouseleave: self.$logoTooltip.hide
});
});
self.$subtitle && self.$subtitle.animate({
bottom: getCSS('subtitle').bottom,
}, 250);
} }
if (self.$controlsBottom) {
self.controlsBottomAreVisible = true;
}
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
}, 250);
self.$resolution && self.$resolution.is(':visible') && self.$resolution.animate({
opacity: 1
}, 250);
self.$logo && self.$logo.animate({
top: getCSS('logo').top,
opacity: 0.5
}, 250, function() {
self.options.logoLink && self.$logo
.bind({
click: function() {
document.location.href = self.options.logoLink;
}
});
self.options.logoTitle && self.$logo
.bind({
mouseenter: function(e) {
self.$logoTooltip.show(e);
},
mouseleave: self.$logoTooltip.hide
});
});
self.$subtitle && self.$subtitle.animate({
bottom: getCSS('subtitle').bottom,
}, 250);
} }
function showLoadingIcon() { function showLoadingIcon() {
@ -1775,10 +1791,10 @@ Ox.VideoPlayer = function(options, self) {
playOnFullscreen && self.video.play(); playOnFullscreen && self.video.play();
that.bind({ that.bind({
mousemove: function() { mousemove: function() {
if (!self.mouseIsInControls) { showInterface();
showInterface(); //if (!self.mouseIsInControls) {
hideInterface(); hideInterface();
} //}
} }
}); });
that.find('.OxControls').bind({ that.find('.OxControls').bind({
@ -1800,7 +1816,7 @@ Ox.VideoPlayer = function(options, self) {
.trigger('mouseleave') .trigger('mouseleave')
.unbind('mouseenter') .unbind('mouseenter')
.unbind('mouseleave'); .unbind('mouseleave');
Ox.print('???', self.mouseIsInControls); clearTimeout(self.interfaceTimeout);
setSizes(function() { setSizes(function() {
self.exitFullscreen = false; self.exitFullscreen = false;
that.detach() that.detach()