myetv-player 1.4.0 → 1.5.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', {});
 
@@ -3996,19 +3960,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 +3981,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 +4350,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 +4371,6 @@
                 if (!title || title.length < 2) continue;
 
                 const seconds = this.parseTimeToSeconds(timeString);
-
                 if (seconds !== null) {
                     chapters.push({
                         time: seconds,
@@ -4416,27 +4385,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;
         }