Diff
Modified: trunk/LayoutTests/ChangeLog (228717 => 228718)
--- trunk/LayoutTests/ChangeLog 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/LayoutTests/ChangeLog 2018-02-20 00:37:42 UTC (rev 228718)
@@ -1,5 +1,20 @@
2018-02-19 Antoine Quint <grao...@apple.com>
+ [Modern Media Controls] Implement a compact set of media controls
+ https://bugs.webkit.org/show_bug.cgi?id=182937
+ <rdar://problem/37682257>
+
+ Reviewed by Eric Carlson.
+
+ Add new tests that cover the basic properties and layout under different situations of the new CompactMediaControls.
+
+ * media/modern-media-controls/compact-media-controls/compact-media-controls-constructor-expected.txt: Added.
+ * media/modern-media-controls/compact-media-controls/compact-media-controls-constructor.html: Added.
+ * media/modern-media-controls/compact-media-controls/compact-media-controls-layout-expected.txt: Added.
+ * media/modern-media-controls/compact-media-controls/compact-media-controls-layout.html: Added.
+
+2018-02-19 Antoine Quint <grao...@apple.com>
+
[Web Animations] Make KeyframeEffect target nullable and read-write
https://bugs.webkit.org/show_bug.cgi?id=182741
Added: trunk/LayoutTests/media/modern-media-controls/compact-media-controls/compact-media-controls-constructor-expected.txt (0 => 228718)
--- trunk/LayoutTests/media/modern-media-controls/compact-media-controls/compact-media-controls-constructor-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/compact-media-controls/compact-media-controls-constructor-expected.txt 2018-02-20 00:37:42 UTC (rev 228718)
@@ -0,0 +1,14 @@
+Testing the CompactMediaControls constructor.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.element.localName is "div"
+PASS mediaControls.element.className is "media-controls"
+PASS mediaControls.layoutTraits is LayoutTraits.Compact
+PASS mediaControls.placard is null
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/compact-media-controls/compact-media-controls-constructor.html (0 => 228718)
--- trunk/LayoutTests/media/modern-media-controls/compact-media-controls/compact-media-controls-constructor.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/compact-media-controls/compact-media-controls-constructor.html 2018-02-20 00:37:42 UTC (rev 228718)
@@ -0,0 +1,18 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+description("Testing the <code>CompactMediaControls</code> constructor.");
+
+const mediaControls = new CompactMediaControls;
+
+shouldBeEqualToString("mediaControls.element.localName", "div");
+shouldBeEqualToString("mediaControls.element.className", "media-controls");
+shouldBe("mediaControls.layoutTraits", "LayoutTraits.Compact");
+shouldBeNull("mediaControls.placard");
+debug("");
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/compact-media-controls/compact-media-controls-layout-expected.txt (0 => 228718)
--- trunk/LayoutTests/media/modern-media-controls/compact-media-controls/compact-media-controls-layout-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/compact-media-controls/compact-media-controls-layout-expected.txt 2018-02-20 00:37:42 UTC (rev 228718)
@@ -0,0 +1,25 @@
+Testing the CompactMediaControls layout.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+With controls at their default size only the play/pause button is showing with a center style.
+PASS mediaControls.children is [mediaControls.playPauseButton]
+PASS mediaControls.playPauseButton.style is Button.Styles.Center
+
+With controls just under the minimum size to show prominent controls only the play/pause button is showing with a small-center style.
+PASS mediaControls.children is [mediaControls.playPauseButton]
+PASS mediaControls.playPauseButton.style is Button.Styles.SmallCenter
+
+With controls just under the minimum size to show any controls there are no children.
+PASS mediaControls.children.length is 0
+
+With controls above the minimum size and the error placard set only the invalid placard is shown.
+PASS mediaControls.children is [mediaControls.invalidPlacard]
+PASS mediaControls.invalidPlacard.width is mediaControls.width
+PASS mediaControls.invalidPlacard.height is mediaControls.height
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/compact-media-controls/compact-media-controls-layout.html (0 => 228718)
--- trunk/LayoutTests/media/modern-media-controls/compact-media-controls/compact-media-controls-layout.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/compact-media-controls/compact-media-controls-layout.html 2018-02-20 00:37:42 UTC (rev 228718)
@@ -0,0 +1,40 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+description("Testing the <code>CompactMediaControls</code> layout.");
+
+const mediaControls = new CompactMediaControls;
+
+debug("With controls at their default size only the play/pause button is showing with a center style.");
+shouldBe("mediaControls.children", "[mediaControls.playPauseButton]");
+shouldBe("mediaControls.playPauseButton.style", "Button.Styles.Center");
+debug("");
+
+debug("With controls just under the minimum size to show prominent controls only the play/pause button is showing with a small-center style.");
+mediaControls.width = MaximumSizeToShowSmallProminentControl - 1;
+mediaControls.height = MaximumSizeToShowSmallProminentControl - 1;
+shouldBe("mediaControls.children", "[mediaControls.playPauseButton]");
+shouldBe("mediaControls.playPauseButton.style", "Button.Styles.SmallCenter");
+debug("");
+
+debug("With controls just under the minimum size to show any controls there are no children.");
+mediaControls.width = MinimumSizeToShowAnyControl - 1;
+mediaControls.height = MinimumSizeToShowAnyControl - 1;
+shouldBe("mediaControls.children.length", "0");
+debug("");
+
+debug("With controls above the minimum size and the error placard set only the invalid placard is shown.");
+mediaControls.width = MaximumSizeToShowSmallProminentControl;
+mediaControls.height = MaximumSizeToShowSmallProminentControl;
+mediaControls.placard = mediaControls.invalidPlacard;
+shouldBe("mediaControls.children", "[mediaControls.invalidPlacard]");
+shouldBe("mediaControls.invalidPlacard.width", "mediaControls.width");
+shouldBe("mediaControls.invalidPlacard.height", "mediaControls.height");
+debug("");
+
+</script>
+<script src=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (228717 => 228718)
--- trunk/Source/WebCore/ChangeLog 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/Source/WebCore/ChangeLog 2018-02-20 00:37:42 UTC (rev 228718)
@@ -1,5 +1,61 @@
2018-02-19 Antoine Quint <grao...@apple.com>
+ [Modern Media Controls] Implement a compact set of media controls
+ https://bugs.webkit.org/show_bug.cgi?id=182937
+ <rdar://problem/37682257>
+
+ Reviewed by Eric Carlson.
+
+ We add a new type of media controls used when we need stripped down and compact controls. The new
+ CompactMediaControls only show a play/pause button and an invalid placard and disregard all media
+ events that are not relevant to the display of these controls.
+
+ To distinguish cases where we need to show compact media controls, we expose a new property on
+ MediaControlsHost called "compactMode".
+
+ Tests: media/modern-media-controls/compact-media-controls/compact-media-controls-constructor.html
+ media/modern-media-controls/compact-media-controls/compact-media-controls-layout.html
+
+ * Modules/mediacontrols/MediaControlsHost.cpp:
+ (WebCore::MediaControlsHost::base64StringForIconNameAndType const):
+ (WebCore::MediaControlsHost::compactMode const):
+ * Modules/mediacontrols/MediaControlsHost.h:
+ (WebCore::MediaControlsHost::setSimulateCompactMode):
+ * Modules/mediacontrols/MediaControlsHost.idl:
+ * Modules/modern-media-controls/controls/compact-media-controls.js: Added.
+ (CompactMediaControls.prototype.get scaleFactor):
+ (CompactMediaControls.prototype.set scaleFactor):
+ (CompactMediaControls.prototype.get shouldCenterControlsVertically):
+ (CompactMediaControls.prototype.set shouldCenterControlsVertically):
+ (CompactMediaControls.prototype.get placard):
+ (CompactMediaControls.prototype.set placard):
+ (CompactMediaControls.prototype.layout):
+ (CompactMediaControls.prototype.commitProperty):
+ * Modules/modern-media-controls/controls/icon-service.js:
+ (const.iconService.new.IconService.prototype._fileNameAndPlatformForIconAndLayoutTraits):
+ (const.iconService.new.IconService):
+ * Modules/modern-media-controls/controls/inline-media-controls.js:
+ * Modules/modern-media-controls/controls/layout-item.js:
+ * Modules/modern-media-controls/js-files:
+ * Modules/modern-media-controls/main.js:
+ * Modules/modern-media-controls/media/media-controller.js:
+ (MediaController.prototype.get layoutTraits):
+ (MediaController.prototype._supportingObjectClasses): Compute the set of MediaControllerSupport classes based
+ on the layout traits such that in compact mode we only return PlacardSupport and PlaybackSupport.
+ (MediaController.prototype._updateControlsIfNeeded):
+ (MediaController.prototype._controlsClassForLayoutTraits):
+ (MediaController.prototype._shouldControlsBeAvailable):
+ * Modules/modern-media-controls/media/placard-support.js:
+ (PlacardSupport.prototype.get mediaEvents): Only track the "error" event in compact mode since this is the only
+ relevant placard.
+ * Modules/modern-media-controls/media/playback-support.js:
+ (PlaybackSupport.prototype.syncControl): Only show or hide the play/pause button based on the playback state
+ when in compact mode.
+ (PlaybackSupport):
+ * WebCore.xcodeproj/project.pbxproj:
+
+2018-02-19 Antoine Quint <grao...@apple.com>
+
[Web Animations] Make KeyframeEffect target nullable and read-write
https://bugs.webkit.org/show_bug.cgi?id=182741
Modified: trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp (228717 => 228718)
--- trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp 2018-02-20 00:37:42 UTC (rev 228718)
@@ -283,7 +283,6 @@
String MediaControlsHost::base64StringForIconNameAndType(const String& iconName, const String& iconType) const
{
-
return RenderTheme::singleton().mediaControlsBase64StringForIconNameAndType(iconName, iconType);
}
@@ -292,6 +291,18 @@
return RenderTheme::singleton().mediaControlsFormattedStringForDuration(durationInSeconds);
}
+bool MediaControlsHost::compactMode() const
+{
+ if (m_simulateCompactMode)
+ return true;
+
+#if ENABLE(EXTRA_ZOOM_MODE)
+ return true;
+#else
+ return false;
+#endif
}
+}
+
#endif
Modified: trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.h (228717 => 228718)
--- trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.h 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.h 2018-02-20 00:37:42 UTC (rev 228718)
@@ -81,6 +81,9 @@
enum class DeviceType { None, Airplay, Tvout };
DeviceType externalDeviceType() const;
+ bool compactMode() const;
+ void setSimulateCompactMode(bool value) { m_simulateCompactMode = value; }
+
bool controlsDependOnPageScaleFactor() const;
void setControlsDependOnPageScaleFactor(bool v);
@@ -95,6 +98,7 @@
HTMLMediaElement* m_mediaElement;
RefPtr<MediaControlTextTrackContainerElement> m_textTrackContainer;
+ bool m_simulateCompactMode { false };
};
}
Modified: trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl (228717 => 228718)
--- trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl 2018-02-20 00:37:42 UTC (rev 228718)
@@ -49,6 +49,7 @@
readonly attribute boolean userGestureRequired;
readonly attribute boolean isInMediaDocument;
readonly attribute boolean shouldForceControlsDisplay;
+ readonly attribute boolean compactMode;
readonly attribute DOMString externalDeviceDisplayName;
readonly attribute DeviceType externalDeviceType;
Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/compact-media-controls.js (0 => 228718)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/compact-media-controls.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/compact-media-controls.js 2018-02-20 00:37:42 UTC (rev 228718)
@@ -0,0 +1,145 @@
+/*
+ * Copyright (C) 2018 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.
+ */
+
+class CompactMediaControls extends LayoutNode
+{
+
+ constructor({ width = 320, height = 240 } = {})
+ {
+ super(`<div class="media-controls"></div>`);
+
+ this._scaleFactor = 1;
+ this._shouldCenterControlsVertically = false;
+
+ this.layoutTraits = LayoutTraits.Compact;
+
+ this.playPauseButton = new PlayPauseButton(this);
+ this.invalidPlacard = new InvalidPlacard(this);
+
+ this._placard = null;
+
+ this.width = width;
+ this.height = height;
+ }
+
+ // Public
+
+ get scaleFactor()
+ {
+ return this._scaleFactor;
+ }
+
+ set scaleFactor(scaleFactor)
+ {
+ if (this._scaleFactor === scaleFactor)
+ return;
+
+ this._scaleFactor = scaleFactor;
+ this.markDirtyProperty("scaleFactor");
+ }
+
+ get shouldCenterControlsVertically()
+ {
+ return this._shouldCenterControlsVertically;
+ }
+
+ set shouldCenterControlsVertically(flag)
+ {
+ if (this._shouldCenterControlsVertically === flag)
+ return;
+
+ this._shouldCenterControlsVertically = flag;
+ this.markDirtyProperty("scaleFactor");
+ }
+
+ get placard()
+ {
+ return this._placard;
+ }
+
+ set placard(placard)
+ {
+ if (this._placard === placard)
+ return;
+
+ this._placard = placard;
+ this.layout();
+ }
+
+ // Protected
+
+ layout()
+ {
+ super.layout();
+
+ const children = [];
+
+ // The controls might be too small to allow showing anything at all.
+ if (this.width < MinimumSizeToShowAnyControl || this.height < MinimumSizeToShowAnyControl) {
+ this.children = children;
+ return;
+ }
+
+ // If we are showing the invalid placard, show the placard only.
+ if (this._placard === this.invalidPlacard) {
+ this._placard.width = this.width;
+ this._placard.height = this.height;
+ this.children = [this._placard];
+ return;
+ }
+
+ if (this.playPauseButton.visible) {
+ this.playPauseButton.style = this.width <= MaximumSizeToShowSmallProminentControl || this.height <= MaximumSizeToShowSmallProminentControl ? Button.Styles.SmallCenter : Button.Styles.Center;
+ children.push(this.playPauseButton);
+ }
+
+ this.children = children;
+ }
+
+ commitProperty(propertyName)
+ {
+ if (propertyName !== "scaleFactor") {
+ super.commitProperty(propertyName);
+ return;
+ }
+
+ const zoom = 1 / this._scaleFactor;
+ // We want to maintain the controls at a constant device height. To do so, we invert the page scale
+ // factor using a scale transform when scaling down, when the result will not appear pixelated and
+ // where the CSS zoom property produces incorrect text rendering due to enforcing the minimum font
+ // size. When we would end up scaling up, which would yield pixelation, we use the CSS zoom property
+ // which will not run into the font size issue.
+ if (zoom < 1) {
+ this.element.style.transform = `scale(${zoom})`;
+ this.element.style.removeProperty("zoom");
+ } else {
+ this.element.style.zoom = zoom;
+ this.element.style.removeProperty("transform");
+ }
+ // We also want to optionally center them vertically compared to their container.
+ this.element.style.top = this._shouldCenterControlsVertically ? `${(this.height / 2) * (zoom - 1)}px` : "auto";
+ }
+
+}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js (228717 => 228718)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js 2018-02-20 00:37:42 UTC (rev 228718)
@@ -88,7 +88,7 @@
let platform;
if (layoutTraits & LayoutTraits.macOS)
platform = "macOS";
- else if (layoutTraits & LayoutTraits.iOS)
+ else if (layoutTraits & LayoutTraits.iOS || layoutTraits & LayoutTraits.Compact)
platform = "iOS";
else
throw "Could not identify icon's platform from layout traits.";
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js (228717 => 228718)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2018-02-20 00:37:42 UTC (rev 228718)
@@ -25,8 +25,6 @@
const InsideMargin = 6; // Minimum margin to guarantee around all controls, this constant needs to stay in sync with the --inline-controls-inside-margin CSS variable.
const BottomControlsBarHeight = 31; // This constant needs to stay in sync with the --inline-controls-bar-height CSS variable.
-const MinimumSizeToShowAnyControl = 47;
-const MaximumSizeToShowSmallProminentControl = 88;
class InlineMediaControls extends MediaControls
{
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js (228717 => 228718)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js 2018-02-20 00:37:42 UTC (rev 228718)
@@ -27,7 +27,8 @@
Unknown : 0,
macOS : 1 << 0,
iOS : 1 << 1,
- Fullscreen : 1 << 2
+ Fullscreen : 1 << 2,
+ Compact : 1 << 3
};
class LayoutItem extends LayoutNode
Modified: trunk/Source/WebCore/Modules/modern-media-controls/js-files (228717 => 228718)
--- trunk/Source/WebCore/Modules/modern-media-controls/js-files 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/Source/WebCore/Modules/modern-media-controls/js-files 2018-02-20 00:37:42 UTC (rev 228718)
@@ -39,6 +39,7 @@
controls/airplay-placard.js
controls/invalid-placard.js
controls/pip-placard.js
+controls/compact-media-controls.js
media/media-controller-support.js
media/airplay-support.js
media/audio-support.js
@@ -63,4 +64,3 @@
media/volume-up-support.js
media/media-document-controller.js
media/media-controller.js
-
Modified: trunk/Source/WebCore/Modules/modern-media-controls/main.js (228717 => 228718)
--- trunk/Source/WebCore/Modules/modern-media-controls/main.js 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/Source/WebCore/Modules/modern-media-controls/main.js 2018-02-20 00:37:42 UTC (rev 228718)
@@ -24,6 +24,8 @@
*/
const SkipSeconds = 15;
+const MinimumSizeToShowAnyControl = 47;
+const MaximumSizeToShowSmallProminentControl = 88;
let mediaControlsHost;
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (228717 => 228718)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2018-02-20 00:37:42 UTC (rev 228718)
@@ -96,6 +96,9 @@
get layoutTraits()
{
+ if (this.host && this.host.compactMode)
+ return LayoutTraits.Compact;
+
let traits = window.navigator.platform === "MacIntel" ? LayoutTraits.macOS : LayoutTraits.iOS;
if (this.isFullscreen)
return traits | LayoutTraits.Fullscreen;
@@ -178,6 +181,14 @@
// Private
+ _supportingObjectClasses()
+ {
+ if (this.layoutTraits & LayoutTraits.Compact)
+ return [PlacardSupport, PlaybackSupport];
+
+ return [AirplaySupport, AudioSupport, ControlsVisibilitySupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, ScrubbingSupport, SeekBackwardSupport, SeekForwardSupport, SkipBackSupport, SkipForwardSupport, StartSupport, StatusSupport, TimeControlSupport, TracksSupport, VolumeSupport, VolumeDownSupport, VolumeUpSupport];
+ }
+
_updateControlsIfNeeded()
{
const layoutTraits = this.layoutTraits;
@@ -199,7 +210,7 @@
this.controls = new ControlsClass;
this.controls.delegate = this;
- if (this.shadowRoot.host && this.shadowRoot.host.dataset.autoHideDelay)
+ if (this.controls.autoHideController && this.shadowRoot.host && this.shadowRoot.host.dataset.autoHideDelay)
this.controls.autoHideController.autoHideDelay = this.shadowRoot.host.dataset.autoHideDelay;
if (previousControls) {
@@ -212,9 +223,7 @@
this._updateTextTracksClassList();
this._updateControlsSize();
- this._supportingObjects = [AirplaySupport, AudioSupport, ControlsVisibilitySupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, ScrubbingSupport, SeekBackwardSupport, SeekForwardSupport, SkipBackSupport, SkipForwardSupport, StartSupport, StatusSupport, TimeControlSupport, TracksSupport, VolumeSupport, VolumeDownSupport, VolumeUpSupport].map(SupportClass => {
- return new SupportClass(this);
- }, this);
+ this._supportingObjects = this._supportingObjectClasses().map(SupportClass => new SupportClass(this), this);
this.controls.shouldUseSingleBarLayout = this.controls instanceof InlineMediaControls && this.isYouTubeEmbedWithTitle;
@@ -278,6 +287,8 @@
_controlsClassForLayoutTraits(layoutTraits)
{
+ if (layoutTraits & LayoutTraits.Compact)
+ return CompactMediaControls;
if (layoutTraits & LayoutTraits.iOS)
return IOSInlineMediaControls;
if (layoutTraits & LayoutTraits.Fullscreen)
@@ -307,6 +318,10 @@
_shouldControlsBeAvailable()
{
+ // Controls are always available with compact layout.
+ if (this.layoutTraits & LayoutTraits.Compact)
+ return true;
+
// Controls are always available while in fullscreen on macOS, and they are never available when in fullscreen on iOS.
if (this.isFullscreen)
return !!(this.layoutTraits & LayoutTraits.macOS);
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/placard-support.js (228717 => 228718)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/placard-support.js 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/placard-support.js 2018-02-20 00:37:42 UTC (rev 228718)
@@ -36,6 +36,9 @@
get mediaEvents()
{
+ if (this.mediaController.layoutTraits & LayoutTraits.Compact)
+ return ["error"];
+
return ["loadstart", "error", "webkitpresentationmodechanged", "webkitcurrentplaybacktargetiswirelesschanged"];
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/playback-support.js (228717 => 228718)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/playback-support.js 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/playback-support.js 2018-02-20 00:37:42 UTC (rev 228718)
@@ -45,7 +45,13 @@
syncControl()
{
- this.control.playing = !this.mediaController.media.paused;
+ const isPaused = this.mediaController.media.paused;
+
+ // We always show the play button when the media is paused with compact layout.
+ if (this.mediaController.layoutTraits & LayoutTraits.Compact)
+ this.control.visible = isPaused;
+ else
+ this.control.playing = !isPaused;
}
}
Modified: trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj (228717 => 228718)
--- trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2018-02-20 00:36:19 UTC (rev 228717)
+++ trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2018-02-20 00:37:42 UTC (rev 228718)
@@ -8996,6 +8996,7 @@
71D6AAC11DA4EAF700B23969 /* vol...@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "vol...@2x.png"; sourceTree = "<group>"; };
71DCB6FF1568197600862271 /* JSSVGZoomAndPan.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = JSSVGZoomAndPan.cpp; sourceTree = "<group>"; };
71DCB7001568197600862271 /* JSSVGZoomAndPan.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = JSSVGZoomAndPan.h; sourceTree = "<group>"; };
+ 71DE2794203A9C1C0058CB51 /* compact-media-controls.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode._javascript_; path = "compact-media-controls.js"; sourceTree = "<group>"; };
71E2183817359FB8006E6E4D /* PlugInsResources.h */ = {isa = PBXFileReference; explicitFileType = sourcecode.c.h; fileEncoding = 4; path = PlugInsResources.h; sourceTree = "<group>"; };
71E2183917359FB8006E6E4D /* PlugInsResourcesData.cpp */ = {isa = PBXFileReference; explicitFileType = sourcecode.cpp.cpp; fileEncoding = 4; path = PlugInsResourcesData.cpp; sourceTree = "<group>"; };
71E623CE151F72A60036E2F4 /* SVGAnimatedIntegerOptionalInteger.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = SVGAnimatedIntegerOptionalInteger.cpp; sourceTree = "<group>"; };
@@ -19069,6 +19070,7 @@
716FA0DD1DB26591007323CC /* button.js */,
716FA0DE1DB26591007323CC /* buttons-container.css */,
716FA0DF1DB26591007323CC /* buttons-container.js */,
+ 71DE2794203A9C1C0058CB51 /* compact-media-controls.js */,
717F618B1E43D61A00F37024 /* controls-bar.css */,
710FA74B1DEE576D004C715E /* controls-bar.js */,
716FA0E01DB26591007323CC /* forward-button.js */,
@@ -30710,7 +30712,7 @@
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
- shellScript = "SRC_DIR=\"$SRCROOT/Modules/modern-media-controls\"\nDST_DIR=\"$BUILT_PRODUCTS_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/modern-media-controls\"\n\nmkdir -p \"$DST_DIR\"\n\nif [ \"${PLATFORM_NAME}\" == \"macosx\" ]; then\nIMG_OS_PREFIX=\"macOS\"\nfi\n\nif [ \"${PLATFORM_NAME}\" == \"iphoneos\" ] || [ \"${PLATFORM_NAME}\" == \"iphonesimulator\" ]; then\nIMG_OS_PREFIX=\"iOS\"\nfi\n\nif [ -n \"$IMG_OS_PREFIX\" ]; then\nrsync -aq --exclude \".svn\" --exclude \".DS_Store\" \"$SRC_DIR/images/$IMG_OS_PREFIX/\" \"$DST_DIR/images\"\nfi\n\ncd \"$SRC_DIR\"\ncat controls/*.css > \"$DST_DIR/modern-media-controls.css\"\n cat `cat js-files` > \"$DST_DIR/modern-media-controls.js\"\n";
+ shellScript = "SRC_DIR=\"$SRCROOT/Modules/modern-media-controls\"\nDST_DIR=\"$BUILT_PRODUCTS_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/modern-media-controls\"\n\nmkdir -p \"$DST_DIR\"\n\nif [ \"${PLATFORM_NAME}\" == \"macosx\" ]; then\n IMG_OS_PREFIX=\"macOS\"\nelse\n IMG_OS_PREFIX=\"iOS\"\nfi\n\nif [ -n \"$IMG_OS_PREFIX\" ]; then\nrsync -aq --exclude \".svn\" --exclude \".DS_Store\" \"$SRC_DIR/images/$IMG_OS_PREFIX/\" \"$DST_DIR/images\"\nfi\n\ncd \"$SRC_DIR\"\ncat controls/*.css > \"$DST_DIR/modern-media-controls.css\"\n cat `cat js-files` > \"$DST_DIR/modern-media-controls.js\"\n";
};
A5E79CEC1E67F2CF00FB8153 /* Make Frameworks Symbolic Link */ = {
isa = PBXShellScriptBuildPhase;
