@scarlett-player/embed 0.5.0 → 0.5.2

package/dist/embed.audio.js

@@ -33,7 +33,7 @@ function formatBitrate(bitrate) {
   }
   return `${bitrate} bps`;
 }
-function mapLevels(levels, currentLevel) {
+function mapLevels(levels, _currentLevel) {
   return levels.map((level, index) => ({
     index,
     width: level.width || 0,
@@ -1006,6 +1006,8 @@ function createStyles(prefix, theme) {
       align-items: center;
       justify-content: center;
       transition: background 0.2s, transform 0.1s;
+      min-width: 44px;
+      min-height: 44px;
     }
 
     .${prefix}__btn:hover {
@@ -1155,6 +1157,8 @@ function createAudioUIPlugin(config) {
     document.head.appendChild(styleElement);
     container = document.createElement("div");
     container.className = `${prefix} ${prefix}--${layout}`;
+    container.setAttribute("role", "region");
+    container.setAttribute("aria-label", "Audio player");
     if (layout === "full") {
       container.innerHTML = buildFullLayout();
     } else if (layout === "compact") {
@@ -1189,24 +1193,24 @@ function createAudioUIPlugin(config) {
         ${mergedConfig.showArtist ? `<div class="${prefix}__artist">-</div>` : ""}
       </div>
       <div class="${prefix}__progress">
-        ${mergedConfig.showTime ? `<span class="${prefix}__time ${prefix}__time--current">0:00</span>` : ""}
-        <div class="${prefix}__progress-bar">
+        ${mergedConfig.showTime ? `<span class="${prefix}__time ${prefix}__time--current" aria-label="Current time">0:00</span>` : ""}
+        <div class="${prefix}__progress-bar" role="slider" aria-label="Seek" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0" aria-valuetext="0:00" tabindex="0">
           <div class="${prefix}__progress-fill" style="transform: scaleX(0)"></div>
         </div>
-        ${mergedConfig.showTime ? `<span class="${prefix}__time ${prefix}__time--duration">0:00</span>` : ""}
+        ${mergedConfig.showTime ? `<span class="${prefix}__time ${prefix}__time--duration" aria-label="Duration">0:00</span>` : ""}
       </div>
-      <div class="${prefix}__controls">
-        ${mergedConfig.showShuffle ? `<button class="${prefix}__btn ${prefix}__btn--shuffle" title="Shuffle">${ICONS.shuffle}</button>` : ""}
-        ${mergedConfig.showNavigation ? `<button class="${prefix}__btn ${prefix}__btn--prev" title="Previous">${ICONS.previous}</button>` : ""}
-        <button class="${prefix}__btn ${prefix}__btn--primary ${prefix}__btn--play" title="Play">${ICONS.play}</button>
-        ${mergedConfig.showNavigation ? `<button class="${prefix}__btn ${prefix}__btn--next" title="Next">${ICONS.next}</button>` : ""}
-        ${mergedConfig.showRepeat ? `<button class="${prefix}__btn ${prefix}__btn--repeat" title="Repeat">${ICONS.repeatOff}</button>` : ""}
+      <div class="${prefix}__controls" role="group" aria-label="Playback controls">
+        ${mergedConfig.showShuffle ? `<button class="${prefix}__btn ${prefix}__btn--shuffle" title="Shuffle" aria-label="Shuffle" aria-pressed="false">${ICONS.shuffle}</button>` : ""}
+        ${mergedConfig.showNavigation ? `<button class="${prefix}__btn ${prefix}__btn--prev" title="Previous" aria-label="Previous track">${ICONS.previous}</button>` : ""}
+        <button class="${prefix}__btn ${prefix}__btn--primary ${prefix}__btn--play" title="Play" aria-label="Play">${ICONS.play}</button>
+        ${mergedConfig.showNavigation ? `<button class="${prefix}__btn ${prefix}__btn--next" title="Next" aria-label="Next track">${ICONS.next}</button>` : ""}
+        ${mergedConfig.showRepeat ? `<button class="${prefix}__btn ${prefix}__btn--repeat" title="Repeat" aria-label="Repeat" aria-pressed="false">${ICONS.repeatOff}</button>` : ""}
       </div>
       ${mergedConfig.showVolume ? `
         <div class="${prefix}__secondary-controls">
-          <div class="${prefix}__volume">
-            <button class="${prefix}__btn ${prefix}__btn--volume" title="Volume">${ICONS.volumeHigh}</button>
-            <div class="${prefix}__volume-slider">
+          <div class="${prefix}__volume" role="group" aria-label="Volume controls">
+            <button class="${prefix}__btn ${prefix}__btn--volume" title="Volume" aria-label="Mute">${ICONS.volumeHigh}</button>
+            <div class="${prefix}__volume-slider" role="slider" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-valuetext="100%" tabindex="0">
               <div class="${prefix}__volume-fill" style="width: 100%"></div>
             </div>
           </div>
@@ -1225,21 +1229,21 @@ function createAudioUIPlugin(config) {
         ${mergedConfig.showTitle ? `<div class="${prefix}__title">-</div>` : ""}
         ${mergedConfig.showArtist ? `<div class="${prefix}__artist">-</div>` : ""}
         <div class="${prefix}__progress">
-          <div class="${prefix}__progress-bar">
+          <div class="${prefix}__progress-bar" role="slider" aria-label="Seek" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0" aria-valuetext="0:00" tabindex="0">
             <div class="${prefix}__progress-fill" style="transform: scaleX(0)"></div>
           </div>
         </div>
       </div>
-      <div class="${prefix}__controls">
-        ${mergedConfig.showNavigation ? `<button class="${prefix}__btn ${prefix}__btn--prev" title="Previous">${ICONS.previous}</button>` : ""}
-        <button class="${prefix}__btn ${prefix}__btn--primary ${prefix}__btn--play" title="Play">${ICONS.play}</button>
-        ${mergedConfig.showNavigation ? `<button class="${prefix}__btn ${prefix}__btn--next" title="Next">${ICONS.next}</button>` : ""}
+      <div class="${prefix}__controls" role="group" aria-label="Playback controls">
+        ${mergedConfig.showNavigation ? `<button class="${prefix}__btn ${prefix}__btn--prev" title="Previous" aria-label="Previous track">${ICONS.previous}</button>` : ""}
+        <button class="${prefix}__btn ${prefix}__btn--primary ${prefix}__btn--play" title="Play" aria-label="Play">${ICONS.play}</button>
+        ${mergedConfig.showNavigation ? `<button class="${prefix}__btn ${prefix}__btn--next" title="Next" aria-label="Next track">${ICONS.next}</button>` : ""}
       </div>
     `;
   };
   const buildMiniLayout = () => {
     return `
-      <button class="${prefix}__btn ${prefix}__btn--primary ${prefix}__btn--play" title="Play">${ICONS.play}</button>
+      <button class="${prefix}__btn ${prefix}__btn--primary ${prefix}__btn--play" title="Play" aria-label="Play">${ICONS.play}</button>
       ${mergedConfig.showArtwork ? `
         <div class="${prefix}__artwork">
           <img src="${mergedConfig.defaultArtwork || ""}" alt="Album art" />
@@ -1248,7 +1252,7 @@ function createAudioUIPlugin(config) {
       <div class="${prefix}__info">
         ${mergedConfig.showTitle ? `<div class="${prefix}__title-wrapper"><div class="${prefix}__title">-</div></div>` : ""}
         <div class="${prefix}__progress">
-          <div class="${prefix}__progress-bar">
+          <div class="${prefix}__progress-bar" role="slider" aria-label="Seek" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0" aria-valuetext="0:00" tabindex="0">
             <div class="${prefix}__progress-fill" style="transform: scaleX(0)"></div>
           </div>
         </div>
@@ -1314,6 +1318,7 @@ function createAudioUIPlugin(config) {
     if (playPauseBtn) {
       playPauseBtn.innerHTML = playing ? ICONS.pause : ICONS.play;
       playPauseBtn.title = playing ? "Pause" : "Play";
+      playPauseBtn.setAttribute("aria-label", playing ? "Pause" : "Play");
     }
     const currentTime = api.getState("currentTime") || 0;
     const duration = api.getState("duration") || 0;
@@ -1336,6 +1341,12 @@ function createAudioUIPlugin(config) {
     if (durationEl) {
       durationEl.textContent = formatTime(duration);
     }
+    const progressBar = container?.querySelector(`.${prefix}__progress-bar`);
+    if (progressBar) {
+      progressBar.setAttribute("aria-valuemax", String(Math.floor(duration)));
+      progressBar.setAttribute("aria-valuenow", String(Math.floor(currentTime)));
+      progressBar.setAttribute("aria-valuetext", formatTime(currentTime));
+    }
     const title = api.getState("title");
     const poster = api.getState("poster");
     if (titleEl && title) {
@@ -1360,21 +1371,34 @@ function createAudioUIPlugin(config) {
     }
     if (volumeBtn) {
       volumeBtn.innerHTML = muted || volume === 0 ? ICONS.volumeMuted : ICONS.volumeHigh;
+      volumeBtn.setAttribute("aria-label", muted || volume === 0 ? "Unmute" : "Mute");
+    }
+    const volumeSlider = container?.querySelector(`.${prefix}__volume-slider`);
+    if (volumeSlider) {
+      const displayVolume = Math.round((muted ? 0 : volume) * 100);
+      volumeSlider.setAttribute("aria-valuenow", String(displayVolume));
+      volumeSlider.setAttribute("aria-valuetext", `${displayVolume}%`);
     }
     const playlist = api.getPlugin("playlist");
     if (playlist) {
       const state = playlist.getState();
       if (shuffleBtn) {
         shuffleBtn.classList.toggle(`${prefix}__btn--active`, state.shuffle);
+        shuffleBtn.setAttribute("aria-pressed", String(state.shuffle));
+        shuffleBtn.setAttribute("aria-label", state.shuffle ? "Shuffle on" : "Shuffle off");
       }
       if (repeatBtn) {
         repeatBtn.classList.toggle(`${prefix}__btn--active`, state.repeat !== "none");
+        repeatBtn.setAttribute("aria-pressed", String(state.repeat !== "none"));
         if (state.repeat === "one") {
           repeatBtn.innerHTML = ICONS.repeatOne;
+          repeatBtn.setAttribute("aria-label", "Repeat one");
         } else if (state.repeat === "all") {
           repeatBtn.innerHTML = ICONS.repeatAll;
+          repeatBtn.setAttribute("aria-label", "Repeat all");
         } else {
           repeatBtn.innerHTML = ICONS.repeatOff;
+          repeatBtn.setAttribute("aria-label", "Repeat off");
         }
       }
     }
@@ -3595,6 +3619,7 @@ class ScarlettPlayer {
     this.destroyed = false;
     this.seekingWhilePlaying = false;
     this.seekResumeTimeout = null;
+    this.loadGeneration = 0;
     if (typeof options.container === "string") {
       const el = document.querySelector(options.container);
       if (!el || !(el instanceof HTMLElement)) {
@@ -3668,6 +3693,7 @@ class ScarlettPlayer {
    */
   async load(source) {
     this.checkDestroyed();
+    const generation = ++this.loadGeneration;
     try {
       this.logger.info("Loading source", { source });
       this.stateManager.update({
@@ -3686,6 +3712,10 @@ class ScarlettPlayer {
         await this.pluginManager.destroyPlugin(previousProviderId);
         this._currentProvider = null;
       }
+      if (generation !== this.loadGeneration) {
+        this.logger.info("Load superseded by newer load call", { source });
+        return;
+      }
       const provider = this.pluginManager.selectProvider(source);
       if (!provider) {
         this.errorHandler.throw(
@@ -3701,18 +3731,28 @@ class ScarlettPlayer {
       this._currentProvider = provider;
       this.logger.info("Provider selected", { provider: provider.id });
       await this.pluginManager.initPlugin(provider.id);
+      if (generation !== this.loadGeneration) {
+        this.logger.info("Load superseded by newer load call", { source });
+        return;
+      }
       this.stateManager.set("source", { src: source, type: this.detectMimeType(source) });
       if (typeof provider.loadSource === "function") {
         await provider.loadSource(source);
       }
+      if (generation !== this.loadGeneration) {
+        this.logger.info("Load superseded by newer load call", { source });
+        return;
+      }
       if (this.stateManager.getValue("autoplay")) {
         await this.play();
       }
     } catch (error) {
-      this.errorHandler.handle(error, {
-        operation: "load",
-        source
-      });
+      if (generation === this.loadGeneration) {
+        this.errorHandler.handle(error, {
+          operation: "load",
+          source
+        });
+      }
     }
   }
   /**