vidply 1.0.20 → 1.0.21

package/dist/vidply.min.meta.json

@@ -11,27 +11,27 @@
       "format": "esm"
     },
     "src/i18n/languages/en.js": {
-      "bytes": 6319,
+      "bytes": 6566,
       "imports": [],
       "format": "esm"
     },
     "src/i18n/languages/de.js": {
-      "bytes": 7774,
+      "bytes": 8063,
       "imports": [],
       "format": "esm"
     },
     "src/i18n/languages/es.js": {
-      "bytes": 7346,
+      "bytes": 7619,
       "imports": [],
       "format": "esm"
     },
     "src/i18n/languages/fr.js": {
-      "bytes": 7560,
+      "bytes": 7826,
       "imports": [],
       "format": "esm"
     },
     "src/i18n/languages/ja.js": {
-      "bytes": 7972,
+      "bytes": 8251,
       "imports": [],
       "format": "esm"
     },
@@ -99,7 +99,7 @@
       "format": "esm"
     },
     "src/controls/ControlBar.js": {
-      "bytes": 129888,
+      "bytes": 129940,
       "imports": [
         {
           "path": "src/utils/DOMUtils.js",
@@ -269,22 +269,22 @@
       "format": "esm"
     },
     "src/renderers/HTML5Renderer.js": {
-      "bytes": 8660,
+      "bytes": 9169,
       "imports": [],
       "format": "esm"
     },
     "src/renderers/YouTubeRenderer.js": {
-      "bytes": 7186,
+      "bytes": 7465,
       "imports": [],
       "format": "esm"
     },
     "src/renderers/VimeoRenderer.js": {
-      "bytes": 6699,
+      "bytes": 6978,
       "imports": [],
       "format": "esm"
     },
     "src/renderers/HLSRenderer.js": {
-      "bytes": 8757,
+      "bytes": 9492,
       "imports": [
         {
           "path": "src/renderers/HTML5Renderer.js",
@@ -295,7 +295,7 @@
       "format": "esm"
     },
     "src/core/Player.js": {
-      "bytes": 205467,
+      "bytes": 208826,
       "imports": [
         {
           "path": "src/utils/EventEmitter.js",
@@ -386,7 +386,7 @@
       "format": "esm"
     },
     "src/features/PlaylistManager.js": {
-      "bytes": 28703,
+      "bytes": 32072,
       "imports": [
         {
           "path": "src/utils/DOMUtils.js",
@@ -397,6 +397,11 @@
           "path": "src/icons/Icons.js",
           "kind": "import-statement",
           "original": "../icons/Icons.js"
+        },
+        {
+          "path": "src/i18n/i18n.js",
+          "kind": "import-statement",
+          "original": "../i18n/i18n.js"
         }
       ],
       "format": "esm"
@@ -425,7 +430,7 @@
       "entryPoint": "src/index.js",
       "inputs": {
         "src/renderers/HTML5Renderer.js": {
-          "bytesInOutput": 4675
+          "bytesInOutput": 4803
         },
         "src/index.js": {
           "bytesInOutput": 1939
@@ -437,19 +442,19 @@
           "bytesInOutput": 1581
         },
         "src/i18n/languages/en.js": {
-          "bytesInOutput": 5230
+          "bytesInOutput": 5426
         },
         "src/i18n/languages/de.js": {
-          "bytesInOutput": 6298
+          "bytesInOutput": 6510
         },
         "src/i18n/languages/es.js": {
-          "bytesInOutput": 6411
+          "bytesInOutput": 6637
         },
         "src/i18n/languages/fr.js": {
-          "bytesInOutput": 6680
+          "bytesInOutput": 6895
         },
         "src/i18n/languages/ja.js": {
-          "bytesInOutput": 11448
+          "bytesInOutput": 11757
         },
         "src/i18n/translations.js": {
           "bytesInOutput": 61
@@ -467,7 +472,7 @@
           "bytesInOutput": 222
         },
         "src/controls/ControlBar.js": {
-          "bytesInOutput": 54429
+          "bytesInOutput": 54457
         },
         "src/utils/StorageManager.js": {
           "bytesInOutput": 1606
@@ -494,22 +499,22 @@
           "bytesInOutput": 41981
         },
         "src/core/Player.js": {
-          "bytesInOutput": 73997
+          "bytesInOutput": 74975
         },
         "src/renderers/YouTubeRenderer.js": {
-          "bytesInOutput": 4140
+          "bytesInOutput": 4203
         },
         "src/renderers/VimeoRenderer.js": {
-          "bytesInOutput": 4205
+          "bytesInOutput": 4268
         },
         "src/renderers/HLSRenderer.js": {
-          "bytesInOutput": 5389
+          "bytesInOutput": 5583
         },
         "src/features/PlaylistManager.js": {
-          "bytesInOutput": 13260
+          "bytesInOutput": 14667
         }
       },
-      "bytes": 286341
+      "bytes": 290360
     }
   }
 }

package/package.json

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

package/src/controls/ControlBar.js

@@ -1587,7 +1587,8 @@ export class ControlBar {
             attributes: {
                 'type': 'button',
                 'aria-label': i18n.t('player.quality'),
-                'aria-expanded': 'false'
+                'aria-expanded': 'false',
+                'title': i18n.t('player.quality')
             }
         });
 

package/src/core/Player.js

@@ -432,6 +432,20 @@ export class Player extends EventEmitter {
 
         // Wrap original element
         this.element.parentNode.insertBefore(this.container, this.element);
+        
+        // Create track artwork element for single audio files (before video wrapper)
+        // This shows the poster/artwork above the audio player (similar to playlists)
+        if (this.element.tagName === 'AUDIO' && this.options.poster) {
+            this.trackArtworkElement = DOMUtils.createElement('div', {
+                className: `${this.options.classPrefix}-track-artwork`,
+                attributes: {
+                    'aria-hidden': 'true'
+                }
+            });
+            this.trackArtworkElement.style.backgroundImage = `url(${this.options.poster})`;
+            this.container.appendChild(this.trackArtworkElement);
+        }
+        
         this.container.appendChild(this.videoWrapper);
         this.videoWrapper.appendChild(this.element);
 
@@ -850,6 +864,8 @@ export class Player extends EventEmitter {
      * @param {string} config.type - Media MIME type
      * @param {string} [config.poster] - Poster image URL
      * @param {Array} [config.tracks] - Text tracks (captions, chapters, etc.)
+     * @param {string} [config.audioDescriptionSrc] - Audio description video URL
+     * @param {string} [config.signLanguageSrc] - Sign language video URL
      */
     async load(config) {
         try {
@@ -860,6 +876,10 @@ export class Player extends EventEmitter {
                 this.pause();
             }
 
+            // Save scroll position to prevent browser from auto-scrolling when loading new media
+            const scrollX = window.scrollX || window.pageXOffset;
+            const scrollY = window.scrollY || window.pageYOffset;
+
             // Clear existing text tracks
             const existingTracks = this.trackElements;
             existingTracks.forEach(track => track.remove());
@@ -893,6 +913,25 @@ export class Player extends EventEmitter {
                 });
                 this.invalidateTrackCache();
             }
+            
+            // Remember accessibility feature states before switching tracks
+            const wasSignLanguageEnabled = this.state.signLanguageEnabled;
+            const wasAudioDescriptionEnabled = this.state.audioDescriptionEnabled;
+            
+            // Update sources from config FIRST (before hiding features)
+            this.audioDescriptionSrc = config.audioDescriptionSrc || null;
+            this.signLanguageSrc = config.signLanguageSrc || null;
+            
+            // Update original source for toggling
+            this.originalSrc = config.src;
+            
+            // Hide accessibility features that were enabled (must happen AFTER updating sources)
+            if (wasAudioDescriptionEnabled) {
+                this.disableAudioDescription();
+            }
+            if (wasSignLanguageEnabled) {
+                this.disableSignLanguage();
+            }
 
             // Check if we need to change renderer type
             const shouldChangeRenderer = this.shouldChangeRenderer(config.src);
@@ -911,6 +950,9 @@ export class Player extends EventEmitter {
                 this.renderer.media = this.element; // Update media reference
                 this.element.load();
             }
+            
+            // Restore scroll position immediately after loading to prevent auto-scroll
+            window.scrollTo(scrollX, scrollY);
 
             // Reinitialize caption manager to pick up new tracks
             if (this.captionManager) {
@@ -920,12 +962,12 @@ export class Player extends EventEmitter {
             
             // Reinitialize transcript manager to pick up new tracks
             if (this.transcriptManager) {
-                const wasVisible = this.transcriptManager.isVisible;
+                const wasTranscriptVisible = this.transcriptManager.isVisible;
                 this.transcriptManager.destroy();
                 this.transcriptManager = new TranscriptManager(this);
                 
-                // Restore visibility state if transcript was open
-                if (wasVisible) {
+                // Only restore transcript visibility if new track has captions
+                if (wasTranscriptVisible && this.controlBar && this.controlBar.hasCaptionTracks()) {
                     this.transcriptManager.showTranscript();
                 }
             }
@@ -934,6 +976,28 @@ export class Player extends EventEmitter {
             if (this.controlBar) {
                 this.updateControlBar();
             }
+            
+            // Restore scroll position after control bar update (may have caused micro-scrolls)
+            window.scrollTo(scrollX, scrollY);
+            
+            // Restore accessibility features if they were enabled and available in new track
+            if (wasSignLanguageEnabled && this.signLanguageSrc) {
+                // Small delay to ensure player and control bar are ready
+                setTimeout(() => {
+                    this.enableSignLanguage();
+                    // Restore scroll after sign language is shown
+                    window.scrollTo(scrollX, scrollY);
+                }, 150);
+            }
+            
+            if (wasAudioDescriptionEnabled && this.audioDescriptionSrc) {
+                // Small delay to ensure player is ready
+                setTimeout(() => {
+                    this.enableAudioDescription();
+                    // Restore scroll after audio description is enabled
+                    window.scrollTo(scrollX, scrollY);
+                }, 150);
+            }
 
             this.emit('sourcechange', config);
             this.log('Media loaded successfully');
@@ -965,6 +1029,7 @@ export class Player extends EventEmitter {
         // Reattach events for the new controls
         controlBar.attachEvents();
         controlBar.setupAutoHide();
+        controlBar.setupOverflowDetection();
     }
     
     shouldChangeRenderer(src) {

package/src/features/PlaylistManager.js

@@ -5,6 +5,7 @@
 
 import { DOMUtils } from '../utils/DOMUtils.js';
 import { createIconElement } from '../icons/Icons.js';
+import { i18n } from '../i18n/i18n.js';
 
 // Static counter for unique IDs
 let playlistInstanceCounter = 0;
@@ -35,6 +36,9 @@ export class PlaylistManager {
     this.navigationFeedback = null; // Live region for keyboard navigation feedback
     this.isPanelVisible = this.options.showPanel !== false;
     
+    // Track change guard to prevent cascade of next() calls
+    this.isChangingTrack = false;
+    
     // Bind methods
     this.handleTrackEnd = this.handleTrackEnd.bind(this);
     this.handleTrackError = this.handleTrackError.bind(this);
@@ -216,6 +220,9 @@ export class PlaylistManager {
     
     const track = this.tracks[index];
     
+    // Set guard flag to prevent cascade of next() calls during track change
+    this.isChangingTrack = true;
+    
     // Update current index
     this.currentIndex = index;
     
@@ -224,7 +231,9 @@ export class PlaylistManager {
       src: track.src,
       type: track.type,
       poster: track.poster,
-      tracks: track.tracks || []
+      tracks: track.tracks || [],
+      audioDescriptionSrc: track.audioDescriptionSrc || null,
+      signLanguageSrc: track.signLanguageSrc || null
     });
     
     // Update UI
@@ -237,6 +246,11 @@ export class PlaylistManager {
       item: track,
       total: this.tracks.length
     });
+    
+    // Clear guard flag after a short delay to ensure track is loaded
+    setTimeout(() => {
+      this.isChangingTrack = false;
+    }, 150);
   }
   
   /**
@@ -252,6 +266,9 @@ export class PlaylistManager {
     
     const track = this.tracks[index];
     
+    // Set guard flag to prevent cascade of next() calls during track change
+    this.isChangingTrack = true;
+    
     // Update current index
     this.currentIndex = index;
     
@@ -260,7 +277,9 @@ export class PlaylistManager {
       src: track.src,
       type: track.type,
       poster: track.poster,
-      tracks: track.tracks || []
+      tracks: track.tracks || [],
+      audioDescriptionSrc: track.audioDescriptionSrc || null,
+      signLanguageSrc: track.signLanguageSrc || null
     });
     
     // Update UI
@@ -274,9 +293,13 @@ export class PlaylistManager {
       total: this.tracks.length
     });
     
-    // Auto-play
+    // Auto-play and clear guard flag after playback starts
     setTimeout(() => {
       this.player.play();
+      // Clear guard flag after a short delay to ensure track has started
+      setTimeout(() => {
+        this.isChangingTrack = false;
+      }, 50);
     }, 100);
   }
   
@@ -318,6 +341,12 @@ export class PlaylistManager {
    * Handle track end
    */
   handleTrackEnd() {
+    // Don't auto-advance if we're already in the process of changing tracks
+    // This prevents a cascade of next() calls when loading a new track triggers an 'ended' event
+    if (this.isChangingTrack) {
+      return;
+    }
+    
     if (this.options.autoAdvance) {
       this.next();
     }
@@ -404,6 +433,26 @@ export class PlaylistManager {
       return;
     }
     
+    // Create track artwork element (shows album art/poster for audio playlists)
+    // Only create for audio players
+    if (this.player.element.tagName === 'AUDIO') {
+      this.trackArtworkElement = DOMUtils.createElement('div', {
+        className: 'vidply-track-artwork',
+        attributes: {
+          'aria-hidden': 'true'
+        }
+      });
+      this.trackArtworkElement.style.display = 'none';
+      
+      // Insert before video wrapper
+      const videoWrapper = this.container.querySelector('.vidply-video-wrapper');
+      if (videoWrapper) {
+        this.container.insertBefore(this.trackArtworkElement, videoWrapper);
+      } else {
+        this.container.appendChild(this.trackArtworkElement);
+      }
+    }
+    
     // Create track info element (shows current track)
     this.trackInfoElement = DOMUtils.createElement('div', {
       className: 'vidply-track-info',
@@ -434,7 +483,7 @@ export class PlaylistManager {
       attributes: {
         id: `${this.uniqueId}-panel`,
         role: 'region',
-        'aria-label': 'Media playlist',
+        'aria-label': i18n.t('playlist.title'),
         'aria-labelledby': `${this.uniqueId}-heading`
       }
     });
@@ -451,20 +500,50 @@ export class PlaylistManager {
     
     const trackNumber = this.currentIndex + 1;
     const totalTracks = this.tracks.length;
-    const trackTitle = track.title || 'Untitled';
+    const trackTitle = track.title || i18n.t('playlist.untitled');
     const trackArtist = track.artist || '';
     
     // Screen reader announcement
-    const announcement = `Now playing: Track ${trackNumber} of ${totalTracks}. ${trackTitle}${trackArtist ? ' by ' + trackArtist : ''}`;
+    const artistPart = trackArtist ? i18n.t('playlist.by') + trackArtist : '';
+    const announcement = i18n.t('playlist.nowPlaying', {
+      current: trackNumber,
+      total: totalTracks,
+      title: trackTitle,
+      artist: artistPart
+    });
+    
+    const trackOfText = i18n.t('playlist.trackOf', {
+      current: trackNumber,
+      total: totalTracks
+    });
     
     this.trackInfoElement.innerHTML = `
       <span class="vidply-sr-only">${DOMUtils.escapeHTML(announcement)}</span>
-      <div class="vidply-track-number" aria-hidden="true">Track ${trackNumber} of ${totalTracks}</div>
+      <div class="vidply-track-number" aria-hidden="true">${DOMUtils.escapeHTML(trackOfText)}</div>
       <div class="vidply-track-title" aria-hidden="true">${DOMUtils.escapeHTML(trackTitle)}</div>
       ${trackArtist ? `<div class="vidply-track-artist" aria-hidden="true">${DOMUtils.escapeHTML(trackArtist)}</div>` : ''}
     `;
     
     this.trackInfoElement.style.display = 'block';
+    
+    // Update track artwork if available (for audio playlists)
+    this.updateTrackArtwork(track);
+  }
+  
+  /**
+   * Update track artwork display (for audio playlists)
+   */
+  updateTrackArtwork(track) {
+    if (!this.trackArtworkElement) return;
+    
+    // If track has a poster/artwork, show it
+    if (track.poster) {
+      this.trackArtworkElement.style.backgroundImage = `url(${track.poster})`;
+      this.trackArtworkElement.style.display = 'block';
+    } else {
+      // No artwork available, hide the element
+      this.trackArtworkElement.style.display = 'none';
+    }
   }
   
   /**
@@ -483,7 +562,7 @@ export class PlaylistManager {
         id: `${this.uniqueId}-heading`
       }
     });
-    header.textContent = `Playlist (${this.tracks.length})`;
+    header.textContent = `${i18n.t('playlist.title')} (${this.tracks.length})`;
     this.playlistPanel.appendChild(header);
     
     // Add keyboard instructions (visually hidden)
@@ -522,9 +601,12 @@ export class PlaylistManager {
    * Create playlist item element
    */
   createPlaylistItem(track, index) {
-    const trackPosition = `Track ${index + 1} of ${this.tracks.length}`;
-    const trackTitle = track.title || `Track ${index + 1}`;
-    const trackArtist = track.artist ? ` by ${track.artist}` : '';
+    const trackPosition = i18n.t('playlist.trackOf', {
+      current: index + 1,
+      total: this.tracks.length
+    });
+    const trackTitle = track.title || i18n.t('playlist.trackUntitled', { number: index + 1 });
+    const trackArtist = track.artist ? i18n.t('playlist.by') + track.artist : '';
     const isActive = index === this.currentIndex;
     const statusText = isActive ? 'Currently playing' : 'Not playing';
     const actionText = isActive ? 'Press Enter to restart' : 'Press Enter to play';
@@ -734,9 +816,12 @@ export class PlaylistManager {
       if (!button) return;
       
       const track = this.tracks[index];
-      const trackPosition = `Track ${index + 1} of ${this.tracks.length}`;
-      const trackTitle = track.title || `Track ${index + 1}`;
-      const trackArtist = track.artist ? ` by ${track.artist}` : '';
+      const trackPosition = i18n.t('playlist.trackOf', {
+        current: index + 1,
+        total: this.tracks.length
+      });
+      const trackTitle = track.title || i18n.t('playlist.trackUntitled', { number: index + 1 });
+      const trackArtist = track.artist ? i18n.t('playlist.by') + track.artist : '';
       
       if (index === this.currentIndex) {
         // Update list item styling
@@ -750,7 +835,7 @@ export class PlaylistManager {
         const actionText = 'Press Enter to restart';
         button.setAttribute('aria-label', `${trackPosition}. ${trackTitle}${trackArtist}. ${statusText}. ${actionText}.`);
         
-        // Scroll into view
+        // Scroll into view within playlist panel (uses 'nearest' to minimize page scroll)
         item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
       } else {
         // Update list item styling
@@ -857,6 +942,11 @@ export class PlaylistManager {
       this.trackInfoElement.innerHTML = '';
       this.trackInfoElement.style.display = 'none';
     }
+    
+    if (this.trackArtworkElement) {
+      this.trackArtworkElement.style.backgroundImage = '';
+      this.trackArtworkElement.style.display = 'none';
+    }
   }
   
   /**
@@ -929,6 +1019,10 @@ export class PlaylistManager {
     this.player.off('error', this.handleTrackError);
     
     // Remove UI
+    if (this.trackArtworkElement) {
+      this.trackArtworkElement.remove();
+    }
+    
     if (this.trackInfoElement) {
       this.trackInfoElement.remove();
     }

package/src/i18n/languages/de.js

@@ -157,6 +157,14 @@ export const de = {
         minutes: '{count} Minuten',
         second: '{count} Sekunde',
         seconds: '{count} Sekunden'
+    },
+    playlist: {
+        title: 'Wiedergabeliste',
+        trackOf: 'Titel {current} von {total}',
+        nowPlaying: 'Läuft gerade: Titel {current} von {total}. {title}{artist}',
+        by: ' von ',
+        untitled: 'Ohne Titel',
+        trackUntitled: 'Titel {number}'
     }
 };
 

package/src/i18n/languages/en.js

@@ -157,6 +157,14 @@ export const en = {
     minutes: '{count} minutes',
     second: '{count} second',
     seconds: '{count} seconds'
+  },
+  playlist: {
+    title: 'Playlist',
+    trackOf: 'Track {current} of {total}',
+    nowPlaying: 'Now playing: Track {current} of {total}. {title}{artist}',
+    by: ' by ',
+    untitled: 'Untitled',
+    trackUntitled: 'Track {number}'
   }
 };
 

package/src/i18n/languages/es.js

@@ -157,6 +157,14 @@ export const es = {
     minutes: '{count} minutos',
     second: '{count} segundo',
     seconds: '{count} segundos'
+  },
+  playlist: {
+    title: 'Lista de reproducción',
+    trackOf: 'Pista {current} de {total}',
+    nowPlaying: 'Reproduciendo ahora: Pista {current} de {total}. {title}{artist}',
+    by: ' por ',
+    untitled: 'Sin título',
+    trackUntitled: 'Pista {number}'
   }
 };
 

package/src/i18n/languages/fr.js

@@ -157,6 +157,14 @@ export const fr = {
     minutes: '{count} minutes',
     second: '{count} seconde',
     seconds: '{count} secondes'
+  },
+  playlist: {
+    title: 'Liste de lecture',
+    trackOf: 'Piste {current} sur {total}',
+    nowPlaying: 'Lecture en cours : Piste {current} sur {total}. {title}{artist}',
+    by: ' par ',
+    untitled: 'Sans titre',
+    trackUntitled: 'Piste {number}'
   }
 };
 

package/src/i18n/languages/ja.js

@@ -157,6 +157,14 @@ export const ja = {
     minutes: '{count}分',
     second: '{count}秒',
     seconds: '{count}秒'
+  },
+  playlist: {
+    title: 'プレイリスト',
+    trackOf: 'トラック {current}/{total}',
+    nowPlaying: '再生中: トラック {current}/{total}. {title}{artist}',
+    by: ' - ',
+    untitled: 'タイトルなし',
+    trackUntitled: 'トラック {number}'
   }
 };