myetv-player 1.0.8 → 1.1.0

package/scss/_video.scss

@@ -2320,81 +2320,6 @@ video::-webkit-media-text-track-display {
     right: 15px;
 }
 
-/* Bottom positions - Increased spacing from controlbar (was 70px, now 90px) */
-.video-watermark.watermark-bottomleft {
-    bottom: 90px; /* Increased spacing */
-    left: 15px;
-}
-
-.video-watermark.watermark-bottomright {
-    bottom: 90px; /* Increased spacing */
-    right: 15px;
-}
-
-/* DYNAMIC POSITIONING: Always visible watermark moves down when controls are hidden */
-/* This applies ONLY to watermarks without hide-on-autohide class (always visible) */
-.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide) {
-    bottom: 15px; /* Move to bottom corner when controls hidden */
-}
-
-.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
-    bottom: 15px; /* Move to bottom corner when controls hidden */
-}
-
-/* When controls are shown, bottom watermark stays above controlbar */
-.video-wrapper.has-controls .video-watermark.watermark-bottomleft,
-.video-wrapper.has-controls .video-watermark.watermark-bottomright {
-    bottom: 90px; /* Stay above controlbar */
-}
-
-/* Responsive adjustments for mobile */
-@media (max-width: 768px) {
-    .video-watermark img {
-        max-width: 100px;
-        max-height: 50px;
-    }
-
-    .video-watermark.watermark-topleft,
-    .video-watermark.watermark-topright {
-        top: 10px;
-    }
-
-    .video-watermark.watermark-topleft,
-    .video-watermark.watermark-bottomleft {
-        left: 10px;
-    }
-
-    .video-watermark.watermark-topright,
-    .video-watermark.watermark-bottomright {
-        right: 10px;
-    }
-
-    /* Bottom spacing adjusted for mobile */
-    .video-watermark.watermark-bottomleft,
-    .video-watermark.watermark-bottomright {
-        bottom: 75px; /* Above controlbar on mobile */
-    }
-
-    /* Always visible watermark on mobile - moves down when controls hidden */
-    .video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),
-    .video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
-        bottom: 10px; /* Move to corner on mobile */
-    }
-}
-
-/* Extra small screens */
-@media (max-width: 480px) {
-    .video-watermark.watermark-bottomleft,
-    .video-watermark.watermark-bottomright {
-        bottom: 65px;
-    }
-
-    .video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),
-    .video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
-        bottom: 8px;
-    }
-}
-
 /* Clickable watermark cursor */
 .video-watermark[style*="cursor: pointer"] {
     cursor: pointer !important;

package/scss/_watermark.scss

@@ -5,4 +5,124 @@
 @use 'mixins' as *;
 @use 'variables' as *;
 
+.video-watermark {
+    position: absolute;
+    z-index: 15;
+    pointer-events: auto;
+    opacity: 0.7;
+    transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease;
+}
 
+.video-watermark {
+    visibility: visible;
+    opacity: 0.7;
+}
+
+.video-wrapper:not(.has-controls) .video-watermark.hide-on-autohide {
+    visibility: hidden;
+    opacity: 0;
+}
+
+.video-wrapper.has-controls .video-watermark {
+    visibility: visible;
+    opacity: 0.7;
+}
+
+.video-watermark:hover {
+    opacity: 1;
+}
+
+.video-watermark img {
+    display: block;
+    max-width: 150px;
+    max-height: 80px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+}
+
+/* Top positions */
+.video-watermark.watermark-topleft {
+    top: 15px;
+    left: 15px;
+}
+
+.video-watermark.watermark-topright {
+    top: 15px;
+    right: 15px;
+}
+
+/* Bottom positions - Dynamic with controlbar height + spacing */
+.video-watermark.watermark-bottomleft {
+    bottom: calc(var(--player-controls-height, 70px) + 15px);
+    left: 15px;
+}
+
+.video-watermark.watermark-bottomright {
+    bottom: calc(var(--player-controls-height, 70px) + 15px);
+    right: 15px;
+}
+
+/* When controls hidden, move to corner */
+.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide) {
+    bottom: 15px;
+}
+
+.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
+    bottom: 15px;
+}
+
+/* When controls shown, stay above controlbar */
+.video-wrapper.has-controls .video-watermark.watermark-bottomleft,
+.video-wrapper.has-controls .video-watermark.watermark-bottomright {
+    bottom: calc(var(--player-controls-height, 70px) + 15px);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .video-watermark img {
+        max-width: 100px;
+        max-height: 50px;
+    }
+
+    .video-watermark.watermark-topleft,
+    .video-watermark.watermark-topright {
+        top: 10px;
+    }
+
+    .video-watermark.watermark-topleft,
+    .video-watermark.watermark-bottomleft {
+        left: 10px;
+    }
+
+    .video-watermark.watermark-topright,
+    .video-watermark.watermark-bottomright {
+        right: 10px;
+    }
+
+    .video-watermark.watermark-bottomleft,
+    .video-watermark.watermark-bottomright {
+        bottom: calc(var(--player-controls-height, 60px) + 10px);
+    }
+
+    .video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),
+    .video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
+        bottom: 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    .video-watermark.watermark-bottomleft,
+    .video-watermark.watermark-bottomright {
+        bottom: calc(var(--player-controls-height, 55px) + 10px);
+    }
+
+    .video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),
+    .video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
+        bottom: 8px;
+    }
+}
+
+.video-watermark[style*="cursor: pointer"] {
+    cursor: pointer !important;
+}

