From 65c4a1acf04b53ff97eeb921eba44cadde125375 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 7 Apr 2026 15:29:02 -0400
Subject: [PATCH] feat(shared-media): show volume controls to all participants

Previously only the media owner could see playback controls (including
volume). Now all participants see native controls so they can adjust
their local volume independently. Playback sync still overrides
non-owner play/pause/seek actions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 css/_shared_music.scss                                 | 10 ++++++++++
 .../shared-music/components/web/DirectAudioManager.tsx |  4 ++--
 .../components/web/YouTubeMusicManager.tsx             |  4 ++--
 .../shared-video/components/web/VideoManager.tsx       |  2 +-
 .../components/web/YoutubeVideoManager.tsx             |  4 ++--
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/css/_shared_music.scss b/css/_shared_music.scss
index 16faac1..98ffdfb 100644
--- a/css/_shared_music.scss
+++ b/css/_shared_music.scss
@@ -48,14 +48,24 @@
     height: 100%;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+    gap: 12px;
 
     &::before {
         content: '🎵';
         font-size: 48px;
         opacity: 0.5;
     }
+
+    audio {
+        width: 90%;
+        max-width: 320px;
+        height: 36px;
+        border-radius: 18px;
+        z-index: 1;
+    }
 }
 
 .shared-music-controls-overlay {
diff --git a/react/features/shared-music/components/web/DirectAudioManager.tsx b/react/features/shared-music/components/web/DirectAudioManager.tsx
index 7c2d57e..170dbbe 100644
--- a/react/features/shared-music/components/web/DirectAudioManager.tsx
+++ b/react/features/shared-music/components/web/DirectAudioManager.tsx
@@ -179,7 +179,7 @@ class DirectAudioManager extends AbstractMusicManager {
         let options: any = {
             autoPlay: true,
             src: musicId,
-            controls: _isOwner,
+            controls: true,
             onError: () => this.onError(),
             onPlay: () => this.onPlay(),
             onVolumeChange: () => this.onVolumeChange()
@@ -204,9 +204,9 @@ class DirectAudioManager extends AbstractMusicManager {
     override render() {
         return (
             <audio
-                className = 'hide'
                 id = 'sharedMusicPlayer'
                 ref = { this.audioRef }
+                style = {{ width: '100%' }}
                 { ...this.getPlayerOptions() } />
         );
     }
diff --git a/react/features/shared-music/components/web/YouTubeMusicManager.tsx b/react/features/shared-music/components/web/YouTubeMusicManager.tsx
index c87d83c..c46eb0f 100644
--- a/react/features/shared-music/components/web/YouTubeMusicManager.tsx
+++ b/react/features/shared-music/components/web/YouTubeMusicManager.tsx
@@ -188,8 +188,8 @@ class YouTubeMusicManager extends AbstractMusicManager {
      * @returns {Object}
      */
     getPlayerOptions = () => {
-        const { _isOwner, musicId } = this.props;
-        const showControls = _isOwner ? 1 : 0;
+        const { musicId } = this.props;
+        const showControls = 1;
 
         const options = {
             id: 'sharedMusicPlayer',
diff --git a/react/features/shared-video/components/web/VideoManager.tsx b/react/features/shared-video/components/web/VideoManager.tsx
index 45b4196..283eebb 100644
--- a/react/features/shared-video/components/web/VideoManager.tsx
+++ b/react/features/shared-video/components/web/VideoManager.tsx
@@ -148,7 +148,7 @@ class VideoManager extends AbstractVideoManager {
         let options: any = {
             autoPlay: true,
             src: videoId,
-            controls: _isOwner,
+            controls: true,
             onError: () => this.onError(),
             onPlay: () => this.onPlay(),
             onVolumeChange: () => this.onVolumeChange()
diff --git a/react/features/shared-video/components/web/YoutubeVideoManager.tsx b/react/features/shared-video/components/web/YoutubeVideoManager.tsx
index 8eecf90..d85f751 100644
--- a/react/features/shared-video/components/web/YoutubeVideoManager.tsx
+++ b/react/features/shared-video/components/web/YoutubeVideoManager.tsx
@@ -189,8 +189,8 @@ class YoutubeVideoManager extends AbstractVideoManager {
     };
 
     getPlayerOptions = () => {
-        const { _isOwner, videoId } = this.props;
-        const showControls = _isOwner ? 1 : 0;
+        const { videoId } = this.props;
+        const showControls = 1;
 
         const options = {
             id: 'sharedVideoPlayer',