myetv-player 1.0.0

package/src/subtitles.js

@@ -0,0 +1,426 @@
+/* Subtitles Module for MYETV Video Player 
+ * Conservative modularization - original code preserved exactly
+ * Created by https://www.myetv.tv https://oskarcosimo.com 
+ */
+
+initializeSubtitles() {
+    this.detectTextTracks();
+    this.updateSubtitlesUI();
+    this.bindSubtitleEvents();
+    this.initializeCustomSubtitles();
+
+    if (this.options.debug) console.log('📝 Detected ' + this.textTracks.length + ' subtitles traces');
+}
+
+initializeCustomSubtitles() {
+    // Initialize player variables
+    this.customSubtitles = [];
+    this.currentCustomSubtitles = [];
+    this.customSubtitlesEnabled = false;
+    this.customOverlayElement = null;
+    this.customUpdateInterval = null;
+    this.currentCustomTrackIndex = -1;
+
+    this.createCustomSubtitleOverlay();
+    this.loadCustomSubtitleTracks();
+
+}
+
+createCustomSubtitleOverlay() {
+    var existing = document.querySelector('.custom-subtitle-overlay');
+    if (existing && existing.parentNode) {
+        existing.parentNode.removeChild(existing);
+    }
+
+    this.customOverlayElement = document.createElement('div');
+    this.customOverlayElement.className = 'custom-subtitle-overlay';
+
+    // ENHANCED styles with responsive defaults
+    this.customOverlayElement.style.cssText =
+        'position: absolute;' +
+        'bottom: 80px;' +
+        'left: 50%;' +
+        'transform: translateX(-50%);' +
+        'z-index: 5;' + 
+        'color: white;' +
+        'font-family: Arial, sans-serif;' +
+        'font-size: clamp(12px, 4vw, 18px);' +  // RESPONSIVE font-size
+        'font-weight: bold;' +
+        'text-align: center;' +
+        'text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);' +
+        'background-color: rgba(0, 0, 0, 0.6);' +
+        'padding: 8px 16px;' +
+        'border-radius: 6px;' +
+        'max-width: 80%;' +
+        'line-height: 1.3;' +
+        'white-space: pre-line;' +
+        'display: none;' +
+        'pointer-events: none;' +
+        'box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);';
+
+    var playerContainer = this.video.parentElement;
+    if (playerContainer) {
+        playerContainer.style.position = 'relative';
+        // ENSURE proper layer stacking
+        if (!playerContainer.style.zIndex) {
+            playerContainer.style.zIndex = '1';
+        }
+        playerContainer.appendChild(this.customOverlayElement);
+    }
+
+    if (this.options.debug) console.log('✅ Custom subtitle overlay created with responsive settings');
+}
+
+loadCustomSubtitleTracks() {
+    var self = this;
+    var trackElements = document.querySelectorAll('track[kind="subtitles"], track[kind="captions"]');
+    var loadPromises = [];
+
+    if (this.options.debug) console.log('📥 Loading ' + trackElements.length + ' subtitle files...');
+
+    for (var i = 0; i < trackElements.length; i++) {
+        var track = trackElements[i];
+
+        (function (trackElement, index) {
+            var promise = fetch(trackElement.src)
+                .then(function (response) {
+                    return response.text();
+                })
+                .then(function (srtText) {
+                    var subtitles = self.parseCustomSRT(srtText);
+                    self.customSubtitles.push({
+                        label: trackElement.label || 'Track ' + (index + 1),
+                        language: trackElement.srclang || 'unknown',
+                        subtitles: subtitles
+                    });
+
+                    if (self.options.debug) {
+                        console.log('✅ Loaded: ' + trackElement.label + ' (' + subtitles.length + ' subtitles)');
+                    }
+                })
+                .catch(function (error) {
+                    if (self.options.debug) {
+                        console.error('❌ Error loading ' + trackElement.src + ':', error);
+                    }
+                });
+
+            loadPromises.push(promise);
+        })(track, i);
+    }
+
+    Promise.all(loadPromises).then(function () {
+        if (self.options.debug && self.customSubtitles.length > 0) {
+            console.log('✅ All custom subtitle tracks loaded');
+        }
+
+        if (self.options.debug) {
+            console.log('📝 Subtitles loaded but NOT auto-enabled - user must activate manually');
+        }
+    });
+}
+
+parseCustomSRT(srtText) {
+    var subtitles = [];
+    var normalizedText = srtText.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+    var blocks = normalizedText.trim().split('\n\n');
+
+    for (var i = 0; i < blocks.length; i++) {
+        var block = blocks[i];
+        var lines = block.trim().split('\n');
+
+        if (lines.length >= 3) {
+            var timeLine = lines[1].trim();
+            var timeMatch = timeLine.match(/(\d{2}:\d{2}:\d{2},\d{3})\s*-->\s*(\d{2}:\d{2}:\d{2},\d{3})/);
+
+            if (timeMatch) {
+                var startTime = this.customTimeToSeconds(timeMatch[1]);
+                var endTime = this.customTimeToSeconds(timeMatch[2]);
+                var text = lines.slice(2).join('\n').trim().replace(/<[^>]*>/g, '');
+
+                if (text.length > 0 && startTime < endTime) {
+                    subtitles.push({
+                        start: startTime,
+                        end: endTime,
+                        text: text
+                    });
+                }
+            }
+        }
+    }
+
+    return subtitles;
+}
+
+customTimeToSeconds(timeString) {
+    var parts = timeString.split(',');
+    var time = parts[0];
+    var millis = parts[1];
+    var timeParts = time.split(':');
+    var hours = parseInt(timeParts[0], 10);
+    var minutes = parseInt(timeParts[1], 10);
+    var seconds = parseInt(timeParts[2], 10);
+    var milliseconds = parseInt(millis, 10);
+
+    return hours * 3600 + minutes * 60 + seconds + milliseconds / 1000;
+}
+
+enableCustomSubtitleTrack(trackIndex) {
+    if (trackIndex < 0 || trackIndex >= this.customSubtitles.length) return false;
+
+    this.disableCustomSubtitles();
+
+    this.customSubtitlesEnabled = true;
+    this.currentCustomTrackIndex = trackIndex;
+    this.currentCustomSubtitles = this.customSubtitles[trackIndex].subtitles;
+
+    var self = this;
+    this.customUpdateInterval = setInterval(function () {
+        if (self.customSubtitlesEnabled && self.currentCustomSubtitles.length > 0) {
+            self.updateCustomSubtitleDisplay();
+        }
+    }, 100);
+
+    if (this.options.debug) {
+        console.log('✅ Custom subtitles enabled: ' + this.customSubtitles[trackIndex].label);
+    }
+
+    return true;
+}
+
+updateCustomSubtitleDisplay() {
+    if (!this.customSubtitlesEnabled || this.currentCustomSubtitles.length === 0) return;
+
+    var currentTime = this.video.currentTime;
+    var currentSubtitle = null;
+
+    for (var i = 0; i < this.currentCustomSubtitles.length; i++) {
+        var sub = this.currentCustomSubtitles[i];
+        if (currentTime >= sub.start && currentTime <= sub.end) {
+            currentSubtitle = sub;
+            break;
+        }
+    }
+
+    if (currentSubtitle) {
+        this.customOverlayElement.textContent = currentSubtitle.text;
+        this.customOverlayElement.style.display = 'block';
+    } else {
+        this.customOverlayElement.style.display = 'none';
+        this.customOverlayElement.textContent = '';
+    }
+}
+
+disableCustomSubtitles() {
+    this.customSubtitlesEnabled = false;
+    this.currentCustomTrackIndex = -1;
+
+    if (this.customOverlayElement) {
+        this.customOverlayElement.style.display = 'none';
+        this.customOverlayElement.textContent = '';
+    }
+
+    if (this.customUpdateInterval) {
+        clearInterval(this.customUpdateInterval);
+        this.customUpdateInterval = null;
+    }
+
+    if (this.options.debug) console.log('❌ Custom subtitles disabled');
+}
+
+detectTextTracks() {
+    this.textTracks = [];
+
+    if (this.video.textTracks) {
+        if (this.options.debug) console.log('🔍 Detecting text tracks... Found: ' + this.video.textTracks.length);
+
+        for (var i = 0; i < this.video.textTracks.length; i++) {
+            var track = this.video.textTracks[i];
+
+            if (track.kind === 'subtitles' || track.kind === 'captions') {
+                this.textTracks.push({
+                    track: track,
+                    label: track.label || 'Track ' + (i + 1),
+                    language: track.language || 'unknown',
+                    kind: track.kind,
+                    index: i
+                });
+            }
+        }
+
+        if (this.options.debug) console.log('📊 Total subtitle tracks detected: ' + this.textTracks.length);
+    }
+}
+
+enableSubtitleTrack(trackIndex) {
+    if (trackIndex < 0 || trackIndex >= this.textTracks.length) return;
+
+    this.disableAllTracks();
+
+    var success = this.enableCustomSubtitleTrack(trackIndex);
+
+    if (success) {
+        this.currentSubtitleTrack = this.textTracks[trackIndex].track;
+        this.subtitlesEnabled = true;
+
+        this.updateSubtitlesButton();
+        this.populateSubtitlesMenu();
+
+        if (this.options.debug) {
+            console.log('✅ Subtitles enabled: ' + this.textTracks[trackIndex].label);
+        }
+
+        // Trigger evento
+        this.triggerEvent('subtitlechange', {
+            enabled: true,
+            trackIndex: trackIndex,
+            trackLabel: this.textTracks[trackIndex].label,
+            trackLanguage: this.textTracks[trackIndex].language
+        });
+    }
+}
+
+disableSubtitles() {
+    this.disableCustomSubtitles();
+    this.disableAllTracks();
+
+    this.currentSubtitleTrack = null;
+    this.subtitlesEnabled = false;
+
+    this.updateSubtitlesButton();
+    this.populateSubtitlesMenu();
+
+    if (this.options.debug) console.log('📝 Subtitles disabled');
+
+    this.triggerEvent('subtitlechange', {
+        enabled: false,
+        trackIndex: -1
+    });
+}
+
+disableAllTracks() {
+    if (this.video.textTracks) {
+        for (var i = 0; i < this.video.textTracks.length; i++) {
+            this.video.textTracks[i].mode = 'hidden';
+        }
+    }
+}
+
+getAvailableSubtitles() {
+    return this.textTracks.map(function (t) {
+        return {
+            label: t.label,
+            language: t.language,
+            kind: t.kind
+        };
+    });
+}
+
+setSubtitleTrack(trackIndex) {
+    if (trackIndex === -1) {
+        this.disableSubtitles();
+    } else {
+        this.enableSubtitleTrack(trackIndex);
+    }
+    return this;
+}
+
+getCurrentSubtitleTrack() {
+    if (!this.subtitlesEnabled || !this.currentSubtitleTrack) return -1;
+
+    for (var i = 0; i < this.textTracks.length; i++) {
+        if (this.textTracks[i].track === this.currentSubtitleTrack) {
+            return i;
+        }
+    }
+    return -1;
+}
+
+isSubtitlesEnabled() {
+    return this.subtitlesEnabled;
+}
+
+updateSubtitlesButton() {
+    var subtitlesBtn = this.controls && this.controls.querySelector('.subtitles-btn');
+    if (!subtitlesBtn) return;
+
+    if (this.subtitlesEnabled) {
+        subtitlesBtn.classList.add('active');
+        subtitlesBtn.title = this.t('subtitlesdisable');
+    } else {
+        subtitlesBtn.classList.remove('active');
+        subtitlesBtn.title = this.t('subtitlesenable');
+    }
+}
+
+populateSubtitlesMenu() {
+    var subtitlesMenu = this.controls && this.controls.querySelector('.subtitles-menu');
+    if (!subtitlesMenu) return;
+
+    var menuHTML = '<div class="subtitles-option ' + (!this.subtitlesEnabled ? 'active' : '') + '" data-track="off">Off</div>';
+
+    for (var i = 0; i < this.textTracks.length; i++) {
+        var trackData = this.textTracks[i];
+        var isActive = this.currentSubtitleTrack === trackData.track;
+        menuHTML += '<div class="subtitles-option ' + (isActive ? 'active' : '') + '" data-track="' + i + '">' + trackData.label + '</div>';
+    }
+
+    subtitlesMenu.innerHTML = menuHTML;
+}
+
+updateSubtitlesUI() {
+    var subtitlesControl = this.controls && this.controls.querySelector('.subtitles-control');
+
+    if (this.textTracks.length > 0 && this.options.showSubtitles) {
+        if (subtitlesControl) subtitlesControl.style.display = 'block';
+        this.populateSubtitlesMenu();
+    } else {
+        if (subtitlesControl) subtitlesControl.style.display = 'none';
+    }
+
+    this.updateSubtitlesButton();
+}
+
+bindSubtitleEvents() {
+    var self = this;
+
+    var subtitlesBtn = this.controls && this.controls.querySelector('.subtitles-btn');
+    if (subtitlesBtn) {
+        subtitlesBtn.addEventListener('click', function (e) {
+            e.stopPropagation();
+            self.toggleSubtitles();
+        });
+    }
+
+    var subtitlesMenu = this.controls && this.controls.querySelector('.subtitles-menu');
+    if (subtitlesMenu) {
+        subtitlesMenu.addEventListener('click', function (e) {
+            self.handleSubtitlesMenuClick(e);
+        });
+    }
+}
+
+handleSubtitlesMenuClick(e) {
+    if (!e.target.classList.contains('subtitles-option')) return;
+
+    var trackData = e.target.getAttribute('data-track');
+
+    if (trackData === 'off') {
+        this.disableSubtitles();
+    } else {
+        var trackIndex = parseInt(trackData, 10);
+        this.enableSubtitleTrack(trackIndex);
+    }
+
+    this.updateSubtitlesButton();
+    this.populateSubtitlesMenu();
+}
+
+toggleSubtitles() {
+    if (this.textTracks.length === 0) return;
+
+    if (this.subtitlesEnabled) {
+        this.disableSubtitles();
+    } else {
+        this.enableSubtitleTrack(0);
+    }
+}