package/scss/myetv-player.scss

@@ -35,17 +35,17 @@
 // 10. Poster Overlay
 @use 'poster';
 
-// 11. Watermark
-@use 'watermark';
-
-// 12. Tooltips
+// 11. Tooltips
 @use 'tooltips';
 
-// 12.5 Audio Player (audiofile + audiowave)
+// 12 Audio Player (audiofile + audiowave)
 @use 'audio-player';
 
 // 13. Themes (Blue, Green, Red)
 @use 'themes';
 
-// 14. Responsive (must be last)
-@use 'responsive';
+// 14. Watermark
+@use 'watermark';
+
+// 15. Responsive (must be last)
+@use 'responsive';

package/src/controls.js

@@ -4,7 +4,7 @@
  * Created by https://www.myetv.tv https://oskarcosimo.com 
  */
 
-/* AUTO-HIDE SYSTEM - IMPROVED AND COMPREHENSIVE */
+/* AUTO-HIDE SYSTEM */
 initAutoHide() {
     if (!this.options.autoHide) {
         if (this.options.debug) console.log('Auto-hide disabled in options');
@@ -144,12 +144,17 @@ showControlsNow() {
         this.controls.classList.add('show');
     }
 
-    // ADD THIS: Add has-controls class to container for watermark visibility
+    // Add has-controls class to container for watermark visibility
     if (this.container) {
         this.container.classList.add('has-controls');
+        this.updateControlbarHeight();
+        // Update watermark position
+        if (this.updateWatermarkPosition) {
+            this.updateWatermarkPosition();
+        }
     }
 
-    // Fix: Show title overlay with controls if not persistent
+    // Show title overlay with controls if not persistent
     if (this.options.showTitleOverlay && !this.options.persistentTitle && this.options.videoTitle) {
         this.showTitleOverlay();
     }
@@ -160,32 +165,44 @@ showControlsNow() {
 hideControlsNow() {
     // Don't hide if mouse is still over controls (allow hiding on touch devices)
     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;
     }
 
     // Don't hide if video is paused
     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');
-    }
 
-    // ADD THIS: Remove has-controls class from container for watermark visibility
-    if (this.container) {
-        this.container.classList.remove('has-controls');
+        // Remove has-controls class from container for watermark visibility
+        if (this.container) {
+            this.container.classList.remove('has-controls');
+            this.updateControlbarHeight();
+            // Update watermark position
+            if (this.updateWatermarkPosition) {
+                this.updateWatermarkPosition();
+            }
+        }
     }
 
-    // Fix: Hide title overlay with controls if not persistent
+    // Hide title overlay with controls (if not persistent)
     if (this.options.showTitleOverlay && !this.options.persistentTitle) {
         this.hideTitleOverlay();
     }
 
-    if (this.autoHideDebug && this.options.debug) console.log('❌ Controls hidden');
+    if (this.autoHideDebug && this.options.debug) {
+        console.log('👁️ Controls hidden');
+    }
 }
 
 showControls() {
@@ -464,28 +481,62 @@ createControls() {
     // NEW: Initialize responsive settings menu
     setTimeout(() => {
         this.initializeResponsiveMenu();
+        this.updateControlbarHeight();
     }, 100);
 }
 
-/* NEW: Initialize responsive menu with dynamic width calculation */
+/* Initialize responsive menu with dynamic width calculation */
 initializeResponsiveMenu() {
     if (!this.controls) return;
 
     // Track screen size
     this.isSmallScreen = false;
 
-    // Check initial size and set up listener
+    // Check initial size
     this.checkScreenSize();
 
-    window.addEventListener('resize', () => {
+    // Bind resize handler with updateControlbarHeight
+    const resizeHandler = () => {
         this.checkScreenSize();
-    });
+        this.updateControlbarHeight();
+    };
+
+    // Bind del context
+    this.resizeHandler = resizeHandler.bind(this);
+    window.addEventListener('resize', this.resizeHandler);
 
     // Bind events for settings menu
     this.bindSettingsMenuEvents();
 }
 
-/* NEW: Dynamic width calculation based on logo presence */
+// Dynamic controlbar height tracking for watermark positioning
+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`);
+    }
+}
+
+/* Dynamic width calculation based on logo presence */
 getResponsiveThreshold() {
     // Check if brand logo is enabled and present
     const hasLogo = this.options.brandLogoEnabled && this.options.brandLogoUrl;
@@ -494,7 +545,7 @@ getResponsiveThreshold() {
     return hasLogo ? 650 : 550;
 }
 
-/* NEW: Check if screen is under dynamic threshold */
+/* Check if screen is under dynamic threshold */
 checkScreenSize() {
     const threshold = this.getResponsiveThreshold();
     const newIsSmallScreen = window.innerWidth <= threshold;
@@ -504,12 +555,12 @@ 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}`);
         }
     }
 }
 
