Media Controls: Volume slider should always show if we have enough room

https://bugs.webkit.org/show_bug.cgi?id=259721 rdar://113243353 Reviewed by Dean Jackson. On visionOS, the volume slider should always show within inline video, if there is enough room. * Source/WebCore/DerivedSources-input.xcfilelist: * Source/WebCore/DerivedSources.make: * Source/WebCore/Modules/modern-media-controls/controls/vision-media-controls.css: (.media-controls.vision > .controls-bar.top-right,): (.media-controls.vision > .controls-bar.top-right): (.media-controls.vision .controls-bar.simple-layout .volume-container > .slider.vision.volume,): (.media-controls.vision .controls-bar.simple-layout.top-right > .overflow): (.media-controls.vision .volume-container): (.media-controls.vision .volume-container > .mute.bar): (.media-controls.vision:not(.audio) .volume-container > .background-tint > .blur,): (.media-controls.vision.fullscreen > .controls-bar.top-right,): Deleted. (.media-controls.vision.fullscreen > .controls-bar.top-right): Deleted. (.media-controls.vision .controls-bar.simple-layout > *:not(.background-tint)): Deleted. (.media-controls.vision:not(.audio) button > .background-tint > .blur): Deleted. * Source/WebCore/Modules/modern-media-controls/controls/vision-media-controls.js: (VisionMediaControls.prototype._createControls): (VisionMediaControls.prototype._performVolumeContainerLayout): (VisionMediaControls.prototype._performTopRightControlsBarLayout): (VisionInlineMediaControls.prototype._createControls): (VisionInlineMediaControls.prototype._performLayout): (VisionInlineMediaControls.prototype._topRightControlsBarChildren): (VisionInlineMediaControls.prototype._performVolumeContainerLayout): (VisionFullscreenMediaControls.prototype._createControls): (VisionFullscreenMediaControls.prototype._performVolumeContainerLayout): (VisionFullscreenMediaControls.prototype._topRightControlsBarChildren): * Source/WebCore/Modules/modern-media-controls/controls/vision-volume-container.js: Added. (VolumeContainer.prototype.get children): (VolumeContainer.prototype.set children): * Source/WebCore/WebCore.xcodeproj/project.pbxproj: Canonical link: https://commits.webkit.org/266566@main
WebKit · Aug 4, 2023 · e4772fa · e4772fa
1 parent df20f33
commit e4772fa
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 21 deletions.
diff --git a/Source/WebCore/DerivedSources-input.xcfilelist b/Source/WebCore/DerivedSources-input.xcfilelist
@@ -705,6 +705,7 @@ $(PROJECT_DIR)/Modules/modern-media-controls/controls/vision-media-controls.css
 $(PROJECT_DIR)/Modules/modern-media-controls/controls/vision-media-controls.js
 $(PROJECT_DIR)/Modules/modern-media-controls/controls/vision-slider.css
 $(PROJECT_DIR)/Modules/modern-media-controls/controls/vision-slider.js
+$(PROJECT_DIR)/Modules/modern-media-controls/controls/vision-volume-container.js
 $(PROJECT_DIR)/Modules/modern-media-controls/controls/watchos-activity-indicator.css
 $(PROJECT_DIR)/Modules/modern-media-controls/controls/watchos-activity-indicator.js
 $(PROJECT_DIR)/Modules/modern-media-controls/controls/watchos-layout-traits.js

diff --git a/Source/WebCore/DerivedSources.make b/Source/WebCore/DerivedSources.make
@@ -1984,6 +1984,7 @@ MODERN_MEDIA_CONTROLS_SCRIPTS = \
     $(WebCore)/Modules/modern-media-controls/controls/invalid-placard.js \
     $(WebCore)/Modules/modern-media-controls/controls/pip-placard.js \
     $(WebCore)/Modules/modern-media-controls/controls/vision-slider.js \
+    $(WebCore)/Modules/modern-media-controls/controls/vision-volume-container.js \
     $(WebCore)/Modules/modern-media-controls/controls/vision-media-controls.js \
     $(WebCore)/Modules/modern-media-controls/controls/vision-layout-traits.js \
     $(WebCore)/Modules/modern-media-controls/controls/watchos-activity-indicator.js \

diff --git a/Source/WebCore/Modules/modern-media-controls/controls/vision-media-controls.css b/Source/WebCore/Modules/modern-media-controls/controls/vision-media-controls.css
@@ -76,15 +76,6 @@
     --inline-controls-bar-margin: 12px;
 }
 
