@scarlett-player/ui 1.7.0 → 1.8.0

package/dist/index.cjs

@@ -20,18 +20,101 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  DEFAULT_PRIORITY: () => DEFAULT_PRIORITY,
+  assertFitLayout: () => assertFitLayout,
   default: () => index_default,
   formatLiveTime: () => formatLiveTime,
   formatTime: () => formatTime,
   getControlFactory: () => getControlFactory,
   icons: () => icons,
+  planFit: () => planFit,
   registerControl: () => registerControl,
   resetControlRegistry: () => resetControlRegistry,
+  resolveFitItems: () => resolveFitItems,
   styles: () => styles,
   uiPlugin: () => uiPlugin,
   unregisterControl: () => unregisterControl
 });
 module.exports = __toCommonJS(index_exports);
+var import_core2 = require("@scarlett-player/core");
+
+// src/fit.ts
+var UNKNOWN_RANK = 3;
+var DEFAULT_PRIORITY = {
+  "bandwidth-indicator": { rank: 0, exit: "hide" },
+  "skip-backward": { rank: 1, exit: "overflow" },
+  "skip-forward": { rank: 1, exit: "overflow" },
+  pip: { rank: 2, exit: "overflow" },
+  chromecast: { rank: 4, exit: "overflow" },
+  airplay: { rank: 4, exit: "overflow" },
+  volume: { rank: 5, exit: "overflow" },
+  captions: { rank: 6, exit: "overflow" },
+  quality: { rank: 6, exit: "hide" },
+  time: { rank: 7, exit: "hide" },
+  play: { rank: "never", exit: "overflow" },
+  "live-indicator": { rank: "never", exit: "overflow" },
+  settings: { rank: "never", exit: "overflow" },
+  fullscreen: { rank: "never", exit: "overflow" },
+  spacer: { rank: "never", exit: "overflow" }
+};
+function resolveFitItems(layout, priority) {
+  return layout.map((id) => {
+    const rule = DEFAULT_PRIORITY[id];
+    const rank = priority?.[id] ?? rule?.rank ?? UNKNOWN_RANK;
+    return { id, rank, exit: rule?.exit ?? "overflow" };
+  });
+}
+function assertFitLayout(layout, priority) {
+  if (!layout.includes("quality") || layout.includes("settings")) {
+    return;
+  }
+  const [quality] = resolveFitItems(["quality"], priority);
+  if (quality.rank === "never") {
+    return;
+  }
+  throw new Error(
+    `uiPlugin: a layout with "quality" needs "settings" as well. The quality control hides when the bar does not fit, and the settings menu is where its Quality row lives. Add "settings" to controls, pin quality with priority: { quality: 'never' }, or set responsive: false.`
+  );
+}
+function needed(widths, gap, overflowButtonWidth, trayUsed) {
+  const content = widths.reduce((sum, width) => sum + width, 0);
+  const gaps = gap * Math.max(0, widths.length - 1);
+  const tray = trayUsed ? overflowButtonWidth + gap : 0;
+  return content + gaps + tray;
+}
+function planFit(items, available, gap, overflowButtonWidth) {
+  const ids = items.map((item) => item.id);
+  if (available <= 0) {
+    return { inBar: ids, overflow: [], hidden: [] };
+  }
+  const counted = items.filter((item) => item.visible && item.width > 0);
+  const remaining = [...counted];
+  const overflow = /* @__PURE__ */ new Set();
+  const hidden = /* @__PURE__ */ new Set();
+  while (needed(
+    remaining.map((item) => item.width),
+    gap,
+    overflowButtonWidth,
+    overflow.size > 0
+  ) > available) {
+    let victim = -1;
+    for (let i = 0; i < remaining.length; i++) {
+      const candidate = remaining[i];
+      if (candidate.rank === "never") continue;
+      if (victim === -1 || candidate.rank <= remaining[victim].rank) {
+        victim = i;
+      }
+    }
+    if (victim === -1) break;
+    const [removed] = remaining.splice(victim, 1);
+    (removed.exit === "hide" ? hidden : overflow).add(removed.id);
+  }
+  return {
+    inBar: ids.filter((id) => !overflow.has(id) && !hidden.has(id)),
+    overflow: ids.filter((id) => overflow.has(id)),
+    hidden: ids.filter((id) => hidden.has(id))
+  };
+}
 
 // src/styles.ts
 var styles = `
@@ -94,7 +177,17 @@ var styles = `
   display: flex;
   align-items: center;
   padding: 0 12px 12px;
+  /* Composed through a variable so the fullscreen rule below can add the
+     device's own inset without restating the 12px. */
+  padding-bottom: calc(12px + var(--sp-inset-bottom, 0px));
   gap: 4px;
