mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 461680 - Improve video control fade in/out animation. r=enn
This commit is contained in:
Justin Dolske
parent
376bb811ac
commit
ec8bca15a1
@ -14,7 +14,7 @@
|
||||
|
||||
<xbl:content xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<spacer flex="1"/>
|
||||
<hbox id="controlsBackground">
|
||||
<hbox id="controlBar">
|
||||
<image id="playButton"
|
||||
onclick="if (event.button == 0) this.parentNode.parentNode.Utils.togglePause();"/>
|
||||
<box id="controlsMiddle" flex="1"/>
|
||||
@ -77,15 +77,18 @@
|
||||
<![CDATA[ ({
|
||||
debug : false,
|
||||
video : null,
|
||||
controls : null,
|
||||
controlBar : null,
|
||||
playButton : null,
|
||||
muteButton : null,
|
||||
|
||||
animationSteps : 8,
|
||||
animationStep : 0,
|
||||
animationDirection : 1,
|
||||
animationTimer : null,
|
||||
FADE_TIME_MAX : 200, // ms
|
||||
FADE_TIME_STEP : 30, // ms
|
||||
|
||||
fadeTime : 0, // duration of active fade animation
|
||||
fadingIn: true, // are we fading in, or fading out?
|
||||
fadeTimer : null,
|
||||
controlsVisible : false,
|
||||
|
||||
handleEvent : function (aEvent) {
|
||||
this.log("Got " + aEvent.type + " media event");
|
||||
switch (aEvent.type) {
|
||||
@ -104,22 +107,62 @@
|
||||
}
|
||||
},
|
||||
|
||||
fadeControls : function (self) {
|
||||
self.log("fadeControls @" + self.animationStep);
|
||||
self.animationStep += self.animationDirection;
|
||||
onMouseInOut : function (event) {
|
||||
var isMouseOver = (event.type == "mouseover");
|
||||
|
||||
if (self.animationStep <= 0) {
|
||||
self.animationStep = 0;
|
||||
clearInterval(self.animationTimer);
|
||||
self.animationTimer = null;
|
||||
} else if (self.animationStep >= self.animationSteps) {
|
||||
self.animationStep = self.animationSteps;
|
||||
clearInterval(self.animationTimer);
|
||||
self.animationTimer = null;
|
||||
// Ignore events caused by transitions between child nodes.
|
||||
if (this.isChildNode(event.target) &&
|
||||
this.isChildNode(event.relatedTarget))
|
||||
return;
|
||||
|
||||
// Don't show controls when they're disabled, but do allow a
|
||||
// mouseout to hide controls that were disabled after being shown.
|
||||
if (!this.video.controls && (isMouseOver || !this.controlsVisible))
|
||||
return;
|
||||
|
||||
this.log("Fading controls " + (isMouseOver ? "in" : "out"));
|
||||
|
||||
var directionChange = (isMouseOver != this.fadingIn);
|
||||
this.fadingIn = isMouseOver;
|
||||
|
||||
// When switching direction mid-fade, adjust fade time for current fade state.
|
||||
if (directionChange && this.fadeTime)
|
||||
this.fadeTime = this.FADE_TIME_MAX - this.fadeTime;
|
||||
|
||||
if (!this.fadeTimer)
|
||||
this.fadeTimer = setInterval(this.fadeControls, this.FADE_TIME_STEP, this);
|
||||
},
|
||||
|
||||
fadeControls : function (self, lateness) {
|
||||
// Update elapsed time, and compute position as a percent
|
||||
// of total. Last frame could run over, so clamp to 1.
|
||||
self.fadeTime += self.FADE_TIME_STEP + lateness;
|
||||
var pos = self.fadeTime / self.FADE_TIME_MAX;
|
||||
if (pos > 1)
|
||||
pos = 1;
|
||||
|
||||
// Calculate the opacity for our position in the animation.
|
||||
var opacity;
|
||||
if (self.fadingIn)
|
||||
opacity = Math.pow(pos, 0.5);
|
||||
else
|
||||
opacity = Math.pow(1 - pos, 0.5);
|
||||
self.controlsVisible = (opacity ? true : false);
|
||||
|
||||
self.controlBar.style.opacity = opacity;
|
||||
|
||||
// Use .visibility to ignore mouse clicks when hidden.
|
||||
if (self.controlsVisible)
|
||||
self.controlBar.style.visibility = "visible";
|
||||
else
|
||||
self.controlBar.style.visibility = "hidden";
|
||||
|
||||
// Is the animation done?
|
||||
if (pos == 1) {
|
||||
clearInterval(self.fadeTimer);
|
||||
self.fadeTimer = null;
|
||||
self.fadeTime = 0;
|
||||
}
|
||||
|
||||
// XXX might be good to do logarithmic steps, maybe use timer error too (for smoothness)?
|
||||
self.controls.style.opacity = self.animationStep / self.animationSteps;
|
||||
},
|
||||
|
||||
togglePause : function () {
|
||||
@ -143,11 +186,11 @@
|
||||
|
||||
isChildNode : function (node) {
|
||||
while (node) {
|
||||
if (node == this.controls)
|
||||
if (node == this.video)
|
||||
break;
|
||||
node = node.parentNode;
|
||||
}
|
||||
return (node == this);
|
||||
return (node == this.video);
|
||||
},
|
||||
|
||||
log : function (msg) {
|
||||
@ -162,15 +205,16 @@
|
||||
<![CDATA[
|
||||
var video = this.parentNode;
|
||||
this.Utils.video = video;
|
||||
this.Utils.controls = this;
|
||||
|
||||
this.Utils.controlBar = document.getAnonymousElementByAttribute(this, "id", "controlBar");
|
||||
this.Utils.playButton = document.getAnonymousElementByAttribute(this, "id", "playButton");
|
||||
this.Utils.muteButton = document.getAnonymousElementByAttribute(this, "id", "muteButton");
|
||||
|
||||
// Set initial state of play/pause button.
|
||||
this.Utils.playButton.setAttribute("paused", video.paused);
|
||||
|
||||
this.style.opacity = 0;
|
||||
// Controls are initially faded out and hidden (to ignore mouse clicks)
|
||||
this.Utils.controlBar.style.opacity = 0;
|
||||
this.Utils.controlBar.style.visibility = "hidden";
|
||||
|
||||
// Use Utils.handleEvent() callback for all media events.
|
||||
video.addEventListener("play", this.Utils, false);
|
||||
@ -187,33 +231,10 @@
|
||||
|
||||
<handlers>
|
||||
<handler event="mouseover">
|
||||
<![CDATA[
|
||||
// Ignore events caused by transitions between child nodes.
|
||||
if (this.Utils.isChildNode(event.relatedTarget))
|
||||
return;
|
||||
|
||||
// Don't show controls unless they're enabled
|
||||
// XXX sucks that spec defaults to controls=false. :-(
|
||||
// XXX add support for dynamically hiding controls w/o waiting for mouseout?
|
||||
if (!this.Utils.video.controls)
|
||||
return;
|
||||
|
||||
this.Utils.animationDirection = 1;
|
||||
if (!this.Utils.animationTimer)
|
||||
this.Utils.animationTimer = setInterval(this.Utils.fadeControls, 50, this.Utils);
|
||||
]]>
|
||||
this.Utils.onMouseInOut(event);
|
||||
</handler>
|
||||
|
||||
<handler event="mouseout">
|
||||
<![CDATA[
|
||||
// Ignore events caused by transitions between child nodes.
|
||||
if (this.Utils.isChildNode(event.relatedTarget))
|
||||
return;
|
||||
|
||||
this.Utils.animationDirection = -1;
|
||||
if (!this.Utils.animationTimer)
|
||||
this.Utils.animationTimer = setInterval(this.Utils.fadeControls, 50, this.Utils);
|
||||
]]>
|
||||
this.Utils.onMouseInOut(event);
|
||||
</handler>
|
||||
</handlers>
|
||||
</binding>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
||||
|
||||
#controlsBackground {
|
||||
#controlBar {
|
||||
height: 24px;
|
||||
background-color: #656363;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
||||
|
||||
#controlsBackground {
|
||||
#controlBar {
|
||||
height: 24px;
|
||||
background-color: #656363;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user