-.media-controls.vision.fullscreen > .controls-bar.top-right,
-.media-controls.vision.fullscreen > .controls-bar.top-right * {
-    --inline-controls-bar-margin: 2px;
-}
-
-.media-controls.vision.fullscreen > .controls-bar.top-right {
-    padding: 0 0 0 11px;
-}
-
 /* Captions */
 
 :host(video[controls]) .visible-controls-bar:has(+ .vision) {
@@ -112,11 +103,21 @@
 
 /* Simple layout controls bar */
 
+.media-controls.vision > .controls-bar.top-right,
+.media-controls.vision > .controls-bar.top-right * {
+    --inline-controls-bar-margin: 2px;
+}
+
+.media-controls.vision > .controls-bar.top-right {
+    padding: 0 0 0 11px;
+}
+
 .media-controls.vision .controls-bar.simple-layout {
     display: flex;
     align-items: center;
 }
 
+.media-controls.vision .controls-bar.simple-layout .volume-container > .slider.vision.volume,
 .media-controls.vision .controls-bar.simple-layout > *:not(.background-tint) {
     position: relative;
     margin-right: var(--inline-controls-bar-margin);
@@ -126,6 +127,24 @@
     margin-right: 0 !important;
 }
 
+.media-controls.vision .controls-bar.simple-layout.top-right > .overflow {
+    margin: 0 0 0 5px;
+}
+
+.media-controls.vision .volume-container {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    padding: 0 0 0 11px;
+}
+
+.media-controls.vision .volume-container > .mute.bar {
+    position: relative;
+    width: auto !important;
+    aspect-ratio: 1;
+    border-radius: 50%;
+}
+
 /* Background tint */
 
 .media-controls.vision .background-tint,
@@ -137,6 +156,7 @@
     display: none;
 }
 
+.media-controls.vision:not(.audio) .volume-container > .background-tint > .blur,
 .media-controls.vision:not(.audio) button > .background-tint > .blur {
     background-color: rgba(255, 255, 255, 0.15);
     -webkit-backdrop-filter: saturate(20%) blur(50px);

diff --git a/Source/WebCore/Modules/modern-media-controls/controls/vision-media-controls.js b/Source/WebCore/Modules/modern-media-controls/controls/vision-media-controls.js
@@ -27,6 +27,7 @@ const MinSizeToShowLargeProminentControl = 292;
 
 const MinWidthToShowTopCornerControlsBars = 262;
 const MinWidthToShowBottomBar = 390;
+const MinWidthToShowVolumeSlider = 390;
 const MinWidthToShowSeekingControls = 520;
 const MinWidthToShowOverflowButton = 520;
 const MinWidthToShowLargeCentralControls = 640;
@@ -172,7 +173,7 @@ class VisionMediaControls extends MediaControls
 
         this.timeControl.scrubber = new VisionSlider(this.layoutDelegate, "scrubber");
 
-        // Controls Bars
+        // Controls Bars.
 
         this._topLeftControlsBar = new ControlsBar("simple-layout top-left");
         this._topLeftControlsBar.hasBackgroundTint = false;
@@ -185,6 +186,12 @@ class VisionMediaControls extends MediaControls
 
         this._bottomBarLeftContainer = new ButtonsContainer({ cssClassName: "left" });
         this._bottomBarRightContainer = new ButtonsContainer({ cssClassName: "right" });
+
+        this.volumeSlider = new VisionSlider(this, "volume");
+        this.volumeSlider.width = 150;
+        this.volumeSlider.recessed = true;
+
+        this.volumeContainer = new VolumeContainer("volume-container");
     }
 
     _performLayout()
@@ -197,6 +204,11 @@ class VisionMediaControls extends MediaControls
         throw "Derived class must implement this function.";
     }
 
+    _performVolumeContainerLayout()
+    {
+        throw "Derived class must implement this function.";
+    }
+
     _performTopLeftControlsBarLayout()
     {
         const buttons = [this.fullscreenButton];
@@ -207,6 +219,8 @@ class VisionMediaControls extends MediaControls
 
     _performTopRightControlsBarLayout()
     {
+        this._performVolumeContainerLayout();
+
         this._topRightControlsBar.children = this._topRightControlsBarChildren();
     }
 
@@ -243,8 +257,6 @@ class VisionInlineMediaControls extends VisionMediaControls
     {
         super._createControls();
 
-        this.muteButton.style = Button.Styles.Rounded;
-        this.muteButton.circular = true;
         this.overflowButton.style = Button.Styles.Rounded;
         this.overflowButton.circular = true;
 
@@ -277,7 +289,7 @@ class VisionInlineMediaControls extends VisionMediaControls
             children.push(this._topLeftControlsBar);
             children.push(this._topRightControlsBar);
         }
-    
+
         this._performCentralContainerLayout();
         children.push(this._centerControlsBar);
 
@@ -291,9 +303,16 @@ class VisionInlineMediaControls extends VisionMediaControls
 
     _topRightControlsBarChildren()
     {
-        const children = [this.muteButton];
+        const children = [];
+
+        if (this._widthForSizeClassDetermination >= MinWidthToShowVolumeSlider)
+            children.push(this.volumeContainer);
+        else
+            children.push(this.muteButton);
+
         if (this._widthForSizeClassDetermination >= MinWidthToShowOverflowButton)
             children.push(this.overflowButton);
+
         return children;
     }
 
@@ -317,7 +336,20 @@ class VisionInlineMediaControls extends VisionMediaControls
         }
         this._centerControlsBar.children = buttons;
     }