+  /* Declared on the bar because the fit needs the same number the volume rules
+     below use: the slider expands mid-interaction and the plugin reserves the
+     room in advance (see interactionReserve() in index.ts, which reads this
+     property off this element at init). One declaration, so the stylesheet and
+     the arithmetic cannot drift. Both the bar and the overflow tray are inside
+     .sp-controls, so a volume control inherits it wherever the fit put it. */
+  --sp-volume-slider-width: 64px;
   opacity: 0;
   transform: translateY(4px);
   transition: opacity 0.25s ease, transform 0.25s ease;
@@ -112,12 +205,37 @@ var styles = `
   pointer-events: none;
 }
 
+/* ============================================
+   Safe Area (fullscreen only)
+
+   Scoped to :fullscreen on purpose. Applied unconditionally, the inset would
+   push an inline player's controls up on any page whose viewport meta says
+   viewport-fit=cover, where there is no notch or home indicator over the
+   player at all. Both the bar and the progress wrapper are direct children of
+   the container, which is the element that goes fullscreen.
+
+   The :-webkit-full-screen twin is a separate rule because an unknown
+   pseudo-class anywhere in a selector list invalidates the whole rule.
+
+   Nothing is needed in packages/embed/iframe.html: viewport-fit has no effect
+   inside an iframe.
+   ============================================ */
+:fullscreen > .sp-controls,
+:fullscreen > .sp-progress-wrapper {
+  --sp-inset-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+:-webkit-full-screen > .sp-controls,
+:-webkit-full-screen > .sp-progress-wrapper {
+  --sp-inset-bottom: env(safe-area-inset-bottom, 0px);
+}
+
 /* ============================================
    Progress Bar (Above Controls)
    ============================================ */
 .sp-progress-wrapper {
   position: absolute;
-  bottom: 48px;
+  bottom: calc(48px + var(--sp-inset-bottom, 0px));
   left: 12px;
   right: 12px;
   height: 20px;
@@ -133,6 +251,31 @@ var styles = `
   opacity: 1;
 }
 
+/* Touch: a 20px wrapper is not a 20px target. The control bar is a later
+   sibling at the same z-index and spans 0..56px from the bottom, so it wins
+   hit-testing in the 48..56 overlap and the exclusive region for scrubbing is
+   12px. The wrapper grows UPWARD to 44px (48..92) because growing downward
+   would be swallowed by the bar; the 3px bar itself stays exactly where it was
+   (centred 8.5px above the wrapper's bottom edge, which is what
+   align-items: center gave it inside 20px). The handle and tooltip
+   enlargements are gated behind (hover: hover) and never match a finger, but
+   .sp-progress--dragging is not, so the handle still appears mid-drag.
+
+   any-pointer, not pointer: (pointer: coarse) describes the PRIMARY pointer
+   only, so a hybrid laptop with a mouse and a touchscreen reports fine and kept
+   the 12px exclusive region under a finger. (any-pointer: coarse) is true
+   whenever a coarse pointer is available at all, which is the population that
+   needs the target. The cost on such a machine is 24px of extra hit area for
+   the mouse, over the player's own bottom edge. */
+@media (any-pointer: coarse) {
+  .sp-progress-wrapper {
+    height: 44px;
+    align-items: flex-end;
+    padding-bottom: 8.5px;
+    box-sizing: border-box;
+  }
+}
+
 .sp-progress {
   position: relative;
   width: 100%;
@@ -340,6 +483,61 @@ var styles = `
   min-width: 0;
 }
 
+/* ============================================
+   Overflow Tray
+
+   The wrapper is deliberately unpositioned: the strip is absolutely
+   positioned against .sp-controls (the nearest positioned ancestor), so it
+   spans the bar's width and sits directly above it instead of hanging off a
+   44px button.
+
+   The strip wraps horizontally and keeps overflow visible. A vertical menu of
+   44px rows would be taller than a portrait phone player (211px at 375px wide,
+   measured 2026-09-05) and a scrolling one would clip the popovers registered
+   controls own.
+   ============================================ */
+.sp-overflow {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.sp-overflow-tray {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 4px;
+  padding: 8px 12px;
+  background: rgba(20, 20, 20, 0.95);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: 8px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  overflow: visible;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(8px);
+  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
+  z-index: 20;
+}
+
+.sp-overflow-tray--open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+/* Beats a control's own inline style.display = '' on its next update(), so a
+   control the fit took off screen stays off screen until the fit says
+   otherwise. */
+.sp-control--collapsed {
+  display: none !important;
+}
+
 /* ============================================
    Time Display
    ============================================ */
@@ -367,14 +565,18 @@ var styles = `
   transition: width 0.2s ease;
 }
 
