myetv-player 1.0.6 → 1.0.10

package/dist/myetv-player.min.js

@@ -435,6 +435,8 @@ constructor(videoElement, options = {}) {
         hlsLibUrl: 'https://cdn.jsdelivr.net/npm/hls.js@latest',
         adaptiveQualityControl: true,
        
+        seekHandleShape: 'circle',
+       
         audiofile: false,
         audiowave: false,
        
@@ -1508,14 +1510,19 @@ seek(e) {
     if (!this.video || !this.progressContainer || !this.progressFilled || !this.progressHandle || this.isChangingQuality) return;
 
     const rect = this.progressContainer.getBoundingClientRect();
-    const clickX = e.clientX - rect.left;
+
+   
+    const clientX = e.clientX !== undefined ? e.clientX : (e.touches && e.touches[0] ? e.touches[0].clientX : (e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientX : 0));
+
+    const clickX = clientX - rect.left;
     const percentage = Math.max(0, Math.min(1, clickX / rect.width));
 
     if (this.video.duration && !isNaN(this.video.duration)) {
         this.video.currentTime = percentage * this.video.duration;
-        const progress = percentage * 100;
-        this.progressFilled.style.width = progress + '%';
-        this.progressHandle.style.left = progress + '%';
+
+        const progress = `${percentage * 100}%`;
+        this.progressFilled.style.width = progress;
+        this.progressHandle.style.left = progress;
     }
 }
 
@@ -2038,6 +2045,41 @@ loadScript(src) {
     });
 }
 
+
+setSeekHandleShape(shape) {
+    const validShapes = ['none', 'circle', 'square', 'diamond', 'arrow', 'triangle', 'heart', 'star'];
+
+    if (!validShapes.includes(shape)) {
+        if (this.options.debug) console.warn('Invalid seek handle shape:', shape);
+        return this;
+    }
+
+    this.options.seekHandleShape = shape;
+
+   
+    if (this.progressHandle) {
+       
+        validShapes.forEach(s => {
+            this.progressHandle.classList.remove(`progress-handle-${s}`);
+        });
+       
+        this.progressHandle.classList.add(`progress-handle-${shape}`);
+    }
+
+    if (this.options.debug) console.log('Seek handle shape changed to:', shape);
+    return this;
+}
+
+
+getSeekHandleShape() {
+    return this.options.seekHandleShape;
+}
+
+
+getAvailableSeekHandleShapes() {
+    return ['none', 'circle', 'square', 'diamond', 'arrow', 'triangle', 'heart', 'star'];
+}
+
 dispose() {
     if (this.qualityMonitorInterval) {
         clearInterval(this.qualityMonitorInterval);
@@ -2392,12 +2434,28 @@ addEventListener(eventType, callback) {
             });
         }
 
-        if (this.progressContainer) {
-            this.progressContainer.addEventListener('click', (e) => this.seek(e));
-            this.progressContainer.addEventListener('mousedown', (e) => this.startSeeking(e));
-        }
+    if (this.progressContainer) {
+       
+        this.progressContainer.addEventListener('click', (e) => this.seek(e));
+        this.progressContainer.addEventListener('mousedown', (e) => this.startSeeking(e));
+
+       
+        this.progressContainer.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            this.startSeeking(e);
+        }, { passive: false });
 
         this.setupSeekTooltip();
+    }
+
+   
+    if (this.progressHandle) {
+        this.progressHandle.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.startSeeking(e);
+        }, { passive: false });
+    }
 
        
 
@@ -2418,7 +2476,19 @@ addEventListener(eventType, callback) {
         document.addEventListener('mozfullscreenchange', () => this.updateFullscreenButton());
 
         document.addEventListener('mousemove', (e) => this.continueSeeking(e));
-        document.addEventListener('mouseup', () => this.endSeeking());
+    document.addEventListener('mouseup', () => this.endSeeking());
+
+   
+    document.addEventListener('touchmove', (e) => {
+        if (this.isUserSeeking) {
+            e.preventDefault();
+            this.continueSeeking(e);
+        }
+    }, { passive: false });
+
+    document.addEventListener('touchend', () => this.endSeeking());
+    document.addEventListener('touchcancel', () => this.endSeeking());
+
     }
 
 
