myetv-player 1.4.0 → 1.6.0

package/plugins/soundcloud/readme.md

@@ -0,0 +1,89 @@
+# MYETV SoundCloud Plugin
+
+**SoundCloud Plugin for MyETV Player** - Seamlessly integrates SoundCloud into MyETV Player with native controls.
+
+## Features
+
+- ✅ **Native Controls**: Play/Pause, Volume, Mute/Unmute
+- ✅ **Full Progress Bar**: Precise seek + time tooltip on mouseover
+- ✅ **Auto Restore**: Hides SoundCloud after 10 seconds
+- ✅ **Volume Slider**: Drag & drop with precise decimals (0-1)
+- ✅ **YouTube Compatible**: Same style and behavior
+- ✅ **Zero Conflicts**: Works only in plugin, doesn't touch main player
+
+## Installation
+
+1. **Add plugin to MyETV Player**:
+```
+const player = new MyETVPlayer(container, {
+plugins: [{
+name: 'soundcloud',
+src: 'myetv-player-soundcloud-plugin.js'
+}]
+});
+```
+
+## Detailed Features
+
+| Function | Implementation | Status |
+|----------|----------------|--------|
+| **Play/Pause** | `widget.bind(PLAY/PAUSE)` | ✅ |
+| **Volume** | `widget.setVolume(0-100)` | ✅ |
+| **Seek** | `widget.seekTo(ms)` | ✅ |
+| **Tooltip** | Mouseover progress bar | ✅ |
+| **Auto-hide** | 10s timeout | ✅ |
+
+
+## Configurable Options
+```
+plugins: [{
+        name: 'soundcloud',
+        src: 'myetv-player-soundcloud-plugin.js',
+        options: {
+            soundcloudUrl: 'https://soundcloud.com/artist/track',  // REQUIRED
+            debug: true,                     // Detailed logs
+            controlsDisplayTime: 10000,      // Auto-hide timeout (ms)
+            color: 'ff5500',                 // Player color (hex)
+            autoPlay: false,                 // Auto play
+            hideRelated: true,               // Hide related tracks
+            showComments: false,             // Show comments
+            showUser: true,                  // Show user info
+            showReposts: false,              // Show reposts
+            showTeaser: false,               // Show teaser
+            visual: false,                   // Waveform mode
+            showArtwork: true,               // Show artwork
+            buying: false,                   // Show buy button
+            sharing: false,                  // Show share button
+            download: false,                 // Show download button
+            showPlaycount: false             // Show play count
+        }
+    }]
+```
+
+## Compatibility
+
+- ✅ **Desktop**: Chrome, Firefox, Safari, Edge
+- ✅ **Mobile**: iOS Safari, Android Chrome
+- ✅ **Smart TV**: Fire TV, Android TV
+- ✅ **Picture-in-Picture**: Full support
+
+## Contributing
+
+1. Fork the project
+2. Create feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit (`git commit -m 'Add some AmazingFeature'`)
+4. Push (`git push origin feature/AmazingFeature`)
+5. Open Pull Request
+
+## License
+
+Distributed under the [MIT License](LICENSE).
+
+## Authors & Acknowledgments
+
+- **MYETV Team** - Main player
+- **SoundCloud Widget API** - [Documentation](https://developers.soundcloud.com/docs/api/widget)
+
+---
+
+⭐ **Star this repo if useful!** ⭐

package/plugins/youtube/myetv-player-youtube-plugin.js

@@ -320,6 +320,25 @@
             }
         }
 
+        // Helper: update menu selection highlight
+        updateMenuHeight() {
+            const menu = this.api.container.querySelector('.settings-menu');
+            if (!menu) return;
+
+            const settingsBtn = this.api.container.querySelector('.settings-btn');
+            const containerRect = this.api.container.getBoundingClientRect();
+            const btnRect = settingsBtn.getBoundingClientRect();
+
+            // space from top of container to settings button
+            const distanceFromTop = btnRect.top - containerRect.top;
+
+            // Max height = distance from top - 30px padding
+            const maxHeight = Math.max(150, distanceFromTop - 30);
+
+            menu.style.maxHeight = `${maxHeight}px !important`;
+            menu.style.overflowY = 'scroll !important';
+        }
+
         /**
          * Handle responsive layout for mobile settings
          */
@@ -334,43 +353,18 @@
                 pipBtn.style.display = 'none';
             }
 
