myetv-player 1.0.10 → 1.1.0

package/dist/myetv-player.js

@@ -422,6 +422,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
@@ -978,9 +979,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 {
@@ -1054,6 +1062,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;
 
@@ -6766,15 +6799,29 @@ getBufferedTime() {
         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);
+    }
+
+    // update duration or show badge if encoding
+    if (this.durationEl && this.video) {
+        const duration = this.video.duration;
 
-        if (this.durationEl && this.video && this.video.duration && !isNaN(this.video.duration)) {
-            this.durationEl.textContent = this.formatTime(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';

package/dist/myetv-player.min.js

@@ -408,6 +408,7 @@ constructor(videoElement, options = {}) {
         showSeekTooltip: true,
         showTitleOverlay: false,
         videoTitle: '',
+        videoSubtitle: '',
         persistentTitle: false,
         debug: false,            
         autoplay: false,         
@@ -964,9 +965,16 @@ createTitleOverlay() {
     const titleText = document.createElement('h2');
     titleText.className = 'title-text';
     titleText.textContent = this.options.videoTitle || '';
-
     overlay.appendChild(titleText);
 
+   
+    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 {
@@ -1040,6 +1048,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;
 
@@ -6517,15 +6550,29 @@ getBufferedTime() {
         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() {
+   
+    if (this.currentTimeEl && this.video) {
+        this.currentTimeEl.textContent = this.formatTime(this.video.currentTime || 0);
+    }
+
+   
+    if (this.durationEl && this.video) {
+        const duration = this.video.duration;
 
-        if (this.durationEl && this.video && this.video.duration && !isNaN(this.video.duration)) {
-            this.durationEl.textContent = this.formatTime(this.video.duration);
+       
+        if (!duration || isNaN(duration) || !isFinite(duration)) {
+           
+            this.durationEl.innerHTML = '<span class="encoding-badge">Encoding in progress</span>';
+            this.durationEl.classList.add('encoding-state');
+        } else {
+           
+            this.durationEl.textContent = this.formatTime(duration);
+            this.durationEl.classList.remove('encoding-state');
         }
     }
+}
+
 
     formatTime(seconds) {
         if (isNaN(seconds) || seconds < 0) return '0:00';

package/package.json

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

package/plugins/cloudflare/README.md

@@ -23,10 +23,12 @@ Official Cloudflare Stream integration plugin for MYETV Video Player. Embed vide
 ## Features
 
 - **Cloudflare Stream Integration**: Full support for Cloudflare Stream videos
+- **DASH/HLS** adaptive streaming ready with full support and libraries hosted on cdnjs.com
 - **Private Videos**: Support for signed URLs and private video access
 - **Live Streaming**: Real-time live stream playback
 - **Player Customization**: Custom colors, poster images, and branding
 - **Auto-Detection**: Automatically detects Cloudflare Stream URLs
+- **Auto-Quality**: Automatically detect video quality (also for hls/dash)
 - **Complete API**: Full control over playback, volume, seeking
 - **Analytics Ready**: Works with Cloudflare Analytics
 - **Ad Support**: VAST ad tag integration
@@ -122,6 +124,7 @@ const player = new MYETVPlayer('myVideo', {
             preload: 'metadata',       // 'none', 'metadata', 'auto'
             controls: true,            // Show player controls
             startTime: 0,              // Start position in seconds
+            defaultQuality: 'auto',    // the default quality of the video (auto, 720p, 480p, 360p ecc.)
 
             // ========== Player Customization ==========
             poster: 'https://example.com/poster.jpg',  // Custom poster image
@@ -272,15 +275,34 @@ plugins: {
     });
 </script>
 ```
-
 **Supported URL Formats:**
-- `https://iframe.videodelivery.net/VIDEO_ID`
-- `https://customer-CODE.cloudflarestream.com/VIDEO_ID/iframe`
+- `https://iframe.videodelivery.net/VIDEO_ID` (iframe)
+- `https://customer-[code].cloudflarestream.com/VIDEO_ID/iframe` (iframe)
 - `https://videodelivery.net/VIDEO_ID`
 
+### Method 4: HLS / DASH Adaptive Streaming
+
+```html
+<video id="myVideo" class="video-player"></video>
+
+<script>
+    const player = new MYETVPlayer('myVideo', {
+        plugins: {
+            cloudflare: {
+                manifestUrl: 'https://customer-[code].cloudflarestream.com/VIDEO_ID/manifest/video.m3u8'
+            }
+        }
+    });
+</script>
+```
+
+**Supported URL Formats:**
+- `https://customer-[code].cloudflarestream.com/VIDEO_ID/manifest/video.m3u8` (hls)
+- `https://customer-[code].cloudflarestream.com/VIDEO_ID/manifest/video.mpd` (dash)
+
 ---
 
-### Method 4: Load Dynamically
+### Method 5: Load Dynamically
 
 ```html
 <video id="myVideo" class="video-player"></video>