vidply 1.0.26 → 1.0.27

package/dist/dev/vidply.chunk-BCOFCT6U.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/renderers/HTML5Renderer.js"],
+  "sourcesContent": ["/**\r\n * HTML5 Media Renderer\r\n */\r\n\r\nexport class HTML5Renderer {\r\n  constructor(player) {\r\n    this.player = player;\r\n    this.media = player.element;\r\n  }\r\n\r\n  async init() {\r\n    // Hide native controls\r\n    this.media.controls = false;\r\n    this.media.removeAttribute('controls');\r\n    \r\n    this.attachEvents();\r\n    \r\n    // Set preload\r\n    this.media.preload = this.player.options.preload;\r\n    \r\n    // Load media\r\n    this.media.load();\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  attachEvents() {\r\n    // Playback events\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      // Pause other players if enabled\r\n      if (this.player.options.pauseOthersOnPlay) {\r\n        this.pauseOtherPlayers();\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      // Handle loop\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      if (this.player.options.onVolumeChange) {\r\n        this.player.options.onVolumeChange.call(this.player, this.media.volume);\r\n      }\r\n    });\r\n\r\n    this.media.addEventListener('seeking', () => {\r\n      this.player.state.seeking = true;\r\n      this.player.emit('seeking');\r\n    });\r\n\r\n    this.media.addEventListener('seeked', () => {\r\n      this.player.state.seeking = false;\r\n      this.player.emit('seeked');\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('progress', () => {\r\n      if (this.media.buffered.length > 0) {\r\n        const buffered = this.media.buffered.end(this.media.buffered.length - 1);\r\n        this.player.emit('progress', buffered);\r\n      }\r\n    });\r\n\r\n    this.media.addEventListener('error', (e) => {\r\n      this.player.handleError(this.media.error);\r\n    });\r\n\r\n    this.media.addEventListener('ratechange', () => {\r\n      this.player.state.playbackSpeed = this.media.playbackRate;\r\n      this.player.emit('ratechange', this.media.playbackRate);\r\n    });\r\n  }\r\n\r\n  pauseOtherPlayers() {\r\n    // Pause other VidPly instances\r\n    const allPlayers = document.querySelectorAll('.vidply-player');\r\n    allPlayers.forEach(playerEl => {\r\n      if (playerEl !== this.player.container) {\r\n        const video = playerEl.querySelector('video, audio');\r\n        if (video && !video.paused) {\r\n          video.pause();\r\n        }\r\n      }\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        // If autoplay failed, try muted autoplay\r\n        if (this.player.options.autoplay && !this.player.state.muted) {\r\n          this.player.log('Retrying play with muted audio', 'info');\r\n          this.media.muted = true;\r\n          \r\n          // Save scroll position again for retry\r\n          const retryScrollX = window.scrollX;\r\n          const retryScrollY = window.scrollY;\r\n          this.media.play().then(() => {\r\n            window.scrollTo(retryScrollX, retryScrollY);\r\n          }).catch(err => {\r\n            this.player.handleError(err);\r\n          });\r\n        }\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  /**\r\n   * Get available quality levels from source elements\r\n   * @returns {Array} Array of quality objects with index, height, width, and src\r\n   */\r\n  getQualities() {\r\n    const sources = Array.from(this.media.querySelectorAll('source'));\r\n    \r\n    if (sources.length <= 1) {\r\n      return [];\r\n    }\r\n\r\n    return sources.map((source, index) => {\r\n      // Try to extract quality from data attributes or label\r\n      const label = source.getAttribute('data-quality') || source.getAttribute('label') || '';\r\n      const height = source.getAttribute('data-height') || this.extractHeightFromLabel(label);\r\n      const width = source.getAttribute('data-width') || '';\r\n      \r\n      return {\r\n        index,\r\n        height: height ? parseInt(height) : 0,\r\n        width: width ? parseInt(width) : 0,\r\n        src: source.src,\r\n        type: source.type,\r\n        name: label || (height ? `${height}p` : `Quality ${index + 1}`)\r\n      };\r\n    }).filter(q => q.height > 0); // Only return qualities with valid height\r\n  }\r\n\r\n  /**\r\n   * Extract height from quality label (e.g., \"1080p\" -> 1080)\r\n   * @param {string} label \r\n   * @returns {number}\r\n   */\r\n  extractHeightFromLabel(label) {\r\n    const match = label.match(/(\\d+)p/i);\r\n    return match ? parseInt(match[1]) : 0;\r\n  }\r\n\r\n  /**\r\n   * Switch to a specific quality level\r\n   * @param {number} qualityIndex - Index of the quality level (-1 for auto, not applicable for HTML5)\r\n   */\r\n  switchQuality(qualityIndex) {\r\n    const qualities = this.getQualities();\r\n    \r\n    if (qualityIndex < 0 || qualityIndex >= qualities.length) {\r\n      this.player.log('Invalid quality index', 'warn');\r\n      return;\r\n    }\r\n\r\n    const quality = qualities[qualityIndex];\r\n    const currentTime = this.media.currentTime;\r\n    const wasPlaying = !this.media.paused;\r\n\r\n    // Store the current source for comparison\r\n    const currentSrc = this.media.currentSrc;\r\n    \r\n    // Don't switch if already at this quality\r\n    if (currentSrc === quality.src) {\r\n      this.player.log('Already at this quality level', 'info');\r\n      return;\r\n    }\r\n\r\n    this.player.log(`Switching to quality: ${quality.name}`, 'info');\r\n\r\n    // Update the src\r\n    this.media.src = quality.src;\r\n    \r\n    // Wait for the new source to load, then restore playback state\r\n    const onLoadedMetadata = () => {\r\n      this.media.removeEventListener('loadedmetadata', onLoadedMetadata);\r\n      \r\n      // Restore playback position\r\n      this.media.currentTime = currentTime;\r\n      \r\n      // Resume playback if it was playing\r\n      if (wasPlaying) {\r\n        this.media.play().catch(err => {\r\n          this.player.log('Failed to resume playback after quality switch', 'warn');\r\n        });\r\n      }\r\n      \r\n      // Emit quality change event\r\n      this.player.emit('qualitychange', { quality: quality.name, index: qualityIndex });\r\n    };\r\n\r\n    this.media.addEventListener('loadedmetadata', onLoadedMetadata);\r\n    this.media.load();\r\n  }\r\n\r\n  /**\r\n   * Get current quality index\r\n   * @returns {number}\r\n   */\r\n  getCurrentQuality() {\r\n    const qualities = this.getQualities();\r\n    const currentSrc = this.media.currentSrc;\r\n    \r\n    for (let i = 0; i < qualities.length; i++) {\r\n      if (qualities[i].src === currentSrc) {\r\n        return i;\r\n      }\r\n    }\r\n    \r\n    return 0; // Default to first quality if not found\r\n  }\r\n\r\n  destroy() {\r\n    // Remove event listeners\r\n    this.media.removeEventListener('loadedmetadata', () => {});\r\n    this.media.removeEventListener('play', () => {});\r\n    this.media.removeEventListener('pause', () => {});\r\n    // ... (other listeners would be removed in a real implementation)\r\n  }\r\n}\r\n\r\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/dev/vidply.esm.js

@@ -5,7 +5,7 @@
  */
 import {
   HTML5Renderer
-} from "./vidply.chunk-UEIJOJH6.js";
+} from "./vidply.chunk-BCOFCT6U.js";
 import {
   DOMUtils,
   DraggableResizable,
@@ -3086,6 +3086,7 @@ var Player = class _Player extends EventEmitter {
       this.element.appendChild(mediaElement);
       this.element = mediaElement;
     }
+    this._originalElement = this.element;
     this.options = {
       // Display
       width: null,
@@ -3499,10 +3500,12 @@ var Player = class _Player extends EventEmitter {
     this.playButtonOverlay.style.top = `${videoCenter}px`;
   }
   async initializeRenderer() {
-    const src = this.element.src || this.element.querySelector("source")?.src;
+    let src = this._pendingSource || this.element.src || this.element.querySelector("source")?.src;
     if (!src) {
       throw new Error("No media source found");
     }
+    this.currentSource = src;
+    this._pendingSource = null;
     const sourceElements = this.sourceElements;
     for (const sourceEl of sourceElements) {
       const descSrc = sourceEl.getAttribute("data-desc-src");
@@ -3555,14 +3558,17 @@ var Player = class _Player extends EventEmitter {
     }
     let rendererClass = HTML5Renderer;
     if (src.includes("youtube.com") || src.includes("youtu.be")) {
-      const module = await import("./vidply.YouTubeRenderer-QLMMD757.js");
+      const module = await import("./vidply.YouTubeRenderer-6MGKEFTZ.js");
       rendererClass = module.YouTubeRenderer || module.default;
     } else if (src.includes("vimeo.com")) {
-      const module = await import("./vidply.VimeoRenderer-DCETT5IZ.js");
+      const module = await import("./vidply.VimeoRenderer-VPH4RNES.js");
       rendererClass = module.VimeoRenderer || module.default;
     } else if (src.includes(".m3u8")) {
-      const module = await import("./vidply.HLSRenderer-X46P47LY.js");
+      const module = await import("./vidply.HLSRenderer-ENLZE4QS.js");
       rendererClass = module.HLSRenderer || module.default;
+    } else if (src.includes("soundcloud.com") || src.includes("api.soundcloud.com")) {
+      const module = await import("./vidply.SoundCloudRenderer-CD7VJKNS.js");
+      rendererClass = module.SoundCloudRenderer || module.default;
     }
     this.log(`Using ${rendererClass?.name || "HTML5Renderer"} renderer`);
     this.renderer = new rendererClass(this);
@@ -3674,6 +3680,11 @@ var Player = class _Player extends EventEmitter {
     const resolvedPoster = this.resolvePosterPath(poster);
     this.videoWrapper.style.setProperty("--vidply-poster-image", `url("${resolvedPoster}")`);
     this.videoWrapper.classList.add("vidply-forced-poster");
+    if (this._isAudioContent && this.container) {
+      this.container.classList.add("vidply-audio-content");
+    } else if (this.container) {
+      this.container.classList.remove("vidply-audio-content");
+    }
   }
   hidePosterOverlay() {
     if (!this.videoWrapper) {
@@ -3716,6 +3727,15 @@ var Player = class _Player extends EventEmitter {
    * @param {string} [config.audioDescriptionSrc] - Audio description video URL
    * @param {string} [config.signLanguageSrc] - Sign language video URL
    */
+  /**
+   * Check if a source URL requires an external renderer (YouTube, Vimeo, SoundCloud, HLS)
+   * @param {string} src - Source URL
+   * @returns {boolean}
+   */
+  isExternalRendererUrl(src) {
+    if (!src) return false;
+    return src.includes("youtube.com") || src.includes("youtu.be") || src.includes("vimeo.com") || src.includes("soundcloud.com") || src.includes("api.soundcloud.com") || src.includes(".m3u8");
+  }
   async load(config) {
     try {
       this.log("Loading new media:", config.src);
@@ -3727,12 +3747,44 @@ var Player = class _Player extends EventEmitter {
       const existingTracks = this.trackElements;
       existingTracks.forEach((track) => track.remove());
       this.invalidateTrackCache();
-      this.element.src = config.src;
-      if (config.type) {
-        this.element.type = config.type;
+      const isExternalRenderer = this.isExternalRendererUrl(config.src);
+      if (isExternalRenderer) {
+        this._switchingRenderer = true;
+      }
+      if (!isExternalRenderer) {
+        this.element.src = config.src;
+        if (config.type) {
+          this.element.type = config.type;
+        }
+      } else {
+        this.element.removeAttribute("src");
+        const sources = this.element.querySelectorAll("source");
+        sources.forEach((s) => s.removeAttribute("src"));
+      }
+      this._pendingSource = config.src;
+      this._isAudioContent = config.type && config.type.startsWith("audio/");
+      if (this.container) {
+        if (this._isAudioContent) {
+          this.container.classList.add("vidply-audio-content");
+        } else {
+          this.container.classList.remove("vidply-audio-content");
+        }
       }
       if (config.poster && this.element.tagName === "VIDEO") {
-        this.element.poster = this.resolvePosterPath(config.poster);
+        if (this._isAudioContent) {
+          this.element.removeAttribute("poster");
+          if (this.videoWrapper) {
+            const resolvedPoster = this.resolvePosterPath(config.poster);
+            this.videoWrapper.style.setProperty("--vidply-poster-image", `url("${resolvedPoster}")`);
+            this.videoWrapper.classList.add("vidply-forced-poster");
+          }
+        } else {
+          this.element.poster = this.resolvePosterPath(config.poster);
+          if (this.videoWrapper) {
+            this.videoWrapper.classList.remove("vidply-forced-poster");
+            this.videoWrapper.style.removeProperty("--vidply-poster-image");
+          }
+        }
       }
       if (config.tracks && config.tracks.length > 0) {
         config.tracks.forEach((trackConfig) => {
@@ -3775,6 +3827,13 @@ var Player = class _Player extends EventEmitter {
         this.renderer.media = this.element;
         this.element.load();
       }
+      if (isExternalRenderer) {
+        setTimeout(() => {
+          this._switchingRenderer = false;
+        }, 500);
+      } else {
+        this._switchingRenderer = false;
+      }
       window.scrollTo(scrollX, scrollY);
       if (this.captionManager) {
         this.captionManager.destroy();
@@ -3833,11 +3892,13 @@ var Player = class _Player extends EventEmitter {
     const isYouTube = src.includes("youtube.com") || src.includes("youtu.be");
     const isVimeo = src.includes("vimeo.com");
     const isHLS = src.includes(".m3u8");
+    const isSoundCloud = src.includes("soundcloud.com") || src.includes("api.soundcloud.com");
     const currentRendererName = this.renderer.constructor.name;
     if (isYouTube && currentRendererName !== "YouTubeRenderer") return true;
     if (isVimeo && currentRendererName !== "VimeoRenderer") return true;
     if (isHLS && currentRendererName !== "HLSRenderer") return true;
-    if (!isYouTube && !isVimeo && !isHLS && currentRendererName !== "HTML5Renderer") return true;
+    if (isSoundCloud && currentRendererName !== "SoundCloudRenderer") return true;
+    if (!isYouTube && !isVimeo && !isHLS && !isSoundCloud && currentRendererName !== "HTML5Renderer") return true;
     return false;
   }
   // Playback controls
@@ -6049,6 +6110,10 @@ var Player = class _Player extends EventEmitter {
   }
   // Error handling
   handleError(error) {
+    if (this._switchingRenderer) {
+      this.log("Suppressing error during renderer switch:", error, "debug");
+      return;
+    }
     this.log("Error:", error, "error");
     this.emit("error", error);
     if (this.options.onError) {
@@ -6587,6 +6652,8 @@ var PlaylistManager = class {
       loop: options.loop || false,
       showPanel: options.showPanel !== false,
       // Default true
+      recreatePlayers: options.recreatePlayers || false,
+      // New: recreate player for each track type
       ...options
     };
     this.container = null;
@@ -6595,6 +6662,8 @@ var PlaylistManager = class {
     this.navigationFeedback = null;
     this.isPanelVisible = this.options.showPanel !== false;
     this.isChangingTrack = false;
+    this.hostElement = options.hostElement || null;
+    this.PlayerClass = options.PlayerClass || null;
     this.handleTrackEnd = this.handleTrackEnd.bind(this);
     this.handleTrackError = this.handleTrackError.bind(this);
     this.player.playlistManager = this;
@@ -6604,6 +6673,159 @@ var PlaylistManager = class {
       this.loadPlaylist(this.initialTracks);
     }
   }
+  /**
+   * Determine the media type for a track
+   * @param {Object} track - Track object
+   * @returns {string} - 'audio', 'video', 'youtube', 'vimeo', 'soundcloud', 'hls'
+   */
+  getTrackMediaType(track) {
+    const src = track.src || "";
+    if (src.includes("youtube.com") || src.includes("youtu.be")) {
+      return "youtube";
+    }
+    if (src.includes("vimeo.com")) {
+      return "vimeo";
+    }
+    if (src.includes("soundcloud.com") || src.includes("api.soundcloud.com")) {
+      return "soundcloud";
+    }
+    if (src.includes(".m3u8")) {
+      return "hls";
+    }
+    if (track.type && track.type.startsWith("audio/")) {
+      return "audio";
+    }
+    return "video";
+  }
+  /**
+   * Recreate the player with the appropriate element type for the track
+   * @param {Object} track - Track to load
+   * @param {boolean} autoPlay - Whether to auto-play after creation
+   */
+  async recreatePlayerForTrack(track, autoPlay = false) {
+    if (!this.hostElement || !this.PlayerClass) {
+      console.warn("VidPly Playlist: Cannot recreate player - missing hostElement or PlayerClass");
+      return false;
+    }
+    const mediaType = this.getTrackMediaType(track);
+    const elementType = mediaType === "audio" ? "audio" : "video";
+    const wasVisible = this.isPanelVisible;
+    const savedTracks = [...this.tracks];
+    const savedIndex = this.currentIndex;
+    if (this.trackArtworkElement && this.trackArtworkElement.parentNode) {
+      this.trackArtworkElement.parentNode.removeChild(this.trackArtworkElement);
+    }
+    if (this.trackInfoElement && this.trackInfoElement.parentNode) {
+      this.trackInfoElement.parentNode.removeChild(this.trackInfoElement);
+    }
+    if (this.navigationFeedback && this.navigationFeedback.parentNode) {
+      this.navigationFeedback.parentNode.removeChild(this.navigationFeedback);
+    }
+    if (this.playlistPanel && this.playlistPanel.parentNode) {
+      this.playlistPanel.parentNode.removeChild(this.playlistPanel);
+    }
+    if (this.player) {
+      this.player.off("ended", this.handleTrackEnd);
+      this.player.off("error", this.handleTrackError);
+      this.player.destroy();
+    }
+    this.hostElement.innerHTML = "";
+    const mediaElement = document.createElement(elementType);
+    mediaElement.setAttribute("preload", "metadata");
+    if (elementType === "video" && track.poster && (mediaType === "video" || mediaType === "hls")) {
+      mediaElement.setAttribute("poster", track.poster);
+    }
+    const isExternalRenderer = ["youtube", "vimeo", "soundcloud", "hls"].includes(mediaType);
+    if (!isExternalRenderer) {
+      const source = document.createElement("source");
+      source.src = track.src;
+      if (track.type) {
+        source.type = track.type;
+      }
+      mediaElement.appendChild(source);
+      if (track.tracks && track.tracks.length > 0) {
+        track.tracks.forEach((trackConfig) => {
+          const trackEl = document.createElement("track");
+          trackEl.src = trackConfig.src;
+          trackEl.kind = trackConfig.kind || "captions";
+          trackEl.srclang = trackConfig.srclang || "en";
+          trackEl.label = trackConfig.label || trackConfig.srclang;
+          if (trackConfig.default) {
+            trackEl.default = true;
+          }
+          mediaElement.appendChild(trackEl);
+        });
+      }
+    }
+    this.hostElement.appendChild(mediaElement);
+    const playerOptions = {
+      mediaType: elementType,
+      poster: track.poster,
+      audioDescriptionSrc: track.audioDescriptionSrc || null,
+      audioDescriptionDuration: track.audioDescriptionDuration || null,
+      signLanguageSrc: track.signLanguageSrc || null
+    };
+    this.player = new this.PlayerClass(mediaElement, playerOptions);
+    this.player.playlistManager = this;
+    await new Promise((resolve) => {
+      this.player.on("ready", resolve);
+    });
+    this.player.on("ended", this.handleTrackEnd);
+    this.player.on("error", this.handleTrackError);
+    if (this.player.container) {
+      if (this.trackArtworkElement) {
+        const videoWrapper = this.player.container.querySelector(".vidply-video-wrapper");
+        if (videoWrapper) {
+          this.player.container.insertBefore(this.trackArtworkElement, videoWrapper);
+        } else {
+          this.player.container.appendChild(this.trackArtworkElement);
+        }
+      }
+      if (this.trackInfoElement) {
+        this.player.container.appendChild(this.trackInfoElement);
+      }
+      if (this.navigationFeedback) {
+        this.player.container.appendChild(this.navigationFeedback);
+      }
+      if (this.playlistPanel) {
+        this.player.container.appendChild(this.playlistPanel);
+      }
+    }
+    this.container = this.player.container;
+    this.updatePlayerControls();
+    this.tracks = savedTracks;
+    this.currentIndex = savedIndex;
+    this.updatePlaylistUI();
+    this.isPanelVisible = wasVisible;
+    if (this.playlistPanel) {
+      this.playlistPanel.style.display = wasVisible ? "" : "none";
+    }
+    if (isExternalRenderer) {
+      this.player.load({
+        src: track.src,
+        type: track.type,
+        poster: track.poster,
+        tracks: track.tracks || [],
+        audioDescriptionSrc: track.audioDescriptionSrc || null,
+        signLanguageSrc: track.signLanguageSrc || null
+      });
+    } else {
+      this.player.load({
+        src: track.src,
+        type: track.type,
+        poster: track.poster,
+        tracks: track.tracks || [],
+        audioDescriptionSrc: track.audioDescriptionSrc || null,
+        signLanguageSrc: track.signLanguageSrc || null
+      });
+    }
+    if (autoPlay) {
+      setTimeout(() => {
+        this.player.play();
+      }, 100);
+    }
+    return true;
+  }
   init() {
     this.player.on("ended", this.handleTrackEnd);
     this.player.on("error", this.handleTrackError);
@@ -6714,7 +6936,7 @@ var PlaylistManager = class {
    * Load a track without playing
    * @param {number} index - Track index
    */
-  loadTrack(index) {
+  async loadTrack(index) {
     if (index < 0 || index >= this.tracks.length) {
       console.warn("VidPly Playlist: Invalid track index", index);
       return;
@@ -6722,6 +6944,25 @@ var PlaylistManager = class {
     const track = this.tracks[index];
     this.isChangingTrack = true;
     this.currentIndex = index;
+    if (this.options.recreatePlayers && this.hostElement && this.PlayerClass) {
+      const currentMediaType = this.player ? this.player.element.tagName === "AUDIO" ? "audio" : "video" : null;
+      const newMediaType = this.getTrackMediaType(track);
+      const newElementType = newMediaType === "audio" || newMediaType === "soundcloud" ? "audio" : "video";
+      if (currentMediaType !== newElementType) {
+        await this.recreatePlayerForTrack(track, false);
+        this.updateTrackInfo(track);
+        this.updatePlaylistUI();
+        this.player.emit("playlisttrackchange", {
+          index,
+          item: track,
+          total: this.tracks.length
+        });
+        setTimeout(() => {
+          this.isChangingTrack = false;
+        }, 150);
+        return;
+      }
+    }
     this.player.load({
       src: track.src,
       type: track.type,
@@ -6746,7 +6987,7 @@ var PlaylistManager = class {
    * @param {number} index - Track index
    * @param {boolean} userInitiated - Whether this was triggered by user action (default: false)
    */
-  play(index, userInitiated = false) {
+  async play(index, userInitiated = false) {
     if (index < 0 || index >= this.tracks.length) {
       console.warn("VidPly Playlist: Invalid track index", index);
       return;
@@ -6754,6 +6995,25 @@ var PlaylistManager = class {
     const track = this.tracks[index];
     this.isChangingTrack = true;
     this.currentIndex = index;
+    if (this.options.recreatePlayers && this.hostElement && this.PlayerClass) {
+      const currentMediaType = this.player ? this.player.element.tagName === "AUDIO" ? "audio" : "video" : null;
+      const newMediaType = this.getTrackMediaType(track);
+      const newElementType = newMediaType === "audio" || newMediaType === "soundcloud" ? "audio" : "video";
+      if (currentMediaType !== newElementType) {
+        await this.recreatePlayerForTrack(track, true);
+        this.updateTrackInfo(track);
+        this.updatePlaylistUI();
+        this.player.emit("playlisttrackchange", {
+          index,
+          item: track,
+          total: this.tracks.length
+        });
+        setTimeout(() => {
+          this.isChangingTrack = false;
+        }, 150);
+        return;
+      }
+    }
     this.player.load({
       src: track.src,
       type: track.type,
@@ -6815,10 +7075,26 @@ var PlaylistManager = class {
       this.next();
     }
   }
+  /**
+   * Check if a source URL requires an external renderer
+   * @param {string} src - Source URL
+   * @returns {boolean}
+   */
+  isExternalRendererUrl(src) {
+    if (!src) return false;
+    return src.includes("youtube.com") || src.includes("youtu.be") || src.includes("vimeo.com") || src.includes("soundcloud.com") || src.includes("api.soundcloud.com") || src.includes(".m3u8");
+  }
   /**
    * Handle track error
    */
   handleTrackError(e) {
+    const currentTrack = this.getCurrentTrack();
+    if (currentTrack && currentTrack.src && this.isExternalRendererUrl(currentTrack.src)) {
+      return;
+    }
+    if (this.isChangingTrack) {
+      return;
+    }
     console.error("VidPly Playlist: Track error", e);
     if (this.options.autoAdvance) {
       setTimeout(() => {