@scarlett-player/ui 1.8.1 → 1.10.0

package/dist/index.js

@@ -1,5 +1,10 @@
 // src/index.ts
-import { enterFullscreen as enterFullscreen2, exitFullscreen as exitFullscreen2, isFullscreen as isFullscreen2 } from "@scarlett-player/core";
+import {
+  enterFullscreen as enterFullscreen2,
+  exitFullscreen as exitFullscreen2,
+  injectSharedStyles,
+  isFullscreen as isFullscreen2
+} from "@scarlett-player/core";
 
 // src/fit.ts
 var UNKNOWN_RANK = 3;
@@ -86,6 +91,10 @@ var styles = `
    ============================================ */
 .sp-container {
   position: relative;
+  /* Own stacking context: the control bar, menus and overlays all carry
+     z-index, and without this they compete with the host page's own layers
+     instead of staying inside the player. */
+  isolation: isolate;
   width: 100%;
   height: 100%;
   background: #000;
@@ -207,11 +216,13 @@ var styles = `
   cursor: pointer;
   z-index: 10;
   opacity: 0;
+  pointer-events: none;
   transition: opacity 0.25s ease;
 }
 
 .sp-progress-wrapper--visible {
   opacity: 1;
+  pointer-events: auto;
 }
 
 /* Touch: a 20px wrapper is not a 20px target. The control bar is a later
@@ -1160,24 +1171,30 @@ var styles = `
 
 /* ============================================
    CSS Custom Properties (Theming)
+   ============================================
+
+   Token defaults live at the use sites as var() fallbacks, not in a :root
+   block. A :root declaration wrote --sp-accent, --sp-color, --sp-bg,
+   --sp-control-height and --sp-icon-size into the HOST document, so mounting a
+   player changed variables the page may own. A .sp-container declaration would
+   be no better: the container rule wins for every descendant, so it would
+   override a host that themes the player from its own :root. A var() fallback
+   does neither - it applies only where nothing else defines the token.
+
+   setTheme() writes the same names onto the player's container, which still
+   wins over the fallbacks.
    ============================================ */
-:root {
-  --sp-accent: #e50914;
-  --sp-color: #fff;
-  --sp-bg: rgba(0, 0, 0, 0.8);
-  --sp-control-height: 48px;
-  --sp-icon-size: 24px;
-}
 `;
 
 // src/icons.ts
+import { SHARED_ICON_PATHS } from "@scarlett-player/core";
 var icons = {
-  play: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>`,
+  play: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="${SHARED_ICON_PATHS.play}"/></svg>`,
   pause: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>`,
   replay: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>`,
-  volumeHigh: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>`,
+  volumeHigh: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="${SHARED_ICON_PATHS.volumeHigh}"/></svg>`,
   volumeLow: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>`,
-  volumeMute: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>`,
+  volumeMute: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="${SHARED_ICON_PATHS.volumeMuted}"/></svg>`,
   fullscreen: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>`,
   exitFullscreen: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>`,
   pip: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z"/></svg>`,
@@ -1250,29 +1267,7 @@ function setAttr(el, name, value) {
 }
 
 // src/utils/format.ts
