myetv-player 1.4.0 → 1.5.0

package/dist/myetv-player.js

@@ -25,7 +25,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Video precedente (P)',
                 'playlist_next': 'Avanti',
                 'playlist_prev': 'Indietro',
-                'settings_menu': 'Impostazioni'
+                'settings_menu': 'Impostazioni',
+                'loading': 'Caricamento...',
+                'encoding_in_progress': 'Encoding in corso'
             },
 
             // English
@@ -47,7 +49,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Previous video (P)',
                 'playlist_next': 'Next',
                 'playlist_prev': 'Previous',
-                'settings_menu': 'Settings'
+                'settings_menu': 'Settings',
+                'loading': 'Loading...',
+                'encoding_in_progress': 'Encoding in progress'
             },
 
             // Español
@@ -69,7 +73,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Vídeo anterior (P)',
                 'playlist_next': 'Siguiente',
                 'playlist_prev': 'Anterior',
-                'settings_menu': 'Configuración'
+                'settings_menu': 'Configuración',
+                'loading': 'Cargando...',
+                'encoding_in_progress': 'Codificación en curso'
             },
 
             // Français
@@ -83,7 +89,7 @@ class VideoPlayerI18n {
                 'volume': 'Volume',
                 'playback_speed': 'Vitesse de lecture',
                 'video_quality': 'Qualité vidéo',
-                'picture_in_picture': 'Image dans l’image (P)',
+                'picture_in_picture': 'Image dans l\'image(P)',
                 'fullscreen': 'Plein écran (F)',
                 'auto': 'Auto',
                 'brand_logo': 'Logo de marque',
@@ -91,7 +97,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Vidéo précédente (P)',
                 'playlist_next': 'Suivant',
                 'playlist_prev': 'Précédent',
-                'settings_menu': 'Paramètres'
+                'settings_menu': 'Paramètres',
+                'loading': 'Chargement...',
+                'encoding_in_progress': 'Encodage en cours'
             },
 
             // Deutsch
@@ -113,7 +121,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Vorheriges Video (P)',
                 'playlist_next': 'Weiter',
                 'playlist_prev': 'Zurück',
-                'settings_menu': 'Einstellungen'
+                'settings_menu': 'Einstellungen',
+                'loading': 'Laden...',
+                'encoding_in_progress': 'Kodierung läuft'
             },
 
             // Português
@@ -135,7 +145,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Vídeo anterior (P)',
                 'playlist_next': 'Próximo',
                 'playlist_prev': 'Anterior',
-                'settings_menu': 'Configurações'
+                'settings_menu': 'Configurações',
+                'loading': 'Carregando...',
+                'encoding_in_progress': 'Codificação em andamento'
             },
 
             // 中文
@@ -157,7 +169,9 @@ class VideoPlayerI18n {
                 'prev_video': '上一个视频 (P)',
                 'playlist_next': '下一个',
                 'playlist_prev': '上一个',
-                'settings_menu': '设置'
+                'settings_menu': '设置',
+                'loading': '加载中...',
+                'encoding_in_progress': '编码中'
             },
 
             // 日本語
@@ -179,7 +193,9 @@ class VideoPlayerI18n {
                 'prev_video': '前の動画 (P)',
                 'playlist_next': '次へ',
                 'playlist_prev': '前へ',
-                'settings_menu': '設定'
+                'settings_menu': '設定',
+                'loading': '読み込み中...',
+                'encoding_in_progress': 'エンコード中'
             },
 
             // Русский
@@ -201,7 +217,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Предыдущее видео (P)',
                 'playlist_next': 'Далее',
                 'playlist_prev': 'Назад',
-                'settings_menu': 'Настройки'
+                'settings_menu': 'Настройки',
+                'loading': 'Загрузка...',
+                'encoding_in_progress': 'Кодирование'
             },
 
             // العربية
@@ -223,7 +241,9 @@ class VideoPlayerI18n {
                 'prev_video': 'الفيديو السابق (P)',
                 'playlist_next': 'التالي',
                 'playlist_prev': 'السابق',
-                'settings_menu': 'الإعدادات'
+                'settings_menu': 'الإعدادات',
+                'loading': 'جاري التحميل...',
+                'encoding_in_progress': 'الترميز جارٍ'
             },
 
             // 한국어 (Korean)
@@ -245,7 +265,9 @@ class VideoPlayerI18n {
                 'prev_video': '이전 비디오 (P)',
                 'playlist_next': '다음',
                 'playlist_prev': '이전',
-                'settings_menu': '설정'
+                'settings_menu': '설정',
+                'loading': '로딩 중...',
+                'encoding_in_progress': '인코딩 진행 중'
             },
 
             // Polski
