Title: [209228] trunk
Revision
209228
Author
grao...@webkit.org
Date
2016-12-01 18:11:05 -0800 (Thu, 01 Dec 2016)

Log Message

[Modern Media Controls] Fade controls in when entering and exiting fullscreen
https://bugs.webkit.org/show_bug.cgi?id=165287

Reviewed by Dean Jackson.

Fade controls in when we enter and leave fullscreen.

Test: media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html

* Modules/modern-media-controls/controls/media-controls.css:
(.media-controls.fade-in):
(@keyframes fade-in):
(to):
* Modules/modern-media-controls/controls/media-controls.js:
(MediaControls.prototype.presentInElement):
* Modules/modern-media-controls/media/fullscreen-support.js:
(FullscreenSupport.prototype.buttonWasClicked):
* Modules/modern-media-controls/media/media-controller.js:
(MediaController.prototype._updateControlsIfNeeded):

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (209227 => 209228)


--- trunk/LayoutTests/ChangeLog	2016-12-02 02:07:35 UTC (rev 209227)
+++ trunk/LayoutTests/ChangeLog	2016-12-02 02:11:05 UTC (rev 209228)
@@ -1,5 +1,19 @@
 2016-12-01  Antoine Quint  <grao...@apple.com>
 
+        [Modern Media Controls] Fade controls in when entering and exiting fullscreen
+        https://bugs.webkit.org/show_bug.cgi?id=165287
+
+        Reviewed by Dean Jackson.
+
+        Add a new Mac-specific test that checks that we fade controls in when entering fullscreen.
+
+        * media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html: Added.
+        * platform/ios-simulator/TestExpectations:
+        * platform/mac/TestExpectations:
+
+2016-12-01  Antoine Quint  <grao...@apple.com>
+
         [Modern Media Controls] Show and populate the tracks panel
         https://bugs.webkit.org/show_bug.cgi?id=165284
 

Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen-expected.txt (0 => 209228)


--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen-expected.txt	2016-12-02 02:11:05 UTC (rev 209228)
@@ -0,0 +1,17 @@
+Fading in the controls when entering fullscreen.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+We should not fade the controls in when showing them inline the first time
+PASS shadowRoot.lastChild.classList.contains('fade-in') is false
+Clicking on the fullscreen button
+Obtained a webkitfullscreenchange event
+PASS media.webkitDisplayingFullscreen is true
+We should fade the controls in when showing them fullscreen
+PASS shadowRoot.lastChild.classList.contains('fade-in') is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+

Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html (0 => 209228)


--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html	                        (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html	2016-12-02 02:11:05 UTC (rev 209228)
@@ -0,0 +1,46 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src=""
+<body>
+<video src="" style="width: 640px; height: 480px;" controls autoplay></video>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Fading in the controls when entering fullscreen.");
+
+const media = document.querySelector("video");
+const shadowRoot = window.internals.shadowRoot(media);
+
+media.addEventListener("play", () => {
+    media.pause();
+
+    window.requestAnimationFrame(() => {
+        debug("We should not fade the controls in when showing them inline the first time");
+        shouldBeFalse("shadowRoot.lastChild.classList.contains('fade-in')");
+        
+        clickOnFullscreenButton();
+        media.addEventListener("webkitfullscreenchange", () => {
+            debug("Obtained a webkitfullscreenchange event");
+            shouldBeTrue("media.webkitDisplayingFullscreen");
+            debug("We should fade the controls in when showing them fullscreen");
+            shouldBeTrue("shadowRoot.lastChild.classList.contains('fade-in')");
+
+            debug("");
+            media.remove();
+            finishJSTest();
+        });
+    });
+});
+
+function clickOnFullscreenButton()
+{
+    debug("Clicking on the fullscreen button");
+    const bounds = shadowRoot.lastChild.querySelector("button.fullscreen").getBoundingClientRect();
+    eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1);
+    eventSender.mouseDown();
+    eventSender.mouseUp();
+}
+
+</script>
+<script src=""
+</body>

Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (209227 => 209228)


--- trunk/LayoutTests/platform/ios-simulator/TestExpectations	2016-12-02 02:07:35 UTC (rev 209227)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations	2016-12-02 02:11:05 UTC (rev 209228)
@@ -2751,6 +2751,7 @@
 # Mac-specific tests for fullscreen.
 media/modern-media-controls/media-controller/media-controller-fullscreen-change.html [ Skip ]
 media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html  [ Skip ]
+media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html [ Skip ]
 
 # These tests are all Mac-specific, we never show the tracks menu on iOS
 media/modern-media-controls/tracks-panel

Modified: trunk/LayoutTests/platform/mac/TestExpectations (209227 => 209228)


