myetv-player 1.1.3 → 1.1.4

package/dist/myetv-player.min.js

@@ -3107,46 +3107,87 @@ populateSettingsMenu() {
  if (this.options.showSpeedControl) {
  const speedLabel = this.t('playback_speed') || 'Playback Speed';
  const currentSpeed = this.video ? this.video.playbackRate : 1;
- menuHTML += `<div class="settings-option" data-action="speed">
- <span class="settings-option-label">${speedLabel}</span>
- <span class="settings-option-value">${currentSpeed}x</span>
- <div class="settings-submenu speed-submenu">
- <div class="settings-suboption ${currentSpeed === 0.5 ? 'active' : ''}" data-speed="0.5">0.5x</div>
- <div class="settings-suboption ${currentSpeed === 0.75 ? 'active' : ''}" data-speed="0.75">0.75x</div>
- <div class="settings-suboption ${currentSpeed === 1 ? 'active' : ''}" data-speed="1">1x</div>
- <div class="settings-suboption ${currentSpeed === 1.25 ? 'active' : ''}" data-speed="1.25">1.25x</div>
- <div class="settings-suboption ${currentSpeed === 1.5 ? 'active' : ''}" data-speed="1.5">1.5x</div>
- <div class="settings-suboption ${currentSpeed === 2 ? 'active' : ''}" data-speed="2">2x</div>
+
+ menuHTML += `
+ <div class="settings-expandable-wrapper">
+ <div class="settings-option expandable-trigger" data-action="speed-expand">
+ <span class="settings-option-label">${speedLabel}: ${currentSpeed}x</span>
+ <span class="expand-arrow">▼</span>
  </div>
- </div>`;
+ <div class="settings-expandable-content" style="display: none;">`;
+
+ const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+ speeds.forEach(speed => {
+ const isActive = Math.abs(speed - currentSpeed) < 0.01;
+ menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-speed="${speed}">${speed}x</div>`;
+ });
+
+ menuHTML += `</div></div>`;
  }
 
  if (this.options.showSubtitles && this.textTracks && this.textTracks.length > 0) {
  const subtitlesLabel = this.t('subtitles') || 'Subtitles';
  const currentTrack = this.currentSubtitleTrack;
- const currentLabel = this.subtitlesEnabled && currentTrack
- ? (currentTrack.label || 'Track')
- : (this.t('subtitlesoff') || 'Off');
-
- menuHTML += `<div class="settings-option" data-action="subtitles">
- <span class="settings-option-label">${subtitlesLabel}</span>
- <span class="settings-option-value">${currentLabel}</span>
- <div class="settings-submenu subtitles-submenu">
- <div class="settings-suboption ${!this.subtitlesEnabled ? 'active' : ''}" data-track="off">
- ${this.t('subtitlesoff') || 'Off'}
- </div>`;
+ const currentLabel = this.subtitlesEnabled && currentTrack ? currentTrack.label : (this.t('subtitlesoff') || 'Off');
+
+ menuHTML += `
+ <div class="settings-expandable-wrapper">
+ <div class="settings-option expandable-trigger" data-action="subtitles-expand">
+ <span class="settings-option-label">${subtitlesLabel}: ${currentLabel}</span>
+ <span class="expand-arrow">▼</span>
+ </div>
+ <div class="settings-expandable-content" style="display: none;">`;
+
+ menuHTML += `<div class="settings-suboption ${!this.subtitlesEnabled ? 'active' : ''}" data-track="off">${this.t('subtitlesoff') || 'Off'}</div>`;
 
  this.textTracks.forEach((trackData, index) => {
  const isActive = this.currentSubtitleTrack === trackData.track;
- menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-track="${index}">
- ${trackData.label}
- </div>`;
+ menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-track="${index}">${trackData.label}</div>`;
  });
 
- menuHTML += '</div></div>';
+ menuHTML += `</div></div>`;
  }
 
  settingsMenu.innerHTML = menuHTML;
+
+ this.addSettingsMenuScrollbar();
+}
+
+addSettingsMenuScrollbar() {
+ const settingsMenu = this.controls?.querySelector('.settings-menu');
+ if (!settingsMenu) return;
+
+ const playerHeight = this.container.offsetHeight;
+ const maxMenuHeight = playerHeight - 100;
+
+ settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
+ settingsMenu.style.overflowY = 'auto';
+ settingsMenu.style.overflowX = 'hidden';
+
+ if (!document.getElementById('player-settings-scrollbar-style')) {
+ const scrollbarStyle = document.createElement('style');
+ scrollbarStyle.id = 'player-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);
+ }
+
+ settingsMenu.style.scrollbarWidth = 'thin';
+ settingsMenu.style.scrollbarColor = 'rgba(255,255,255,0.3) transparent';
 }
 
 bindSettingsMenuEvents() {
@@ -3156,6 +3197,24 @@ bindSettingsMenuEvents() {
  settingsMenu.addEventListener('click', (e) => {
  e.stopPropagation();
 
+ if (e.target.classList.contains('expandable-trigger') || e.target.closest('.expandable-trigger')) {
+ const trigger = e.target.classList.contains('expandable-trigger') ? e.target : e.target.closest('.expandable-trigger');
+ const wrapper = trigger.closest('.settings-expandable-wrapper');
+ const content = wrapper.querySelector('.settings-expandable-content');
+ const arrow = trigger.querySelector('.expand-arrow');
+
+ const isExpanded = content.style.display !== 'none';
+
+ if (isExpanded) {
+ content.style.display = 'none';
+ arrow.style.transform = 'rotate(0deg)';
+ } else {
+ content.style.display = 'block';
+ arrow.style.transform = 'rotate(180deg)';
+ }
+ return;
+ }
+
  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');
@@ -3167,29 +3226,28 @@ bindSettingsMenuEvents() {
  }
 
  if (e.target.classList.contains('settings-suboption')) {
- const parent = e.target.closest('.settings-option');
- const action = parent?.getAttribute('data-action');
+ const wrapper = e.target.closest('.settings-expandable-wrapper');
+ const trigger = wrapper.querySelector('.expandable-trigger');
+ const action = trigger.getAttribute('data-action');
 
- if (action === 'speed') {
+ if (action === 'speed-expand') {
  const speed = parseFloat(e.target.getAttribute('data-speed'));
  if (speed && speed > 0 && this.video && !this.isChangingQuality) {
  this.video.playbackRate = speed;
 
- parent.querySelectorAll('.settings-suboption').forEach(opt => {
- opt.classList.remove('active');
- });
+ wrapper.querySelectorAll('.settings-suboption').forEach(opt => opt.classList.remove('active'));
  e.target.classList.add('active');
 
- const valueEl = parent.querySelector('.settings-option-value');
- if (valueEl) valueEl.textContent = speed + 'x';
+ const label = trigger.querySelector('.settings-option-label');
+ if (label) {
+ const speedLabel = this.t('playback_speed') || 'Playback Speed';
+ label.textContent = `${speedLabel}: ${speed}x`;
+ }
 
  this.triggerEvent('speedchange', { speed, previousSpeed: this.video.playbackRate });
  }
- }
-
- else if (action === 'subtitles') {
+ } else if (action === 'subtitles-expand') {
  const trackData = e.target.getAttribute('data-track');
-
  if (trackData === 'off') {
  this.disableSubtitles();
  } else {
@@ -3197,13 +3255,14 @@ bindSettingsMenuEvents() {
  this.enableSubtitleTrack(trackIndex);
  }
 
- parent.querySelectorAll('.settings-suboption').forEach(opt => {
- opt.classList.remove('active');
- });
+ wrapper.querySelectorAll('.settings-suboption').forEach(opt => opt.classList.remove('active'));
  e.target.classList.add('active');
 
- const valueEl = parent.querySelector('.settings-option-value');
- if (valueEl) valueEl.textContent = e.target.textContent;
+ const label = trigger.querySelector('.settings-option-label');
+ if (label) {
+ const subtitlesLabel = this.t('subtitles') || 'Subtitles';
+ label.textContent = `${subtitlesLabel}: ${e.target.textContent}`;
+ }
  }
  }
  });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myetv-player",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "MYETV Video Player - Modular JavaScript and SCSS Build System",
   "main": "dist/myetv-player.js",
   "scripts": {
@@ -36,3 +36,4 @@
 
 
 
+