-/* NEW: Update settings menu visibility based on screen size */
+/* Update settings menu visibility based on screen size */
 updateSettingsMenuVisibility() {
     const settingsControl = this.controls?.querySelector('.settings-control');
     if (!settingsControl) return;
@@ -549,7 +600,7 @@ updateSettingsMenuVisibility() {
     }
 }
 
-/* NEW: Populate settings menu with controls */
+/* Populate settings menu with controls */
 populateSettingsMenu() {
     const settingsMenu = this.controls?.querySelector('.settings-menu');
     if (!settingsMenu) return;
@@ -611,7 +662,7 @@ populateSettingsMenu() {
     settingsMenu.innerHTML = menuHTML;
 }
 
-/* NEW: Bind settings menu events */
+/* Bind settings menu events */
 bindSettingsMenuEvents() {
     const settingsMenu = this.controls?.querySelector('.settings-menu');
     if (!settingsMenu) return;

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;
 
@@ -1137,14 +1170,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;
+
+    // Support both mouse and touch events
+    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;
     }
 }
 

package/src/events.js

@@ -297,12 +297,28 @@
             });
         }
 
-        if (this.progressContainer) {
-            this.progressContainer.addEventListener('click', (e) => this.seek(e));
-            this.progressContainer.addEventListener('mousedown', (e) => this.startSeeking(e));
-        }
+    if (this.progressContainer) {
+        // Mouse events (desktop)
+        this.progressContainer.addEventListener('click', (e) => this.seek(e));
+        this.progressContainer.addEventListener('mousedown', (e) => this.startSeeking(e));
+
+        // Touch events (mobile)
+        this.progressContainer.addEventListener('touchstart', (e) => {
+            e.preventDefault(); // Prevent scrolling when touching the seek bar
+            this.startSeeking(e);
+        }, { passive: false });
 
         this.setupSeekTooltip();
+    }
+
+    // Add touch events directly on the handle for better mobile dragging
+    if (this.progressHandle) {
+        this.progressHandle.addEventListener('touchstart', (e) => {
+            e.preventDefault(); // Prevent default touch behavior
+            e.stopPropagation(); // Stop event from bubbling to progressContainer
+            this.startSeeking(e);
+        }, { passive: false });
+    }
 
         // NOTE: Auto-hide events are handled in initAutoHide() after everything is ready
 
