<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[209430] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/209430">209430</a></dd>
<dt>Author</dt> <dd>graouts@webkit.org</dd>
<dt>Date</dt> <dd>2016-12-06 15:39:21 -0800 (Tue, 06 Dec 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[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):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolscontrolsbarjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediacontrolsvisibilitysupportjs">trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs">trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohideexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidemouseenterandmouseleaveexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-and-mouse-leave-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidemouseenterandmouseleavehtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-and-mouse-leave.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidemouseenterovercontrolsbarexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidemouseenterovercontrolsbarhtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidemouseleaveafterplayexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-leave-after-play-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidemouseleaveafterplayhtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-leave-after-play.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidepauseexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-pause-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidepausehtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-pause.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohiderewindwithmouseenterexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohiderewindwithmouseenterhtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidehtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide.html</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolscontrolsbarcss">trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (209429 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-12-06 23:29:28 UTC (rev 209429)
+++ trunk/LayoutTests/ChangeLog 2016-12-06 23:39:21 UTC (rev 209430)
</span><span class="lines">@@ -1,3 +1,44 @@
</span><ins>+2016-12-06 Antoine Quint <graouts@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.
+
</ins><span class="cx"> 2016-12-06 Daniel Bates <dabates@apple.com>
</span><span class="cx">
</span><span class="cx"> Test fast/selectors/040.html fails on iOS Simulator following <https://trac.webkit.org/changeset/209404>
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohideexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-expected.txt (0 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,18 @@
</span><ins>+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
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidemouseenterandmouseleaveexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-and-mouse-leave-expected.txt (0 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,21 @@
</span><ins>+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
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidemouseenterandmouseleavehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-and-mouse-leave.html (0 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,47 @@
</span><ins>+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<video src="../../content/test.mp4" 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="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidemouseenterovercontrolsbarexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar-expected.txt (0 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,21 @@
</span><ins>+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
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidemouseenterovercontrolsbarhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar.html (0 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,47 @@
</span><ins>+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<video src="../../content/test.mp4" 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="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidemouseleaveafterplayexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-leave-after-play-expected.txt (0 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,26 @@
</span><ins>+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
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidemouseleaveafterplayhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-leave-after-play.html (0 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,68 @@
</span><ins>+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<video src="../../content/test.mp4" 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="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidepauseexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-pause-expected.txt (0 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,15 @@
</span><ins>+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
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidepausehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-pause.html (0 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<video src="../../content/test.mp4" 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="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohiderewindwithmouseenterexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter-expected.txt (0 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,21 @@
</span><ins>+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
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohiderewindwithmouseenterhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter.html (0 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,47 @@
</span><ins>+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<video src="../../content/test.mp4" 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="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerautohidehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-auto-hide.html (0 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,39 @@
</span><ins>+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<video src="../../content/test.mp4" 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="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (209429 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,49 @@
</span><ins>+2016-12-06 Antoine Quint <graouts@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):
+
</ins><span class="cx"> 2016-12-06 Zalan Bujtas <zalan@apple.com>
</span><span class="cx">
</span><span class="cx"> Can not select whole line when using flexbox
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolscontrolsbarcssfromrev209428trunkSourceWebCoreModulesmodernmediacontrolscontrolscontrolsbarjs"></a>
<div class="copfile"><h4>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)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+/*
+ * 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;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolscontrolsbarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js (209429 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -26,11 +26,17 @@
</span><span class="cx"> class ControlsBar extends LayoutNode
</span><span class="cx"> {
</span><span class="cx">
</span><del>- constructor()
</del><ins>+ constructor(mediaControls)
</ins><span class="cx"> {
</span><span class="cx"> super(`<div class="controls-bar">`);
</span><span class="cx">
</span><span class="cx"> this._translation = new DOMPoint;
</span><ins>+ this._mediaControls = mediaControls;
+
+ this.fadesWhileIdle = false;
+ this.userInteractionEnabled = true;
+
+ this.autoHideDelay = ControlsBar.DefaultAutoHideDelay;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -49,14 +55,155 @@
</span><span class="cx"> this.markDirtyProperty("translation");
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ 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");
+ }
+
</ins><span class="cx"> // Protected
</span><span class="cx">
</span><ins>+ 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;
+ }
+ }
+
</ins><span class="cx"> commitProperty(propertyName)
</span><span class="cx"> {
</span><span class="cx"> if (propertyName === "translation")
</span><span class="cx"> this.element.style.transform = `translate(${this._translation.x}px, ${this._translation.y}px)`;
</span><ins>+ else if (propertyName === "faded")
+ this.element.classList.toggle("faded", this.faded);
+ else if (propertyName === "userInteractionEnabled")
+ this.element.style.pointerEvents = this._userInteractionEnabled ? "all" : "none";
</ins><span class="cx"> else
</span><span class="cx"> super.commitProperty(propertyName);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ // 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;
+ }
+
</ins><span class="cx"> }
</span><ins>+
+ControlsBar.DefaultAutoHideDelay = 4000;
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediacontrolsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js (209429 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -45,7 +45,7 @@
</span><span class="cx"> this.statusLabel = new StatusLabel(this)
</span><span class="cx"> this.timeControl = new TimeControl(this);
</span><span class="cx">
</span><del>- this.controlsBar = new ControlsBar;
</del><ins>+ this.controlsBar = new ControlsBar(this);
</ins><span class="cx">
</span><span class="cx"> this.airplayPlacard = new AirplayPlacard(this);
</span><span class="cx"> this.invalidPlacard = new InvalidPlacard(this);
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediacontrolsvisibilitysupportjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js (209429 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -43,17 +43,21 @@
</span><span class="cx">
</span><span class="cx"> get mediaEvents()
</span><span class="cx"> {
</span><del>- return ["loadedmetadata"];
</del><ins>+ return ["loadedmetadata", "play", "pause"];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> syncControl()
</span><span class="cx"> {
</span><ins>+ const media = this.mediaController.media;
+ const isVideo = media instanceof HTMLVideoElement;
</ins><span class="cx"> let shouldShowControls = this.mediaController.media.controls;
</span><del>- if (this.mediaController.media instanceof HTMLVideoElement)
- shouldShowControls = shouldShowControls && this.mediaController.media.readyState > HTMLMediaElement.HAVE_NOTHING;
</del><ins>+ if (isVideo)
+ shouldShowControls = shouldShowControls && media.readyState > HTMLMediaElement.HAVE_NOTHING;
</ins><span class="cx">
</span><del>- this.mediaController.controls.startButton.visible = shouldShowControls;
- this.mediaController.controls.controlsBar.visible = shouldShowControls;
</del><ins>+ const controls = this.mediaController.controls;
+ controls.startButton.visible = shouldShowControls;
+ controls.controlsBar.visible = shouldShowControls;
+ controls.controlsBar.fadesWhileIdle = isVideo ? !media.paused : false;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (209429 => 209430)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -94,6 +94,9 @@
</span><span class="cx">
</span><span class="cx"> this.controls = new ControlsClass;
</span><span class="cx">
</span><ins>+ if (this.shadowRoot.host && this.shadowRoot.host.dataset.autoHideDelay)
+ this.controls.controlsBar.autoHideDelay = this.shadowRoot.host.dataset.autoHideDelay;
+
</ins><span class="cx"> if (previousControls) {
</span><span class="cx"> this.controls.fadeIn();
</span><span class="cx"> this.shadowRoot.replaceChild(this.controls.element, previousControls.element);
</span></span></pre>
</div>
</div>
</body>
</html>