-
+
+    _performVolumeContainerLayout()
+    {
+        if (this._widthForSizeClassDetermination >= MinWidthToShowVolumeSlider) {
+            this.muteButton.style = Button.Styles.Bar;
+            this.muteButton.circular = false;
+            this.volumeContainer.children = [this.volumeSlider, this.muteButton];
+        } else {
+            this.muteButton.style = Button.Styles.Rounded;
+            this.muteButton.circular = true;
+            this.volumeContainer.children = [];
+        }
+    }
+
     _performBottomBarLayout()
     {
         const margin = this.computedValueForStylePropertyInPx("--inline-controls-inside-margin");
@@ -386,13 +418,9 @@ class VisionFullscreenMediaControls extends VisionMediaControls
     {
         super._createControls();
 
-        this.volumeSlider = new VisionSlider(this, "volume");
-        this.volumeSlider.width = 150;
-        this.volumeSlider.recessed = true;
-
         this.timeControl.scrubber.recessed = true;
 
-        this._topRightControlsBar.hasBackgroundTint = true;
+        this._topRightControlsBar.hasBackgroundTint = false;
 
         this.muteButton.style = Button.Styles.Bar;
         this.overflowButton.style = Button.Styles.Bar;
@@ -419,9 +447,16 @@ class VisionFullscreenMediaControls extends VisionMediaControls
         this.children = [this._backdrop, this._topLeftControlsBar, this._topRightControlsBar, this.bottomControlsBar];
     }
 
+    _performVolumeContainerLayout()
+    {
+        this.muteButton.style = Button.Styles.Bar;
+        this.muteButton.circular = false;
+        this.volumeContainer.children = [this.volumeSlider, this.muteButton];
+    }
+
     _topRightControlsBarChildren()
     {
-        return [this.volumeSlider, this.muteButton];
+        return [this.volumeContainer];
     }
 
     _performBottomBarLayout()

diff --git a/Source/WebCore/Modules/modern-media-controls/controls/vision-volume-container.js b/Source/WebCore/Modules/modern-media-controls/controls/vision-volume-container.js
@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2023 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 VolumeContainer extends LayoutNode
+{
+    constructor(cssClassName = "")
+    {
+        super(`<div role="group" class="${cssClassName}"></div>`);
+        this._backgroundTint = this.addChild(new BackgroundTint);
+    }
+
+    get children()
+    {
+        return super.children;
+    }
+
+    set children(children)
+    {
+        super.children = [this._backgroundTint].concat(children);
+    }
+}
diff --git a/Source/WebCore/WebCore.xcodeproj/project.pbxproj b/Source/WebCore/WebCore.xcodeproj/project.pbxproj
@@ -6765,6 +6765,7 @@
 		07D6A4F21BED5F8800174146 /* MockRealtimeAudioSource.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = MockRealtimeAudioSource.h; sourceTree = "<group>"; };
 		07D6A4F61BF2307D00174146 /* AudioTrackPrivateMediaStream.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AudioTrackPrivateMediaStream.h; path = platform/mediastream/AudioTrackPrivateMediaStream.h; sourceTree = SOURCE_ROOT; };
 		07E117061489EBEB00EC5ACE /* JSTextTrackCueCustom.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = JSTextTrackCueCustom.cpp; sourceTree = "<group>"; };
+		07E223CA2A784D1A00C9EDF3 /* vision-volume-container.js */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.javascript; path = "vision-volume-container.js"; sourceTree = "<group>"; };
 		07E3DFD01A9E786500764CA8 /* MediaPlaybackTarget.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = MediaPlaybackTarget.h; sourceTree = "<group>"; };
 		07E4BDBD2A3A5FAB000D5509 /* DictationCaretAnimator.cpp */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; path = DictationCaretAnimator.cpp; sourceTree = "<group>"; };
 		07E4BDBE2A3A5FAB000D5509 /* DictationCaretAnimator.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = DictationCaretAnimator.h; sourceTree = "<group>"; };
@@ -27215,6 +27216,7 @@
 				E58A6BA12A438300000BC574 /* vision-media-controls.js */,
 				E58A6BA52A438302000BC574 /* vision-slider.css */,
 				E58A6BA42A438302000BC574 /* vision-slider.js */,
+				07E223CA2A784D1A00C9EDF3 /* vision-volume-container.js */,
 				9551958E25FA9E3000F58CF0 /* watchos-activity-indicator.css */,
 				9551958F25FA9E3100F58CF0 /* watchos-activity-indicator.js */,
 				BCD3736F26864203003644E4 /* watchos-layout-traits.js */,