myetv-player 1.2.0 → 1.3.0

package/package.json

@@ -1,8 +1,36 @@
 {
   "name": "myetv-player",
-  "version": "1.2.0",
-  "description": "MYETV Video Player - Modular JavaScript and SCSS Build System",
+  "version": "1.3.0",
+  "description": "MYETV Video Player - Modular HTML5 video player with plugin support for YouTube, Vimeo, Twitch, Facebook, and streaming protocols (HLS/DASH)",
   "main": "dist/myetv-player.js",
+  "files": [
+    "dist/",
+    "css/",
+    "plugins/",
+    "LICENSE",
+    "README.md"
+  ],
+  "keywords": [
+    "video",
+    "player",
+    "html5",
+    "video-player",
+    "media-player",
+    "streaming",
+    "hls",
+    "dash",
+    "plugin",
+    "youtube",
+    "vimeo",
+    "twitch",
+    "facebook",
+    "cloudflare-stream",
+    "subtitles",
+    "webvtt",
+    "picture-in-picture",
+    "responsive",
+    "open-source"
+  ],
   "scripts": {
     "build": "node build.js",
     "build:js": "node build.js",
@@ -23,20 +51,10 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/OskarCosimo/myetv-video-player-opensource"
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/OskarCosimo/myetv-video-player-opensource/issues"
+  },
+  "homepage": "https://oskarcosimo.com/myetv-video-player/myetv-player-demo.html"
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-

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

@@ -36,6 +36,7 @@
             this.isPausedState = true; // Track state manually
             this.extractedBrandLogo = null; // Store reference to extracted brand logo
             this.brandLogoHideTimer = null; // Timer for auto-hide
+            this.containerHeightObserver = null; // MutationObserver for container height
 
             this.api = player.getPluginAPI ? player.getPluginAPI() : {
                 player: player,
@@ -196,16 +197,104 @@
                 this.api.video.style.display = 'none';
             }
 
-            this.twitchContainer = document.createElement('div');
-            this.twitchContainer.id = 'twitch-player-' + Date.now();
-            this.twitchContainer.style.cssText = `
-position: fixed;
-top: 0;
-left: 0;
-width: 100vw;
-height: 100vh;
-z-index: 1;
-`;
+            // Detect if we're inside an iframe
+            const isInIframe = window.self !== window.top;
+
+            // Set position: relative to container
+            this.api.container.style.position = 'relative';
+
+            if (isInIframe) {
+                // Inside iframe: use original system (no MutationObserver needed)
+                this.twitchContainer = document.createElement('div');
+                this.twitchContainer.id = `twitch-player-${Date.now()}`;
+
+                this.twitchContainer.style.cssText = `
+            position: absolute !important;
+            top: 0 !important;
+            left: 0 !important;
+            width: 100% !important;
+            height: 100% !important;
+            z-index: 1 !important;
+        `;
+
+                if (this.api.player.options.debug) {
+                    console.log('🎮 Twitch Plugin: Inside iframe - using absolute positioning');
+                }
+
+            } else {
+                // Outside iframe: lock height with MutationObserver
+                const containerHeight = this.api.container.offsetHeight;
+                if (containerHeight > 0) {
+                    this.api.container.style.height = containerHeight + 'px';
+                    if (this.api.player.options.debug) {
+                        console.log('🎮 Twitch Plugin: Container height locked to', containerHeight + 'px');
+                    }
+                } else {
+                    // Fallback if offsetHeight is 0
+                    this.api.container.style.height = '500px';
+                    if (this.api.player.options.debug) {
+                        console.log('🎮 Twitch Plugin: Container height fallback to 500px');
+                    }
+                }
+
+                // MutationObserver to protect container height from being reset
+                const lockedHeight = this.api.container.style.height; // Save locked height
+
+                this.containerHeightObserver = new MutationObserver((mutations) => {
+                    mutations.forEach((mutation) => {
+                        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+                            const currentHeight = this.api.container.style.height;
+
+                            // Check if we're in fullscreen
+                            const isFullscreen = document.fullscreenElement ||
+                                document.webkitFullscreenElement ||
+                                document.mozFullScreenElement ||
+                                document.msFullscreenElement;
+
+                            // If in fullscreen, allow height: 100%
+                            if (isFullscreen) {
+                                if (currentHeight !== '100%') {
+                                    this.api.container.style.height = '100%';
+                                    if (this.api.player.options.debug) {
+                                        console.log('🎮 Twitch Plugin: Fullscreen mode - height set to 100%');
+                                    }
+                                }
+                            } else {
+                                // If NOT in fullscreen and height was changed to 100% or removed, restore locked height
+                                if (currentHeight !== lockedHeight && (currentHeight === '100%' || currentHeight === '' || currentHeight === 'auto')) {
+                                    this.api.container.style.height = lockedHeight;
+
+                                    if (this.api.player.options.debug) {
+                                        console.log('🎮 Twitch Plugin: Container height restored to', lockedHeight);
+                                    }
+                                }
+                            }
+                        }
+                    });
+                });
+
+                // Observe changes to container's style attribute
+                this.containerHeightObserver.observe(this.api.container, {
+                    attributes: true,
+                    attributeFilter: ['style']
+                });
+
+                if (this.api.player.options.debug) {
+                    console.log('🎮 Twitch Plugin: MutationObserver active on container');
+                }
+
+                this.twitchContainer = document.createElement('div');
+                this.twitchContainer.id = `twitch-player-${Date.now()}`;
+
+                this.twitchContainer.style.cssText = `
+            position: absolute !important;
+            top: 0 !important;
+            left: 0 !important;
+            width: 100% !important;
+            height: 100% !important;
+            z-index: 1 !important;
+        `;
+            }
 
             this.api.container.appendChild(this.twitchContainer);
 
