myetv-player 1.0.10 → 1.1.1

package/scss/_controls.scss

@@ -309,3 +309,56 @@
     touch-action: none; // Disable browser's default touch gestures
     -webkit-touch-callout: none; // Disable callout on iOS
 }
+
+// ===================================
+// ENCODING BADGE - Video in encoding
+// ===================================
+
+/* Badge for video in encoding (duration Infinity/NaN) */
+.encoding-badge {
+    display: inline-block;
+    background: rgba(128, 128, 128, 0.8); // Grigio semi-trasparente
+    color: white;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    backdrop-filter: blur(4px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    animation: encoding-pulse 2s ease-in-out infinite;
+}
+
+/* Class for the container when shows the badge */
+.time-display .encoding-state {
+    display: flex;
+    align-items: center;
+}
+
+/* animation for the badge */
+@keyframes encoding-pulse {
+    0%, 100% {
+        opacity: 0.8;
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+
+// Responsive for badge encoding
+@media (max-width: 480px) {
+    .encoding-badge {
+        font-size: 9px;
+        padding: 1px 6px;
+    }
+}
+
+@media (max-width: 350px) {
+    .encoding-badge {
+        font-size: 8px;
+        padding: 1px 4px;
+    }
+}

package/scss/_title-overlay.scss

@@ -44,6 +44,33 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.subtitle-text {
+    color: var(--player-text-color);
+    font-size: 14px; // Più piccolo del titolo (18px)
+    font-weight: 400; // Più leggero del titolo (600)
+    line-height: 1.3;
+    margin: 5px 0 0 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
+    opacity: 0.9;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+@media (max-width: 768px) {
+    .subtitle-text {
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 480px) {
+    .subtitle-text {
+        font-size: 11px;
+    }
+}
+
 /* CONTROLS - IMPROVED RESPONSIVE DESIGN */
 .controls {
     position: absolute;

package/src/core.js

@@ -26,6 +26,7 @@ constructor(videoElement, options = {}) {
         showSeekTooltip: true,
         showTitleOverlay: false,
         videoTitle: '',
+        videoSubtitle: '',
         persistentTitle: false,
         debug: false,             // Enable/disable debug logging
         autoplay: false,          // if video should autoplay at start
@@ -36,6 +37,7 @@ constructor(videoElement, options = {}) {
         brandLogoEnabled: false,  // Enable/disable brand logo
         brandLogoUrl: '',         // URL for brand logo image
         brandLogoLinkUrl: '',     // Optional URL to open when clicking the logo
+        brandLogoTooltipText: '', // Tooltip text for brand logo
         playlistEnabled: true,    // Enable/disable playlist detection
         playlistAutoPlay: true,   // Auto-play next video when current ends
         playlistLoop: false,      // Loop playlist when reaching the end
@@ -111,18 +113,42 @@ constructor(videoElement, options = {}) {
 
     // Custom event system
     this.eventCallbacks = {
-        'played': [],
-        'paused': [],
-        'subtitlechange': [],
-        'chapterchange': [],
-        'pipchange': [],
-        'fullscreenchange': [],
-        'speedchange': [],
-        'timeupdate': [],
-        'volumechange': [],
-        'qualitychange': [],
-        'playlistchange': [],
-        'ended': []
+        // Core lifecycle events
+        'playerready': [],     // Fired when player is fully initialized and ready
+        'played': [],          // Fired when video starts playing
+        'paused': [],          // Fired when video is paused
+        'ended': [],           // Fired when video playback ends
+
+        // Playback state events
+        'playing': [],         // Fired when video is actually playing (after buffering)
+        'waiting': [],         // Fired when video is waiting for data (buffering)
+        'seeking': [],         // Fired when seek operation starts
+        'seeked': [],          // Fired when seek operation completes
+
+        // Loading events
+        'loadstart': [],       // Fired when browser starts looking for media
+        'loadedmetadata': [],  // Fired when metadata (duration, dimensions) is loaded
+        'loadeddata': [],      // Fired when data for current frame is loaded
+        'canplay': [],         // Fired when browser can start playing video
+        'progress': [],        // Fired periodically while downloading media
+        'durationchange': [],  // Fired when duration attribute changes
+
+        // Error events
+        'error': [],           // Fired when media loading or playback error occurs
+        'stalled': [],         // Fired when browser is trying to get data but it's not available
+
+        // Control events
+        'timeupdate': [],      // Fired when current playback position changes
+        'volumechange': [],    // Fired when volume or muted state changes
+        'speedchange': [],     // Fired when playback speed changes
+        'qualitychange': [],   // Fired when video quality changes
+
+        // Feature events
+        'subtitlechange': [],  // Fired when subtitle track changes
+        'chapterchange': [],   // Fired when video chapter changes
+        'pipchange': [],       // Fired when picture-in-picture mode changes
+        'fullscreenchange': [], // Fired when fullscreen mode changes
+        'playlistchange': []   // Fired when playlist item changes
     };
 
     // Playlist management
@@ -484,6 +510,14 @@ markPlayerReady() {
             this.container.classList.add('player-initialized');
         }
 
+        this.triggerEvent('playerready', {
+            playerState: this.getPlayerState(),
+            qualities: this.qualities,
+            subtitles: this.textTracks,
+            chapters: this.chapters,
+            playlist: this.getPlaylistInfo()
+        });
+
         if (this.video) {
             this.video.style.visibility = '';
             this.video.style.opacity = '';
@@ -582,9 +616,16 @@ createTitleOverlay() {
     const titleText = document.createElement('h2');
     titleText.className = 'title-text';
     titleText.textContent = 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;
+        overlay.appendChild(subtitleText);
+    }
+
     if (this.controls) {
         this.container.insertBefore(overlay, this.controls);
     } else {
@@ -658,6 +699,31 @@ getVideoTitle() {
     return this.options.videoTitle;
 }
 
+setVideoSubtitle(subtitle) {
+    this.options.videoSubtitle = subtitle || '';
+
+    if (this.titleOverlay) {
+        let subtitleElement = this.titleOverlay.querySelector('.subtitle-text');
+
+        if (subtitle) {
+            if (!subtitleElement) {
+                subtitleElement = document.createElement('p');
+                subtitleElement.className = 'subtitle-text';
+                this.titleOverlay.appendChild(subtitleElement);
+            }
+            subtitleElement.textContent = subtitle;
+        } else if (subtitleElement) {
+            subtitleElement.remove();
+        }
+    }
+
+    return this;
+}
+
+getVideoSubtitle() {
+    return this.options.videoSubtitle;
+}
+
 setPersistentTitle(persistent) {
     this.options.persistentTitle = persistent;
 
@@ -1313,7 +1379,14 @@ createBrandLogo() {
     const logo = document.createElement('img');
     logo.className = 'brand-logo';
     logo.src = this.options.brandLogoUrl;
-    logo.alt = this.t('brand_logo');
+    logo.alt = 'Brand logo';
+
+    // Add tooltip ONLY if link URL is present
+    if (this.options.brandLogoLinkUrl) {
+        // Use custom tooltip text if provided, otherwise fallback to URL
+        logo.title = this.options.brandLogoTooltipText || this.options.brandLogoLinkUrl;
+        // NON usare data-tooltip per evitare che venga sovrascritto da updateTooltips()
+    }
 
     // Handle loading error
     logo.onerror = () => {
@@ -1329,7 +1402,7 @@ createBrandLogo() {
     if (this.options.brandLogoLinkUrl) {
         logo.style.cursor = 'pointer';
         logo.addEventListener('click', (e) => {
-            e.stopPropagation(); // Prevent video controls interference
+            e.stopPropagation();
             window.open(this.options.brandLogoLinkUrl, '_blank', 'noopener,noreferrer');
             if (this.options.debug) console.log('Brand logo clicked, opening:', this.options.brandLogoLinkUrl);
         });
@@ -1337,15 +1410,10 @@ createBrandLogo() {
         logo.style.cursor = 'default';
     }
 
-    // Position the brand logo at the right of the controlbar (at the left of the buttons)
     controlsRight.insertBefore(logo, controlsRight.firstChild);
 
     if (this.options.debug) {
-        if (this.options.brandLogoLinkUrl) {
-            console.log('Brand logo with click handler created for:', this.options.brandLogoLinkUrl);
-        } else {
-            console.log('Brand logo created (no link)');
-        }
+        console.log('Brand logo created with tooltip:', logo.title || 'no tooltip');
     }
 }
 

package/src/events.js

@@ -165,36 +165,129 @@
     }
 
     bindEvents() {
-        if (this.video) {
-            this.video.addEventListener('loadedmetadata', () => {
-                this.updateDuration();
-                setTimeout(() => {
-                    this.initializeSubtitles();
-                }, 100);
+    if (this.video) {
+
+        // Playback events
+        this.video.addEventListener('playing', () => {
+            this.hideLoading();
+            // Trigger playing event - video is now actually playing
+            this.triggerEvent('playing', {
+                currentTime: this.getCurrentTime(),
+                duration: this.getDuration()
             });
-            this.video.addEventListener('timeupdate', () => this.updateProgress());
-            this.video.addEventListener('progress', () => this.updateBuffer());
-            this.video.addEventListener('waiting', () => {
-                if (!this.isChangingQuality) {
-                    this.showLoading();
-                }
+        });
+
+        this.video.addEventListener('waiting', () => {
+            if (!this.isChangingQuality) {
+                this.showLoading();
+                // Trigger waiting event - video is buffering
+                this.triggerEvent('waiting', {
+                    currentTime: this.getCurrentTime()
+                });
+            }
+        });
+
+        this.video.addEventListener('seeking', () => {
+            // Trigger seeking event - seek operation started
+            this.triggerEvent('seeking', {
+                currentTime: this.getCurrentTime(),
+                targetTime: this.video.currentTime
             });
-            this.video.addEventListener('canplay', () => {
-                if (!this.isChangingQuality) {
-                    this.hideLoading();
-                }
+        });
+
+        this.video.addEventListener('seeked', () => {
+            // Trigger seeked event - seek operation completed
+            this.triggerEvent('seeked', {
+                currentTime: this.getCurrentTime()
             });
-            this.video.addEventListener('ended', () => this.onVideoEnded());
-            this.video.addEventListener('loadstart', () => {
-                if (!this.isChangingQuality) {
-                    this.showLoading();
-                }
+        });
+
+        // Loading events
+        this.video.addEventListener('loadstart', () => {
+            if (!this.isChangingQuality) {
+                this.showLoading();
+            }
+            // Trigger loadstart event - browser started loading media
+            this.triggerEvent('loadstart');
+        });
+
+        this.video.addEventListener('loadedmetadata', () => {
+            this.updateDuration();
+
+            // Trigger loadedmetadata event - video metadata loaded
+            this.triggerEvent('loadedmetadata', {
+                duration: this.getDuration(),
+                videoWidth: this.video.videoWidth,
+                videoHeight: this.video.videoHeight
             });
-            this.video.addEventListener('loadeddata', () => {
-                if (!this.isChangingQuality) {
-                    this.hideLoading();
-                }
+
+            // Initialize subtitles after metadata is loaded
+            setTimeout(() => {
+                this.initializeSubtitles();
+            }, 100);
+        });
+
+        this.video.addEventListener('loadeddata', () => {
+            if (!this.isChangingQuality) {
+                this.hideLoading();
+            }
+            // Trigger loadeddata event - current frame data loaded
+            this.triggerEvent('loadeddata', {
+                currentTime: this.getCurrentTime()
             });
+        });
+
+        this.video.addEventListener('canplay', () => {
+            if (!this.isChangingQuality) {
+                this.hideLoading();
+            }
+            // Trigger canplay event - video can start playing
+            this.triggerEvent('canplay', {
+                currentTime: this.getCurrentTime(),
+                duration: this.getDuration()
+            });
+        });
+
+        this.video.addEventListener('progress', () => {
+            this.updateBuffer();
+            // Trigger progress event - browser is downloading media
+            this.triggerEvent('progress', {
+                buffered: this.getBufferedTime(),
+                duration: this.getDuration()
+            });
+        });
+
+        this.video.addEventListener('durationchange', () => {
+            this.updateDuration();
+            // Trigger durationchange event - video duration changed
+            this.triggerEvent('durationchange', {
+                duration: this.getDuration()
+            });
+        });
+
+        // Error events
+        this.video.addEventListener('error', (e) => {
+            this.onVideoError(e);
+            // Trigger error event - media loading/playback error occurred
+            this.triggerEvent('error', {
+                code: this.video.error?.code,
+                message: this.video.error?.message,
+                src: this.video.currentSrc || this.video.src
+            });
+        });
+
+        this.video.addEventListener('stalled', () => {
+            // Trigger stalled event - browser is trying to fetch data but it's not available
+            this.triggerEvent('stalled', {
+                currentTime: this.getCurrentTime()
+            });
+        });
+
+
+            this.video.addEventListener('timeupdate', () => this.updateProgress());
+
+            this.video.addEventListener('ended', () => this.onVideoEnded());
+
             // Complete video click logic with doubleTapPause support (DESKTOP)
             this.video.addEventListener('click', () => {
                 if (!this.options.pauseClick) return;

package/src/utils.js

@@ -24,15 +24,29 @@
         this.video.currentTime = Math.max(0, Math.min(this.video.duration, this.video.currentTime + seconds));
     }
 
-    updateTimeDisplay() {
-        if (this.currentTimeEl && this.video) {
-            this.currentTimeEl.textContent = this.formatTime(this.video.currentTime || 0);
-        }
+updateTimeDisplay() {
+    // update current time
+    if (this.currentTimeEl && this.video) {
+        this.currentTimeEl.textContent = this.formatTime(this.video.currentTime || 0);
+    }
 
-        if (this.durationEl && this.video && this.video.duration && !isNaN(this.video.duration)) {
-            this.durationEl.textContent = this.formatTime(this.video.duration);
+    // update duration or show badge if encoding
+    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>';
+            this.durationEl.classList.add('encoding-state');
+        } else {
+            // valid duration - show normal
+            this.durationEl.textContent = this.formatTime(duration);
+            this.durationEl.classList.remove('encoding-state');
         }
     }
+}
+
 
     formatTime(seconds) {
         if (isNaN(seconds) || seconds < 0) return '0:00';