Title: [209432] trunk
- Revision
- 209432
- Author
- grao...@webkit.org
- Date
- 2016-12-06 15:48:40 -0800 (Tue, 06 Dec 2016)
Log Message
[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):
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (209431 => 209432)
--- trunk/LayoutTests/ChangeLog 2016-12-06 23:45:02 UTC (rev 209431)
+++ trunk/LayoutTests/ChangeLog 2016-12-06 23:48:40 UTC (rev 209432)
@@ -1,5 +1,17 @@
2016-12-06 Antoine Quint <grao...@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 <grao...@apple.com>
+
[Modern Media Controls] Rendering issues with controls bar when captions are on
https://bugs.webkit.org/show_bug.cgi?id=165390
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline-expected.txt (0 => 209432)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline-expected.txt 2016-12-06 23:48:40 UTC (rev 209432)
@@ -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
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline.html (0 => 209432)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-inline-to-fullscreen-to-pip-to-inline.html 2016-12-06 23:48:40 UTC (rev 209432)
@@ -0,0 +1,73 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src=""
+<body>
+<video src="" 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=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (209431 => 209432)
--- trunk/Source/WebCore/ChangeLog 2016-12-06 23:45:02 UTC (rev 209431)
+++ trunk/Source/WebCore/ChangeLog 2016-12-06 23:48:40 UTC (rev 209432)
@@ -1,5 +1,24 @@
2016-12-06 Antoine Quint <grao...@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 <grao...@apple.com>
+
[Modern Media Controls] Rendering issues with controls bar when captions are on
https://bugs.webkit.org/show_bug.cgi?id=165390
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (209431 => 209432)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-12-06 23:45:02 UTC (rev 209431)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-12-06 23:48:40 UTC (rev 209432)
@@ -35,16 +35,17 @@
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 @@
{
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 @@
_returnMediaLayerToInlineIfNeeded()
{
- window.requestAnimationFrame(() => this.host.setPreparedToReturnVideoLayerToInline(this.media.webkitPresentationMode !== PiPMode));
+ if (this.host)
+ window.requestAnimationFrame(() => this.host.setPreparedToReturnVideoLayerToInline(this.media.webkitPresentationMode !== PiPMode));
}
_controlsClass()
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