-            // Breakpoint at 600px
-            if (containerWidth < 600) {
                 // Add max-height and scroll to settings menu on mobile
                 if (settingsMenu) {
                     const playerHeight = this.api.container.offsetHeight;
-                    const maxMenuHeight = playerHeight - 100; // Leave 100px margin from top/bottom
-
-                    settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
-                    settingsMenu.style.overflowY = 'auto';
-                    settingsMenu.style.overflowX = 'hidden';
-
-                    // Add scrollbar styling
-                    if (!document.getElementById('yt-settings-scrollbar-style')) {
-                        const scrollbarStyle = document.createElement('style');
-                        scrollbarStyle.id = 'yt-settings-scrollbar-style';
-                        scrollbarStyle.textContent = `
-                    .settings-menu::-webkit-scrollbar {
-                        width: 6px;
-                    }
-                    .settings-menu::-webkit-scrollbar-track {
-                        background: rgba(255,255,255,0.05);
-                        border-radius: 3px;
-                    }
-                    .settings-menu::-webkit-scrollbar-thumb {
-                        background: rgba(255,255,255,0.3);
-                        border-radius: 3px;
-                    }
-                    .settings-menu::-webkit-scrollbar-thumb:hover {
-                        background: rgba(255,255,255,0.5);
-                    }
-                `;
-                        document.head.appendChild(scrollbarStyle);
-                    }
+                    const settingsBtn = this.api.container.querySelector('.settings-btn');
+                    const settingsBtnRect = settingsBtn.getBoundingClientRect();
+                    const containerRect = this.api.container.getBoundingClientRect();
+
+                    // Calculate distance from top of container to settings button
+                    const distanceFromTop = settingsBtnRect.top - containerRect.top;
+
+                    const maxMenuHeight = Math.min(300, playerHeight * 0.5);
 
-                    // Firefox scrollbar
-                    settingsMenu.style.scrollbarWidth = 'thin';
-                    settingsMenu.style.scrollbarColor = 'rgba(255,255,255,0.3) transparent';
                 }
 
                 // Hide subtitles button
@@ -417,7 +411,6 @@
                         // Create trigger
                         const trigger = document.createElement('div');
                         trigger.className = 'quality-option';
-                        trigger.style.fontSize = '10px';
                         trigger.textContent = subtitlesText;
 
                         // Add arrow indicator
@@ -450,7 +443,6 @@
                             padding: 6px 12px;
                             cursor: pointer;
                             color: white;
-                            font-size: 10px;
                             white-space: normal;
                             word-wrap: break-word;
                             opacity: 0.8;
@@ -494,16 +486,19 @@
                         let isExpanded = false;
                         trigger.addEventListener('click', (e) => {
                             e.stopPropagation();
-
                             isExpanded = !isExpanded;
 
                             if (isExpanded) {
                                 rebuildOptions();
                                 optionsContainer.style.display = 'block';
                                 arrow.style.transform = 'rotate(180deg)';
+
+                                setTimeout(() => this.updateMenuHeight(), 10);
                             } else {
                                 optionsContainer.style.display = 'none';
                                 arrow.style.transform = 'rotate(0deg)';
+
+                                setTimeout(() => this.updateMenuHeight(), 10);
                             }
                         });
 
@@ -533,7 +528,6 @@
                         // Create trigger
                         const trigger = document.createElement('div');
                         trigger.className = 'quality-option';
-                        trigger.style.fontSize = '10px';
 
                         // Get current speed
                         const getCurrentSpeed = () => {
@@ -574,7 +568,6 @@
                             padding: 6px 12px;
                             cursor: pointer;
                             color: white;
-                            font-size: 10px;
                             white-space: normal;
                             word-wrap: break-word;
                             opacity: 0.8;
@@ -630,9 +623,11 @@
                                 rebuildOptions();
                                 optionsContainer.style.display = 'block';
                                 arrow.style.transform = 'rotate(180deg)';
+                                setTimeout(() => this.updateMenuHeight(), 10);
                             } else {
                                 optionsContainer.style.display = 'none';
                                 arrow.style.transform = 'rotate(0deg)';
+                                setTimeout(() => this.updateMenuHeight(), 10);
                             }
                         });
 
@@ -649,51 +644,7 @@
                         }
                     }
                 }
