myetv-player 1.0.0 → 1.0.8

package/src/core.js

@@ -2,433 +2,436 @@
 // Conservative modularization - original code preserved exactly
 // Created by https://www.myetv.tv https://oskarcosimo.com
 
-    constructor(videoElement, options = {}) {
-        this.video = typeof videoElement === 'string'
-            ? document.getElementById(videoElement)
-            : videoElement;
+constructor(videoElement, options = {}) {
+    this.video = typeof videoElement === 'string'
+        ? document.getElementById(videoElement)
+        : videoElement;
 
-        if (!this.video) {
-            throw new Error('Video element not found: ' + videoElement);
-        }
+    if (!this.video) {
+        throw new Error('Video element not found: ' + videoElement);
+    }
+
+    this.options = {
+        showQualitySelector: true,
+        showSpeedControl: true,
+        showFullscreen: true,
+        showPictureInPicture: true,
+        showSubtitles: true,
+        subtitlesEnabled: false,
+        autoHide: true,
+        autoHideDelay: 3000,
+        poster: null,                // URL of poster image
+        showPosterOnEnd: false,      // Show poster again when video ends
+        keyboardControls: true,
+        showSeekTooltip: true,
+        showTitleOverlay: false,
+        videoTitle: '',
+        persistentTitle: false,
+        debug: false,             // Enable/disable debug logging
+        autoplay: false,          // if video should autoplay at start
+        defaultQuality: 'auto',   // 'auto', '1080p', '720p', '480p', etc.
+        language: null,           // language of the player (default english)
+        pauseClick: true,         // the player should be paused when click over the video area
+        doubleTapPause: true,     // first tap (or click) show the controlbar, second tap (or click) pause
+        brandLogoEnabled: false,  // Enable/disable brand logo
+        brandLogoUrl: '',         // URL for brand logo image
+        brandLogoLinkUrl: '',     // Optional URL to open when clicking the logo
+        playlistEnabled: true,    // Enable/disable playlist detection
+        playlistAutoPlay: true,   // Auto-play next video when current ends
+        playlistLoop: false,      // Loop playlist when reaching the end
+        loop: false,              // Loop video when it ends (restart from beginning)
+        volumeSlider: 'show',     // Mobile volume slider: 'show' (horizontal popup) or 'hide' (no slider on mobile)
+        // WATERMARK OVERLAY
+        watermarkUrl: '',           // URL of watermark image
+        watermarkLink: '',          // Optional URL to open when clicking watermark
+        watermarkPosition: 'bottomright', // Position: topleft, topright, bottomleft, bottomright
+        watermarkTitle: '',         // Optional tooltip title
+        hideWatermark: true,        // Hide watermark with controls (default: true)
+        // ADAPTIVE STREAMING SUPPORT
+        adaptiveStreaming: false, // Enable DASH/HLS adaptive streaming
+        dashLibUrl: 'https://cdn.dashjs.org/latest/dash.all.min.js', // Dash.js library URL
+        hlsLibUrl: 'https://cdn.jsdelivr.net/npm/hls.js@latest', // HLS.js library URL
+        adaptiveQualityControl: true, // Show quality control for adaptive streams
+        //seek shape
+        seekHandleShape: 'circle', // Available shape: none, circle, square, diamond, arrow, triangle, heart, star
+        // AUDIO PLAYER
+        audiofile: false,
+        audiowave: false,
+        // RESOLUTION CONTROL
+        resolution: "normal", // "normal", "4:3", "16:9", "stretched", "fit-to-screen", "scale-to-fit"
+        ...options
+    };
+
+    this.isUserSeeking = false;
+    this.controlsTimeout = null;
+    this.titleTimeout = null;
+    this.currentQualityIndex = 0;
+    this.qualities = [];
+    this.originalSources = [];
+        this.setupMenuToggles(); // Initialize menu toggle system
+    this.isPiPSupported = this.checkPiPSupport();
+    this.seekTooltip = null;
+    this.titleOverlay = null;
+    this.isPlayerReady = false;
+
+    // Subtitle management
+    this.textTracks = [];
+    this.currentSubtitleTrack = null;
+    this.subtitlesEnabled = false;
+    this.customSubtitleRenderer = null;
 
-        this.options = {
-            showQualitySelector: true,
-            showSpeedControl: true,
-            showFullscreen: true,
-            showPictureInPicture: true,
-            showSubtitles: true,
-            subtitlesEnabled: false,
-            autoHide: true,
-            autoHideDelay: 3000,
-            poster: null,                // URL of poster image
-            showPosterOnEnd: false,      // Show poster again when video ends
-            keyboardControls: true,
-            showSeekTooltip: true,
-            showTitleOverlay: false,
-            videoTitle: '',
-            persistentTitle: false,
-            debug: false,             // Enable/disable debug logging
-            autoplay: false,          // if video should autoplay at start
-            defaultQuality: 'auto',   // 'auto', '1080p', '720p', '480p', etc.
-            language: null,           // language of the player (default english)
-            pauseClick: true,         // the player should be paused when click over the video area
-            doubleTapPause: true,     // first tap (or click) show the controlbar, second tap (or click) pause
-            brandLogoEnabled: false,  // Enable/disable brand logo
-            brandLogoUrl: '',         // URL for brand logo image
-            brandLogoLinkUrl: '',     // Optional URL to open when clicking the logo
-            playlistEnabled: true,    // Enable/disable playlist detection
-            playlistAutoPlay: true,   // Auto-play next video when current ends
-            playlistLoop: false,      // Loop playlist when reaching the end
-            loop: false,              // Loop video when it ends (restart from beginning)
-            volumeSlider: 'horizontal', //volume slider type: 'horizontal' or 'vertical'
-            // WATERMARK OVERLAY
-            watermarkUrl: '',           // URL of watermark image
-            watermarkLink: '',          // Optional URL to open when clicking watermark
-            watermarkPosition: 'bottomright', // Position: topleft, topright, bottomleft, bottomright
-            watermarkTitle: '',         // Optional tooltip title
-            hideWatermark: true,        // Hide watermark with controls (default: true)
-            // ADAPTIVE STREAMING SUPPORT
-            adaptiveStreaming: false, // Enable DASH/HLS adaptive streaming
-            dashLibUrl: 'https://cdn.dashjs.org/latest/dash.all.min.js', // Dash.js library URL
-            hlsLibUrl: 'https://cdn.jsdelivr.net/npm/hls.js@latest', // HLS.js library URL
-            adaptiveQualityControl: true, // Show quality control for adaptive streams
-            // AUDIO PLAYER
-            audiofile: false,
-            audiowave: false,
-            // RESOLUTION CONTROL
-            resolution: "normal", // "normal", "4:3", "16:9", "stretched", "fit-to-screen", "scale-to-fit"
-            ...options
-        };
+    // Chapter management
+    this.chapters = [];
+    this.chapterMarkersContainer = null;
+    this.chapterTooltip = null;
 
-        this.isUserSeeking = false;
-        this.controlsTimeout = null;
-        this.titleTimeout = null;
-        this.currentQualityIndex = 0;
-        this.qualities = [];
-        this.originalSources = [];
-        this.isPiPSupported = this.checkPiPSupport();
-        this.seekTooltip = null;
-        this.titleOverlay = null;
-        this.isPlayerReady = false;
-
-        // Subtitle management
-        this.textTracks = [];
-        this.currentSubtitleTrack = null;
-        this.subtitlesEnabled = false;
-        this.customSubtitleRenderer = null;
-
-        // Chapter management
-        this.chapters = [];
-        this.chapterMarkersContainer = null;
-        this.chapterTooltip = null;
-
-        // Dual quality indicator management
-        this.selectedQuality = this.options.defaultQuality || 'auto';
-        this.currentPlayingQuality = null;
-        this.qualityMonitorInterval = null;
+    // Dual quality indicator management
+    this.selectedQuality = this.options.defaultQuality || 'auto';
+    this.currentPlayingQuality = null;
+    this.qualityMonitorInterval = null;
 
-        // Quality change management
-        this.qualityChangeTimeout = null;
-        this.isChangingQuality = false;
+    // Quality change management
+    this.qualityChangeTimeout = null;
+    this.isChangingQuality = false;
 
-        // Quality debug
-        this.debugQuality = false;
+    // Quality debug
+    this.debugQuality = false;
 
-        // Auto-hide system
-        this.autoHideTimer = null;
-        this.mouseOverControls = false;
-        this.autoHideDebug = false;
-        this.autoHideInitialized = false;
+    // Auto-hide system
+    this.autoHideTimer = null;
+    this.mouseOverControls = false;
+    this.autoHideDebug = false;
+    this.autoHideInitialized = false;
 
-        // Poster management
-        this.posterOverlay = null;
+    // Poster management
+    this.posterOverlay = null;
 
     // Watermark overlay
     this.watermarkElement = null;
 
-        // Custom event system
-        this.eventCallbacks = {
-            'played': [],
-            'paused': [],
-            'subtitlechange': [],
-            'chapterchange': [],
-            'pipchange': [],
-            'fullscreenchange': [],
-            'speedchange': [],
-            'timeupdate': [],
-            'volumechange': [],
-            'qualitychange': [],
-            'playlistchange': [],
-            'ended': []
+    // Custom event system
+    this.eventCallbacks = {
+        'played': [],
+        'paused': [],
+        'subtitlechange': [],
+        'chapterchange': [],
+        'pipchange': [],
+        'fullscreenchange': [],
+        'speedchange': [],
+        'timeupdate': [],
+        'volumechange': [],
+        'qualitychange': [],
+        'playlistchange': [],
+        'ended': []
+    };
+
+    // Playlist management
+    this.playlist = [];
+    this.currentPlaylistIndex = -1;
+    this.playlistId = null;
+    this.isPlaylistActive = false;
+
+    // Adaptive streaming management
+    this.dashPlayer = null;
+    this.hlsPlayer = null;
+    this.adaptiveStreamingType = null; // 'dash', 'hls', or null
+    this.isAdaptiveStream = false;
+    this.adaptiveQualities = [];
+    this.librariesLoaded = {
+        dash: false,
+        hls: false
+    };
+
+    this.lastTimeUpdate = 0; // For throttling timeupdate events
+
+    if (this.options.language && this.isI18nAvailable()) {
+        VideoPlayerTranslations.setLanguage(this.options.language);
+    }
+    // Apply autoplay if enabled
+    if (options.autoplay) {
+        this.video.autoplay = true;
+    }
+
+    try {
+        this.interceptAutoLoading();
+        this.createPlayerStructure();
+        this.initializeElements();
+        // audio player adaptation
+        this.adaptToAudioFile = function () {
+            if (this.options.audiofile) {
+                // Nascondere video
+                if (this.video) {
+                    this.video.style.display = 'none';
+                }
+                if (this.container) {
+                    this.container.classList.add('audio-player');
+                }
+                if (this.options.audiowave) {
+                    this.initAudioWave();
+                }
+            }
         };
+        // Audio wave with Web Audio API
+        this.initAudioWave = function () {
+            if (!this.video) return;
+
+            this.audioWaveCanvas = document.createElement('canvas');
+            this.audioWaveCanvas.className = 'audio-wave-canvas';
+            this.container.appendChild(this.audioWaveCanvas);
+
+            const canvasCtx = this.audioWaveCanvas.getContext('2d');
+            const WIDTH = this.audioWaveCanvas.width = this.container.clientWidth;
+            const HEIGHT = this.audioWaveCanvas.height = 60; // altezza onda audio
+
+            // Setup Web Audio API
+            const AudioContext = window.AudioContext || window.webkitAudioContext;
+            this.audioCtx = new AudioContext();
+            this.analyser = this.audioCtx.createAnalyser();
+            this.source = this.audioCtx.createMediaElementSource(this.video);
+            this.source.connect(this.analyser);
+            this.analyser.connect(this.audioCtx.destination);
+
+            this.analyser.fftSize = 2048;
+            const bufferLength = this.analyser.fftSize;
+            const dataArray = new Uint8Array(bufferLength);
+
+            // canvas
+            const draw = () => {
+                requestAnimationFrame(draw);
+                this.analyser.getByteTimeDomainData(dataArray);
+
+                canvasCtx.fillStyle = '#222';
+                canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+                canvasCtx.lineWidth = 2;
+                canvasCtx.strokeStyle = '#33ccff';
+                canvasCtx.beginPath();
+
+                const sliceWidth = WIDTH / bufferLength;
+                let x = 0;
+
+                for (let i = 0; i < bufferLength; i++) {
+                    const v = dataArray[i] / 128.0;
+                    const y = v * HEIGHT / 2;
+
+                    if (i === 0) {
+                        canvasCtx.moveTo(x, y);
+                    } else {
+                        canvasCtx.lineTo(x, y);
+                    }
 
-        // Playlist management
-        this.playlist = [];
-        this.currentPlaylistIndex = -1;
-        this.playlistId = null;
-        this.isPlaylistActive = false;
-
-        // Adaptive streaming management
-        this.dashPlayer = null;
-        this.hlsPlayer = null;
-        this.adaptiveStreamingType = null; // 'dash', 'hls', or null
-        this.isAdaptiveStream = false;
-        this.adaptiveQualities = [];
-        this.librariesLoaded = {
-            dash: false,
-            hls: false
-        };
+                    x += sliceWidth;
+                }
+                canvasCtx.lineTo(WIDTH, HEIGHT / 2);
+                canvasCtx.stroke();
+            };
 
-        this.lastTimeUpdate = 0; // For throttling timeupdate events
+            draw();
+        };
+        this.adaptToAudioFile();
+        this.bindEvents();
 
-        if (this.options.language && this.isI18nAvailable()) {
-            VideoPlayerTranslations.setLanguage(this.options.language);
-        }
-	// Apply autoplay if enabled
-        if (options.autoplay) {
-            this.video.autoplay = true;
+        if (this.options.keyboardControls) {
+            this.setupKeyboardControls();
         }
 
-        try {
-            this.interceptAutoLoading();
-            this.createPlayerStructure();
-            this.initializeElements();
-            // audio player adaptation
-            this.adaptToAudioFile = function () {
-                if (this.options.audiofile) {
-                    // Nascondere video
-                    if (this.video) {
-                        this.video.style.display = 'none';
-                    }
-                    if (this.container) {
-                        this.container.classList.add('audio-player');
-                    }
-                    if (this.options.audiowave) {
-                        this.initAudioWave();
-                    }
-                }
-            };
-            // Audio wave with Web Audio API
-            this.initAudioWave = function () {
-                if (!this.video) return;
-
-                this.audioWaveCanvas = document.createElement('canvas');
-                this.audioWaveCanvas.className = 'audio-wave-canvas';
-                this.container.appendChild(this.audioWaveCanvas);
-
-                const canvasCtx = this.audioWaveCanvas.getContext('2d');
-                const WIDTH = this.audioWaveCanvas.width = this.container.clientWidth;
-                const HEIGHT = this.audioWaveCanvas.height = 60; // altezza onda audio
-
-                // Setup Web Audio API
-                const AudioContext = window.AudioContext || window.webkitAudioContext;
-                this.audioCtx = new AudioContext();
-                this.analyser = this.audioCtx.createAnalyser();
-                this.source = this.audioCtx.createMediaElementSource(this.video);
-                this.source.connect(this.analyser);
-                this.analyser.connect(this.audioCtx.destination);
-
-                this.analyser.fftSize = 2048;
-                const bufferLength = this.analyser.fftSize;
-                const dataArray = new Uint8Array(bufferLength);
-
-                // canvas
-                const draw = () => {
-                    requestAnimationFrame(draw);
-                    this.analyser.getByteTimeDomainData(dataArray);
-
-                    canvasCtx.fillStyle = '#222';
-                    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
-
-                    canvasCtx.lineWidth = 2;
-                    canvasCtx.strokeStyle = '#33ccff';
-                    canvasCtx.beginPath();
-
-                    const sliceWidth = WIDTH / bufferLength;
-                    let x = 0;
-
-                    for (let i = 0; i < bufferLength; i++) {
-                        const v = dataArray[i] / 128.0;
-                        const y = v * HEIGHT / 2;
-
-                        if (i === 0) {
-                            canvasCtx.moveTo(x, y);
-                        } else {
-                            canvasCtx.lineTo(x, y);
-                        }
-
-                        x += sliceWidth;
-                    }
-                    canvasCtx.lineTo(WIDTH, HEIGHT / 2);
-                    canvasCtx.stroke();
-                };
+        this.updateVolumeSliderVisual();
+        this.initVolumeTooltip();
+        this.updateTooltips();
+        this.markPlayerReady();
+        this.initializePluginSystem();
+        this.restoreSourcesAsync();
 
-                draw();
-            };
-            this.adaptToAudioFile();
-            this.bindEvents();
+        this.initializeSubtitles();
+        this.initializeQualityMonitoring();
 
-            if (this.options.keyboardControls) {
-                this.setupKeyboardControls();
-            }
+        this.initializeResolution();
+        this.initializeChapters();
+        this.initializePoster();
+        this.initializeWatermark();
 
-            this.updateVolumeSliderVisual();
-            this.initVolumeTooltip();
-            this.updateTooltips();
-            this.markPlayerReady();
-            this.initializePluginSystem();
-            this.restoreSourcesAsync();
+    } catch (error) {
+        if (this.options.debug) console.error('Video player initialization error:', error);
+    }
+}
 
-            this.initializeSubtitles();
-            this.initializeQualityMonitoring();
+getPlayerState() {
+    return {
+        isPlaying: !this.isPaused(),
+        isPaused: this.isPaused(),
+        currentTime: this.getCurrentTime(),
+        duration: this.getDuration(),
+        volume: this.getVolume(),
+        isMuted: this.isMuted(),
+        playbackRate: this.getPlaybackRate(),
+        isFullscreen: this.isFullscreenActive(),
+        isPictureInPicture: this.isPictureInPictureActive(),
+        subtitlesEnabled: this.isSubtitlesEnabled(),
+        currentSubtitle: this.getCurrentSubtitleTrack(),
+        selectedQuality: this.getSelectedQuality(),
+        currentQuality: this.getCurrentPlayingQuality(),
+        isAutoQuality: this.isAutoQualityActive()
+    };
+}
 
-            this.initializeResolution();
-            this.initializeChapters();
-            this.initializePoster();
-            this.initializeWatermark();
+isI18nAvailable() {
+    return typeof VideoPlayerTranslations !== 'undefined' &&
+        VideoPlayerTranslations !== null &&
+        typeof VideoPlayerTranslations.t === 'function';
+}
 
+t(key) {
+    if (this.isI18nAvailable()) {
+        try {
+            return VideoPlayerTranslations.t(key);
         } catch (error) {
-            if (this.options.debug) console.error('Video player initialization error:', error);
+            if (this.options.debug) console.warn('Translation error:', error);
         }
     }
 
-    getPlayerState() {
-        return {
-            isPlaying: !this.isPaused(),
-            isPaused: this.isPaused(),
-            currentTime: this.getCurrentTime(),
-            duration: this.getDuration(),
-            volume: this.getVolume(),
-            isMuted: this.isMuted(),
-            playbackRate: this.getPlaybackRate(),
-            isFullscreen: this.isFullscreenActive(),
-            isPictureInPicture: this.isPictureInPictureActive(),
-            subtitlesEnabled: this.isSubtitlesEnabled(),
-            currentSubtitle: this.getCurrentSubtitleTrack(),
-            selectedQuality: this.getSelectedQuality(),
-            currentQuality: this.getCurrentPlayingQuality(),
-            isAutoQuality: this.isAutoQualityActive()
-        };
-    }
-
-    isI18nAvailable() {
-        return typeof VideoPlayerTranslations !== 'undefined' &&
-            VideoPlayerTranslations !== null &&
-            typeof VideoPlayerTranslations.t === 'function';
-    }
+    const fallback = {
+        'play_pause': 'Play/Pause (Space)',
+        'mute_unmute': 'Mute/Unmute (M)',
+        'volume': 'Volume',
+        'playback_speed': 'Playback speed',
+        'video_quality': 'Video quality',
+        'picture_in_picture': 'Picture-in-Picture (P)',
+        'fullscreen': 'Fullscreen (F)',
+        'subtitles': 'Subtitles (S)',
+        'subtitles_enable': 'Enable subtitles',
+        'subtitles_disable': 'Disable subtitles',
+        'subtitles_off': 'Off',
+        'auto': 'Auto',
+        'brand_logo': 'Brand logo',
+        'next_video': 'Next video (N)',
+        'prev_video': 'Previous video (P)',
+        'playlist_next': 'Next',
+        'playlist_prev': 'Previous'
+    };
+
+    return fallback[key] || key;
+}
 
-    t(key) {
-        if (this.isI18nAvailable()) {
-            try {
-                return VideoPlayerTranslations.t(key);
-            } catch (error) {
-                if (this.options.debug) console.warn('Translation error:', error);
-            }
-        }
+interceptAutoLoading() {
+    this.saveOriginalSources();
+    this.disableSources();
 
-        const fallback = {
-            'play_pause': 'Play/Pause (Space)',
-            'mute_unmute': 'Mute/Unmute (M)',
-            'volume': 'Volume',
-            'playback_speed': 'Playback speed',
-            'video_quality': 'Video quality',
-            'picture_in_picture': 'Picture-in-Picture (P)',
-            'fullscreen': 'Fullscreen (F)',
-            'subtitles': 'Subtitles (S)',
-            'subtitles_enable': 'Enable subtitles',
-            'subtitles_disable': 'Disable subtitles',
-            'subtitles_off': 'Off',
-            'auto': 'Auto',
-            'brand_logo': 'Brand logo',
-            'next_video': 'Next video (N)',
-            'prev_video': 'Previous video (P)',
-            'playlist_next': 'Next',
-            'playlist_prev': 'Previous'
-        };
+    this.video.preload = 'none';
+    this.video.controls = false;
+    this.video.autoplay = false;
 
-        return fallback[key] || key;
+    if (this.video.src && this.video.src !== window.location.href) {
+        this.originalSrc = this.video.src;
+        this.video.removeAttribute('src');
+        this.video.src = '';
     }
 
-    interceptAutoLoading() {
-        this.saveOriginalSources();
-        this.disableSources();
+    this.hideNativePlayer();
 
-        this.video.preload = 'none';
-        this.video.controls = false;
-        this.video.autoplay = false;
+    if (this.options.debug) console.log('📁 Sources temporarily disabled to prevent blocking');
+}
 
-        if (this.video.src && this.video.src !== window.location.href) {
-            this.originalSrc = this.video.src;
-            this.video.removeAttribute('src');
-            this.video.src = '';
+saveOriginalSources() {
+    const sources = this.video.querySelectorAll('source');
+    this.originalSources = [];
+
+    sources.forEach((source, index) => {
+        if (source.src) {
+            this.originalSources.push({
+                element: source,
+                src: source.src,
+                type: source.type || 'video/mp4',
+                quality: source.getAttribute('data-quality') || `quality-${index}`,
+                index: index
+            });
         }
+    });
 
-        this.hideNativePlayer();
+    if (this.options.debug) console.log(`📁 Saved ${this.originalSources.length} sources originali:`, this.originalSources);
+}
 
-        if (this.options.debug) console.log('📁 Sources temporarily disabled to prevent blocking');
-    }
+disableSources() {
+    const sources = this.video.querySelectorAll('source');
+    sources.forEach(source => {
+        if (source.src) {
+            source.removeAttribute('src');
+        }
+    });
+}
 
-    saveOriginalSources() {
-        const sources = this.video.querySelectorAll('source');
-        this.originalSources = [];
+restoreSourcesAsync() {
+    setTimeout(() => {
+        this.restoreSources();
+    }, 200);
+}
 
-        sources.forEach((source, index) => {
-            if (source.src) {
-                this.originalSources.push({
-                    element: source,
-                    src: source.src,
-                    type: source.type || 'video/mp4',
-                    quality: source.getAttribute('data-quality') || `quality-${index}`,
-                    index: index
-                });
+    async restoreSources() {
+    try {
+        // Check for adaptive streaming first
+        let adaptiveSource = null;
+
+        if (this.originalSrc) {
+            adaptiveSource = this.originalSrc;
+        } else if (this.originalSources.length > 0) {
+            // Check if any source is adaptive
+            const firstSource = this.originalSources[0];
+            if (firstSource.src && this.detectStreamType(firstSource.src)) {
+                adaptiveSource = firstSource.src;
             }
-        });
-
-        if (this.options.debug) console.log(`📁 Saved ${this.originalSources.length} sources originali:`, this.originalSources);
-    }
+        }
 
-    disableSources() {
-        const sources = this.video.querySelectorAll('source');
-        sources.forEach(source => {
-            if (source.src) {
-                source.removeAttribute('src');
+        // Initialize adaptive streaming if detected
+        if (adaptiveSource && this.options.adaptiveStreaming) {
+            const adaptiveInitialized = await this.initializeAdaptiveStreaming(adaptiveSource);
+            if (adaptiveInitialized) {
+                if (this.options.debug) console.log('📡 Adaptive streaming initialized');
+                return;
             }
-        });
-    }
-
-    restoreSourcesAsync() {
-        setTimeout(() => {
-            this.restoreSources();
-        }, 200);
-    }
+        }
 
-    async restoreSources() {
-        try {
-            // Check for adaptive streaming first
-            let adaptiveSource = null;
-
-            if (this.originalSrc) {
-                adaptiveSource = this.originalSrc;
-            } else if (this.originalSources.length > 0) {
-                // Check if any source is adaptive
-                const firstSource = this.originalSources[0];
-                if (firstSource.src && this.detectStreamType(firstSource.src)) {
-                    adaptiveSource = firstSource.src;
-                }
-            }
+        // Fallback to traditional sources
+        if (this.originalSrc) {
+            this.video.src = this.originalSrc;
+        }
 
-            // Initialize adaptive streaming if detected
-            if (adaptiveSource && this.options.adaptiveStreaming) {
-                const adaptiveInitialized = await this.initializeAdaptiveStreaming(adaptiveSource);
-                if (adaptiveInitialized) {
-                    if (this.options.debug) console.log('📡 Adaptive streaming initialized');
-                    return;
-                }
+        this.originalSources.forEach(sourceData => {
+            if (sourceData.element && sourceData.src) {
+                sourceData.element.src = sourceData.src;
             }
+        });
 
-            // Fallback to traditional sources
-            if (this.originalSrc) {
-                this.video.src = this.originalSrc;
-            }
+        this.qualities = this.originalSources.map(s => ({
+            src: s.src,
+            quality: s.quality,
+            type: s.type
+        }));
 
-            this.originalSources.forEach(sourceData => {
-                if (sourceData.element && sourceData.src) {
-                    sourceData.element.src = sourceData.src;
-                }
+        if (this.originalSrc && this.qualities.length === 0) {
+            this.qualities.push({
+                src: this.originalSrc,
+                quality: 'default',
+                type: 'video/mp4'
             });
+        }
 
-            this.qualities = this.originalSources.map(s => ({
-                src: s.src,
-                quality: s.quality,
-                type: s.type
-            }));
-
-            if (this.originalSrc && this.qualities.length === 0) {
-                this.qualities.push({
-                    src: this.originalSrc,
-                    quality: 'default',
-                    type: 'video/mp4'
-                });
-            }
-
-            if (this.qualities.length > 0) {
-                this.video.load();
+        if (this.qualities.length > 0) {
+            this.video.load();
 
-                // CRITICAL: Re-initialize subtitles AFTER video.load() completes
-                this.video.addEventListener('loadedmetadata', () => {
-                    setTimeout(() => {
-                        this.reinitializeSubtitles();
-                        if (this.options.debug) console.log('🔄 Subtitles re-initialized after video load');
-                    }, 300);
-                }, { once: true });
-            }
+            // CRITICAL: Re-initialize subtitles AFTER video.load() completes
+            this.video.addEventListener('loadedmetadata', () => {
+                setTimeout(() => {
+                    this.reinitializeSubtitles();
+                    if (this.options.debug) console.log('🔄 Subtitles re-initialized after video load');
+                }, 300);
+            }, { once: true });
+        }
 
-            if (this.options.debug) console.log('✅ Sources ripristinate:', this.qualities);
+        if (this.options.debug) console.log('✅ Sources ripristinate:', this.qualities);
 
-        } catch (error) {
-            if (this.options.debug) console.error('❌ Errore ripristino sources:', error);
-        }
+    } catch (error) {
+        if (this.options.debug) console.error('❌ Errore ripristino sources:', error);
     }
+}
 
 reinitializeSubtitles() {
     if (this.options.debug) console.log('🔄 Re-initializing subtitles...');
@@ -474,630 +477,706 @@ getDefaultSubtitleTrack() {
     return -1;
 }
 
-    markPlayerReady() {
+markPlayerReady() {
+    setTimeout(() => {
+        this.isPlayerReady = true;
+        if (this.container) {
+            this.container.classList.add('player-initialized');
+        }
+
+        if (this.video) {
+            this.video.style.visibility = '';
+            this.video.style.opacity = '';
+            this.video.style.pointerEvents = '';
+        }
+
+        // INITIALIZE AUTO-HIDE AFTER EVERYTHING IS READY
         setTimeout(() => {
-            this.isPlayerReady = true;
-            if (this.container) {
-                this.container.classList.add('player-initialized');
+            if (this.options.autoHide && !this.autoHideInitialized) {
+                this.initAutoHide();
             }
 
-            if (this.video) {
-                this.video.style.visibility = '';
-                this.video.style.opacity = '';
-                this.video.style.pointerEvents = '';
+            // Fix: Apply default quality (auto or specific)
+            if (this.selectedQuality && this.qualities && this.qualities.length > 0) {
+                if (this.options.debug) console.log(`🎯 Applying defaultQuality: "${this.selectedQuality}"`);
+
+                if (this.selectedQuality === 'auto') {
+                    this.enableAutoQuality();
+                } else {
+                    // Check if requested quality is available
+                    const requestedQuality = this.qualities.find(q => q.quality === this.selectedQuality);
+                    if (requestedQuality) {
+                        if (this.options.debug) console.log(`✅ Quality "${this.selectedQuality}" available`);
+                        this.setQuality(this.selectedQuality);
+                    } else {
+                        if (this.options.debug) console.warn(`⚠️ Quality "${this.selectedQuality}" not available - fallback to auto`);
+                        if (this.options.debug) console.log('📋 Available qualities:', this.qualities.map(q => q.quality));
+                        this.enableAutoQuality();
+                    }
+                }
             }
 
-            // INITIALIZE AUTO-HIDE AFTER EVERYTHING IS READY
-            setTimeout(() => {
-                if (this.options.autoHide && !this.autoHideInitialized) {
-                    this.initAutoHide();
-                }
+            // Autoplay
+            if (this.options.autoplay) {
+                if (this.options.debug) console.log('🎬 Autoplay enabled');
+                setTimeout(() => {
+                    this.video.play().catch(error => {
+                        if (this.options.debug) console.warn('⚠️ Autoplay blocked:', error);
+                    });
+                }, 100);
+            }
+        }, 200);
 
-                // Fix: Apply default quality (auto or specific)
-                if (this.selectedQuality && this.qualities && this.qualities.length > 0) {
-                    if (this.options.debug) console.log(`🎯 Applying defaultQuality: "${this.selectedQuality}"`);
+    }, 100);
+}
 
-                    if (this.selectedQuality === 'auto') {
-                        this.enableAutoQuality();
-                    } else {
-                        // Check if requested quality is available
-                        const requestedQuality = this.qualities.find(q => q.quality === this.selectedQuality);
-                        if (requestedQuality) {
-                            if (this.options.debug) console.log(`✅ Quality "${this.selectedQuality}" available`);
-                            this.setQuality(this.selectedQuality);
-                        } else {
-                            if (this.options.debug) console.warn(`⚠️ Quality "${this.selectedQuality}" not available - fallback to auto`);
-                            if (this.options.debug) console.log('📋 Available qualities:', this.qualities.map(q => q.quality));
-                            this.enableAutoQuality();
-                        }
-                    }
-                }
+createPlayerStructure() {
+    let wrapper = this.video.closest('.video-wrapper');
+    if (!wrapper) {
+        wrapper = document.createElement('div');
+        wrapper.className = 'video-wrapper';
+        this.video.parentNode.insertBefore(wrapper, this.video);
+        wrapper.appendChild(this.video);
+    }
 
-                // Autoplay
-                if (this.options.autoplay) {
-                    if (this.options.debug) console.log('🎬 Autoplay enabled');
-                    setTimeout(() => {
-                        this.video.play().catch(error => {
-                            if (this.options.debug) console.warn('⚠️ Autoplay blocked:', error);
-                        });
-                    }, 100);
-                }
-            }, 200);
+    this.container = wrapper;
 
-        }, 100);
+    this.createInitialLoading();
+    this.createLoadingOverlay();
+    this.collectVideoQualities();
+    this.createControls();
+    this.createBrandLogo();
+    this.detectPlaylist();
+
+    if (this.options.showTitleOverlay) {
+        this.createTitleOverlay();
     }
+}
 
-    createPlayerStructure() {
-        let wrapper = this.video.closest('.video-wrapper');
-        if (!wrapper) {
-            wrapper = document.createElement('div');
-            wrapper.className = 'video-wrapper';
-            this.video.parentNode.insertBefore(wrapper, this.video);
-            wrapper.appendChild(this.video);
-        }
+createInitialLoading() {
+    const initialLoader = document.createElement('div');
+    initialLoader.className = 'initial-loading';
+    initialLoader.innerHTML = '<div class="loading-spinner"></div>';
+    this.container.appendChild(initialLoader);
+    this.initialLoading = initialLoader;
+}
 
-        this.container = wrapper;
+collectVideoQualities() {
+    if (this.options.debug) console.log('📁 Video qualities will be loaded with restored sources');
+}
 
-        this.createInitialLoading();
-        this.createLoadingOverlay();
-        this.collectVideoQualities();
-        this.createControls();
-        this.createBrandLogo();
-        this.detectPlaylist();
+createLoadingOverlay() {
+    const overlay = document.createElement('div');
+    overlay.className = 'loading-overlay';
+    overlay.id = 'loadingOverlay-' + this.getUniqueId();
+    overlay.innerHTML = '<div class="loading-spinner"></div>';
+    this.container.appendChild(overlay);
+    this.loadingOverlay = overlay;
+}
 
-        if (this.options.showTitleOverlay) {
-            this.createTitleOverlay();
-        }
-    }
+createTitleOverlay() {
+    const overlay = document.createElement('div');
+    overlay.className = 'title-overlay';
+    overlay.id = 'titleOverlay-' + this.getUniqueId();
 
-    createInitialLoading() {
-        const initialLoader = document.createElement('div');
-        initialLoader.className = 'initial-loading';
-        initialLoader.innerHTML = '<div class="loading-spinner"></div>';
-        this.container.appendChild(initialLoader);
-        this.initialLoading = initialLoader;
-    }
+    const titleText = document.createElement('h2');
+    titleText.className = 'title-text';
+    titleText.textContent = this.options.videoTitle || '';
 
-    collectVideoQualities() {
-        if (this.options.debug) console.log('📁 Video qualities will be loaded with restored sources');
-    }
+    overlay.appendChild(titleText);
 
-    createLoadingOverlay() {
-        const overlay = document.createElement('div');
-        overlay.className = 'loading-overlay';
-        overlay.id = 'loadingOverlay-' + this.getUniqueId();
-        overlay.innerHTML = '<div class="loading-spinner"></div>';
+    if (this.controls) {
+        this.container.insertBefore(overlay, this.controls);
+    } else {
         this.container.appendChild(overlay);
-        this.loadingOverlay = overlay;
     }
 
-    createTitleOverlay() {
-        const overlay = document.createElement('div');
-        overlay.className = 'title-overlay';
-        overlay.id = 'titleOverlay-' + this.getUniqueId();
+    this.titleOverlay = overlay;
 
-        const titleText = document.createElement('h2');
-        titleText.className = 'title-text';
-        titleText.textContent = this.options.videoTitle || '';
+    if (this.options.persistentTitle && this.options.videoTitle) {
+        this.showTitleOverlay();
+    }
+}
 
-        overlay.appendChild(titleText);
+updateTooltips() {
+    if (!this.controls) return;
 
-        if (this.controls) {
-            this.container.insertBefore(overlay, this.controls);
-        } else {
-            this.container.appendChild(overlay);
-        }
-
-        this.titleOverlay = overlay;
+    try {
+        this.controls.querySelectorAll('[data-tooltip]').forEach(element => {
+            const key = element.getAttribute('data-tooltip');
+            element.title = this.t(key);
+        });
 
-        if (this.options.persistentTitle && this.options.videoTitle) {
-            this.showTitleOverlay();
+        const autoOption = this.controls.querySelector('.quality-option[data-quality="auto"]');
+        if (autoOption) {
+            autoOption.textContent = this.t('auto');
         }
+    } catch (error) {
+        if (this.options.debug) console.warn('Errore aggiornamento tooltip:', error);
     }
+}
 
-    updateTooltips() {
-        if (!this.controls) return;
-
+setLanguage(lang) {
+    if (this.isI18nAvailable()) {
         try {
-            this.controls.querySelectorAll('[data-tooltip]').forEach(element => {
-                const key = element.getAttribute('data-tooltip');
-                element.title = this.t(key);
-            });
-
-            const autoOption = this.controls.querySelector('.quality-option[data-quality="auto"]');
-            if (autoOption) {
-                autoOption.textContent = this.t('auto');
+            if (VideoPlayerTranslations.setLanguage(lang)) {
+                this.updateTooltips();
+                return true;
             }
         } catch (error) {
-            if (this.options.debug) console.warn('Errore aggiornamento tooltip:', error);
+            if (this.options.debug) console.warn('Errore cambio lingua:', error);
         }
     }
+    return false;
+}
 
-    setLanguage(lang) {
-        if (this.isI18nAvailable()) {
-            try {
-                if (VideoPlayerTranslations.setLanguage(lang)) {
-                    this.updateTooltips();
-                    return true;
-                }
-            } catch (error) {
-                if (this.options.debug) console.warn('Errore cambio lingua:', error);
+setVideoTitle(title) {
+    this.options.videoTitle = title || '';
+
+    if (this.titleOverlay) {
+        const titleElement = this.titleOverlay.querySelector('.title-text');
+        if (titleElement) {
+            titleElement.textContent = this.options.videoTitle;
+        }
+
+        if (title) {
+            this.showTitleOverlay();
+
+            if (!this.options.persistentTitle) {
+                this.clearTitleTimeout();
+                this.titleTimeout = setTimeout(() => {
+                    this.hideTitleOverlay();
+                }, 3000);
             }
         }
-        return false;
     }
 
-    setVideoTitle(title) {
-        this.options.videoTitle = title || '';
+    return this;
+}
 
-        if (this.titleOverlay) {
-            const titleElement = this.titleOverlay.querySelector('.title-text');
-            if (titleElement) {
-                titleElement.textContent = this.options.videoTitle;
-            }
+getVideoTitle() {
+    return this.options.videoTitle;
+}
 
-            if (title) {
-                this.showTitleOverlay();
+setPersistentTitle(persistent) {
+    this.options.persistentTitle = persistent;
 
-                if (!this.options.persistentTitle) {
-                    this.clearTitleTimeout();
-                    this.titleTimeout = setTimeout(() => {
-                        this.hideTitleOverlay();
-                    }, 3000);
-                }
+    if (this.titleOverlay && this.options.videoTitle) {
+        if (persistent) {
+            this.showTitleOverlay();
+            this.clearTitleTimeout();
+        } else {
+            this.titleOverlay.classList.remove('persistent');
+            if (this.titleOverlay.classList.contains('show')) {
+                this.clearTitleTimeout();
+                this.titleTimeout = setTimeout(() => {
+                    this.hideTitleOverlay();
+                }, 3000);
             }
         }
+    }
 
-        return this;
+    return this;
+}
+
+enableTitleOverlay() {
+    if (!this.titleOverlay && !this.options.showTitleOverlay) {
+        this.options.showTitleOverlay = true;
+        this.createTitleOverlay();
     }
+    return this;
+}
 
-    getVideoTitle() {
-        return this.options.videoTitle;
+disableTitleOverlay() {
+    if (this.titleOverlay) {
+        this.titleOverlay.remove();
+        this.titleOverlay = null;
     }
+    this.options.showTitleOverlay = false;
+    return this;
+}
 
-    setPersistentTitle(persistent) {
-        this.options.persistentTitle = persistent;
+getUniqueId() {
+    return Math.random().toString(36).substr(2, 9);
+}
 
-        if (this.titleOverlay && this.options.videoTitle) {
-            if (persistent) {
-                this.showTitleOverlay();
-                this.clearTitleTimeout();
-            } else {
-                this.titleOverlay.classList.remove('persistent');
-                if (this.titleOverlay.classList.contains('show')) {
-                    this.clearTitleTimeout();
-                    this.titleTimeout = setTimeout(() => {
-                        this.hideTitleOverlay();
-                    }, 3000);
-                }
-            }
-        }
+initializeElements() {
+    this.progressContainer = this.controls?.querySelector('.progress-container');
+    this.progressFilled = this.controls?.querySelector('.progress-filled');
+    this.progressBuffer = this.controls?.querySelector('.progress-buffer');
+    this.progressHandle = this.controls?.querySelector('.progress-handle');
+    this.seekTooltip = this.controls?.querySelector('.seek-tooltip');
+
+    this.playPauseBtn = this.controls?.querySelector('.play-pause-btn');
+    this.muteBtn = this.controls?.querySelector('.mute-btn');
+    this.fullscreenBtn = this.controls?.querySelector('.fullscreen-btn');
+    this.speedBtn = this.controls?.querySelector('.speed-btn');
+    this.qualityBtn = this.controls?.querySelector('.quality-btn');
+    this.pipBtn = this.controls?.querySelector('.pip-btn');
+    this.subtitlesBtn = this.controls?.querySelector('.subtitles-btn');
+    this.playlistPrevBtn = this.controls?.querySelector('.playlist-prev-btn');
+    this.playlistNextBtn = this.controls?.querySelector('.playlist-next-btn');
+
+    this.playIcon = this.controls?.querySelector('.play-icon');
+    this.pauseIcon = this.controls?.querySelector('.pause-icon');
+    this.volumeIcon = this.controls?.querySelector('.volume-icon');
+    this.muteIcon = this.controls?.querySelector('.mute-icon');
+    this.fullscreenIcon = this.controls?.querySelector('.fullscreen-icon');
+    this.exitFullscreenIcon = this.controls?.querySelector('.exit-fullscreen-icon');
+    this.pipIcon = this.controls?.querySelector('.pip-icon');
+    this.pipExitIcon = this.controls?.querySelector('.pip-exit-icon');
+
+    this.volumeSlider = this.controls?.querySelector('.volume-slider');
+    this.currentTimeEl = this.controls?.querySelector('.current-time');
+    this.durationEl = this.controls?.querySelector('.duration');
+    this.speedMenu = this.controls?.querySelector('.speed-menu');
+    this.qualityMenu = this.controls?.querySelector('.quality-menu');
+    this.subtitlesMenu = this.controls?.querySelector('.subtitles-menu');
+}
 
-        return this;
-    }
+// Generic method to close all active menus (works with plugins too)
+closeAllMenus() {
+    // Find all elements with class ending in '-menu' that have 'active' class
+    const allMenus = this.controls?.querySelectorAll('[class*="-menu"].active');
+    allMenus?.forEach(menu => {
+        menu.classList.remove('active');
+    });
 
-    enableTitleOverlay() {
-        if (!this.titleOverlay && !this.options.showTitleOverlay) {
-            this.options.showTitleOverlay = true;
-            this.createTitleOverlay();
-        }
-        return this;
-    }
+    // Remove active state from all control buttons
+    const allButtons = this.controls?.querySelectorAll('.control-btn.active');
+    allButtons?.forEach(btn => {
+        btn.classList.remove('active');
+    });
+}
 
-    disableTitleOverlay() {
-        if (this.titleOverlay) {
-            this.titleOverlay.remove();
-            this.titleOverlay = null;
-        }
-        this.options.showTitleOverlay = false;
-        return this;
-    }
+// Generic menu toggle setup (works with core menus and plugin menus)
+setupMenuToggles() {
+    // Delegate click events to control bar for any button with associated menu
+    if (this.controls) {
+        this.controls.addEventListener('click', (e) => {
+            // Find if clicked element is a control button or inside one
+            const button = e.target.closest('.control-btn');
+
+            if (!button) return;
+
+            // Get button classes to find associated menu
+            const buttonClasses = button.className.split(' ');
+            let menuClass = null;
+
+            // Find if this button has an associated menu (e.g., speed-btn -> speed-menu)
+            for (const cls of buttonClasses) {
+                if (cls.endsWith('-btn')) {
+                    const menuName = cls.replace('-btn', '-menu');
+                    const menu = this.controls.querySelector('.' + menuName);
+                    if (menu) {
+                        menuClass = menuName;
+                        break;
+                    }
+                }
+            }
 
-    getUniqueId() {
-        return Math.random().toString(36).substr(2, 9);
-    }
+            if (!menuClass) return;
 
-    initializeElements() {
-        this.progressContainer = this.controls?.querySelector('.progress-container');
-        this.progressFilled = this.controls?.querySelector('.progress-filled');
-        this.progressBuffer = this.controls?.querySelector('.progress-buffer');
-        this.progressHandle = this.controls?.querySelector('.progress-handle');
-        this.seekTooltip = this.controls?.querySelector('.seek-tooltip');
+            e.stopPropagation();
 
-        this.playPauseBtn = this.controls?.querySelector('.play-pause-btn');
-        this.muteBtn = this.controls?.querySelector('.mute-btn');
-        this.fullscreenBtn = this.controls?.querySelector('.fullscreen-btn');
-        this.speedBtn = this.controls?.querySelector('.speed-btn');
-        this.qualityBtn = this.controls?.querySelector('.quality-btn');
-        this.pipBtn = this.controls?.querySelector('.pip-btn');
-        this.subtitlesBtn = this.controls?.querySelector('.subtitles-btn');
-        this.playlistPrevBtn = this.controls?.querySelector('.playlist-prev-btn');
-        this.playlistNextBtn = this.controls?.querySelector('.playlist-next-btn');
+            // Get the menu element
+            const menu = this.controls.querySelector('.' + menuClass);
+            const isOpen = menu.classList.contains('active');
 
-        this.playIcon = this.controls?.querySelector('.play-icon');
-        this.pauseIcon = this.controls?.querySelector('.pause-icon');
-        this.volumeIcon = this.controls?.querySelector('.volume-icon');
-        this.muteIcon = this.controls?.querySelector('.mute-icon');
-        this.fullscreenIcon = this.controls?.querySelector('.fullscreen-icon');
-        this.exitFullscreenIcon = this.controls?.querySelector('.exit-fullscreen-icon');
-        this.pipIcon = this.controls?.querySelector('.pip-icon');
-        this.pipExitIcon = this.controls?.querySelector('.pip-exit-icon');
+            // Close all menus first
+            this.closeAllMenus();
 
-        this.volumeSlider = this.controls?.querySelector('.volume-slider');
-        this.currentTimeEl = this.controls?.querySelector('.current-time');
-        this.durationEl = this.controls?.querySelector('.duration');
-        this.speedMenu = this.controls?.querySelector('.speed-menu');
-        this.qualityMenu = this.controls?.querySelector('.quality-menu');
-        this.subtitlesMenu = this.controls?.querySelector('.subtitles-menu');
+            // If menu was closed, open it
+            if (!isOpen) {
+                menu.classList.add('active');
+                button.classList.add('active');
+            }
+        });
     }
 
-    updateVolumeSliderVisual() {
-        if (!this.video || !this.container) return;
+    // Close menus when clicking outside controls
+    document.addEventListener('click', (e) => {
+        if (!this.controls?.contains(e.target)) {
+            this.closeAllMenus();
+        }
+    });
+}
 
-        const volume = this.video.muted ? 0 : this.video.volume;
-        const percentage = Math.round(volume * 100);
+updateVolumeSliderVisual() {
+    if (!this.video || !this.container) return;
 
-        this.container.style.setProperty('--player-volume-fill', percentage + '%');
+    const volume = this.video.muted ? 0 : this.video.volume;
+    const percentage = Math.round(volume * 100);
 
-        if (this.volumeSlider) {
-            this.volumeSlider.value = percentage;
-        }
+    this.container.style.setProperty('--player-volume-fill', percentage + '%');
+
+    if (this.volumeSlider) {
+        this.volumeSlider.value = percentage;
     }
+}
 
-    createVolumeTooltip() {
-        const volumeContainer = this.controls?.querySelector('.volume-container');
-        if (!volumeContainer || volumeContainer.querySelector('.volume-tooltip')) {
-            return; // Tooltip already present
-        }
+createVolumeTooltip() {
+    const volumeContainer = this.controls?.querySelector('.volume-container');
+    if (!volumeContainer || volumeContainer.querySelector('.volume-tooltip')) {
+        return; // Tooltip already present
+    }
 
-        const tooltip = document.createElement('div');
-        tooltip.className = 'volume-tooltip';
-        tooltip.textContent = '50%';
-        volumeContainer.appendChild(tooltip);
+    const tooltip = document.createElement('div');
+    tooltip.className = 'volume-tooltip';
+    tooltip.textContent = '50%';
+    volumeContainer.appendChild(tooltip);
 
-        this.volumeTooltip = tooltip;
+    this.volumeTooltip = tooltip;
 
-        if (this.options.debug) {
-            console.log('Dynamic volume tooltip created');
-        }
+    if (this.options.debug) {
+        console.log('Dynamic volume tooltip created');
     }
+}
 
-    updateVolumeTooltip() {
-        if (!this.volumeTooltip || !this.video) return;
+updateVolumeTooltip() {
+    if (!this.volumeTooltip || !this.video) return;
 
-        const volume = Math.round(this.video.volume * 100);
-        this.volumeTooltip.textContent = volume + '%';
+    const volume = Math.round(this.video.volume * 100);
+    this.volumeTooltip.textContent = volume + '%';
 
-        // Aggiorna la posizione del tooltip
-        this.updateVolumeTooltipPosition(this.video.volume);
+    // Aggiorna la posizione del tooltip
+    this.updateVolumeTooltipPosition(this.video.volume);
 
-        if (this.options.debug) {
-            console.log('Volume tooltip updated:', volume + '%');
-        }
+    if (this.options.debug) {
+        console.log('Volume tooltip updated:', volume + '%');
     }
+}
 
-    updateVolumeTooltipPosition(volumeValue = null) {
-        if (!this.volumeTooltip || !this.video) return;
+updateVolumeTooltipPosition(volumeValue = null) {
+    if (!this.volumeTooltip || !this.video) return;
 
-        const volumeSlider = this.controls?.querySelector('.volume-slider');
-        if (!volumeSlider) return;
+    const volumeSlider = this.controls?.querySelector('.volume-slider');
+    if (!volumeSlider) return;
 
-        // If no volume provided, use current volume
-        if (volumeValue === null) {
-            volumeValue = this.video.volume;
-        }
+    // If no volume provided, use current volume
+    if (volumeValue === null) {
+        volumeValue = this.video.volume;
+    }
 
-        // Calcola la posizione esatta del thumb
-        const sliderRect = volumeSlider.getBoundingClientRect();
-        const sliderWidth = sliderRect.width;
+    // Calcola la posizione esatta del thumb
+    const sliderRect = volumeSlider.getBoundingClientRect();
+    const sliderWidth = sliderRect.width;
 
-        // Thumb size is typically 14px (as defined in CSS)
-        const thumbSize = 14; // var(--player-volume-handle-size)
+    // Thumb size is typically 14px (as defined in CSS)
+    const thumbSize = 14; // var(--player-volume-handle-size)
 
-        // Calcola la posizione del centro del thumb
-        // Il thumb si muove da thumbSize/2 a (sliderWidth - thumbSize/2)
-        const availableWidth = sliderWidth - thumbSize;
-        const thumbCenterPosition = (thumbSize / 2) + (availableWidth * volumeValue);
+    // Calcola la posizione del centro del thumb
+    // Il thumb si muove da thumbSize/2 a (sliderWidth - thumbSize/2)
+    const availableWidth = sliderWidth - thumbSize;
+    const thumbCenterPosition = (thumbSize / 2) + (availableWidth * volumeValue);
 
-        // Converti in percentuale relativa al container dello slider
-        const percentage = (thumbCenterPosition / sliderWidth) * 100;
+    // Converti in percentuale relativa al container dello slider
+    const percentage = (thumbCenterPosition / sliderWidth) * 100;
 
-        // Posiziona il tooltip
-        this.volumeTooltip.style.left = percentage + '%';
+    // Posiziona il tooltip
+    this.volumeTooltip.style.left = percentage + '%';
 
-        if (this.options.debug) {
-            console.log('Volume tooltip position updated:', {
-                volumeValue: volumeValue,
-                percentage: percentage + '%',
-                thumbCenter: thumbCenterPosition,
-                sliderWidth: sliderWidth
-            });
-        }
+    if (this.options.debug) {
+        console.log('Volume tooltip position updated:', {
+            volumeValue: volumeValue,
+            percentage: percentage + '%',
+            thumbCenter: thumbCenterPosition,
+            sliderWidth: sliderWidth
+        });
     }
+}
 
-    initVolumeTooltip() {
-        this.createVolumeTooltip();
-        this.setupVolumeTooltipEvents();
+initVolumeTooltip() {
+    this.createVolumeTooltip();
 
-        // Set initial position immediately
-        setTimeout(() => {
-            if (this.volumeTooltip && this.video) {
-                this.updateVolumeTooltipPosition(this.video.volume);
-                this.updateVolumeTooltip();
-            }
-        }, 50); // Shorter delay for faster initialization
-    }
+    // Set initial position immediately
+    setTimeout(() => {
+        if (this.volumeTooltip && this.video) {
+            this.updateVolumeTooltipPosition(this.video.volume);
+            this.updateVolumeTooltip();
+        }
+    }, 50); // Shorter delay for faster initialization
+}
 
-    updateVolumeSliderVisualWithTooltip() {
-        const volumeSlider = this.controls?.querySelector('.volume-slider');
-        if (!volumeSlider || !this.video) return;
+updateVolumeSliderVisualWithTooltip() {
+    const volumeSlider = this.controls?.querySelector('.volume-slider');
+    if (!volumeSlider || !this.video) return;
 
-        const volume = this.video.volume || 0;
-        const percentage = Math.round(volume * 100);
+    const volume = this.video.volume || 0;
+    const percentage = Math.round(volume * 100);
 
-        volumeSlider.value = volume;
+    volumeSlider.value = volume;
 
-        // Update CSS custom property per il riempimento visuale
-        const volumeFillPercentage = percentage + '%';
-        volumeSlider.style.setProperty('--player-volume-fill', volumeFillPercentage);
+    // Update CSS custom property per il riempimento visuale
+    const volumeFillPercentage = percentage + '%';
+    volumeSlider.style.setProperty('--player-volume-fill', volumeFillPercentage);
 
-        // Aggiorna anche il tooltip se presente (testo e posizione)
-        this.updateVolumeTooltip();
+    // Aggiorna anche il tooltip se presente (testo e posizione)
+    this.updateVolumeTooltip();
 
-        if (this.options.debug) {
-            console.log('Volume slider aggiornato:', {
-                volume: volume,
-                percentage: percentage,
-                fillPercentage: volumeFillPercentage
-            });
-        }
+    if (this.options.debug) {
+        console.log('Volume slider aggiornato:', {
+            volume: volume,
+            percentage: percentage,
+            fillPercentage: volumeFillPercentage
+        });
     }
+}
 
-// Volume slider type: 'horizontal' or 'vertical'
-setVolumeSliderOrientation(orientation) {
-    if (!['horizontal', 'vertical'].includes(orientation)) {
-        if (this.options.debug) console.warn('Invalid volume slider orientation:', orientation);
+/**
+ * Set mobile volume slider visibility
+ * @param {String} mode - 'show' (horizontal popup) or 'hide' (no slider on mobile)
+ * @returns {Object} this
+ */
+setMobileVolumeSlider(mode) {
+    if (!['show', 'hide'].includes(mode)) {
+        if (this.options.debug) console.warn('Invalid mobile volume slider mode:', mode);
         return this;
     }
 
-    this.options.volumeSlider = orientation;
+    this.options.mobileVolumeSlider = mode;
     const volumeContainer = this.controls?.querySelector('.volume-container');
     if (volumeContainer) {
-        volumeContainer.setAttribute('data-orientation', orientation);
+        // Set data attribute for CSS to use
+        volumeContainer.setAttribute('data-mobile-slider', mode);
+        if (this.options.debug) console.log('Mobile volume slider set to:', mode);
     }
-
-    if (this.options.debug) console.log('Volume slider orientation set to:', orientation);
     return this;
 }
 
-getVolumeSliderOrientation() {
-    return this.options.volumeSlider;
+/**
+ * Get mobile volume slider mode
+ * @returns {String} Current mobile volume slider mode
+ */
+getMobileVolumeSlider() {
+    return this.options.mobileVolumeSlider;
 }
 
+initVolumeTooltip() {
 
-    initVolumeTooltip() {
+    this.createVolumeTooltip();
 
-        this.createVolumeTooltip();
+    setTimeout(() => {
+        this.updateVolumeTooltip();
+    }, 200);
 
-        // Setup events
-        this.setupVolumeTooltipEvents();
+    if (this.options.debug) {
+        console.log('Dynamic volume tooltip inizializzation');
+    }
+}
 
-        setTimeout(() => {
-            this.updateVolumeTooltip();
-        }, 200);
+setupSeekTooltip() {
+    if (!this.options.showSeekTooltip || !this.progressContainer || !this.seekTooltip) return;
 
-        if (this.options.debug) {
-            console.log('Dynamic volume tooltip inizializzato');
+    this.progressContainer.addEventListener('mouseenter', () => {
+        if (this.seekTooltip) {
+            this.seekTooltip.classList.add('visible');
         }
-    }
+    });
 
-    setupSeekTooltip() {
-        if (!this.options.showSeekTooltip || !this.progressContainer || !this.seekTooltip) return;
+    this.progressContainer.addEventListener('mouseleave', () => {
+        if (this.seekTooltip) {
+            this.seekTooltip.classList.remove('visible');
+        }
+    });
 
-        this.progressContainer.addEventListener('mouseenter', () => {
-            if (this.seekTooltip) {
-                this.seekTooltip.classList.add('visible');
-            }
-        });
+    this.progressContainer.addEventListener('mousemove', (e) => {
+        this.updateSeekTooltip(e);
+    });
+}
 
-        this.progressContainer.addEventListener('mouseleave', () => {
-            if (this.seekTooltip) {
-                this.seekTooltip.classList.remove('visible');
-            }
-        });
+updateSeekTooltip(e) {
+    if (!this.seekTooltip || !this.progressContainer || !this.video || !this.video.duration) return;
 
-        this.progressContainer.addEventListener('mousemove', (e) => {
-            this.updateSeekTooltip(e);
-        });
-    }
+    const rect = this.progressContainer.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const percentage = Math.max(0, Math.min(1, clickX / rect.width));
+    const targetTime = percentage * this.video.duration;
 
-    updateSeekTooltip(e) {
-        if (!this.seekTooltip || !this.progressContainer || !this.video || !this.video.duration) return;
+    this.seekTooltip.textContent = this.formatTime(targetTime);
 
-        const rect = this.progressContainer.getBoundingClientRect();
-        const clickX = e.clientX - rect.left;
-        const percentage = Math.max(0, Math.min(1, clickX / rect.width));
-        const targetTime = percentage * this.video.duration;
+    const tooltipRect = this.seekTooltip.getBoundingClientRect();
+    let leftPosition = clickX;
 
-        this.seekTooltip.textContent = this.formatTime(targetTime);
+    const tooltipWidth = tooltipRect.width || 50;
+    const containerWidth = rect.width;
 
-        const tooltipRect = this.seekTooltip.getBoundingClientRect();
-        let leftPosition = clickX;
+    leftPosition = Math.max(tooltipWidth / 2, Math.min(containerWidth - tooltipWidth / 2, clickX));
 
-        const tooltipWidth = tooltipRect.width || 50;
-        const containerWidth = rect.width;
+    this.seekTooltip.style.left = leftPosition + 'px';
+}
 
-        leftPosition = Math.max(tooltipWidth / 2, Math.min(containerWidth - tooltipWidth / 2, clickX));
+play() {
+    if (!this.video || this.isChangingQuality) return;
 
-        this.seekTooltip.style.left = leftPosition + 'px';
-    }
+    this.video.play().catch(err => {
+        if (this.options.debug) console.log('Play failed:', err);
+    });
 
-    play() {
-        if (!this.video || this.isChangingQuality) return;
+    if (this.playIcon) this.playIcon.classList.add('hidden');
+    if (this.pauseIcon) this.pauseIcon.classList.remove('hidden');
 
-        this.video.play().catch(err => {
-            if (this.options.debug) console.log('Play failed:', err);
-        });
+    // Trigger event played
+    this.triggerEvent('played', {
+        currentTime: this.getCurrentTime(),
+        duration: this.getDuration()
+    });
+}
 
-        if (this.playIcon) this.playIcon.classList.add('hidden');
-        if (this.pauseIcon) this.pauseIcon.classList.remove('hidden');
+pause() {
+    if (!this.video) return;
 
-        // Trigger event played
-        this.triggerEvent('played', {
-            currentTime: this.getCurrentTime(),
-            duration: this.getDuration()
-        });
-    }
+    this.video.pause();
+    if (this.playIcon) this.playIcon.classList.remove('hidden');
+    if (this.pauseIcon) this.pauseIcon.classList.add('hidden');
 
-    pause() {
-        if (!this.video) return;
+    // Trigger paused event
+    this.triggerEvent('paused', {
+        currentTime: this.getCurrentTime(),
+        duration: this.getDuration()
+    });
+}
 
-        this.video.pause();
-        if (this.playIcon) this.playIcon.classList.remove('hidden');
-        if (this.pauseIcon) this.pauseIcon.classList.add('hidden');
+updateVolume(value) {
+    if (!this.video) return;
 
-        // Trigger paused event
-        this.triggerEvent('paused', {
-            currentTime: this.getCurrentTime(),
-            duration: this.getDuration()
-        });
-    }
+    const previousVolume = this.video.volume;
+    const previousMuted = this.video.muted;
 
-    updateVolume(value) {
-        if (!this.video) return;
+    this.video.volume = Math.max(0, Math.min(1, value / 100));
 
-        const previousVolume = this.video.volume;
-        const previousMuted = this.video.muted;
+    if (this.video.volume > 0 && this.video.muted) {
+        this.video.muted = false;
+    }
 
-        this.video.volume = Math.max(0, Math.min(1, value / 100));
-        if (this.volumeSlider) this.volumeSlider.value = value;
-        this.updateMuteButton();
-        this.updateVolumeSliderVisual();
-        this.initVolumeTooltip();
+    if (this.volumeSlider) this.volumeSlider.value = value;
+    this.updateMuteButton();
+    this.updateVolumeSliderVisual();
+    this.initVolumeTooltip();
 
-        // Triggers volumechange event if there is a significant change
-        if (Math.abs(previousVolume - this.video.volume) > 0.01 || previousMuted !== this.video.muted) {
-            this.triggerEvent('volumechange', {
-                volume: this.getVolume(),
-                muted: this.isMuted(),
-                previousVolume: previousVolume,
-                previousMuted: previousMuted
-            });
-        }
+    // Triggers volumechange event if there is a significant change
+    if (Math.abs(previousVolume - this.video.volume) > 0.01 || previousMuted !== this.video.muted) {
+        this.triggerEvent('volumechange', {
+            volume: this.getVolume(),
+            muted: this.isMuted(),
+            previousVolume: previousVolume,
+            previousMuted: previousMuted
+        });
     }
+}
 
-    changeVolume(delta) {
-        if (!this.video) return;
+changeVolume(delta) {
+    if (!this.video) return;
 
-        const newVolume = Math.max(0, Math.min(1, this.video.volume + delta));
-        this.updateVolume(newVolume * 100);
-        this.updateVolumeSliderVisual();
-        this.initVolumeTooltip();
-    }
+    const newVolume = Math.max(0, Math.min(1, this.video.volume + delta));
+    this.updateVolume(newVolume * 100);
+    this.updateVolumeSliderVisual();
+    this.initVolumeTooltip();
+}
 
-    updateProgress() {
-        if (!this.video || !this.progressFilled || !this.progressHandle || this.isUserSeeking) return;
+updateProgress() {
+    if (!this.video || !this.progressFilled || !this.progressHandle || this.isUserSeeking) return;
 
-        if (this.video.duration && !isNaN(this.video.duration)) {
-            const progress = (this.video.currentTime / this.video.duration) * 100;
-            this.progressFilled.style.width = progress + '%';
-            this.progressHandle.style.left = progress + '%';
-        }
+    if (this.video.duration && !isNaN(this.video.duration)) {
+        const progress = (this.video.currentTime / this.video.duration) * 100;
+        this.progressFilled.style.width = progress + '%';
+        this.progressHandle.style.left = progress + '%';
+    }
 
-        this.updateTimeDisplay();
+    this.updateTimeDisplay();
 
-        // Trigger timeupdate event (with throttling to avoid too many events)
-        if (!this.lastTimeUpdate || Date.now() - this.lastTimeUpdate > 250) {
-            this.triggerEvent('timeupdate', {
-                currentTime: this.getCurrentTime(),
-                duration: this.getDuration(),
-                progress: (this.getCurrentTime() / this.getDuration()) * 100 || 0
-            });
-            this.lastTimeUpdate = Date.now();
-        }
+    // Trigger timeupdate event (with throttling to avoid too many events)
+    if (!this.lastTimeUpdate || Date.now() - this.lastTimeUpdate > 250) {
+        this.triggerEvent('timeupdate', {
+            currentTime: this.getCurrentTime(),
+            duration: this.getDuration(),
+            progress: (this.getCurrentTime() / this.getDuration()) * 100 || 0
+        });
+        this.lastTimeUpdate = Date.now();
     }
+}
 
-    updateBuffer() {
-        if (!this.video || !this.progressBuffer) return;
+updateBuffer() {
+    if (!this.video || !this.progressBuffer) return;
 
-        try {
-            if (this.video.buffered && this.video.buffered.length > 0 && this.video.duration) {
-                const buffered = (this.video.buffered.end(0) / this.video.duration) * 100;
-                this.progressBuffer.style.width = buffered + '%';
-            }
-        } catch (error) {
-            if (this.options.debug) console.log('Buffer update error (non-critical):', error);
+    try {
+        if (this.video.buffered && this.video.buffered.length > 0 && this.video.duration) {
+            const buffered = (this.video.buffered.end(0) / this.video.duration) * 100;
+            this.progressBuffer.style.width = buffered + '%';
         }
+    } catch (error) {
+        if (this.options.debug) console.log('Buffer update error (non-critical):', error);
     }
+}
 
-    startSeeking(e) {
-        if (this.isChangingQuality) return;
+startSeeking(e) {
+    if (this.isChangingQuality) return;
 
-        this.isUserSeeking = true;
-        this.seek(e);
-        e.preventDefault();
+    this.isUserSeeking = true;
+    this.seek(e);
+    e.preventDefault();
 
-        // Show controls during seeking
-        if (this.options.autoHide && this.autoHideInitialized) {
-            this.showControlsNow();
-            this.resetAutoHideTimer();
-        }
+    // Show controls during seeking
+    if (this.options.autoHide && this.autoHideInitialized) {
+        this.showControlsNow();
+        this.resetAutoHideTimer();
     }
+}
 
-    continueSeeking(e) {
-        if (this.isUserSeeking && !this.isChangingQuality) {
-            this.seek(e);
-        }
+continueSeeking(e) {
+    if (this.isUserSeeking && !this.isChangingQuality) {
+        this.seek(e);
     }
+}
 
-    endSeeking() {
-        this.isUserSeeking = false;
-    }
+endSeeking() {
+    this.isUserSeeking = false;
+}
 
-    seek(e) {
-        if (!this.video || !this.progressContainer || !this.progressFilled || !this.progressHandle || this.isChangingQuality) return;
+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 percentage = Math.max(0, Math.min(1, clickX / rect.width));
+    const rect = this.progressContainer.getBoundingClientRect();
+    const clickX = e.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 + '%';
-        }
+    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 + '%';
     }
+}
 
-    updateDuration() {
-        if (this.durationEl && this.video && this.video.duration && !isNaN(this.video.duration)) {
-            this.durationEl.textContent = this.formatTime(this.video.duration);
-        }
+updateDuration() {
+    if (this.durationEl && this.video && this.video.duration && !isNaN(this.video.duration)) {
+        this.durationEl.textContent = this.formatTime(this.video.duration);
     }
+}
 
-    changeSpeed(e) {
-        if (!this.video || !e.target.classList.contains('speed-option') || this.isChangingQuality) return;
-
-        const speed = parseFloat(e.target.getAttribute('data-speed'));
-        if (speed && speed > 0) {
-            this.video.playbackRate = speed;
-            if (this.speedBtn) this.speedBtn.textContent = speed + 'x';
+changeSpeed(e) {
+    if (!this.video || !e.target.classList.contains('speed-option') || this.isChangingQuality) return;
 
-            if (this.speedMenu) {
-                this.speedMenu.querySelectorAll('.speed-option').forEach(option => {
-                    option.classList.remove('active');
-                });
-                e.target.classList.add('active');
-            }
+    const speed = parseFloat(e.target.getAttribute('data-speed'));
+    if (speed && speed > 0) {
+        this.video.playbackRate = speed;
+        if (this.speedBtn) this.speedBtn.textContent = speed + 'x';
 
-            // Trigger speedchange event
-            const previousSpeed = this.video.playbackRate;
-            this.triggerEvent('speedchange', {
-                speed: speed,
-                previousSpeed: previousSpeed
+        if (this.speedMenu) {
+            this.speedMenu.querySelectorAll('.speed-option').forEach(option => {
+                option.classList.remove('active');
             });
+            e.target.classList.add('active');
         }
+
+        // Trigger speedchange event
+        const previousSpeed = this.video.playbackRate;
+        this.triggerEvent('speedchange', {
+            speed: speed,
+            previousSpeed: previousSpeed
+        });
     }
+}
 
 onVideoEnded() {
     if (this.playIcon) this.playIcon.classList.remove('hidden');
@@ -1123,217 +1202,270 @@ onVideoEnded() {
     });
 }
 
-    getCurrentTime() { return this.video ? this.video.currentTime || 0 : 0; }
+/**
+ * Handle video loading errors (404, 503, network errors, etc.)
+ * Triggers 'ended' event to allow proper cleanup and playlist continuation
+ */
+onVideoError(error) {
+    if (this.options.debug) {
+        console.error('Video loading error detected:', {
+            error: error,
+            code: this.video?.error?.code,
+            message: this.video?.error?.message,
+            src: this.video?.currentSrc || this.video?.src
+        });
+    }
+
+    // Hide loading overlay
+    this.hideLoading();
+    if (this.initialLoading) {
+        this.initialLoading.style.display = 'none';
+    }
 
-    setCurrentTime(time) { if (this.video && typeof time === 'number' && time >= 0 && !this.isChangingQuality) { this.video.currentTime = time; } }
+    // Remove quality-changing class if present
+    if (this.video?.classList) {
+        this.video.classList.remove('quality-changing');
+    }
 
-    getDuration() { return this.video && this.video.duration ? this.video.duration : 0; }
+    // Reset changing quality flag
+    this.isChangingQuality = false;
 
-    getVolume() { return this.video ? this.video.volume || 0 : 0; }
+    // Show controls to allow user interaction
+    this.showControlsNow();
 
-    setVolume(volume) {
-        if (typeof volume === 'number' && volume >= 0 && volume <= 1) {
-            this.updateVolume(volume * 100);
-        }
+    // Optional: Show poster if available
+    if (this.options.showPosterOnEnd && this.posterOverlay) {
+        this.showPoster();
     }
 
-    isPaused() { return this.video ? this.video.paused : true; }
-
-    isMuted() { return this.video ? this.video.muted : false; }
+    // Trigger 'ended' event to allow proper cleanup
+    // This allows playlist to continue or other error handling
+    this.triggerEvent('ended', {
+        currentTime: this.getCurrentTime(),
+        duration: this.getDuration(),
+        error: true,
+        errorCode: this.video?.error?.code,
+        errorMessage: this.video?.error?.message,
+        playlistInfo: this.getPlaylistInfo()
+    });
 
-    setMuted(muted) {
-        if (this.video && typeof muted === 'boolean') {
-            this.video.muted = muted;
-            this.updateMuteButton();
-            this.updateVolumeSliderVisual();
-            this.initVolumeTooltip();
-        }
+    if (this.options.debug) {
+        console.log('Video error handled - triggered ended event');
     }
+}
 
-    getPlaybackRate() { return this.video ? this.video.playbackRate || 1 : 1; }
 
-    setPlaybackRate(rate) { if (this.video && typeof rate === 'number' && rate > 0 && !this.isChangingQuality) { this.video.playbackRate = rate; if (this.speedBtn) this.speedBtn.textContent = rate + 'x'; } }
+getCurrentTime() { return this.video ? this.video.currentTime || 0 : 0; }
 
-    isPictureInPictureActive() { return document.pictureInPictureElement === this.video; }
+setCurrentTime(time) { if (this.video && typeof time === 'number' && time >= 0 && !this.isChangingQuality) { this.video.currentTime = time; } }
 
-    getCurrentLanguage() {
-        return this.isI18nAvailable() ?
-            VideoPlayerTranslations.getCurrentLanguage() : 'en';
-    }
+getDuration() { return this.video && this.video.duration ? this.video.duration : 0; }
 
-    getSupportedLanguages() {
-        return this.isI18nAvailable() ?
-            VideoPlayerTranslations.getSupportedLanguages() : ['en'];
+getVolume() { return this.video ? this.video.volume || 0 : 0; }
+
+setVolume(volume) {
+    if (typeof volume === 'number' && volume >= 0 && volume <= 1) {
+        this.updateVolume(volume * 100);
     }
+}
 
-    createBrandLogo() {
-        if (!this.options.brandLogoEnabled || !this.options.brandLogoUrl) return;
+isPaused() { return this.video ? this.video.paused : true; }
 
-        const controlsRight = this.controls?.querySelector('.controls-right');
-        if (!controlsRight) return;
+isMuted() { return this.video ? this.video.muted : false; }
+
+setMuted(muted) {
+    if (this.video && typeof muted === 'boolean') {
+        this.video.muted = muted;
+        this.updateMuteButton();
+        this.updateVolumeSliderVisual();
+        this.initVolumeTooltip();
+    }
+}
 
-        // Create brand logo image
-        const logo = document.createElement('img');
-        logo.className = 'brand-logo';
-        logo.src = this.options.brandLogoUrl;
-        logo.alt = this.t('brand_logo');
+getPlaybackRate() { return this.video ? this.video.playbackRate || 1 : 1; }
 
-        // Handle loading error
-        logo.onerror = () => {
-            if (this.options.debug) console.warn('Brand logo failed to load:', this.options.brandLogoUrl);
-            logo.style.display = 'none';
-        };
+setPlaybackRate(rate) { if (this.video && typeof rate === 'number' && rate > 0 && !this.isChangingQuality) { this.video.playbackRate = rate; if (this.speedBtn) this.speedBtn.textContent = rate + 'x'; } }
 
-        logo.onload = () => {
-            if (this.options.debug) console.log('Brand logo loaded successfully');
-        };
+isPictureInPictureActive() { return document.pictureInPictureElement === this.video; }
 
-        // Add click functionality if link URL is provided
-        if (this.options.brandLogoLinkUrl) {
-            logo.style.cursor = 'pointer';
-            logo.addEventListener('click', (e) => {
-                e.stopPropagation(); // Prevent video controls interference
-                window.open(this.options.brandLogoLinkUrl, '_blank', 'noopener,noreferrer');
-                if (this.options.debug) console.log('Brand logo clicked, opening:', this.options.brandLogoLinkUrl);
-            });
-        } else {
-            logo.style.cursor = 'default';
-        }
+getCurrentLanguage() {
+    return this.isI18nAvailable() ?
+        VideoPlayerTranslations.getCurrentLanguage() : 'en';
+}
 
-        // Position the brand logo at the right of the controlbar (at the left of the buttons)
-        controlsRight.insertBefore(logo, controlsRight.firstChild);
+getSupportedLanguages() {
+    return this.isI18nAvailable() ?
+        VideoPlayerTranslations.getSupportedLanguages() : ['en'];
+}
 
-        if (this.options.debug) {
-            if (this.options.brandLogoLinkUrl) {
-                console.log('Brand logo with click handler created for:', this.options.brandLogoLinkUrl);
-            } else {
-                console.log('Brand logo created (no link)');
-            }
-        }
+createBrandLogo() {
+    if (!this.options.brandLogoEnabled || !this.options.brandLogoUrl) return;
+
+    const controlsRight = this.controls?.querySelector('.controls-right');
+    if (!controlsRight) return;
+
+    // Create brand logo image
+    const logo = document.createElement('img');
+    logo.className = 'brand-logo';
+    logo.src = this.options.brandLogoUrl;
+    logo.alt = this.t('brand_logo');
+
+    // Handle loading error
+    logo.onerror = () => {
+        if (this.options.debug) console.warn('Brand logo failed to load:', this.options.brandLogoUrl);
+        logo.style.display = 'none';
+    };
+
+    logo.onload = () => {
+        if (this.options.debug) console.log('Brand logo loaded successfully');
+    };
+
+    // Add click functionality if link URL is provided
+    if (this.options.brandLogoLinkUrl) {
+        logo.style.cursor = 'pointer';
+        logo.addEventListener('click', (e) => {
+            e.stopPropagation(); // Prevent video controls interference
+            window.open(this.options.brandLogoLinkUrl, '_blank', 'noopener,noreferrer');
+            if (this.options.debug) console.log('Brand logo clicked, opening:', this.options.brandLogoLinkUrl);
+        });
+    } else {
+        logo.style.cursor = 'default';
     }
 
-    setBrandLogo(enabled, url = '', linkUrl = '') {
-        this.options.brandLogoEnabled = enabled;
-        if (url) {
-            this.options.brandLogoUrl = url;
-        }
-        if (linkUrl !== '') {
-            this.options.brandLogoLinkUrl = linkUrl;
-        }
+    // Position the brand logo at the right of the controlbar (at the left of the buttons)
+    controlsRight.insertBefore(logo, controlsRight.firstChild);
 
-        // Remove existing brand logo
-        const existingLogo = this.controls?.querySelector('.brand-logo');
-        if (existingLogo) {
-            existingLogo.remove();
+    if (this.options.debug) {
+        if (this.options.brandLogoLinkUrl) {
+            console.log('Brand logo with click handler created for:', this.options.brandLogoLinkUrl);
+        } else {
+            console.log('Brand logo created (no link)');
         }
+    }
+}
 
-        // Recreate the logo if enabled
-        if (enabled && this.options.brandLogoUrl) {
-            this.createBrandLogo();
-        }
+setBrandLogo(enabled, url = '', linkUrl = '') {
+    this.options.brandLogoEnabled = enabled;
+    if (url) {
+        this.options.brandLogoUrl = url;
+    }
+    if (linkUrl !== '') {
+        this.options.brandLogoLinkUrl = linkUrl;
+    }
 
-        return this;
+    // Remove existing brand logo
+    const existingLogo = this.controls?.querySelector('.brand-logo');
+    if (existingLogo) {
+        existingLogo.remove();
     }
 
-    getBrandLogoSettings() {
-        return {
-            enabled: this.options.brandLogoEnabled,
-            url: this.options.brandLogoUrl,
-            linkUrl: this.options.brandLogoLinkUrl
-        };
+    // Recreate the logo if enabled
+    if (enabled && this.options.brandLogoUrl) {
+        this.createBrandLogo();
     }
 
-    switchToVideo(newVideoElement, shouldPlay = false) {
-        if (!newVideoElement) {
-            if (this.options.debug) console.error('🎵 New video element not found');
-            return false;
-        }
+    return this;
+}
 
-        // Pause current video
-        this.video.pause();
+getBrandLogoSettings() {
+    return {
+        enabled: this.options.brandLogoEnabled,
+        url: this.options.brandLogoUrl,
+        linkUrl: this.options.brandLogoLinkUrl
+    };
+}
 
-        // Get new video sources and qualities
-        const newSources = Array.from(newVideoElement.querySelectorAll('source')).map(source => ({
-            src: source.src,
-            quality: source.getAttribute('data-quality') || 'auto',
-            type: source.type || 'video/mp4'
-        }));
+switchToVideo(newVideoElement, shouldPlay = false) {
+    if (!newVideoElement) {
+        if (this.options.debug) console.error('🎵 New video element not found');
+        return false;
+    }
 
-        if (newSources.length === 0) {
-            if (this.options.debug) console.error('🎵 New video has no sources');
-            return false;
-        }
+    // Pause current video
+    this.video.pause();
+
+    // Get new video sources and qualities
+    const newSources = Array.from(newVideoElement.querySelectorAll('source')).map(source => ({
+        src: source.src,
+        quality: source.getAttribute('data-quality') || 'auto',
+        type: source.type || 'video/mp4'
+    }));
 
-        // Check if new video is adaptive stream
-        if (this.options.adaptiveStreaming && newSources.length > 0) {
-            const firstSource = newSources[0];
-            if (this.detectStreamType(firstSource.src)) {
-                // Initialize adaptive streaming for new video
-                this.initializeAdaptiveStreaming(firstSource.src).then((initialized) => {
-                    if (initialized && shouldPlay) {
-                        const playPromise = this.video.play();
-                        if (playPromise) {
-                            playPromise.catch(error => {
-                                if (this.options.debug) console.log('Autoplay prevented:', error);
-                            });
-                        }
+    if (newSources.length === 0) {
+        if (this.options.debug) console.error('🎵 New video has no sources');
+        return false;
+    }
+
+    // Check if new video is adaptive stream
+    if (this.options.adaptiveStreaming && newSources.length > 0) {
+        const firstSource = newSources[0];
+        if (this.detectStreamType(firstSource.src)) {
+            // Initialize adaptive streaming for new video
+            this.initializeAdaptiveStreaming(firstSource.src).then((initialized) => {
+                if (initialized && shouldPlay) {
+                    const playPromise = this.video.play();
+                    if (playPromise) {
+                        playPromise.catch(error => {
+                            if (this.options.debug) console.log('Autoplay prevented:', error);
+                        });
                     }
-                });
-                return true;
-            }
+                }
+            });
+            return true;
         }
+    }
 
-        // Update traditional video sources
-        this.video.innerHTML = '';
-        newSources.forEach(source => {
-            const sourceEl = document.createElement('source');
-            sourceEl.src = source.src;
-            sourceEl.type = source.type;
-            sourceEl.setAttribute('data-quality', source.quality);
-            this.video.appendChild(sourceEl);
-        });
+    // Update traditional video sources
+    this.video.innerHTML = '';
+    newSources.forEach(source => {
+        const sourceEl = document.createElement('source');
+        sourceEl.src = source.src;
+        sourceEl.type = source.type;
+        sourceEl.setAttribute('data-quality', source.quality);
+        this.video.appendChild(sourceEl);
+    });
 
-        // Update subtitles if present
-        const newTracks = Array.from(newVideoElement.querySelectorAll('track'));
-        newTracks.forEach(track => {
-            const trackEl = document.createElement('track');
-            trackEl.kind = track.kind;
-            trackEl.src = track.src;
-            trackEl.srclang = track.srclang;
-            trackEl.label = track.label;
-            if (track.default) trackEl.default = true;
-            this.video.appendChild(trackEl);
-        });
+    // Update subtitles if present
+    const newTracks = Array.from(newVideoElement.querySelectorAll('track'));
+    newTracks.forEach(track => {
+        const trackEl = document.createElement('track');
+        trackEl.kind = track.kind;
+        trackEl.src = track.src;
+        trackEl.srclang = track.srclang;
+        trackEl.label = track.label;
+        if (track.default) trackEl.default = true;
+        this.video.appendChild(trackEl);
+    });
 
-        // Update video title
-        const newTitle = newVideoElement.getAttribute('data-video-title');
-        if (newTitle && this.options.showTitleOverlay) {
-            this.options.videoTitle = newTitle;
-            if (this.titleText) {
-                this.titleText.textContent = newTitle;
-            }
+    // Update video title
+    const newTitle = newVideoElement.getAttribute('data-video-title');
+    if (newTitle && this.options.showTitleOverlay) {
+        this.options.videoTitle = newTitle;
+        if (this.titleText) {
+            this.titleText.textContent = newTitle;
         }
+    }
 
-        // Reload video
-        this.video.load();
+    // Reload video
+    this.video.load();
 
-        // Update qualities and quality selector
-        this.collectVideoQualities();
-        this.updateQualityMenu();
+    // Update qualities and quality selector
+    this.collectVideoQualities();
+    this.updateQualityMenu();
 
-        // Play if needed
-        if (shouldPlay) {
-            const playPromise = this.video.play();
-            if (playPromise) {
-                playPromise.catch(error => {
-                    if (this.options.debug) console.log('🎵 Autoplay prevented:', error);
-                });
-            }
+    // Play if needed
+    if (shouldPlay) {
+        const playPromise = this.video.play();
+        if (playPromise) {
+            playPromise.catch(error => {
+                if (this.options.debug) console.log('🎵 Autoplay prevented:', error);
+            });
         }
-
-        return true;
     }
 
+    return true;
+}
+
 /**
 * POSTER IMAGE MANAGEMENT
 * Initialize and manage video poster image
@@ -1550,59 +1682,104 @@ isPosterVisible() {
 }
 
 
-    loadScript(src) {
-        return new Promise((resolve, reject) => {
-            if (document.querySelector(`script[src="${src}"]`)) {
-                resolve();
-                return;
-            }
+loadScript(src) {
+    return new Promise((resolve, reject) => {
+        if (document.querySelector(`script[src="${src}"]`)) {
+            resolve();
+            return;
+        }
+
+        const script = document.createElement('script');
+        script.src = src;
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+    });
+}
+
+/**
+ * Set seek handle shape dynamically
+ * @param {string} shape - Shape type: none, circle, square, diamond, arrow, triangle, heart, star
+ * @returns {Object} this
+ */
+setSeekHandleShape(shape) {
+    const validShapes = ['none', 'circle', 'square', 'diamond', 'arrow', 'triangle', 'heart', 'star'];
 
-            const script = document.createElement('script');
-            script.src = src;
-            script.onload = resolve;
-            script.onerror = reject;
-            document.head.appendChild(script);
+    if (!validShapes.includes(shape)) {
+        if (this.options.debug) console.warn('Invalid seek handle shape:', shape);
+        return this;
+    }
+
+    this.options.seekHandleShape = shape;
+
+    // Update handle class
+    if (this.progressHandle) {
+        // Remove all shape classes
+        validShapes.forEach(s => {
+            this.progressHandle.classList.remove(`progress-handle-${s}`);
         });
+        // Add new shape class
+        this.progressHandle.classList.add(`progress-handle-${shape}`);
     }
 
-    dispose() {
-        if (this.qualityMonitorInterval) {
-            clearInterval(this.qualityMonitorInterval);
-            this.qualityMonitorInterval = null;
-        }
+    if (this.options.debug) console.log('Seek handle shape changed to:', shape);
+    return this;
+}
 
-        if (this.autoHideTimer) {
-            clearTimeout(this.autoHideTimer);
-            this.autoHideTimer = null;
-        }
+/**
+ * Get current seek handle shape
+ * @returns {string} Current shape
+ */
+getSeekHandleShape() {
+    return this.options.seekHandleShape;
+}
 
-        this.cleanupQualityChange();
-        this.clearControlsTimeout();
-        this.clearTitleTimeout();
+/**
+ * Get available seek handle shapes
+ * @returns {Array} Array of available shapes
+ */
+getAvailableSeekHandleShapes() {
+    return ['none', 'circle', 'square', 'diamond', 'arrow', 'triangle', 'heart', 'star'];
+}
 
-        // Destroy adaptive streaming players
-        this.destroyAdaptivePlayer();
+dispose() {
+    if (this.qualityMonitorInterval) {
+        clearInterval(this.qualityMonitorInterval);
+        this.qualityMonitorInterval = null;
+    }
 
-        if (this.controls) {
-            this.controls.remove();
-        }
-        if (this.loadingOverlay) {
-            this.loadingOverlay.remove();
-        }
-        if (this.titleOverlay) {
-            this.titleOverlay.remove();
-        }
-        if (this.initialLoading) {
-            this.initialLoading.remove();
-        }
+    if (this.autoHideTimer) {
+        clearTimeout(this.autoHideTimer);
+        this.autoHideTimer = null;
+    }
 
-        if (this.video) {
-            this.video.classList.remove('video-player');
-            this.video.controls = true;
-            this.video.style.visibility = '';
-            this.video.style.opacity = '';
-            this.video.style.pointerEvents = '';
-        }
+    this.cleanupQualityChange();
+    this.clearControlsTimeout();
+    this.clearTitleTimeout();
+
+    // Destroy adaptive streaming players
+    this.destroyAdaptivePlayer();
+
+    if (this.controls) {
+        this.controls.remove();
+    }
+    if (this.loadingOverlay) {
+        this.loadingOverlay.remove();
+    }
+    if (this.titleOverlay) {
+        this.titleOverlay.remove();
+    }
+    if (this.initialLoading) {
+        this.initialLoading.remove();
+    }
+
+    if (this.video) {
+        this.video.classList.remove('video-player');
+        this.video.controls = true;
+        this.video.style.visibility = '';
+        this.video.style.opacity = '';
+        this.video.style.pointerEvents = '';
+    }
     if (this.chapterMarkersContainer) {
         this.chapterMarkersContainer.remove();
     }
@@ -1614,37 +1791,37 @@ isPosterVisible() {
     }
     this.disposeAllPlugins();
 
-    }
+}
 
-    /**
+/**
 
-     * Apply specified resolution mode to video
+ * Apply specified resolution mode to video
 
-     * @param {string} resolution - The resolution mode to apply
+ * @param {string} resolution - The resolution mode to apply
 
-     */
+ */
 
-    /**
+/**
 
-     * Get currently set resolution
+ * Get currently set resolution
 
-     * @returns {string} Current resolution
+ * @returns {string} Current resolution
 
-     */
+ */
 
-    /**
+/**
 
-     * Initialize resolution from options value
+ * Initialize resolution from options value
 
-     */
+ */
 
-    /**
+/**
 
-     * Restore resolution after quality change - internal method
+ * Restore resolution after quality change - internal method
 
-     * @private
+ * @private
 
-     */
+ */
 
 // Core methods for main class
-// All original functionality preserved exactly
+// All original functionality preserved exactly