--- trunk/LayoutTests/platform/mac/TestExpectations	2016-12-02 02:07:35 UTC (rev 209227)
+++ trunk/LayoutTests/platform/mac/TestExpectations	2016-12-02 02:11:05 UTC (rev 209228)
@@ -1455,6 +1455,7 @@
 [ Yosemite ] media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-keyboard.html [ Skip ]
 [ Yosemite ] media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html [ Skip ]
 [ Yosemite ] media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html [ Skip ]
+[ Yosemite ] media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html
 
 webkit.org/b/164616 http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html [ Pass Failure ]
 webkit.org/b/164323 media/modern-media-controls/airplay-support/airplay-support.html [ Pass Failure ]

Modified: trunk/Source/WebCore/ChangeLog (209227 => 209228)


--- trunk/Source/WebCore/ChangeLog	2016-12-02 02:07:35 UTC (rev 209227)
+++ trunk/Source/WebCore/ChangeLog	2016-12-02 02:11:05 UTC (rev 209228)
@@ -1,5 +1,27 @@
 2016-12-01  Antoine Quint  <grao...@apple.com>
 
+        [Modern Media Controls] Fade controls in when entering and exiting fullscreen
+        https://bugs.webkit.org/show_bug.cgi?id=165287
+
+        Reviewed by Dean Jackson.
+
+        Fade controls in when we enter and leave fullscreen.
+
+        Test: media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html
+
+        * Modules/modern-media-controls/controls/media-controls.css:
+        (.media-controls.fade-in):
+        (@keyframes fade-in):
+        (to):
+        * Modules/modern-media-controls/controls/media-controls.js:
+        (MediaControls.prototype.presentInElement):
+        * Modules/modern-media-controls/media/fullscreen-support.js:
+        (FullscreenSupport.prototype.buttonWasClicked):
+        * Modules/modern-media-controls/media/media-controller.js:
+        (MediaController.prototype._updateControlsIfNeeded):
+
+2016-12-01  Antoine Quint  <grao...@apple.com>
+
         [Modern Media Controls] Show and populate the tracks panel
         https://bugs.webkit.org/show_bug.cgi?id=165284
 

Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css (209227 => 209228)


--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css	2016-12-02 02:07:35 UTC (rev 209227)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css	2016-12-02 02:11:05 UTC (rev 209228)
@@ -39,3 +39,13 @@
 .media-controls > .controls-bar {
     position: absolute;
 }
+
+.media-controls.fade-in {
+    animation-name: fade-in;
+    animation-duration: 350ms;
+}
+
+@keyframes fade-in {
+    from { opacity: 0 }
+    to   { opacity: 1 }
+}

Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js (209227 => 209228)


--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js	2016-12-02 02:07:35 UTC (rev 209227)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js	2016-12-02 02:11:05 UTC (rev 209228)
@@ -101,6 +101,13 @@
         this._invalidateChildren();
     }
 
+    presentInElement(parentElement, animated)
+    {
+        if (animated)
+            this.element.classList.add("fade-in");
+        parentElement.appendChild(this.element);
+    }
+
     // Private
 
     _invalidateChildren()

Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/fullscreen-support.js (209227 => 209228)


--- trunk/Source/WebCore/Modules/modern-media-controls/media/fullscreen-support.js	2016-12-02 02:07:35 UTC (rev 209227)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/fullscreen-support.js	2016-12-02 02:11:05 UTC (rev 209228)
@@ -60,6 +60,8 @@
 
     buttonWasClicked(control)
     {
+        this.mediaController.controls.element.remove();
+
         const media = this.mediaController.media;
         if (media.webkitDisplayingFullscreen)
             media.webkitExitFullscreen();

Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (209227 => 209228)


--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js	2016-12-02 02:07:35 UTC (rev 209227)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js	2016-12-02 02:11:05 UTC (rev 209228)
@@ -100,12 +100,11 @@
 
         this.controls = new ControlsClass;
 
-        if (previousControls) {
-            this.shadowRoot.replaceChild(this.controls.element, previousControls.element);
+        if (previousControls)
             this.controls.usesLTRUserInterfaceLayoutDirection = previousControls.usesLTRUserInterfaceLayoutDirection;
-        } else
-            this.shadowRoot.appendChild(this.controls.element);        
 
+        this.controls.presentInElement(this.shadowRoot, !!previousControls);
+
         this._updateControlsSize();
 
         this._supportingObjects = [AirplaySupport, ControlsVisibilitySupport, ElapsedTimeSupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, RemainingTimeSupport, ScrubbingSupport, SkipBackSupport, StartSupport, StatusSupport, TracksSupport, VolumeSupport].map(SupportClass => {
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to