@scarlett-player/embed 0.5.1 → 0.5.3

package/dist/embed.js

@@ -123,12 +123,44 @@ function setupHlsEventHandlers(hls, api, callbacks) {
   addHandler("hlsLevelLoaded", (_event, data) => {
     if (data.details?.live !== void 0) {
       api.setState("live", data.details.live);
+      if (data.details.live) {
+        const video = hls.media;
+        if (video && video.seekable && video.seekable.length > 0) {
+          const start = video.seekable.start(0);
+          const end = video.seekable.end(video.seekable.length - 1);
+          api.setState("seekableRange", { start, end });
+          const threshold = (data.details.targetduration ?? 3) * 3;
+          const isAtLiveEdge = end - video.currentTime < threshold;
+          api.setState("liveEdge", isAtLiveEdge);
+          const latency = end - video.currentTime;
+          api.setState("liveLatency", Math.max(0, latency));
+        }
+      }
       callbacks.onLiveUpdate?.();
     }
   });
   addHandler("hlsError", (_event, data) => {
     const error = parseHlsError(data);
-    api.logger.warn("HLS error", { error });
+    const isBufferHoleSeek = !error.fatal && (error.details?.includes("bufferStalledError") || data.reason?.includes("buffer holes"));
+    if (isBufferHoleSeek) {
+      api.logger.debug(`HLS buffer recovery: ${error.reason || error.details}`, {
+        details: error.details,
+        reason: error.reason
+      });
+    } else if (error.fatal) {
+      api.logger.error(`HLS fatal error: ${error.details} (type=${error.type})`, {
+        type: error.type,
+        details: error.details,
+        url: error.url
+      });
+    } else {
+      api.logger.warn(`HLS error: ${error.details} (type=${error.type}, fatal=${error.fatal})`, {
+        type: error.type,
+        details: error.details,
+        fatal: error.fatal,
+        url: error.url
+      });
+    }
     callbacks.onError?.(error);
   });
   return () => {
@@ -150,6 +182,8 @@ function setupVideoEventHandlers(video, api) {
   addHandler("playing", () => {
     api.setState("playing", true);
     api.setState("paused", false);
+    api.setState("waiting", false);
+    api.setState("buffering", false);
     api.setState("playbackState", "playing");
   });
   addHandler("pause", () => {
@@ -166,6 +200,15 @@ function setupVideoEventHandlers(video, api) {
   addHandler("timeupdate", () => {
     api.setState("currentTime", video.currentTime);
     api.emit("playback:timeupdate", { currentTime: video.currentTime });
+    const isLive = api.getState("live");
+    if (isLive && video.seekable && video.seekable.length > 0) {
+      const start = video.seekable.start(0);
+      const end = video.seekable.end(video.seekable.length - 1);
+      api.setState("seekableRange", { start, end });
+      const isAtLiveEdge = end - video.currentTime < 10;
+      api.setState("liveEdge", isAtLiveEdge);
+      api.setState("liveLatency", Math.max(0, end - video.currentTime));
+    }
   });
   addHandler("durationchange", () => {
     api.setState("duration", video.duration || 0);
@@ -1007,6 +1050,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 +1990,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 +2251,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 +2304,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 +2319,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 +2803,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 +2850,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 +2874,7 @@ var SettingsMenu = class {
         this.renderCaptionsPanel();
         break;
     }
+    this.focusFirstItem();
   }
   renderMainPanel() {
     this.panel.innerHTML = "";
@@ -3027,6 +3093,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;
   }
@@ -3690,6 +3782,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 {
@@ -3839,6 +3933,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") {
@@ -3873,24 +3969,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>
@@ -3909,21 +4005,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" />
@@ -3932,7 +4028,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>
@@ -3998,6 +4094,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;
@@ -4020,6 +4117,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) {
@@ -4044,21 +4147,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");
         }
       }
     }
@@ -4491,7 +4607,8 @@ function createAnalyticsPlugin(config) {
         const duration = nextTime - b.time;
         return sum + b.bitrate * duration;
       }, 0);
-      session.avgBitrate = Math.round(totalBitrateTime / session.watchTime);
+      const timeSpan = now - session.bitrateHistory[0].time;
+      session.avgBitrate = timeSpan > 0 ? Math.round(totalBitrateTime / timeSpan) : 0;
     }
     const state = {
       currentTime: api.getState("currentTime"),
@@ -4620,6 +4737,9 @@ function createAnalyticsPlugin(config) {
       fatal: error.fatal ?? false
     };
     session.errors.push(errorEvent);
+    if (session.errors.length > 100) {
+      session.errors = session.errors.slice(-100);
+    }
     sendBeacon("error", {
       errorType: errorEvent.type,
       errorMessage: errorEvent.message,
@@ -4646,6 +4766,9 @@ function createAnalyticsPlugin(config) {
         height: currentQuality.height
       };
       session.bitrateHistory.push(bitrateChange);
+      if (session.bitrateHistory.length > 500) {
+        session.bitrateHistory = session.bitrateHistory.slice(-500);
+      }
       if (currentQuality.bitrate > session.maxBitrate) {
         session.maxBitrate = currentQuality.bitrate;
       }
@@ -6853,6 +6976,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)) {
@@ -6926,6 +7050,7 @@ class ScarlettPlayer {
    */
   async load(source) {
     this.checkDestroyed();
+    const generation = ++this.loadGeneration;
     try {
       this.logger.info("Loading source", { source });
       this.stateManager.update({
@@ -6944,6 +7069,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(
@@ -6959,18 +7088,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
+        });
+      }
     }
   }
   /**
@@ -7098,8 +7237,9 @@ class ScarlettPlayer {
    */
   setPlaybackRate(rate) {
     this.checkDestroyed();
-    this.stateManager.set("playbackRate", rate);
-    this.eventBus.emit("playback:ratechange", { rate });
+    const clampedRate = Math.max(0.0625, Math.min(16, rate));
+    this.stateManager.set("playbackRate", clampedRate);
+    this.eventBus.emit("playback:ratechange", { rate: clampedRate });
   }
   /**
    * Set autoplay state.
@@ -7228,6 +7368,13 @@ class ScarlettPlayer {
     }
     const provider = this._currentProvider;
     if (typeof provider.setLevel === "function") {
+      if (index !== -1) {
+        const levels = this.getQualities();
+        if (levels.length > 0 && (index < 0 || index >= levels.length)) {
+          this.logger.warn(`Invalid quality index: ${index} (available: ${levels.length})`);
+          return;
+        }
+      }
       provider.setLevel(index);
       this.eventBus.emit("quality:change", {
         quality: index === -1 ? "auto" : `level-${index}`,
@@ -7468,18 +7615,40 @@ class ScarlettPlayer {
    * @private
    */
   detectMimeType(source) {
-    const ext = source.split(".").pop()?.toLowerCase();
+    let path = source;
+    try {
+      path = new URL(source).pathname;
+    } catch {
+      const noQuery = source.split("?")[0] ?? source;
+      path = noQuery.split("#")[0] ?? noQuery;
+    }
+    const ext = path.split(".").pop()?.toLowerCase() ?? "";
     switch (ext) {
       case "m3u8":
         return "application/x-mpegURL";
       case "mpd":
         return "application/dash+xml";
       case "mp4":
+      case "m4v":
         return "video/mp4";
       case "webm":
         return "video/webm";
       case "ogg":
+      case "ogv":
         return "video/ogg";
+      case "mov":
+        return "video/quicktime";
+      case "mkv":
+        return "video/x-matroska";
+      case "mp3":
+        return "audio/mpeg";
+      case "wav":
+        return "audio/wav";
+      case "flac":
+        return "audio/flac";
+      case "aac":
+      case "m4a":
+        return "audio/mp4";
       default:
         return "video/mp4";
     }