FIX: Focus video volume control interaction

Volume Control Integration:
- Mapped focus-video-volume slider to BaseVideoPlayer controls
- Added proper event listeners for focus volume slider
- Enhanced setVolume override to update focus-specific elements
- Added debugging logs for volume control interactions

 Focus UI Fixes:
- Volume slider now properly interactive in focus sessions
- Volume display updates correctly with slider changes
- Maintains focus-specific styling while leveraging BaseVideoPlayer functionality
- Resolves static volume slider issue in focus interruption

src/features/media/focusVideoPlayer.js

@@ -34,6 +34,28 @@ class FocusVideoPlayer extends BaseVideoPlayer {
         // Focus-specific elements
         this.videoInfo = this.container.querySelector('#video-info') || this.container.querySelector('.video-info');
         this.volumeDisplay = document.getElementById('focus-volume-display');
+        
+        // Map focus video elements to BaseVideoPlayer expected IDs
+        this.mapFocusElementsToBasePlayer();
+    }
+
+    /**
+     * Map existing focus video elements to BaseVideoPlayer control structure
+     */
+    mapFocusElementsToBasePlayer() {
+        // Find the focus volume slider and map it to what BaseVideoPlayer expects
+        const focusVolumeSlider = document.getElementById('focus-video-volume');
+        if (focusVolumeSlider) {
+            // Add the ID that BaseVideoPlayer looks for
+            focusVolumeSlider.id = 'focus-video-volume'; // Keep original
+            focusVolumeSlider.classList.add('volume-slider'); // Add class BaseVideoPlayer looks for
+            
+            // Manually assign to controls since BaseVideoPlayer already initialized
+            if (this.controls) {
+                this.controls.volume = focusVolumeSlider;
+                console.log('🧘 🎛️ Mapped focus volume slider to BaseVideoPlayer controls');
+            }
+        }
     }
 
     attachFocusEventListeners() {
@@ -51,11 +73,15 @@ class FocusVideoPlayer extends BaseVideoPlayer {
         this.videoElement.addEventListener('error', (e) => this.handleFocusVideoError(e));
 
         // Volume control with display update
-        if (this.controls.volume && this.volumeDisplay) {
-            this.controls.volume.addEventListener('input', (e) => {
-                this.setVolume(e.target.value / 100);
+        const focusVolumeSlider = document.getElementById('focus-video-volume');
+        if (focusVolumeSlider && this.volumeDisplay) {
+            focusVolumeSlider.addEventListener('input', (e) => {
+                const volume = e.target.value / 100;
+                this.setVolume(volume);
                 this.volumeDisplay.textContent = Math.round(e.target.value) + '%';
+                console.log(`🧘 🎛️ Focus volume changed to: ${Math.round(e.target.value)}%`);
             });
+            console.log('🧘 🎛️ Focus volume control event listener attached');
         }
     }
 
@@ -65,16 +91,22 @@ class FocusVideoPlayer extends BaseVideoPlayer {
             return;
         }
 
+        console.log('🧘 🔍 Debugging video manager:', videoManager);
+        
         this.videoLibrary = [];
         
         // Check if videoManager has videoLibrary structure
         if (videoManager.videoLibrary) {
+            console.log('🧘 📚 Video library structure found:', videoManager.videoLibrary);
             const categories = ['task', 'background', 'reward', 'punishment'];
             
             for (const category of categories) {
                 const videos = videoManager.videoLibrary[category] || [];
                 this.videoLibrary.push(...videos);
                 console.log(`🧘 📹 Found ${videos.length} videos in ${category} category`);
+                if (videos.length > 0) {
+                    console.log(`🧘 📋 First video in ${category}:`, videos[0]);
+                }
             }
         } else if (videoManager.getVideosByCategory) {
             // Fallback for different video manager implementations
@@ -85,6 +117,7 @@ class FocusVideoPlayer extends BaseVideoPlayer {
             }
         } else {
             console.warn('🧘 ⚠️ Video manager structure not recognized');
+            console.log('🧘 🔍 Available methods:', Object.getOwnPropertyNames(videoManager));
         }
 
         console.log(`🧘 🎬 Initialized focus video library with ${this.videoLibrary.length} videos`);
@@ -193,9 +226,17 @@ class FocusVideoPlayer extends BaseVideoPlayer {
     // Override volume setting to update focus display
     setVolume(volume) {
         super.setVolume(volume);
+        
+        // Update focus-specific elements
         if (this.volumeDisplay) {
             this.volumeDisplay.textContent = Math.round(volume * 100) + '%';
         }
+        
+        // Update focus volume slider
+        const focusVolumeSlider = document.getElementById('focus-video-volume');
+        if (focusVolumeSlider) {
+            focusVolumeSlider.value = Math.round(volume * 100);
+        }
     }
 
     // Cleanup method for focus session end