From ec8bca15a1ee864b746443610194be91e4b7a1c8 Mon Sep 17 00:00:00 2001
From: Justin Dolske <dolske@mozilla.com>
Date: Wed, 10 Dec 2008 16:15:47 -0800
Subject: [PATCH] Bug 461680 - Improve video control fade in/out animation.
 r=enn

---
 toolkit/content/widgets/videocontrols.xml     | 121 ++++++++++--------
 .../pinstripe/global/media/videocontrols.css  |   2 +-
 .../winstripe/global/media/videocontrols.css  |   2 +-
 3 files changed, 73 insertions(+), 52 deletions(-)

diff --git a/toolkit/content/widgets/videocontrols.xml b/toolkit/content/widgets/videocontrols.xml
index e5f44ca17bb..829266b8dea 100644
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -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>
diff --git a/toolkit/themes/pinstripe/global/media/videocontrols.css b/toolkit/themes/pinstripe/global/media/videocontrols.css
index 47e1ae6dbdb..70f2bab50c3 100644
--- a/toolkit/themes/pinstripe/global/media/videocontrols.css
+++ b/toolkit/themes/pinstripe/global/media/videocontrols.css
@@ -1,6 +1,6 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#controlsBackground {
+#controlBar {
     height: 24px;
     background-color: #656363;
 }
diff --git a/toolkit/themes/winstripe/global/media/videocontrols.css b/toolkit/themes/winstripe/global/media/videocontrols.css
index 47e1ae6dbdb..70f2bab50c3 100644
--- a/toolkit/themes/winstripe/global/media/videocontrols.css
+++ b/toolkit/themes/winstripe/global/media/videocontrols.css
@@ -1,6 +1,6 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#controlsBackground {
+#controlBar {
     height: 24px;
     background-color: #656363;
 }