@@ -2566,6 +2636,11 @@ showControlsNow() {
    
     if (this.container) {
         this.container.classList.add('has-controls');
+        this.updateControlbarHeight();
+       
+        if (this.updateWatermarkPosition) {
+            this.updateWatermarkPosition();
+        }
     }
 
    
@@ -2579,24 +2654,34 @@ showControlsNow() {
 hideControlsNow() {
    
     const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
     if (this.mouseOverControls && !isTouchDevice) {
-        if (this.autoHideDebug && this.options.debug) console.log('⏸️ Not hiding - mouse still over controls');
+        if (this.autoHideDebug && this.options.debug) {
+            console.log('🚫 Not hiding - mouse still over controls');
+        }
         return;
     }
 
    
     if (this.video && this.video.paused) {
-        if (this.autoHideDebug && this.options.debug) console.log('⏸️ Not hiding - video is paused');
+        if (this.autoHideDebug && this.options.debug) {
+            console.log('🚫 Not hiding - video is paused');
+        }
         return;
     }
 
     if (this.controls) {
         this.controls.classList.remove('show');
-    }
 
-   
-    if (this.container) {
-        this.container.classList.remove('has-controls');
+       
+        if (this.container) {
+            this.container.classList.remove('has-controls');
+            this.updateControlbarHeight();
+           
+            if (this.updateWatermarkPosition) {
+                this.updateWatermarkPosition();
+            }
+        }
     }
 
    
@@ -2604,7 +2689,9 @@ hideControlsNow() {
         this.hideTitleOverlay();
     }
 
-    if (this.autoHideDebug && this.options.debug) console.log('❌ Controls hidden');
+    if (this.autoHideDebug && this.options.debug) {
+        console.log('👁️ Controls hidden');
+    }
 }
 
 showControls() {
@@ -2772,7 +2859,7 @@ createControls() {
                 <div class="progress-bar">
                     <div class="progress-buffer"></div>
                     <div class="progress-filled"></div>
-                    <div class="progress-handle"></div>
+                    <div class="progress-handle progress-handle-${this.options.seekHandleShape}"></div>
                 </div>
                 ${this.options.showSeekTooltip ? '<div class="seek-tooltip">0:00</div>' : ''}
             </div>
@@ -2882,6 +2969,7 @@ createControls() {
    
     setTimeout(() => {
         this.initializeResponsiveMenu();
+        this.updateControlbarHeight();
     }, 100);
 }
 
@@ -2895,14 +2983,46 @@ initializeResponsiveMenu() {
    
     this.checkScreenSize();
 
-    window.addEventListener('resize', () => {
+   
+    const resizeHandler = () => {
         this.checkScreenSize();
-    });
+        this.updateControlbarHeight();
+    };
+
+   
+    this.resizeHandler = resizeHandler.bind(this);
+    window.addEventListener('resize', this.resizeHandler);
 
    
     this.bindSettingsMenuEvents();
 }
 
+updateControlbarHeight() {
+    if (!this.controls) return;
+
+    const height = this.controls.offsetHeight;
+    if (this.container) {
+
+        this.container.style.setProperty('--player-controls-height', `${height}px`);
+
+        const watermark = this.container.querySelector('.video-watermark.watermark-bottomleft, .video-watermark.watermark-bottomright');
+        if (watermark) {
+            const hasControls = this.container.classList.contains('has-controls');
+            const isHideOnAutoHide = watermark.classList.contains('hide-on-autohide');
+
+            if (hasControls || !isHideOnAutoHide) {
+                watermark.style.bottom = `${height + 15}px`;
+            } else {
+                watermark.style.bottom = '15px';
+            }
+        }
+    }
+
+    if (this.options.debug) {
+        console.log(`Controlbar height updated: ${height}px`);
+    }
+}
+
 
 getResponsiveThreshold() {
    
@@ -2922,7 +3042,7 @@ checkScreenSize() {
         this.updateSettingsMenuVisibility();
 
         if (this.options.debug) {
-            console.log(`Screen check: ${window.innerWidth}px vs ${threshold}px threshold (logo: ${this.options.brandLogoEnabled}), small: ${this.isSmallScreen}`);
+            console.log(`Screen check: ${window.innerWidth}px vs ${threshold}px (threshold), logo: ${this.options.brandLogoEnabled}, small: ${this.isSmallScreen}`);
         }
     }
 }
@@ -5584,8 +5704,18 @@ initializeWatermark() {
     }
 
    
+   
     this.watermarkElement = watermark;
 
+   
+    this.updateWatermarkPosition();
+
+   
+    this.watermarkResizeHandler = () => {
+        this.updateWatermarkPosition();
+    };
+    window.addEventListener('resize', this.watermarkResizeHandler);
+
     if (this.options.debug) {
         console.log('🏷️ Watermark created:', {
             url: this.options.watermarkUrl,
@@ -5598,6 +5728,7 @@ initializeWatermark() {
 }
 
 
+
 setWatermark(url, link = '', position = 'bottomright', title = '') {
    
     this.options.watermarkUrl = url;
@@ -5626,6 +5757,12 @@ removeWatermark() {
         this.watermarkElement = null;
     }
 
+   
+    if (this.watermarkResizeHandler) {
+        window.removeEventListener('resize', this.watermarkResizeHandler);
+        this.watermarkResizeHandler = null;
+    }
+
     this.options.watermarkUrl = '';
     this.options.watermarkLink = '';
     this.options.watermarkPosition = 'bottomright';
@@ -5637,6 +5774,7 @@ removeWatermark() {
 }
 
 
+
 setWatermarkPosition(position) {
     if (!['topleft', 'topright', 'bottomleft', 'bottomright'].includes(position)) {
         if (this.options.debug) console.warn('🏷️ Invalid watermark position:', position);
@@ -5664,6 +5802,36 @@ setWatermarkPosition(position) {
 }
 
 
+updateWatermarkPosition() {
+    if (!this.watermarkElement) return;
+    if (!this.controls) return;
+
+    const position = this.options.watermarkPosition || 'bottomright';
+
+   
+    if (position === 'bottomleft' || position === 'bottomright') {
+        const controlsHeight = this.controls.offsetHeight;
+        const spacing = 15;
+        const bottomValue = controlsHeight + spacing;
+
+       
+        const hasControls = this.container.classList.contains('has-controls');
+
+        if (hasControls || !this.options.hideWatermark) {
+           
+            this.watermarkElement.style.bottom = `${bottomValue}px`;
+        } else {
+           
+            this.watermarkElement.style.bottom = '15px';
+        }
+
+        if (this.options.debug) {
+            console.log(`🏷️ Watermark position updated: bottom ${this.watermarkElement.style.bottom}`);
+        }
+    }
+}
+
+
 setWatermarkAutoHide(hide) {
     this.options.hideWatermark = hide;
 

package/package.json

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

package/plugins/youtube/README.md

@@ -117,7 +117,13 @@ const player = new MYETVPlayer('myVideo', {
             quality: 'default',
 
             // Enable quality control in player UI
-            enableQualityControl: true
+            enableQualityControl: true,
+
+            // enable channel information retrieval (NEED THE APIKEY TO WORK)
+            enableChannelWatermark: false,
+
+            // Set the default language for auto subtitles
+            autoCaptionLanguage: 'en'
         }
     }
 });
@@ -197,16 +203,18 @@ const player = new MYETVPlayer('myVideo', {
 </script>
 ```
 
-### Method 4: YouTube URL in Video Source
+### Method 4: YouTube video id in the initialization option
 
 ```html
-<video id="myVideo" class="video-player" 
-       src="https://youtu.be/dQw4w9WgXcQ">
+<video id="myVideo" class="video-player">
 </video>
 
 <script>
     const player = new MYETVPlayer('myVideo', {
-        plugins: { youtube: {} }
+        plugins: { youtube: {
+videoId: 'dQw4w9WgXcQ', // YouTube video ID
+autoplay: true
+} }
     });
 </script>
 ```