myetv-player 1.0.10 → 1.1.0

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
@@ -582,9 +583,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 +666,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;
 

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';