@@ -231,9 +320,26 @@ z-index: 1;
             }
 
             this.twitchPlayer = new Twitch.Player(this.twitchContainer.id, playerOptions);
+
+            setTimeout(() => {
+                const twitchIframe = this.twitchContainer.querySelector('iframe');
+                if (twitchIframe) {
+                    twitchIframe.style.cssText = `
+                position: absolute !important;
+                top: 0 !important;
+                left: 0 !important;
+                width: 100% !important;
+                height: 100% !important;
+            `;
+                    if (this.api.player.options.debug) {
+                        console.log('🎮 Twitch Plugin: Iframe dimensions forced to 100%');
+                    }
+                }
+            }, 200);
+
             this.setupEventListeners();
 
-            if (this.api.player.options.debug) console.log('🎮 Twitch Plugin: Player created');
+            if (this.api.player.options.debug) console.log('🎮 Twitch Plugin: Player created (iframe: ' + isInIframe + ')');
 
             this.api.triggerEvent('twitchplugin:playerready', {
                 channel: this.options.channel,
@@ -436,6 +542,7 @@ bottom: 35px !important;
 right: 20px !important;
 z-index: 2000 !important;
 pointer-events: auto !important;
+cursor: pointer !important;
 display: block !important;
 opacity: 0 !important;
 transition: opacity 0.3s ease !important;
@@ -760,6 +867,13 @@ transition: opacity 0.3s ease !important;
                 this.brandLogoHideTimer = null;
             }
 
+            // Disconnect MutationObserver
+            if (this.containerHeightObserver) {
+                this.containerHeightObserver.disconnect();
+                this.containerHeightObserver = null;
+                if (this.api.player.options.debug) console.log('🎮 Twitch Plugin: MutationObserver disconnected');
+            }
+
             // Remove mouse event listeners for brand logo auto-hide
             if (this.api.container._brandLogoMouseHandler) {
                 this.api.container.removeEventListener('mousemove', this.api.container._brandLogoMouseHandler);

package/plugins/vimeo/myetv-player-vimeo.js

@@ -65,6 +65,8 @@
                 console.error('🎬 Vimeo Plugin: videoId or videoUrl is required');
                 return;
             }
+            // Ensure video wrapper has 100% height for proper fullscreen positioning
+            this.player.container.style.height = '100%';
         }
 
         /**
@@ -764,43 +766,52 @@
         /* Controlbar gradient - dark opaque at bottom, semi-transparent at top */
         /* ONLY applied when Vimeo plugin is active */
         .video-wrapper.vimeo-active .controls {
-            background: linear-gradient(
-                to top,
-                rgba(0, 0, 0, ${controlBarOpacity}) 0%,           /* Maximum opacity at bottom */
-                rgba(0, 0, 0, ${controlBarOpacity * 0.89}) 20%,   /* 89% of max opacity */
-                rgba(0, 0, 0, ${controlBarOpacity * 0.74}) 40%,   /* 74% */
-                rgba(0, 0, 0, ${controlBarOpacity * 0.53}) 60%,   /* 53% */
-                rgba(0, 0, 0, ${controlBarOpacity * 0.32}) 80%,   /* 32% */
-                rgba(0, 0, 0, ${controlBarOpacity * 0.21}) 100%   /* 21% at top */
+            background: linear-gradient(to top,
+                rgba(0, 0, 0, ${controlBarOpacity * 0}) 0%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.89}) 20%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.74}) 40%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.53}) 60%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.32}) 80%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.21}) 100%
             ) !important;
             backdrop-filter: blur(3px);
             min-height: 60px;
             padding-bottom: 10px;
         }
