vidply 1.0.32 → 1.0.34

package/src/features/PlaylistManager.js

@@ -128,6 +128,9 @@ export class PlaylistManager {
       this.playlistPanel.parentNode.removeChild(this.playlistPanel);
     }
     
+    // Preserve existing player options so recreated players behave consistently
+    const preservedPlayerOptions = this.player?.options ? { ...this.player.options } : {};
+
     // Remove event listeners before destroying
     if (this.player) {
       this.player.off('ended', this.handleTrackEnd);
@@ -140,7 +143,9 @@ export class PlaylistManager {
     
     // Create new media element with appropriate type
     const mediaElement = document.createElement(elementType);
-    mediaElement.setAttribute('preload', 'metadata');
+    // Respect configured preload (playlists should behave like single videos even with deferLoad)
+    const preloadValue = preservedPlayerOptions.preload || 'metadata';
+    mediaElement.setAttribute('preload', preloadValue);
     
     // For video elements with local media, set poster
     if (elementType === 'video' && track.poster && 
@@ -188,6 +193,8 @@ export class PlaylistManager {
       audioDescriptionDuration: track.audioDescriptionDuration || null,
       signLanguageSrc: track.signLanguageSrc || null
     };
+    // Merge back preserved options (so deferLoad/preload/etc remain active)
+    Object.assign(playerOptions, preservedPlayerOptions);
     
     this.player = new this.PlayerClass(mediaElement, playerOptions);
     
@@ -425,8 +432,11 @@ export class PlaylistManager {
       if (this.options.autoPlayFirst) {
         this.play(0);
       } else {
-        // Load first track without playing
-        this.loadTrack(0);
+        // Behave like a single video: load the first track (metadata/manifest)
+        // but do not start playback.
+        void this.loadTrack(0).catch(() => {
+          // ignore
+        });
       }
     }
     
@@ -436,6 +446,9 @@ export class PlaylistManager {
   
   /**
    * Load a track without playing
+   * This is the playlist equivalent of a "single video initialized but not started yet":
+   * it updates UI selection and loads the media into the player so metadata/manifests
+   * and feature managers can be ready, but it does not start playback.
    * @param {number} index - Track index
    */
   async loadTrack(index) {
@@ -446,12 +459,13 @@ export class PlaylistManager {
     
     const track = this.tracks[index];
     
+    // Always update UI immediately (poster, buttons, duration, etc.).
+    // Note: this is UI-only; actual media loading is performed by player.load() below.
+    this.selectTrack(index);
+    
     // Set guard flag to prevent cascade of next() calls during track change
     this.isChangingTrack = true;
     
-    // Update current index
-    this.currentIndex = index;
-    
     // Check if we should recreate the player for this track type
     if (this.options.recreatePlayers && this.hostElement && this.PlayerClass) {
       const currentMediaType = this.player ? 
@@ -462,9 +476,8 @@ export class PlaylistManager {
       // Recreate if element type is different
       if (currentMediaType !== newElementType) {
         await this.recreatePlayerForTrack(track, false);
-        // Update UI after recreation
-        this.updateTrackInfo(track);
-        this.updatePlaylistUI();
+        // Re-apply selection to the newly created player (poster/tracks/buttons)
+        this.selectTrack(index);
         
         // Emit event
         this.player.emit('playlisttrackchange', {
@@ -482,18 +495,25 @@ export class PlaylistManager {
     }
     
     // Load track into player (normal path)
-    this.player.load({
+    const loadPromise = this.player.load({
       src: track.src,
       type: track.type,
       poster: track.poster,
       tracks: track.tracks || [],
       audioDescriptionSrc: track.audioDescriptionSrc || null,
-      signLanguageSrc: track.signLanguageSrc || null
+      signLanguageSrc: track.signLanguageSrc || null,
+      signLanguageSources: track.signLanguageSources || {}
     });
-    
-    // Update UI
-    this.updateTrackInfo(track);
-    this.updatePlaylistUI();
+
+    // For playlist UX parity with single videos: fetch metadata/manifest now,
+    // but do not start playback.
+    if (this.player?.options?.deferLoad && typeof this.player.ensureLoaded === 'function') {
+      Promise.resolve(loadPromise)
+        .then(() => this.player?.ensureLoaded?.())
+        .catch(() => {
+          // ignore
+        });
+    }
     
     // Emit event
     this.player.emit('playlisttrackchange', {
@@ -507,6 +527,133 @@ export class PlaylistManager {
       this.isChangingTrack = false;
     }, 150);
   }
+
+  /**
+   * Select a track (UI/selection only; does NOT set the media src / does NOT initialize renderer)
+   *
+   * In "B always" playlist mode, you typically want `loadTrack()` on selection so the
+   * selected item behaves like a single video (metadata/manifest loaded, features ready)
+   * without auto-playing.
+   * @param {number} index - Track index
+   */
+  selectTrack(index) {
+    if (index < 0 || index >= this.tracks.length) {
+      console.warn('VidPly Playlist: Invalid track index', index);
+      return;
+    }
+
+    const track = this.tracks[index];
+    this.currentIndex = index;
+
+    // Apply per-track metadata without touching the media source.
+    // This ensures poster + feature buttons (chapters/captions/transcript/sign-language)
+    // can be updated instantly even before any media network activity happens.
+    try {
+      // Poster for video element
+      if (this.player?.element?.tagName === 'VIDEO') {
+        if (track.poster) {
+          const posterUrl = typeof this.player.resolvePosterPath === 'function'
+            ? this.player.resolvePosterPath(track.poster)
+            : track.poster;
+          this.player.element.poster = posterUrl;
+          this.player.applyPosterAspectRatio?.(posterUrl);
+        } else {
+          this.player.element.removeAttribute('poster');
+        }
+      }
+
+      // Update sign language / audio description sources (used for button visibility)
+      this.player.audioDescriptionSrc = track.audioDescriptionSrc || null;
+      this.player.signLanguageSrc = track.signLanguageSrc || null;
+      this.player.signLanguageSources = track.signLanguageSources || {};
+
+      // Fill duration early for UI (progress/time display) without loading media
+      if (track.duration && Number(track.duration) > 0) {
+        this.player.state.duration = Number(track.duration);
+      }
+      // Also sync feature managers (they keep their own copy of sources)
+      if (this.player.audioDescriptionManager) {
+        this.player.audioDescriptionManager.src = track.audioDescriptionSrc || null;
+        // Remember original (non-described) source for switching back later
+        this.player.audioDescriptionManager.originalSource = track.src || this.player.originalSrc || null;
+      }
+      if (this.player.signLanguageManager) {
+        this.player.signLanguageManager.src = track.signLanguageSrc || null;
+        this.player.signLanguageManager.sources = track.signLanguageSources || {};
+        this.player.signLanguageManager.currentLanguage = null;
+      }
+
+      // For audio description switching, remember original source even before first play
+      if (track.src && !this.player.originalSrc) {
+        this.player.originalSrc = track.src;
+      }
+
+      // Replace <track> elements so captions/chapters/transcript can be detected/loaded
+      const existing = Array.from(this.player.element.querySelectorAll('track'));
+      existing.forEach(t => t.remove());
+
+      if (Array.isArray(track.tracks)) {
+        track.tracks.forEach(tc => {
+          if (!tc?.src) return;
+          const el = document.createElement('track');
+          el.src = tc.src;
+          el.kind = tc.kind || 'captions';
+          el.srclang = tc.srclang || 'en';
+          el.label = tc.label || tc.srclang || 'Track';
+          if (tc.default) el.default = true;
+          if (tc.describedSrc) {
+            el.setAttribute('data-desc-src', tc.describedSrc);
+          }
+          this.player.element.appendChild(el);
+        });
+      }
+
+      if (typeof this.player.invalidateTrackCache === 'function') {
+        this.player.invalidateTrackCache();
+      }
+
+      // Re-scan described-track metadata for AudioDescriptionManager
+      if (this.player.audioDescriptionManager && typeof this.player.audioDescriptionManager.initFromSourceElements === 'function') {
+        try {
+          this.player.audioDescriptionManager.captionTracks = [];
+          this.player.audioDescriptionManager.initFromSourceElements(this.player.sourceElements, this.player.trackElements);
+        } catch (e) {
+          // ignore
+        }
+      }
+
+      // Refresh caption/transcript managers so menus reflect newly injected <track> elements
+      // (important when we defer MP4/MP3 loading but still want VTT-based UI to work).
+      if (this.player.captionManager && typeof this.player.captionManager.loadTracks === 'function') {
+        try {
+          this.player.captionManager.tracks = [];
+          this.player.captionManager.currentTrack = null;
+          this.player.captionManager.loadTracks();
+        } catch (e) {
+          // ignore
+        }
+      }
+
+      // TranscriptManager reads from TextTracks too; it will be correct after media starts.
+      // For now, we just ensure control bar is rebuilt so the button is present.
+
+      // Rebuild controls so feature buttons appear immediately
+      if (typeof this.player.updateControlBar === 'function') {
+        this.player.updateControlBar();
+      }
+    } catch (e) {
+      // ignore preview errors; selection should still work
+    }
+
+    this.updateTrackInfo(track);
+    this.updatePlaylistUI();
+
+    this.player.emit('playlisttrackselect', {
+      index,
+      item: track,
+      total: this.tracks.length
+    });
+  }
   
   /**
    * Play a specific track
@@ -557,13 +704,24 @@ export class PlaylistManager {
     }
     
     // Load track into player (normal path)
+    // If audio description was toggled before the first play, load the described source directly.
+    let srcToLoad = track.src;
+    if (this.player?.audioDescriptionManager?.desiredState && track.audioDescriptionSrc) {
+      // Preserve original for later toggling back
+      this.player.originalSrc = track.src;
+      this.player.audioDescriptionManager.originalSource = track.src;
+      this.player.audioDescriptionManager.src = track.audioDescriptionSrc;
+      srcToLoad = track.audioDescriptionSrc;
+    }
+
     this.player.load({
-      src: track.src,
+      src: srcToLoad,
       type: track.type,
       poster: track.poster,
       tracks: track.tracks || [],
       audioDescriptionSrc: track.audioDescriptionSrc || null,
-      signLanguageSrc: track.signLanguageSrc || null
+      signLanguageSrc: track.signLanguageSrc || null,
+      signLanguageSources: track.signLanguageSources || {}
     });
     
     // Update UI
@@ -814,25 +972,9 @@ 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);
-      }
-    }
+    // Track artwork element (shows album art/poster for audio tracks).
+    // Important: in mixed playlists the player may start as <video> and later recreate to <audio>,
+    // so we create this lazily in `updateTrackArtwork()` when we actually have an audio element.
     
     // Create track info element (shows current track)
     this.trackInfoElement = DOMUtils.createElement('div', {
@@ -931,6 +1073,34 @@ export class PlaylistManager {
    * Update track artwork display (for audio playlists)
    */
   updateTrackArtwork(track) {
+    // Only show artwork for audio players.
+    // In mixed playlists we may recreate from <video> -> <audio> later, so ensure the element exists lazily.
+    if (this.player?.element?.tagName !== 'AUDIO') {
+      if (this.trackArtworkElement) {
+        this.trackArtworkElement.style.display = 'none';
+      }
+      return;
+    }
+
+    // Lazily create artwork element once we have an audio element/container.
+    if (!this.trackArtworkElement && this.container) {
+      this.trackArtworkElement = DOMUtils.createElement('div', {
+        className: 'vidply-track-artwork',
+        attributes: {
+          'aria-hidden': 'true'
+        }
+      });
+      this.trackArtworkElement.style.display = 'none';
+
+      // Insert before video wrapper (if present) for consistent layout.
+      const videoWrapper = this.container.querySelector('.vidply-video-wrapper');
+      if (videoWrapper) {
+        this.container.insertBefore(this.trackArtworkElement, videoWrapper);
+      } else {
+        this.container.appendChild(this.trackArtworkElement);
+      }
+    }
+
     if (!this.trackArtworkElement) return;
     
     // If track has a poster/artwork, show it

package/src/i18n/languages/de.js

@@ -45,6 +45,9 @@ export const de = {
         signLanguageVideo: 'Gebärdensprache-Video',
         closeSignLanguage: 'Gebärdensprache-Video schließen',
         signLanguageSettings: 'Gebärdensprache-Einstellungen',
+        startPlaybackFirst: 'Bitte starten Sie die Wiedergabe zuerst.',
+        startPlaybackForAudioDescription: 'Bitte starten Sie die Wiedergabe zuerst, um die Audiodeskription zu nutzen.',
+        startPlaybackForSignLanguage: 'Bitte starten Sie die Wiedergabe zuerst, um das Gebärdensprache-Video zu nutzen.',
         noChapters: 'Keine Kapitel verfügbar',
         noCaptions: 'Keine Untertitel verfügbar',
         auto: 'Automatisch',

package/src/i18n/languages/en.js

@@ -45,6 +45,9 @@ export const en = {
     signLanguageVideo: 'Sign Language Video',
     closeSignLanguage: 'Close sign language video',
     signLanguageSettings: 'Sign language settings',
+    startPlaybackFirst: 'Please start playback first.',
+    startPlaybackForAudioDescription: 'Please start playback first to use audio description.',
+    startPlaybackForSignLanguage: 'Please start playback first to use sign language video.',
     noChapters: 'No chapters available',
     noCaptions: 'No captions available',
     auto: 'Auto',

package/src/renderers/HLSRenderer.js

@@ -8,6 +8,8 @@ export class HLSRenderer {
     this.player = player;
     this.media = player.element;
     this.hls = null;
+    this._hlsSourceLoaded = false;
+    this._pendingSrc = null;
   }
 
   async init() {
@@ -67,6 +69,8 @@ export class HLSRenderer {
     // Create hls.js instance with better error recovery
     this.hls = new window.Hls({
       debug: this.player.options.debug,
+      // When deferLoad is enabled, do not start loading until the first play().
+      autoStartLoad: !this.player.options.deferLoad,
       enableWorker: true,
       lowLatencyMode: false,
       backBufferLength: 90,
@@ -112,7 +116,13 @@ export class HLSRenderer {
       throw new Error('No HLS source found');
     }
     
-    this.hls.loadSource(src);
+    if (this.player.options.deferLoad) {
+      // Defer manifest/segment loading until first play()
+      this._pendingSrc = src;
+    } else {
+      this.hls.loadSource(src);
+      this._hlsSourceLoaded = true;
+    }
 
     // Attach events
     this.attachHlsEvents();
@@ -261,10 +271,59 @@ export class HLSRenderer {
     }
   }
 
+  /**
+   * Ensure the HLS manifest/initial loading is started without starting playback.
+   * This makes playlist selection behave more like single-video initialization.
+   */
+  ensureLoaded() {
+    if (!this.player.options.deferLoad) {
+      return;
+    }
+
+    // Native HLS path delegates to HTML5Renderer; if we got here and have no hls.js instance,
+    // there's nothing to do.
+    if (!this.hls) {
+      return;
+    }
+
+    if (this._hlsSourceLoaded) {
+      return;
+    }
+
+    const src = this._pendingSrc || this.player._pendingSource || this.player.currentSource;
+    if (!src) {
+      return;
+    }
+
+    try {
+      this.hls.loadSource(src);
+      this._hlsSourceLoaded = true;
+      // Start loading so manifest is parsed and levels/tracks become available.
+      // Note: this may fetch initial fragments depending on stream/config.
+      this.hls.startLoad();
+    } catch (e) {
+      // ignore
+    }
+  }
+
   play() {
     // Save scroll position to prevent browser from scrolling to video
     const scrollX = window.scrollX;
     const scrollY = window.scrollY;
+
+    // If deferLoad is enabled, start HLS loading only on the first user play request.
+    if (this.player.options.deferLoad && this.hls && !this._hlsSourceLoaded) {
+      const src = this._pendingSrc || this.player.currentSource;
+      if (src) {
+        try {
+          this.hls.loadSource(src);
+          this.hls.startLoad();
+          this._hlsSourceLoaded = true;
+        } catch (e) {
+          // ignore and let media.play() surface errors if any
+        }
+      }
+    }
     
     const promise = this.media.play();
     

package/src/renderers/HTML5Renderer.js

@@ -6,6 +6,7 @@ export class HTML5Renderer {
   constructor(player) {
     this.player = player;
     this.media = player.element;
+    this._didDeferredLoad = false;
   }
 
   async init() {
@@ -15,11 +16,16 @@ export class HTML5Renderer {
     
     this.attachEvents();
     
-    // Set preload
-    this.media.preload = this.player.options.preload;
-    
-    // Load media
-    this.media.load();
+    // Set preload + optionally defer network loading until user play
+    if (this.player.options.deferLoad) {
+      // Allow metadata preload while still avoiding an explicit load() call.
+      // Note: browsers may still fetch metadata automatically when preload="metadata".
+      this.media.preload = this.player.options.preload || 'none';
+    } else {
+      this.media.preload = this.player.options.preload;
+      // Load media (eager)
+      this.media.load();
+    }
     
     // Show VidPly controls (remove external controls class if present)
     if (this.player.container) {
@@ -157,6 +163,19 @@ export class HTML5Renderer {
     // Save scroll position to prevent browser from scrolling to video
     const scrollX = window.scrollX;
     const scrollY = window.scrollY;
+
+    // If deferLoad is enabled, trigger load only on the first user play request.
+    if (this.player.options.deferLoad && !this._didDeferredLoad) {
+      try {
+        // Only call load() if browser hasn't loaded anything yet.
+        if (this.media.readyState === 0) {
+          this.media.load();
+        }
+      } catch (e) {
+        // ignore
+      }
+      this._didDeferredLoad = true;
+    }
     
     const promise = this.media.play();
     
@@ -185,6 +204,25 @@ export class HTML5Renderer {
     }
   }
 
+  /**
+   * Ensure the media element has been loaded at least once (metadata/initial state)
+   * without starting playback. Useful for playlists to behave like single videos.
+   */
+  ensureLoaded() {
+    if (!this.player.options.deferLoad || this._didDeferredLoad) {
+      return;
+    }
+
+    try {
+      if (this.media.readyState === 0) {
+        this.media.load();
+      }
+    } catch (e) {
+      // ignore
+    }
+    this._didDeferredLoad = true;
+  }
+
   pause() {
     this.media.pause();
   }

package/dist/dev/vidply.HLSRenderer-5MJZR4D2.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/renderers/HLSRenderer.js"],
-  "sourcesContent": ["/**\r\n * HLS Streaming Renderer\r\n * Uses hls.js for browsers that don't natively support HLS\r\n */\r\n\r\nexport class HLSRenderer {\r\n  constructor(player) {\r\n    this.player = player;\r\n    this.media = player.element;\r\n    this.hls = null;\r\n  }\r\n\r\n  async init() {\r\n    // Check if browser natively supports HLS (Safari)\r\n    if (this.canPlayNatively()) {\r\n      this.player.log('Using native HLS support');\r\n      await this.initNative();\r\n    } else {\r\n      this.player.log('Using hls.js for HLS support');\r\n      await this.initHlsJs();\r\n    }\r\n  }\r\n\r\n  canPlayNatively() {\r\n    // Only use native HLS on Safari/iOS where it actually works properly\r\n    // Chrome reports it can play HLS but doesn't have proper quality switching\r\n    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\r\n    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;\r\n    \r\n    if (!isSafari && !isIOS) {\r\n      // Force hls.js on non-Safari browsers for proper quality switching\r\n      return false;\r\n    }\r\n    \r\n    const video = document.createElement('video');\r\n    return video.canPlayType('application/vnd.apple.mpegurl') !== '';\r\n  }\r\n\r\n  async initNative() {\r\n    // Use HTML5 renderer for native HLS support\r\n    const HTML5Renderer = (await import('./HTML5Renderer.js')).HTML5Renderer;\r\n    const renderer = new HTML5Renderer(this.player);\r\n    await renderer.init();\r\n    \r\n    // Copy methods\r\n    Object.getOwnPropertyNames(Object.getPrototypeOf(renderer)).forEach(method => {\r\n      if (method !== 'constructor' && typeof renderer[method] === 'function') {\r\n        this[method] = renderer[method].bind(renderer);\r\n      }\r\n    });\r\n  }\r\n\r\n  async initHlsJs() {\r\n    // Hide native controls\r\n    this.media.controls = false;\r\n    this.media.removeAttribute('controls');\r\n    \r\n    // Load hls.js if not already loaded\r\n    if (!window.Hls) {\r\n      await this.loadHlsJs();\r\n    }\r\n\r\n    if (!window.Hls.isSupported()) {\r\n      throw new Error('HLS is not supported in this browser');\r\n    }\r\n\r\n    // Create hls.js instance with better error recovery\r\n    this.hls = new window.Hls({\r\n      debug: this.player.options.debug,\r\n      enableWorker: true,\r\n      lowLatencyMode: false,\r\n      backBufferLength: 90,\r\n      maxBufferLength: 30,\r\n      maxMaxBufferLength: 600,\r\n      maxBufferSize: 60 * 1000 * 1000,\r\n      maxBufferHole: 0.5,\r\n      // Network retry settings\r\n      manifestLoadingTimeOut: 10000,\r\n      manifestLoadingMaxRetry: 4,\r\n      manifestLoadingRetryDelay: 1000,\r\n      manifestLoadingMaxRetryTimeout: 64000,\r\n      levelLoadingTimeOut: 10000,\r\n      levelLoadingMaxRetry: 4,\r\n      levelLoadingRetryDelay: 1000,\r\n      levelLoadingMaxRetryTimeout: 64000,\r\n      fragLoadingTimeOut: 20000,\r\n      fragLoadingMaxRetry: 6,\r\n      fragLoadingRetryDelay: 1000,\r\n      fragLoadingMaxRetryTimeout: 64000\r\n    });\r\n\r\n    // Attach media element\r\n    this.hls.attachMedia(this.media);\r\n\r\n    // Load source - use currentSource for external renderers, or get from attribute\r\n    let src = this.player.currentSource;\r\n    \r\n    if (!src) {\r\n      const sourceElement = this.player.element.querySelector('source');\r\n      if (sourceElement) {\r\n        // Use getAttribute to get the original URL, not the blob-converted one\r\n        src = sourceElement.getAttribute('src');\r\n      } else {\r\n        // Fallback to element's src attribute\r\n        src = this.player.element.getAttribute('src') || this.player.element.src;\r\n      }\r\n    }\r\n    \r\n    this.player.log(`Loading HLS source: ${src}`, 'log');\r\n    \r\n    if (!src) {\r\n      throw new Error('No HLS source found');\r\n    }\r\n    \r\n    this.hls.loadSource(src);\r\n\r\n    // Attach events\r\n    this.attachHlsEvents();\r\n    this.attachMediaEvents();\r\n  }\r\n\r\n  async loadHlsJs() {\r\n    return new Promise((resolve, reject) => {\r\n      const script = document.createElement('script');\r\n      script.src = 'https://cdn.jsdelivr.net/npm/hls.js@latest';\r\n      script.onload = () => resolve();\r\n      script.onerror = () => reject(new Error('Failed to load hls.js'));\r\n      document.head.appendChild(script);\r\n    });\r\n  }\r\n\r\n  attachHlsEvents() {\r\n    this.hls.on(window.Hls.Events.MANIFEST_PARSED, (event, data) => {\r\n      this.player.log('HLS manifest loaded, found ' + data.levels.length + ' quality levels');\r\n      this.player.emit('hlsmanifestparsed', data);\r\n      \r\n      // Show VidPly controls (remove external controls class if present)\r\n      if (this.player.container) {\r\n        this.player.container.classList.remove('vidply-external-controls');\r\n      }\r\n    });\r\n\r\n    this.hls.on(window.Hls.Events.LEVEL_SWITCHED, (event, data) => {\r\n      this.player.log('HLS level switched to ' + data.level);\r\n      this.player.emit('hlslevelswitched', data);\r\n    });\r\n\r\n    this.hls.on(window.Hls.Events.ERROR, (event, data) => {\r\n      this.handleHlsError(data);\r\n    });\r\n\r\n    this.hls.on(window.Hls.Events.FRAG_BUFFERED, () => {\r\n      this.player.state.buffering = false;\r\n    });\r\n  }\r\n\r\n  attachMediaEvents() {\r\n    // Use same events as HTML5 renderer\r\n    this.media.addEventListener('loadedmetadata', () => {\r\n      this.player.state.duration = this.media.duration;\r\n      this.player.emit('loadedmetadata');\r\n    });\r\n\r\n    this.media.addEventListener('play', () => {\r\n      this.player.state.playing = true;\r\n      this.player.state.paused = false;\r\n      this.player.state.ended = false;\r\n      this.player.emit('play');\r\n      \r\n      if (this.player.options.onPlay) {\r\n        this.player.options.onPlay.call(this.player);\r\n      }\r\n    });\r\n\r\n    this.media.addEventListener('pause', () => {\r\n      this.player.state.playing = false;\r\n      this.player.state.paused = true;\r\n      this.player.emit('pause');\r\n      \r\n      if (this.player.options.onPause) {\r\n        this.player.options.onPause.call(this.player);\r\n      }\r\n    });\r\n\r\n    this.media.addEventListener('ended', () => {\r\n      this.player.state.playing = false;\r\n      this.player.state.paused = true;\r\n      this.player.state.ended = true;\r\n      this.player.emit('ended');\r\n      \r\n      if (this.player.options.onEnded) {\r\n        this.player.options.onEnded.call(this.player);\r\n      }\r\n      \r\n      if (this.player.options.loop) {\r\n        this.player.seek(0);\r\n        this.player.play();\r\n      }\r\n    });\r\n\r\n    this.media.addEventListener('timeupdate', () => {\r\n      this.player.state.currentTime = this.media.currentTime;\r\n      this.player.emit('timeupdate', this.media.currentTime);\r\n      \r\n      if (this.player.options.onTimeUpdate) {\r\n        this.player.options.onTimeUpdate.call(this.player, this.media.currentTime);\r\n      }\r\n    });\r\n\r\n    this.media.addEventListener('volumechange', () => {\r\n      this.player.state.volume = this.media.volume;\r\n      this.player.state.muted = this.media.muted;\r\n      this.player.emit('volumechange', this.media.volume);\r\n    });\r\n\r\n    this.media.addEventListener('waiting', () => {\r\n      this.player.state.buffering = true;\r\n      this.player.emit('waiting');\r\n    });\r\n\r\n    this.media.addEventListener('canplay', () => {\r\n      this.player.state.buffering = false;\r\n      this.player.emit('canplay');\r\n    });\r\n\r\n    this.media.addEventListener('error', () => {\r\n      this.player.handleError(this.media.error);\r\n    });\r\n  }\r\n\r\n  handleHlsError(data) {\r\n    // Log detailed error info\r\n    this.player.log(`HLS Error - Type: ${data.type}, Details: ${data.details}, Fatal: ${data.fatal}`, 'warn');\r\n    if (data.response) {\r\n      this.player.log(`Response code: ${data.response.code}, URL: ${data.response.url}`, 'warn');\r\n    }\r\n    \r\n    if (data.fatal) {\r\n      switch (data.type) {\r\n        case window.Hls.ErrorTypes.NETWORK_ERROR:\r\n          this.player.log('Fatal network error, trying to recover...', 'error');\r\n          this.player.log(`Network error details: ${data.details}`, 'error');\r\n          setTimeout(() => {\r\n            this.hls.startLoad();\r\n          }, 1000);\r\n          break;\r\n          \r\n        case window.Hls.ErrorTypes.MEDIA_ERROR:\r\n          this.player.log('Fatal media error, trying to recover...', 'error');\r\n          this.hls.recoverMediaError();\r\n          break;\r\n          \r\n        default:\r\n          this.player.log('Fatal error, cannot recover', 'error');\r\n          this.player.handleError(new Error(`HLS Error: ${data.type} - ${data.details}`));\r\n          this.hls.destroy();\r\n          break;\r\n      }\r\n    } else {\r\n      this.player.log('Non-fatal HLS error: ' + data.details, 'warn');\r\n    }\r\n  }\r\n\r\n  play() {\r\n    // Save scroll position to prevent browser from scrolling to video\r\n    const scrollX = window.scrollX;\r\n    const scrollY = window.scrollY;\r\n    \r\n    const promise = this.media.play();\r\n    \r\n    // Restore scroll position immediately to prevent auto-scroll\r\n    window.scrollTo(scrollX, scrollY);\r\n    \r\n    if (promise !== undefined) {\r\n      promise.catch(error => {\r\n        this.player.log('Play failed:', error, 'warn');\r\n      });\r\n    }\r\n  }\r\n\r\n  pause() {\r\n    this.media.pause();\r\n  }\r\n\r\n  seek(time) {\r\n    this.media.currentTime = time;\r\n  }\r\n\r\n  setVolume(volume) {\r\n    this.media.volume = volume;\r\n  }\r\n\r\n  setMuted(muted) {\r\n    this.media.muted = muted;\r\n  }\r\n\r\n  setPlaybackSpeed(speed) {\r\n    this.media.playbackRate = speed;\r\n  }\r\n\r\n  switchQuality(levelIndex) {\r\n    if (this.hls) {\r\n      this.hls.currentLevel = levelIndex;\r\n    }\r\n  }\r\n\r\n  getQualities() {\r\n    if (this.hls && this.hls.levels) {\r\n      return this.hls.levels.map((level, index) => {\r\n        const height = Number(level.height) || 0;\r\n        const bitrate = Number(level.bitrate) || 0;\r\n        const kb = bitrate > 0 ? Math.round(bitrate / 1000) : 0;\r\n\r\n        // Video HLS typically has height -> show \"720p\".\r\n        // Audio-only HLS often has height=0 -> show bitrate label instead.\r\n        const name = height > 0 ? `${height}p` : (kb > 0 ? `${kb} kb` : 'Auto');\r\n\r\n        return {\r\n          index,\r\n          height: level.height,\r\n          width: level.width,\r\n          bitrate: level.bitrate,\r\n          name\r\n        };\r\n      });\r\n    }\r\n    return [];\r\n  }\r\n\r\n  getCurrentQuality() {\r\n    if (this.hls) {\r\n      return this.hls.currentLevel;\r\n    }\r\n    return -1;\r\n  }\r\n\r\n  destroy() {\r\n    if (this.hls) {\r\n      this.hls.destroy();\r\n      this.hls = null;\r\n    }\r\n  }\r\n}\r\n\r\n"],
-  "mappings": "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",
-  "names": []
-}