+/* Both widths come from --sp-volume-slider-width on .sp-controls, which is also
+   what the fit reserves for this control. focus-within is deliberately not
+   gated on hover: a tap on the mute button focuses it, which is how the slider
+   opens on a phone. */
 @media (hover: hover) {
   .sp-volume:hover .sp-volume__slider-wrap {
-    width: 64px;
+    width: var(--sp-volume-slider-width);
   }
 }
 
 .sp-volume:focus-within .sp-volume__slider-wrap {
-  width: 64px;
+  width: var(--sp-volume-slider-width);
 }
 
 .sp-volume__slider {
@@ -475,6 +677,14 @@ var styles = `
   position: absolute;
   bottom: calc(100% + 8px);
   right: 0;
+  /* Bounded to the player, see .sp-settings-panel. border-box because the
+     bound is a content-box height by default and this menu adds 8px of padding
+     top and bottom: at the 139px bound a 211px player gives, it rendered 155px
+     and the host clipped the last 16px of it. */
+  box-sizing: border-box;
+  max-height: var(--sp-menu-max-height, none);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
   background: rgba(20, 20, 20, 0.95);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
@@ -543,6 +753,29 @@ var styles = `
   position: absolute;
   bottom: calc(100% + 8px);
   right: 0;
+  /* Bounded to the room above the control bar, written by the UI plugin's
+     ResizeObserver as max(120px, container height - the bar's measured height
+     - 16px). The bar is measured rather than assumed because its
+     padding-bottom carries the safe-area inset in fullscreen, which moves the
+     anchor these menus hang from. The Speed sub-panel is 253px (a
+     37px header plus six 36px rows) against a 211px portrait phone player, so
+     without this the host's overflow: hidden cuts off the Back header and the
+     first three speeds and playback speed is unreachable (measured at 375x211
+     on 2026-09-05). With the variable unset the panel behaves exactly as it
+     did before.
+
+     Not applied to .sp-overflow-tray: that one has to keep overflow visible so
+     the popovers its adopted controls own are not clipped.
+
+     border-box because max-height bounds the content box: .sp-settings-panel--main
+     is this same element with 4px of padding top and bottom, so wherever the
+     bound binds the main menu, it rendered 8px past it and the host clipped the
+     difference. The --sub views set padding: 0 and were already exact, which is
+     why the browser harness's speed-panel check could not see this. */
+  box-sizing: border-box;
+  max-height: var(--sp-menu-max-height, none);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
   background: rgba(20, 20, 20, 0.95);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
@@ -554,7 +787,6 @@ var styles = `
   transform: translateY(8px);
   transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
   z-index: 20;
-  overflow: hidden;
 }
 
 .sp-settings-panel--open {
@@ -701,6 +933,70 @@ var styles = `
   opacity: 0.4;
 }
 
+/* ============================================
+   Big Play Button
+
+   z-index 12 puts it above the gradient (5) and above the gestures plugin's
+   tap surface (6), so a tap lands on the button and starts playback instead
+   of being read as a tap-to-toggle-controls gesture - exactly how the control
+   bar's play button (10) already behaves. It stays below the spinner (15) and
+   the error overlay (25), both of which own the middle of the picture when
+   they are up.
+
+   Hidden with visibility, not opacity alone, so it takes no pointer events
+   while it is away.
+   ============================================ */
+.sp-big-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 12;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Comfortably past the 44px minimum touch target the control bar uses. */
+  width: 72px;
+  height: 72px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--sp-accent, #e50914);
+  color: #fff;
+  cursor: pointer;
+  opacity: 0;
+  visibility: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+  transition: opacity 0.2s ease, visibility 0.2s, transform 0.15s ease,
+    background 0.15s ease;
+}
+
+.sp-big-play--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.sp-big-play svg {
+  width: 36px;
+  height: 36px;
+  fill: currentColor;
+  /* Optical centring: the play triangle's mass sits left of the glyph box. */
+  margin-left: 3px;
+}
+
+.sp-big-play:hover {
+  transform: translate(-50%, -50%) scale(1.06);
+}
+
+.sp-big-play:active {
+  transform: translate(-50%, -50%) scale(0.96);
+}
+
+.sp-big-play:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 3px;
+}
+
 /* ============================================
    Error Overlay
    ============================================ */
@@ -875,17 +1171,24 @@ var styles = `
   .sp-control,
   .sp-volume__slider-wrap,
   .sp-quality-menu,
+  .sp-overflow-tray,
   .sp-settings-panel,
   .sp-settings-panel__row,
   .sp-settings-panel__item,
   .sp-settings-panel__header,
   .sp-buffering,
+  .sp-big-play,
   .sp-error-overlay,
   .sp-error-overlay__retry,
   .sp-error-overlay__dismiss {
     transition: none;
   }
 
+  .sp-big-play:hover,
+  .sp-big-play:active {
+    transform: translate(-50%, -50%);
+  }
+
   .sp-live__dot,
   .sp-spin {
     animation: none;
@@ -924,6 +1227,8 @@ var icons = {
   captionsOff: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.5 5.5v13h-15v-13h15zM19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"/></svg>`,
   checkmark: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`,
   chevronUp: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>`,
