vidply 1.0.20 → 1.0.21

package/dist/vidply.css

@@ -2117,6 +2117,33 @@
    ============================================================================ */
 
 /* Track Info Display (below video, above playlist) */
+/* Track Artwork - Displays album art/poster above audio player */
+.vidply-track-artwork {
+    aspect-ratio: 16 / 3;
+    background-color: var(--vidply-black);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-bottom: 1px solid var(--vidply-border-light);
+    order: 1; /* Before video-wrapper */
+    overflow: hidden;
+    position: relative;
+    transition: background-image 0.3s ease-in-out;
+    width: 100%;
+}
+
+/* Optional: Add a subtle overlay for better text readability if needed */
+.vidply-track-artwork::after {
+    background: linear-gradient(180deg, transparent 0%, var(--vidply-black-30) 100%);
+    bottom: 0;
+    content: '';
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
 .vidply-track-info {
     background: var(--vidply-bg-track-info);
     border-bottom: 1px solid var(--vidply-border-light);
@@ -3779,6 +3806,10 @@
         padding: 10px 12px;
     }
 
+    .vidply-track-artwork {
+        aspect-ratio: 16 / 3;
+    }
+    
     .vidply-track-info {
         padding: 12px 16px;
     }

package/dist/vidply.esm.js

@@ -129,14 +129,21 @@ var init_HTML5Renderer = __esm({
         });
       }
       play() {
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY;
         const promise = this.media.play();
+        window.scrollTo(scrollX, scrollY);
         if (promise !== void 0) {
           promise.catch((error) => {
             this.player.log("Play failed:", error, "warn");
             if (this.player.options.autoplay && !this.player.state.muted) {
               this.player.log("Retrying play with muted audio", "info");
               this.media.muted = true;
-              this.media.play().catch((err) => {
+              const retryScrollX = window.scrollX;
+              const retryScrollY = window.scrollY;
+              this.media.play().then(() => {
+                window.scrollTo(retryScrollX, retryScrollY);
+              }).catch((err) => {
                 this.player.handleError(err);
               });
             }
@@ -558,6 +565,14 @@ var 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}"
   }
 };
 
@@ -717,6 +732,14 @@ var de = {
     minutes: "{count} Minuten",
     second: "{count} Sekunde",
     seconds: "{count} Sekunden"
+  },
+  playlist: {
+    title: "Wiedergabeliste",
+    trackOf: "Titel {current} von {total}",
+    nowPlaying: "L\xE4uft gerade: Titel {current} von {total}. {title}{artist}",
+    by: " von ",
+    untitled: "Ohne Titel",
+    trackUntitled: "Titel {number}"
   }
 };
 
@@ -876,6 +899,14 @@ var es = {
     minutes: "{count} minutos",
     second: "{count} segundo",
     seconds: "{count} segundos"
+  },
+  playlist: {
+    title: "Lista de reproducci\xF3n",
+    trackOf: "Pista {current} de {total}",
+    nowPlaying: "Reproduciendo ahora: Pista {current} de {total}. {title}{artist}",
+    by: " por ",
+    untitled: "Sin t\xEDtulo",
+    trackUntitled: "Pista {number}"
   }
 };
 
@@ -1035,6 +1066,14 @@ var 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}"
   }
 };
 
@@ -1194,6 +1233,14 @@ var ja = {
     minutes: "{count}\u5206",
     second: "{count}\u79D2",
     seconds: "{count}\u79D2"
+  },
+  playlist: {
+    title: "\u30D7\u30EC\u30A4\u30EA\u30B9\u30C8",
+    trackOf: "\u30C8\u30E9\u30C3\u30AF {current}/{total}",
+    nowPlaying: "\u518D\u751F\u4E2D: \u30C8\u30E9\u30C3\u30AF {current}/{total}. {title}{artist}",
+    by: " - ",
+    untitled: "\u30BF\u30A4\u30C8\u30EB\u306A\u3057",
+    trackUntitled: "\u30C8\u30E9\u30C3\u30AF {number}"
   }
 };
 
@@ -2680,7 +2727,8 @@ var ControlBar = class {
       attributes: {
         "type": "button",
         "aria-label": i18n.t("player.quality"),
-        "aria-expanded": "false"
+        "aria-expanded": "false",
+        "title": i18n.t("player.quality")
       }
     });
     button.appendChild(createIconElement("hd"));
