[Modern Media Controls] Media controls use the fullscreen layout after going from...
authorgraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 6 Dec 2016 23:48:40 +0000 (23:48 +0000)
committergraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 6 Dec 2016 23:48:40 +0000 (23:48 +0000)
https://bugs.webkit.org/show_bug.cgi?id=165494

Reviewed by Dean Jackson.

We would only call _updateControlsIfNeeded() when entering or leaving fullscreen, so we going from fullscreen to PiP to
inline would retain fullscreen controls since we would not check for the event that indicates we went back from PiP to
inline. On platforms that support it, we listen to the "webkitpresentationmodechanged" event
to update the controls, and only "webkitfullscreenchange" on others (ie. Yosemite).

Test: media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline.html

* Modules/modern-media-controls/media/media-controller.js:
(MediaController):
(MediaController.prototype.handleEvent):
(MediaController.prototype._returnMediaLayerToInlineIfNeeded):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@209432 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/media/media-controller.js

index 80b0019..caac2d8 100644 (file)
@@ -1,5 +1,17 @@
 2016-12-06  Antoine Quint  <graouts@apple.com>
 
+        [Modern Media Controls] Media controls use the fullscreen layout after going from inline to fullscreen to PiP to inline
+        https://bugs.webkit.org/show_bug.cgi?id=165494
+
+        Reviewed by Dean Jackson.
+
+        Add a new tests that goes from inline to fullscreen to PiP to inline and checks the controls have the right type on the way.
+
+        * media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline.html: Added.
+
+2016-12-06  Antoine Quint  <graouts@apple.com>
+
         [Modern Media Controls] Rendering issues with controls bar when captions are on
         https://bugs.webkit.org/show_bug.cgi?id=165390
 
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline-expected.txt b/LayoutTests/media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline-expected.txt
new file mode 100644 (file)
index 0000000..49dc9b3
--- /dev/null
@@ -0,0 +1,25 @@
+Testing that entering fullscreen, then going into picture-in-picture and then going back to inline presents inline controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Media started playing, we pause it and enter fullscreen by clicking on the matching button.
+PASS shadowRoot.querySelector('.media-controls').classList.contains('inline') is true
+
+Media received a webkitpresentationmodechanged event, media.webkitPresentationMode = fullscreen.
+PASS shadowRoot.querySelector('.media-controls').classList.contains('fullscreen') is true
+
+We enter picture-in-picture by clicking on the matching button.
+
+Media received a webkitpresentationmodechanged event, media.webkitPresentationMode = picture-in-picture.
+
+We exit picture-in-picture.
+
+Media received a webkitpresentationmodechanged event, media.webkitPresentationMode = inline.
+PASS shadowRoot.querySelector('.media-controls').classList.contains('inline') is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline.html b/LayoutTests/media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline.html
new file mode 100644 (file)
index 0000000..ee8ba91
--- /dev/null
@@ -0,0 +1,73 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<video src="../../content/test.mp4" style="position: absolute; top: 0; left: 0; width: 320px; height: 240px;" controls autoplay></video>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing that entering fullscreen, then going into picture-in-picture and then going back to inline presents inline controls.");
+
+if (window.internals)
+    window.internals.settings.setAllowsPictureInPictureMediaPlayback(true);
+
+const media = document.querySelector("video");
+const shadowRoot = window.internals.shadowRoot(media);
+
+media.addEventListener("play", () => {
+    debug("");
+    debug("Media started playing, we pause it and enter fullscreen by clicking on the matching button.");
+    shouldBeTrue("shadowRoot.querySelector('.media-controls').classList.contains('inline')");
+
+    media.pause();
+    window.requestAnimationFrame(() => clickOnElement(shadowRoot.querySelector("button.fullscreen")));
+});
+
+let becameInline = false;
+media.addEventListener("webkitpresentationmodechanged", function() {
+    if (becameInline)
+        return;
+
+    debug("");
+    debug(`Media received a webkitpresentationmodechanged event, media.webkitPresentationMode = ${media.webkitPresentationMode}.`);
+
+    switch (media.webkitPresentationMode) {
+    case "fullscreen":
+        window.requestAnimationFrame(() => {
+            shouldBeTrue("shadowRoot.querySelector('.media-controls').classList.contains('fullscreen')");
+
+            debug("");
+            debug("We enter picture-in-picture by clicking on the matching button.");
+            clickOnElement(shadowRoot.querySelector("button.pip"));
+        });
+        break;
+    case "picture-in-picture":
+        debug("");
+        debug("We exit picture-in-picture.");
+        media.webkitSetPresentationMode("inline");
+        break;
+    case "inline":
+        becameInline = true;
+        window.requestAnimationFrame(() => {
+            shouldBeTrue("shadowRoot.querySelector('.media-controls').classList.contains('inline')");
+
+            debug("");
+            media.remove();
+            finishJSTest();
+        });
+        break;
+    }
+});
+
+function clickOnElement(element)
+{
+    const bounds = element.getBoundingClientRect();
+    eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1);
+    eventSender.mouseDown();
+    eventSender.mouseUp();
+}
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
index 0c7e51d..68f2073 100644 (file)
@@ -1,5 +1,24 @@
 2016-12-06  Antoine Quint  <graouts@apple.com>
 
