vidply 1.0.8 → 1.0.10

package/src/controls/TranscriptManager.js

@@ -8,6 +8,7 @@ import { TimeUtils } from '../utils/TimeUtils.js';
 import { createIconElement } from '../icons/Icons.js';
 import { i18n } from '../i18n/i18n.js';
 import { StorageManager } from '../utils/StorageManager.js';
+import { DraggableResizable } from '../utils/DraggableResizable.js';
 
 export class TranscriptManager {
   constructor(player) {
@@ -21,19 +22,8 @@ export class TranscriptManager {
     // Storage manager
     this.storage = new StorageManager('vidply');
     
-    // Dragging state
-    this.isDragging = false;
-    this.dragOffsetX = 0;
-    this.dragOffsetY = 0;
-    
-    // Resizing state
-    this.isResizing = false;
-    this.resizeDirection = null;
-    this.resizeStartX = 0;
-    this.resizeStartY = 0;
-    this.resizeStartWidth = 0;
-    this.resizeStartHeight = 0;
-    this.resizeEnabled = false;
+    // Draggable/Resizable utility
+    this.draggableResizable = null;
     
     // Settings menu state
     this.settingsMenuVisible = false;
@@ -41,17 +31,31 @@ export class TranscriptManager {
     this.settingsButton = null;
     this.settingsMenuJustOpened = false;
     
-    // Keyboard drag mode
-    this.keyboardDragMode = false;
+    // Resize mode state
+    this.resizeOptionButton = null;
+    this.resizeOptionText = null;
+    this.resizeModeIndicator = null;
+    this.resizeModeIndicatorTimeout = null;
+    this.transcriptResizeHandles = [];
+    this.liveRegion = null;
     
     // Style dialog state
     this.styleDialog = null;
     this.styleDialogVisible = false;
     this.styleDialogJustOpened = false;
     
+    // Language selector state
+    this.languageSelector = null;
+    this.currentTranscriptLanguage = null;
+    this.availableTranscriptLanguages = [];
+    this.languageSelectorHandler = null;
+    
     // Load saved preferences from localStorage
     const savedPreferences = this.storage.getTranscriptPreferences();
     
+    // Autoscroll state (default: true)
+    this.autoscrollEnabled = savedPreferences?.autoscroll !== undefined ? savedPreferences.autoscroll : true;
+    
     // Transcript styling options (with defaults, then player options, then saved preferences)
     this.transcriptStyle = {
       fontSize: savedPreferences?.fontSize || this.player.options.transcriptFontSize || '100%',
@@ -65,31 +69,33 @@ export class TranscriptManager {
     this.handlers = {
       timeupdate: () => this.updateActiveEntry(),
       resize: null,
-      mousemove: null,
-      mouseup: null,
-      touchmove: null,
-      touchend: null,
-      mousedown: null,
-      touchstart: null,
-      keydown: null,
       settingsClick: null,
       settingsKeydown: null,
       documentClick: null,
       styleDialogKeydown: null
     };
     
+    // Timeout management (for cleanup)
+    this.timeouts = new Set();
+    
     this.init();
   }
 
   init() {
+    // Set up metadata handling immediately (independent of transcript display)
+    this.setupMetadataHandlingOnLoad();
+    
     // Listen for time updates to highlight active transcript entry
     this.player.on('timeupdate', this.handlers.timeupdate);
     
     // Reposition transcript when entering/exiting fullscreen
     this.player.on('fullscreenchange', () => {
       if (this.isVisible) {
-        // Add a small delay to ensure DOM has updated after fullscreen transition
-        setTimeout(() => this.positionTranscript(), 100);
+        // Only auto-position if user hasn't manually positioned it
+        if (!this.draggableResizable || !this.draggableResizable.manuallyPositioned) {
+          // Add a small delay to ensure DOM has updated after fullscreen transition
+          this.setManagedTimeout(() => this.positionTranscript(), 100);
+        }
       }
     });
   }
@@ -112,11 +118,15 @@ export class TranscriptManager {
     if (this.transcriptWindow) {
       this.transcriptWindow.style.display = 'flex';
       this.isVisible = true;
+
+      if (this.player.controlBar && typeof this.player.controlBar.updateTranscriptButton === 'function') {
+        this.player.controlBar.updateTranscriptButton();
+      }
       
-      // Focus the settings button for keyboard accessibility
-      setTimeout(() => {
-        if (this.settingsButton) {
-          this.settingsButton.focus();
+      // Focus the header for keyboard accessibility
+      this.setManagedTimeout(() => {
+        if (this.transcriptHeader) {
+          this.transcriptHeader.focus();
         }
       }, 150);
       return;
@@ -129,13 +139,17 @@ export class TranscriptManager {
     // Show the window
     if (this.transcriptWindow) {
       this.transcriptWindow.style.display = 'flex';
-      // Re-position after showing (in case window was resized while hidden)
-      setTimeout(() => this.positionTranscript(), 0);
       
-      // Focus the settings button for keyboard accessibility
-      setTimeout(() => {
-        if (this.settingsButton) {
-          this.settingsButton.focus();
+      // Only auto-position if user hasn't manually positioned it
+      // This prevents overwriting saved positions from localStorage
+      if (!this.draggableResizable || !this.draggableResizable.manuallyPositioned) {
+        this.setManagedTimeout(() => this.positionTranscript(), 0);
+      }
+      
+      // Focus the header for keyboard accessibility
+      this.setManagedTimeout(() => {
+        if (this.transcriptHeader) {
+          this.transcriptHeader.focus();
         }
       }, 150);
     }
@@ -145,11 +159,29 @@ export class TranscriptManager {
   /**
    * Hide transcript window
    */
-  hideTranscript() {
+  hideTranscript({ focusButton = false } = {}) {
     if (this.transcriptWindow) {
       this.transcriptWindow.style.display = 'none';
       this.isVisible = false;
     }
+    if (this.draggableResizable && this.draggableResizable.pointerResizeMode) {
+      this.draggableResizable.disablePointerResizeMode();
+      this.updateResizeOptionState();
+    }
+    this.hideResizeModeIndicator();
+    this.announceLive('');
+
+    // Update transcript button state in control bar
+    if (this.player.controlBar && typeof this.player.controlBar.updateTranscriptButton === 'function') {
+      this.player.controlBar.updateTranscriptButton();
+    }
+
+    if (focusButton) {
+      const transcriptButton = this.player.controlBar?.controls?.transcript;
+      if (transcriptButton && typeof transcriptButton.focus === 'function') {
+        transcriptButton.focus();
+      }
+    }
   }
 
   /**
@@ -169,7 +201,6 @@ export class TranscriptManager {
     this.transcriptHeader = DOMUtils.createElement('div', {
       className: `${this.player.options.classPrefix}-transcript-header`,
       attributes: {
-        'aria-label': 'Drag to reposition transcript. Use arrow keys to move, Home to reset position, Escape to close.',
         'tabindex': '0'
       }
     });
@@ -184,7 +215,7 @@ export class TranscriptManager {
       className: `${this.player.options.classPrefix}-transcript-settings`,
       attributes: {
         'type': 'button',
-        'aria-label': i18n.t('transcript.settings'),
+        'aria-label': i18n.t('transcript.settingsMenu'),
         'aria-expanded': 'false'
       }
     });
@@ -224,11 +255,52 @@ export class TranscriptManager {
     this.settingsButton.addEventListener('keydown', this.handlers.settingsKeydown);
 
     const title = DOMUtils.createElement('h3', {
-      textContent: i18n.t('transcript.title')
+      textContent: `${i18n.t('transcript.title')}. ${i18n.t('transcript.dragResizePrompt')}`
+    });
+
+    // Autoscroll checkbox
+    const autoscrollLabel = DOMUtils.createElement('label', {
+      className: `${this.player.options.classPrefix}-transcript-autoscroll-label`,
+      attributes: {
+        'title': i18n.t('transcript.autoscroll')
+      }
+    });
+    
+    this.autoscrollCheckbox = DOMUtils.createElement('input', {
+      attributes: {
+        'type': 'checkbox',
+        'checked': this.autoscrollEnabled,
+        'aria-label': i18n.t('transcript.autoscroll')
+      }
+    });
+    
+    const autoscrollText = DOMUtils.createElement('span', {
+      textContent: i18n.t('transcript.autoscroll'),
+      className: `${this.player.options.classPrefix}-transcript-autoscroll-text`
+    });
+    
+    autoscrollLabel.appendChild(this.autoscrollCheckbox);
+    autoscrollLabel.appendChild(autoscrollText);
+    
+    // Handle autoscroll checkbox change
+    this.autoscrollCheckbox.addEventListener('change', (e) => {
+      this.autoscrollEnabled = e.target.checked;
+      this.saveAutoscrollPreference();
     });
 
+    this.transcriptHeader.appendChild(title);
     this.headerLeft.appendChild(this.settingsButton);
-    this.headerLeft.appendChild(title);
+    this.headerLeft.appendChild(autoscrollLabel);
+    
+    // Language selector (will be populated after tracks are loaded)
+    this.languageSelector = DOMUtils.createElement('select', {
+      className: `${this.player.options.classPrefix}-transcript-language-select`,
+      attributes: {
+        'aria-label': i18n.t('settings.language') || 'Language',
+        'style': 'display: none;' // Hidden until we detect multiple languages
+      }
+    });
+    this.headerLeft.appendChild(this.languageSelector);
 
     const closeButton = DOMUtils.createElement('button', {
       className: `${this.player.options.classPrefix}-transcript-close`,
@@ -238,7 +310,7 @@ export class TranscriptManager {
       }
     });
     closeButton.appendChild(createIconElement('close'));
-    closeButton.addEventListener('click', () => this.hideTranscript());
+    closeButton.addEventListener('click', () => this.hideTranscript({ focusButton: true }));
 
     this.transcriptHeader.appendChild(this.headerLeft);
     this.transcriptHeader.appendChild(closeButton);
@@ -251,15 +323,30 @@ export class TranscriptManager {
     this.transcriptWindow.appendChild(this.transcriptHeader);
     this.transcriptWindow.appendChild(this.transcriptContent);
 
+    this.createResizeHandles();
+
+    // Live region for announcements (screen reader feedback)
+    this.liveRegion = DOMUtils.createElement('div', {
+      className: 'vidply-sr-only',
+      attributes: {
+        'aria-live': 'polite',
+        'aria-atomic': 'true'
+      }
+    });
+    this.transcriptWindow.appendChild(this.liveRegion);
+
     // Append to player container
     this.player.container.appendChild(this.transcriptWindow);
     
-    // Position it next to the video wrapper
-    this.positionTranscript();
-    
-    // Setup drag functionality
+    // Setup drag functionality FIRST (this will restore saved position if it exists)
     this.setupDragAndDrop();
     
+    // Then position it next to the video wrapper ONLY if user hasn't manually positioned it
+    // This ensures we don't overwrite saved positions from localStorage
+    if (!this.draggableResizable || !this.draggableResizable.manuallyPositioned) {
+      this.positionTranscript();
+    }
+    
     // Setup document click handler to close settings menu and style dialog
     // DON'T add it yet - it will be added when the menu is first opened
     this.handlers.documentClick = (e) => {
@@ -297,21 +384,53 @@ export class TranscriptManager {
     // Store flag to track if handler has been added
     this.documentClickHandlerAdded = false;
     
-    // Re-position on window resize (debounced)
+    // Re-position on window resize (debounced) - but only if not manually positioned
     let resizeTimeout;
     this.handlers.resize = () => {
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => this.positionTranscript(), 100);
+      if (resizeTimeout) {
+        this.clearManagedTimeout(resizeTimeout);
+      }
+      resizeTimeout = this.setManagedTimeout(() => {
+        // Only auto-position if user hasn't manually moved it
+        if (!this.draggableResizable || !this.draggableResizable.manuallyPositioned) {
+          this.positionTranscript();
+        }
+      }, 100);
     };
     window.addEventListener('resize', this.handlers.resize);
   }
   
+  createResizeHandles() {
+    if (!this.transcriptWindow) return;
+
+    const directions = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];
+    this.transcriptResizeHandles = directions.map(direction => {
+      const handle = DOMUtils.createElement('div', {
+        className: `${this.player.options.classPrefix}-transcript-resize-handle ${this.player.options.classPrefix}-transcript-resize-${direction}`,
+        attributes: {
+          'data-direction': direction,
+          'data-vidply-managed-resize': 'true',
+          'aria-hidden': 'true'
+        }
+      });
+
+      handle.style.display = 'none';
+      this.transcriptWindow.appendChild(handle);
+      return handle;
+    });
+  }
+
   /**
    * Position transcript window next to video
    */
   positionTranscript() {
     if (!this.transcriptWindow || !this.player.videoWrapper || !this.isVisible) return;
     
+    // Don't auto-position if user has manually positioned it
+    if (this.draggableResizable && this.draggableResizable.manuallyPositioned) {
+      return;
+    }
+    
     const isMobile = window.innerWidth < 640;
     const videoRect = this.player.videoWrapper.getBoundingClientRect();
     
@@ -352,8 +471,12 @@ export class TranscriptManager {
       this.transcriptWindow.style.top = 'auto';
       this.transcriptWindow.style.maxHeight = 'calc(100vh - 180px)'; // Leave space for controls
       this.transcriptWindow.style.height = 'auto';
-      this.transcriptWindow.style.width = '400px';
-      this.transcriptWindow.style.maxWidth = '400px';
+      const fullscreenMinWidth = 260;
+      const fullscreenAvailable = Math.max(fullscreenMinWidth, window.innerWidth - 40);
+      const fullscreenDesired = parseFloat(this.transcriptWindow.style.width) || 400;
+      const fullscreenWidth = Math.max(fullscreenMinWidth, Math.min(fullscreenDesired, fullscreenAvailable));
+      this.transcriptWindow.style.width = `${fullscreenWidth}px`;
+      this.transcriptWindow.style.maxWidth = 'none';
       this.transcriptWindow.style.borderRadius = '8px';
       this.transcriptWindow.style.border = '1px solid var(--vidply-border)';
       this.transcriptWindow.style.borderTop = '';
@@ -363,16 +486,35 @@ export class TranscriptManager {
         this.player.container.appendChild(this.transcriptWindow);
       }
     } else {
-      // Desktop mode: position next to video
+      // Desktop mode: position in right side of viewport
+      const transcriptWidth = parseFloat(this.transcriptWindow.style.width) || 400;
+      const padding = 20;
+      const minWidth = 260;
+      const containerRect = this.player.container.getBoundingClientRect();
+
+      const ensureContainerPositioned = () => {
+        const computed = window.getComputedStyle(this.player.container);
+        if (computed.position === 'static') {
+          this.player.container.style.position = 'relative';
+        }
+      };
+
+      ensureContainerPositioned();
+
+      const left = (videoRect.right - containerRect.left) + padding;
+      const availableWidth = window.innerWidth - videoRect.right - padding;
+      const appliedWidth = Math.max(minWidth, Math.min(transcriptWidth, availableWidth));
+      const appliedHeight = videoRect.height;
+
       this.transcriptWindow.style.position = 'absolute';
-      this.transcriptWindow.style.left = `${videoRect.width + 8}px`;
+      this.transcriptWindow.style.left = `${left}px`;
       this.transcriptWindow.style.right = 'auto';
       this.transcriptWindow.style.bottom = 'auto';
       this.transcriptWindow.style.top = '0';
-      this.transcriptWindow.style.height = `${videoRect.height}px`;
+      this.transcriptWindow.style.height = `${appliedHeight}px`;
       this.transcriptWindow.style.maxHeight = 'none';
-      this.transcriptWindow.style.width = '400px';
-      this.transcriptWindow.style.maxWidth = '400px';
+      this.transcriptWindow.style.width = `${appliedWidth}px`;
+      this.transcriptWindow.style.maxWidth = 'none';
       this.transcriptWindow.style.borderRadius = '8px';
       this.transcriptWindow.style.border = '1px solid var(--vidply-border)';
       this.transcriptWindow.style.borderTop = '';
@@ -388,6 +530,84 @@ export class TranscriptManager {
     }
   }
 
+  /**
+   * Get available transcript languages from tracks
+   */
+  getAvailableTranscriptLanguages() {
+    const textTracks = this.player.textTracks;
+    const languages = new Map();
+    
+    // Collect all caption/subtitle tracks with their languages
+    textTracks.forEach(track => {
+      if ((track.kind === 'captions' || track.kind === 'subtitles') && track.language) {
+        if (!languages.has(track.language)) {
+          languages.set(track.language, {
+            language: track.language,
+            label: track.label || track.language,
+            track: track
+          });
+        }
+      }
+    });
+    
+    return Array.from(languages.values());
+  }
+
+  /**
+   * Update language selector dropdown
+   */
+  updateLanguageSelector() {
+    if (!this.languageSelector) return;
+    
+    this.availableTranscriptLanguages = this.getAvailableTranscriptLanguages();
+    
+    // Clear existing options
+    this.languageSelector.innerHTML = '';
+    
+    // Only show selector if there are 2+ languages
+    if (this.availableTranscriptLanguages.length < 2) {
+      this.languageSelector.style.display = 'none';
+      return;
+    }
+    
+    // Show selector and populate options
+    this.languageSelector.style.display = 'block';
+    
+    this.availableTranscriptLanguages.forEach((langInfo, index) => {
+      const option = DOMUtils.createElement('option', {
+        textContent: langInfo.label,
+        attributes: {
+          'value': langInfo.language
+        }
+      });
+      this.languageSelector.appendChild(option);
+    });
+    
+    // Set current selection
+    if (this.currentTranscriptLanguage) {
+      this.languageSelector.value = this.currentTranscriptLanguage;
+    } else if (this.availableTranscriptLanguages.length > 0) {
+      // Default to first language or active track
+      const activeTrack = this.player.textTracks.find(
+        track => (track.kind === 'captions' || track.kind === 'subtitles') && track.mode === 'showing'
+      );
+      this.currentTranscriptLanguage = activeTrack ? activeTrack.language : this.availableTranscriptLanguages[0].language;
+      this.languageSelector.value = this.currentTranscriptLanguage;
+    }
+    
+    // Remove existing change listener if any
+    if (this.languageSelectorHandler) {
+      this.languageSelector.removeEventListener('change', this.languageSelectorHandler);
+    }
+    
+    // Handle language change
+    this.languageSelectorHandler = (e) => {
+      this.currentTranscriptLanguage = e.target.value;
+      this.loadTranscriptData();
+    };
+    this.languageSelector.addEventListener('change', this.languageSelectorHandler);
+  }
+
   /**
    * Load transcript data from caption/subtitle tracks
    */
@@ -396,13 +616,39 @@ export class TranscriptManager {
     this.transcriptContent.innerHTML = '';
 
     // Get all text tracks
-    const textTracks = Array.from(this.player.element.textTracks);
+    const textTracks = this.player.textTracks;
+    
+    // Find track for selected language, or default to first available
+    let captionTrack = null;
+    if (this.currentTranscriptLanguage) {
+      captionTrack = textTracks.find(
+        track => (track.kind === 'captions' || track.kind === 'subtitles') && 
+                 track.language === this.currentTranscriptLanguage
+      );
+    }
+    
+    // Fallback to first available caption/subtitle track
+    if (!captionTrack) {
+      captionTrack = textTracks.find(
+        track => track.kind === 'captions' || track.kind === 'subtitles'
+      );
+      if (captionTrack) {
+        this.currentTranscriptLanguage = captionTrack.language;
+      }
+    }
+    
+    // Find description track matching the selected language
+    let descriptionTrack = null;
+    if (this.currentTranscriptLanguage) {
+      descriptionTrack = textTracks.find(
+        track => track.kind === 'descriptions' && track.language === this.currentTranscriptLanguage
+      );
+    }
+    // Fallback to first available description track if no match found
+    if (!descriptionTrack) {
+      descriptionTrack = textTracks.find(track => track.kind === 'descriptions');
+    }
     
-    // Find different track types
-    const captionTrack = textTracks.find(
-      track => track.kind === 'captions' || track.kind === 'subtitles'
-    );
-    const descriptionTrack = textTracks.find(track => track.kind === 'descriptions');
     const metadataTrack = textTracks.find(track => track.kind === 'metadata');
 
     // We need at least one track type
@@ -443,7 +689,7 @@ export class TranscriptManager {
       });
 
       // Fallback timeout
-      setTimeout(() => {
+      this.setManagedTimeout(() => {
         this.loadTranscriptData();
       }, 500);
       
@@ -489,28 +735,84 @@ export class TranscriptManager {
     
     // Apply current styles to newly loaded entries
     this.applyTranscriptStyles();
+    
+    // Update language selector after loading
+    this.updateLanguageSelector();
+  }
+
+  /**
+   * Setup metadata handling on player load
+   * This runs independently of transcript loading
+   */
+  setupMetadataHandlingOnLoad() {
+    // Wait for metadata to be loaded
+    const setupMetadata = () => {
+      const textTracks = this.player.textTracks;
+      const metadataTrack = textTracks.find(track => track.kind === 'metadata');
+      
+      if (metadataTrack) {
+        // Enable the metadata track so cuechange events fire
+        // Use 'hidden' mode so it doesn't display anything, but events still work
+        if (metadataTrack.mode === 'disabled') {
+          metadataTrack.mode = 'hidden';
+        }
+        
+        // Check if we already added the listener
+        if (this.metadataCueChangeHandler) {
+          metadataTrack.removeEventListener('cuechange', this.metadataCueChangeHandler);
+        }
+        
+        // Add event listener for cue changes
+        this.metadataCueChangeHandler = () => {
+          const activeCues = Array.from(metadataTrack.activeCues || []);
+          if (activeCues.length > 0) {
+            // Debug logging (can be removed in production)
+            if (this.player.options.debug) {
+              console.log('[VidPly Metadata] Active cues:', activeCues.map(c => ({
+                start: c.startTime,
+                end: c.endTime,
+                text: c.text
+              })));
+            }
+          }
+          activeCues.forEach(cue => {
+            this.handleMetadataCue(cue);
+          });
+        };
+        
+        metadataTrack.addEventListener('cuechange', this.metadataCueChangeHandler);
+        
+        // Debug: Log metadata track setup
+        if (this.player.options.debug) {
+          const cueCount = metadataTrack.cues ? metadataTrack.cues.length : 0;
+          console.log('[VidPly Metadata] Track enabled,', cueCount, 'cues available');
+        }
+      } else if (this.player.options.debug) {
+        console.warn('[VidPly Metadata] No metadata track found');
+      }
+    };
+    
+    // Try immediately
+    setupMetadata();
+    
+    // Also try after loadedmetadata event
+    this.player.on('loadedmetadata', setupMetadata);
   }
 
   /**
    * Setup metadata handling
    * Metadata cues are not displayed but can be used programmatically
+   * This is called when transcript data is loaded (for storing cues)
    */
   setupMetadataHandling() {
     if (!this.metadataCues || this.metadataCues.length === 0) {
       return;
     }
 
-    // Listen for cuechange events on the metadata track to trigger custom actions
-    const textTracks = Array.from(this.player.element.textTracks);
-    const metadataTrack = textTracks.find(track => track.kind === 'metadata');
-    
-    if (metadataTrack) {
-      metadataTrack.addEventListener('cuechange', () => {
-        const activeCues = Array.from(metadataTrack.activeCues || []);
-        activeCues.forEach(cue => {
-          this.handleMetadataCue(cue);
-        });
-      });
+    // The actual event handling is set up in setupMetadataHandlingOnLoad()
+    // This method just stores the cues for reference
+    if (this.player.options.debug) {
+      console.log('[VidPly Metadata]', this.metadataCues.length, 'cues stored from transcript load');
     }
   }
 
@@ -521,6 +823,14 @@ export class TranscriptManager {
   handleMetadataCue(cue) {
     const text = cue.text.trim();
     
+    // Debug logging
+    if (this.player.options.debug) {
+      console.log('[VidPly Metadata] Processing cue:', {
+        time: cue.startTime,
+        text: text
+      });
+    }
+    
     // Emit a generic metadata event that developers can listen to
     this.player.emit('metadata', {
       time: cue.startTime,
@@ -531,16 +841,39 @@ export class TranscriptManager {
 
     // Parse for specific commands (examples based on wwa_meta.vtt format)
     if (text.includes('PAUSE')) {
-      // Emit pause suggestion event (don't auto-pause, let developer decide)
+      // Automatically pause the video
+      if (!this.player.state.paused) {
+        if (this.player.options.debug) {
+          console.log('[VidPly Metadata] Pausing video at', cue.startTime);
+        }
+        this.player.pause();
+      }
+      // Also emit event for developers who want to listen
       this.player.emit('metadata:pause', { time: cue.startTime, text: text });
     }
 
     // Parse for focus directives
     const focusMatch = text.match(/FOCUS:([\w#-]+)/);
     if (focusMatch) {
+      const targetSelector = focusMatch[1];
+      // Automatically focus the target element
+      const targetElement = document.querySelector(targetSelector);
+      if (targetElement) {
+        if (this.player.options.debug) {
+          console.log('[VidPly Metadata] Focusing element:', targetSelector);
+        }
+        // Use setTimeout to ensure DOM is ready
+        this.setManagedTimeout(() => {
+          targetElement.focus();
+        }, 10);
+      } else if (this.player.options.debug) {
+        console.warn('[VidPly Metadata] Element not found:', targetSelector);
+      }
+      // Also emit event for developers who want to listen
       this.player.emit('metadata:focus', { 
         time: cue.startTime, 
-        target: focusMatch[1],
+        target: targetSelector,
+        element: targetElement,
         text: text 
       });
     }
@@ -548,6 +881,9 @@ export class TranscriptManager {
     // Parse for hashtag references
     const hashtags = text.match(/#[\w-]+/g);
     if (hashtags) {
+      if (this.player.options.debug) {
+        console.log('[VidPly Metadata] Hashtags found:', hashtags);
+      }
       this.player.emit('metadata:hashtags', {
         time: cue.startTime,
         hashtags: hashtags,
@@ -668,7 +1004,7 @@ export class TranscriptManager {
    * Scroll transcript window to show active entry
    */
   scrollToEntry(entryElement) {
-    if (!this.transcriptContent) return;
+    if (!this.transcriptContent || !this.autoscrollEnabled) return;
 
     const contentRect = this.transcriptContent.getBoundingClientRect();
     const entryRect = entryElement.getBoundingClientRect();
@@ -683,6 +1019,15 @@ export class TranscriptManager {
       });
     }
   }
+  
+  /**
+   * Save autoscroll preference to localStorage
+   */
+  saveAutoscrollPreference() {
+    const savedPreferences = this.storage.getTranscriptPreferences() || {};
+    savedPreferences.autoscroll = this.autoscrollEnabled;
+    this.storage.saveTranscriptPreferences(savedPreferences);
+  }
 
   /**
    * Setup drag and drop functionality
@@ -690,352 +1035,127 @@ export class TranscriptManager {
   setupDragAndDrop() {
     if (!this.transcriptHeader || !this.transcriptWindow) return;
 
-    // Create and store handler functions
-    this.handlers.mousedown = (e) => {
-      // Don't drag if clicking on close button
-      if (e.target.closest(`.${this.player.options.classPrefix}-transcript-close`)) {
-        return;
-      }
-      
-      // Don't drag if clicking on settings button
-      if (e.target.closest(`.${this.player.options.classPrefix}-transcript-settings`)) {
-        return;
-      }
-      
-      // Don't drag if clicking on settings menu
-      if (e.target.closest(`.${this.player.options.classPrefix}-transcript-settings-menu`)) {
-        return;
-      }
-      
-      // Don't drag if clicking on style dialog
-      if (e.target.closest(`.${this.player.options.classPrefix}-transcript-style-dialog`)) {
-        return;
-      }
-      
-      this.startDragging(e.clientX, e.clientY);
-      e.preventDefault();
-    };
-
-    this.handlers.mousemove = (e) => {
-      if (this.isDragging) {
-        this.drag(e.clientX, e.clientY);
-      }
-    };
-
-    this.handlers.mouseup = () => {
-      if (this.isDragging) {
-        this.stopDragging();
-      }
-    };
-
-    this.handlers.touchstart = (e) => {
-      if (e.target.closest(`.${this.player.options.classPrefix}-transcript-close`)) {
-        return;
-      }
-      
-      // Don't drag if touching settings button
-      if (e.target.closest(`.${this.player.options.classPrefix}-transcript-settings`)) {
-        return;
-      }
-      
-      // Don't drag if touching settings menu
-      if (e.target.closest(`.${this.player.options.classPrefix}-transcript-settings-menu`)) {
-        return;
-      }
-      
-      // Don't drag if touching style dialog
-      if (e.target.closest(`.${this.player.options.classPrefix}-transcript-style-dialog`)) {
-        return;
-      }
-      
-      const isMobile = window.innerWidth < 640;
-      const isFullscreen = this.player.state.fullscreen;
-      const touch = e.touches[0];
-      
-      if (isMobile && !isFullscreen) {
-        // Mobile (not fullscreen): No dragging/swiping, transcript is part of layout
-        return;
-      } else {
-        // Desktop or fullscreen: Normal dragging
-        this.startDragging(touch.clientX, touch.clientY);
-      }
-    };
+    // Check if we're on mobile and not in fullscreen (no dragging in this case)
+    const isMobile = window.innerWidth < 640;
+    const isFullscreen = this.player.state.fullscreen;
+    
+    if (isMobile && !isFullscreen) {
+      return; // No drag/resize on mobile (not fullscreen)
+    }
 
-    this.handlers.touchmove = (e) => {
-      const isMobile = window.innerWidth < 640;
-      const isFullscreen = this.player.state.fullscreen;
-      
-      if (isMobile && !isFullscreen) {
-        // Mobile (not fullscreen): No dragging/swiping
-        return;
-      } else if (this.isDragging) {
-        // Desktop or fullscreen: Normal drag
-        const touch = e.touches[0];
-        this.drag(touch.clientX, touch.clientY);
-        e.preventDefault();
+    // Create DraggableResizable utility
+    this.draggableResizable = new DraggableResizable(this.transcriptWindow, {
+      dragHandle: this.transcriptHeader,
+      resizeHandles: this.transcriptResizeHandles,
+      constrainToViewport: true,
+      classPrefix: `${this.player.options.classPrefix}-transcript`,
+      keyboardDragKey: 'd',
+      keyboardResizeKey: 'r',
+      keyboardStep: 10,
+      keyboardStepLarge: 50,
+      minWidth: 300,
+      minHeight: 200,
+      maxWidth: () => Math.max(320, window.innerWidth - 40),
+      maxHeight: () => Math.max(200, window.innerHeight - 120),
+      pointerResizeIndicatorText: i18n.t('transcript.resizeModeHint'),
+      onPointerResizeToggle: (enabled) => this.onPointerResizeModeChange(enabled),
+      onDragStart: (e) => {
+        // Don't drag if clicking on certain elements
+        const ignoreSelectors = [
+          `.${this.player.options.classPrefix}-transcript-close`,
+          `.${this.player.options.classPrefix}-transcript-settings`,
+          `.${this.player.options.classPrefix}-transcript-language-select`,
+          `.${this.player.options.classPrefix}-transcript-settings-menu`,
+          `.${this.player.options.classPrefix}-transcript-style-dialog`
+        ];
+        
+        for (const selector of ignoreSelectors) {
+          if (e.target.closest(selector)) {
+            return false; // Prevent drag
+          }
+        }
+        
+        return true; // Allow drag
       }
-    };
+    });
 
-    this.handlers.touchend = () => {
-      if (this.isDragging) {
-        // Stop dragging
-        this.stopDragging();
-      }
-    };
+    // Add custom keyboard handler for special keys (Escape, Home)
+    this.customKeyHandler = (e) => {
+      const key = e.key.toLowerCase();
+      const alreadyPrevented = e.defaultPrevented;
 
-    this.handlers.keydown = (e) => {
-      // Handle arrow keys only in keyboard drag mode
-      if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
-        if (!this.keyboardDragMode) {
-          // Not in drag mode, let other handlers deal with it
-          return;
-        }
-        
-        // In drag mode - move the window
+      if (key === 'home') {
         e.preventDefault();
         e.stopPropagation();
-        
-        const step = e.shiftKey ? 50 : 10; // Larger steps with Shift key
-        
-        // Get current position
-        let currentLeft = parseFloat(this.transcriptWindow.style.left) || 0;
-        let currentTop = parseFloat(this.transcriptWindow.style.top) || 0;
-        
-        // If window is still centered with transform, convert to absolute position first
-        const computedStyle = window.getComputedStyle(this.transcriptWindow);
-        if (computedStyle.transform !== 'none') {
-          const rect = this.transcriptWindow.getBoundingClientRect();
-          currentLeft = rect.left;
-          currentTop = rect.top;
-          this.transcriptWindow.style.transform = 'none';
-          this.transcriptWindow.style.left = `${currentLeft}px`;
-          this.transcriptWindow.style.top = `${currentTop}px`;
-        }
-        
-        // Calculate new position based on arrow key
-        let newX = currentLeft;
-        let newY = currentTop;
-
-        switch(e.key) {
-          case 'ArrowLeft':
-            newX -= step;
-            break;
-          case 'ArrowRight':
-            newX += step;
-            break;
-          case 'ArrowUp':
-            newY -= step;
-            break;
-          case 'ArrowDown':
-            newY += step;
-            break;
+        if (this.draggableResizable) {
+          if (this.draggableResizable.pointerResizeMode) {
+            this.draggableResizable.disablePointerResizeMode();
+          }
+          this.draggableResizable.manuallyPositioned = false;
+          this.positionTranscript();
+          this.updateResizeOptionState();
+          this.announceLive(i18n.t('transcript.positionReset'));
         }
-
-        // Set new position directly
-        this.transcriptWindow.style.left = `${newX}px`;
-        this.transcriptWindow.style.top = `${newY}px`;
         return;
       }
       
-      // Handle other special keys
-      if (e.key === 'Home') {
+      if (key === 'r') {
+        if (alreadyPrevented) {
+          return;
+        }
         e.preventDefault();
         e.stopPropagation();
-        this.resetPosition();
+        const enabled = this.toggleResizeMode();
+        if (enabled) {
+          this.transcriptWindow.focus();
+        }
         return;
       }
       
-      if (e.key === 'Escape') {
+      if (key === 'escape') {
         e.preventDefault();
         e.stopPropagation();
+        if (this.draggableResizable && this.draggableResizable.pointerResizeMode) {
+          this.draggableResizable.disablePointerResizeMode();
+          return;
+        }
         if (this.styleDialogVisible) {
-          // Close style dialog first
           this.hideStyleDialog();
-        } else if (this.keyboardDragMode) {
-          // Exit drag mode
-          this.disableKeyboardDragMode();
+        } else if (this.draggableResizable && this.draggableResizable.keyboardDragMode) {
+          this.draggableResizable.disableKeyboardDragMode();
+          this.announceLive(i18n.t('transcript.dragModeDisabled'));
         } else if (this.settingsMenuVisible) {
-          // Close settings menu
           this.hideSettingsMenu();
         } else {
-          // Close transcript
-          this.hideTranscript();
+          this.hideTranscript({ focusButton: true });
         }
         return;
       }
     };
-
-    // Add event listeners using stored handlers
-    this.transcriptHeader.addEventListener('mousedown', this.handlers.mousedown);
-    document.addEventListener('mousemove', this.handlers.mousemove);
-    document.addEventListener('mouseup', this.handlers.mouseup);
     
-    this.transcriptHeader.addEventListener('touchstart', this.handlers.touchstart);
-    document.addEventListener('touchmove', this.handlers.touchmove);
-    document.addEventListener('touchend', this.handlers.touchend);
-    
-    this.transcriptHeader.addEventListener('keydown', this.handlers.keydown);
-  }
-
-  /**
-   * Start dragging
-   */
-  startDragging(clientX, clientY) {
-    // Get current rendered position (this is where it actually appears on screen)
-    const rect = this.transcriptWindow.getBoundingClientRect();
-    
-    // Get the parent container position (player container)
-    const containerRect = this.player.container.getBoundingClientRect();
-    
-    // Calculate position RELATIVE to container (not viewport)
-    const relativeLeft = rect.left - containerRect.left;
-    const relativeTop = rect.top - containerRect.top;
-    
-    // If window is centered with transform, convert to absolute position
-    const computedStyle = window.getComputedStyle(this.transcriptWindow);
-    if (computedStyle.transform !== 'none') {
-      // Remove transform and set position relative to container
-      this.transcriptWindow.style.transform = 'none';
-      this.transcriptWindow.style.left = `${relativeLeft}px`;
-      this.transcriptWindow.style.top = `${relativeTop}px`;
-    }
-    
-    // Calculate offset based on viewport coordinates (where user clicked)
-    this.dragOffsetX = clientX - rect.left;
-    this.dragOffsetY = clientY - rect.top;
-    
-    this.isDragging = true;
-    this.transcriptWindow.classList.add(`${this.player.options.classPrefix}-transcript-dragging`);
-    document.body.style.cursor = 'grabbing';
-    document.body.style.userSelect = 'none';
+    this.transcriptWindow.addEventListener('keydown', this.customKeyHandler);
   }
 
-  /**
-   * Perform drag
-   */
-  drag(clientX, clientY) {
-    if (!this.isDragging) return;
-
-    // Calculate new viewport position based on mouse position minus the offset
-    const newViewportX = clientX - this.dragOffsetX;
-    const newViewportY = clientY - this.dragOffsetY;
-    
-    // Convert to position relative to container
-    const containerRect = this.player.container.getBoundingClientRect();
-    const newX = newViewportX - containerRect.left;
-    const newY = newViewportY - containerRect.top;
-    
-    // During drag, set position relative to container
-    this.transcriptWindow.style.left = `${newX}px`;
-    this.transcriptWindow.style.top = `${newY}px`;
-  }
-
-  /**
-   * Stop dragging
-   */
-  stopDragging() {
-    this.isDragging = false;
-    this.transcriptWindow.classList.remove(`${this.player.options.classPrefix}-transcript-dragging`);
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
-  }
-
-  /**
-   * Set window position with boundary constraints
-   */
-  setPosition(x, y) {
-    const rect = this.transcriptWindow.getBoundingClientRect();
-    
-    // Use document dimensions for fixed positioning
-    const viewportWidth = document.documentElement.clientWidth;
-    const viewportHeight = document.documentElement.clientHeight;
-    
-    // Very relaxed boundaries - allow window to go mostly off-screen
-    // Just keep a small part visible so user can always drag it back
-    const minVisible = 100; // Keep at least 100px visible
-    const minX = -(rect.width - minVisible);  // Can go way off-screen to the left
-    const minY = -(rect.height - minVisible); // Can go way off-screen to the top
-    const maxX = viewportWidth - minVisible;  // Can go way off-screen to the right
-    const maxY = viewportHeight - minVisible; // Can go way off-screen to the bottom
-    
-    // Clamp position to boundaries (very loose)
-    x = Math.max(minX, Math.min(x, maxX));
-    y = Math.max(minY, Math.min(y, maxY));
-    
-    this.transcriptWindow.style.left = `${x}px`;
-    this.transcriptWindow.style.top = `${y}px`;
-    this.transcriptWindow.style.transform = 'none';
-  }
-
-  /**
-   * Reset position to center
-   */
-  resetPosition() {
-    this.transcriptWindow.style.left = '50%';
-    this.transcriptWindow.style.top = '50%';
-    this.transcriptWindow.style.transform = 'translate(-50%, -50%)';
-  }
 
   /**
    * Toggle keyboard drag mode
    */
   toggleKeyboardDragMode() {
-    if (this.keyboardDragMode) {
-      this.disableKeyboardDragMode();
-    } else {
-      this.enableKeyboardDragMode();
-    }
-  }
-
-  /**
-   * Enable keyboard drag mode
-   */
-  enableKeyboardDragMode() {
-    this.keyboardDragMode = true;
-    this.transcriptWindow.classList.add(`${this.player.options.classPrefix}-transcript-keyboard-drag`);
-    
-    // Update settings button aria label
-    if (this.settingsButton) {
-      this.settingsButton.setAttribute('aria-label', 'Keyboard drag mode active. Use arrow keys to move window. Press D or Escape to exit.');
-    }
-    
-    // Add visual indicator
-    const indicator = DOMUtils.createElement('div', {
-      className: `${this.player.options.classPrefix}-transcript-drag-indicator`,
-      textContent: i18n.t('transcript.keyboardDragActive')
-    });
-    this.transcriptHeader.appendChild(indicator);
-    
-    // Hide settings menu if open
-    if (this.settingsMenuVisible) {
-      this.hideSettingsMenu();
-    }
-    
-    // Focus the header for keyboard navigation
-    this.transcriptHeader.focus();
-  }
-
-  /**
-   * Disable keyboard drag mode
-   */
-  disableKeyboardDragMode() {
-    this.keyboardDragMode = false;
-    this.transcriptWindow.classList.remove(`${this.player.options.classPrefix}-transcript-keyboard-drag`);
-    
-    // Update settings button aria label
-    if (this.settingsButton) {
-      this.settingsButton.setAttribute('aria-label', 'Transcript settings. Press Enter to open menu, or D to enable drag mode');
-    }
-    
-    // Remove visual indicator
-    const indicator = this.transcriptHeader.querySelector(`.${this.player.options.classPrefix}-transcript-drag-indicator`);
-    if (indicator) {
-      indicator.remove();
-    }
-    
-    // Focus back to settings button
-    if (this.settingsButton) {
-      this.settingsButton.focus();
+    if (this.draggableResizable) {
+      const wasEnabled = this.draggableResizable.keyboardDragMode;
+      this.draggableResizable.toggleKeyboardDragMode();
+      const isEnabled = this.draggableResizable.keyboardDragMode;
+      if (!wasEnabled && isEnabled) {
+        this.enableMoveMode();
+      }
+      
+      // Hide settings menu if open
+      if (this.settingsMenuVisible) {
+        this.hideSettingsMenu();
+      }
+      
+      // Focus the window for keyboard navigation
+      this.transcriptWindow.focus();
     }
   }
 
@@ -1071,6 +1191,16 @@ export class TranscriptManager {
     if (this.settingsMenu) {
       this.settingsMenu.style.display = 'block';
       this.settingsMenuVisible = true;
+      if (this.settingsButton) {
+        this.settingsButton.setAttribute('aria-expanded', 'true');
+      }
+      this.updateResizeOptionState();
+      setTimeout(() => {
+        const firstItem = this.settingsMenu.querySelector(`.${this.player.options.classPrefix}-transcript-settings-item`);
+        if (firstItem) {
+          firstItem.focus();
+        }
+      }, 0);
       return;
     }
     // Create settings menu
@@ -1126,19 +1256,38 @@ export class TranscriptManager {
       className: `${this.player.options.classPrefix}-transcript-settings-item`,
       attributes: {
         'type': 'button',
-        'aria-label': i18n.t('transcript.resizeWindow')
+        'aria-label': i18n.t('transcript.resizeWindow'),
+        'aria-pressed': 'false'
       }
     });
     const resizeIcon = createIconElement('resize');
     const resizeText = DOMUtils.createElement('span', {
+      className: `${this.player.options.classPrefix}-transcript-settings-text`,
       textContent: i18n.t('transcript.resizeWindow')
     });
     resizeOption.appendChild(resizeIcon);
     resizeOption.appendChild(resizeText);
-    resizeOption.addEventListener('click', () => {
-      this.toggleResizeMode();
-      this.hideSettingsMenu();
+    resizeOption.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      
+      const enabled = this.toggleResizeMode({ focus: false });
+      
+      if (enabled) {
+        this.hideSettingsMenu({ focusButton: false });
+        // Focus transcript window after handles appear
+        this.setManagedTimeout(() => {
+          if (this.transcriptWindow) {
+            this.transcriptWindow.focus();
+          }
+        }, 20);
+      } else {
+        this.hideSettingsMenu({ focusButton: true });
+      }
     });
+    this.resizeOptionButton = resizeOption;
+    this.resizeOptionText = resizeText;
+    this.updateResizeOptionState();
 
     // Close option
     const closeOption = DOMUtils.createElement('button', {
@@ -1178,6 +1327,7 @@ export class TranscriptManager {
     if (this.settingsButton) {
       this.settingsButton.setAttribute('aria-expanded', 'true');
     }
+    this.updateResizeOptionState();
     
     // Focus first menu item
     setTimeout(() => {
@@ -1191,7 +1341,7 @@ export class TranscriptManager {
   /**
    * Hide settings menu
    */
-  hideSettingsMenu() {
+  hideSettingsMenu({ focusButton = true } = {}) {
     if (this.settingsMenu) {
       this.settingsMenu.style.display = 'none';
       this.settingsMenuVisible = false;
@@ -1200,8 +1350,10 @@ export class TranscriptManager {
       // Update aria-expanded
       if (this.settingsButton) {
         this.settingsButton.setAttribute('aria-expanded', 'false');
-        // Return focus to settings button
-        this.settingsButton.focus();
+        if (focusButton) {
+          // Return focus to settings button
+          this.settingsButton.focus();
+        }
       }
     }
   }
@@ -1210,6 +1362,8 @@ export class TranscriptManager {
    * Enable move mode (gives visual feedback)
    */
   enableMoveMode() {
+    this.hideResizeModeIndicator();
+
     // Add visual feedback for move mode
     this.transcriptWindow.classList.add(`${this.player.options.classPrefix}-transcript-move-mode`);
     
@@ -1232,193 +1386,82 @@ export class TranscriptManager {
   /**
    * Toggle resize mode
    */
-  toggleResizeMode() {
-    this.resizeEnabled = !this.resizeEnabled;
-    
-    if (this.resizeEnabled) {
-      this.enableResizeHandles();
-    } else {
-      this.disableResizeHandles();
+  toggleResizeMode({ focus = true } = {}) {
+    if (!this.draggableResizable) {
+      return false;
     }
-  }
-
-  /**
-   * Enable resize handles
-   */
-  enableResizeHandles() {
-    if (!this.transcriptWindow) return;
-
-    // Add resize handles if they don't exist
-    const directions = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];
-    
-    directions.forEach(direction => {
-      const handle = DOMUtils.createElement('div', {
-        className: `${this.player.options.classPrefix}-transcript-resize-handle ${this.player.options.classPrefix}-transcript-resize-${direction}`,
-        attributes: {
-          'data-direction': direction
-        }
-      });
-
-      handle.addEventListener('mousedown', (e) => this.startResize(e, direction));
-      handle.addEventListener('touchstart', (e) => this.startResize(e.touches[0], direction));
 
-      this.transcriptWindow.appendChild(handle);
-    });
-
-    this.transcriptWindow.classList.add(`${this.player.options.classPrefix}-transcript-resizable`);
-
-    // Setup resize event handlers
-    this.handlers.resizeMove = (e) => {
-      if (this.isResizing) {
-        this.performResize(e.clientX, e.clientY);
-      }
-    };
-
-    this.handlers.resizeEnd = () => {
-      if (this.isResizing) {
-        this.stopResize();
-      }
-    };
-
-    this.handlers.resizeTouchMove = (e) => {
-      if (this.isResizing) {
-        this.performResize(e.touches[0].clientX, e.touches[0].clientY);
-        e.preventDefault();
-      }
-    };
+    if (this.draggableResizable.pointerResizeMode) {
+      this.draggableResizable.disablePointerResizeMode({ focus });
+      return false;
+    }
 
-    document.addEventListener('mousemove', this.handlers.resizeMove);
-    document.addEventListener('mouseup', this.handlers.resizeEnd);
-    document.addEventListener('touchmove', this.handlers.resizeTouchMove);
-    document.addEventListener('touchend', this.handlers.resizeEnd);
+    this.draggableResizable.enablePointerResizeMode({ focus });
+    return true;
   }
 
-  /**
-   * Disable resize handles
-   */
-  disableResizeHandles() {
-    if (!this.transcriptWindow) return;
-
-    // Remove all resize handles
-    const handles = this.transcriptWindow.querySelectorAll(`.${this.player.options.classPrefix}-transcript-resize-handle`);
-    handles.forEach(handle => handle.remove());
+  updateResizeOptionState() {
+    if (!this.resizeOptionButton) {
+      return;
+    }
+    
+    const isEnabled = !!(this.draggableResizable && this.draggableResizable.pointerResizeMode);
+    const label = isEnabled
+      ? (i18n.t('transcript.disableResizeWindow') || 'Disable Resize Mode')
+      : i18n.t('transcript.resizeWindow');
 
-    this.transcriptWindow.classList.remove(`${this.player.options.classPrefix}-transcript-resizable`);
+    this.resizeOptionButton.setAttribute('aria-pressed', isEnabled ? 'true' : 'false');
+    this.resizeOptionButton.setAttribute('aria-label', label);
+    this.resizeOptionButton.setAttribute('title', label);
 
-    // Remove resize event handlers
-    if (this.handlers.resizeMove) {
-      document.removeEventListener('mousemove', this.handlers.resizeMove);
+    if (this.resizeOptionText) {
+      this.resizeOptionText.textContent = label;
     }
-    if (this.handlers.resizeEnd) {
-      document.removeEventListener('mouseup', this.handlers.resizeEnd);
-    }
-    if (this.handlers.resizeTouchMove) {
-      document.removeEventListener('touchmove', this.handlers.resizeTouchMove);
-    }
-    document.removeEventListener('touchend', this.handlers.resizeEnd);
   }
 
-  /**
-   * Start resizing
-   */
-  startResize(e, direction) {
-    e.stopPropagation();
-    e.preventDefault();
-
-    this.isResizing = true;
-    this.resizeDirection = direction;
-    this.resizeStartX = e.clientX;
-    this.resizeStartY = e.clientY;
-
-    const rect = this.transcriptWindow.getBoundingClientRect();
-    this.resizeStartWidth = rect.width;
-    this.resizeStartHeight = rect.height;
-
-    this.transcriptWindow.classList.add(`${this.player.options.classPrefix}-transcript-resizing`);
-    document.body.style.cursor = this.getResizeCursor(direction);
-    document.body.style.userSelect = 'none';
-  }
+  showResizeModeIndicator() {
+    if (!this.transcriptHeader) {
+      return;
+    }
 
-  /**
-   * Perform resize
-   */
-  performResize(clientX, clientY) {
-    if (!this.isResizing) return;
+    this.hideResizeModeIndicator();
 
-    const deltaX = clientX - this.resizeStartX;
-    const deltaY = clientY - this.resizeStartY;
+    const indicator = DOMUtils.createElement('div', {
+      className: `${this.player.options.classPrefix}-transcript-resize-tooltip`,
+      textContent: i18n.t('transcript.resizeModeHint') || 'Resize handles enabled. Drag edges or corners to adjust. Press Esc or R to exit.'
+    });
 
-    let newWidth = this.resizeStartWidth;
-    let newHeight = this.resizeStartHeight;
+    this.transcriptHeader.appendChild(indicator);
+    this.resizeModeIndicator = indicator;
 
-    const direction = this.resizeDirection;
+    this.resizeModeIndicatorTimeout = this.setManagedTimeout(() => {
+      this.hideResizeModeIndicator();
+    }, 3000);
+  }
 
-    // Calculate new dimensions based on direction
-    if (direction.includes('e')) {
-      newWidth = this.resizeStartWidth + deltaX;
-    }
-    if (direction.includes('w')) {
-      newWidth = this.resizeStartWidth - deltaX;
-    }
-    if (direction.includes('s')) {
-      newHeight = this.resizeStartHeight + deltaY;
-    }
-    if (direction.includes('n')) {
-      newHeight = this.resizeStartHeight - deltaY;
+  hideResizeModeIndicator() {
+    if (this.resizeModeIndicatorTimeout) {
+      this.clearManagedTimeout(this.resizeModeIndicatorTimeout);
+      this.resizeModeIndicatorTimeout = null;
     }
 
-    // Apply minimum and maximum constraints
-    const minWidth = 300;
-    const minHeight = 200;
-    const maxWidth = window.innerWidth - 40;
-    const maxHeight = window.innerHeight - 40;
-
-    newWidth = Math.max(minWidth, Math.min(newWidth, maxWidth));
-    newHeight = Math.max(minHeight, Math.min(newHeight, maxHeight));
-
-    // Apply new dimensions
-    this.transcriptWindow.style.width = `${newWidth}px`;
-    this.transcriptWindow.style.height = `${newHeight}px`;
-    this.transcriptWindow.style.maxWidth = `${newWidth}px`;
-    this.transcriptWindow.style.maxHeight = `${newHeight}px`;
-
-    // Adjust position if resizing from top or left
-    if (direction.includes('w')) {
-      const currentLeft = parseFloat(this.transcriptWindow.style.left) || 0;
-      this.transcriptWindow.style.left = `${currentLeft + (this.resizeStartWidth - newWidth)}px`;
-    }
-    if (direction.includes('n')) {
-      const currentTop = parseFloat(this.transcriptWindow.style.top) || 0;
-      this.transcriptWindow.style.top = `${currentTop + (this.resizeStartHeight - newHeight)}px`;
+    if (this.resizeModeIndicator && this.resizeModeIndicator.parentNode) {
+      this.resizeModeIndicator.remove();
     }
-  }
 
-  /**
-   * Stop resizing
-   */
-  stopResize() {
-    this.isResizing = false;
-    this.resizeDirection = null;
-    this.transcriptWindow.classList.remove(`${this.player.options.classPrefix}-transcript-resizing`);
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
+    this.resizeModeIndicator = null;
   }
 
-  /**
-   * Get cursor style for resize direction
-   */
-  getResizeCursor(direction) {
-    const cursors = {
-      'n': 'ns-resize',
-      's': 'ns-resize',
-      'e': 'ew-resize',
-      'w': 'ew-resize',
-      'ne': 'nesw-resize',
-      'nw': 'nwse-resize',
-      'se': 'nwse-resize',
-      'sw': 'nesw-resize'
-    };
-    return cursors[direction] || 'default';
+  onPointerResizeModeChange(enabled) {
+    this.updateResizeOptionState();
+
+    if (enabled) {
+      this.showResizeModeIndicator();
+      this.announceLive(i18n.t('transcript.resizeModeEnabled'));
+    } else {
+      this.hideResizeModeIndicator();
+      this.announceLive(i18n.t('transcript.resizeModeDisabled'));
+    }
   }
 
   /**
@@ -1718,35 +1761,58 @@ export class TranscriptManager {
     });
   }
 
+  /**
+   * Set a managed timeout that will be cleaned up on destroy
+   * @param {Function} callback - Callback function
+   * @param {number} delay - Delay in milliseconds
+   * @returns {number} Timeout ID
+   */
+  setManagedTimeout(callback, delay) {
+    const timeoutId = setTimeout(() => {
+      this.timeouts.delete(timeoutId);
+      callback();
+    }, delay);
+    this.timeouts.add(timeoutId);
+    return timeoutId;
+  }
+
+  /**
+   * Clear a managed timeout
+   * @param {number} timeoutId - Timeout ID to clear
+   */
+  clearManagedTimeout(timeoutId) {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      this.timeouts.delete(timeoutId);
+    }
+  }
+
   /**
    * Cleanup
    */
   destroy() {
-    // Disable modes if active
-    if (this.resizeEnabled) {
-      this.disableResizeHandles();
+    this.hideResizeModeIndicator();
+    
+    // Destroy draggableResizable utility
+    if (this.draggableResizable) {
+      if (this.draggableResizable.pointerResizeMode) {
+        this.draggableResizable.disablePointerResizeMode();
+        this.updateResizeOptionState();
+      }
+      this.draggableResizable.destroy();
+      this.draggableResizable = null;
     }
-    if (this.keyboardDragMode) {
-      this.disableKeyboardDragMode();
+    
+    // Remove custom key handler
+    if (this.transcriptWindow && this.customKeyHandler) {
+      this.transcriptWindow.removeEventListener('keydown', this.customKeyHandler);
+      this.customKeyHandler = null;
     }
 
     // Remove timeupdate listener from player
     if (this.handlers.timeupdate) {
       this.player.off('timeupdate', this.handlers.timeupdate);
     }
-
-    // Remove drag event listeners
-    if (this.transcriptHeader) {
-      if (this.handlers.mousedown) {
-        this.transcriptHeader.removeEventListener('mousedown', this.handlers.mousedown);
-      }
-      if (this.handlers.touchstart) {
-        this.transcriptHeader.removeEventListener('touchstart', this.handlers.touchstart);
-      }
-      if (this.handlers.keydown) {
-        this.transcriptHeader.removeEventListener('keydown', this.handlers.keydown);
-      }
-    }
     
     // Remove settings button event listeners
     if (this.settingsButton) {
@@ -1763,19 +1829,7 @@ export class TranscriptManager {
       this.styleDialog.removeEventListener('keydown', this.handlers.styleDialogKeydown);
     }
 
-    // Remove document-level listeners
-    if (this.handlers.mousemove) {
-      document.removeEventListener('mousemove', this.handlers.mousemove);
-    }
-    if (this.handlers.mouseup) {
-      document.removeEventListener('mouseup', this.handlers.mouseup);
-    }
-    if (this.handlers.touchmove) {
-      document.removeEventListener('touchmove', this.handlers.touchmove);
-    }
-    if (this.handlers.touchend) {
-      document.removeEventListener('touchend', this.handlers.touchend);
-    }
+    // Remove document click listener
     if (this.handlers.documentClick) {
       document.removeEventListener('click', this.handlers.documentClick);
     }
@@ -1785,6 +1839,10 @@ export class TranscriptManager {
       window.removeEventListener('resize', this.handlers.resize);
     }
 
+    // Cleanup all managed timeouts
+    this.timeouts.forEach(timeoutId => clearTimeout(timeoutId));
+    this.timeouts.clear();
+
     // Clear handlers
     this.handlers = null;
 
@@ -1799,5 +1857,14 @@ export class TranscriptManager {
     this.transcriptEntries = [];
     this.settingsMenu = null;
     this.styleDialog = null;
+    this.transcriptResizeHandles = [];
+    this.resizeOptionButton = null;
+    this.resizeOptionText = null;
+    this.liveRegion = null;
+  }
+
+  announceLive(message) {
+    if (!this.liveRegion) return;
+    this.liveRegion.textContent = message || '';
   }
 }