package/src/utils.js

@@ -0,0 +1,51 @@
+// Utils Module for MYETV Video Player
+// Conservative modularization - original code preserved exactly
+// Created by https://www.myetv.tv https://oskarcosimo.com
+
+    getBufferedTime() {
+        if (!this.video || !this.video.buffered || this.video.buffered.length === 0) return 0;
+        try {
+            return this.video.buffered.end(this.video.buffered.length - 1);
+        } catch (error) {
+            return 0;
+        }
+    }
+
+    clearTitleTimeout() {
+        if (this.titleTimeout) {
+            clearTimeout(this.titleTimeout);
+            this.titleTimeout = null;
+        }
+    }
+
+    skipTime(seconds) {
+        if (!this.video || !this.video.duration || this.isChangingQuality) return;
+
+        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);
+        }
+
+        if (this.durationEl && this.video && this.video.duration && !isNaN(this.video.duration)) {
+            this.durationEl.textContent = this.formatTime(this.video.duration);
+        }
+    }
+
+    formatTime(seconds) {
+        if (isNaN(seconds) || seconds < 0) return '0:00';
+
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = Math.floor(seconds % 60);
+
+        if (hours > 0) {
+            return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+        return `${minutes}:${secs.toString().padStart(2, '0')}`;
+    }
+
+// Utils methods for main class
+// All original functionality preserved exactly

package/src/watermark.js

@@ -0,0 +1,195 @@
+// Watermark Module for MYETV Video Player
+// Displays a logo overlay on the video with customizable position and link
+// Created by https://www.myetv.tv https://oskarcosimo.com
+
+/**
+ * Initialize watermark overlay
+ * Creates a watermark element overlaid on the video player
+ */
+initializeWatermark() {
+    if (!this.options.watermarkUrl) {
+        if (this.options.debug) console.log('🏷️ Watermark disabled - no URL provided');
+        return;
+    }
+
+    if (this.options.debug) console.log('🏷️ Initializing watermark overlay');
+
+    // Create watermark container
+    const watermark = document.createElement('div');
+    watermark.className = 'video-watermark';
+
+    // Set position class - FIX: use template literal correctly
+    const position = this.options.watermarkPosition || 'bottomright';
+    watermark.classList.add(`watermark-${position}`); // ← FIX QUI
+
+    // Add hide-on-autohide class if option is enabled
+    if (this.options.hideWatermark) {
+        watermark.classList.add('hide-on-autohide');
+    }
+
+    // Create watermark image
+    const watermarkImg = document.createElement('img');
+    watermarkImg.src = this.options.watermarkUrl;
+    watermarkImg.alt = 'Watermark';
+
+    // Add title/tooltip if provided
+    if (this.options.watermarkTitle) {
+        watermarkImg.title = this.options.watermarkTitle;
+    }
+
+    // Handle image loading error
+    watermarkImg.onerror = () => {
+        if (this.options.debug) console.warn('🏷️ Watermark image failed to load:', this.options.watermarkUrl);
+        watermark.style.display = 'none';
+    };
+
+    watermarkImg.onload = () => {
+        if (this.options.debug) console.log('🏷️ Watermark image loaded successfully');
+    };
+
+    // Add click handler if link URL is provided
+    if (this.options.watermarkLink) {
+        watermark.style.cursor = 'pointer';
+        watermark.addEventListener('click', (e) => {
+            e.stopPropagation(); // Prevent video controls interference
+            window.open(this.options.watermarkLink, '_blank', 'noopener,noreferrer');
+            if (this.options.debug) console.log('🏷️ Watermark clicked, opening:', this.options.watermarkLink);
+        });
+    } else {
+        watermark.style.cursor = 'default';
+    }
+
+    // Append image to watermark container
+    watermark.appendChild(watermarkImg);
+
+    // Insert watermark before controls (above video, below controls)
+    if (this.controls) {
+        this.container.insertBefore(watermark, this.controls);
+    } else {
+        this.container.appendChild(watermark);
+    }
+
+    // Store reference to watermark element
+    this.watermarkElement = watermark;
+
+    if (this.options.debug) {
+        console.log('🏷️ Watermark created:', {
+            url: this.options.watermarkUrl,
+            link: this.options.watermarkLink || 'none',
+            position: position,
+            title: this.options.watermarkTitle || 'none',
+            hideWithControls: this.options.hideWatermark
+        });
+    }
+}
+
+/**
+ * Set or update watermark configuration
+ * @param {string} url - URL of the watermark image
+ * @param {string} link - Optional URL to open when watermark is clicked
+ * @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;
+    this.options.watermarkLink = link;
+    this.options.watermarkPosition = position;
+    this.options.watermarkTitle = title;
+
+    // Remove existing watermark if present
+    if (this.watermarkElement) {
+        this.watermarkElement.remove();
+        this.watermarkElement = null;
+    }
+
+    // Recreate watermark if URL is provided
+    if (url) {
+        this.initializeWatermark();
+    }
+
+    return this;
+}
+
+/**
+ * Remove watermark from player
+ */
+removeWatermark() {
+    if (this.watermarkElement) {
+        this.watermarkElement.remove();
+        this.watermarkElement = null;
+    }
+
+    this.options.watermarkUrl = '';
+    this.options.watermarkLink = '';
+    this.options.watermarkPosition = 'bottomright';
+    this.options.watermarkTitle = '';
+
+    if (this.options.debug) console.log('🏷️ Watermark removed');
+
+    return this;
+}
+
+/**
+ * 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);
+        return this;
+    }
+
+    this.options.watermarkPosition = position;
+
+    if (this.watermarkElement) {
+        // Remove all position classes
+        this.watermarkElement.classList.remove(
+            'watermark-topleft',
+            'watermark-topright',
+            'watermark-bottomleft',
+            'watermark-bottomright'
+        );
+
+        // Add new position class - FIX: use template literal correctly
+        this.watermarkElement.classList.add(`watermark-${position}`); // ← FIX QUI
+    }
+
+    if (this.options.debug) console.log('🏷️ Watermark position updated to:', position);
+
+    return this;
+}
+
+/**
+ * Set whether watermark should hide with controls
+ * @param {boolean} hide - True to hide watermark with controls, false to keep always visible
+ */
+setWatermarkAutoHide(hide) {
+    this.options.hideWatermark = hide;
+
+    if (this.watermarkElement) {
+        if (hide) {
+            this.watermarkElement.classList.add('hide-on-autohide');
+        } else {
+            this.watermarkElement.classList.remove('hide-on-autohide');
+        }
+    }
+
+    if (this.options.debug) console.log('🏷️ Watermark auto-hide set to:', hide);
+
+    return this;
+}
+
+/**
+ * Get current watermark settings
+ * @returns {object} Current watermark configuration
+ */
+getWatermarkSettings() {
+    return {
+        url: this.options.watermarkUrl || '',
+        link: this.options.watermarkLink || '',
+        position: this.options.watermarkPosition || 'bottomright',
+        title: this.options.watermarkTitle || '',
+        hideWithControls: this.options.hideWatermark
+    };
+}