myetv-player 1.7.0 → 1.7.2

package/plugins/autosub/myetv-autosub-plugin.js

@@ -1,20 +1,21 @@
 /**
  * MYETV Player - Auto Subtitles Plugin
- * Automatically generates subtitles via Transformers.js + Whisper (client-side, no FFmpeg, no server)
+ * Automatically generates subtitles via Transformers.js + Whisper 
+ * OR Translates existing player subtitles on-the-fly.
  *
  * Compatible with myetv-player plugin system (registerMYETVPlugin)
  * Author: Oscar Cosimo - MYETV
  *
  * Options:
- *   language        {string}  Transcription language ('italian','english','it','en',...). Default: null (auto-detect)
- *   modelSize       {string}  'tiny' (~39MB), 'base' (~74MB), 'small' (~244MB). Default: 'base'
- *   autoGenerate    {boolean} Auto-generate subtitles on video load. Default: false
- *   autoTranslation {string}  Auto-translate subtitles into this language on load (ISO 2-letter code, e.g. 'en','it'). Default: null
- *   showButton      {boolean} Show button in the control bar. Default: true
- *   position        {string}  'right', 'left', or 'topbar'. Default: 'right'
- *   subtitleStyle   {object}  Custom CSS style object for the subtitle text div
- *   cacheEnabled    {boolean} Cache transcription in localStorage. Default: true
- *   idCache         {string}  Stable unique ID for localStorage cache key
+ * language        {string}  Transcription language ('italian','english','it','en',...). Default: null (auto-detect)
+ * modelSize       {string}  'tiny' (~39MB), 'base' (~74MB), 'small' (~244MB). Default: 'base'
+ * autoGenerate    {boolean} Auto-generate subtitles on video load. Default: false
+ * autoTranslation {string}  Auto-translate subtitles into this language on load (ISO 2-letter code, e.g. 'en','it'). Default: null
+ * showButton      {boolean} Show button in the control bar. Default: true
+ * position        {string}  'right', 'left', or 'topbar'. Default: 'right'
+ * subtitleStyle   {object}  Custom CSS style object for the subtitle text div
+ * cacheEnabled    {boolean} Cache transcription and translations in localStorage. Default: true
+ * idCache         {string}  Stable unique ID for localStorage cache key
  */
 
 (function () {
@@ -212,7 +213,9 @@
   @media (max-width: 600px) {
     .myetv-autosub-overlay { bottom: 60px; width: 96%; }
     .myetv-autosub-text { font-size: clamp(0.6em, 3.5vw, 0.85em); padding: 3px 8px 4px; }
-    .myetv-autosub-drag-handle { display: none; } /* drag handle hidden on touch devices */
+    .myetv-autosub-drag-handle { display: none; } 
+    .myetv-autosub-overlay { pointer-events: all; cursor: grab; }
+    .myetv-autosub-overlay.dragging { cursor: grabbing; }
   }
   @media (max-width: 400px) {
     .myetv-autosub-text { font-size: clamp(0.55em, 4vw, 0.75em); }
@@ -220,7 +223,14 @@
 `;
 
     const ICON_CC = `<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-9 8H9.5v-.5h-2v3h2V14H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V14H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z"/></svg>`;
-    const ICON_LOADING = `<svg viewBox="0 0 24 24"><path d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/></path></svg>`;
+    const ICON_LOADING = `<svg viewBox="0 0 24 24">
+  <path d="M12 2A10 10 0 0 1 22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none">
+    <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/>
+  </path>
+  <g transform="translate(4, 5) scale(0.65)">
+    <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-9 8H9.5v-.5h-2v3h2V14H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V14H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z"/>
+  </g>
+</svg>`;
 
     const WHISPER_MODELS = {
         tiny: 'Xenova/whisper-tiny',
@@ -284,19 +294,25 @@
                 modelSize: 'base',
                 autoGenerate: false,
                 showButton: true,
-                position: 'right',    // 'left' | 'right' | 'topbar'
+                position: 'right',    
                 subtitleStyle: {},
                 cacheEnabled: true,
                 idCache: null,
-                autoTranslation: null,      // ISO 2-letter code, e.g. 'en', 'it'
+                autoTranslation: null,      
+                translationEngine: null, 
             }, options);
 
             this.isGenerating = false;
-            this.subtitles = [];       // { start, end, text }  original segments
-            this.subtitlesTrans = [];       // { start, end, text }  translated segments (in-memory cache)
-            this.translateLang = 'off';    // currently active translation language
-            this._transCache = {};       // { langCode: [{start,end,text}] }
+            this.subtitles = [];           // Original segments (generated OR imported)
+            this.subtitlesTrans = [];      // Translated segments
+            this.translateLang = 'off';    
+            this._transCache = {};         // Persistent cache for translations { langCode: [...] }
             this.subVisible = false;
+            
+            // Flags for Native Subtitle Integration
+            this.hasNativeTracks = false;
+            this.isImportedSubs = false;
+
             this.updateInterval = null;
             this.btnWrapEl = null;
             this.btnEl = null;
@@ -307,7 +323,7 @@
             this._worker = null;
             // Drag state
             this._drag = { active: false, startX: 0, startY: 0, origLeft: 0, origTop: 0 };
-            // Overlay position (absolute px, or null → uses default bottom:72px from CSS)
+            // Overlay position
             this._overlayPos = null;
         }
 
@@ -316,94 +332,263 @@
             this._createOverlay();
             this._createPanel();
             if (this.opts.showButton) this._createButton();
+            
+            // Integrate with player initialization lifecycle
+            this.player.addEventListener('playerready', () => {
+                this._checkForNativeTracks();
+                
+                // If autoTranslation is enabled and we have native tracks, import immediately!
+                if (this.opts.autoTranslation && this.hasNativeTracks) {
+                    // Give fetch a moment to load custom tracks via the core player
+                    const attemptImport = setInterval(() => {
+                        if (this._importPlayerSubtitles()) {
+                            clearInterval(attemptImport);
+                            if (this.player.options.debug) console.log('[AutoSub] Auto-imported native tracks for translation');
+                            this.subVisible = true;
+                            this._startDisplay();
+                            this._setBtnActive(true);
+                            
+                            // Trigger translation
+                            this._setTranslationLang(this.opts.autoTranslation.toLowerCase().trim().slice(0, 2));
+                        }
+                    }, 500);
+                    // Stop trying after 5 seconds to avoid infinite loops
+                    setTimeout(() => clearInterval(attemptImport), 5000);
+                }
+            });
+
             if (this.opts.autoTranslation) {
                 this._scheduleAutoTranslation();
             }
+            
             if (this.opts.autoGenerate) {
-                this.video.addEventListener('loadedmetadata', () => this.generate(), { once: true });
+                this.video.addEventListener('loadedmetadata', () => {
+                    // Do NOT generate if the player already loaded native tracks
+                    if (!this._checkForNativeTracks()) {
+                        this.generate();
+                    }
+                }, { once: true });
             }
+            
             if (this.player.options.debug) console.log('[AutoSub] Plugin setup complete');
         }
 