@@ -7223,7 +7271,10 @@ var YouTubeRenderer = class {
   }
   play() {
     if (this.isReady && this.youtube) {
+      const scrollX = window.scrollX;
+      const scrollY = window.scrollY;
       this.youtube.playVideo();
+      window.scrollTo(scrollX, scrollY);
     }
   }
   pause() {
@@ -7417,9 +7468,12 @@ var VimeoRenderer = class {
   }
   play() {
     if (this.isReady && this.vimeo) {
+      const scrollX = window.scrollX;
+      const scrollY = window.scrollY;
       this.vimeo.play().catch((error) => {
         this.player.log("Play error:", error, "warn");
       });
+      window.scrollTo(scrollX, scrollY);
     }
   }
   pause() {
@@ -7492,6 +7546,11 @@ var HLSRenderer = class {
     }
   }
   canPlayNatively() {
+    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+    if (!isSafari && !isIOS) {
+      return false;
+    }
     const video = document.createElement("video");
     return video.canPlayType("application/vnd.apple.mpegurl") !== "";
   }
@@ -7666,7 +7725,10 @@ var HLSRenderer = class {
     }
   }
   play() {
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
     const promise = this.media.play();
+    window.scrollTo(scrollX, scrollY);
     if (promise !== void 0) {
       promise.catch((error) => {
         this.player.log("Play failed:", error, "warn");
@@ -8016,6 +8078,16 @@ var Player = class _Player extends EventEmitter {
       className: `${this.options.classPrefix}-video-wrapper`
     });
     this.element.parentNode.insertBefore(this.container, this.element);
+    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);
     this.element.controls = false;
@@ -8324,6 +8396,8 @@ var Player = 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 {
@@ -8331,6 +8405,8 @@ var Player = class _Player extends EventEmitter {
       if (this.renderer) {
         this.pause();
       }
+      const scrollX = window.scrollX || window.pageXOffset;
+      const scrollY = window.scrollY || window.pageYOffset;
       const existingTracks = this.trackElements;
       existingTracks.forEach((track) => track.remove());
       this.invalidateTrackCache();
@@ -8355,6 +8431,17 @@ var Player = class _Player extends EventEmitter {
         });
         this.invalidateTrackCache();
       }
+      const wasSignLanguageEnabled = this.state.signLanguageEnabled;
+      const wasAudioDescriptionEnabled = this.state.audioDescriptionEnabled;
+      this.audioDescriptionSrc = config.audioDescriptionSrc || null;
+      this.signLanguageSrc = config.signLanguageSrc || null;
+      this.originalSrc = config.src;
+      if (wasAudioDescriptionEnabled) {
+        this.disableAudioDescription();
+      }
+      if (wasSignLanguageEnabled) {
+        this.disableSignLanguage();
+      }
       const shouldChangeRenderer = this.shouldChangeRenderer(config.src);
       if (shouldChangeRenderer && this.renderer) {
         this.renderer.destroy();
@@ -8366,21 +8453,35 @@ var Player = class _Player extends EventEmitter {
         this.renderer.media = this.element;
         this.element.load();
       }
+      window.scrollTo(scrollX, scrollY);
       if (this.captionManager) {
         this.captionManager.destroy();
         this.captionManager = new CaptionManager(this);
       }
       if (this.transcriptManager) {
-        const wasVisible = this.transcriptManager.isVisible;
+        const wasTranscriptVisible = this.transcriptManager.isVisible;
         this.transcriptManager.destroy();
         this.transcriptManager = new TranscriptManager(this);
-        if (wasVisible) {
+        if (wasTranscriptVisible && this.controlBar && this.controlBar.hasCaptionTracks()) {
           this.transcriptManager.showTranscript();
         }
       }
       if (this.controlBar) {
         this.updateControlBar();
       }
+      window.scrollTo(scrollX, scrollY);
+      if (wasSignLanguageEnabled && this.signLanguageSrc) {
+        setTimeout(() => {
+          this.enableSignLanguage();
+          window.scrollTo(scrollX, scrollY);
+        }, 150);
+      }
+      if (wasAudioDescriptionEnabled && this.audioDescriptionSrc) {
+        setTimeout(() => {
+          this.enableAudioDescription();
+          window.scrollTo(scrollX, scrollY);
+        }, 150);
+      }
       this.emit("sourcechange", config);
       this.log("Media loaded successfully");
     } catch (error) {
@@ -8402,6 +8503,7 @@ var Player = class _Player extends EventEmitter {
     controlBar.createControls();
     controlBar.attachEvents();
     controlBar.setupAutoHide();
+    controlBar.setupOverflowDetection();
   }
   shouldChangeRenderer(src) {
     if (!this.renderer) return true;
@@ -11146,6 +11248,7 @@ var PlaylistManager = class {
     this.trackInfoElement = null;
     this.navigationFeedback = null;
     this.isPanelVisible = this.options.showPanel !== false;
+    this.isChangingTrack = false;
     this.handleTrackEnd = this.handleTrackEnd.bind(this);
     this.handleTrackError = this.handleTrackError.bind(this);
     this.player.playlistManager = this;
@@ -11269,12 +11372,15 @@ var PlaylistManager = class {
       return;
     }
     const track = this.tracks[index];
+    this.isChangingTrack = true;
     this.currentIndex = index;
     this.player.load({
       src: track.src,
       type: track.type,
       poster: track.poster,
-      tracks: track.tracks || []
+      tracks: track.tracks || [],
+      audioDescriptionSrc: track.audioDescriptionSrc || null,
+      signLanguageSrc: track.signLanguageSrc || null
     });
     this.updateTrackInfo(track);
     this.updatePlaylistUI();
@@ -11283,6 +11389,9 @@ var PlaylistManager = class {
       item: track,
       total: this.tracks.length
     });
+    setTimeout(() => {
+      this.isChangingTrack = false;
+    }, 150);
   }
   /**
    * Play a specific track
@@ -11295,12 +11404,15 @@ var PlaylistManager = class {
       return;
     }
     const track = this.tracks[index];
+    this.isChangingTrack = true;
     this.currentIndex = index;
     this.player.load({
       src: track.src,
       type: track.type,
       poster: track.poster,
-      tracks: track.tracks || []
+      tracks: track.tracks || [],
+      audioDescriptionSrc: track.audioDescriptionSrc || null,
+      signLanguageSrc: track.signLanguageSrc || null
     });
     this.updateTrackInfo(track);
     this.updatePlaylistUI();
@@ -11311,6 +11423,9 @@ var PlaylistManager = class {
     });
     setTimeout(() => {
       this.player.play();
+      setTimeout(() => {
+        this.isChangingTrack = false;
+      }, 50);
     }, 100);
   }
   /**
@@ -11345,6 +11460,9 @@ var PlaylistManager = class {
    * Handle track end
    */
   handleTrackEnd() {
+    if (this.isChangingTrack) {
+      return;
+    }
     if (this.options.autoAdvance) {
       this.next();
     }
@@ -11413,6 +11531,21 @@ var PlaylistManager = class {
       console.warn("VidPly Playlist: No container found");
       return;
     }
+    if (this.player.element.tagName === "AUDIO") {
+      this.trackArtworkElement = DOMUtils.createElement("div", {
+        className: "vidply-track-artwork",
+        attributes: {
+          "aria-hidden": "true"
+        }
+      });
+      this.trackArtworkElement.style.display = "none";
+      const videoWrapper = this.container.querySelector(".vidply-video-wrapper");
+      if (videoWrapper) {
+        this.container.insertBefore(this.trackArtworkElement, videoWrapper);
+      } else {
+        this.container.appendChild(this.trackArtworkElement);
+      }
+    }
     this.trackInfoElement = DOMUtils.createElement("div", {
       className: "vidply-track-info",
       attributes: {
@@ -11437,7 +11570,7 @@ var PlaylistManager = class {
       attributes: {
         id: `${this.uniqueId}-panel`,
         role: "region",
-        "aria-label": "Media playlist",
+        "aria-label": i18n.t("playlist.title"),
         "aria-labelledby": `${this.uniqueId}-heading`
       }
     });
@@ -11451,16 +11584,39 @@ var PlaylistManager = class {
     if (!this.trackInfoElement) return;
     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 || "";
-    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";
+    this.updateTrackArtwork(track);
+  }
+  /**
+   * Update track artwork display (for audio playlists)
+   */
+  updateTrackArtwork(track) {
+    if (!this.trackArtworkElement) return;
+    if (track.poster) {
+      this.trackArtworkElement.style.backgroundImage = `url(${track.poster})`;
+      this.trackArtworkElement.style.display = "block";
+    } else {
+      this.trackArtworkElement.style.display = "none";
+    }
   }
   /**
    * Render playlist
@@ -11474,7 +11630,7 @@ var PlaylistManager = class {
         id: `${this.uniqueId}-heading`
       }
     });
-    header.textContent = `Playlist (${this.tracks.length})`;
+    header.textContent = `${i18n.t("playlist.title")} (${this.tracks.length})`;
     this.playlistPanel.appendChild(header);
     const instructions = DOMUtils.createElement("div", {
       className: "vidply-sr-only",
@@ -11504,9 +11660,12 @@ var PlaylistManager = class {
    * 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";
@@ -11668,9 +11827,12 @@ var PlaylistManager = class {
       const button = buttons[index];
       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) {
         item.classList.add("vidply-playlist-item-active");
         button.setAttribute("aria-current", "true");
@@ -11764,6 +11926,10 @@ var PlaylistManager = class {
       this.trackInfoElement.innerHTML = "";
       this.trackInfoElement.style.display = "none";
     }
+    if (this.trackArtworkElement) {
+      this.trackArtworkElement.style.backgroundImage = "";
+      this.trackArtworkElement.style.display = "none";
+    }
   }
   /**
    * Toggle playlist panel visibility
@@ -11817,6 +11983,9 @@ var PlaylistManager = class {
   destroy() {
     this.player.off("ended", this.handleTrackEnd);
     this.player.off("error", this.handleTrackError);
+    if (this.trackArtworkElement) {
+      this.trackArtworkElement.remove();
+    }
     if (this.trackInfoElement) {
       this.trackInfoElement.remove();
     }