@scarlett-player/embed 0.5.1 → 0.5.2

package/dist/embed.video.js

@@ -1007,6 +1007,8 @@ var styles = `
   border-radius: 4px;
   transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;
   flex-shrink: 0;
+  min-width: 44px;
+  min-height: 44px;
 }
 
 @media (hover: hover) {
@@ -1945,6 +1947,9 @@ var ProgressBar = class {
     this.el.setAttribute("role", "slider");
     this.el.setAttribute("aria-label", "Seek");
     this.el.setAttribute("aria-valuemin", "0");
+    this.el.setAttribute("aria-valuemax", "0");
+    this.el.setAttribute("aria-valuenow", "0");
+    this.el.setAttribute("aria-valuetext", "0:00");
     this.el.setAttribute("tabindex", "0");
     this.wrapper.addEventListener("mousedown", this.onMouseDown);
     this.wrapper.addEventListener("mousemove", this.onMouseMove);
@@ -2203,7 +2208,9 @@ var VolumeControl = class {
     this.btn.setAttribute("aria-label", label);
     const displayVolume = muted ? 0 : volume;
     this.level.style.width = `${displayVolume * 100}%`;
-    this.slider.setAttribute("aria-valuenow", String(Math.round(displayVolume * 100)));
+    const volumePercent = Math.round(displayVolume * 100);
+    this.slider.setAttribute("aria-valuenow", String(volumePercent));
+    this.slider.setAttribute("aria-valuetext", `${volumePercent}%`);
   }
   toggleMute() {
     const video = getVideo(this.api.container);
@@ -2254,7 +2261,7 @@ var LiveIndicator = class {
     this.el.appendChild(this.dot);
     this.el.appendChild(this.label);
     this.el.setAttribute("role", "button");
-    this.el.setAttribute("aria-label", "Seek to live");
+    this.el.setAttribute("aria-label", "Live broadcast - currently at live edge");
     this.el.setAttribute("tabindex", "0");
     this.el.addEventListener("click", this.handleClick);
     this.el.addEventListener("keydown", this.handleKeyDown);
@@ -2269,11 +2276,13 @@ var LiveIndicator = class {
     if (liveEdge) {
       this.el.classList.remove("sp-live--behind");
       this.label.textContent = "LIVE";
-      this.el.setAttribute("aria-label", "At live edge");
+      this.dot.setAttribute("aria-hidden", "true");
+      this.el.setAttribute("aria-label", "Live broadcast - currently at live edge");
     } else {
       this.el.classList.add("sp-live--behind");
       this.label.textContent = "GO LIVE";
-      this.el.setAttribute("aria-label", "Seek to live");
+      this.dot.setAttribute("aria-hidden", "true");
+      this.el.setAttribute("aria-label", "Live broadcast - behind live edge, click to seek to live");
     }
   }
   seekToLive() {
@@ -2751,6 +2760,18 @@ var SettingsMenu = class {
           this.close();
           this.btn.focus();
         }
+        return;
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        e.stopPropagation();
+        this.navigateItems(e.key === "ArrowDown" ? 1 : -1);
+        return;
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        e.stopPropagation();
+        this.navigateItems(e.shiftKey ? -1 : 1);
       }
     };
     document.addEventListener("keydown", this.keyHandler);
@@ -2786,6 +2807,7 @@ var SettingsMenu = class {
     this.renderMainPanel();
     this.panel.classList.add("sp-settings-panel--open");
     this.btn.setAttribute("aria-expanded", "true");
+    this.focusFirstItem();
   }
   close() {
     this.isOpen = false;
@@ -2809,6 +2831,7 @@ var SettingsMenu = class {
         this.renderCaptionsPanel();
         break;
     }
+    this.focusFirstItem();
   }
   renderMainPanel() {
     this.panel.innerHTML = "";
@@ -3027,6 +3050,32 @@ var SettingsMenu = class {
       );
     });
   }
+  getFocusableItems() {
+    return Array.from(
+      this.panel.querySelectorAll('[role="menuitem"]')
+    );
+  }
+  focusFirstItem() {
+    requestAnimationFrame(() => {
+      const items = this.getFocusableItems();
+      if (items.length > 0) {
+        items[0].focus();
+      }
+    });
+  }
+  navigateItems(direction) {
+    const items = this.getFocusableItems();
+    if (items.length === 0) return;
+    const active = document.activeElement;
+    const currentIndex = items.indexOf(active);
+    let nextIndex;
+    if (currentIndex === -1) {
+      nextIndex = direction === 1 ? 0 : items.length - 1;
+    } else {
+      nextIndex = (currentIndex + direction + items.length) % items.length;
+    }
+    items[nextIndex].focus();
+  }
   getPanel() {
     return this.currentPanel;
   }
@@ -4949,6 +4998,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)) {
@@ -5022,6 +5072,7 @@ class ScarlettPlayer {
    */
   async load(source) {
     this.checkDestroyed();
+    const generation = ++this.loadGeneration;
     try {
       this.logger.info("Loading source", { source });
       this.stateManager.update({
@@ -5040,6 +5091,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(
@@ -5055,18 +5110,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
+        });
+      }
     }
   }
   /**