vidply 1.0.20 → 1.0.21

package/dist/vidply.esm.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"
@@ -429,7 +434,7 @@
       "entryPoint": "src/index.js",
       "inputs": {
         "src/renderers/HTML5Renderer.js": {
-          "bytesInOutput": 4675
+          "bytesInOutput": 4803
         },
         "src/utils/EventEmitter.js": {
           "bytesInOutput": 436
@@ -438,19 +443,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": 64
@@ -468,7 +473,7 @@
           "bytesInOutput": 222
         },
         "src/controls/ControlBar.js": {
-          "bytesInOutput": 54429
+          "bytesInOutput": 54457
         },
         "src/utils/StorageManager.js": {
           "bytesInOutput": 1606
@@ -495,25 +500,25 @@
           "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
         },
         "src/index.js": {
           "bytesInOutput": 1869
         }
       },
-      "bytes": 285961
+      "bytes": 289980
     }
   }
 }

package/dist/vidply.js

@@ -141,14 +141,21 @@ var VidPly = (() => {
           });
         }
         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);
                 });
               }
@@ -578,6 +585,14 @@ var VidPly = (() => {
       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}"
     }
   };
 
@@ -737,6 +752,14 @@ var VidPly = (() => {
       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}"
     }
   };
 
@@ -896,6 +919,14 @@ var VidPly = (() => {
       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}"
     }
   };
 
@@ -1055,6 +1086,14 @@ var VidPly = (() => {
       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}"
     }
   };
 
@@ -1214,6 +1253,14 @@ var VidPly = (() => {
       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}"
     }
   };
 
@@ -2700,7 +2747,8 @@ var VidPly = (() => {
         attributes: {
           "type": "button",
           "aria-label": i18n.t("player.quality"),
-          "aria-expanded": "false"
+          "aria-expanded": "false",
+          "title": i18n.t("player.quality")
         }
       });
       button.appendChild(createIconElement("hd"));
@@ -7243,7 +7291,10 @@ var VidPly = (() => {
     }
     play() {
       if (this.isReady && this.youtube) {
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY;
         this.youtube.playVideo();
+        window.scrollTo(scrollX, scrollY);
       }
     }
     pause() {
@@ -7437,9 +7488,12 @@ var VidPly = (() => {
     }
     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() {
@@ -7512,6 +7566,11 @@ var VidPly = (() => {
       }
     }
     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") !== "";
     }
@@ -7686,7 +7745,10 @@ var VidPly = (() => {
       }
     }
     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");
@@ -8036,6 +8098,16 @@ var VidPly = (() => {
         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;
@@ -8344,6 +8416,8 @@ var VidPly = (() => {
      * @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 {
@@ -8351,6 +8425,8 @@ var VidPly = (() => {
         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();
@@ -8375,6 +8451,17 @@ var VidPly = (() => {
           });
           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();
@@ -8386,21 +8473,35 @@ var VidPly = (() => {
           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) {
@@ -8422,6 +8523,7 @@ var VidPly = (() => {
       controlBar.createControls();
       controlBar.attachEvents();
       controlBar.setupAutoHide();
+      controlBar.setupOverflowDetection();
     }
     shouldChangeRenderer(src) {
       if (!this.renderer) return true;
@@ -11166,6 +11268,7 @@ var VidPly = (() => {
       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;
@@ -11289,12 +11392,15 @@ var VidPly = (() => {
         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();
@@ -11303,6 +11409,9 @@ var VidPly = (() => {
         item: track,
         total: this.tracks.length
       });
+      setTimeout(() => {
+        this.isChangingTrack = false;
+      }, 150);
     }
     /**
      * Play a specific track
@@ -11315,12 +11424,15 @@ var VidPly = (() => {
         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();
@@ -11331,6 +11443,9 @@ var VidPly = (() => {
       });
       setTimeout(() => {
         this.player.play();
+        setTimeout(() => {
+          this.isChangingTrack = false;
+        }, 50);
       }, 100);
     }
     /**
@@ -11365,6 +11480,9 @@ var VidPly = (() => {
      * Handle track end
      */
     handleTrackEnd() {
+      if (this.isChangingTrack) {
+        return;
+      }
       if (this.options.autoAdvance) {
         this.next();
       }
@@ -11433,6 +11551,21 @@ var VidPly = (() => {
         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: {
@@ -11457,7 +11590,7 @@ var VidPly = (() => {
         attributes: {
           id: `${this.uniqueId}-panel`,
           role: "region",
-          "aria-label": "Media playlist",
+          "aria-label": i18n.t("playlist.title"),
           "aria-labelledby": `${this.uniqueId}-heading`
         }
       });
@@ -11471,16 +11604,39 @@ var VidPly = (() => {
       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
@@ -11494,7 +11650,7 @@ var VidPly = (() => {
           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",
@@ -11524,9 +11680,12 @@ var VidPly = (() => {
      * 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";
@@ -11688,9 +11847,12 @@ var VidPly = (() => {
         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");
@@ -11784,6 +11946,10 @@ var VidPly = (() => {
         this.trackInfoElement.innerHTML = "";
         this.trackInfoElement.style.display = "none";
       }
+      if (this.trackArtworkElement) {
+        this.trackArtworkElement.style.backgroundImage = "";
+        this.trackArtworkElement.style.display = "none";
+      }
     }
     /**
      * Toggle playlist panel visibility
@@ -11837,6 +12003,9 @@ var VidPly = (() => {
     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();
       }