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

@@ -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 {

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() } />
         );
     }

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 { musicId } = this.props;
-        const showControls = _isOwner ? 1 : 0;
+        const showControls = 1;
 
         const options = {
             id: 'sharedMusicPlayer',

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()

react/features/shared-video/components/web/YoutubeVideoManager.tsx

@@ -189,8 +189,8 @@ class YoutubeVideoManager extends AbstractVideoManager {
     };
 
     getPlayerOptions = () => {
-        const { _isOwner, videoId } = this.props;
+        const { videoId } = this.props;
-        const showControls = _isOwner ? 1 : 0;
+        const showControls = 1;
 
         const options = {
             id: 'sharedVideoPlayer',