myetv-player 1.6.6 → 1.6.7

package/dist/myetv-player.js

@@ -830,6 +830,9 @@ constructor(videoElement, options = {}) {
         hls: false
     };
 
+    this.settingsMenuOriginalParent = null;
+    this.settingsMenuInModal = false;
+
     this.lastTimeUpdate = 0; // For throttling timeupdate events
     // Inject default styles
     this.injectDefaultControlbarStyles();
@@ -4135,6 +4138,45 @@ createMoreInfoModal() {
 openMoreInfoModal() {
     if (!this.moreinfoModal) return;
 
+    // If settings menu is in modal, restore it first
+    if (this.settingsMenuInModal) {
+        const settingsMenu = this.moreinfoModal.querySelector('.settings-menu');
+
+        if (settingsMenu && this.settingsMenuOriginalParent) {
+            // Restore menu to original position
+            this.settingsMenuOriginalParent.appendChild(settingsMenu);
+
+            // Reset menu styles
+            settingsMenu.style.position = '';
+            settingsMenu.style.top = '';
+            settingsMenu.style.right = '';
+            settingsMenu.style.opacity = '';
+            settingsMenu.style.visibility = '';
+            settingsMenu.style.transform = '';
+            settingsMenu.style.display = '';
+            settingsMenu.style.maxHeight = '';
+            settingsMenu.classList.remove('active');
+
+            this.settingsMenuInModal = false;
+
+            if (this.options.debug) {
+                console.log('[More Info] Menu restored before showing more info');
+            }
+        }
+    }
+
+    // Get modal elements
+    const modalTitle = this.moreinfoModal.querySelector('.moreinfo-modal-title');
+    const modalBody = this.moreinfoModal.querySelector('.moreinfo-modal-body');
+
+    if (!modalTitle || !modalBody) return;
+
+    // Set content for more info
+    modalTitle.textContent = this.decodeHTMLEntities(this.options.moreinfoTitle || '');
+    modalBody.innerHTML = this.decodeHTMLEntities(this.options.moreinfoDescription || '');
+    modalBody.className = 'moreinfo-modal-body'; // Reset class (remove settings-modal-body)
+
+    // Show modal
     this.moreinfoModal.style.display = 'flex';
 
     if (this.options.debug) {
@@ -4149,10 +4191,140 @@ openMoreInfoModal() {
 closeMoreInfoModal() {
     if (!this.moreinfoModal) return;
 
+    // Check if settings menu needs to be restored (only if it's in modal)
+    if (this.settingsMenuInModal) {
+        const settingsMenu = this.moreinfoModal.querySelector('.settings-menu');
+
+        if (settingsMenu && this.settingsMenuOriginalParent) {
+            // Restore menu to original position
+            this.settingsMenuOriginalParent.appendChild(settingsMenu);
+
+            // Reset menu styles
+            settingsMenu.style.position = '';
+            settingsMenu.style.top = '';
+            settingsMenu.style.right = '';
+            settingsMenu.style.opacity = '';
+            settingsMenu.style.visibility = '';
+            settingsMenu.style.transform = '';
+            settingsMenu.style.display = '';
+            settingsMenu.style.maxHeight = '';
+            settingsMenu.classList.remove('active');
+
+            this.settingsMenuInModal = false;
+
+            if (this.options.debug) {
+                console.log('[Settings Modal] Menu restored to original position');
+            }
+        }
+    }
+
     this.moreinfoModal.style.display = 'none';
 
     if (this.options.debug) {
-        console.log('[More Info] Modal closed');
+        console.log('[Modal] Modal closed');
+    }
+}
+
+/**
+ * Open settings menu in modal
+ * @returns {void}
+ */
+openSettingsInModal() {
+    if (!this.moreinfoModal) return;
+
+    // Get the settings menu element
+    const settingsMenu = this.container?.querySelector('.settings-menu');
+    if (!settingsMenu) {
+        console.error('[Settings Modal] Settings menu not found!');
+        return;
+    }
+
+    // IMPORTANT: Only populate if menu is empty (first time)
+    if (settingsMenu.children.length === 0) {
+        this.populateSettingsMenu();
+
+        if (this.options.debug) {
+            console.log('[Settings Modal] Menu populated for first time');
+        }
+    }
+
+    // Get modal elements
+    const modalTitle = this.moreinfoModal.querySelector('.moreinfo-modal-title');
+    const modalBody = this.moreinfoModal.querySelector('.moreinfo-modal-body');
+
+    if (!modalTitle || !modalBody) return;
+
+    // Set modal title
+    modalTitle.textContent = this.t('settings_menu');
+
+    // CRITICAL: Move (not clone) the actual settings menu into the modal
+    modalBody.innerHTML = ''; // Clear modal body
+
+    // Save reference to original parent for restoration later
+    if (!this.settingsMenuOriginalParent) {
+        this.settingsMenuOriginalParent = settingsMenu.parentNode;
+    }
+
+    // Move the menu into modal body
+    modalBody.appendChild(settingsMenu);
+    modalBody.className = 'moreinfo-modal-body settings-modal-body';
+
+    // Make menu visible (remove dropdown positioning)
+    settingsMenu.style.position = 'relative';
+    settingsMenu.style.top = 'auto';
+    settingsMenu.style.right = 'auto';
+    settingsMenu.style.opacity = '1';
+    settingsMenu.style.visibility = 'visible';
+    settingsMenu.style.transform = 'none';
+    settingsMenu.style.display = 'block';
+    settingsMenu.style.maxHeight = 'none';
+    settingsMenu.classList.add('active');
+
+    // Mark that settings menu is in modal
+    this.settingsMenuInModal = true;
+
+    // Show modal
+    this.moreinfoModal.style.display = 'flex';
+
+    // Add event delegation for "More Info" button
+    this.addModalEventDelegation(modalBody);
+
+    if (this.options.debug) {
+        console.log('[Settings Modal] Modal opened - menu moved into modal');
+    }
+}
+
+/**
+ * Add event delegation for modal-specific actions
+ * @param {HTMLElement} modalBody
+ */
+addModalEventDelegation(modalBody) {
+    if (!modalBody) return;
+
+    // Remove previous listener if exists
+    if (this.modalClickHandler) {
+        modalBody.removeEventListener('click', this.modalClickHandler);
+    }
+
+    // Create new handler
+    this.modalClickHandler = (e) => {
+        // Handle "More Information" button
+        const moreInfoBtn = e.target.closest('[data-action="moreinfo"]');
+        if (moreInfoBtn) {
+            e.stopPropagation();
+            if (this.options.debug) {
+                console.log('[Settings Modal] More Info clicked');
+            }
+            this.openMoreInfoModal();
+            return;
+        }
+    };
+
+    // Add event listener
+    modalBody.addEventListener('click', this.modalClickHandler);
+
+    if (this.options.debug) {
+        console.log('[Settings Modal] Event delegation added for More Info');
     }
 }
 
@@ -4296,44 +4468,20 @@ bindSettingsMenuEvents() {
 
     if (!settingsMenu || !settingsBtn) return;
 
-    // Toggle menu on button click
+    // Open settings in modal
     settingsBtn.addEventListener('click', (e) => {
         e.stopPropagation();
-        settingsMenu.classList.toggle('active');
-
-        // When menu is opened, set max height and overflow
-        if (settingsMenu.classList.contains('active')) {
-            const containerRect = this.container.getBoundingClientRect();
-            const btnRect = settingsBtn.getBoundingClientRect();
-
-            // Calculate available space below the button
-            const spaceBelow = containerRect.bottom - btnRect.bottom - 30; // 30px margin
-
-            // Minimum 300px, maximum 600px or available space
-            const maxMenuHeight = Math.max(300, Math.min(600, spaceBelow));
-
-            settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
-            settingsMenu.style.overflowY = 'auto';
-            settingsMenu.style.overflowX = 'hidden';
-
-            if (this.options.debug) {
-                console.log(`Settings menu opened: height=${maxMenuHeight}px (available=${spaceBelow}px)`);
-            }
-        } else {
-            // Reset when closing
-            settingsMenu.style.maxHeight = '600px'; // Default max height
-            settingsMenu.style.overflowY = 'auto';
-        }
+        this.openSettingsInModal();
     });
 
-    // Close menu when clicking outside
+    // Close menu when clicking outside (for when menu is back in original position)
     document.addEventListener('click', (e) => {
         if (!settingsBtn?.contains(e.target) && !settingsMenu?.contains(e.target)) {
             settingsMenu?.classList.remove('active');
         }
     });
 
-    // Manage clicks inside the menu
+    // Manage clicks inside the menu (this handles speed, subtitles, pip, etc.)
     settingsMenu.addEventListener('click', (e) => {
         e.stopPropagation();
 
@@ -4356,7 +4504,7 @@ bindSettingsMenuEvents() {
             return;
         }
 
-        // Handle direct actions (like PiP)
+        // Handle direct actions (PiP, More Info, etc.)
         if (e.target.classList.contains('settings-option') || e.target.closest('.settings-option')) {
             const option = e.target.classList.contains('settings-option') ? e.target : e.target.closest('.settings-option');
             const action = option.getAttribute('data-action');
@@ -4368,16 +4516,15 @@ bindSettingsMenuEvents() {
 
             // Handle More Info action
             if (action === 'moreinfo') {
+                if (this.options.debug) {
+                    console.log('[Settings] More Info clicked');
+                }
                 this.openMoreInfoModal();
-                // Close settings menu
-                settingsMenu.classList.remove('active');
-                const settingsBtn = this.container?.querySelector('.settings-btn');
-                if (settingsBtn) settingsBtn.classList.remove('active');
                 return;
             }
         }
 
-        // Handle submenu actions
+        // Handle submenu actions (speed, subtitles)
         if (e.target.classList.contains('settings-suboption')) {
             const wrapper = e.target.closest('.settings-expandable-wrapper');
             const trigger = wrapper.querySelector('.expandable-trigger');
@@ -4401,6 +4548,10 @@ bindSettingsMenuEvents() {
 
                     // Trigger event
                     this.triggerEvent('speedchange', { speed, previousSpeed: this.video.playbackRate });
+
+                    if (this.options.debug) {
+                        console.log('[Settings] Speed changed to', speed);
+                    }
                 }
             } else if (action === 'subtitles_expand') {
                 const trackData = e.target.getAttribute('data-track');
@@ -4421,9 +4572,17 @@ bindSettingsMenuEvents() {
                     const subtitlesLabel = this.t('subtitles') || 'Subtitles';
                     label.innerHTML = `${subtitlesLabel} <strong>${e.target.textContent}</strong>`;
                 }
+
+                if (this.options.debug) {
+                    console.log('[Settings] Subtitle changed to', trackData);
+                }
             }
         }
     });
+
+    if (this.options.debug) {
+        console.log('[Settings] Menu events bound');
+    }
 }
 
 /* TITLE OVERLAY MANAGEMENT */

package/dist/myetv-player.min.js

@@ -769,6 +769,9 @@ constructor(videoElement, options = {}) {
  hls: false
  };
 
+ this.settingsMenuOriginalParent = null;
+ this.settingsMenuInModal = false;
+
  this.lastTimeUpdate = 0; // For throttling timeupdate events
 
  this.injectDefaultControlbarStyles();
@@ -3739,6 +3742,40 @@ createMoreInfoModal() {
 openMoreInfoModal() {
  if (!this.moreinfoModal) return;
 
+ if (this.settingsMenuInModal) {
+ const settingsMenu = this.moreinfoModal.querySelector('.settings-menu');
+
+ if (settingsMenu && this.settingsMenuOriginalParent) {
+
+ this.settingsMenuOriginalParent.appendChild(settingsMenu);
+
+ settingsMenu.style.position = '';
+ settingsMenu.style.top = '';
+ settingsMenu.style.right = '';
+ settingsMenu.style.opacity = '';
+ settingsMenu.style.visibility = '';
+ settingsMenu.style.transform = '';
+ settingsMenu.style.display = '';
+ settingsMenu.style.maxHeight = '';
+ settingsMenu.classList.remove('active');
+
+ this.settingsMenuInModal = false;
+
+ if (this.options.debug) {
+ console.log('[More Info] Menu restored before showing more info');
+ }
+ }
+ }
+
+ const modalTitle = this.moreinfoModal.querySelector('.moreinfo-modal-title');
+ const modalBody = this.moreinfoModal.querySelector('.moreinfo-modal-body');
+
+ if (!modalTitle || !modalBody) return;
+
+ modalTitle.textContent = this.decodeHTMLEntities(this.options.moreinfoTitle || '');
+ modalBody.innerHTML = this.decodeHTMLEntities(this.options.moreinfoDescription || '');
+ modalBody.className = 'moreinfo-modal-body'; // Reset class (remove settings-modal-body)
+
  this.moreinfoModal.style.display = 'flex';
 
  if (this.options.debug) {
@@ -3749,10 +3786,116 @@ openMoreInfoModal() {
 closeMoreInfoModal() {
  if (!this.moreinfoModal) return;
 
+ if (this.settingsMenuInModal) {
+ const settingsMenu = this.moreinfoModal.querySelector('.settings-menu');
+
+ if (settingsMenu && this.settingsMenuOriginalParent) {
+
+ this.settingsMenuOriginalParent.appendChild(settingsMenu);
+
+ settingsMenu.style.position = '';
+ settingsMenu.style.top = '';
+ settingsMenu.style.right = '';
+ settingsMenu.style.opacity = '';
+ settingsMenu.style.visibility = '';
+ settingsMenu.style.transform = '';
+ settingsMenu.style.display = '';
+ settingsMenu.style.maxHeight = '';
+ settingsMenu.classList.remove('active');
+
+ this.settingsMenuInModal = false;
+
+ if (this.options.debug) {
+ console.log('[Settings Modal] Menu restored to original position');
+ }
+ }
+ }
+
  this.moreinfoModal.style.display = 'none';
 
  if (this.options.debug) {
- console.log('[More Info] Modal closed');
+ console.log('[Modal] Modal closed');
+ }
+}
+
+openSettingsInModal() {
+ if (!this.moreinfoModal) return;
+
+ const settingsMenu = this.container?.querySelector('.settings-menu');
+ if (!settingsMenu) {
+ console.error('[Settings Modal] Settings menu not found!');
+ return;
+ }
+
+ if (settingsMenu.children.length === 0) {
+ this.populateSettingsMenu();
+
+ if (this.options.debug) {
+ console.log('[Settings Modal] Menu populated for first time');
+ }
+ }
+
+ const modalTitle = this.moreinfoModal.querySelector('.moreinfo-modal-title');
+ const modalBody = this.moreinfoModal.querySelector('.moreinfo-modal-body');
+
+ if (!modalTitle || !modalBody) return;
+
+ modalTitle.textContent = this.t('settings_menu');
+
+ modalBody.innerHTML = ''; // Clear modal body
+
+ if (!this.settingsMenuOriginalParent) {
+ this.settingsMenuOriginalParent = settingsMenu.parentNode;
+ }
+
+ modalBody.appendChild(settingsMenu);
+ modalBody.className = 'moreinfo-modal-body settings-modal-body';
+
+ settingsMenu.style.position = 'relative';
+ settingsMenu.style.top = 'auto';
+ settingsMenu.style.right = 'auto';
+ settingsMenu.style.opacity = '1';
+ settingsMenu.style.visibility = 'visible';
+ settingsMenu.style.transform = 'none';
+ settingsMenu.style.display = 'block';
+ settingsMenu.style.maxHeight = 'none';
+ settingsMenu.classList.add('active');
+
+ this.settingsMenuInModal = true;
+
+ this.moreinfoModal.style.display = 'flex';
+
+ this.addModalEventDelegation(modalBody);
+
+ if (this.options.debug) {
+ console.log('[Settings Modal] Modal opened - menu moved into modal');
+ }
+}
+
+addModalEventDelegation(modalBody) {
+ if (!modalBody) return;
+
+ if (this.modalClickHandler) {
+ modalBody.removeEventListener('click', this.modalClickHandler);
+ }
+
+ this.modalClickHandler = (e) => {
+
+ const moreInfoBtn = e.target.closest('[data-action="moreinfo"]');
+ if (moreInfoBtn) {
+ e.stopPropagation();
+ if (this.options.debug) {
+ console.log('[Settings Modal] More Info clicked');
+ }
+ this.openMoreInfoModal();
+ return;
+ }
+ };
+
+ modalBody.addEventListener('click', this.modalClickHandler);
+
+ if (this.options.debug) {
+ console.log('[Settings Modal] Event delegation added for More Info');
  }
 }
 
@@ -3882,28 +4025,7 @@ bindSettingsMenuEvents() {
 
  settingsBtn.addEventListener('click', (e) => {
  e.stopPropagation();
- settingsMenu.classList.toggle('active');
-
- if (settingsMenu.classList.contains('active')) {
- const containerRect = this.container.getBoundingClientRect();
- const btnRect = settingsBtn.getBoundingClientRect();
-
- const spaceBelow = containerRect.bottom - btnRect.bottom - 30; // 30px margin
-
- const maxMenuHeight = Math.max(300, Math.min(600, spaceBelow));
-
- settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
- settingsMenu.style.overflowY = 'auto';
- settingsMenu.style.overflowX = 'hidden';
-
- if (this.options.debug) {
- console.log(`Settings menu opened: height=${maxMenuHeight}px (available=${spaceBelow}px)`);
- }
- } else {
-
- settingsMenu.style.maxHeight = '600px'; // Default max height
- settingsMenu.style.overflowY = 'auto';
- }
+ this.openSettingsInModal();
  });
 
  document.addEventListener('click', (e) => {
@@ -3943,11 +4065,10 @@ bindSettingsMenuEvents() {
  }
 
  if (action === 'moreinfo') {
+ if (this.options.debug) {
+ console.log('[Settings] More Info clicked');
+ }
  this.openMoreInfoModal();
-
- settingsMenu.classList.remove('active');
- const settingsBtn = this.container?.querySelector('.settings-btn');
- if (settingsBtn) settingsBtn.classList.remove('active');
  return;
  }
  }
@@ -3972,6 +4093,10 @@ bindSettingsMenuEvents() {
  }
 
  this.triggerEvent('speedchange', { speed, previousSpeed: this.video.playbackRate });
+
+ if (this.options.debug) {
+ console.log('[Settings] Speed changed to', speed);
+ }
  }
  } else if (action === 'subtitles_expand') {
  const trackData = e.target.getAttribute('data-track');
@@ -3990,9 +4115,17 @@ bindSettingsMenuEvents() {
  const subtitlesLabel = this.t('subtitles') || 'Subtitles';
  label.innerHTML = `${subtitlesLabel} <strong>${e.target.textContent}</strong>`;
  }
+
+ if (this.options.debug) {
+ console.log('[Settings] Subtitle changed to', trackData);
+ }
  }
  }
  });
+
+ if (this.options.debug) {
+ console.log('[Settings] Menu events bound');
+ }
 }
 
 showTitleOverlay() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myetv-player",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "description": "MYETV Video Player - Modular HTML5 video player with plugin support for YouTube, Vimeo, Twitch, Facebook, Cloudflare Stream and streaming protocols (HLS/DASH)",
   "main": "dist/myetv-player.js",
   "files": [
@@ -67,3 +67,4 @@
 
 
 
+