https://bugs.webkit.org/show_bug.cgi?id=168047
<rdar://problem/
30441939>
Reviewed by Eric Carlson.
Source/WebCore:
The controls bar auto-hide behavior is disabled for <audio> elements, but on iOS we have
a TapGestureRecognizer to identify when controls are tapped to toggle controls visibility.
This gesture recognizer would be on at all times, but it should only be enabled when
fadesToIdle is set to true.
Test: media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html
* Modules/modern-media-controls/controls/controls-bar.js:
(ControlsBar.prototype.set fadesWhileIdle):
LayoutTests:
Add a new iOS-specific test that checks the TapGestureRecognizer is only enabled when
fadesToIdle is true.
* media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html: Added.
* platform/mac/TestExpectations:
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@211955
268f45cc-cd09-0410-ab3c-
d52691b4dbfc
2017-02-09 Antoine Quint <graouts@apple.com>
+ [Modern Media Controls] Playing an <audio> element on iOS makes the controls disappear
+ https://bugs.webkit.org/show_bug.cgi?id=168047
+ <rdar://problem/30441939>
+
+ Reviewed by Eric Carlson.
+
+ Add a new iOS-specific test that checks the TapGestureRecognizer is only enabled when
+ fadesToIdle is true.
+
+ * media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html: Added.
+ * platform/mac/TestExpectations:
+
+2017-02-09 Antoine Quint <graouts@apple.com>
+
[Modern Media Controls] <audio> element does not show any background on iOS
https://bugs.webkit.org/show_bug.cgi?id=168046
<rdar://problem/30441872>
--- /dev/null
+Testing the MediaController controls bar tap gesture recognizer is only enabled when fadesWhileIdle is true.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Default state
+PASS controlsBar.fadesWhileIdle is false
+PASS controlsBar._tapGestureRecognizer.enabled is false
+
+controlsBar.fadesWhileIdle = true
+PASS controlsBar.fadesWhileIdle is true
+PASS controlsBar._tapGestureRecognizer.enabled is true
+
+controlsBar.fadesWhileIdle = false
+PASS controlsBar.fadesWhileIdle is false
+PASS controlsBar._tapGestureRecognizer.enabled is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
--- /dev/null
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<audio src="../../content/test.wav" controls style="width: 300px; pointer-events: none; opacity: 0;"></audio>
+<div id="shadow" style="width: 300px; height: 50px;"></div>
+<script type="text/javascript">
+
+description("Testing the <code>MediaController</code> controls bar tap gesture recognizer is only enabled when fadesWhileIdle is true.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("audio");
+const mediaController = createControls(shadowRoot, media, null);
+const controlsBar = mediaController.controls.controlsBar ;
+
+debug("Default state");
+shouldBeFalse("controlsBar.fadesWhileIdle");
+shouldBeFalse("controlsBar._tapGestureRecognizer.enabled");
+
+controlsBar.fadesWhileIdle = true;
+debug("");
+debug("controlsBar.fadesWhileIdle = true")
+shouldBeTrue("controlsBar.fadesWhileIdle");
+shouldBeTrue("controlsBar._tapGestureRecognizer.enabled");
+
+controlsBar.fadesWhileIdle = false;
+debug("");
+debug("controlsBar.fadesWhileIdle = false")
+shouldBeFalse("controlsBar.fadesWhileIdle");
+shouldBeFalse("controlsBar._tapGestureRecognizer.enabled");
+
+debug("");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
media/modern-media-controls/placard-support/ipad/placard-support-pip.html [ Skip ]
media/modern-media-controls/scrubber-support/ipad/scrubber-support-drag.html [ Skip ]
media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background.html [ Skip ]
+media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html [ Skip ]
# This one always times out on the bots, cannot reproduce locally.
webkit.org/b/165234 media/modern-media-controls/audio/audio-controls-buttons.html [ Skip ]
2017-02-09 Antoine Quint <graouts@apple.com>
+ [Modern Media Controls] Playing an <audio> element on iOS makes the controls disappear
+ https://bugs.webkit.org/show_bug.cgi?id=168047
+ <rdar://problem/30441939>
+
+ Reviewed by Eric Carlson.
+
+ The controls bar auto-hide behavior is disabled for <audio> elements, but on iOS we have
+ a TapGestureRecognizer to identify when controls are tapped to toggle controls visibility.
+ This gesture recognizer would be on at all times, but it should only be enabled when
+ fadesToIdle is set to true.
+
+ Test: media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html
+
+ * Modules/modern-media-controls/controls/controls-bar.js:
+ (ControlsBar.prototype.set fadesWhileIdle):
+
+2017-02-09 Antoine Quint <graouts@apple.com>
+
[Modern Media Controls] <audio> element does not show any background on iOS
https://bugs.webkit.org/show_bug.cgi?id=168046
<rdar://problem/30441872>
this._translation = new DOMPoint;
this._mediaControls = mediaControls;
+ if (GestureRecognizer.SupportsTouches)
+ this._tapGestureRecognizer = new TapGestureRecognizer(this._mediaControls.element, this);
+
this.autoHideDelay = ControlsBar.DefaultAutoHideDelay;
this.fadesWhileIdle = false;
this.userInteractionEnabled = true;
-
- if (GestureRecognizer.SupportsTouches)
- this._tapGestureRecognizer = new TapGestureRecognizer(this._mediaControls.element, this);
}
// Public
this._fadesWhileIdle = flag;
- if (!GestureRecognizer.SupportsTouches) {
+ if (GestureRecognizer.SupportsTouches)
+ this._tapGestureRecognizer.enabled = flag;
+ else {
if (flag) {
this._mediaControls.element.addEventListener("mousemove", this);
this._mediaControls.element.addEventListener("mouseleave", this);