+  /** Vertical ellipsis for the overflow tray button. */
+  more: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>`,
   chevronDown: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>`,
   spinner: `<svg viewBox="0 0 24 24" fill="currentColor" class="sp-spin"><path d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z"/></svg>`,
   skipForward: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/></svg>`,
@@ -1058,6 +1363,112 @@ var PlayButton = class {
   }
 };
 
+// src/controls/BigPlayButton.ts
+var BigPlayButton = class {
+  /**
+   * @param api - Plugin API for state and container access
+   * @param isOverlayVisible - Whether the error overlay is showing; the button
+   *   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) {
+    /**
+     * Latched on the first `playing`.
+     *
+     * "Hidden from the first playing onward" cannot be read off `currentTime`
+     * alone: a viewer who pauses in the first fraction of a second is still
+     * mid-playback, and the button reappearing over live video would cover the
+     * picture.
+     */
+    this.hasStarted = false;
+    this.clickHandler = () => {
+      this.start();
+    };
+    this.api = api;
+    this.isOverlayVisible = isOverlayVisible;
+    const btn = document.createElement("button");
+    btn.className = "sp-big-play";
+    btn.setAttribute("type", "button");
+    btn.setAttribute("aria-label", "Play");
+    setHTML(btn, icons.play);
+    btn.addEventListener("click", this.clickHandler);
+    this.el = btn;
+  }
+  render() {
+    return this.el;
+  }
+  /**
+   * Show or hide the button, and swap in the replay glyph after `ended`.
+   *
+   * Driven by the same `scheduleUpdate()` pass as every other control, so the
+   * button cannot disagree with the control bar about what state playback is
+   * in.
+   */
+  update() {
+    const playing = this.api.getState("playing");
+    const ended = this.hasEnded();
+    const currentTime = this.api.getState("currentTime");
+    const playbackState = this.api.getState("playbackState");
+    const error = this.api.getState("error");
+    if (playing) {
+      this.hasStarted = true;
+    }
+    let visible;
+    if (error || this.isOverlayVisible()) {
+      visible = false;
+    } else if (playbackState === "loading") {
+      visible = false;
+    } else if (playing) {
+      visible = false;
+    } else if (ended) {
+      visible = true;
+    } else if (this.hasStarted || currentTime !== 0) {
+      visible = false;
+    } else {
+      visible = playbackState === "idle" || playbackState === "ready";
+    }
+    setHTML(this.el, ended ? icons.replay : icons.play);
+    setAttr(this.el, "aria-label", ended ? "Replay" : "Play");
+    this.el.classList.toggle("sp-big-play--visible", visible);
+  }
+  /**
+   * Whether playback has actually ended, asked of the media element.
+   *
+   * NOT the `ended` state key. Measured in Chrome on 2026-09-02: neither
+   * provider clears that key on a replay (only `load()` does), so after a
+   * viewer replays a video it stays true for the rest of the session, while
+   * `video.ended` correctly goes false the moment the position leaves the
+   * end. Trusting the key would leave this button sitting over playing video,
+   * and would make a later pause bring it back as Replay. The key is the
+   * fallback for the window before a provider has created an element.
+   */
+  hasEnded() {
+    const video = getVideo(this.api.container);
+    return video ? video.ended : Boolean(this.api.getState("ended"));
+  }
+  /**
+   * Start (or restart) playback.
+   *
+   * The same two branches as the control bar's play button: restart from zero
+   * after the video ended, otherwise just play. There is no pause branch,
+   * because this button is never on screen while playback is running. It reads
+   * `video.ended` for the same reason `hasEnded()` does.
+   */
+  start() {
+    const video = getVideo(this.api.container);
+    if (!video) return;
+    if (video.ended) {
+      video.currentTime = 0;
+    }
+    video.play().catch(() => {
+    });
+  }
+  destroy() {
+    this.el.removeEventListener("click", this.clickHandler);
+    this.el.remove();
+  }
+};
+
 // src/controls/ThumbnailPreview.ts
 var ThumbnailPreview = class {
   constructor() {
@@ -1986,6 +2397,7 @@ var PipButton = class {
 };
 
 // src/controls/FullscreenButton.ts
+var import_core = require("@scarlett-player/core");
 var FullscreenButton = class {
   constructor(api) {
     this.clickHandler = () => {
@@ -2008,16 +2420,22 @@ var FullscreenButton = class {
       setAttr(this.el, "aria-label", "Fullscreen");
     }
   }
+  /**
+   * Enter or leave fullscreen.
+   *
+   * The direction comes from the browser rather than from the `fullscreen`
+   * state key: state is a report of what happened, and a stale one would invert
+   * the button. Rejections are swallowed because the browser refuses these
+   * routinely (no user gesture, denied by permission policy) and an unhandled
+   * rejection helps nobody.
+   */
   async toggle() {
     const container = this.api.container;
-    const video = getVideo(container);
     try {
-      if (document.fullscreenElement) {
-        await document.exitFullscreen();
-      } else if (container.requestFullscreen) {
-        await container.requestFullscreen();
-      } else if (video?.webkitEnterFullscreen) {
-        video.webkitEnterFullscreen();
+      if ((0, import_core.isFullscreen)(container)) {
+        await (0, import_core.exitFullscreen)(container);
+      } else {
+        await (0, import_core.enterFullscreen)(container);
       }
     } catch {
     }
@@ -2725,6 +3143,155 @@ var BandwidthIndicator = class {
   }
 };
 
+// src/controls/OverflowTray.ts
+var OverflowTray = class {
+  /**
+   * @param api - Plugin API, kept for parity with the other controls and for
+   *   logging; the tray itself reads no state
+   */
+  constructor(api) {
+    this.api = api;
+    this.isOpen = false;
+    this.toggleHandler = () => {
+      this.isOpen ? this.close() : this.open();
+    };
+    this.el = createElement("div", { className: "sp-overflow" });
+    this.btn = createButton("sp-overflow__btn", "More controls", icons.more);
+    this.btn.setAttribute("aria-haspopup", "true");
+    this.btn.setAttribute("aria-expanded", "false");
+    this.btn.addEventListener("click", this.toggleHandler);
+    this.panel = createElement("div", {
+      className: "sp-overflow-tray",
+      role: "group",
+      "aria-label": "More controls"
+    });
+    this.el.appendChild(this.btn);
+    this.el.appendChild(this.panel);
+    this.el.style.display = "none";
+    this.closeHandler = (e) => {
+      if (!this.el.contains(e.target)) {
+        this.close();
+      }
+    };
+    document.addEventListener("click", this.closeHandler);
+    this.keyHandler = (e) => {
+      if (!this.isOpen || e.key !== "Escape") return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.close();
+      this.btn.focus();
+    };
+    document.addEventListener("keydown", this.keyHandler);
+  }
+  /**
+   * The bar item to place in the control bar.
+   *
+   * @returns The wrapper holding the button and the strip
+   */
+  render() {
+    return this.el;
+  }
+  /**
+   * No state of its own: the fit loop owns what is inside it.
+   */
+  update() {
+  }
+  /**
+   * Move a control's element into the tray.
+   *
+   * The element is moved as-is, so its class, icon, aria-label, event handlers
+   * and `update()` all keep working.
+   *
+   * @param el - The control element leaving the bar
+   */
+  adopt(el) {
+    this.panel.appendChild(el);
+    this.syncVisibility();
+  }
+  /**
+   * Take a control's element back out of the tray.
+   *
+   * The caller decides where in the bar it goes; this only detaches it and
+   * updates the button's visibility.
+   *
+   * @param el - The control element returning to the bar
+   * @returns The same element, detached
+   */
+  release(el) {
+    if (el.parentNode === this.panel) {
+      this.panel.removeChild(el);
+    }
+    this.syncVisibility();
+    return el;
+  }
+  /**
+   * Whether an element is currently held by the tray.
+   *
+   * @param el - Element to test
+   * @returns True when the tray is its parent
+   */
+  holds(el) {
+    return el.parentNode === this.panel;
+  }
+  /**
+   * Open the strip.
+   */
+  open() {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    this.panel.classList.add("sp-overflow-tray--open");
+    this.btn.setAttribute("aria-expanded", "true");
+  }
+  /**
+   * Close the strip.
+   *
+   * Deliberately not called after a control inside it is used: skip, PiP and
+   * cast are things a viewer taps more than once in a row.
+   */
+  close() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.panel.classList.remove("sp-overflow-tray--open");
+    this.btn.setAttribute("aria-expanded", "false");
+  }
+  /**
+   * Show the button only while the tray holds something the viewer can see.
+   *
+   * A control that hid itself (no cast device on the network, no text tracks)
+   * can be sitting in the tray with `display: none`, and a button that opens an
+   * empty strip is worse than no button at all.
+   */
+  syncVisibility() {
+    const usable = Array.from(this.panel.children).some(
+      (child) => child.style.display !== "none"
+    );
+    this.el.style.display = usable ? "" : "none";
+    if (!usable && this.isOpen) {
+      this.close();
+    }
+  }
+  /**
+   * Re-check the button's visibility after the controls have updated
+   * themselves.
+   */
+  refresh() {
+    this.syncVisibility();
+  }
+  /**
+   * Remove the document listeners and the tray itself.
+   *
+   * Adopted elements are left where they are: they belong to their own
+   * controls, which are destroyed by the plugin alongside this one.
+   */
+  destroy() {
+    document.removeEventListener("click", this.closeHandler);
+    document.removeEventListener("keydown", this.keyHandler);
+    this.btn.removeEventListener("click", this.toggleHandler);
+    this.el.remove();
+    this.api.logger.debug("Overflow tray destroyed");
+  }
+};
+
 // src/control-registry.ts
 var registry = /* @__PURE__ */ new Map();
 var listeners = /* @__PURE__ */ new Set();
@@ -2751,6 +3318,9 @@ function resetControlRegistry() {
   listeners.clear();
 }
 
+// src/version.ts
+var PKG_VERSION = true ? "1.7.1" : "0.0.0-dev";
+
 // src/index.ts
 var DEFAULT_LAYOUT = [
   "play",
@@ -2769,6 +3339,14 @@ var DEFAULT_LAYOUT = [
   "fullscreen"
 ];
 var DEFAULT_HIDE_DELAY = 3e3;
+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 MENU_HEIGHT_RESERVE = 16;
+var FALLBACK_BAR_HEIGHT = 56;
+var MIN_MENU_HEIGHT = 120;
 function uiPlugin(config = {}) {
   let api;
   let controlBar = null;
@@ -2776,6 +3354,7 @@ function uiPlugin(config = {}) {
   let progressBar = null;
   let bufferingIndicator = null;
   let errorOverlay = null;
+  let bigPlayButton = null;
   let styleEl = null;
   let controls = [];
   let hideTimeout = null;
@@ -2786,8 +3365,22 @@ function uiPlugin(config = {}) {
   let recoveredUnsubscribe = null;
   let controlsVisible = true;
   let rafHandle = null;
+  let tray = null;
+  let entries = [];
+  let timeEntry = null;
+  let resizeObserver = null;
+  let barPaddingX = FALLBACK_BAR_PADDING_X;
+  let barGap = FALLBACK_BAR_GAP;
+  let volumeSliderWidth = FALLBACK_VOLUME_SLIDER_WIDTH;
+  let lastFitSignature = null;
+  let fitPending = true;
   const layout = config.controls || DEFAULT_LAYOUT;
   const hideDelay = config.hideDelay ?? DEFAULT_HIDE_DELAY;
+  const showBigPlayButton = config.bigPlayButton !== false;
+  const responsive = config.responsive !== false;
+  if (responsive) {
+    assertFitLayout(layout, config.priority);
+  }
   const createControl = (slot) => {
     switch (slot) {
       case "play":
@@ -2841,13 +3434,179 @@ function uiPlugin(config = {}) {
     if (!controlBar) {
       return;
     }
+    const rules = new Map(
+      resolveFitItems(layout, config.priority).map((template) => [template.id, template])
+    );
     for (const slot of layout) {
       const control = createControl(slot);
-      if (control) {
-        controls.push(control);
-        controlBar.appendChild(control.render());
+      if (!control) {
+        continue;
+      }
+      controls.push(control);
+      const el = control.render();
+      controlBar.appendChild(el);
+      const rule = rules.get(slot);
+      const entry = {
+        slot,
+        control,
+        el,
+        rank: rule?.rank ?? "never",
+        exit: rule?.exit ?? "overflow",
+        width: -1
+      };
+      entries.push(entry);
+      if (slot === "time") {
+        timeEntry = entry;
+      }
+    }
+    if (responsive) {
+      tray = new OverflowTray(api);
+      controls.push(tray);
+      controlBar.appendChild(tray.render());
+      placeTrayButton();
+    }
+  };
+  const placeTrayButton = () => {
+    if (!controlBar || !tray) {
+      return;
+    }
+    const trayEl = tray.render();
+    const fullscreen = entries.find((entry) => entry.slot === "fullscreen");
+    const before = fullscreen && fullscreen.el.parentNode === controlBar ? fullscreen.el : null;
+    if (before) {
+      if (trayEl.nextSibling !== before) {
+        controlBar.insertBefore(trayEl, before);
+      }
+      return;
+    }
+    if (controlBar.lastChild !== trayEl) {
+      controlBar.appendChild(trayEl);
+    }
+  };
+  const visibilitySignature = () => {
+    let flags = "";
+    for (const entry of entries) {
+      flags += entry.el.style.display === "none" ? "0" : "1";
+    }
+    return `${flags}:${timeEntry?.el.textContent?.length ?? 0}`;
+  };
+  const applyFit = (plan) => {
+    if (!controlBar || !tray) {
+      return;
+    }
+    const overflow = new Set(plan.overflow);
+    const hidden = new Set(plan.hidden);
+    for (const entry of entries) {
+      if (entry.slot === "spacer") {
+        continue;
+      }
+      if (hidden.has(entry.slot)) {
+        if (tray.holds(entry.el)) {
+          returnToBar(entry);
+        }
+        entry.el.classList.add("sp-control--collapsed");
+        continue;
+      }
+      entry.el.classList.remove("sp-control--collapsed");
+      if (overflow.has(entry.slot)) {
+        if (!tray.holds(entry.el)) {
+          tray.adopt(entry.el);
+        }
+      } else if (tray.holds(entry.el)) {
+        returnToBar(entry);
+      }
+    }
+    tray.refresh();
+    placeTrayButton();
+  };
+  const returnToBar = (entry) => {
+    if (!controlBar || !tray) {
+      return;
+    }
+    const el = tray.release(entry.el);
+    const trayEl = tray.render();
+    let before = trayEl.parentNode === controlBar ? trayEl : null;
+    for (let i = entries.indexOf(entry) + 1; i < entries.length; i++) {
+      if (entries[i].el.parentNode === controlBar) {
+        before = entries[i].el;
+        break;
+      }
+    }
+    controlBar.insertBefore(el, before);
+  };
+  const expandedWidth = (entry) => {
+    if (entry.slot !== "volume") {
+      return 0;
+    }
+    const wrap = entry.el.querySelector(".sp-volume__slider-wrap");
+    return wrap ? wrap.getBoundingClientRect().width : 0;
+  };
+  const interactionReserve = (entry) => entry.slot === "volume" ? volumeSliderWidth : 0;
+  const readBarMetrics = (bar) => {
+    const barStyle = getComputedStyle(bar);
+    const paddingLeft = parseFloat(barStyle.paddingLeft);
+    const paddingRight = parseFloat(barStyle.paddingRight);
+    const gap = parseFloat(barStyle.columnGap || barStyle.gap);
+    const sliderWidth = parseFloat(
+      barStyle.getPropertyValue("--sp-volume-slider-width")
+    );
+    barPaddingX = Number.isFinite(paddingLeft) && Number.isFinite(paddingRight) ? paddingLeft + paddingRight : FALLBACK_BAR_PADDING_X;
+    barGap = Number.isFinite(gap) ? gap : FALLBACK_BAR_GAP;
+    volumeSliderWidth = Number.isFinite(sliderWidth) ? sliderWidth : FALLBACK_VOLUME_SLIDER_WIDTH;
+  };
+  const fitControls = () => {
+    if (!responsive || !controlBar || !tray) {
+      return;
+    }
+    if (controlBar.clientWidth === 0) {
+      return;
+    }
+    readBarMetrics(controlBar);
+    const spacerGaps = entries.filter(
+      (entry) => entry.slot === "spacer" && entry.el.style.display !== "none"
+    ).length;
+    const available = controlBar.clientWidth - barPaddingX - spacerGaps * barGap;
+    const items = [];
+    for (const entry of entries) {
+      if (entry.slot === "spacer") {
+        continue;
+      }
+      const visible = entry.el.style.display !== "none";
+      const measurable = visible && entry.el.parentNode === controlBar && !entry.el.classList.contains("sp-control--collapsed");
+      if (measurable) {
+        entry.width = entry.el.getBoundingClientRect().width - expandedWidth(entry);
+      } else if (entry.width < 0) {
+        entry.width = UNMEASURED_CONTROL_WIDTH;
       }
+      items.push({
+        id: entry.slot,
+        rank: entry.rank,
+        exit: entry.exit,
+        width: entry.width + interactionReserve(entry),
+        visible
+      });
     }
+    const trayEl = tray.render();
+    const trayWidth = trayEl.style.display === "none" ? 0 : trayEl.getBoundingClientRect().width;
+    applyFit(planFit(items, available, barGap, trayWidth || OVERFLOW_BUTTON_WIDTH));
+    lastFitSignature = visibilitySignature();
+    fitPending = false;
+  };
+  const maybeFit = () => {
+    if (!responsive) {
+      return;
+    }
+    if (!fitPending && visibilitySignature() === lastFitSignature) {
+      return;
+    }
+    fitControls();
+  };
+  const applyMenuBounds = (height) => {
+    const barHeight = controlBar?.offsetHeight || FALLBACK_BAR_HEIGHT;
+    api?.container?.style.setProperty(
+      "--sp-menu-max-height",
+      `${Math.max(MIN_MENU_HEIGHT, Math.round(height) - barHeight - MENU_HEIGHT_RESERVE)}px`
+    );
   };
   const rebuildControlBar = () => {
     if (!controlBar) {
@@ -2855,7 +3614,12 @@ function uiPlugin(config = {}) {
     }
     controls.forEach((c) => c.destroy());
     controls = [];
+    entries = [];
+    timeEntry = null;
+    tray = null;
     controlBar.replaceChildren();
+    lastFitSignature = null;
+    fitPending = true;
     populateControlBar();
     updateControls();
   };
@@ -2869,6 +3633,8 @@ function uiPlugin(config = {}) {
     const showSpinner = waiting || seeking && !api?.getState("paused") || isLoading;
     bufferingIndicator?.classList.toggle("sp-buffering--visible", !!showSpinner);
     errorOverlay?.update();
+    bigPlayButton?.update();
+    maybeFit();
   };
   const scheduleUpdate = () => {
     if (rafHandle !== null) return;
@@ -2947,11 +3713,11 @@ function uiPlugin(config = {}) {
         break;
       case "f":
         e.preventDefault();
-        if (document.fullscreenElement) {
-          document.exitFullscreen().catch(() => {
+        if ((0, import_core2.isFullscreen)(api.container)) {
+          (0, import_core2.exitFullscreen)(api.container).catch(() => {
           });
         } else {
-          api.container.requestFullscreen?.().catch(() => {
+          (0, import_core2.enterFullscreen)(api.container).catch(() => {
           });
         }
         break;
@@ -2989,7 +3755,7 @@ function uiPlugin(config = {}) {
     id: "ui-controls",
     name: "UI Controls",
     type: "ui",
-    version: "1.0.0",
+    version: PKG_VERSION,
     async init(pluginApi) {
       api = pluginApi;
       styleEl = document.createElement("style");
@@ -3030,6 +3796,10 @@ function uiPlugin(config = {}) {
       recoveredUnsubscribe = api.on("error:recovered", () => {
         errorOverlay?.hide();
       });
+      if (showBigPlayButton) {
+        bigPlayButton = new BigPlayButton(api, () => errorOverlay?.isVisible() ?? false);
+        container.appendChild(bigPlayButton.render());
+      }
       progressBar = new ProgressBar(api);
       container.appendChild(progressBar.render());
       if (!isPlaying) {
@@ -3041,6 +3811,14 @@ function uiPlugin(config = {}) {
       controlBar.setAttribute("aria-label", "Video controls");
       populateControlBar();
       container.appendChild(controlBar);
+      if (responsive && typeof ResizeObserver === "function") {
+        resizeObserver = new ResizeObserver((observed) => {
+          applyMenuBounds(observed[0]?.contentRect.height ?? container.clientHeight);
+          fitPending = true;
+          scheduleUpdate();
+        });
+        resizeObserver.observe(container);
+      }
       controlRegistryUnsubscribe = onControlRegistered((id) => {
         if (!layout.includes(id)) {
           return;
@@ -3057,7 +3835,6 @@ function uiPlugin(config = {}) {
       container.addEventListener("click", handleInteraction);
       document.addEventListener("keydown", handleKeyDown);
       stateUnsubscribe = api.subscribeToState(scheduleUpdate);
-      document.addEventListener("fullscreenchange", scheduleUpdate);
       updateControls();
       if (!container.hasAttribute("tabindex")) {
         container.setAttribute("tabindex", "0");
@@ -3078,6 +3855,9 @@ function uiPlugin(config = {}) {
         cancelAnimationFrame(rafHandle);
         rafHandle = null;
       }
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+      api?.container?.style.removeProperty("--sp-menu-max-height");
       stateUnsubscribe?.();
       stateUnsubscribe = null;
       errorUnsubscribe?.();
@@ -3096,15 +3876,19 @@ function uiPlugin(config = {}) {
         api.container.removeEventListener("click", handleInteraction);
       }
       document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("fullscreenchange", scheduleUpdate);
       controlRegistryUnsubscribe?.();
       controlRegistryUnsubscribe = null;
       controls.forEach((c) => c.destroy());
       controls = [];
+      entries = [];
+      timeEntry = null;
+      tray = null;
       progressBar?.destroy();
       progressBar = null;
       errorOverlay?.destroy();
       errorOverlay = null;
+      bigPlayButton?.destroy();
+      bigPlayButton = null;
       controlBar?.remove();
       controlBar = null;
       gradient?.remove();
@@ -3153,12 +3937,16 @@ function uiPlugin(config = {}) {
 var index_default = uiPlugin;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DEFAULT_PRIORITY,
+  assertFitLayout,
   formatLiveTime,
   formatTime,
   getControlFactory,
   icons,
+  planFit,
   registerControl,
   resetControlRegistry,
+  resolveFitItems,
   styles,
   uiPlugin,
   unregisterControl