vidply 1.0.8 → 1.0.9

package/dist/vidply.min.meta.json

@@ -11,7 +11,7 @@
       "format": "esm"
     },
     "src/i18n/translations.js": {
-      "bytes": 22406,
+      "bytes": 22623,
       "imports": [],
       "format": "esm"
     },
@@ -100,7 +100,7 @@
       "format": "esm"
     },
     "src/controls/TranscriptManager.js": {
-      "bytes": 59186,
+      "bytes": 69891,
       "imports": [
         {
           "path": "src/utils/DOMUtils.js",
@@ -157,7 +157,7 @@
       "format": "esm"
     },
     "src/core/Player.js": {
-      "bytes": 115999,
+      "bytes": 139352,
       "imports": [
         {
           "path": "src/utils/EventEmitter.js",
@@ -279,7 +279,7 @@
           "bytesInOutput": 1581
         },
         "src/i18n/translations.js": {
-          "bytesInOutput": 19604
+          "bytesInOutput": 19801
         },
         "src/i18n/i18n.js": {
           "bytesInOutput": 720
@@ -303,10 +303,10 @@
           "bytesInOutput": 3738
         },
         "src/controls/TranscriptManager.js": {
-          "bytesInOutput": 31200
+          "bytesInOutput": 36165
         },
         "src/core/Player.js": {
-          "bytesInOutput": 38349
+          "bytesInOutput": 47003
         },
         "src/renderers/YouTubeRenderer.js": {
           "bytesInOutput": 4140
@@ -321,7 +321,7 @@
           "bytesInOutput": 8100
         }
       },
-      "bytes": 177717
+      "bytes": 191533
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vidply",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Universal, accessible video & audio player with ES6 modules",
   "type": "module",
   "main": "dist/vidply.js",

package/src/controls/TranscriptManager.js

@@ -49,9 +49,18 @@ export class TranscriptManager {
     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%',
@@ -78,10 +87,16 @@ export class TranscriptManager {
       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);
     
@@ -89,7 +104,7 @@ export class TranscriptManager {
     this.player.on('fullscreenchange', () => {
       if (this.isVisible) {
         // Add a small delay to ensure DOM has updated after fullscreen transition
-        setTimeout(() => this.positionTranscript(), 100);
+        this.setManagedTimeout(() => this.positionTranscript(), 100);
       }
     });
   }
@@ -114,7 +129,7 @@ export class TranscriptManager {
       this.isVisible = true;
       
       // Focus the settings button for keyboard accessibility
-      setTimeout(() => {
+      this.setManagedTimeout(() => {
         if (this.settingsButton) {
           this.settingsButton.focus();
         }
@@ -130,10 +145,10 @@ export class TranscriptManager {
     if (this.transcriptWindow) {
       this.transcriptWindow.style.display = 'flex';
       // Re-position after showing (in case window was resized while hidden)
-      setTimeout(() => this.positionTranscript(), 0);
+      this.setManagedTimeout(() => this.positionTranscript(), 0);
       
       // Focus the settings button for keyboard accessibility
-      setTimeout(() => {
+      this.setManagedTimeout(() => {
         if (this.settingsButton) {
           this.settingsButton.focus();
         }
@@ -227,8 +242,49 @@ export class TranscriptManager {
       textContent: i18n.t('transcript.title')
     });
 
+    // 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.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`,
@@ -300,8 +356,10 @@ export class TranscriptManager {
     // Re-position on window resize (debounced)
     let resizeTimeout;
     this.handlers.resize = () => {
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => this.positionTranscript(), 100);
+      if (resizeTimeout) {
+        this.clearManagedTimeout(resizeTimeout);
+      }
+      resizeTimeout = this.setManagedTimeout(() => this.positionTranscript(), 100);
     };
     window.addEventListener('resize', this.handlers.resize);
   }
@@ -388,6 +446,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 +532,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 +605,7 @@ export class TranscriptManager {
       });
 
       // Fallback timeout
-      setTimeout(() => {
+      this.setManagedTimeout(() => {
         this.loadTranscriptData();
       }, 500);
       
@@ -489,28 +651,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 +739,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 +757,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 +797,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 +920,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 +935,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
@@ -702,6 +963,11 @@ export class TranscriptManager {
         return;
       }
       
+      // Don't drag if clicking on language selector
+      if (e.target.closest(`.${this.player.options.classPrefix}-transcript-language-select`)) {
+        return;
+      }
+      
       // Don't drag if clicking on settings menu
       if (e.target.closest(`.${this.player.options.classPrefix}-transcript-settings-menu`)) {
         return;
@@ -738,6 +1004,11 @@ export class TranscriptManager {
         return;
       }
       
+      // Don't drag if touching language selector
+      if (e.target.closest(`.${this.player.options.classPrefix}-transcript-language-select`)) {
+        return;
+      }
+      
       // Don't drag if touching settings menu
       if (e.target.closest(`.${this.player.options.classPrefix}-transcript-settings-menu`)) {
         return;
@@ -1718,6 +1989,32 @@ 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
    */
@@ -1785,6 +2082,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;