@@ -323,7 +339,19 @@
         document.addEventListener('mozfullscreenchange', () => this.updateFullscreenButton());
 
         document.addEventListener('mousemove', (e) => this.continueSeeking(e));
-        document.addEventListener('mouseup', () => this.endSeeking());
+    document.addEventListener('mouseup', () => this.endSeeking());
+
+    // Touch events for seeking (mobile)
+    document.addEventListener('touchmove', (e) => {
+        if (this.isUserSeeking) {
+            e.preventDefault(); // Prevent scrolling while seeking
+            this.continueSeeking(e);
+        }
+    }, { passive: false });
+
+    document.addEventListener('touchend', () => this.endSeeking());
+    document.addEventListener('touchcancel', () => this.endSeeking());
+
     }
 
 // Events methods for main class

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

package/src/watermark.js

@@ -69,9 +69,19 @@ initializeWatermark() {
         this.container.appendChild(watermark);
     }
 
+    // Store reference to watermark element
     // Store reference to watermark element
     this.watermarkElement = watermark;
 
+    // Set initial position
+    this.updateWatermarkPosition();
+
+    // Update position on window resize
+    this.watermarkResizeHandler = () => {
+        this.updateWatermarkPosition();
+    };
+    window.addEventListener('resize', this.watermarkResizeHandler);
+
     if (this.options.debug) {
         console.log('🏷️ Watermark created:', {
             url: this.options.watermarkUrl,
@@ -90,6 +100,7 @@ initializeWatermark() {
  * @param {string} position - Position of watermark (topleft, topright, bottomleft, bottomright)
  * @param {string} title - Optional tooltip title for the watermark
  */
+
 setWatermark(url, link = '', position = 'bottomright', title = '') {
     // Update options
     this.options.watermarkUrl = url;
@@ -120,6 +131,12 @@ removeWatermark() {
         this.watermarkElement = null;
     }
 
+    // Remove resize listener
+    if (this.watermarkResizeHandler) {
+        window.removeEventListener('resize', this.watermarkResizeHandler);
+        this.watermarkResizeHandler = null;
+    }
+
     this.options.watermarkUrl = '';
     this.options.watermarkLink = '';
     this.options.watermarkPosition = 'bottomright';
@@ -134,6 +151,7 @@ removeWatermark() {
  * Update watermark position
  * @param {string} position - New position (topleft, topright, bottomleft, bottomright)
  */
+
 setWatermarkPosition(position) {
     if (!['topleft', 'topright', 'bottomleft', 'bottomright'].includes(position)) {
         if (this.options.debug) console.warn('🏷️ Invalid watermark position:', position);
@@ -160,6 +178,39 @@ setWatermarkPosition(position) {
     return this;
 }
 
+/**
+ * Update watermark position based on current controlbar height
+ * Called during window resize to keep watermark above controlbar
+ */
+updateWatermarkPosition() {
+    if (!this.watermarkElement) return;
+    if (!this.controls) return;
+
+    const position = this.options.watermarkPosition || 'bottomright';
+
+    // Only update bottom positions (top positions don't need adjustment)
+    if (position === 'bottomleft' || position === 'bottomright') {
+        const controlsHeight = this.controls.offsetHeight;
+        const spacing = 15; // Same spacing used in CSS
+        const bottomValue = controlsHeight + spacing;
+
+        // Check if controls are visible
+        const hasControls = this.container.classList.contains('has-controls');
+
+        if (hasControls || !this.options.hideWatermark) {
+            // Position above controlbar
+            this.watermarkElement.style.bottom = `${bottomValue}px`;
+        } else {
+            // Position at bottom corner when controls hidden
+            this.watermarkElement.style.bottom = '15px';
+        }
+
+        if (this.options.debug) {
+            console.log(`🏷️ Watermark position updated: bottom ${this.watermarkElement.style.bottom}`);
+        }
+    }
+}
+
 /**
  * Set whether watermark should hide with controls
  * @param {boolean} hide - True to hide watermark with controls, false to keep always visible