-function formatTime(seconds) {
-  if (!isFinite(seconds) || isNaN(seconds)) {
-    return "0:00";
-  }
-  const absSeconds = Math.abs(seconds);
-  const h = Math.floor(absSeconds / 3600);
-  const m = Math.floor(absSeconds % 3600 / 60);
-  const s = Math.floor(absSeconds % 60);
-  const sign = seconds < 0 ? "-" : "";
-  if (h > 0) {
-    return `${sign}${h}:${pad(m)}:${pad(s)}`;
-  }
-  return `${sign}${m}:${pad(s)}`;
-}
-function pad(n) {
-  return n < 10 ? `0${n}` : `${n}`;
-}
-function formatLiveTime(behindLive) {
-  if (behindLive <= 0) {
-    return "LIVE";
-  }
-  return `-${formatTime(behindLive)}`;
-}
+import { formatTime, formatLiveTime } from "@scarlett-player/core";
 
 // src/controls/PlayButton.ts
 var PlayButton = class {
@@ -1334,7 +1329,7 @@ var BigPlayButton = class {
    *   must not sit on top of it, and `error` state alone does not say (a
    *   dismissed overlay leaves the error behind)
    */
-  constructor(api, isOverlayVisible = () => false) {
+  constructor(api, isOverlayVisible) {
     /**
      * Latched on the first `playing`.
      *
@@ -1348,7 +1343,8 @@ var BigPlayButton = class {
       this.start();
     };
     this.api = api;
-    this.isOverlayVisible = isOverlayVisible;
+    this.hasOverlayProbe = typeof isOverlayVisible === "function";
+    this.isOverlayVisible = isOverlayVisible ?? (() => false);
     const btn = document.createElement("button");
     btn.className = "sp-big-play";
     btn.setAttribute("type", "button");
@@ -1377,7 +1373,7 @@ var BigPlayButton = class {
       this.hasStarted = true;
     }
     let visible;
-    if (error || this.isOverlayVisible()) {
+    if (this.hasOverlayProbe ? this.isOverlayVisible() : Boolean(error)) {
       visible = false;
     } else if (playbackState === "loading") {
       visible = false;
@@ -1576,7 +1572,7 @@ var ProgressBar = class {
             video.addEventListener("seeked", resumePlayback);
           }
         }
-        this.tooltip.style.opacity = "0";
+        this.tooltip.style.opacity = "";
         this.thumbnailPreview.hide();
       }
     };
@@ -1585,7 +1581,7 @@ var ProgressBar = class {
     };
     this.onMouseLeave = () => {
       if (!this.isDragging) {
-        this.tooltip.style.opacity = "0";
+        this.tooltip.style.opacity = "";
         this.thumbnailPreview.hide();
       }
     };
@@ -1803,15 +1799,17 @@ var ProgressBar = class {
     const seekableRange = this.api.getState("seekableRange");
     if (live && seekableRange) {
       const rangeLength = seekableRange.end - seekableRange.start;
-      return seekableRange.start + percent * rangeLength;
+      const time2 = seekableRange.start + percent * rangeLength;
+      return Number.isFinite(time2) ? time2 : null;
     }
     const duration = this.api.getState("duration") || 0;
-    return percent * duration;
+    const time = percent * duration;
+    return Number.isFinite(time) ? time : null;
   }
   updateTooltip(clientX) {
     const rect = this.el.getBoundingClientRect();
     const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-    const time = this.getTimeFromPosition(clientX);
+    const time = this.getTimeFromPosition(clientX) ?? 0;
     const live = this.api.getState("live");
     const seekableRange = this.api.getState("seekableRange");
     if (live && seekableRange) {
@@ -1846,13 +1844,16 @@ var ProgressBar = class {
     }
     this.lastSeekTime = now;
     const time = this.getTimeFromPosition(clientX);
-    video.currentTime = time;
+    if (time !== null && Number.isFinite(time)) {
+      video.currentTime = time;
+    }
   }
   destroy() {
     this.wrapper.removeEventListener("mousedown", this.onMouseDown);
     this.wrapper.removeEventListener("mousemove", this.onMouseMove);
     this.wrapper.removeEventListener("mouseleave", this.onMouseLeave);
     this.wrapper.removeEventListener("touchstart", this.onTouchStart);
+    this.el.removeEventListener("keydown", this.onKeyDown);
     document.removeEventListener("mousemove", this.onDocMouseMove);
     document.removeEventListener("mouseup", this.onMouseUp);
     document.removeEventListener("touchmove", this.onDocTouchMove);
@@ -2077,11 +2078,9 @@ var LiveIndicator = class {
     }
   }
   seekToLive() {
-    const video = getVideo(this.api.container);
-    if (!video) return;
     const seekableRange = this.api.getState("seekableRange");
     if (seekableRange) {
-      video.currentTime = seekableRange.end;
+      this.api.emit("playback:seeking", { time: seekableRange.end });
     }
   }
   destroy() {
@@ -2127,6 +2126,9 @@ var QualityMenu = class {
     const qualities = this.api.getState("qualities") || [];
     const currentQuality = this.api.getState("currentQuality");
     this.el.style.display = qualities.length > 0 ? "" : "none";
+    if (qualities.length === 0 && this.isOpen) {
+      this.close();
+    }
     this.btnLabel.textContent = currentQuality?.label || "Auto";
     const qualitiesJson = JSON.stringify(qualities.map((q) => q.id));
     const currentId = currentQuality?.id || "auto";
@@ -2191,6 +2193,16 @@ var QualityMenu = class {
     this.menu.classList.remove("sp-quality-menu--open");
     this.btn.setAttribute("aria-expanded", "false");
   }
+  /**
+   * Whether the dropdown is open.
+   *
+   * Read by the UI plugin so the control bar's auto-hide waits for it.
+   *
+   * @returns True while the menu is showing
+   */
+  isMenuOpen() {
+    return this.isOpen;
+  }
   destroy() {
     document.removeEventListener("click", this.closeHandler);
     this.el.remove();
@@ -2615,7 +2627,7 @@ var SettingsMenu = class {
     this.el.appendChild(this.panel);
     this.closeHandler = (e) => {
       if (!this.el.contains(e.target)) {
-        this.close();
+        this.close(false);
       }
     };
     document.addEventListener("click", this.closeHandler);
@@ -2628,7 +2640,6 @@ var SettingsMenu = class {
           this.showPanel("main");
         } else {
           this.close();
-          this.btn.focus();
         }
         return;
       }
@@ -2665,6 +2676,8 @@ var SettingsMenu = class {
         this.updateSpeedActiveStates();
       } else if (this.currentPanel === "captions") {
         this.updateCaptionsActiveStates();
+      } else if (this.currentPanel === "audio") {
+        this.updateAudioActiveStates();
       }
     }
   }
@@ -2679,11 +2692,25 @@ var SettingsMenu = class {
     this.btn.setAttribute("aria-expanded", "true");
     this.focusFirstItem();
   }
-  close() {
+  /**
+   * Close the panel.
+   *
+   * Choosing an item tears down the row that had focus, which drops focus to
+   * `<body>` and strands keyboard viewers outside the player entirely. Hand it
+   * back to the button that opened the menu instead.
+   *
+   * @param restoreFocus - Return focus to the gear button. The outside-click
+   *   handler passes false, so a click elsewhere is not pulled back into the bar.
+   */
+  close(restoreFocus = true) {
+    const wasOpen = this.isOpen;
     this.isOpen = false;
     this.currentPanel = "main";
     this.panel.classList.remove("sp-settings-panel--open");
     this.btn.setAttribute("aria-expanded", "false");
+    if (wasOpen && restoreFocus) {
+      this.btn.focus();
+    }
   }
   showPanel(panel) {
     this.currentPanel = panel;
@@ -2700,6 +2727,9 @@ var SettingsMenu = class {
       case "captions":
         this.renderCaptionsPanel();
         break;
+      case "audio":
+        this.renderAudioPanel();
+        break;
     }
     this.focusFirstItem();
   }
@@ -2728,6 +2758,16 @@ var SettingsMenu = class {
       );
       this.panel.appendChild(captionsRow);
     }
+    const audioTracks = this.api.getState("audioTracks") || [];
+    if (audioTracks.length > 1) {
+      const currentAudioTrack = this.api.getState("currentAudioTrack");
+      const audioRow = this.createMainRow(
+        "Audio",
+        currentAudioTrack?.label || "Default",
+        () => this.showPanel("audio")
+      );
+      this.panel.appendChild(audioRow);
+    }
     const speedLabel = playbackRate === 1 ? "Normal" : `${playbackRate}x`;
     const speedRow = this.createMainRow(
       "Speed",
@@ -2828,6 +2868,36 @@ var SettingsMenu = class {
       this.panel.appendChild(item);
     }
   }
+  renderAudioPanel() {
+    this.panel.innerHTML = "";
+    this.panel.className = "sp-settings-panel sp-settings-panel--open sp-settings-panel--sub";
+    const header = this.createSubHeader("Audio");
+    this.panel.appendChild(header);
+    const audioTracks = this.api.getState("audioTracks") || [];
+    const currentAudioTrack = this.api.getState("currentAudioTrack");
+    const activeId = currentAudioTrack?.id ?? null;
+    for (const track of audioTracks) {
+      const item = this.createMenuItem(track.label, track.id, track.id === activeId);
+      item.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.selectAudioTrack(track.id);
+      });
+      this.panel.appendChild(item);
+    }
+  }
+  selectAudioTrack(trackId) {
+    this.api.emit("track:audio", { trackId });
+    this.close();
+  }
+  updateAudioActiveStates() {
+    const currentAudioTrack = this.api.getState("currentAudioTrack");
+    const activeId = currentAudioTrack?.id ?? null;
+    const items = this.panel.querySelectorAll(".sp-settings-panel__item");
+    items.forEach((item) => {
+      const id = item.getAttribute("data-id");
+      item.classList.toggle("sp-settings-panel__item--active", id === activeId);
+    });
+  }
   selectCaption(trackId) {
     this.api.emit("track:text", { trackId });
     this.close();
@@ -3217,6 +3287,17 @@ var OverflowTray = class {
     this.panel.classList.remove("sp-overflow-tray--open");
     this.btn.setAttribute("aria-expanded", "false");
   }
+  /**
+   * Whether the strip is open.
+   *
+   * Read by the UI plugin so the control bar's auto-hide waits for it: hiding
+   * the bar would take the open tray with it, mid-use.
+   *
+   * @returns True while the strip is showing
+   */
+  isMenuOpen() {
+    return this.isOpen;
+  }
   /**
    * Show the button only while the tray holds something the viewer can see.
    *
@@ -3256,19 +3337,53 @@ var OverflowTray = class {
 };
 
 // src/control-registry.ts
-var registry = /* @__PURE__ */ new Map();
+var globalRegistry = /* @__PURE__ */ new Map();
+var scopedRegistries = /* @__PURE__ */ new Map();
 var listeners = /* @__PURE__ */ new Set();
-function registerControl(id, factory) {
-  registry.set(id, factory);
+function registerControl(id, factory, options = {}) {
+  const { owner } = options;
+  if (owner) {
+    let scoped = scopedRegistries.get(owner);
+    if (!scoped) {
+      scoped = /* @__PURE__ */ new Map();
+      scopedRegistries.set(owner, scoped);
+    }
+    scoped.set(id, factory);
+  } else {
+    globalRegistry.set(id, factory);
+  }
   for (const listener of listeners) {
-    listener(id);
+    listener(id, owner);
   }
 }
-function unregisterControl(id) {
-  return registry.delete(id);
+function unregisterControl(id, options = {}) {
+  const { owner } = options;
+  if (!owner) {
+    return globalRegistry.delete(id);
+  }
+  const scoped = scopedRegistries.get(owner);
+  if (!scoped) {
+    return false;
+  }
+  const removed = scoped.delete(id);
+  if (scoped.size === 0) {
+    scopedRegistries.delete(owner);
+  }
+  return removed;
+}
+function unregisterControlsFor(owner) {
+  const removed = scopedRegistries.get(owner)?.size ?? 0;
+  scopedRegistries.delete(owner);
+  return removed;
 }
-function getControlFactory(id) {
-  return registry.get(id) ?? null;
+function getControlFactory(id, owner) {
+  if (owner) {
+    const scoped = scopedRegistries.get(owner)?.get(id);
+    if (scoped) {
+      return scoped;
+    }
+  }
+  return globalRegistry.get(id) ?? null;
 }
 function onControlRegistered(listener) {
   listeners.add(listener);
@@ -3277,12 +3392,13 @@ function onControlRegistered(listener) {
   };
 }
 function resetControlRegistry() {
-  registry.clear();
+  globalRegistry.clear();
+  scopedRegistries.clear();
   listeners.clear();
 }
 
 // src/version.ts
-var PKG_VERSION = true ? "1.8.1" : "0.0.0-dev";
+var PKG_VERSION = true ? "1.10.0" : "0.0.0-dev";
 
 // src/index.ts
 var DEFAULT_LAYOUT = [
@@ -3301,12 +3417,25 @@ var DEFAULT_LAYOUT = [
   "pip",
   "fullscreen"
 ];
+var STYLE_ID = "sp-ui-styles";
 var DEFAULT_HIDE_DELAY = 3e3;
+var ACTIVATION_KEYS = /* @__PURE__ */ new Set([" ", "Enter"]);
+var SLIDER_KEYS = /* @__PURE__ */ new Set([
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown"
+]);
 var UNMEASURED_CONTROL_WIDTH = 48;
 var FALLBACK_VOLUME_SLIDER_WIDTH = 64;
 var OVERFLOW_BUTTON_WIDTH = 44;
 var FALLBACK_BAR_PADDING_X = 24;
 var FALLBACK_BAR_GAP = 4;
+var RESIZE_FALLBACK_DEBOUNCE_MS = 100;
 var MENU_HEIGHT_RESERVE = 16;
 var FALLBACK_BAR_HEIGHT = 56;
 var MIN_MENU_HEIGHT = 120;
@@ -3318,7 +3447,7 @@ function uiPlugin(config = {}) {
   let bufferingIndicator = null;
   let errorOverlay = null;
   let bigPlayButton = null;
-  let styleEl = null;
+  let releaseStyles = null;
   let controls = [];
   let hideTimeout = null;
   let stateUnsubscribe = null;
@@ -3326,17 +3455,21 @@ function uiPlugin(config = {}) {
   let errorUnsubscribe = null;
   let reconnectingUnsubscribe = null;
   let recoveredUnsubscribe = null;
+  let loadedUnsubscribe = null;
   let controlsVisible = true;
   let rafHandle = null;
   let tray = null;
   let entries = [];
   let timeEntry = null;
   let resizeObserver = null;
+  let windowResizeTimer = null;
+  let onWindowResize = null;
   let barPaddingX = FALLBACK_BAR_PADDING_X;
   let barGap = FALLBACK_BAR_GAP;
   let volumeSliderWidth = FALLBACK_VOLUME_SLIDER_WIDTH;
   let lastFitSignature = null;
   let fitPending = true;
+  let addedContainerClass = false;
   const layout = config.controls || DEFAULT_LAYOUT;
   const hideDelay = config.hideDelay ?? DEFAULT_HIDE_DELAY;
   const showBigPlayButton = config.bigPlayButton !== false;
@@ -3379,7 +3512,7 @@ function uiPlugin(config = {}) {
       case "spacer":
         return new Spacer();
       default: {
-        const factory = getControlFactory(slot);
+        const factory = getControlFactory(slot, api.container);
         if (factory) {
           try {
             return factory(api);
@@ -3606,6 +3739,10 @@ function uiPlugin(config = {}) {
       updateControls();
     });
   };
+  const hasOpenMenu = () => controls.some((control) => {
+    const menu = control;
+    return typeof menu.isMenuOpen === "function" && menu.isMenuOpen();
+  });
   const showControls = () => {
     if (controlsVisible) {
       resetHideTimer();
@@ -3622,6 +3759,10 @@ function uiPlugin(config = {}) {
   const hideControls = () => {
     const paused = api?.getState("paused");
     if (paused) return;
+    if (hasOpenMenu()) {
+      resetHideTimer();
+      return;
+    }
     controlsVisible = false;
     controlBar?.classList.remove("sp-controls--visible");
     controlBar?.classList.add("sp-controls--hidden");
@@ -3639,22 +3780,33 @@ function uiPlugin(config = {}) {
   const handlePointerActivity = (event) => {
     last_pointer_type = event.pointerType;
   };
-  const handleInteraction = () => {
-    if (last_pointer_type === "touch") {
+  const handleInteraction = (event) => {
+    if (last_pointer_type === "touch" && !isOnControls(event)) {
       const gestures = api?.getPlugin("gestures");
       if (gestures?.ownsTapInteraction()) return;
     }
     showControls();
   };
+  const isOnControls = (event) => {
+    const target = event?.target;
+    if (!(target instanceof Node)) return false;
+    return Boolean(controlBar?.contains(target)) || Boolean(progressBar?.render().contains(target));
+  };
   const handleMouseLeave = () => {
     hideControls();
   };
   const handleKeyDown = (e) => {
     if (!api.container.contains(document.activeElement)) return;
+    if (e.defaultPrevented) return;
+    if (e.metaKey || e.ctrlKey || e.altKey) return;
     const activeEl = document.activeElement;
     if (activeEl instanceof HTMLInputElement || activeEl instanceof HTMLTextAreaElement || activeEl instanceof HTMLSelectElement || activeEl?.isContentEditable) {
       return;
     }
+    const role = activeEl?.getAttribute("role");
+    const isActivatable = activeEl instanceof HTMLButtonElement || role === "button" || role === "menuitem";
+    if (isActivatable && ACTIVATION_KEYS.has(e.key)) return;
+    if (role === "slider" && SLIDER_KEYS.has(e.key)) return;
     const video = api.container.querySelector("video");
     if (!video) return;
     const live = api.getState("live");
@@ -3721,9 +3873,7 @@ function uiPlugin(config = {}) {
     version: PKG_VERSION,
     async init(pluginApi) {
       api = pluginApi;
-      styleEl = document.createElement("style");
-      styleEl.textContent = styles;
-      document.head.appendChild(styleEl);
+      releaseStyles = injectSharedStyles(STYLE_ID, styles);
       if (config.theme) {
         this.setTheme(config.theme);
       }
@@ -3736,6 +3886,10 @@ function uiPlugin(config = {}) {
       if (containerStyle.position === "static") {
         container.style.position = "relative";
       }
+      if (!container.classList.contains("sp-container")) {
+        container.classList.add("sp-container");
+        addedContainerClass = true;
+      }
       const isPlaying = api.getState("playing");
       gradient = document.createElement("div");
       gradient.className = isPlaying ? "sp-gradient" : "sp-gradient sp-gradient--visible";
@@ -3751,13 +3905,20 @@ function uiPlugin(config = {}) {
         if (payload?.fatal) {
           const error = api.getState("error") || payload;
           errorOverlay?.show(error);
+          scheduleUpdate();
         }
       });
       reconnectingUnsubscribe = api.on("error:reconnecting", () => {
         errorOverlay?.showReconnecting();
+        scheduleUpdate();
       });
       recoveredUnsubscribe = api.on("error:recovered", () => {
         errorOverlay?.hide();
+        scheduleUpdate();
+      });
+      loadedUnsubscribe = api.on("media:loaded", () => {
+        errorOverlay?.hide();
+        scheduleUpdate();
       });
       if (showBigPlayButton) {
         bigPlayButton = new BigPlayButton(api, () => errorOverlay?.isVisible() ?? false);
@@ -3781,11 +3942,25 @@ function uiPlugin(config = {}) {
           scheduleUpdate();
         });
         resizeObserver.observe(container);
+      } else if (responsive && typeof window !== "undefined") {
+        onWindowResize = () => {
+          if (windowResizeTimer) clearTimeout(windowResizeTimer);
+          windowResizeTimer = setTimeout(() => {
+            windowResizeTimer = null;
+            applyMenuBounds(container.clientHeight);
+            fitPending = true;
+            scheduleUpdate();
+          }, RESIZE_FALLBACK_DEBOUNCE_MS);
+        };
+        window.addEventListener("resize", onWindowResize);
       }
-      controlRegistryUnsubscribe = onControlRegistered((id) => {
+      controlRegistryUnsubscribe = onControlRegistered((id, owner) => {
         if (!layout.includes(id)) {
           return;
         }
+        if (owner && owner !== api.container) {
+          return;
+        }
         api.logger.debug(`Control "${id}" registered after init, rebuilding control bar`);
         rebuildControlBar();
       });
@@ -3820,6 +3995,14 @@ function uiPlugin(config = {}) {
       }
       resizeObserver?.disconnect();
       resizeObserver = null;
+      if (onWindowResize) {
+        window.removeEventListener("resize", onWindowResize);
+        onWindowResize = null;
+      }
+      if (windowResizeTimer) {
+        clearTimeout(windowResizeTimer);
+        windowResizeTimer = null;
+      }
       api?.container?.style.removeProperty("--sp-menu-max-height");
       stateUnsubscribe?.();
       stateUnsubscribe = null;
@@ -3829,6 +4012,8 @@ function uiPlugin(config = {}) {
       reconnectingUnsubscribe = null;
       recoveredUnsubscribe?.();
       recoveredUnsubscribe = null;
+      loadedUnsubscribe?.();
+      loadedUnsubscribe = null;
       if (api?.container) {
         api.container.removeEventListener("pointerdown", handlePointerActivity);
         api.container.removeEventListener("pointermove", handlePointerActivity);
@@ -3858,8 +4043,12 @@ function uiPlugin(config = {}) {
       gradient = null;
       bufferingIndicator?.remove();
       bufferingIndicator = null;
-      styleEl?.remove();
-      styleEl = null;
+      releaseStyles?.();
+      releaseStyles = null;
+      if (addedContainerClass) {
+        api?.container?.classList.remove("sp-container");
+        addedContainerClass = false;
+      }
       api?.logger.debug("UI controls plugin destroyed");
     },
     // Public API
@@ -3912,5 +4101,6 @@ export {
   resolveFitItems,
   styles,
   uiPlugin,
-  unregisterControl
+  unregisterControl,
+  unregisterControlsFor
 };