-        
+
+        /* FIX: Ensure controlbar stays at bottom in fullscreen */
+        .video-wrapper.vimeo-active:-webkit-full-screen .controls,
+        .video-wrapper.vimeo-active:-moz-full-screen .controls,
+        .video-wrapper.vimeo-active:fullscreen .controls {
+            position: fixed !important;
+            bottom: 0 !important;
+            left: 0 !important;
+            right: 0 !important;
+            z-index: 999999 !important;
+        }
+
         /* Title overlay gradient - dark opaque at top, semi-transparent at bottom */
         /* ONLY applied when Vimeo plugin is active */
         .video-wrapper.vimeo-active .title-overlay {
-            background: linear-gradient(
-                to bottom,
-                rgba(0, 0, 0, ${titleOverlayOpacity}) 0%,           /* Maximum opacity at top */
-                rgba(0, 0, 0, ${titleOverlayOpacity * 0.89}) 20%,   /* 89% of max opacity */
-                rgba(0, 0, 0, ${titleOverlayOpacity * 0.74}) 40%,   /* 74% */
-                rgba(0, 0, 0, ${titleOverlayOpacity * 0.53}) 60%,   /* 53% */
-                rgba(0, 0, 0, ${titleOverlayOpacity * 0.32}) 80%,   /* 32% */
-                rgba(0, 0, 0, ${titleOverlayOpacity * 0.21}) 100%   /* 21% at bottom */
+            background: linear-gradient(to bottom,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0}) 0%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.89}) 20%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.74}) 40%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.53}) 60%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.32}) 80%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.21}) 100%
             ) !important;
             backdrop-filter: blur(3px);
             min-height: 80px;
             padding-top: 20px;
         }
-        
+
         /* Keep controlbar visible when video is paused */
         .video-wrapper.vimeo-active.video-paused .controls.show {
             opacity: 1 !important;
             visibility: visible !important;
         }
-        
+
         /* Keep title overlay visible when video is paused */
         .video-wrapper.vimeo-active.video-paused .title-overlay.show {
             opacity: 1 !important;
@@ -945,26 +956,40 @@
                 console.log('🎬 Vimeo Plugin: Showing Vimeo native controls');
             }
 
-            const iframe = this.player.container.querySelector('iframe');
             const controlbar = this.player.container.querySelector('.controls');
             const titleOverlay = this.player.container.querySelector('.title-overlay');
+            const mouseMoveOverlay = this.player.container.querySelector('.vimeo-mousemove-overlay');
+            const vimeoContainer = this.player.container.querySelector('.vimeo-player-container');
 