-            } else {
-                // Wide screen
-                if (subtitlesBtn) {
-                    subtitlesBtn.style.display = '';
-                }
-
-                // Reset settings menu styles
-                if (settingsMenu) {
-                    settingsMenu.style.maxHeight = '';
-                    settingsMenu.style.overflowY = '';
-                    settingsMenu.style.overflowX = '';
-                    settingsMenu.style.scrollbarWidth = '';
-                    settingsMenu.style.scrollbarColor = '';
-                }
-
-                // Show original speed option again
-                if (settingsMenu) {
-                    const originalSpeedOption = settingsMenu.querySelector('[data-action="speed"]');
-                    if (originalSpeedOption) {
-                        originalSpeedOption.style.display = '';
-                    }
-
-                    // Show expandable speed option again
-                    const expandableSpeedWrapper = settingsMenu.querySelector('[data-action="speed-expand"]');
-                    if (expandableSpeedWrapper) {
-                        const wrapper = expandableSpeedWrapper.closest('.settings-expandable-wrapper');
-                        if (wrapper) {
-                            wrapper.style.display = '';
-                        }
-                    }
-                }
 
-                // Remove from settings
-                if (settingsMenu) {
-                    const subtitlesWrapper = settingsMenu.querySelector('.yt-subtitles-wrapper');
-                    if (subtitlesWrapper) {
-                        subtitlesWrapper.remove();
-                    }
-
-                    const speedWrapper = settingsMenu.querySelector('.yt-speed-wrapper');
-                    if (speedWrapper) {
-                        speedWrapper.remove();
-                    }
-                }
-            }
         }
 
         hidePipFromSettingsMenuOnly() {
@@ -1047,7 +998,7 @@
         z-index: 2;
         background: transparent;
         pointer-events: ${pointerEvents};
-        cursor: default;
+        cursor: auto;
     `;
 
             this.api.container.insertBefore(this.mouseMoveOverlay, this.api.controls);
@@ -1416,14 +1367,27 @@
                 this.checkInitialCaptionState();
             }, 2500); // after 2.5s
 
-            // Initialize cursor state based on controls visibility
+            // Initialize cursor synchronization with player's auto-hide system
             if (!this.options.showYouTubeUI && this.api.player.options.hideCursor) {
-                // Check if controls are visible
-                const controlsVisible = this.api.controls && this.api.controls.classList.contains('show');
-                if (!controlsVisible) {
-                    this.hideCursor();
+                // Hook into player's hideControlsNow method
+                const originalHideControlsNow = this.api.player.hideControlsNow;
+                this.api.player.hideControlsNow = function () {
+                    originalHideControlsNow.call(this);
+                    // Cursor is already hidden by the player's hideCursor() call inside hideControlsNow
+                };
+
+                // Hook into player's showControlsNow method
+                const originalShowControlsNow = this.api.player.showControlsNow;
+                this.api.player.showControlsNow = function () {
+                    originalShowControlsNow.call(this);
+                    // Cursor is already shown by the player's showCursor() call inside showControlsNow
+                };
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Cursor sync hooks installed');
                 }
             }
+
             if (this.api.player.options.debug) console.log('YT Plugin: Setup completed');
             this.api.triggerEvent('youtubeplugin:playerready', {});
 
@@ -3470,11 +3434,67 @@
                 '3': 'BUFFERING',
                 '5': 'CUED'
             };
-            if (this.api.player.options.debug) console.log('[YT Plugin] State:', states[event.data], event.data);
 
-            // Know if video have some problems to start
+            if (this.api.player.options.debug)
+                console.log('YT Plugin State:', states[event.data], event.data);
+
+            // Handle auto-hide based on YouTube state
+            if (event.data === YT.PlayerState.PAUSED) {
+                // Video paused: show controls and CANCEL timer
+                if (this.api.player.showControlsNow) {
+                    this.api.player.showControlsNow();
+                }
+                // Clear timer to prevent controls from disappearing
+                if (this.api.player.autoHideTimer) {
+                    clearTimeout(this.api.player.autoHideTimer);
+                    this.api.player.autoHideTimer = null;
+                }
+                // Add CSS class
+                if (this.api.container) {
+                    this.api.container.classList.add('video-paused');
+                }
+
+                if (this.api.player.options.debug)
+                    console.log('YT Plugin: Video paused - controls locked visible');
+            }
+
+            if (event.data === YT.PlayerState.PLAYING) {
+                // Video playing: remove class and restart auto-hide
+                if (this.api.container) {
+                    this.api.container.classList.remove('video-paused');
+                }
+                // Restart auto-hide only if enabled
+                if (this.api.player.options.autoHide && this.api.player.autoHideInitialized) {
+                    if (this.api.player.showControlsNow) {
+                        this.api.player.showControlsNow();
+                    }
+                    if (this.api.player.resetAutoHideTimer) {
+                        this.api.player.resetAutoHideTimer();
+                    }
+                }
+
+                if (this.api.player.options.debug)
+                    console.log('YT Plugin: Video playing - auto-hide restarted');
+            }
+
+            // Handle when video fails to autoplay (stays in UNSTARTED)
+            if (event.data === YT.PlayerState.UNSTARTED || event.data === -1) {
+                // Show controls and block auto-hide
+                if (this.api.player.showControlsNow) {
+                    this.api.player.showControlsNow();
+                }
+                // Clear any active timer
+                if (this.api.player.autoHideTimer) {
+                    clearTimeout(this.api.player.autoHideTimer);
+                    this.api.player.autoHideTimer = null;
+                }
+
+                if (this.api.player.options.debug)
+                    console.log('YT Plugin: Video UNSTARTED (autoplay blocked?) - controls locked visible');
+            }
+
+            // Start timeout when video is unstarted
             if (event.data === YT.PlayerState.UNSTARTED || event.data === -1) {
-                // start timeout when video is unstarted
                 if (this.playAttemptTimeout) {
                     clearTimeout(this.playAttemptTimeout);
                 }
@@ -3484,15 +3504,14 @@
 
                     const currentState = this.ytPlayer.getPlayerState();
 
-                    // If video is unstrated after timeout, consider it restricted
+                    // If video is unstarted after timeout, consider it restricted
                     if (currentState === YT.PlayerState.UNSTARTED || currentState === -1) {
-                        if (this.api.player.options.debug) {
+                        if (this.api.player.options.debug)
                             console.log('YT Plugin: Video stuck in UNSTARTED - possibly members-only or restricted');
-                        }
 
                         // Trigger ended event
                         this.api.triggerEvent('ended', {
-                            reason: 'video_restricted_or_membership',
+                            reason: 'videorestrictedormembership',
                             state: currentState
                         });
 
@@ -3500,14 +3519,12 @@
                         this.showPosterOverlay();
 
                         // Trigger custom event
-                        this.api.triggerEvent('youtubeplugin:membershiprestricted', {
+                        this.api.triggerEvent('youtubepluginmembershiprestricted', {
                             videoId: this.videoId
                         });
                     }
-                }, 15000); // 15 seconds of timeout
-
-            } else if (event.data === YT.PlayerState.PLAYING ||
-                event.data === YT.PlayerState.BUFFERING) {
+                }, 15000); // 15 seconds timeout
+            } else if (event.data === YT.PlayerState.PLAYING || event.data === YT.PlayerState.BUFFERING) {
                 // Clear the timeout if video starts correctly
                 if (this.playAttemptTimeout) {
                     clearTimeout(this.playAttemptTimeout);
@@ -3524,9 +3541,8 @@
 
             // Handle live stream ended
             if (this.isLiveStream && event.data === YT.PlayerState.ENDED) {
-                if (this.api.player.options.debug) {
-                    console.log('[YT Plugin] 🔴➡️📹 Live stream ended (player state: ENDED)');
-                }
+                if (this.api.player.options.debug)
+                    console.log('YT Plugin: Live stream ended (player state ENDED)');
                 this.handleLiveStreamEnded();
                 return;
             }
@@ -3536,24 +3552,19 @@
                 if (event.data === YT.PlayerState.PAUSED) {
                     // Orange when paused during live
                     badge.style.background = '#ff8800';
-                    badge.textContent = '⏸ LIVE';
+                    badge.textContent = 'LIVE';
                     badge.title = 'Livestreaming in Pause';
-
-                    if (this.api.player.options.debug) {
-                        console.log('[YT Plugin] 🟠 Live paused');
-                    }
+                    if (this.api.player.options.debug)
+                        console.log('YT Plugin: Live paused');
                 } else if (event.data === YT.PlayerState.PLAYING) {
                     // Red when playing (will be checked for de-sync below)
                     badge.style.background = '#ff0000';
                     badge.textContent = 'LIVE';
                     badge.title = 'Livestreaming';
-
-                    if (this.api.player.options.debug) {
-                        console.log('[YT Plugin] 🔴 Live playing');
-                    }
                 }
             }
 
+            // Handle state changes
             switch (event.data) {
                 case YT.PlayerState.PLAYING:
                     this.api.triggerEvent('played', {});
@@ -3585,27 +3596,13 @@
                 case YT.PlayerState.ENDED:
                     this.api.triggerEvent('ended', {});
 
-                    // Show play icon (for replay)
+                    // Show play icon for replay
                     if (playIcon && pauseIcon) {
                         playIcon.classList.remove('hidden');
                         pauseIcon.classList.add('hidden');
                     }
                     break;
             }
-
-            if (event.data === YT.PlayerState.PAUSED) {
-                // add pause class
-                if (this.api.container) {
-                    this.api.container.classList.add('video-paused');
-                }
-            }
-
-            if (event.data === YT.PlayerState.PLAYING) {
-                // remove pause class
-                if (this.api.container) {
-                    this.api.container.classList.remove('video-paused');
-                }
-            }
         }
 
         onPlaybackQualityChange(event) {
@@ -3996,19 +3993,20 @@
          * Only works when showYouTubeUI is false (custom controls)
          */
         hideCursor() {
-            // Don't hide cursor if YouTube native UI is active
-            if (this.options.showYouTubeUI) {
-                return;
-            }
+            if (this.options.showYouTubeUI) return;
+            if (!this.api.player.options.hideCursor) return;
 
-            // Add hide-cursor class to MAIN PLAYER CONTAINER
-            // This ensures cursor is hidden everywhere in the player
-            if (this.api.container) {
-                this.api.container.classList.add('hide-cursor');
+            // Update main container
+            if (this.api.player && this.api.player.container) {
+                this.api.player.container.classList.add('hide-cursor');
             }
 
-            if (this.api.player.options.debug) {
-                console.log('[YT Plugin] Cursor hidden on main container');
+            // Update overlay cursor as well!
+            if (this.mouseMoveOverlay) {
+                this.mouseMoveOverlay.style.cursor = 'none';
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Overlay cursor hidden');
+                }
             }
         }
 
@@ -4016,13 +4014,17 @@
          * Show mouse cursor in YouTube player
          */
         showCursor() {
-            // Remove hide-cursor class from MAIN PLAYER CONTAINER
-            if (this.api.container) {
-                this.api.container.classList.remove('hide-cursor');
+            // Update main container
+            if (this.api.player && this.api.player.container) {
+                this.api.player.container.classList.remove('hide-cursor');
             }
 
-            if (this.api.player.options.debug) {
-                console.log('[YT Plugin] Cursor shown on main container');
+            // Update overlay cursor back to default!
+            if (this.mouseMoveOverlay) {
+                this.mouseMoveOverlay.style.cursor = 'default';
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Overlay cursor shown');
+                }
             }
         }
 
@@ -4381,18 +4383,19 @@
         }
 
         /**
-         * Parse chapters from video description
-         * Validates YouTube chapter requirements: 3+ chapters, starts at 0:00, 10+ seconds each
-         */
+ * Parse chapters from video description
+ * Validates YouTube chapter requirements: ≥3 chapters, starts at 0:00
+ */
         parseChaptersFromDescription(description) {
             if (!description) return null;
 
             const chapters = [];
+
             // Regex for timestamps: 0:00, 00:00, 0:00:00
             // Matches both "0:00 Title" and "0:00 - Title"
-            const timestampRegex = /(?:^|\n)(\d{1,2}:?\d{0,2}:?\d{2})\s*[-–—]?\s*(.+?)(?=\n|$)/gm;
-            let match;
+            const timestampRegex = /^(\d{1,2}:\d{2}(?::\d{2})?)\s*[-–—]*\s*(.+)$/gm;
 
+            let match;
             while ((match = timestampRegex.exec(description)) !== null) {
                 const timeString = match[1].trim();
                 const title = match[2].trim();
@@ -4401,7 +4404,6 @@
                 if (!title || title.length < 2) continue;
 
                 const seconds = this.parseTimeToSeconds(timeString);
-
                 if (seconds !== null) {
                     chapters.push({
                         time: seconds,
@@ -4416,27 +4418,16 @@
 
             // Validate: at least 3 chapters and first starts at 0:00
             if (chapters.length >= 3 && chapters[0].time === 0) {
-                // Validate minimum duration (10 seconds)
-                let valid = true;
-                for (let i = 0; i < chapters.length - 1; i++) {
-                    if (chapters[i + 1].time - chapters[i].time < 10) {
-                        valid = false;
-                        break;
-                    }
-                }
-
-                if (valid) {
-                    if (this.api.player.options.debug) {
-                        console.log(`YT Plugin: Found ${chapters.length} valid chapters`);
-                    }
-                    return chapters;
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] ✅ Found', chapters.length, 'valid chapters');
                 }
+                return chapters;
             }
 
             if (this.api.player.options.debug) {
-                console.log('YT Plugin: No valid chapters found (requires 3+ chapters, starting at 0:00, each 10+ seconds)');
+                console.log('[YT Plugin] ❌ No valid chapters found (requires ≥3 chapters starting at 0:00)');
+                console.log('[YT Plugin] Debug: Found', chapters.length, 'chapters, first time:', chapters[0]?.time);
             }
-
             return null;
         }