[Modern Media Controls] Toggle playback when clicking on the video on macOS
authorgraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 17 Feb 2017 21:40:37 +0000 (21:40 +0000)
committergraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 17 Feb 2017 21:40:37 +0000 (21:40 +0000)
https://bugs.webkit.org/show_bug.cgi?id=168515
<rdar://problem/30577441>

Reviewed by Dean Jackson.

Source/WebCore:

Listen to click events on the macOS media controls. Detect any clicks that were on the
background instead of the controls widgets themselves, and tell the delegate (MediaController)
about them.

Tests: media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause.html
       media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback.html
       media/modern-media-controls/media-controller/media-controller-click-on-video-controls-should-not-pause.html

* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
(MacOSFullscreenMediaControls.prototype._handleMousedown):
* Modules/modern-media-controls/controls/macos-inline-media-controls.js:
(MacOSInlineMediaControls.prototype.handleEvent):
* Modules/modern-media-controls/controls/macos-media-controls.js:
(MacOSMediaControls.prototype.handleEvent):
(MacOSMediaControls):
* Modules/modern-media-controls/media/media-controller.js:
(MediaController.prototype.togglePlayback):
(MediaController.prototype.macOSControlsBackgroundWasClicked):
(MediaController.prototype._updateControlsIfNeeded):
* Modules/modern-media-controls/media/playback-support.js:
(PlaybackSupport.prototype.buttonWasPressed):

LayoutTests:

* media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause.html: Added.
* media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback.html: Added.
* media/modern-media-controls/media-controller/media-controller-click-on-video-controls-should-not-pause-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-click-on-video-controls-should-not-pause.html: Added.
* media/modern-media-controls/media-documents/click-on-video-should-not-pause-expected.txt:
* media/modern-media-controls/media-documents/click-on-video-should-not-pause.html:
* platform/ios-simulator/TestExpectations:

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

16 files changed:
LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-controls-should-not-pause-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-controls-should-not-pause.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/click-on-video-should-not-pause-expected.txt
LayoutTests/media/modern-media-controls/media-documents/click-on-video-should-not-pause.html
LayoutTests/platform/ios-simulator/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js
Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js
Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js
Source/WebCore/Modules/modern-media-controls/media/media-controller.js
Source/WebCore/Modules/modern-media-controls/media/playback-support.js

index 86622a6..035645a 100644 (file)
@@ -1,5 +1,23 @@
 2017-02-17  Antoine Quint  <graouts@apple.com>
 