@@ -267,7 +289,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Poprzednie wideo (P)',
                 'playlist_next': 'Dalej',
                 'playlist_prev': 'Wstecz',
-                'settings_menu': 'Ustawienia'
+                'settings_menu': 'Ustawienia',
+                'loading': 'Ładowanie...',
+                'encoding_in_progress': 'Kodowanie w toku'
             },
 
             // Magyar
@@ -289,7 +313,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Előző videó (P)',
                 'playlist_next': 'Következő',
                 'playlist_prev': 'Előző',
-                'settings_menu': 'Beállítások'
+                'settings_menu': 'Beállítások',
+                'loading': 'Betöltés...',
+                'encoding_in_progress': 'Kódolás folyamatban'
             },
 
             // Türkçe
@@ -311,7 +337,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Önceki video (P)',
                 'playlist_next': 'Sonraki',
                 'playlist_prev': 'Önceki',
-                'settings_menu': 'Ayarlar'
+                'settings_menu': 'Ayarlar',
+                'loading': 'Yükleniyor...',
+                'encoding_in_progress': 'Kodlama devam ediyor'
             },
 
             // Nederlands
@@ -333,7 +361,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Vorige video (P)',
                 'playlist_next': 'Volgende',
                 'playlist_prev': 'Vorige',
-                'settings_menu': 'Instellingen'
+                'settings_menu': 'Instellingen',
+                'loading': 'Laden...',
+                'encoding_in_progress': 'Codering bezig'
             },
 
             // हिन्दी (Hindi)
@@ -355,7 +385,9 @@ class VideoPlayerI18n {
                 'prev_video': 'पिछला वीडियो (P)',
                 'playlist_next': 'अगला',
                 'playlist_prev': 'पिछला',
-                'settings_menu': 'सेटिंग्स'
+                'settings_menu': 'सेटिंग्स',
+                'loading': 'लोड हो रहा है...',
+                'encoding_in_progress': 'एन्कोडिंग प्रगति में'
             },
 
             // Svenska
@@ -377,7 +409,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Föregående video (P)',
                 'playlist_next': 'Nästa',
                 'playlist_prev': 'Föregående',
-                'settings_menu': 'Inställningar'
+                'settings_menu': 'Inställningar',
+                'loading': 'Laddar...',
+                'encoding_in_progress': 'Kodning pågår'
             },
 
             // Bahasa Indonesia
@@ -399,7 +433,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Video sebelumnya (P)',
                 'playlist_next': 'Berikutnya',
                 'playlist_prev': 'Sebelumnya',
-                'settings_menu': 'Pengaturan'
+                'settings_menu': 'Pengaturan',
+                'loading': 'Memuat...',
+                'encoding_in_progress': 'Encoding sedang berlangsung'
             }
         };
 
@@ -527,7 +563,9 @@ try {
                 'fullscreen': 'Fullscreen (F)',
                 'auto': 'Auto',
                 'brand_logo': 'Brand logo',
-                'settings_menu': 'Settings'
+                'settings_menu': 'Settings',
+                'loading': 'Loading...',
+                'encoding_in_progress': 'Encoding in progress'
             };
             return fallback[key] || key;
         },
@@ -865,6 +903,59 @@ constructor(videoElement, options = {}) {
     }
 }
 