+        // Checks if the player has <track> elements or VTT/SRT data
+        _checkForNativeTracks() {
+            if (this.player.textTracks && this.player.textTracks.length > 0) {
+                this.hasNativeTracks = true;
+                if (this.btnEl) {
+                    this.btnEl.setAttribute('title', 'Translate Subtitles');
+                }
+                return true;
+            }
+            return false;
+        }
+
+        // Steal subtitles from the player's custom parsed arrays
+        _importPlayerSubtitles() {
+            if (this.player.customSubtitles && this.player.customSubtitles.length > 0) {
+                let track = null;
+                
+                // Try current active track first
+                if (this.player.currentCustomTrackIndex >= 0) {
+                     track = this.player.customSubtitles[this.player.currentCustomTrackIndex];
+                }
+                
+                // Fallback to first available track with data
+                if (!track || !track.subtitles || track.subtitles.length === 0) {
+                     track = this.player.customSubtitles.find(t => t.subtitles && t.subtitles.length > 0);
+                }
+
+                if (track && track.subtitles && track.subtitles.length > 0) {
+                    // Deep copy segments
+                    this.subtitles = track.subtitles.map(s => ({ start: s.start, end: s.end, text: s.text }));
+                    this.isImportedSubs = true;
+                    
+                    if (track.language) {
+                        this.opts.language = track.language;
+                        this._lastDetectedLang = track.language;
+                    }
+
+                    // Disable native player subtitles to avoid double rendering (we take control)
+                    if (typeof this.player.disableSubtitles === 'function') {
+                        this.player.disableSubtitles();
+                    }
+                    
+                    // Load any previously cached translations for this imported subtitle
+                    const cached = this._loadFromCache();
+                    if (cached && cached.transCache) {
+                        this._transCache = cached.transCache;
+                    }
+                    
+                    // Save imported state immediately
+                    this._saveToCache(this.subtitles, null, null, this._lastDetectedLang);
+
+                    return true;
+                }
+            }
+            return false;
+        }
+
         _scheduleAutoTranslation() {
-            // Light polling: waits until this.subtitles is populated (from cache or transcription),
-            // then triggers translation automatically
             const lang = this.opts.autoTranslation.toLowerCase().trim().slice(0, 2);
-            let tries = 0;
+            this.translateLang = lang;
 
+            let tries = 0;
             const check = setInterval(() => {
                 tries++;
-                if (this.subtitles.length > 0) {
+                // Wait until transcription/import is fully complete
+                if (this.subtitles.length > 0 && !this.isGenerating) {
                     clearInterval(check);
-                    if (this.player.options.debug)
-                        console.log('[AutoSub] autoTranslation → triggering lang:', lang);
+                    if (this.player.options.debug) console.log('[AutoSub] autoTranslation final pass, lang:', lang);
+                    
+                    this.subtitlesTrans = [];
+                    // Note: We DO NOT clear this._transCache here, to preserve cached translations!
                     this._setTranslationLang(lang);
                     this._updateMenu();
                     return;
                 }
-                // Stop waiting after 5 minutes (enough for any transcription, even large videos with slow models)
                 if (tries > 300) clearInterval(check);
             }, 1000);
         }
 
         async handleButtonClick() {
-            // If cache is enabled and no subtitles are loaded yet, try loading from cache first
+            // 1. If native tracks exist but haven't been imported yet, try to import them
+            if (this._checkForNativeTracks() && this.subtitles.length === 0) {
+                const imported = this._importPlayerSubtitles();
+                if (imported) {
+                    this.subVisible = true;
+                    this._startDisplay();
+                    this._setBtnActive(true);
+                    this._updateMenu();
+                    if (this.player.options.debug) console.log('[AutoSub] Imported subtitles from player on click');
+                    this._toggleMenu();
+                    return;
+                } else {
+                    // Fetch is probably still pending. Check cache just in case we already saved imported subs.
+                    const cached = this._loadFromCache();
+                    if (cached && cached.isImportedSubs) {
+                        this.subtitles = cached.subtitles;
+                        this._transCache = cached.transCache || {};
+                        this.isImportedSubs = true;
+                        this.subVisible = true;
+                        this._startDisplay();
+                        this._setBtnActive(true);
+                        this._updateMenu();
+                        this._toggleMenu();
+                        return;
+                    } else {
+                        // Let the user know we are processing the native tracks
+                        this._updatePanel('Reading native subtitles...', 100);
+                        this._openPanel();
+                        setTimeout(() => this._closePanel(), 1500);
+                        return;
+                    }
+                }
+            }
+
+            // 2. If NO native tracks, check cache for Whisper generated ones
             if (this.subtitles.length === 0 && !this.isGenerating) {
                 const cached = this._loadFromCache();
                 if (cached) {
-                    this.subtitles = cached;
+                    this.subtitles = cached.subtitles;
+                    this._transCache = cached.transCache || {};
+                    this.isImportedSubs = cached.isImportedSubs || false;
+                    
+                    if (this.opts.autoTranslation) {
+                        const tLang = this.opts.autoTranslation.toLowerCase().trim().slice(0, 2);
+                        this.translateLang = tLang;
+                        if (this._transCache[tLang]) {
+                            this.subtitlesTrans = [...this._transCache[tLang]];
+                        }
+                    }
+
                     this.subVisible = true;
                     this._startDisplay();
                     this._setBtnActive(true);
                     this._updateMenu();
+
+                    if (this.translateLang && this.translateLang !== 'off') {
+                        this._setTranslationLang(this.translateLang);
+                    }
+                    
                     if (this.player.options.debug)
-                        console.log('[AutoSub] Loaded from cache:', cached.length, 'segments');
-                    // Open menu so the user can see current state and translation options
+                        console.log('[AutoSub] Loaded from cache:', cached.subtitles.length, 'segments');
+                        
                     this._toggleMenu();
                     return;
                 }
             }
-            // No cache found, or subtitles already loaded — just toggle the menu
+            
+            // Default: Toggle the menu
             this._toggleMenu();
         }
 
         async generate() {
-            if (this.isGenerating) return;
+            // Block generation if we are already using native imported subtitles
+            if (this.isGenerating || this.isImportedSubs) return;
+
+            let partialCache = null;
 
-            // Check cache before doing anything
             if (this.subtitles.length === 0) {
                 const cached = this._loadFromCache();
                 if (cached) {
-                    this.subtitles = cached;
+                    this.subtitles = cached.subtitles;
+                    this._transCache = cached.transCache || {};
+                    this.isImportedSubs = cached.isImportedSubs || false;
+                    
+                    if (this.opts.autoTranslation) {
+                        const tLang = this.opts.autoTranslation.toLowerCase().trim().slice(0, 2);
+                        this.translateLang = tLang;
+                        if (this._transCache[tLang]) {
+                            this.subtitlesTrans = [...this._transCache[tLang]];
+                        }
+                    }
+
                     this.subVisible = true;
                     this._startDisplay();
                     this._setBtnActive(true);
                     this._updateMenu();
+
+                    if (cached.chunksCompleted === null || cached.chunksCompleted >= cached.totalChunks) {
+                        if (this.player.options.debug) console.log('[AutoSub] Full cache hit, skipping transcription');
+                        return;
+                    }
+
+                    partialCache = cached; 
                     if (this.player.options.debug)
-                        console.log('[AutoSub] generate() — cache hit, skipping transcription');
-                    return;
+                        console.log('[AutoSub] Partial cache found — resuming from chunk', cached.chunksCompleted, 'of', cached.totalChunks);
                 }
             }
 
             this.isGenerating = true;
             this._setBtnGenerating(true);
             this._updatePanel('Extracting audio...', 5);
-
             try {
                 const audioData = await this._extractAudio();
                 this._updatePanel('Downloading Transformers.js bundle...', 30);
                 await this._ensureBundle();
                 this._updatePanel('Preparing Whisper worker...', 38);
-                await this._transcribeChunksStreaming(audioData);
-                this._saveToCache(this.subtitles);
+                await this._transcribeChunksStreaming(audioData, partialCache);
+
+                this.subtitles.sort((a, b) => a.start - b.start);
+
+                this._saveToCache(this.subtitles, null, null, this._lastDetectedLang || null);
                 this._updatePanel('Subtitles ready!', 100);
-                setTimeout(() => {
-                    this._closePanel();
-                    this._setBtnActive(true);
-                    this._updateMenu();
-                    if (this.player.options.debug)
-                        console.log('[AutoSub] Generation complete:', this.subtitles.length, 'segments');
-                }, 800);
+                this._setBtnActive(true);
+                this._updateMenu();
+
+                // Re-trigger translation if one was active
+                if (this.translateLang && this.translateLang !== 'off') {
+                    const lang = this.translateLang;
+                    this.translateLang = 'off';       
+                    this.subtitlesTrans = [];
+                    await this._setTranslationLang(lang); 
+                }
+
+                setTimeout(() => { this._closePanel(); }, 800);
+
+                if (this.player.options.debug) console.log('[AutoSub] Generation complete:', this.subtitles.length, 'segments');
             } catch (err) {
                 if (this.player.options.debug) console.error('[AutoSub] Generation error:', err);
                 this._updatePanel('Error: ' + (err.message || String(err)), 0);
@@ -423,6 +608,10 @@
         dispose() {
             this._stopDisplay();
             this._destroyDrag();
+            if (this._resizeObserver) {
+                this._resizeObserver.disconnect();
+                this._resizeObserver = null;
+            }
             if (this._captureTimer) { clearTimeout(this._captureTimer); this._captureTimer = null; }
             if (this._captureProgressInterval) { clearInterval(this._captureProgressInterval); this._captureProgressInterval = null; }
             if (this._worker) { this._worker.terminate(); this._worker = null; }
@@ -461,7 +650,10 @@
 
             const text = document.createElement('div');
             text.className = 'myetv-autosub-text';
-            Object.assign(text.style, this.opts.subtitleStyle);
+
+            const styleWithoutFont = Object.assign({}, this.opts.subtitleStyle);
+            delete styleWithoutFont.fontSize;
+            Object.assign(text.style, styleWithoutFont);
 
             overlay.appendChild(handle);
             overlay.appendChild(text);
@@ -471,11 +663,50 @@
             this.overlayText = text;
 
             this._initDrag(handle, overlay);
+
+            this._resizeObserver = new ResizeObserver(() => {
+                this._applyResponsiveFontSize();
+            });
+            this._resizeObserver.observe(this.container);
+
+            this._applyResponsiveFontSize();
+        }
+
+        _applyResponsiveFontSize() {
+            if (!this.overlayText) return;
+
+            const rect = this.container.getBoundingClientRect();
+            const w = rect.width;
+            const h = rect.height;
+
+            const REFERENCE_WIDTH = 800;
+
+            let basePx = 18;
+            const userFontSize = this.opts.subtitleStyle?.fontSize;
+            if (userFontSize) {
+                const match = String(userFontSize).match(/([\d.]+)(px|em|rem)?/);
+                if (match) {
+                    const val = parseFloat(match[1]);
+                    const unit = match[2] || 'px';
+                    if (unit === 'px') basePx = val;
+                    else if (unit === 'em' || unit === 'rem') basePx = val * 16;
+                }
+            }
+
+            let size = basePx * (w / REFERENCE_WIDTH);
+
+            if (w < 260 || h < 150) {
+                size = Math.min(size, 8);
+            }
+
+            size = Math.max(size, 8);
+            size = Math.min(size, basePx);
+
+            this.overlayText.style.fontSize = size + 'px';
         }
 
         _initDrag(handle, overlay) {
             const onStart = (e) => {
-                // Prevent conflicts with player controls
                 e.stopPropagation();
                 const isTouch = e.type === 'touchstart';
                 const clientX = isTouch ? e.touches[0].clientX : e.clientX;
@@ -484,7 +715,6 @@
                 const rect = overlay.getBoundingClientRect();
                 const contRect = this.container.getBoundingClientRect();
 
-                // Switch to absolute positioning on first drag
                 if (!this._overlayPos) {
                     const currentLeft = rect.left - contRect.left + rect.width / 2;
                     const currentTop = rect.top - contRect.top + rect.height / 2;
@@ -537,7 +767,9 @@
             };
 
             handle.addEventListener('mousedown', onStart);
+            overlay.addEventListener('touchstart', onStart, { passive: false });
             handle.addEventListener('touchstart', onStart, { passive: false });
+
             this._drag._onEnd = onEnd;
         }
 
@@ -600,7 +832,6 @@
         _createButton() {
             const position = this.opts.position;
 
-            // Button wrapper only (menu is appended directly to body)
             const wrap = document.createElement('div');
             wrap.style.cssText = 'position:relative;display:inline-flex;align-items:center;';
 
@@ -616,13 +847,11 @@
 
             wrap.appendChild(btn);
 
-            // Menu is appended directly to body — escapes any stacking context from the player
             const menu = document.createElement('div');
             menu.className = 'myetv-autosub-menu';
             menu.addEventListener('click', (e) => e.stopPropagation());
             document.body.appendChild(menu);
 
-            // Insert button into the player DOM
             if (position === 'topbar') {
                 const settingsControl = this.container.querySelector('.settings-control');
                 if (settingsControl) settingsControl.insertBefore(wrap, settingsControl.firstChild);
@@ -646,7 +875,6 @@
             this.btnEl = btn;
             this.menuEl = menu;
 
-            // Close menu when clicking outside
             this._menuOutsideHandler = (e) => {
                 if (!menu.contains(e.target) && e.target !== btn) {
                     this._closeMenuNow();
@@ -654,7 +882,6 @@
             };
             document.addEventListener('click', this._menuOutsideHandler);
 
-            // Close menu on Escape key
             this._menuEscHandler = (e) => {
                 if (e.key === 'Escape') this._closeMenuNow();
             };
@@ -672,10 +899,8 @@
                 return;
             }
 
-            // Rebuild menu content
             this._buildMenu();
 
-            // Position before showing (measure offset first)
             this.menuEl.style.visibility = 'hidden';
             this.menuEl.style.display = 'block';
 
@@ -685,14 +910,12 @@
             const vpH = window.innerHeight;
             const vpW = window.innerWidth;
 
-            // Open above or below depending on available space
             const spaceAbove = btnRect.top - 8;
             const spaceBelow = vpH - btnRect.bottom - 8;
             let top = (spaceAbove >= menuH || spaceAbove >= spaceBelow)
                 ? btnRect.top - menuH - 8
                 : btnRect.bottom + 8;
 
-            // Align to the right edge of the button, clamped to viewport
             let left = btnRect.right - menuW;
             left = Math.max(4, Math.min(vpW - menuW - 4, left));
             top = Math.max(4, Math.min(vpH - menuH - 4, top));
@@ -737,26 +960,29 @@
             sec1.appendChild(itemOff);
             this.menuEl.appendChild(sec1);
 
-            // ── SECTION 2: GENERATE / PANEL ──────────────────────────────────────
-            const sec2 = this._menuSection('Management');
+            // ── SECTION 2: GENERATE / PANEL (Only if NOT using native imported subs)
+            if (!this.isImportedSubs) {
+                const sec2 = this._menuSection('Management');
 
-            const genLabel = isGenerating ? '⏳ Generating...' : hasSubs ? '🔄 Regenerate transcription' : '🎙️ Generate subtitles';
-            const itemGen = this._menuItem(genLabel, false, isGenerating, () => {
-                this.subtitles = [];
-                this.subtitlesTrans = [];
-                this._transCache = {};
-                this._closeMenuNow();
-                this.generate();
-            });
+                const genLabel = isGenerating ? '⏳ Generating...' : hasSubs ? '🔄 Regenerate transcription' : '🎙️ Generate subtitles';
+                const itemGen = this._menuItem(genLabel, false, isGenerating, () => {
+                    this._deleteCache();
+                    this.subtitles = [];
+                    this.subtitlesTrans = [];
+                    this._transCache = {};
+                    this._closeMenuNow();
+                    this.generate(); 
+                });
 
-            const itemPanel = this._menuItem('📊 Show progress', false, !isGenerating, () => {
-                this._closeMenuNow();
-                this._openPanel();
-            });
+                const itemPanel = this._menuItem('📊 Show progress', false, !isGenerating, () => {
+                    this._closeMenuNow();
+                    this._openPanel();
+                });
 
-            sec2.appendChild(itemGen);
-            if (isGenerating) sec2.appendChild(itemPanel);
-            this.menuEl.appendChild(sec2);
+                sec2.appendChild(itemGen);
+                if (isGenerating) sec2.appendChild(itemPanel);
+                this.menuEl.appendChild(sec2);
+            }
 
             // ── SECTION 3: TRANSLATION ────────────────────────────────────────────
             if (hasSubs) {
@@ -831,14 +1057,20 @@
 
         async _setTranslationLang(langCode) {
             this.translateLang = langCode;
-
             if (langCode === 'off') {
                 this.subtitlesTrans = [];
                 if (this.player.options.debug) console.log('[AutoSub] Translation disabled');
                 return;
             }
 
-            // Already cached in memory?
+            const sourceLang = this._resolveLanguage(this.opts.language);
+            if (sourceLang && sourceLang === langCode.slice(0, 2)) {
+                if (this.player.options.debug) console.log('[AutoSub] Source = target lang, skipping translation');
+                this.subtitlesTrans = [];
+                this.translateLang = 'off';
+                return;
+            }
+
             if (this._transCache[langCode]) {
                 this.subtitlesTrans = this._transCache[langCode];
                 if (this.player.options.debug) console.log('[AutoSub] Translation cache hit:', langCode);
@@ -849,10 +1081,13 @@
             this._setBtnGenerating(true);
 
             try {
-                // Batch segments to minimize API requests (max ~400 chars per request)
                 const translated = await this._translateBatch(this.subtitles, langCode);
                 this.subtitlesTrans = translated;
                 this._transCache[langCode] = translated;
+                
+                // Save translations persistently to cache
+                this._saveToCache(this.subtitles, null, null, this._lastDetectedLang);
+
                 if (this.player.options.debug) console.log('[AutoSub] Translation done:', translated.length, 'segments');
             } catch (err) {
                 if (this.player.options.debug) console.warn('[AutoSub] Translation error:', err.message);
@@ -863,61 +1098,133 @@
             }
         }
 
+        async _translateText(text, sourceLang, targetLang) {
+            const engine = this.opts.translationEngine;
+
+            if (!engine || engine.type === 'mymemory') {
+                const url = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=${sourceLang}|${targetLang}`;
+                const resp = await fetch(url);
+                const json = await resp.json();
+                if (json.responseStatus && json.responseStatus !== 200) {
+                    throw new Error('MyMemory error: ' + json.responseDetails + ' (status ' + json.responseStatus + ')');
+                }
+                return json.responseData?.translatedText ?? text;
+            }
+
+            if (engine.type === 'libretranslate') {
+                const body = { q: text, source: sourceLang, target: targetLang, format: 'text' };
+                if (engine.apiKey) body.api_key = engine.apiKey;
+                const resp = await fetch(engine.url.replace(/\/$/, '') + '/translate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(body)
+                });
+                if (!resp.ok) throw new Error('LibreTranslate HTTP ' + resp.status);
+                const json = await resp.json();
+                if (json.error) throw new Error('LibreTranslate: ' + json.error);
+                return json.translatedText ?? text;
+            }
+
+            if (engine.type === 'marianmt') {
+                const resp = await fetch(engine.url.replace(/\/$/, '') + '/translate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ q: text, source: sourceLang, target: targetLang })
+                });
+                if (!resp.ok) throw new Error('MarianMT HTTP ' + resp.status);
+                const json = await resp.json();
+                return json.translatedText ?? json.translation ?? text;
+            }
+
+            throw new Error('Unknown translation engine: ' + engine.type);
+        }
+
         async _translateBatch(segments, targetLang) {
+            const SEP = ' ||| ';
             const BATCH_CHARS = 400;
-            const SEP = '\n||||\n';
 
-            // ── Detect source language ────────────────────────────────────────────
-            // 1. Use the language set in plugin options (if provided)
-            // 2. Otherwise try to detect it from the first segment via MyMemory
-            // 3. Absolute fallback: 'en'
             let sourceLang = null;
-
             if (this.opts.language) {
-                // Normalize: 'italian' → 'it', 'it' → 'it'
                 const lower = this.opts.language.toLowerCase().trim();
-                // Reverse lookup in LANGUAGE_MAP (value → key)
                 const found = Object.entries(LANGUAGE_MAP).find(([k, v]) => k === lower || v === lower);
-                sourceLang = found ? found[0] : lower.slice(0, 2); // fallback: first 2 chars
+                sourceLang = found ? found[0] : lower.slice(0, 2);
             }
-
             if (!sourceLang && segments.length > 0) {
-                // Try to detect language from the first segment via MyMemory
                 try {
                     const sample = segments[0].text.slice(0, 100);
                     const detectUrl = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(sample)}&langpair=en|en`;
                     const resp = await fetch(detectUrl);
                     const json = await resp.json();
-                    // MyMemory returns the detected language in responseData
                     const detected = json.responseData?.detectedLanguage;
-                    if (detected && /^[a-z]{2}(-[A-Z]{2})?$/.test(detected)) {
-                        sourceLang = detected.slice(0, 2);
-                    }
-                } catch (_) { }
+                    if (/[a-z]{2}-[A-Z]{2}/.test(detected)) sourceLang = detected.slice(0, 2);
+                } catch { }
             }
+            if (!sourceLang) sourceLang = 'en';
 
-            if (!sourceLang) sourceLang = 'en'; // absolute fallback
+            const normTarget = LANGUAGE_MAP[targetLang]
+                ? targetLang
+                : (Object.entries(LANGUAGE_MAP).find(([k, v]) => v === targetLang)?.[0] ?? targetLang.slice(0, 2));
 
-            // Skip translation if source and target language are the same
-            if (sourceLang === targetLang) {
-                if (this.player.options.debug)
-                    console.log('[AutoSub] Source === target lang, skipping translation');
+            if (sourceLang === normTarget) {
+                if (this.player.options.debug) console.log('[AutoSub] Source = target lang, skipping translation');
                 return segments.map(s => ({ ...s }));
             }
 
-            if (this.player.options.debug)
-                console.log('[AutoSub] Translating', sourceLang, '→', targetLang);
+            if (this.player.options.debug) console.log('[AutoSub] Translating', sourceLang, '→', normTarget);
 
-            // ── Batching ──────────────────────────────────────────────────────────
-            const batches = [];
-            let current = [];
-            let charCount = 0;
+            const engine = this.opts.translationEngine;
+
+            if (engine?.type === 'libretranslate') {
+                const BATCH_SIZE = 50;
+                const result = [];
+                
+                let url = engine.url.replace(/\/$/, '');
+                if (!url.endsWith('/translate') && !url.includes('.php')) url += '/translate';
+
+                for (let i = 0; i < segments.length; i += BATCH_SIZE) {
+                    const batch = segments.slice(i, i + BATCH_SIZE);
+                    try {
+                        const body = {
+                            q: batch.map(s => s.text),  
+                            source: sourceLang,
+                            target: normTarget,
+                            format: 'text'
+                        };
+                        if (engine.apiKey) body.api_key = engine.apiKey;
+
+                        const resp = await fetch(url, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(body)
+                        });
+                        if (!resp.ok) throw new Error(`LibreTranslate HTTP ${resp.status}`);
+                        const json = await resp.json();
+                        if (json.error) throw new Error(`LibreTranslate: ${json.error}`);
+
+                        const translations = Array.isArray(json.translatedText)
+                            ? json.translatedText
+                            : [json.translatedText];
+
+                        batch.forEach((seg, j) => result.push({
+                            start: seg.start,
+                            end: seg.end,
+                            text: translations[j] ?? seg.text
+                        }));
+                    } catch (err) {
+                        if (this.player.options.debug) console.warn('[AutoSub] LibreTranslate batch error', err.message);
+                        batch.forEach(seg => result.push({ ...seg }));
+                    }
+                    if (i + BATCH_SIZE < segments.length)
+                        await new Promise(r => setTimeout(r, 100));
+                }
+                return result;
+            }
 
+            const batches = [];
+            let current = [], charCount = 0;
             for (const seg of segments) {
                 if (charCount + seg.text.length > BATCH_CHARS && current.length > 0) {
-                    batches.push(current);
-                    current = [];
-                    charCount = 0;
+                    batches.push(current); current = []; charCount = 0;
                 }
                 current.push(seg);
                 charCount += seg.text.length;
@@ -927,27 +1234,17 @@
             const result = [];
             for (const batch of batches) {
                 const sourceText = batch.map(s => s.text).join(SEP);
-                const url = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(sourceText)}&langpair=${sourceLang}|${targetLang}`;
                 try {
-                    const resp = await fetch(url);
-                    const json = await resp.json();
-
-                    // Handle explicit API errors
-                    if (json.responseStatus && json.responseStatus !== 200) {
-                        if (this.player.options.debug) console.warn('[AutoSub] MyMemory API error:', json.responseDetails || json.responseStatus);
-                        batch.forEach(seg => result.push({ ...seg }));
-                        continue;
-                    }
-
-                    const translated = json.responseData?.translatedText || sourceText;
-                    const parts = translated.split('||||').map(s => s.trim().replace(/^\n+|\n+$/g, ''));
-                    batch.forEach((seg, i) => {
-                        result.push({ start: seg.start, end: seg.end, text: parts[i] || seg.text });
-                    });
-                    await new Promise(r => setTimeout(r, 120)); // rate-limit delay between batches
-                } catch (_) {
-                    batch.forEach(seg => result.push({ ...seg })); // fallback: keep original text
+                    const translated = await this._translateText(sourceText, sourceLang, normTarget);
+                    const parts = translated.split(SEP).map(s => s.trim().replace(/&amp;/g, '&'));
+                    batch.forEach((seg, i) => result.push({
+                        start: seg.start, end: seg.end, text: parts[i] ?? seg.text
+                    }));
+                } catch (err) {
+                    if (this.player.options.debug) console.warn('[AutoSub] Translation batch error', err.message);
+                    batch.forEach(seg => result.push({ ...seg }));
                 }
+                await new Promise(r => setTimeout(r, 120));
             }
             return result;
         }
@@ -958,6 +1255,7 @@
 
         _startDisplay() {
             this._stopDisplay();
+            this._applyResponsiveFontSize(); 
             this.updateInterval = setInterval(() => this._tick(), 80);
         }
 
@@ -973,7 +1271,6 @@
         _tick() {
             if (!this.subVisible) return;
 
-            // Use translated segments if available, otherwise fall back to originals
             const pool = (this.translateLang !== 'off' && this.subtitlesTrans.length > 0)
                 ? this.subtitlesTrans
                 : this.subtitles;
@@ -1010,7 +1307,6 @@
 
         _resolveMpdUrl() {
             try {
-                // Salvato sul container dal player al momento di initialize()
                 const url = this.container.dataset.mpdUrl || this.video.dataset.mpdUrl || null;
                 if (url && !url.startsWith('blob:')) return url;
             } catch (_) { }
@@ -1035,7 +1331,6 @@
             if (this.player.options.debug)
                 console.log('[AutoSub] _extractAudio — currentSrc:', this.video.currentSrc, '| adaptiveStreamingType:', this.player.adaptiveStreamingType);
 
-            // ── DASH: resolve real MPD URL via dash.js instance ───────────────────
             const mpdUrl = this._resolveMpdUrl();
             if (mpdUrl) {
                 if (this.player.options.debug) console.log('[AutoSub] DASH mode — mpdUrl:', mpdUrl);
@@ -1046,13 +1341,11 @@
                 }
             }
 
-            // ── HLS ───────────────────────────────────────────────────────────────
             const src = this.video.currentSrc || this.video.src || '';
             if (src.includes('.m3u8') || this.player.adaptiveStreamingType === 'hls') {
                 return await this._extractAudioFromCaptureStream();
             }
 
-            // ── Normal MP4 / WebM — direct fetch ─────────────────────────────────
             try { return await this._extractAudioFromFetch(); }
             catch (err) {
                 if (this.player.options.debug) console.warn('[AutoSub] Fetch strategy failed:', err.message, '— fallback to captureStream');
@@ -1070,7 +1363,6 @@
             const parser = new DOMParser();
             const mpdDoc = parser.parseFromString(mpdText, 'application/xml');
 
-            // Check for XML parse errors
             const parseErr = mpdDoc.querySelector('parsererror');
             if (parseErr) throw new Error('MPD XML parse error: ' + parseErr.textContent.slice(0, 100));
 
@@ -1090,7 +1382,6 @@
 
             this._updatePanel('Downloading audio segments (0/' + segmentUrls.length + ')...', 12);
 
-            // Download segments in parallel batches of 5
             const BATCH = 5;
             const segmentBuffers = new Array(segmentUrls.length);
 
@@ -1110,7 +1401,6 @@
                 );
             }
 
-            // Concatenate all segment buffers into one
             this._updatePanel('Decoding audio...', 30);
             const totalBytes = segmentBuffers.reduce((s, b) => s + b.byteLength, 0);
             const combined = new Uint8Array(totalBytes);
@@ -1146,13 +1436,11 @@
 
         _findAudioAdaptationSet(mpdDoc) {
             const sets = Array.from(mpdDoc.querySelectorAll('AdaptationSet'));
-            // Prefer explicit audio contentType or mimeType
             return sets.find(s =>
                 s.getAttribute('contentType') === 'audio' ||
                 (s.getAttribute('mimeType') || '').startsWith('audio') ||
                 s.querySelector('Representation[mimeType^="audio"]') !== null
             ) || sets.find(s =>
-                // Fallback: AdaptationSet that is not video
                 !(s.getAttribute('mimeType') || '').startsWith('video') &&
                 s.getAttribute('contentType') !== 'video'
             );
@@ -1171,7 +1459,6 @@
         _buildSegmentUrlList(mpdDoc, adaptationSet, representation, baseUrl) {
             const urls = [];
 
-            // ── SegmentList ──────────────────────────────────────────────────────
             const segList = representation.querySelector('SegmentList')
                 || adaptationSet.querySelector('SegmentList');
             if (segList) {
@@ -1187,7 +1474,6 @@
                 return urls;
             }
 
-            // ── SegmentTemplate ──────────────────────────────────────────────────
             const segTpl = representation.querySelector('SegmentTemplate')
                 || adaptationSet.querySelector('SegmentTemplate');
             if (segTpl) {
@@ -1222,7 +1508,6 @@
                 return urls;
             }
 
-            // ── BaseURL (single audio file) ───────────────────────────────────────
             const baseURLEl = representation.querySelector('BaseURL')
                 || adaptationSet.querySelector('BaseURL');
             if (baseURLEl) {
@@ -1240,7 +1525,6 @@
         }
 
         _parseDuration(iso) {
-            // Parse ISO 8601 duration: PT1H2M3.5S
             const m = iso.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:([\d.]+)S)?/);
             if (!m) return 0;
             return (parseFloat(m[1] || 0) * 3600) +
@@ -1314,7 +1598,6 @@
                     if (e.data.size === 0) return;
                     chunkQueue.push(e.data);
 
-                    // Estimate accumulated seconds using rough bitrate of 16 kbps (opus)
                     const totalSize = chunkQueue.reduce((s, b) => s + b.size, 0);
                     const estimatedSec = totalSize / (16000 / 8);
 
@@ -1328,7 +1611,6 @@
                 };
 
                 recorder.onstop = async () => {
-                    // Flush any remaining audio as the last chunk
                     if (chunkQueue.length > 0 && this._onAudioChunkReady) {
                         const blob = new Blob([...chunkQueue], { type: recorder.mimeType || 'audio/webm' });
                         chunkQueue.length = 0;
@@ -1340,7 +1622,6 @@
 
                 recorder.onerror = e => reject(e.error || new Error('MediaRecorder error'));
 
-                // Update capture progress based on video currentTime
                 const duration = isFinite(this.video.duration) && this.video.duration > 0
                     ? this.video.duration : null;
 
@@ -1364,10 +1645,8 @@
 
                 this.video.addEventListener('ended', stop, { once: true });
 
-                // Slice every 2s so ondataavailable fires frequently
                 recorder.start(2000);
 
-                // Resolve immediately with sentinel — actual transcription flows via callbacks
                 resolve({ _captureMode: true, stop });
             });
         }
@@ -1417,17 +1696,14 @@ self.onmessage = async function(e) {
   }
   if (type === 'transcribe') {
     try {
-      const audio  = new Float32Array(payload.audio);
-      const opts   = { return_timestamps: true, task: 'transcribe', chunk_length_s: payload.chunkSec };
-      if (payload.lang) opts.language = payload.lang;
-      const result = await transcriber(audio, opts);
-      self.postMessage({ type: 'chunk_done', payload: {
-        result, timeOffset: payload.timeOffset,
-        chunkIndex: payload.chunkIndex, totalChunks: payload.totalChunks,
-        isLast: payload.isLast
-      }});
+        const audio = new Float32Array(payload.audio);
+        const opts = { return_timestamps: true, task: 'transcribe', chunk_length_s: payload.chunkSec };
+        if (payload.lang) opts.language = payload.lang;
+        const result = await transcriber(audio, opts);
+        const detectedLang = result.language || payload.lang || null;
+        self.postMessage({ type: 'chunk_done', payload: { result, timeOffset: payload.timeOffset, chunkIndex: payload.chunkIndex, totalChunks: payload.totalChunks, isLast: payload.isLast, detectedLang } });
     } catch(err) {
-      self.postMessage({ type: 'error', payload: err.message || String(err) });
+        self.postMessage({ type: 'error', payload: err.message || String(err) });
     }
   }
 };
@@ -1455,9 +1731,7 @@ self.onmessage = async function(e) {
             );
         }
 
-        async _transcribeChunksStreaming(audioData) {
-
-            // ── CAPTURE STREAM MODE (HLS or DASH fallback) ───────────────────────
+        async _transcribeChunksStreaming(audioData, partialCache = null) {
             if (audioData?._captureMode) {
                 const SAMPLE_RATE = 16000;
                 const lang = this._resolveLanguage(this.opts.language);
@@ -1465,7 +1739,6 @@ self.onmessage = async function(e) {
 
                 if (!this.subVisible) { this.subVisible = true; this._startDisplay(); }
 
-                // Worker starts in parallel while audio is still being captured
                 const worker = this._createTranscriberWorker();
                 this._worker = worker;
 
@@ -1547,13 +1820,21 @@ self.onmessage = async function(e) {
 
                     if (type === 'chunk_done') {
                         const { result, timeOffset, isLast } = payload;
-                        const rawChunks = (result.chunks || []).map(c => {
-                            const ts0 = c.timestamp?.[0] ?? 0;
-                            const ts1 = c.timestamp?.[1] ?? ts0 + 3;
-                            return { text: (c.text || '').trim(), start: ts0 + timeOffset, end: ts1 + timeOffset };
-                        });
+
+                        let rawChunks = (result.chunks || [])
+                            .filter(c => c.text?.trim())
+                            .map(c => {
+                                const ts0 = (c.timestamp?.[0] != null) ? c.timestamp[0] : 0;
+                                const ts1 = (c.timestamp?.[1] != null) ? c.timestamp[1] : ts0 + 5;
+                                return { text: c.text.trim(), start: ts0 + timeOffset, end: ts1 + timeOffset };
+                            });
+
+                        if (rawChunks.length === 0 && result.text?.trim()) {
+                            rawChunks = [{ text: result.text.trim(), start: timeOffset, end: timeOffset + 30 }];
+                        }
+
                         this.subtitles.push(...this._normalizeChunks(rawChunks));
-                        if (this.opts.cacheEnabled) this._saveToCache(this.subtitles);
+                        if (this.opts.cacheEnabled) this._saveToCache(this.subtitles, null, null);
 
                         activeJob = false;
 
@@ -1586,15 +1867,22 @@ self.onmessage = async function(e) {
                 return promise;
             }
 
-            // ── NORMAL MODE (Float32Array from fetch or DASH segment download) ────
             const float32Audio = audioData;
             const SAMPLE_RATE = 16000;
             const CHUNK_SEC = 30;
             const chunkSize = SAMPLE_RATE * CHUNK_SEC;
             const totalChunks = Math.ceil(float32Audio.length / chunkSize);
             const lang = this._resolveLanguage(this.opts.language);
+            let detectedLang = lang || partialCache?.detectedLang || null;
             const modelId = WHISPER_MODELS[this.opts.modelSize] || WHISPER_MODELS.base;
 
+            const startChunk = (partialCache?.chunksCompleted != null && partialCache.chunksCompleted < totalChunks)
+                ? partialCache.chunksCompleted
+                : 0;
+
+            if (this.player.options.debug && startChunk > 0)
+                console.log('[AutoSub] Resuming transcription from chunk', startChunk + 1, 'of', totalChunks);
+
             if (!this.subVisible) { this.subVisible = true; this._startDisplay(); }
 
             const worker = this._createTranscriberWorker();
@@ -1619,27 +1907,68 @@ self.onmessage = async function(e) {
                     if (type === 'ready') {
                         URL.revokeObjectURL(worker._bundleURL);
                         URL.revokeObjectURL(worker._workerURL);
-                        this._updatePanel('Transcribing chunk 1 of ' + totalChunks + '...', 64);
-                        this._sendChunk(worker, float32Audio, 0, chunkSize, totalChunks, lang, CHUNK_SEC);
+                        if (this.player.options.debug) console.log('[AutoSub] Worker ready — sending chunk', startChunk + 1, 'of', totalChunks);
+                        this._updatePanel('Transcribing chunk ' + (startChunk + 1) + ' of ' + totalChunks + '...', 64);
+                        this._sendChunk(worker, float32Audio, startChunk, chunkSize, totalChunks, detectedLang, CHUNK_SEC);
                     }
 
                     if (type === 'chunk_done') {
                         const { result, timeOffset, chunkIndex } = payload;
-                        const rawChunks = (result.chunks || []).map(c => {
-                            const ts0 = c.timestamp?.[0] ?? 0;
-                            const ts1 = c.timestamp?.[1] ?? ts0 + 3;
-                            return { text: (c.text || '').trim(), start: ts0 + timeOffset, end: ts1 + timeOffset };
-                        });
-                        this.subtitles.push(...this._normalizeChunks(rawChunks));
-                        if (this.opts.cacheEnabled) this._saveToCache(this.subtitles);
+
+                        if (chunkIndex === startChunk && payload.detectedLang && !detectedLang) {
+                            detectedLang = payload.detectedLang;
+                            if (this.player.options.debug) console.log('[AutoSub] Language auto-detected:', detectedLang);
+                        }
+                        this._saveToCache(this.subtitles, chunkIndex + 1, totalChunks, detectedLang);
+
+                        let rawChunks = (result.chunks || [])
+                            .filter(c => c.text?.trim())
+                            .map(c => {
+                                const ts0 = (c.timestamp?.[0] != null) ? c.timestamp[0] : 0;
+                                const ts1 = (c.timestamp?.[1] != null) ? c.timestamp[1] : ts0 + 5;
+                                return { text: c.text.trim(), start: ts0 + timeOffset, end: ts1 + timeOffset };
+                            });
+
+                        if (rawChunks.length === 0 && result.text?.trim()) {
+                            rawChunks = [{ text: result.text.trim(), start: timeOffset, end: timeOffset + CHUNK_SEC }];
+                        }
+
+                        const normalized = this._normalizeChunks(rawChunks);
+                        this.subtitles.push(...normalized);
+
+                        this._saveToCache(this.subtitles, chunkIndex + 1, totalChunks, detectedLang);
+
+                        if (this.translateLang && this.translateLang !== 'off' && normalized.length > 0) {
+                            const currentLang = this.translateLang;
+                            this._translateBatch(normalized, currentLang).then(translated => {
+                                if (this.translateLang === currentLang) {
+                                    this.subtitlesTrans.push(...translated);
+                                    this.subtitlesTrans.sort((a, b) => a.start - b.start);
+
+                                    if (!this._transCache[currentLang]) this._transCache[currentLang] = [];
+                                    this._transCache[currentLang].push(...translated);
+                                    this._transCache[currentLang].sort((a, b) => a.start - b.start);
+                                    this._saveToCache(this.subtitles, chunkIndex + 1, totalChunks, detectedLang);
+                                }
+                            }).catch(() => {
+                                if (this.translateLang === currentLang) {
+                                    this.subtitlesTrans.push(...normalized);
+                                    this.subtitlesTrans.sort((a, b) => a.start - b.start);
+                                }
+                            });
+                        }
+
 
                         const next = chunkIndex + 1;
                         if (next < totalChunks) {
                             const pct = 64 + Math.round((next / totalChunks) * 33);
                             this._updatePanel('Transcribing chunk ' + (next + 1) + ' of ' + totalChunks + '...', pct);
-                            this._sendChunk(worker, float32Audio, next, chunkSize, totalChunks, lang, CHUNK_SEC);
+                            this._sendChunk(worker, float32Audio, next, chunkSize, totalChunks, detectedLang, CHUNK_SEC);
                         } else {
-                            worker.terminate(); this._worker = null; resolve();
+                            if (this.player.options.debug) console.log('[AutoSub] All chunks done, subtitles:', this.subtitles.length);
+                            worker.terminate(); this._worker = null;
+                            resolve();
+                            this._lastDetectedLang = detectedLang;
                         }
                     }
 
@@ -1652,6 +1981,7 @@ self.onmessage = async function(e) {
                 };
 
                 worker.postMessage({ type: 'init', payload: { modelId } });
+                if (this.player.options.debug) console.log('[AutoSub] Init sent (normal), modelId:', modelId, 'totalChunks:', totalChunks, 'startChunk:', startChunk);
             });
         }
 
@@ -1696,7 +2026,6 @@ self.onmessage = async function(e) {
                 const safe = String(this.opts.idCache).replace(/[^a-zA-Z0-9_-]/g, '_');
                 return CACHE_PREFIX + safe;
             }
-            // Use the MPD URL or player.options.src as stable key — currentSrc may be a blob URL
             const src = this._resolveMpdUrl()
                 || this.player.options?.src
                 || this.video.currentSrc
@@ -1720,18 +2049,46 @@ self.onmessage = async function(e) {
                 if (!raw) return null;
                 const parsed = JSON.parse(raw);
                 if (!Array.isArray(parsed.subtitles) || !parsed.subtitles.length) return null;
-                return parsed.subtitles;
-            } catch (_) { return null; }
+                return {
+                    subtitles: parsed.subtitles,
+                    chunksCompleted: parsed.chunksCompleted ?? null,
+                    totalChunks: parsed.totalChunks ?? null,
+                    detectedLang: parsed.detectedLang ?? null,
+                    transCache: parsed.transCache || {},
+                    isImportedSubs: parsed.isImportedSubs || false
+                };
+            } catch {
+                return null;
+            }
         }
 
-        _saveToCache(subtitles) {
+        _saveToCache(subtitles, chunksCompleted = null, totalChunks = null, detectedLang = null) {
             if (!this.opts.cacheEnabled || !subtitles.length) return;
             try {
                 const key = this._getCacheKey();
-                const data = JSON.stringify({ subtitles, savedAt: Date.now() });
-                try { localStorage.setItem(key, data); }
-                catch (_) { this._evictOldestCache(); try { localStorage.setItem(key, data); } catch (_) { } }
-            } catch (_) { }
+                const data = JSON.stringify({
+                    subtitles,
+                    chunksCompleted,
+                    totalChunks,
+                    detectedLang,
+                    transCache: this._transCache || {},
+                    isImportedSubs: this.isImportedSubs || false,
+                    savedAt: Date.now()
+                });
+                try {
+                    localStorage.setItem(key, data);
+                } catch {
+                    this._evictOldestCache();
+                    try { localStorage.setItem(key, data); } catch { /* storage full */ }
+                }
+            } catch { /* ignore */ }
+        }
+
+        _deleteCache() {
+            if (!this.opts.cacheEnabled) return;
+            try {
+                localStorage.removeItem(this._getCacheKey());
+            } catch { }
         }
 
         _evictOldestCache() {
@@ -1771,4 +2128,4 @@ self.onmessage = async function(e) {
     };
 
     register();
-})();
+})();