<!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>[225173] 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/225173">225173</a></dd>
<dt>Author</dt> <dd>graouts@webkit.org</dd>
<dt>Date</dt> <dd>2017-11-27 08:54:00 -0800 (Mon, 27 Nov 2017)</dd>
</dl>

<h3>Log Message</h3>
<pre>Pressing the space bar while watching a fullscreen video doesn't play or pause
https://bugs.webkit.org/show_bug.cgi?id=180033
<rdar://problem/33610443>

Reviewed by Eric Carlson.

Source/WebCore:

We register a "keydown" event to track when the space bar is pressed, and if the media is playing
in fullscreen, we toggle playback. This does not interfere with full keyboard access since activating
one of the media controls using the keyboard will not let the events we register for be dispatched
this far along the event dispatch phase.

Test: media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback.html

* Modules/modern-media-controls/media/media-controller.js:
(MediaController):
(MediaController.prototype.togglePlayback): Add a catch() statement since calling play() could sometime
lead to some extraneous unhandled promise console logging that pollutes test output.
(MediaController.prototype.handleEvent):

LayoutTests:

Adding a new macOS-only test that checks that pressing the space bar while playing fullscreen
pauses the media and resumes it when pressing the space bar again.

* media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback.html: Added.
* platform/ios-simulator/TestExpectations:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsplatformiossimulatorTestExpectations">trunk/LayoutTests/platform/ios-simulator/TestExpectations</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</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="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerspacebartoggleplaybackexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerspacebartoggleplaybackhtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (225172 => 225173)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog      2017-11-27 16:37:13 UTC (rev 225172)
+++ trunk/LayoutTests/ChangeLog 2017-11-27 16:54:00 UTC (rev 225173)
</span><span class="lines">@@ -1,3 +1,18 @@
</span><ins>+2017-11-27  Antoine Quint  <graouts@apple.com>
+
+        Pressing the space bar while watching a fullscreen video doesn't play or pause
+        https://bugs.webkit.org/show_bug.cgi?id=180033
+        <rdar://problem/33610443>
+
+        Reviewed by Eric Carlson.
+
+        Adding a new macOS-only test that checks that pressing the space bar while playing fullscreen
+        pauses the media and resumes it when pressing the space bar again.
+
+        * media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback.html: Added.
+        * platform/ios-simulator/TestExpectations:
+
</ins><span class="cx"> 2017-11-27  Ms2ger  <Ms2ger@igalia.com>
</span><span class="cx"> 
</span><span class="cx">         [GTK][WPE] Enable http/wpt/resource-timing/rt-initiatorType-media.html.
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerspacebartoggleplaybackexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback-expected.txt (0 => 225173)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback-expected.txt                           (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback-expected.txt      2017-11-27 16:54:00 UTC (rev 225173)
</span><span class="lines">@@ -0,0 +1,26 @@
</span><ins>+Testing media is paused and resumed when pressing the space bar in fullscreen.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Obtained a 'play' event.
+
+Entering fullscreen.
+
+Obtained a 'webkitfullscreenchange' event.
+PASS media.webkitDisplayingFullscreen is true
+PASS media.paused is false
+
+Pressing the space bar.
+
+Obtained a 'pause' event.
+
+Pressing the space bar.
+
+Obtained a 'play' event.
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerspacebartoggleplaybackhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback.html (0 => 225173)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback.html                           (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback.html      2017-11-27 16:54:00 UTC (rev 225173)
</span><span class="lines">@@ -0,0 +1,77 @@
</span><ins>+<!DOCTYPE html>
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<body>
+<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls autoplay></video>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing media is paused and resumed when pressing the space bar in fullscreen.");
+
+const media = document.querySelector("video");
+const button = document.body.appendChild(document.createElement("button"));
+button.textContent = "Enter Fullscreen";
+
+media.addEventListener("webkitfullscreenchange", () => {
+    debug("");
+    debug("Obtained a 'webkitfullscreenchange' event.");
+    shouldBeTrue("media.webkitDisplayingFullscreen");
+    shouldBeFalse("media.paused");
+    
+    // Test pressing the space bar while the media is playing.
+    pressSpace();
+});
+
+let playCount = 0;
+media.addEventListener("play", () => {
+    playCount++;
+
+    debug("");
+    debug("Obtained a 'play' event.");
+
+    // Starting point.
+    if (playCount == 1)
+        enterFullscreen();
+    else {
+        debug("");
+        button.remove();
+        media.remove();
+        finishJSTest();
+    }
+});
+
+media.addEventListener("pause", () => {
+    debug("");
+    debug("Obtained a 'pause' event.");
+
+    // Test pressing the space bar while the media is paused.
+    pressSpace();
+});
+
+
+function enterFullscreen() {
+    debug("");
+    debug("Entering fullscreen.");
+    button.addEventListener("click", () => {
+        try {
+            media.webkitEnterFullscreen();
+        } catch(e) {
+            debug("Toggling fullscreen failed");
+            finishJSTest();
+        }
+    });
+
+    pressOnElement(button);
+}
+
+function pressSpace()
+{
+    debug("");
+    debug("Pressing the space bar.");
+    eventSender.keyDown(" ");
+}
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformiossimulatorTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (225172 => 225173)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/ios-simulator/TestExpectations        2017-11-27 16:37:13 UTC (rev 225172)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations   2017-11-27 16:54:00 UTC (rev 225173)
</span><span class="lines">@@ -127,6 +127,7 @@
</span><span class="cx"> media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause-fullscreen.html [ Skip ]
</span><span class="cx"> media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause.html [ Skip ]
</span><span class="cx"> media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback.html [ Skip ]
</span><ins>+media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback.html [ Skip ]
</ins><span class="cx"> media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html [ Skip ]
</span><span class="cx"> media/modern-media-controls/media-documents/media-document-video-mac-sizing.html [ Skip ]
</span><span class="cx"> media/modern-media-controls/playback-support/playback-support-button-click.html [ Skip ]
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (225172 => 225173)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog   2017-11-27 16:37:13 UTC (rev 225172)
+++ trunk/Source/WebCore/ChangeLog      2017-11-27 16:54:00 UTC (rev 225173)
</span><span class="lines">@@ -1,3 +1,24 @@
</span><ins>+2017-11-27  Antoine Quint  <graouts@apple.com>
+
+        Pressing the space bar while watching a fullscreen video doesn't play or pause
+        https://bugs.webkit.org/show_bug.cgi?id=180033
+        <rdar://problem/33610443>
+
+        Reviewed by Eric Carlson.
+
+        We register a "keydown" event to track when the space bar is pressed, and if the media is playing
+        in fullscreen, we toggle playback. This does not interfere with full keyboard access since activating
+        one of the media controls using the keyboard will not let the events we register for be dispatched
+        this far along the event dispatch phase.
+
+        Test: media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback.html
+
+        * Modules/modern-media-controls/media/media-controller.js:
+        (MediaController):
+        (MediaController.prototype.togglePlayback): Add a catch() statement since calling play() could sometime
+        lead to some extraneous unhandled promise console logging that pollutes test output.
+        (MediaController.prototype.handleEvent):
+
</ins><span class="cx"> 2017-11-27  Simon Fraser  <simon.fraser@apple.com>
</span><span class="cx"> 
</span><span class="cx">         Optimize FEMorphology
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (225172 => 225173)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js     2017-11-27 16:37:13 UTC (rev 225172)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js        2017-11-27 16:54:00 UTC (rev 225173)
</span><span class="lines">@@ -57,6 +57,8 @@
</span><span class="cx">         media.videoTracks.addEventListener("removetrack", this);
</span><span class="cx"> 
</span><span class="cx">         media.addEventListener(this.fullscreenChangeEventType, this);
</span><ins>+
+        window.addEventListener("keydown", this);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="lines">@@ -100,7 +102,7 @@
</span><span class="cx">     togglePlayback()
</span><span class="cx">     {
</span><span class="cx">         if (this.media.paused)
</span><del>-            this.media.play();
</del><ins>+            this.media.play().catch(e => {});
</ins><span class="cx">         else
</span><span class="cx">             this.media.pause();
</span><span class="cx">     }
</span><span class="lines">@@ -158,6 +160,9 @@
</span><span class="cx">             this._updateControlsIfNeeded();
</span><span class="cx">             if (event.type === "webkitpresentationmodechanged")
</span><span class="cx">                 this._returnMediaLayerToInlineIfNeeded();
</span><ins>+        } else if (event.type === "keydown" && this.isFullscreen && event.key === " ") {
+            this.togglePlayback();
+            event.preventDefault();
</ins><span class="cx">         }
</span><span class="cx">     }
</span><span class="cx"> 
</span></span></pre>
</div>
</div>

</body>
</html>