+/**
+ * Decode HTML entities to normal characters
+ * @param {string} text - Text with HTML entities
+ * @returns {string} Decoded text
+ */
+decodeHTMLEntities(text) {
+    if (!text) return '';
+    const textarea = document.createElement('textarea');
+    textarea.innerHTML = text;
+    return textarea.value;
+}
+
+// check if the device is Fire TV
+isFireTV() {
+    const ua = navigator.userAgent.toLowerCase();
+    return ua.includes('aftm') ||
+        ua.includes('aftb') ||
+        ua.includes('afts') ||
+        ua.includes('aftmm') ||
+        ua.includes('aftt');
+}
+
+// apply Fire TV specific optimizations
+optimizeVideoForFireTV() {
+    if (!this.isFireTV() || !this.video) return;
+
+    if (this.options.debug) {
+        console.log('Fire TV detected - applying optimizations');
+    }
+
+    // set playsinline attributes
+    this.video.setAttribute('playsinline', '');
+    this.video.setAttribute('webkit-playsinline', '');
+
+    // CSS optimizations
+    this.video.style.transform = 'translateZ(0)';
+    this.video.style.webkitTransform = 'translateZ(0)';
+    this.video.style.backfaceVisibility = 'hidden';
+    this.video.style.webkitBackfaceVisibility = 'hidden';
+    this.video.style.willChange = 'transform';
+
+    // force repaint on loadeddata
+    this.video.addEventListener('loadeddata', () => {
+        if (this.options.debug) {
+            console.log('Fire TV: Video loaded, forcing repaint');
+        }
+        this.video.style.display = 'none';
+        setTimeout(() => {
+            this.video.style.display = 'block';
+        }, 10);
+    }, { once: true });
+}
+
 getPlayerState() {
     return {
         isPlaying: !this.isPaused(),
@@ -1164,6 +1255,7 @@ createPlayerStructure() {
 
     this.container = wrapper;
 
+    this.optimizeVideoForFireTV();
     this.createInitialLoading();
     this.createLoadingOverlay();
     this.collectVideoQualities();
@@ -1204,14 +1296,14 @@ createTitleOverlay() {
 
     const titleText = document.createElement('h2');
     titleText.className = 'title-text';
-    titleText.textContent = this.options.videoTitle || '';
+    titleText.textContent = this.decodeHTMLEntities(this.options.videoTitle) || '';
     overlay.appendChild(titleText);
 
     // add subtitles
     if (this.options.videoSubtitle) {
         const subtitleText = document.createElement('p');
         subtitleText.className = 'subtitle-text';
-        subtitleText.textContent = this.options.videoSubtitle;
+        subtitleText.textContent = this.decodeHTMLEntities(this.options.videoSubtitle);
         overlay.appendChild(subtitleText);
     }
 
@@ -1266,7 +1358,7 @@ setVideoTitle(title) {
     if (this.titleOverlay) {
         const titleElement = this.titleOverlay.querySelector('.title-text');
         if (titleElement) {
-            titleElement.textContent = this.options.videoTitle;
+            titleElement.textContent = this.decodeHTMLEntities(this.options.videoTitle);
         }
 
         if (title) {
@@ -1748,9 +1840,10 @@ updateProgress() {
         this.progressHandle.style.left = progress + '%';
     }
 
+    // Always call updateTimeDisplay, regardless of duration validity
     this.updateTimeDisplay();
 
-    // Trigger timeupdate event (with throttling to avoid too many events)
+    // Trigger timeupdate event with throttling
     if (!this.lastTimeUpdate || Date.now() - this.lastTimeUpdate > 250) {
         this.triggerEvent('timeupdate', {
             currentTime: this.getCurrentTime(),
@@ -1829,6 +1922,8 @@ updateDuration() {
     if (this.durationEl && this.video && this.video.duration && !isNaN(this.video.duration)) {
         this.durationEl.textContent = this.formatTime(this.video.duration);
     }
+    // Call updateTimeDisplay to handle all states (loading, encoding, normal)
+    this.updateTimeDisplay();
 }
 
 changeSpeed(e) {
@@ -2121,7 +2216,7 @@ switchToVideo(newVideoElement, shouldPlay = false) {
     if (newTitle && this.options.showTitleOverlay) {
         this.options.videoTitle = newTitle;
         if (this.titleText) {
-            this.titleText.textContent = newTitle;
+            this.titleText.textContent = this.decodeHTMLEntities(newTitle);
         }
     }
 
@@ -2715,6 +2810,10 @@ addEventListener(eventType, callback) {
             if (!this.isChangingQuality) {
                 this.showLoading();
             }
+
+            // Update time display to show "Loading..." during initial buffering
+            this.updateTimeDisplay();
+
             // Trigger loadstart event - browser started loading media
             this.triggerEvent('loadstart');
         });
@@ -2722,6 +2821,9 @@ addEventListener(eventType, callback) {
         this.video.addEventListener('loadedmetadata', () => {
             this.updateDuration();
 
+            // Update time display when metadata is loaded
+            this.updateTimeDisplay();
+
             // Trigger loadedmetadata event - video metadata loaded
             this.triggerEvent('loadedmetadata', {
                 duration: this.getDuration(),
@@ -2739,6 +2841,10 @@ addEventListener(eventType, callback) {
             if (!this.isChangingQuality) {
                 this.hideLoading();
             }
+
+            // Update time display when data is loaded
+            this.updateTimeDisplay();
+
             // Trigger loadeddata event - current frame data loaded
             this.triggerEvent('loadeddata', {
                 currentTime: this.getCurrentTime()
@@ -2749,6 +2855,10 @@ addEventListener(eventType, callback) {
             if (!this.isChangingQuality) {
                 this.hideLoading();
             }
+
+            // Update time display when video can play
+            this.updateTimeDisplay();
+
             // Trigger canplay event - video can start playing
             this.triggerEvent('canplay', {
                 currentTime: this.getCurrentTime(),
@@ -2756,6 +2866,21 @@ addEventListener(eventType, callback) {
             });
         });
 
+        // Also add to waiting event
+        this.video.addEventListener('waiting', () => {
+            if (!this.isChangingQuality) {
+                this.showLoading();
+
+                // Update time display during buffering
+                this.updateTimeDisplay();
+
+                // Trigger waiting event - video is buffering
+                this.triggerEvent('waiting', {
+                    currentTime: this.getCurrentTime()
+                });
+            }
+        });
+
         this.video.addEventListener('progress', () => {
             this.updateBuffer();
             // Trigger progress event - browser is downloading media
@@ -7721,63 +7846,79 @@ removePluginControlButton(buttonId) {
 }
 
 getBufferedTime() {
-        if (!this.video || !this.video.buffered || this.video.buffered.length === 0) return 0;
-        try {
-            return this.video.buffered.end(this.video.buffered.length - 1);
-        } catch (error) {
-            return 0;
-        }
+    if (!this.video || !this.video.buffered || this.video.buffered.length === 0) return 0;
+    try {
+        return this.video.buffered.end(this.video.buffered.length - 1);
+    } catch (error) {
+        return 0;
     }
+}
 
-    clearTitleTimeout() {
-        if (this.titleTimeout) {
-            clearTimeout(this.titleTimeout);
-            this.titleTimeout = null;
-        }
+clearTitleTimeout() {
+    if (this.titleTimeout) {
+        clearTimeout(this.titleTimeout);
+        this.titleTimeout = null;
     }
+}
 
-    skipTime(seconds) {
-        if (!this.video || !this.video.duration || this.isChangingQuality) return;
+skipTime(seconds) {
+    if (!this.video || !this.video.duration || this.isChangingQuality) return;
 
-        this.video.currentTime = Math.max(0, Math.min(this.video.duration, this.video.currentTime + seconds));
-    }
+    this.video.currentTime = Math.max(0, Math.min(this.video.duration, this.video.currentTime + seconds));
+}
 
 updateTimeDisplay() {
-    // update current time
+    // Update current time
     if (this.currentTimeEl && this.video) {
         this.currentTimeEl.textContent = this.formatTime(this.video.currentTime || 0);
     }
 
-    // update duration or show badge if encoding
+    // Update duration or show appropriate message
     if (this.durationEl && this.video) {
         const duration = this.video.duration;
-
-        // check if duration is valid
-        if (!duration || isNaN(duration) || !isFinite(duration)) {
-            // Video in encoding - show badge instead of duration
-            this.durationEl.innerHTML = '<span class="encoding-badge">Encoding in progress</span>';
+        const readyState = this.video.readyState;
+        const currentTime = this.video.currentTime;
+        const networkState = this.video.networkState;
+
+        // Check for initial buffering state
+        // readyState < 2 means not enough data to play (HAVE_NOTHING or HAVE_METADATA)
+        // currentTime === 0 and duration === 0 indicates initial loading
+        const isInitialBuffering = (readyState < 2 && currentTime === 0) ||
+            (currentTime === 0 && (!duration || duration === 0) && networkState === 2);
+
+        // Check if duration is invalid (NaN or Infinity)
+        const isDurationInvalid = !duration || isNaN(duration) || !isFinite(duration);
+
+        if (isInitialBuffering) {
+            // Initial buffering - show loading message
+            this.durationEl.textContent = t('loading');
+            this.durationEl.classList.remove('encoding-state');
+            this.durationEl.classList.add('loading-state');
+        } else if (isDurationInvalid) {
+            // Video is encoding (FFmpeg still processing) - show encoding badge
+            this.durationEl.textContent = t('encoding_in_progress');
+            this.durationEl.classList.remove('loading-state');
             this.durationEl.classList.add('encoding-state');
         } else {
-            // valid duration - show normal
+            // Valid duration - show normal time
             this.durationEl.textContent = this.formatTime(duration);
-            this.durationEl.classList.remove('encoding-state');
+            this.durationEl.classList.remove('encoding-state', 'loading-state');
         }
     }
 }
 
+formatTime(seconds) {
+    if (isNaN(seconds) || seconds < 0) return '0:00';
 
-    formatTime(seconds) {
-        if (isNaN(seconds) || seconds < 0) return '0:00';
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
 
-        const hours = Math.floor(seconds / 3600);
-        const minutes = Math.floor((seconds % 3600) / 60);
-        const secs = Math.floor(seconds % 60);
-
-        if (hours > 0) {
-            return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-        }
-        return `${minutes}:${secs.toString().padStart(2, '0')}`;
+    if (hours > 0) {
+        return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
     }
+    return `${minutes}:${secs.toString().padStart(2, '0')}`;
+}
 
 }