-            if (iframe) {
-                // Bring iframe to front
-                iframe.style.pointerEvents = 'auto';
-                iframe.style.zIndex = '9999';
+            // Remove inline styles from mousemove overlay
+            if (mouseMoveOverlay) {
+                this.savedMouseMoveStyle = mouseMoveOverlay.getAttribute('style');
+                mouseMoveOverlay.removeAttribute('style');
+            }
 
-                // Hide controlbar and title
-                if (controlbar) controlbar.style.display = 'none';
-                if (titleOverlay) titleOverlay.style.display = 'none';
+            // Remove "vimeo-container-no-controls" class from vimeo container
+            if (vimeoContainer) {
+                vimeoContainer.classList.remove('vimeo-container-no-controls');
+            }
 
-                // Auto-restore after 10 seconds
-                this.vimeoControlsTimeout = setTimeout(() => {
-                    if (this.options.debug) {
-                        console.log('🎬 Vimeo Plugin: Restoring custom controls after 10 seconds');
-                    }
-                    this.hideVimeoControls();
-                }, 10000);
+            // Hide MYETV controls
+            if (controlbar) {
+                controlbar.style.display = 'none';
+            }
+            if (titleOverlay) {
+                titleOverlay.style.display = 'none';
+            }
+
+            // Auto-restore after 10 seconds
+            this.vimeoControlsTimeout = setTimeout(() => {
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo Plugin: Restoring custom controls after 10 seconds');
+                }
+                this.hideVimeoControls();
+            }, 10000);
+
+            if (this.options.debug) {
+                console.log('🎬 Vimeo Plugin: Vimeo native controls enabled');
             }
         }
 
@@ -974,31 +999,37 @@
                 console.log('🎬 Vimeo Plugin: Hiding Vimeo native controls');
             }
 
-            // Clear timeout if exists
             if (this.vimeoControlsTimeout) {
                 clearTimeout(this.vimeoControlsTimeout);
                 this.vimeoControlsTimeout = null;
             }
 
-            const iframe = this.player.container.querySelector('iframe');
             const controlbar = this.player.container.querySelector('.controls');
             const titleOverlay = this.player.container.querySelector('.title-overlay');
+            const mouseMoveOverlay = this.player.container.querySelector('.vimeo-mousemove-overlay');
+            const vimeoContainer = this.player.container.querySelector('.vimeo-player-container');
 
-            if (iframe) {
-                // Disable clicks on Vimeo controls
-                iframe.style.pointerEvents = 'none';
-                iframe.style.zIndex = '1';
+            // Restore inline styles to mousemove overlay
+            if (mouseMoveOverlay && this.savedMouseMoveStyle) {
+                mouseMoveOverlay.setAttribute('style', this.savedMouseMoveStyle);
+                this.savedMouseMoveStyle = null;
+            }
 
-                // Restore controlbar and title
-                if (controlbar) {
-                    controlbar.style.display = '';
-                    controlbar.style.zIndex = '10';
-                }
-                if (titleOverlay) titleOverlay.style.display = '';
+            // Add back "vimeo-container-no-controls" class
+            if (vimeoContainer) {
+                vimeoContainer.classList.add('vimeo-container-no-controls');
+            }
 
-                if (this.options.debug) {
-                    console.log('🎬 Vimeo Plugin: Custom controls restored');
-                }
+            // Show MYETV controls
+            if (controlbar) {
+                controlbar.style.display = '';
+            }
+            if (titleOverlay) {
+                titleOverlay.style.display = '';
+            }
+
+            if (this.options.debug) {
+                console.log('🎬 Vimeo Plugin: Custom controls restored');
             }
         }
 

package/plugins/youtube/README.md

@@ -101,7 +101,7 @@ const player = new MYETVPlayer('myVideo', {
             // YouTube video ID (required if not using auto-detection)
             videoId: 'dQw4w9WgXcQ',
 
-            // YouTube Data API key (optional, for future features)
+            // YouTube Data API key (optional, for improved features)
             apiKey: null,
 
             // Auto-play video on load
@@ -113,6 +113,9 @@ const player = new MYETVPlayer('myVideo', {
             // Show the button on the controlbar to enable the YouTube native controls temporarily
             showNativeControlsButton: true,
 
+            // Extract and show the Youtube chapters (API Key is required)
+            showYoutubeChapters : true,
+
             controlBarOpacity: 0.95,     // The controlbar opacity or semi-transparency or transparency - values: from 0 to 1
 
             titleOverlayOpacity: 0.95,    // The overlay title opacity or semi-transparency or transparency - values: from 0 to 1
@@ -129,7 +132,7 @@ const player = new MYETVPlayer('myVideo', {
             // Enable quality control in player UI
             enableQualityControl: true,
 
-            // enable channel information retrieval (NEED THE APIKEY TO WORK)
+            // enable channel information retrieval (API key is required)
             enableChannelWatermark: false,
 
             // Set the default language for auto subtitles