myetv-player 1.1.6 → 1.3.0

package/dist/myetv-player.min.js

@@ -7,14 +7,15 @@ class VideoPlayerI18n {
 
  'it': {
  'subtitles': 'Sottotitoli (C)',
- 'subtitlesdisable': 'Disabilita Sottotitoli',
- 'subtitlesenable': 'Abilita Sottotitoli',
+ 'subtitlesoff': 'Disattivati',
+ 'subtitlesdisable': 'Disabilita sottotitoli',
+ 'subtitlesenable': 'Abilita sottotitoli',
  'play_pause': 'Play/Pausa (Spazio)',
  'mute_unmute': 'Muta/Smuta (M)',
  'volume': 'Volume',
  'playback_speed': 'Velocità riproduzione',
  'video_quality': 'Qualità video',
- 'picture_in_picture': 'Picture-in-Picture (P)',
+ 'picture_in_picture': 'Finestra sovrapposta (P)',
  'fullscreen': 'Schermo intero (F)',
  'auto': 'Auto',
  'brand_logo': 'Logo',
@@ -27,6 +28,7 @@ class VideoPlayerI18n {
 
  'en': {
  'subtitles': 'Subtitles (C)',
+ 'subtitlesoff': 'Off',
  'subtitlesdisable': 'Disable Subtitles',
  'subtitlesenable': 'Enable Subtitles',
  'play_pause': 'Play/Pause (Space)',
@@ -42,23 +44,20 @@ class VideoPlayerI18n {
  'prev_video': 'Previous video (P)',
  'playlist_next': 'Next',
  'playlist_prev': 'Previous',
- 'next_video': 'Next video (N)',
- 'prev_video': 'Previous video (P)',
- 'playlist_next': 'Next',
- 'playlist_prev': 'Previous',
  'settings_menu': 'Settings'
  },
 
  'es': {
  'subtitles': 'Subtítulos (C)',
- 'subtitlesdisable': 'Disable Subtitles',
- 'subtitlesenable': 'Enable Subtitles',
+ 'subtitlesoff': 'Desactivados',
+ 'subtitlesdisable': 'Desactivar subtítulos',
+ 'subtitlesenable': 'Activar subtítulos',
  'play_pause': 'Reproducir/Pausar (Espacio)',
  'mute_unmute': 'Silenciar (M)',
  'volume': 'Volumen',
  'playback_speed': 'Velocidad de reproducción',
  'video_quality': 'Calidad de vídeo',
- 'picture_in_picture': 'Picture-in-Picture (P)',
+ 'picture_in_picture': 'Imagen en imagen (P)',
  'fullscreen': 'Pantalla completa (F)',
  'auto': 'Auto',
  'brand_logo': 'Logo de marca',
@@ -66,19 +65,20 @@ class VideoPlayerI18n {
  'prev_video': 'Vídeo anterior (P)',
  'playlist_next': 'Siguiente',
  'playlist_prev': 'Anterior',
- 'settings_menu': 'Settings'
+ 'settings_menu': 'Configuración'
  },
 
  'fr': {
  'subtitles': 'Sous-titres (C)',
- 'subtitlesdisable': 'Disable Subtitles',
- 'subtitlesenable': 'Enable Subtitles',
+ 'subtitlesoff': 'Désactivés',
+ 'subtitlesdisable': 'Désactiver les sous-titres',
+ 'subtitlesenable': 'Activer les sous-titres',
  'play_pause': 'Lecture/Pause (Espace)',
  'mute_unmute': 'Muet (M)',
  'volume': 'Volume',
  'playback_speed': 'Vitesse de lecture',
  'video_quality': 'Qualité vidéo',
- 'picture_in_picture': 'Picture-in-Picture (P)',
+ 'picture_in_picture': 'Image dans l’image (P)',
  'fullscreen': 'Plein écran (F)',
  'auto': 'Auto',
  'brand_logo': 'Logo de marque',
@@ -86,19 +86,20 @@ class VideoPlayerI18n {
  'prev_video': 'Vidéo précédente (P)',
  'playlist_next': 'Suivant',
  'playlist_prev': 'Précédent',
- 'settings_menu': 'Settings'
+ 'settings_menu': 'Paramètres'
  },
 
  'de': {
  'subtitles': 'Untertitel (C)',
- 'subtitlesdisable': 'Disable Subtitles',
- 'subtitlesenable': 'Enable Subtitles',
+ 'subtitlesoff': 'Aus',
+ 'subtitlesdisable': 'Untertitel deaktivieren',
+ 'subtitlesenable': 'Untertitel aktivieren',
  'play_pause': 'Abspielen/Pausieren (Leertaste)',
  'mute_unmute': 'Stumm (M)',
  'volume': 'Lautstärke',
  'playback_speed': 'Wiedergabegeschwindigkeit',
  'video_quality': 'Videoqualität',
- 'picture_in_picture': 'Picture-in-Picture (P)',
+ 'picture_in_picture': 'Bild-in-Bild (P)',
  'fullscreen': 'Vollbild (F)',
  'auto': 'Auto',
  'brand_logo': 'Markenlogo',
@@ -106,19 +107,20 @@ class VideoPlayerI18n {
  'prev_video': 'Vorheriges Video (P)',
  'playlist_next': 'Weiter',
  'playlist_prev': 'Zurück',
- 'settings_menu': 'Settings'
+ 'settings_menu': 'Einstellungen'
  },
 
  'pt': {
  'subtitles': 'Legendas (C)',
- 'subtitlesdisable': 'Disable Subtitles',
- 'subtitlesenable': 'Enable Subtitles',
+ 'subtitlesoff': 'Desativadas',
+ 'subtitlesdisable': 'Desativar legendas',
+ 'subtitlesenable': 'Ativar legendas',
  'play_pause': 'Reproduzir/Pausar (Espaço)',
  'mute_unmute': 'Silenciar (M)',
  'volume': 'Volume',
  'playback_speed': 'Velocidade de reprodução',
  'video_quality': 'Qualidade do vídeo',
- 'picture_in_picture': 'Picture-in-Picture (P)',
+ 'picture_in_picture': 'Imagem em imagem (P)',
  'fullscreen': 'Tela cheia (F)',
  'auto': 'Auto',
  'brand_logo': 'Logo da marca',
@@ -126,13 +128,14 @@ class VideoPlayerI18n {
  'prev_video': 'Vídeo anterior (P)',
  'playlist_next': 'Próximo',
  'playlist_prev': 'Anterior',
- 'settings_menu': 'Settings'
+ 'settings_menu': 'Configurações'
  },
 
  'zh': {
  'subtitles': '字幕 (C)',
- 'subtitlesdisable': 'Disable Subtitles',
- 'subtitlesenable': 'Enable Subtitles',
+ 'subtitlesoff': '关闭',
+ 'subtitlesdisable': '禁用字幕',
+ 'subtitlesenable': '启用字幕',
  'play_pause': '播放/暂停 (空格)',
  'mute_unmute': '静音 (M)',
  'volume': '音量',
@@ -146,13 +149,14 @@ class VideoPlayerI18n {
  'prev_video': '上一个视频 (P)',
  'playlist_next': '下一个',
  'playlist_prev': '上一个',
- 'settings_menu': 'Settings'
+ 'settings_menu': '设置'
  },
 
  'ja': {
  'subtitles': '字幕 (C)',
- 'subtitlesdisable': 'Disable Subtitles',
- 'subtitlesenable': 'Enable Subtitles',
+ 'subtitlesoff': 'オフ',
+ 'subtitlesdisable': '字幕を無効にする',
+ 'subtitlesenable': '字幕を有効にする',
  'play_pause': '再生/一時停止 (スペース)',
  'mute_unmute': 'ミュート (M)',
  'volume': '音量',
@@ -166,13 +170,14 @@ class VideoPlayerI18n {
  'prev_video': '前の動画 (P)',
  'playlist_next': '次へ',
  'playlist_prev': '前へ',
- 'settings_menu': 'Settings'
+ 'settings_menu': '設定'
  },
 
  'ru': {
  'subtitles': 'Субтитры (C)',
- 'subtitlesdisable': 'Disable Subtitles',
- 'subtitlesenable': 'Enable Subtitles',
+ 'subtitlesoff': 'Выкл',
+ 'subtitlesdisable': 'Отключить субтитры',
+ 'subtitlesenable': 'Включить субтитры',
  'play_pause': 'Воспроизведение/Пауза (Пробел)',
  'mute_unmute': 'Звук (M)',
  'volume': 'Громкость',
@@ -186,13 +191,14 @@ class VideoPlayerI18n {
  'prev_video': 'Предыдущее видео (P)',
  'playlist_next': 'Далее',
  'playlist_prev': 'Назад',
- 'settings_menu': 'Settings'
+ 'settings_menu': 'Настройки'
  },
 
  'ar': {
  'subtitles': 'الترجمة (C)',
- 'subtitlesdisable': 'Disable Subtitles',
- 'subtitlesenable': 'Enable Subtitles',
+ 'subtitlesoff': 'إيقاف',
+ 'subtitlesdisable': 'تعطيل الترجمة',
+ 'subtitlesenable': 'تفعيل الترجمة',
  'play_pause': 'تشغيل/إيقاف مؤقت (مسافة)',
  'mute_unmute': 'كتم الصوت (M)',
  'volume': 'مستوى الصوت',
@@ -206,7 +212,175 @@ class VideoPlayerI18n {
  'prev_video': 'الفيديو السابق (P)',
  'playlist_next': 'التالي',
  'playlist_prev': 'السابق',
- 'settings_menu': 'Settings'
+ 'settings_menu': 'الإعدادات'
+ },
+
+ 'ko': {
+ 'subtitles': '자막 (C)',
+ 'subtitlesoff': '끄기',
+ 'subtitlesdisable': '자막 비활성화',
+ 'subtitlesenable': '자막 활성화',
+ 'play_pause': '재생/일시정지 (스페이스)',
+ 'mute_unmute': '음소거 (M)',
+ 'volume': '음량',
+ 'playback_speed': '재생 속도',
+ 'video_quality': '비디오 품질',
+ 'picture_in_picture': '화면 속 화면 (P)',
+ 'fullscreen': '전체 화면 (F)',
+ 'auto': '자동',
+ 'brand_logo': '브랜드 로고',
+ 'next_video': '다음 비디오 (N)',
+ 'prev_video': '이전 비디오 (P)',
+ 'playlist_next': '다음',
+ 'playlist_prev': '이전',
+ 'settings_menu': '설정'
+ },
+
+ 'pl': {
+ 'subtitles': 'Napisy (C)',
+ 'subtitlesoff': 'Wyłączone',
+ 'subtitlesdisable': 'Wyłącz napisy',
+ 'subtitlesenable': 'Włącz napisy',
+ 'play_pause': 'Odtwarzaj/Pauza (Spacja)',
+ 'mute_unmute': 'Wycisz (M)',
+ 'volume': 'Głośność',
+ 'playback_speed': 'Prędkość odtwarzania',
+ 'video_quality': 'Jakość wideo',
+ 'picture_in_picture': 'Obraz w obrazie (P)',
+ 'fullscreen': 'Pełny ekran (F)',
+ 'auto': 'Auto',
+ 'brand_logo': 'Logo marki',
+ 'next_video': 'Następne wideo (N)',
+ 'prev_video': 'Poprzednie wideo (P)',
+ 'playlist_next': 'Dalej',
+ 'playlist_prev': 'Wstecz',
+ 'settings_menu': 'Ustawienia'
+ },
+
+ 'hu': {
+ 'subtitles': 'Feliratok (C)',
+ 'subtitlesoff': 'Kikapcsolva',
+ 'subtitlesdisable': 'Feliratok kikapcsolása',
+ 'subtitlesenable': 'Feliratok bekapcsolása',
+ 'play_pause': 'Lejátszás/Szünet (Szóköz)',
+ 'mute_unmute': 'Némítás (M)',
+ 'volume': 'Hangerő',
+ 'playback_speed': 'Lejátszási sebesség',
+ 'video_quality': 'Videó minősége',
+ 'picture_in_picture': 'Kép a képben (P)',
+ 'fullscreen': 'Teljes képernyő (F)',
+ 'auto': 'Auto',
+ 'brand_logo': 'Márka logó',
+ 'next_video': 'Következő videó (N)',
+ 'prev_video': 'Előző videó (P)',
+ 'playlist_next': 'Következő',
+ 'playlist_prev': 'Előző',
+ 'settings_menu': 'Beállítások'
+ },
+
+ 'tr': {
+ 'subtitles': 'Altyazılar (C)',
+ 'subtitlesoff': 'Kapalı',
+ 'subtitlesdisable': 'Altyazıları kapat',
+ 'subtitlesenable': 'Altyazıları aç',
+ 'play_pause': 'Oynat/Duraklat (Boşluk)',
+ 'mute_unmute': 'Sessize al (M)',
+ 'volume': 'Ses düzeyi',
+ 'playback_speed': 'Oynatma hızı',
+ 'video_quality': 'Video kalitesi',
+ 'picture_in_picture': 'Resim içinde resim (P)',
+ 'fullscreen': 'Tam ekran (F)',
+ 'auto': 'Otomatik',
+ 'brand_logo': 'Marka logosu',
+ 'next_video': 'Sonraki video (N)',
+ 'prev_video': 'Önceki video (P)',
+ 'playlist_next': 'Sonraki',
+ 'playlist_prev': 'Önceki',
+ 'settings_menu': 'Ayarlar'
+ },
+
+ 'nl': {
+ 'subtitles': 'Ondertitels (C)',
+ 'subtitlesoff': 'Uit',
+ 'subtitlesdisable': 'Ondertitels uitschakelen',
+ 'subtitlesenable': 'Ondertitels inschakelen',
+ 'play_pause': 'Afspelen/Pauzeren (Spatie)',
+ 'mute_unmute': 'Dempen (M)',
+ 'volume': 'Volume',
+ 'playback_speed': 'Afspeelsnelheid',
+ 'video_quality': 'Videokwaliteit',
+ 'picture_in_picture': 'Beeld-in-beeld (P)',
+ 'fullscreen': 'Volledig scherm (F)',
+ 'auto': 'Auto',
+ 'brand_logo': 'Merklogo',
+ 'next_video': 'Volgende video (N)',
+ 'prev_video': 'Vorige video (P)',
+ 'playlist_next': 'Volgende',
+ 'playlist_prev': 'Vorige',
+ 'settings_menu': 'Instellingen'
+ },
+
+ 'hi': {
+ 'subtitles': 'उपशीर्षक (C)',
+ 'subtitlesoff': 'बंद',
+ 'subtitlesdisable': 'उपशीर्षक अक्षम करें',
+ 'subtitlesenable': 'उपशीर्षक सक्षम करें',
+ 'play_pause': 'चलाएं/रोकें (स्पेस)',
+ 'mute_unmute': 'म्यूट (M)',
+ 'volume': 'वॉल्यूम',
+ 'playback_speed': 'प्लेबैक गति',
+ 'video_quality': 'वीडियो गुणवत्ता',
+ 'picture_in_picture': 'चित्र-में-चित्र (P)',
+ 'fullscreen': 'पूर्ण स्क्रीन (F)',
+ 'auto': 'स्वतः',
+ 'brand_logo': 'ब्रांड लोगो',
+ 'next_video': 'अगला वीडियो (N)',
+ 'prev_video': 'पिछला वीडियो (P)',
+ 'playlist_next': 'अगला',
+ 'playlist_prev': 'पिछला',
+ 'settings_menu': 'सेटिंग्स'
+ },
+
+ 'sv': {
+ 'subtitles': 'Undertexter (C)',
+ 'subtitlesoff': 'Av',
+ 'subtitlesdisable': 'Inaktivera undertexter',
+ 'subtitlesenable': 'Aktivera undertexter',
+ 'play_pause': 'Spela/Pausa (Blanksteg)',
+ 'mute_unmute': 'Stäng av ljud (M)',
+ 'volume': 'Volym',
+ 'playback_speed': 'Uppspelningshastighet',
+ 'video_quality': 'Videokvalitet',
+ 'picture_in_picture': 'Bild i bild (P)',
+ 'fullscreen': 'Fullskärm (F)',
+ 'auto': 'Auto',
+ 'brand_logo': 'Varumärkeslogotyp',
+ 'next_video': 'Nästa video (N)',
+ 'prev_video': 'Föregående video (P)',
+ 'playlist_next': 'Nästa',
+ 'playlist_prev': 'Föregående',
+ 'settings_menu': 'Inställningar'
+ },
+
+ 'id': {
+ 'subtitles': 'Teks (C)',
+ 'subtitlesoff': 'Mati',
+ 'subtitlesdisable': 'Nonaktifkan teks',
+ 'subtitlesenable': 'Aktifkan teks',
+ 'play_pause': 'Putar/Jeda (Spasi)',
+ 'mute_unmute': 'Bisu (M)',
+ 'volume': 'Volume',
+ 'playback_speed': 'Kecepatan pemutaran',
+ 'video_quality': 'Kualitas video',
+ 'picture_in_picture': 'Gambar-dalam-gambar (P)',
+ 'fullscreen': 'Layar penuh (F)',
+ 'auto': 'Otomatis',
+ 'brand_logo': 'Logo merek',
+ 'next_video': 'Video berikutnya (N)',
+ 'prev_video': 'Video sebelumnya (P)',
+ 'playlist_next': 'Berikutnya',
+ 'playlist_prev': 'Sebelumnya',
+ 'settings_menu': 'Pengaturan'
  }
  };
 
@@ -2263,6 +2437,11 @@ addEventListener(eventType, callback) {
  this.hideLoading();
  this.closeAllMenus();
 
+ if (this.playIcon && this.pauseIcon) {
+ this.playIcon.classList.add('hidden');
+ this.pauseIcon.classList.remove('hidden');
+ }
+
  this.triggerEvent('playing', {
  currentTime: this.getCurrentTime(),
  duration: this.getDuration()
@@ -2461,16 +2640,83 @@ addEventListener(eventType, callback) {
  this.pipBtn.addEventListener('click', () => this.togglePictureInPicture());
  }
 
- if (this.subtitlesBtn) {
- this.subtitlesBtn.addEventListener('click', () => this.toggleSubtitles());
- }
-
  if (this.volumeSlider) {
+ let isDraggingVolume = false;
+
  this.volumeSlider.addEventListener('input', (e) => {
  this.updateVolume(e.target.value);
  this.updateVolumeSliderVisual();
  this.initVolumeTooltip();
  });
+
+ this.volumeSlider.addEventListener('mousedown', (e) => {
+ isDraggingVolume = true;
+ if (this.volumeTooltip) {
+ this.volumeTooltip.classList.add('visible');
+ }
+ });
+
+ document.addEventListener('mousemove', (e) => {
+ if (isDraggingVolume && this.volumeSlider) {
+ const rect = this.volumeSlider.getBoundingClientRect();
+ const clickX = e.clientX - rect.left;
+ const percentage = Math.max(0, Math.min(1, clickX / rect.width));
+ const value = Math.round(percentage * 100);
+
+ this.volumeSlider.value = value;
+ this.updateVolume(value);
+ this.updateVolumeSliderVisual();
+ if (this.volumeTooltip) {
+ this.updateVolumeTooltipPosition(value / 100);
+ }
+ }
+ });
+
+ document.addEventListener('mouseup', () => {
+ if (isDraggingVolume) {
+ isDraggingVolume = false;
+ if (this.volumeTooltip) {
+ setTimeout(() => {
+ this.volumeTooltip.classList.remove('visible');
+ }, 300);
+ }
+ }
+ });
+
+ this.volumeSlider.addEventListener('touchstart', (e) => {
+ isDraggingVolume = true;
+ if (this.volumeTooltip) {
+ this.volumeTooltip.classList.add('visible');
+ }
+ }, { passive: true });
+
+ this.volumeSlider.addEventListener('touchmove', (e) => {
+ if (isDraggingVolume) {
+ const touch = e.touches[0];
+ const rect = this.volumeSlider.getBoundingClientRect();
+ const touchX = touch.clientX - rect.left;
+ const percentage = Math.max(0, Math.min(1, touchX / rect.width));
+ const value = Math.round(percentage * 100);
+
+ this.volumeSlider.value = value;
+ this.updateVolume(value);
+ this.updateVolumeSliderVisual();
+ if (this.volumeTooltip) {
+ this.updateVolumeTooltipPosition(value / 100);
+ }
+ }
+ }, { passive: true });
+
+ this.volumeSlider.addEventListener('touchend', () => {
+ if (isDraggingVolume) {
+ isDraggingVolume = false;
+ if (this.volumeTooltip) {
+ setTimeout(() => {
+ this.volumeTooltip.classList.remove('visible');
+ }, 300);
+ }
+ }
+ }, { passive: true });
  }
 
  if (this.progressContainer) {
@@ -2927,20 +3173,20 @@ createControls() {
  <div class="progress-buffer"></div>
  <div class="progress-filled"></div>
  </div>
- <div class="progress-handle progress-handle-${this.options.seekHandleShape}"></div> <!-- ✅ Fuori da progress-bar -->
+ <div class="progress-handle progress-handle-${this.options.seekHandleShape}"></div>
  ${this.options.showSeekTooltip ? '<div class="seek-tooltip">0:00</div>' : ''}
 </div>
 
  <div class="controls-main">
  <div class="controls-left">
  <button class="control-btn play-pause-btn" data-tooltip="play_pause">
- <span class="icon play-icon">▶</span>
- <span class="icon pause-icon hidden">⏸</span>
+ <span class="icon play-icon"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span>
+ <span class="icon pause-icon hidden"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg></span>
  </button>
 
  <button class="control-btn mute-btn" data-tooltip="mute_unmute">
- <span class="icon volume-icon">🔊</span>
- <span class="icon mute-icon hidden">🔇</span>
+ <span class="icon volume-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z"/><path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89z"/><path d="M10.025 8a4.486 4.486 0 0 1-1.318 3.182L8 10.475A3.489 3.489 0 0 0 9.025 8c0-.966-.392-1.841-1.025-2.475l.707-.707A4.486 4.486 0 0 1 10.025 8M7 4a.5.5 0 0 0-.812-.39L3.825 5.5H1.5A.5.5 0 0 0 1 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 7 12z"/></svg></span>
+ <span class="icon mute-icon hidden"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06m7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0"/></svg></span>
  </button>
 
  <div class="volume-container" data-mobile-slider="${this.options.volumeSlider}">
@@ -2955,18 +3201,17 @@ createControls() {
  </div>
 
  <div class="controls-right">
- <button class="control-btn playlist-prev-btn" data-tooltip="prevvideo" style="display: none;">
- <span class="icon">⏮</span>
- </button>
-
- <button class="control-btn playlist-next-btn" data-tooltip="nextvideo" style="display: none;">
- <span class="icon">⏭</span>
- </button>
+<button class="control-btn playlist-prev-btn" data-tooltip="prevvideo" style="display: none;">
+ <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M3.5 12V4l7 4zm8-8v8l-7-4z"/></svg></span>
+</button>
+<button class="control-btn playlist-next-btn" data-tooltip="nextvideo" style="display: none;">
+ <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M12.5 4v8l-7-4zm-8 0v8l7-4z"/></svg></span>
+</button>
 
  ${this.options.showSubtitles ? `
  <div class="subtitles-control" style="display: none;">
  <button class="control-btn subtitles-btn" data-tooltip="subtitles">
- <span class="icon">CC</span>
+ <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z"/><path d="M6.096 4.972c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152m4.915 0c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152M6.096 9.972c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152m4.915 0c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152"/></svg></span>
  </button>
  <div class="subtitles-menu">
  <div class="subtitles-option active" data-track="off">Off</div>
@@ -3007,22 +3252,22 @@ createControls() {
 
  ${this.options.showPictureInPicture && this.isPiPSupported ? `
  <button class="control-btn pip-btn" data-tooltip="picture_in_picture">
- <span class="icon pip-icon">⧉</span>
- <span class="icon pip-exit-icon hidden">⧉</span>
+ <span class="icon pip-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5z"/><path d="M8 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5z"/></svg></span>
+ <span class="icon pip-exit-icon hidden"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5z"/></svg></span>
  </button>
  ` : ''}
 
  <div class="settings-control">
  <button class="control-btn settings-btn" data-tooltip="settings_menu">
- <span class="">⚙</span>
+ <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52z"/></svg></span>
  </button>
  <div class="settings-menu"></div>
  </div>
 
  ${this.options.showFullscreen ? `
  <button class="control-btn fullscreen-btn" data-tooltip="fullscreen">
- <span class="icon fullscreen-icon">⛶</span>
- <span class="icon exit-fullscreen-icon hidden">⛉</span>
+ <span class="icon fullscreen-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/></svg></span>
+ <span class="icon exit-fullscreen-icon hidden"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5m5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5M0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5m10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0z"/></svg></span>
  </button>
  ` : ''}
  </div>
@@ -5185,37 +5430,82 @@ parseTimeToSeconds(timeStr) {
 }
 
 createChapterMarkers() {
- if (!this.progressContainer || !this.video || !this.chapters) {
+ if (!this.progressContainer || !this.video || !this.chapters) return;
+
+ const duration = this.video.duration;
+ if (!duration || isNaN(duration)) {
+ const loadedMetadataHandler = () => {
+ this.createChapterMarkers();
+ this.video.removeEventListener('loadedmetadata', loadedMetadataHandler);
+ };
+ this.video.addEventListener('loadedmetadata', loadedMetadataHandler);
  return;
  }
+ const existingMarkers = this.progressContainer.querySelector('.chapter-markers-container');
+ if (existingMarkers) {
+ existingMarkers.remove();
+ }
  const markersContainer = document.createElement('div');
- markersContainer.className = 'chapter-markers-container';
-
+ markersContainer.className = 'chapter-markers-container';
  this.chapters.forEach((chapter, index) => {
+ const nextChapter = this.chapters[index + 1];
+ const startPercent = (chapter.time / duration) * 100;
+ const endPercent = nextChapter ? (nextChapter.time / duration) * 100 : 100;
+ const gapSize = nextChapter ? 6 : 0; // 6px gap between segments
+ const widthPercent = endPercent - startPercent;
+ const segment = document.createElement('div');
+ segment.className = 'chapter-segment';
+ segment.style.cssText = `
+ position: absolute;
+ left: ${startPercent}%;
+ top: 0;
+ width: calc(${widthPercent}% - ${gapSize}px);
+ height: 100%;
+ background: rgba(255, 255, 255, 0.3);
+ cursor: pointer;
+ z-index: 3;
+ transition: background 0.2s;
+ pointer-events: none;
+ `;
+
+ segment.setAttribute('data-chapter-index', index);
+ segment.setAttribute('data-chapter-time', chapter.time);
+ segment.setAttribute('data-chapter-title', chapter.title);
+
+ markersContainer.appendChild(segment);
+ if (nextChapter) {
  const marker = document.createElement('div');
  marker.className = 'chapter-marker';
- marker.setAttribute('data-chapter-index', index);
- marker.setAttribute('data-chapter-time', chapter.time);
- marker.setAttribute('data-chapter-title', chapter.title);
- if (chapter.color) {
- marker.style.backgroundColor = chapter.color;
- }
+ marker.style.cssText = `
+ position: absolute !important;
+ left: ${endPercent}% !important;
+ top: 0 !important;
+ width: 6px !important;
+ height: 100% !important;
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ margin-left: -3px !important;
+ cursor: pointer !important;
+ z-index: 10 !important;
+ `;
+
+ marker.setAttribute('data-chapter-time', nextChapter.time);
+ marker.setAttribute('data-chapter-title', nextChapter.title);
+ marker.addEventListener('click', (e) => {
+ e.stopPropagation();
+ this.jumpToChapter(index + 1);
+ });
 
  markersContainer.appendChild(marker);
+ }
  });
  this.progressContainer.appendChild(markersContainer);
- this.chapterMarkersContainer = markersContainer;
- if (this.video.duration && !isNaN(this.video.duration)) {
- this.updateChapterMarkerPositions();
- } else {
- const loadedMetadataHandler = () => {
- this.updateChapterMarkerPositions();
- this.video.removeEventListener('loadedmetadata', loadedMetadataHandler);
- };
- this.video.addEventListener('loadedmetadata', loadedMetadataHandler);
- }
+ this.chapterMarkersContainer = markersContainer;
 
- if (this.options.debug) console.log('📚 Chapter markers created on timeline');
+ if (this.options.debug) {
+ console.log(`Chapter markers created: ${this.chapters.length} segments`);
+ }
 }
 
 updateChapterMarkerPositions() {
@@ -5237,56 +5527,231 @@ updateChapterMarkerPositions() {
 }
 
 createChapterTooltip() {
- if (!this.progressContainer) {
- return;
- }
-
- const tooltip = document.createElement('div');
- tooltip.className = 'chapter-tooltip';
- tooltip.style.opacity = '0';
- tooltip.style.visibility = 'hidden';
- tooltip.innerHTML = `
- <div class="chapter-tooltip-image"></div>
- <div class="chapter-tooltip-title"></div>
- <div class="chapter-tooltip-time"></div>
+ if (!this.progressContainer) return;
+ let chapterTooltip = this.progressContainer.querySelector('.chapter-tooltip');
+ if (chapterTooltip) {
+ chapterTooltip.remove();
+ }
+ chapterTooltip = document.createElement('div');
+ chapterTooltip.className = 'chapter-tooltip';
+ chapterTooltip.style.cssText = `
+ position: absolute;
+ bottom: calc(100% + 35px);
+ left: 0;
+ background: rgba(28, 28, 28, 0.95);
+ color: #fff;
+ border-radius: 4px;
+ pointer-events: none;
+ visibility: hidden;
+ opacity: 0;
+ z-index: 100001;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+ max-width: 300px;
+ overflow: hidden;
+ transform: translateX(-50%);
+ transition: opacity 0.15s, visibility 0.15s;
+ display: flex;
+ flex-direction: column;
+ `;
+ chapterTooltip.innerHTML = `
+ <div class="chapter-tooltip-content" style="display: flex; flex-direction: column; gap: 8px; padding: 8px;">
+ <div class="chapter-tooltip-image" style="
+ width: 100%;
+ height: 120px;
+ background-size: cover;
+ background-position: center;
+ border-radius: 3px;
+ display: none;
+ "></div>
+ <div class="chapter-tooltip-info" style="display: flex; flex-direction: column; gap: 4px;">
+ <div class="chapter-tooltip-title" style="
+ font-size: 13px;
+ font-weight: 600;
+ color: #fff;
+ max-width: 280px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ "></div>
+ <div class="chapter-tooltip-time" style="
+ font-size: 12px;
+ font-weight: 400;
+ color: rgba(255, 255, 255, 0.8);
+ "></div>
+ </div>
+ </div>
  `;
 
- this.progressContainer.appendChild(tooltip);
- this.chapterTooltip = tooltip;
+ this.progressContainer.appendChild(chapterTooltip);
+ this.chapterTooltip = chapterTooltip;
 
- if (this.options.debug) console.log('📚 Chapter tooltip created');
+ if (this.options.debug) {
+ console.log('Chapter tooltip created');
+ }
 }
 
 bindChapterEvents() {
- if (!this.chapterMarkersContainer || !this.chapterTooltip) {
+ if (!this.progressContainer) return;
+ let chapterTooltip = this.progressContainer.querySelector('.chapter-tooltip-hover');
+ if (chapterTooltip) {
+ chapterTooltip.remove();
+ }
+ chapterTooltip = document.createElement('div');
+ chapterTooltip.className = 'chapter-tooltip-hover';
+ chapterTooltip.style.cssText = `
+ position: absolute;
+ bottom: calc(100% + 35px);
+ left: 0;
+ background: rgba(28, 28, 28, 0.95);
+ color: #fff;
+ border-radius: 4px;
+ padding: 8px;
+ pointer-events: none;
+ visibility: hidden;
+ opacity: 0;
+ z-index: 100001;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+ max-width: 300px;
+ transform: translateX(-50%);
+ transition: opacity 0.15s, visibility 0.15s;
+ `;
+
+ this.progressContainer.appendChild(chapterTooltip);
+ this.chapterTooltip = chapterTooltip;
+ const getPlayerBounds = () => {
+ return this.container ? this.container.getBoundingClientRect() : null;
+ };
+ this.progressContainer.addEventListener('mousemove', (e) => {
+ if (!this.video || !this.video.duration || !this.chapters || this.chapters.length === 0) {
  return;
+ }
+
+ const rect = this.progressContainer.getBoundingClientRect();
+ const playerRect = getPlayerBounds();
+ const mouseX = e.clientX - rect.left;
+ const percentage = Math.max(0, Math.min(1, mouseX / rect.width));
+ const time = percentage * this.video.duration;
+ let currentChapter = null;
+ for (let i = this.chapters.length - 1; i >= 0; i--) {
+ if (time >= this.chapters[i].time) {
+ currentChapter = this.chapters[i];
+ break;
+ }
+ }
+
+ if (currentChapter) {
+ let tooltipHTML = '<div style="display: flex; flex-direction: column; gap: 6px;">';
+ if (currentChapter.image) {
+ tooltipHTML += `
+ <div style="
+ width: 100%;
+ height: 120px;
+ background-image: url('${currentChapter.image}');
+ background-size: cover;
+ background-position: center;
+ border-radius: 3px;
+ "></div>
+ `;
  }
- const markers = this.chapterMarkersContainer.querySelectorAll('.chapter-marker');
+ tooltipHTML += `
+ <div style="
+ font-size: 13px;
+ font-weight: 600;
+ max-width: 280px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ ">
+ ${currentChapter.title}
+ </div>
+ `;
+ tooltipHTML += `
+ <div style="
+ font-size: 12px;
+ font-weight: 400;
+ color: rgba(255, 255, 255, 0.8);
+ ">
+ ${this.formatTime(currentChapter.time)}
+ </div>
+ `;
 
- markers.forEach((marker, index) => {
- marker.addEventListener('mouseenter', (e) => {
- this.showChapterTooltip(index, e);
- });
+ tooltipHTML += '</div>';
 
- marker.addEventListener('mousemove', (e) => {
- this.updateChapterTooltipPosition(e);
- });
+ chapterTooltip.innerHTML = tooltipHTML;
+ chapterTooltip.style.visibility = 'visible';
+ chapterTooltip.style.opacity = '1';
+ setTimeout(() => {
+ const tooltipWidth = chapterTooltip.offsetWidth;
+ const tooltipHalfWidth = tooltipWidth / 2;
+ const absoluteX = e.clientX;
 
- marker.addEventListener('mouseleave', () => {
- this.hideChapterTooltip();
+ if (playerRect) {
+ if (absoluteX - tooltipHalfWidth < playerRect.left) {
+ chapterTooltip.style.left = `${playerRect.left - rect.left + tooltipHalfWidth}px`;
+ }
+ else if (absoluteX + tooltipHalfWidth > playerRect.right) {
+ chapterTooltip.style.left = `${playerRect.right - rect.left - tooltipHalfWidth}px`;
+ }
+ else {
+ chapterTooltip.style.left = `${mouseX}px`;
+ }
+ } else {
+ chapterTooltip.style.left = `${mouseX}px`;
+ }
+ }, 0);
+ } else {
+ chapterTooltip.style.visibility = 'hidden';
+ chapterTooltip.style.opacity = '0';
+ }
  });
- marker.addEventListener('click', (e) => {
- e.stopPropagation();
- this.jumpToChapter(index);
- });
+ this.progressContainer.addEventListener('mouseleave', () => {
+ chapterTooltip.style.visibility = 'hidden';
+ chapterTooltip.style.opacity = '0';
  });
  if (this.video) {
- this.video.addEventListener('timeupdate', () => {
- this.updateActiveChapter();
- });
+ this.video.addEventListener('timeupdate', () => this.updateActiveChapter());
  }
 
- if (this.options.debug) console.log('📚 Chapter events bound');
+ if (this.options.debug) {
+ console.log('Chapter events bound with tooltip');
+ }
+}
+
+updateChapterInTitleOverlay() {
+ if (!this.video || !this.chapters || this.chapters.length === 0) return;
+
+ const titleOverlay = this.container ? this.container.querySelector('.title-overlay') : null;
+ if (!titleOverlay) return;
+ let chapterElement = titleOverlay.querySelector('.chapter-name');
+ if (!chapterElement) {
+ chapterElement = document.createElement('div');
+ chapterElement.className = 'chapter-name';
+ chapterElement.style.cssText = `
+ font-size: 13px;
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.9);
+ margin-top: 6px;
+ max-width: 400px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ `;
+ titleOverlay.appendChild(chapterElement);
+ }
+ const currentTime = this.video.currentTime;
+ let currentChapter = null;
+ for (let i = this.chapters.length - 1; i >= 0; i--) {
+ if (currentTime >= this.chapters[i].time) {
+ currentChapter = this.chapters[i];
+ break;
+ }
+ }
+ if (currentChapter) {
+ chapterElement.textContent = currentChapter.title;
+ chapterElement.style.display = 'block';
+ } else {
+ chapterElement.style.display = 'none';
+ }
 }
 
 showChapterTooltip(chapterIndex, e) {
@@ -5353,9 +5818,7 @@ jumpToChapter(chapterIndex) {
 }
 
 updateActiveChapter() {
- if (!this.video || !this.chapterMarkersContainer || !this.chapters) {
- return;
- }
+ if (!this.video || !this.chapterMarkersContainer || !this.chapters) return;
 
  const currentTime = this.video.currentTime;
  const markers = this.chapterMarkersContainer.querySelectorAll('.chapter-marker');
@@ -5372,7 +5835,8 @@ updateActiveChapter() {
  } else {
  marker.classList.remove('active');
  }
- });
+ });
+ this.updateChapterInTitleOverlay();
 }
 
 getCurrentChapter() {