+        [Modern Media Controls] Media controls use the fullscreen layout after going from inline to fullscreen to PiP to inline
+        https://bugs.webkit.org/show_bug.cgi?id=165494
+
+        Reviewed by Dean Jackson.
+
+        We would only call _updateControlsIfNeeded() when entering or leaving fullscreen, so we going from fullscreen to PiP to
+        inline would retain fullscreen controls since we would not check for the event that indicates we went back from PiP to
+        inline. On platforms that support it, we listen to the "webkitpresentationmodechanged" event
+        to update the controls, and only "webkitfullscreenchange" on others (ie. Yosemite).
+
+        Test: media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline.html
+
+        * Modules/modern-media-controls/media/media-controller.js:
+        (MediaController):
+        (MediaController.prototype.handleEvent):
+        (MediaController.prototype._returnMediaLayerToInlineIfNeeded):
+
+2016-12-06  Antoine Quint  <graouts@apple.com>
+
         [Modern Media Controls] Rendering issues with controls bar when captions are on
         https://bugs.webkit.org/show_bug.cgi?id=165390
 
index d0cfb5c..5220685 100644 (file)
@@ -35,16 +35,17 @@ class MediaController
         this.container = shadowRoot.appendChild(document.createElement("div"));
         this.container.className = "media-controls-container";
 
-        if (host) {
-            media.addEventListener("webkitpresentationmodechanged", this);
+        if (host)
             this.container.appendChild(host.textTrackContainer);
-        }
 
         this._updateControlsIfNeeded();
 
         shadowRoot.addEventListener("resize", this);
 
-        media.addEventListener("webkitfullscreenchange", this);
+        if (media.webkitSupportsPresentationMode)
+            media.addEventListener("webkitpresentationmodechanged", this);
+        else
+            media.addEventListener("webkitfullscreenchange", this);
     }
 
     get layoutTraits()
@@ -71,12 +72,11 @@ class MediaController
     {
         if (event.type === "resize" && event.currentTarget === this.shadowRoot)
             this._updateControlsSize();
-        else if (event.currentTarget !== this.media)
-            return;
-        else if (event.type === "webkitfullscreenchange")
+        else if (event.currentTarget === this.media) {
             this._updateControlsIfNeeded();
-        else if (event.type === "webkitpresentationmodechanged")
-            this._returnMediaLayerToInlineIfNeeded();
+            if (event.type === "webkitpresentationmodechanged")
+                this._returnMediaLayerToInlineIfNeeded();
+        }
     }
 
     // Private
@@ -122,7 +122,8 @@ class MediaController
 
     _returnMediaLayerToInlineIfNeeded()
     {
-        window.requestAnimationFrame(() => this.host.setPreparedToReturnVideoLayerToInline(this.media.webkitPresentationMode !== PiPMode));
+        if (this.host)
+            window.requestAnimationFrame(() => this.host.setPreparedToReturnVideoLayerToInline(this.media.webkitPresentationMode !== PiPMode));
     }
 
     _controlsClass()