+        [Modern Media Controls] Toggle playback when clicking on the video on macOS
+        https://bugs.webkit.org/show_bug.cgi?id=168515
+        <rdar://problem/30577441>
+
+        Reviewed by Dean Jackson.
+
+        * media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause.html: Added.
+        * media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback.html: Added.
+        * media/modern-media-controls/media-controller/media-controller-click-on-video-controls-should-not-pause-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-click-on-video-controls-should-not-pause.html: Added.
+        * media/modern-media-controls/media-documents/click-on-video-should-not-pause-expected.txt:
+        * media/modern-media-controls/media-documents/click-on-video-should-not-pause.html:
+        * platform/ios-simulator/TestExpectations:
+
+2017-02-17  Antoine Quint  <graouts@apple.com>
+
         REGRESSION: Subtitles menu in media controls allows multiple items to be selected
         https://bugs.webkit.org/show_bug.cgi?id=168168
         <rdar://problem/30488605>
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause-expected.txt b/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause-expected.txt
new file mode 100644 (file)
index 0000000..3634181
--- /dev/null
@@ -0,0 +1,14 @@
+Testing that clicking on a video's background pauses it.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS media.paused is false
+
+Clicking on video background
+PASS media.paused is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause.html b/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause.html
new file mode 100644 (file)
index 0000000..3380af0
--- /dev/null
@@ -0,0 +1,32 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<video src="../../content/test.mp4" style="position: absolute; top: 0; left: 0; width: 800px;" controls autoplay></video>
+<script type="text/javascript">
+
+description("Testing that clicking on a video's background pauses it.");
+
+window.jsTestIsAsync = true;
+
+const media = document.querySelector("video");
+
+media.addEventListener("play", () => {
+    shouldBeFalse("media.paused");
+    
+    const bounds = media.getBoundingClientRect();
+    debug("");
+    debug("Clicking on video background");
+    eventSender.mouseMoveTo(bounds.left + 5, bounds.top + 5);
+    eventSender.mouseDown();
+    eventSender.mouseUp();
+
+    shouldBeTrue("media.paused");
+
+    debug("");
+    media.remove();
+    finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback-expected.txt b/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback-expected.txt
new file mode 100644 (file)
index 0000000..579ce4e
--- /dev/null
@@ -0,0 +1,16 @@
+Testing that clicking on a paused video's background to dimiss the tracks panel does not resume it.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS media.paused is true
+
+Clicking on tracks button to show tracks panel
+
+Clicking on video background
+PASS media.paused is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback.html b/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback.html
new file mode 100644 (file)
index 0000000..6465eeb
--- /dev/null
@@ -0,0 +1,55 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<video src="../../content/CC+Subtitles.mov" style="width: 640px; height: 360px;" controls autoplay></video>
+<script type="text/javascript">
+
+description("Testing that clicking on a paused video's background to dimiss the tracks panel does not resume it.");
+
+window.jsTestIsAsync = true;
+
+const media = document.querySelector("video");
+const shadowRoot = window.internals.shadowRoot(media);
+
+media.addEventListener("play", () => {
+    media.pause();
+    shouldBeTrue("media.paused");
+
+    window.requestAnimationFrame(() => {
+        clickOnTracksButton();
+        window.requestAnimationFrame(() => {
+            clickOnVideoBackground();
+            shouldBeTrue("media.paused");
+
+            debug("");
+            media.remove();
+            finishJSTest();
+        });
+    });
+});
+
+function clickOnTracksButton()
+{
+    debug("");
+    debug("Clicking on tracks button to show tracks panel");
+    clickOnElement(shadowRoot.lastChild.querySelector("button.tracks"), 1, 1);
+}
+
+function clickOnVideoBackground()
+{
+    debug("");
+    debug("Clicking on video background");
+    clickOnElement(media, 5, 5);
+}
+
+function clickOnElement(element, relativeX, relativeY)
+{
+    const bounds = element.getBoundingClientRect();
+    eventSender.mouseMoveTo(bounds.left + relativeX, bounds.top + relativeY);
+    eventSender.mouseDown();
+    eventSender.mouseUp();
+}
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-controls-should-not-pause-expected.txt b/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-controls-should-not-pause-expected.txt
new file mode 100644 (file)
index 0000000..06886e9
--- /dev/null
@@ -0,0 +1,14 @@
+Testing that clicking on a video's controls does not pause it.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS media.paused is false
+
+Clicking on video controls
+PASS media.paused is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-controls-should-not-pause.html b/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-on-video-controls-should-not-pause.html
new file mode 100644 (file)
index 0000000..e55177d
--- /dev/null
@@ -0,0 +1,32 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<video src="../../content/test.mp4" style="position: absolute; top: 0; left: 0; width: 800px;" controls autoplay></video>
+<script type="text/javascript">
+
+description("Testing that clicking on a video's controls does not pause it.");
+
+window.jsTestIsAsync = true;
+
+const media = document.querySelector("video");
+
+media.addEventListener("play", () => {
+    shouldBeFalse("media.paused");
+    
+    const bounds = media.getBoundingClientRect();
+    debug("");
+    debug("Clicking on video controls");
+    eventSender.mouseMoveTo(bounds.left + 5, bounds.bottom - 5);
+    eventSender.mouseDown();
+    eventSender.mouseUp();
+
+    shouldBeFalse("media.paused");
+
+    debug("");
+    media.remove();
+    finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
index d43234f..475e719 100644 (file)
@@ -5,7 +5,7 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 PASS video.paused is false
 
-Clicking on video
+Clicking on video controls
 PASS video.paused is false
 
 PASS successfullyParsed is true
index a077005..983b4d2 100644 (file)
@@ -29,8 +29,8 @@ let video;
         
         const bounds = video.getBoundingClientRect();
         debug("");
-        debug("Clicking on video");
-        window.eventSender.mouseMoveTo(bounds.left + 10, bounds.top + 10);
+        debug("Clicking on video controls");
+        window.eventSender.mouseMoveTo(bounds.left + 5, bounds.bottom - 5);
         window.eventSender.mouseDown();
         window.eventSender.mouseUp();
 
index 1068c22..1487682 100644 (file)
@@ -2805,6 +2805,10 @@ media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-en
 media/modern-media-controls/media-controller/media-controller-auto-hide-rewind-with-mouse-enter.html [ Skip ]
 media/modern-media-controls/scrubber-support/scrubber-support-click.html [ Skip ]
 media/modern-media-controls/media-documents/click-on-video-should-not-pause.html [ Skip ]
+media/modern-media-controls/media-documents/click-on-video-should-not-pause.html [ Skip ]
+media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause.html [ Skip ]
+media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback.html [ Skip ]
+media/modern-media-controls/media-controller/media-controller-click-on-video-controls-should-not-pause.html [ Skip ]
 
 # Tests designed for macOS that have iOS equivalents in "ipad" directories
 media/modern-media-controls/fullscreen-support/fullscreen-support-click.html [ Skip ]
index f8e7b9b..23c8dc6 100644 (file)
@@ -1,3 +1,33 @@
+2017-02-17  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Toggle playback when clicking on the video on macOS
+        https://bugs.webkit.org/show_bug.cgi?id=168515
+        <rdar://problem/30577441>
+
+        Reviewed by Dean Jackson.
+
+        Listen to click events on the macOS media controls. Detect any clicks that were on the
+        background instead of the controls widgets themselves, and tell the delegate (MediaController)
+        about them.
+
+        Tests: media/modern-media-controls/media-controller/media-controller-click-on-video-background-should-pause.html
+               media/modern-media-controls/media-controller/media-controller-click-on-video-background-to-dismiss-tracks-panel-should-not-toggle-playback.html
+               media/modern-media-controls/media-controller/media-controller-click-on-video-controls-should-not-pause.html
+
+        * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
+        (MacOSFullscreenMediaControls.prototype._handleMousedown):
+        * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
+        (MacOSInlineMediaControls.prototype.handleEvent):
+        * Modules/modern-media-controls/controls/macos-media-controls.js:
+        (MacOSMediaControls.prototype.handleEvent):
+        (MacOSMediaControls):
+        * Modules/modern-media-controls/media/media-controller.js:
+        (MediaController.prototype.togglePlayback):
+        (MediaController.prototype.macOSControlsBackgroundWasClicked):
+        (MediaController.prototype._updateControlsIfNeeded):
+        * Modules/modern-media-controls/media/playback-support.js:
+        (PlaybackSupport.prototype.buttonWasPressed):
+
 2017-02-17  Jer Noble  <jer.noble@apple.com>
 
         Refactoring: Remove AudioSourceObserverObjC and AudioCaptureSourceProviderObjC
index 1d6f31c..2bebd17 100644 (file)
@@ -128,6 +128,8 @@ class MacOSFullscreenMediaControls extends MacOSMediaControls
 
     _handleMousedown(event)
     {
+        super.handleEvent(event);
+
         if (event.target !== this.controlsBar.element)
             return;
 
index 9625c5a..29e6970 100644 (file)
@@ -141,6 +141,7 @@ class MacOSInlineMediaControls extends MacOSMediaControls
 
     handleEvent(event)
     {
+        super.handleEvent(event);
         this._volumeSliderContainer.visible = event.type === "mouseenter" || event.relatedTarget === this._volumeSliderContainer.element;
     }
 
index 6b24ed9..85cb875 100644 (file)
@@ -36,6 +36,9 @@ class MacOSMediaControls extends MediaControls
         this.tracksButton = new TracksButton(this);
         this.tracksPanel = new TracksPanel;
         this.volumeSlider = new VolumeSlider;
+
+        this.element.addEventListener("mousedown", this);
+        this.element.addEventListener("click", this);
     }
 
     // Public
@@ -56,4 +59,23 @@ class MacOSMediaControls extends MediaControls
         this.tracksPanel.hide();
     }
 
+    // Protected
+
+    handleEvent(event)
+    {
+        if (event.currentTarget !== this.element)
+            return;
+
+        // Only notify that the background was clicked when the "mousedown" event
+        // was also received, which wouldn't happen if the "mousedown" event caused
+        // the tracks panel to be hidden.
+        if (event.type === "mousedown")
+            this._receivedMousedown = true;
+        else if (event.type === "click") {
+            if (this._receivedMousedown && event.target === this.element && this.delegate && typeof this.delegate.macOSControlsBackgroundWasClicked === "function")
+                this.delegate.macOSControlsBackgroundWasClicked();
+            delete this._receivedMousedown
+        }
+    }
+
 }
index 45b9e73..7105174 100644 (file)
@@ -58,6 +58,8 @@ class MediaController
             media.addEventListener("webkitfullscreenchange", this);
     }
 
+    // Public
+
     get layoutTraits()
     {
         let traits = window.navigator.platform === "MacIntel" ? LayoutTraits.macOS : LayoutTraits.iOS;
@@ -81,6 +83,14 @@ class MediaController
         return traits;
     }
 
+    togglePlayback()
+    {
+        if (this.media.paused)
+            this.media.play();
+        else
+            this.media.pause();
+    }
+
     // Protected
 
     set pageScaleFactor(pageScaleFactor)
@@ -94,6 +104,13 @@ class MediaController
         this.controls.usesLTRUserInterfaceLayoutDirection = flag;
     }
 
+    macOSControlsBackgroundWasClicked()
+    {
+        // Toggle playback when clicking on the video but not on any controls on macOS.
+        if (this.media.controls)
+            this.togglePlayback();
+    }
+
     handleEvent(event)
     {
         if (event instanceof TrackEvent && event.currentTarget === this.media.videoTracks)
@@ -137,6 +154,7 @@ class MediaController
         }
 
         this.controls = new ControlsClass;
+        this.controls.delegate = this;
 
         if (this.shadowRoot.host && this.shadowRoot.host.dataset.autoHideDelay)
             this.controls.controlsBar.autoHideDelay = this.shadowRoot.host.dataset.autoHideDelay;
index 8d1e20b..9e27e43 100644 (file)
@@ -40,11 +40,7 @@ class PlaybackSupport extends MediaControllerSupport
 
     buttonWasPressed(control)
     {
-        const media = this.mediaController.media;
-        if (media.paused)
-            media.play();
-        else
-            media.pause();
+        this.mediaController.togglePlayback();
     }
 
     syncControl()