Diff
Modified: trunk/LayoutTests/ChangeLog (209429 => 209430)
--- trunk/LayoutTests/ChangeLog 2016-12-06 23:29:28 UTC (rev 209429)
+++ trunk/LayoutTests/ChangeLog 2016-12-06 23:39:21 UTC (rev 209430)
@@ -1,3 +1,44 @@
+2016-12-06 Antoine Quint <grao...@apple.com>
+
+ [Modern Media Controls] Automatically hide the controls bar when the mouse is idle
+ https://bugs.webkit.org/show_bug.cgi?id=165492
+
+ Reviewed by Dean Jackson.
+
+ We add new tests to check the following scenarios:
+
+ 1. media-controller-auto-hide-mouse-enter-and-mouse-leave.html checks that, during media playback,
+ as the mouse enters the media the controls bar becomes visible, and as the mouse exits the media,
+ the controls bar becomes faded.
+
+ 2. media-controller-auto-hide-mouse-enter-over-controls-bar.html checks that, during media playback,
+ as the mouse enters the media and remains idle over the controls bar, the controls bar remain visible.
+
+ 3. media-controller-auto-hide-mouse-leave-after-play.html checks that when the media goes from paused
+ to playing, having the mouse enter and leave the media does not hide the media controls until the initial
+ auto-hide timer started as the playback status changed has elapsed.
+
+ 4. media-controller-auto-hide-pause.html checks that the controls bar remains visible as the media is paused.
+
+ 5. media-controller-auto-hide-rewind-with-mouse-enter.html checks that the controls bar becomes visible
+ as the mouse enters the media.
+
+ 6. media-controller-auto-hide.html checks that the controls bar becomes faded after the auto-hide timer
+ has elapsed after initial playback.
+
+ * media/modern-media-controls/media-controller/media-controller-auto-hide-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-and-mouse-leave-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-and-mouse-leave.html: Added.
+ * media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar.html: Added.
+ * media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-leave-after-play-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-leave-after-play.html: Added.
+ * media/modern-media-controls/media-controller/media-controller-auto-hide-pause-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-auto-hide-pause.html: Added.
+ * media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter.html: Added.
+ * media/modern-media-controls/media-controller/media-controller-auto-hide.html: Added.
+
2016-12-06 Daniel Bates <daba...@apple.com>
Test fast/selectors/040.html fails on iOS Simulator following <https://trac.webkit.org/changeset/209404>
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-expected.txt (0 => 209430)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-expected.txt 2016-12-06 23:39:21 UTC (rev 209430)
@@ -0,0 +1,18 @@
+Testing the controls bar fades out as expected after the auto-hide delay expires upon first play.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Video started playing, controls bar is visible by default.
+PASS controlsBar.classList.contains('faded') is false
+
+Auto-hide timer has been going for 200ms, controls bar should still be visible.
+PASS controlsBar.classList.contains('faded') is false
+
+Auto-hide timer has elapsed, controls bar should be faded.
+PASS controlsBar.classList.contains('faded') is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-and-mouse-leave-expected.txt (0 => 209430)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-and-mouse-leave-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-and-mouse-leave-expected.txt 2016-12-06 23:39:21 UTC (rev 209430)
@@ -0,0 +1,21 @@
+Testing the controls bar appears when the mouse enters and disappears when the mouse leaves the media.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Video started playing, controls bar is visible by default.
+PASS controlsBar.classList.contains('faded') is false
+
+Auto-hide timer has elapsed, controls bar should be faded.
+PASS controlsBar.classList.contains('faded') is true
+
+Mouse moved over the media, controls bar should be visible.
+PASS controlsBar.classList.contains('faded') is false
+
+Mouse moved out of the media, controls bar should be faded.
+PASS controlsBar.classList.contains('faded') is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-and-mouse-leave.html (0 => 209430)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-and-mouse-leave.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-and-mouse-leave.html 2016-12-06 23:39:21 UTC (rev 209430)
@@ -0,0 +1,47 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src=""
+<body>
+<video src="" style="position: absolute; left: 0; top: 0; width: 320px; height: 240px;" controls autoplay data-auto-hide-delay="250"></video>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the controls bar appears when the mouse enters and disappears when the mouse leaves the media.");
+
+let controlsBar;
+
+document.querySelector("video").addEventListener("play", (event) => {
+ const media = event.target;
+ controlsBar = window.internals.shadowRoot(media).querySelector(".controls-bar");
+
+ debug("Video started playing, controls bar is visible by default.");
+ shouldBeFalse("controlsBar.classList.contains('faded')");
+
+ setTimeout(() => {
+ debug("");
+ debug("Auto-hide timer has elapsed, controls bar should be faded.");
+ shouldBeTrue("controlsBar.classList.contains('faded')");
+
+ eventSender.mouseMoveTo(100, 100);
+ window.requestAnimationFrame(() => {
+ debug("");
+ debug("Mouse moved over the media, controls bar should be visible.");
+ shouldBeFalse("controlsBar.classList.contains('faded')");
+
+ eventSender.mouseMoveTo(400, 400);
+ window.requestAnimationFrame(() => {
+ debug("");
+ debug("Mouse moved out of the media, controls bar should be faded.");
+ shouldBeTrue("controlsBar.classList.contains('faded')");
+
+ debug("");
+ media.remove();
+ finishJSTest();
+ });
+ });
+ }, 300);
+});
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar-expected.txt (0 => 209430)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar-expected.txt 2016-12-06 23:39:21 UTC (rev 209430)
@@ -0,0 +1,21 @@
+Testing the controls bar reappears and remains visible when the mouse enters the media over the controls bar.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Video started playing, controls bar is visible by default.
+PASS controlsBar.classList.contains('faded') is false
+
+Auto-hide timer has elapsed, controls bar should be faded.
+PASS controlsBar.classList.contains('faded') is true
+
+Mouse moved over the media, controls bar should be visible.
+PASS controlsBar.classList.contains('faded') is false
+
+Auto-hide timer would have elapsed, but the controls bar remains visible since the mouse is over the controls bar.
+PASS controlsBar.classList.contains('faded') is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar.html (0 => 209430)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar.html 2016-12-06 23:39:21 UTC (rev 209430)
@@ -0,0 +1,47 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src=""
+<body>
+<video src="" style="position: absolute; left: 0; top: 0; width: 320px; height: 240px;" controls autoplay data-auto-hide-delay="250"></video>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the controls bar reappears and remains visible when the mouse enters the media over the controls bar.");
+
+let controlsBar;
+
+document.querySelector("video").addEventListener("play", (event) => {
+ const media = event.target;
+ controlsBar = window.internals.shadowRoot(media).querySelector(".controls-bar");
+
+ debug("Video started playing, controls bar is visible by default.");
+ shouldBeFalse("controlsBar.classList.contains('faded')");
+
+ setTimeout(() => {
+ debug("");
+ debug("Auto-hide timer has elapsed, controls bar should be faded.");
+ shouldBeTrue("controlsBar.classList.contains('faded')");
+
+ eventSender.mouseMoveTo(100, 220);
+ window.requestAnimationFrame(() => {
+ debug("");
+ debug("Mouse moved over the media, controls bar should be visible.");
+ shouldBeFalse("controlsBar.classList.contains('faded')");
+ });
+
+ setTimeout(() => {
+ debug("");
+ debug("Auto-hide timer would have elapsed, but the controls bar remains visible since the mouse is over the controls bar.");
+ shouldBeFalse("controlsBar.classList.contains('faded')");
+
+ debug("");
+ media.remove();
+ finishJSTest();
+ }, 300);
+
+ }, 300);
+});
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-leave-after-play-expected.txt (0 => 209430)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-leave-after-play-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-leave-after-play-expected.txt 2016-12-06 23:39:21 UTC (rev 209430)
@@ -0,0 +1,26 @@
+Testing the controls bar appears when the mouse enters and disappears when the mouse leaves the media.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Video started playing, controls bar is visible by default.
+PASS controlsBar.classList.contains('faded') is false
+
+Pausing media, this stops the auto-hide timer.
+
+Resuming media playback, this should rewind the auto-hide timer and ensure that entering and leaving the media doesn't hide the controls bar until the auto-hide timer has expired after playing.
+
+Mouse entering the media.
+
+Mouse leaving the media.
+
+The initial auto-hide timer started when we resumed playback should not have expired or be overriden by the mouse entering and leaving the media, the controls should remain visible.
+PASS controlsBar.classList.contains('faded') is false
+
+The initial auto-hide timer started when we resumed playback should now have expired and the controls should be faded.
+PASS controlsBar.classList.contains('faded') is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-leave-after-play.html (0 => 209430)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-leave-after-play.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-leave-after-play.html 2016-12-06 23:39:21 UTC (rev 209430)
@@ -0,0 +1,68 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src=""
+<body>
+<video src="" style="position: absolute; left: 0; top: 0; width: 320px; height: 240px;" controls autoplay data-auto-hide-delay="250"></video>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the controls bar appears when the mouse enters and disappears when the mouse leaves the media.");
+
+let controlsBar;
+let played = false;
+
+document.querySelector("video").addEventListener("play", (event) => {
+ if (played)
+ return;
+
+ played = true;
+
+ const media = event.target;
+ controlsBar = window.internals.shadowRoot(media).querySelector(".controls-bar");
+
+ debug("Video started playing, controls bar is visible by default.");
+ shouldBeFalse("controlsBar.classList.contains('faded')");
+
+ debug("");
+ debug("Pausing media, this stops the auto-hide timer.");
+ media.pause();
+
+ setTimeout(() => {
+ debug("");
+ debug("Resuming media playback, this should rewind the auto-hide timer and ensure that entering and leaving the media doesn't hide the controls bar until the auto-hide timer has expired after playing.");
+ media.play();
+
+ setTimeout(() => {
+ debug("");
+ debug("Mouse entering the media.");
+ eventSender.mouseMoveTo(100, 100);
+
+ setTimeout(() => {
+ debug("");
+ debug("Mouse leaving the media.");
+ eventSender.mouseMoveTo(400, 400);
+
+ window.requestAnimationFrame(() => {
+ debug("");
+ debug("The initial auto-hide timer started when we resumed playback should not have expired or be overriden by the mouse entering and leaving the media, the controls should remain visible.");
+ shouldBeFalse("controlsBar.classList.contains('faded')");
+
+ });
+ }, 50);
+ }, 50);
+
+ setTimeout(() => {
+ debug("");
+ debug("The initial auto-hide timer started when we resumed playback should now have expired and the controls should be faded.");
+ shouldBeTrue("controlsBar.classList.contains('faded')");
+
+ debug("");
+ media.remove();
+ finishJSTest();
+ }, 300);
+ });
+});
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-pause-expected.txt (0 => 209430)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-pause-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-pause-expected.txt 2016-12-06 23:39:21 UTC (rev 209430)
@@ -0,0 +1,15 @@
+Testing the controls bar remains visible when the media is paused.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Video started playing, controls bar is visible by default.
+PASS controlsBar.classList.contains('faded') is false
+
+Auto-hide timer would have elapsed, but media was paused so controls bar should remain visible.
+PASS controlsBar.classList.contains('faded') is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-pause.html (0 => 209430)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-pause.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-pause.html 2016-12-06 23:39:21 UTC (rev 209430)
@@ -0,0 +1,35 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src=""
+<body>
+<video src="" style="position: absolute; left: 0; top: 0; width: 320px; height: 240px;" controls autoplay data-auto-hide-delay="250"></video>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the controls bar remains visible when the media is paused.");
+
+let controlsBar;
+
+document.querySelector("video").addEventListener("play", (event) => {
+ const media = event.target;
+ controlsBar = window.internals.shadowRoot(media).querySelector(".controls-bar");
+
+ debug("Video started playing, controls bar is visible by default.");
+ shouldBeFalse("controlsBar.classList.contains('faded')");
+
+ media.pause();
+
+ setTimeout(() => {
+ debug("");
+ debug("Auto-hide timer would have elapsed, but media was paused so controls bar should remain visible.");
+ shouldBeFalse("controlsBar.classList.contains('faded')");
+
+ debug("");
+ media.remove();
+ finishJSTest();
+ }, 300);
+});
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter-expected.txt (0 => 209430)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter-expected.txt 2016-12-06 23:39:21 UTC (rev 209430)
@@ -0,0 +1,21 @@
+Testing the controls bar reappears when the mouse enters the media.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Video started playing, controls bar is visible by default.
+PASS controlsBar.classList.contains('faded') is false
+
+Auto-hide timer has elapsed, controls bar should be faded.
+PASS controlsBar.classList.contains('faded') is true
+
+Mouse moved over the media, controls bar should be visible.
+PASS controlsBar.classList.contains('faded') is false
+
+Auto-hide timer has elapsed, controls bar should be faded.
+PASS controlsBar.classList.contains('faded') is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter.html (0 => 209430)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter.html 2016-12-06 23:39:21 UTC (rev 209430)
@@ -0,0 +1,47 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src=""
+<body>
+<video src="" style="position: absolute; left: 0; top: 0; width: 320px; height: 240px;" controls autoplay data-auto-hide-delay="250"></video>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the controls bar reappears when the mouse enters the media.");
+
+let controlsBar;
+
+document.querySelector("video").addEventListener("play", (event) => {
+ const media = event.target;
+ controlsBar = window.internals.shadowRoot(media).querySelector(".controls-bar");
+
+ debug("Video started playing, controls bar is visible by default.");
+ shouldBeFalse("controlsBar.classList.contains('faded')");
+
+ setTimeout(() => {
+ debug("");
+ debug("Auto-hide timer has elapsed, controls bar should be faded.");
+ shouldBeTrue("controlsBar.classList.contains('faded')");
+
+ eventSender.mouseMoveTo(100, 100);
+ window.requestAnimationFrame(() => {
+ debug("");
+ debug("Mouse moved over the media, controls bar should be visible.");
+ shouldBeFalse("controlsBar.classList.contains('faded')");
+ });
+
+ setTimeout(() => {
+ debug("");
+ debug("Auto-hide timer has elapsed, controls bar should be faded.");
+ shouldBeTrue("controlsBar.classList.contains('faded')");
+
+ debug("");
+ media.remove();
+ finishJSTest();
+ }, 300);
+
+ }, 300);
+});
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide.html (0 => 209430)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide.html 2016-12-06 23:39:21 UTC (rev 209430)
@@ -0,0 +1,39 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src=""
+<body>
+<video src="" style="position: absolute; left: 0; top: 0; width: 320px; height: 240px;" controls autoplay data-auto-hide-delay="250"></video>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the controls bar fades out as expected after the auto-hide delay expires upon first play.");
+
+let controlsBar;
+
+document.querySelector("video").addEventListener("play", (event) => {
+ const media = event.target;
+ controlsBar = window.internals.shadowRoot(media).querySelector(".controls-bar");
+
+ debug("Video started playing, controls bar is visible by default.");
+ shouldBeFalse("controlsBar.classList.contains('faded')");
+
+ setTimeout(() => {
+ debug("");
+ debug("Auto-hide timer has been going for 200ms, controls bar should still be visible.");
+ shouldBeFalse("controlsBar.classList.contains('faded')");
+ }, 200);
+
+ setTimeout(() => {
+ debug("");
+ debug("Auto-hide timer has elapsed, controls bar should be faded.");
+ shouldBeTrue("controlsBar.classList.contains('faded')");
+
+ debug("");
+ media.remove();
+ finishJSTest();
+ }, 300);
+});
+
+</script>
+<script src=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (209429 => 209430)
--- trunk/Source/WebCore/ChangeLog 2016-12-06 23:29:28 UTC (rev 209429)
+++ trunk/Source/WebCore/ChangeLog 2016-12-06 23:39:21 UTC (rev 209430)
@@ -1,3 +1,49 @@
+2016-12-06 Antoine Quint <grao...@apple.com>
+
+ [Modern Media Controls] Automatically hide the controls bar when the mouse is idle
+ https://bugs.webkit.org/show_bug.cgi?id=165492
+
+ Reviewed by Dean Jackson.
+
+ We now automatically hide the controls bar. When the media is no longer paused, the controls remain
+ visible for 4 seconds, regardless of where the mouse pointer is located. When the user mouses over the
+ media, the controls become visible and automatically hide 4 seconds after the last time the user has
+ moved his mouse over the media. When the user mouses out of the media, the controls automatically hide.
+ When the mouse is over the controls bar, it remains visible. When the media is paused, the controls bar
+ remain visible regardless of the mouse position.
+
+ Tests: media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-and-mouse-leave.html
+ media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar.html
+ media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-leave-after-play.html
+ media/modern-media-controls/media-controller/media-controller-auto-hide-pause.html
+ media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter.html
+ media/modern-media-controls/media-controller/media-controller-auto-hide.html
+
+ * Modules/modern-media-controls/controls/controls-bar.css: Added.
+ (.controls-bar):
+ (.controls-bar.faded):
+ * Modules/modern-media-controls/controls/controls-bar.js:
+ (ControlsBar.prototype.get userInteractionEnabled):
+ (ControlsBar.prototype.set userInteractionEnabled):
+ (ControlsBar.prototype.get fadesWhileIdle):
+ (ControlsBar.prototype.set fadesWhileIdle):
+ (ControlsBar.prototype.get visible):
+ (ControlsBar.prototype.set visible):
+ (ControlsBar.prototype.get faded):
+ (ControlsBar.prototype.set faded):
+ (ControlsBar.prototype.handleEvent):
+ (ControlsBar.prototype.commitProperty):
+ (ControlsBar.prototype._cancelAutoHideTimer):
+ (ControlsBar.prototype._rewindAutoHideTimer):
+ (ControlsBar.prototype._autoHideTimerFired):
+ * Modules/modern-media-controls/controls/media-controls.js:
+ * Modules/modern-media-controls/media/controls-visibility-support.js:
+ (ControlsVisibilitySupport.prototype.get mediaEvents):
+ (ControlsVisibilitySupport.prototype.syncControl):
+ (ControlsVisibilitySupport):
+ * Modules/modern-media-controls/media/media-controller.js:
+ (MediaController.prototype._updateControlsIfNeeded):
+
2016-12-06 Zalan Bujtas <za...@apple.com>
Can not select whole line when using flexbox
Copied: trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.css (from rev 209428, trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js) (0 => 209430)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.css 2016-12-06 23:39:21 UTC (rev 209430)
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.controls-bar {
+ position: absolute;
+ transition: opacity 0.1s linear;
+}
+
+.controls-bar.faded {
+ opacity: 0;
+ pointer-events: none;
+ transition-duration: 0.25s;
+}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js (209429 => 209430)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js 2016-12-06 23:29:28 UTC (rev 209429)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js 2016-12-06 23:39:21 UTC (rev 209430)
@@ -26,11 +26,17 @@
class ControlsBar extends LayoutNode
{
- constructor()
+ constructor(mediaControls)
{
super(`<div class="controls-bar">`);
this._translation = new DOMPoint;
+ this._mediaControls = mediaControls;
+
+ this.fadesWhileIdle = false;
+ this.userInteractionEnabled = true;
+
+ this.autoHideDelay = ControlsBar.DefaultAutoHideDelay;
}
// Public
@@ -49,14 +55,155 @@
this.markDirtyProperty("translation");
}
+ get userInteractionEnabled()
+ {
+ return this._userInteractionEnabled;
+ }
+
+ set userInteractionEnabled(flag)
+ {
+ if (this._userInteractionEnabled === flag)
+ return;
+
+ this._userInteractionEnabled = flag;
+ this.markDirtyProperty("userInteractionEnabled");
+ }
+
+ get fadesWhileIdle()
+ {
+ return this._fadesWhileIdle;
+ }
+
+ set fadesWhileIdle(flag)
+ {
+ if (this._fadesWhileIdle == flag)
+ return;
+
+ this._fadesWhileIdle = flag;
+
+ if (flag) {
+ this._mediaControls.element.addEventListener("mousemove", this);
+ this._mediaControls.element.addEventListener("mouseleave", this);
+ this.element.addEventListener("mouseenter", this);
+ this.element.addEventListener("mouseleave", this);
+ } else {
+ this._mediaControls.element.removeEventListener("mousemove", this);
+ this._mediaControls.element.removeEventListener("mouseleave", this);
+ this.element.removeEventListener("mouseenter", this);
+ this.element.removeEventListener("mouseleave", this);
+ }
+
+ if (flag && !this.faded)
+ this._resetAutoHideTimer(false);
+ else if (!flag)
+ this.faded = false;
+ }
+
+ get visible()
+ {
+ return super.visible;
+ }
+
+ set visible(flag)
+ {
+ // If we just got made visible again, let's fade the controls in.
+ if (flag && !this.visible)
+ this.faded = false;
+ else if (!flag)
+ this._cancelAutoHideTimer();
+
+ super.visible = flag;
+ }
+
+ get faded()
+ {
+ return !!this._faded;
+ }
+
+ set faded(flag)
+ {
+ if (this._faded === flag)
+ return;
+
+ this._faded = flag;
+ if (!flag)
+ this._resetAutoHideTimer(true);
+ else
+ delete this._enforceAutoHideTimer;
+
+ this.markDirtyProperty("faded");
+ }
+
// Protected
+ handleEvent(event)
+ {
+ if (event.currentTarget === this._mediaControls.element) {
+ if (event.type === "mousemove") {
+ this.faded = false;
+ this._resetAutoHideTimer(true);
+ } else if (event.type === "mouseleave" && this._fadesWhileIdle && !this._enforceAutoHideTimer)
+ this.faded = true;
+ } else if (event.currentTarget === this.element) {
+ if (event.type === "mouseenter") {
+ this._disableAutoHiding = true;
+ this._cancelAutoHideTimer();
+ } else if (event.type === "mouseleave") {
+ delete this._disableAutoHiding;
+ this._resetAutoHideTimer(true);
+ } else if (event.type === "focus")
+ this.faded = false;
+ }
+ }
+
commitProperty(propertyName)
{
if (propertyName === "translation")
this.element.style.transform = `translate(${this._translation.x}px, ${this._translation.y}px)`;
+ else if (propertyName === "faded")
+ this.element.classList.toggle("faded", this.faded);
+ else if (propertyName === "userInteractionEnabled")
+ this.element.style.pointerEvents = this._userInteractionEnabled ? "all" : "none";
else
super.commitProperty(propertyName);
}
+ // Private
+
+ _cancelAutoHideTimer()
+ {
+ if (this._enforceAutoHideTimer)
+ return;
+
+ window.clearTimeout(this._autoHideTimer);
+ delete this._autoHideTimer;
+ }
+
+ _resetAutoHideTimer(cancelable)
+ {
+ if (cancelable && this._enforceAutoHideTimer)
+ return;
+
+ this._cancelAutoHideTimer();
+
+ if (cancelable)
+ delete this._enforceAutoHideTimer;
+ else
+ this._enforceAutoHideTimer = true;
+
+ this._autoHideTimer = window.setTimeout(this._autoHideTimerFired.bind(this), this.autoHideDelay);
+ }
+
+ _autoHideTimerFired()
+ {
+ delete this._enforceAutoHideTimer;
+ if (this._disableAutoHiding)
+ return;
+
+ this._cancelAutoHideTimer();
+ this.faded = this._fadesWhileIdle;
+ }
+
}
+
+ControlsBar.DefaultAutoHideDelay = 4000;
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js (209429 => 209430)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2016-12-06 23:29:28 UTC (rev 209429)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2016-12-06 23:39:21 UTC (rev 209430)
@@ -45,7 +45,7 @@
this.statusLabel = new StatusLabel(this)
this.timeControl = new TimeControl(this);
- this.controlsBar = new ControlsBar;
+ this.controlsBar = new ControlsBar(this);
this.airplayPlacard = new AirplayPlacard(this);
this.invalidPlacard = new InvalidPlacard(this);
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js (209429 => 209430)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js 2016-12-06 23:29:28 UTC (rev 209429)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js 2016-12-06 23:39:21 UTC (rev 209430)
@@ -43,17 +43,21 @@
get mediaEvents()
{
- return ["loadedmetadata"];
+ return ["loadedmetadata", "play", "pause"];
}
syncControl()
{
+ const media = this.mediaController.media;
+ const isVideo = media instanceof HTMLVideoElement;
let shouldShowControls = this.mediaController.media.controls;
- if (this.mediaController.media instanceof HTMLVideoElement)
- shouldShowControls = shouldShowControls && this.mediaController.media.readyState > HTMLMediaElement.HAVE_NOTHING;
+ if (isVideo)
+ shouldShowControls = shouldShowControls && media.readyState > HTMLMediaElement.HAVE_NOTHING;
- this.mediaController.controls.startButton.visible = shouldShowControls;
- this.mediaController.controls.controlsBar.visible = shouldShowControls;
+ const controls = this.mediaController.controls;
+ controls.startButton.visible = shouldShowControls;
+ controls.controlsBar.visible = shouldShowControls;
+ controls.controlsBar.fadesWhileIdle = isVideo ? !media.paused : false;
}
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (209429 => 209430)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-12-06 23:29:28 UTC (rev 209429)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-12-06 23:39:21 UTC (rev 209430)
@@ -94,6 +94,9 @@
this.controls = new ControlsClass;
+ if (this.shadowRoot.host && this.shadowRoot.host.dataset.autoHideDelay)
+ this.controls.controlsBar.autoHideDelay = this.shadowRoot.host.dataset.autoHideDelay;
+
if (previousControls) {
this.controls.fadeIn();
this.shadowRoot.replaceChild(this.controls.element, previousControls.element);
