@scarlett-player/ui 1.0.2 → 1.2.0

package/README.md

@@ -30,9 +30,14 @@ const player = new ScarlettPlayer({
 
 - Play/pause, seek, volume controls
 - Fullscreen toggle
+- Picture-in-Picture toggle (disabled until media metadata is loaded; hidden
+  when the browser has no PiP support; Safari webkit presentation mode
+  supported)
 - Quality selector
 - Progress bar with buffering indicator
 - Time display (current / duration)
+- Error overlay with viewer-friendly copy per error code, a Try Again action,
+  and a reconnecting state while the player self-heals
 - Keyboard shortcuts
 - Customizable theming
 - Auto-hide controls

package/dist/index.cjs

@@ -712,6 +712,17 @@ var styles = `
   fill: currentColor;
 }
 
+/* Reconnecting: pulse the icon so the overlay reads as active work,
+   not a dead-end error */
+.sp-error-overlay--reconnecting .sp-error-overlay__icon {
+  animation: sp-reconnect-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes sp-reconnect-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}
+
 .sp-error-overlay__message {
   color: rgba(255, 255, 255, 0.9);
   font-size: 15px;
@@ -918,12 +929,24 @@ function createButton(className, label, icon) {
     "aria-label": label,
     type: "button"
   });
-  btn.innerHTML = icon;
+  setHTML(btn, icon);
   return btn;
 }
 function getVideo(container) {
   return container.querySelector("video");
 }
+var lastHTML = /* @__PURE__ */ new WeakMap();
+function setHTML(el, html) {
+  if (lastHTML.get(el) === html) return false;
+  el.innerHTML = html;
+  lastHTML.set(el, html);
+  return true;
+}
+function setAttr(el, name, value) {
+  if (el.getAttribute(name) === value) return false;
+  el.setAttribute(name, value);
+  return true;
+}
 
 // src/utils/format.ts
 function formatTime(seconds) {
@@ -978,8 +1001,8 @@ var PlayButton = class {
       icon = icons.play;
       label = "Play";
     }
-    this.el.innerHTML = icon;
-    this.el.setAttribute("aria-label", label);
+    setHTML(this.el, icon);
+    setAttr(this.el, "aria-label", label);
   }
   toggle() {
     const video = getVideo(this.api.container);
@@ -1483,13 +1506,16 @@ var VolumeControl = class {
       icon = icons.volumeHigh;
       label = "Mute";
     }
-    this.btn.innerHTML = icon;
-    this.btn.setAttribute("aria-label", label);
+    setHTML(this.btn, icon);
+    setAttr(this.btn, "aria-label", label);
     const displayVolume = muted ? 0 : volume;
-    this.level.style.width = `${displayVolume * 100}%`;
+    const width = `${displayVolume * 100}%`;
+    if (this.level.style.width !== width) {
+      this.level.style.width = width;
+    }
     const volumePercent = Math.round(displayVolume * 100);
-    this.slider.setAttribute("aria-valuenow", String(volumePercent));
-    this.slider.setAttribute("aria-valuetext", `${volumePercent}%`);
+    setAttr(this.slider, "aria-valuenow", String(volumePercent));
+    setAttr(this.slider, "aria-valuetext", `${volumePercent}%`);
   }
   toggleMute() {
     const video = getVideo(this.api.container);
@@ -1726,11 +1752,11 @@ var CastButton = class {
       this.el.classList.toggle("sp-cast--active", !!active);
       this.el.classList.toggle("sp-cast--unavailable", !available && !active);
       if (active) {
-        this.el.innerHTML = icons.chromecastConnected;
-        this.el.setAttribute("aria-label", "Stop casting");
+        setHTML(this.el, icons.chromecastConnected);
+        setAttr(this.el, "aria-label", "Stop casting");
       } else {
-        this.el.innerHTML = icons.chromecast;
-        this.el.setAttribute("aria-label", available ? "Cast" : "No Cast devices found");
+        setHTML(this.el, icons.chromecast);
+        setAttr(this.el, "aria-label", available ? "Cast" : "No Cast devices found");
       }
     } else {
       const active = this.api.getState("airplayActive");
@@ -1738,7 +1764,7 @@ var CastButton = class {
       this.el.disabled = false;
       this.el.classList.toggle("sp-cast--active", !!active);
       this.el.classList.remove("sp-cast--unavailable");
-      this.el.setAttribute("aria-label", active ? "Stop AirPlay" : "AirPlay");
+      setAttr(this.el, "aria-label", active ? "Stop AirPlay" : "AirPlay");
     }
   }
   handleClick() {
@@ -1776,25 +1802,38 @@ var CastButton = class {
 var PipButton = class {
   constructor(api) {
     this.clickHandler = () => {
-      this.toggle();
+      void this.toggle().catch(() => {
+      });
     };
     this.api = api;
-    const video = document.createElement("video");
-    this.supported = "pictureInPictureEnabled" in document || "webkitSetPresentationMode" in video;
+    const probe = document.createElement("video");
+    this.supported = "pictureInPictureEnabled" in document || "webkitSetPresentationMode" in probe;
     this.el = createButton("sp-pip", "Picture-in-Picture", icons.pip);
     this.el.addEventListener("click", this.clickHandler);
     if (!this.supported) {
       this.el.style.display = "none";
+    } else {
+      this.el.disabled = true;
+      this.el.setAttribute("aria-disabled", "true");
     }
   }
   render() {
     return this.el;
   }
+  /** Whether the media element is ready to enter PiP (metadata loaded). */
+  isMediaReady() {
+    const video = getVideo(this.api.container);
+    return !!video && video.readyState >= HTMLMediaElement.HAVE_METADATA;
+  }
   update() {
     if (!this.supported) return;
-    const pip = this.api.getState("pip");
-    this.el.setAttribute("aria-label", pip ? "Exit Picture-in-Picture" : "Picture-in-Picture");
-    this.el.classList.toggle("sp-pip--active", !!pip);
+    const pip = !!this.api.getState("pip");
+    const enabled = pip || this.isMediaReady();
+    this.el.disabled = !enabled;
+    setAttr(this.el, "aria-disabled", String(!enabled));
+    setHTML(this.el, pip ? icons.exitPip : icons.pip);
+    setAttr(this.el, "aria-label", pip ? "Exit Picture-in-Picture" : "Picture-in-Picture");
+    this.el.classList.toggle("sp-pip--active", pip);
   }
   async toggle() {
     const video = getVideo(this.api.container);
@@ -1802,8 +1841,14 @@ var PipButton = class {
       this.api.logger.warn("PiP: video element not found");
       return;
     }
+    const isInPip = document.pictureInPictureElement === video || video.webkitPresentationMode === "picture-in-picture";
+    if (!isInPip && video.readyState < HTMLMediaElement.HAVE_METADATA) {
+      this.api.logger.debug("PiP: ignored, media not ready", {
+        readyState: video.readyState
+      });
+      return;
+    }
     try {
-      const isInPip = document.pictureInPictureElement === video || video.webkitPresentationMode === "picture-in-picture";
       if (isInPip) {
         if (document.pictureInPictureElement) {
           await document.exitPictureInPicture();
@@ -1820,7 +1865,8 @@ var PipButton = class {
         this.api.logger.debug("PiP: entered");
       }
     } catch (e) {
-      this.api.logger.warn("PiP: failed", { error: e.message });
+      const message = e instanceof Error ? e.message : String(e);
+      this.api.logger.warn("PiP: failed", { error: message });
     }
   }
   destroy() {
@@ -1845,11 +1891,11 @@ var FullscreenButton = class {
   update() {
     const fullscreen = this.api.getState("fullscreen");
     if (fullscreen) {
-      this.el.innerHTML = icons.exitFullscreen;
-      this.el.setAttribute("aria-label", "Exit fullscreen");
+      setHTML(this.el, icons.exitFullscreen);
+      setAttr(this.el, "aria-label", "Exit fullscreen");
     } else {
-      this.el.innerHTML = icons.fullscreen;
-      this.el.setAttribute("aria-label", "Fullscreen");
+      setHTML(this.el, icons.fullscreen);
+      setAttr(this.el, "aria-label", "Fullscreen");
     }
   }
   async toggle() {
@@ -1890,6 +1936,27 @@ var Spacer = class {
 // src/controls/ErrorOverlay.ts
 function getUserMessage(error) {
   if (!error) return "Something went wrong.";
+  const code = error.code;
+  if (code) {
+    switch (code) {
+      case "MEDIA_NETWORK_ERROR":
+        return "Having trouble connecting. Check your internet and try again.";
+      case "MEDIA_DECODE_ERROR":
+        return "This video can't be played right now.";
+      case "SOURCE_LOAD_FAILED":
+      case "SOURCE_NOT_SUPPORTED":
+      case "PROVIDER_NOT_FOUND":
+        return "Unable to load video. Please try again.";
+      case "PLAYBACK_FAILED":
+        return "Playback stopped unexpectedly. Please try again.";
+      case "MEDIA_APPEND_ERROR":
+        return "Video playback was interrupted. Please try again.";
+      case "MEDIA_BUFFER_FULL":
+        return "Your device is low on video memory. Close other apps or tabs and try again.";
+      case "PLAYLIST_INVALID":
+        return "The stream is temporarily unavailable. Please try again.";
+    }
+  }
   const msg = error.message?.toLowerCase() || "";
   if (msg.includes("network") || msg.includes("timeout") || msg.includes("fetch") || msg.includes("connection")) {
     return "Having trouble connecting. Check your internet and try again.";
@@ -1917,13 +1984,6 @@ var ErrorOverlay = class {
       const src = source?.src || this.lastSource;
       if (src) {
         this.api.emit("error:retry", { src });
-        const video = this.api.container.querySelector("video");
-        if (video) {
-          video.src = src;
-          video.load();
-          video.play().catch(() => {
-          });
-        }
       }
       setTimeout(() => {
         this.retryBtn.disabled = false;
@@ -1984,12 +2044,36 @@ var ErrorOverlay = class {
     }
     this.visible = true;
     this.retryBtn.disabled = false;
+    this.el.classList.remove("sp-error-overlay--reconnecting");
+    this.el.classList.add("sp-error-overlay--visible");
+  }
+  /**
+   * Show the reconnecting state.
+   *
+   * Displayed while the provider auto-reconnects after a fatal error, so the
+   * viewer sees the player working on the problem instead of a dead-end
+   * error. Try Again stays available for viewers who want to force an
+   * immediate attempt.
+   */
+  showReconnecting() {
+    const messageEl = this.el.querySelector(".sp-error-overlay__message");
+    if (messageEl) {
+      messageEl.textContent = "Connection lost. Reconnecting...";
+    }
+    const source = this.api.getState("source");
+    if (source?.src) {
+      this.lastSource = source.src;
+    }
+    this.visible = true;
+    this.retryBtn.disabled = false;
+    this.el.classList.add("sp-error-overlay--reconnecting");
     this.el.classList.add("sp-error-overlay--visible");
   }
   /** Hide the error overlay */
   hide() {
     this.visible = false;
     this.el.classList.remove("sp-error-overlay--visible");
+    this.el.classList.remove("sp-error-overlay--reconnecting");
   }
   isVisible() {
     return this.visible;
@@ -2473,12 +2557,12 @@ var CaptionsButton = class {
     }
     this.el.style.display = "";
     if (currentTrack) {
-      this.el.innerHTML = icons.captions;
-      this.el.setAttribute("aria-label", `Captions: ${currentTrack.label}`);
+      setHTML(this.el, icons.captions);
+      setAttr(this.el, "aria-label", `Captions: ${currentTrack.label}`);
       this.el.classList.add("sp-captions--active");
     } else {
-      this.el.innerHTML = icons.captionsOff;
-      this.el.setAttribute("aria-label", "Captions");
+      setHTML(this.el, icons.captionsOff);
+      setAttr(this.el, "aria-label", "Captions");
       this.el.classList.remove("sp-captions--active");
     }
   }
@@ -2561,7 +2645,10 @@ function uiPlugin(config = {}) {
   let hideTimeout = null;
   let stateUnsubscribe = null;
   let errorUnsubscribe = null;
+  let reconnectingUnsubscribe = null;
+  let recoveredUnsubscribe = null;
   let controlsVisible = true;
+  let rafHandle = null;
   const layout = config.controls || DEFAULT_LAYOUT;
   const hideDelay = config.hideDelay ?? DEFAULT_HIDE_DELAY;
   const createControl = (slot) => {
@@ -2613,6 +2700,13 @@ function uiPlugin(config = {}) {
     bufferingIndicator?.classList.toggle("sp-buffering--visible", !!showSpinner);
     errorOverlay?.update();
   };
+  const scheduleUpdate = () => {
+    if (rafHandle !== null) return;
+    rafHandle = requestAnimationFrame(() => {
+      rafHandle = null;
+      updateControls();
+    });
+  };
   const showControls = () => {
     if (controlsVisible) {
       resetHideTimer();
@@ -2662,7 +2756,12 @@ function uiPlugin(config = {}) {
       case " ":
       case "k":
         e.preventDefault();
-        video.paused ? video.play() : video.pause();
+        if (video.paused) {
+          video.play().catch(() => {
+          });
+        } else {
+          video.pause();
+        }
         break;
       case "m":
         e.preventDefault();
@@ -2671,9 +2770,11 @@ function uiPlugin(config = {}) {
       case "f":
         e.preventDefault();
         if (document.fullscreenElement) {
-          document.exitFullscreen();
+          document.exitFullscreen().catch(() => {
+          });
         } else {
-          api.container.requestFullscreen?.();
+          api.container.requestFullscreen?.().catch(() => {
+          });
         }
         break;
       case "ArrowLeft":
@@ -2741,10 +2842,16 @@ function uiPlugin(config = {}) {
       container.appendChild(errorOverlay.render());
       errorUnsubscribe = api.on("error", (payload) => {
         if (payload?.fatal) {
-          const error = api.getState("error") || new Error(payload.message || "Playback error");
+          const error = api.getState("error") || payload;
           errorOverlay?.show(error);
         }
       });
+      reconnectingUnsubscribe = api.on("error:reconnecting", () => {
+        errorOverlay?.showReconnecting();
+      });
+      recoveredUnsubscribe = api.on("error:recovered", () => {
+        errorOverlay?.hide();
+      });
       progressBar = new ProgressBar(api);
       container.appendChild(progressBar.render());
       if (!isPlaying) {
@@ -2768,8 +2875,8 @@ function uiPlugin(config = {}) {
       container.addEventListener("touchstart", handleInteraction, { passive: true });
       container.addEventListener("click", handleInteraction);
       document.addEventListener("keydown", handleKeyDown);
-      stateUnsubscribe = api.subscribeToState(updateControls);
-      document.addEventListener("fullscreenchange", updateControls);
+      stateUnsubscribe = api.subscribeToState(scheduleUpdate);
+      document.addEventListener("fullscreenchange", scheduleUpdate);
       updateControls();
       if (!container.hasAttribute("tabindex")) {
         container.setAttribute("tabindex", "0");
@@ -2786,10 +2893,18 @@ function uiPlugin(config = {}) {
         clearTimeout(hideTimeout);
         hideTimeout = null;
       }
+      if (rafHandle !== null) {
+        cancelAnimationFrame(rafHandle);
+        rafHandle = null;
+      }
       stateUnsubscribe?.();
       stateUnsubscribe = null;
       errorUnsubscribe?.();
       errorUnsubscribe = null;
+      reconnectingUnsubscribe?.();
+      reconnectingUnsubscribe = null;
+      recoveredUnsubscribe?.();
+      recoveredUnsubscribe = null;
       if (api?.container) {
         api.container.removeEventListener("mousemove", handleInteraction);
         api.container.removeEventListener("mouseenter", handleInteraction);
@@ -2798,7 +2913,7 @@ function uiPlugin(config = {}) {
         api.container.removeEventListener("click", handleInteraction);
       }
       document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("fullscreenchange", updateControls);
+      document.removeEventListener("fullscreenchange", scheduleUpdate);
       controls.forEach((c) => c.destroy());
       controls = [];
       progressBar?.destroy();

package/dist/index.d.cts

@@ -105,7 +105,7 @@ declare const icons: {
  * Modern, minimal design inspired by Mux Player and Vidstack.
  * Uses CSS custom properties for theming.
  */
-declare const styles = "\n/* ============================================\n   Container & Base\n   ============================================ */\n.sp-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: #000;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-container video {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: contain;\n}\n\n.sp-container:focus {\n  outline: none;\n}\n\n/* ============================================\n   Gradient Overlay\n   ============================================ */\n.sp-gradient {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 160px;\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.8) 0%,\n    rgba(0, 0, 0, 0.4) 50%,\n    transparent 100%\n  );\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.25s ease;\n  z-index: 5;\n}\n\n.sp-gradient--visible {\n  opacity: 1;\n}\n\n/* ============================================\n   Controls Container\n   ============================================ */\n.sp-controls {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 12px 12px;\n  gap: 4px;\n  opacity: 0;\n  transform: translateY(4px);\n  transition: opacity 0.25s ease, transform 0.25s ease;\n  z-index: 10;\n}\n\n.sp-controls--visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.sp-controls--hidden {\n  opacity: 0;\n  transform: translateY(4px);\n  pointer-events: none;\n}\n\n/* ============================================\n   Progress Bar (Above Controls)\n   ============================================ */\n.sp-progress-wrapper {\n  position: absolute;\n  bottom: 48px;\n  left: 12px;\n  right: 12px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 10;\n  opacity: 0;\n  transition: opacity 0.25s ease;\n}\n\n.sp-progress-wrapper--visible {\n  opacity: 1;\n}\n\n.sp-progress {\n  position: relative;\n  width: 100%;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  transition: height 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress {\n    height: 5px;\n  }\n}\n\n.sp-progress--dragging {\n  height: 5px;\n}\n\n.sp-progress__track {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n  overflow: hidden;\n}\n\n.sp-progress__buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.4);\n  border-radius: inherit;\n  transition: width 0.1s linear;\n}\n\n.sp-progress__filled {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: var(--sp-accent, #e50914);\n  border-radius: inherit;\n}\n\n.sp-progress__handle {\n  position: absolute;\n  top: 50%;\n  width: 14px;\n  height: 14px;\n  background: var(--sp-accent, #e50914);\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.15s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__handle {\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.sp-progress--dragging .sp-progress__handle {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* Thumbnail Preview */\n.sp-thumbnail-preview {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  transform: translateX(-50%);\n  pointer-events: none;\n  display: none;\n  z-index: 21;\n  border-radius: 4px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\n.sp-thumbnail-preview__img {\n  background-repeat: no-repeat;\n}\n\n/* Progress Tooltip */\n.sp-progress__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  padding: 6px 10px;\n  background: rgba(20, 20, 20, 0.95);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n  border-radius: 4px;\n  white-space: nowrap;\n  transform: translateX(-50%);\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__tooltip {\n    opacity: 1;\n  }\n}\n\n/* ============================================\n   Control Buttons\n   ============================================ */\n.sp-control {\n  background: none;\n  border: none;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;\n  flex-shrink: 0;\n  min-width: 44px;\n  min-height: 44px;\n}\n\n@media (hover: hover) {\n  .sp-control:hover {\n    color: #fff;\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-control:active {\n  transform: scale(0.92);\n}\n\n.sp-control:focus-visible {\n  outline: 2px solid var(--sp-accent, #e50914);\n  outline-offset: 2px;\n}\n\n.sp-control:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  transform: none;\n}\n\n.sp-control:disabled:hover {\n  background: none;\n}\n\n.sp-control svg {\n  width: 24px;\n  height: 24px;\n  fill: currentColor;\n  display: block;\n}\n\n.sp-control--small svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* ============================================\n   Spacer\n   ============================================ */\n.sp-spacer {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ============================================\n   Time Display\n   ============================================ */\n.sp-time {\n  font-size: 13px;\n  font-variant-numeric: tabular-nums;\n  color: rgba(255, 255, 255, 0.9);\n  white-space: nowrap;\n  padding: 0 4px;\n  letter-spacing: 0.02em;\n}\n\n/* ============================================\n   Volume Control\n   ============================================ */\n.sp-volume {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.sp-volume__slider-wrap {\n  width: 0;\n  overflow: hidden;\n  transition: width 0.2s ease;\n}\n\n@media (hover: hover) {\n  .sp-volume:hover .sp-volume__slider-wrap {\n    width: 64px;\n  }\n}\n\n.sp-volume:focus-within .sp-volume__slider-wrap {\n  width: 64px;\n}\n\n.sp-volume__slider {\n  width: 64px;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  cursor: pointer;\n  position: relative;\n  margin: 0 8px 0 4px;\n}\n\n.sp-volume__level {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: #fff;\n  border-radius: inherit;\n  transition: width 0.1s ease;\n}\n\n/* ============================================\n   Live Indicator\n   ============================================ */\n.sp-live {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--sp-accent, #e50914);\n  cursor: pointer;\n  padding: 6px 10px;\n  border-radius: 4px;\n  transition: background 0.15s ease, opacity 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-live:hover {\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-live__dot {\n  width: 8px;\n  height: 8px;\n  background: currentColor;\n  border-radius: 50%;\n  animation: sp-pulse 2s ease-in-out infinite;\n}\n\n.sp-live--behind {\n  opacity: 0.6;\n}\n\n.sp-live--behind .sp-live__dot {\n  animation: none;\n}\n\n.sp-live--behind span {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n/* Progress bar live mode: accent color for filled bar */\n.sp-progress--live .sp-progress__filled {\n  background: var(--sp-accent, #e50914);\n}\n\n@keyframes sp-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n\n/* ============================================\n   Quality / Settings Menu\n   ============================================ */\n.sp-quality {\n  position: relative;\n}\n\n.sp-quality__btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sp-quality__label {\n  font-size: 12px;\n  font-weight: 500;\n  opacity: 0.9;\n}\n\n.sp-quality-menu {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  padding: 8px 0;\n  min-width: 150px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-quality-menu--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sp-quality-menu__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-quality-menu__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-quality-menu__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-quality-menu__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-quality-menu__item--active .sp-quality-menu__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Settings Menu (Gear Icon)\n   ============================================ */\n.sp-settings {\n  position: relative;\n}\n\n.sp-settings__btn {\n  display: flex;\n  align-items: center;\n}\n\n.sp-settings-panel {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  min-width: 200px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n  overflow: hidden;\n}\n\n.sp-settings-panel--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Main menu rows */\n.sp-settings-panel--main {\n  padding: 4px 0;\n}\n\n.sp-settings-panel__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__row:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__label {\n  font-weight: 500;\n}\n\n.sp-settings-panel__value {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: rgba(255, 255, 255, 0.6);\n  font-size: 12px;\n}\n\n.sp-settings-panel__arrow {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__arrow svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n/* Sub-menu panels */\n.sp-settings-panel--sub {\n  padding: 0;\n}\n\n.sp-settings-panel__header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__header:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__back {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__back svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__header-label {\n  flex: 1;\n}\n\n.sp-settings-panel__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-settings-panel__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-settings-panel__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-settings-panel__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-settings-panel__check svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__item--active .sp-settings-panel__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Captions Button\n   ============================================ */\n.sp-captions--active {\n  color: var(--sp-accent, #e50914);\n}\n\n/* ============================================\n   Cast Button States\n   ============================================ */\n.sp-cast--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-cast--unavailable {\n  opacity: 0.4;\n}\n\n/* ============================================\n   Error Overlay\n   ============================================ */\n.sp-error-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.85);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 25;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.25s ease, visibility 0.25s;\n}\n\n.sp-error-overlay--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sp-error-overlay__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 24px;\n  max-width: 360px;\n}\n\n.sp-error-overlay__icon {\n  color: rgba(255, 255, 255, 0.7);\n  margin-bottom: 16px;\n}\n\n.sp-error-overlay__icon svg {\n  width: 48px;\n  height: 48px;\n  fill: currentColor;\n}\n\n.sp-error-overlay__message {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 15px;\n  line-height: 1.5;\n  margin: 0 0 24px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-error-overlay__actions {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.sp-error-overlay__retry {\n  background: var(--sp-accent, #e50914);\n  color: #fff;\n  border: none;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 120px;\n  min-height: 44px;\n  transition: background 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__retry:hover {\n  filter: brightness(1.1);\n}\n\n.sp-error-overlay__retry:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__retry:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n.sp-error-overlay__dismiss {\n  background: none;\n  color: rgba(255, 255, 255, 0.7);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 100px;\n  min-height: 44px;\n  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__dismiss:hover {\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n.sp-error-overlay__dismiss:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__dismiss:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n/* ============================================\n   Buffering Indicator\n   ============================================ */\n.sp-buffering {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 15;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.sp-buffering--visible {\n  opacity: 1;\n}\n\n.sp-buffering svg {\n  width: 48px;\n  height: 48px;\n  fill: rgba(255, 255, 255, 0.9);\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));\n}\n\n@keyframes sp-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.sp-spin {\n  animation: sp-spin 0.8s linear infinite;\n}\n\n/* ============================================\n   Reduced Motion\n   ============================================ */\n@media (prefers-reduced-motion: reduce) {\n  .sp-gradient,\n  .sp-controls,\n  .sp-progress-wrapper,\n  .sp-progress,\n  .sp-progress__handle,\n  .sp-progress__tooltip,\n  .sp-control,\n  .sp-volume__slider-wrap,\n  .sp-quality-menu,\n  .sp-settings-panel,\n  .sp-settings-panel__row,\n  .sp-settings-panel__item,\n  .sp-settings-panel__header,\n  .sp-buffering,\n  .sp-error-overlay,\n  .sp-error-overlay__retry,\n  .sp-error-overlay__dismiss {\n    transition: none;\n  }\n\n  .sp-live__dot,\n  .sp-spin {\n    animation: none;\n  }\n}\n\n/* ============================================\n   CSS Custom Properties (Theming)\n   ============================================ */\n:root {\n  --sp-accent: #e50914;\n  --sp-color: #fff;\n  --sp-bg: rgba(0, 0, 0, 0.8);\n  --sp-control-height: 48px;\n  --sp-icon-size: 24px;\n}\n";
+declare const styles = "\n/* ============================================\n   Container & Base\n   ============================================ */\n.sp-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: #000;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-container video {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: contain;\n}\n\n.sp-container:focus {\n  outline: none;\n}\n\n/* ============================================\n   Gradient Overlay\n   ============================================ */\n.sp-gradient {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 160px;\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.8) 0%,\n    rgba(0, 0, 0, 0.4) 50%,\n    transparent 100%\n  );\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.25s ease;\n  z-index: 5;\n}\n\n.sp-gradient--visible {\n  opacity: 1;\n}\n\n/* ============================================\n   Controls Container\n   ============================================ */\n.sp-controls {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 12px 12px;\n  gap: 4px;\n  opacity: 0;\n  transform: translateY(4px);\n  transition: opacity 0.25s ease, transform 0.25s ease;\n  z-index: 10;\n}\n\n.sp-controls--visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.sp-controls--hidden {\n  opacity: 0;\n  transform: translateY(4px);\n  pointer-events: none;\n}\n\n/* ============================================\n   Progress Bar (Above Controls)\n   ============================================ */\n.sp-progress-wrapper {\n  position: absolute;\n  bottom: 48px;\n  left: 12px;\n  right: 12px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 10;\n  opacity: 0;\n  transition: opacity 0.25s ease;\n}\n\n.sp-progress-wrapper--visible {\n  opacity: 1;\n}\n\n.sp-progress {\n  position: relative;\n  width: 100%;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  transition: height 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress {\n    height: 5px;\n  }\n}\n\n.sp-progress--dragging {\n  height: 5px;\n}\n\n.sp-progress__track {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n  overflow: hidden;\n}\n\n.sp-progress__buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.4);\n  border-radius: inherit;\n  transition: width 0.1s linear;\n}\n\n.sp-progress__filled {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: var(--sp-accent, #e50914);\n  border-radius: inherit;\n}\n\n.sp-progress__handle {\n  position: absolute;\n  top: 50%;\n  width: 14px;\n  height: 14px;\n  background: var(--sp-accent, #e50914);\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.15s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__handle {\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.sp-progress--dragging .sp-progress__handle {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* Thumbnail Preview */\n.sp-thumbnail-preview {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  transform: translateX(-50%);\n  pointer-events: none;\n  display: none;\n  z-index: 21;\n  border-radius: 4px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\n.sp-thumbnail-preview__img {\n  background-repeat: no-repeat;\n}\n\n/* Progress Tooltip */\n.sp-progress__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  padding: 6px 10px;\n  background: rgba(20, 20, 20, 0.95);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n  border-radius: 4px;\n  white-space: nowrap;\n  transform: translateX(-50%);\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__tooltip {\n    opacity: 1;\n  }\n}\n\n/* ============================================\n   Control Buttons\n   ============================================ */\n.sp-control {\n  background: none;\n  border: none;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;\n  flex-shrink: 0;\n  min-width: 44px;\n  min-height: 44px;\n}\n\n@media (hover: hover) {\n  .sp-control:hover {\n    color: #fff;\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-control:active {\n  transform: scale(0.92);\n}\n\n.sp-control:focus-visible {\n  outline: 2px solid var(--sp-accent, #e50914);\n  outline-offset: 2px;\n}\n\n.sp-control:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  transform: none;\n}\n\n.sp-control:disabled:hover {\n  background: none;\n}\n\n.sp-control svg {\n  width: 24px;\n  height: 24px;\n  fill: currentColor;\n  display: block;\n}\n\n.sp-control--small svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* ============================================\n   Spacer\n   ============================================ */\n.sp-spacer {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ============================================\n   Time Display\n   ============================================ */\n.sp-time {\n  font-size: 13px;\n  font-variant-numeric: tabular-nums;\n  color: rgba(255, 255, 255, 0.9);\n  white-space: nowrap;\n  padding: 0 4px;\n  letter-spacing: 0.02em;\n}\n\n/* ============================================\n   Volume Control\n   ============================================ */\n.sp-volume {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.sp-volume__slider-wrap {\n  width: 0;\n  overflow: hidden;\n  transition: width 0.2s ease;\n}\n\n@media (hover: hover) {\n  .sp-volume:hover .sp-volume__slider-wrap {\n    width: 64px;\n  }\n}\n\n.sp-volume:focus-within .sp-volume__slider-wrap {\n  width: 64px;\n}\n\n.sp-volume__slider {\n  width: 64px;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  cursor: pointer;\n  position: relative;\n  margin: 0 8px 0 4px;\n}\n\n.sp-volume__level {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: #fff;\n  border-radius: inherit;\n  transition: width 0.1s ease;\n}\n\n/* ============================================\n   Live Indicator\n   ============================================ */\n.sp-live {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--sp-accent, #e50914);\n  cursor: pointer;\n  padding: 6px 10px;\n  border-radius: 4px;\n  transition: background 0.15s ease, opacity 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-live:hover {\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-live__dot {\n  width: 8px;\n  height: 8px;\n  background: currentColor;\n  border-radius: 50%;\n  animation: sp-pulse 2s ease-in-out infinite;\n}\n\n.sp-live--behind {\n  opacity: 0.6;\n}\n\n.sp-live--behind .sp-live__dot {\n  animation: none;\n}\n\n.sp-live--behind span {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n/* Progress bar live mode: accent color for filled bar */\n.sp-progress--live .sp-progress__filled {\n  background: var(--sp-accent, #e50914);\n}\n\n@keyframes sp-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n\n/* ============================================\n   Quality / Settings Menu\n   ============================================ */\n.sp-quality {\n  position: relative;\n}\n\n.sp-quality__btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sp-quality__label {\n  font-size: 12px;\n  font-weight: 500;\n  opacity: 0.9;\n}\n\n.sp-quality-menu {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  padding: 8px 0;\n  min-width: 150px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-quality-menu--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sp-quality-menu__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-quality-menu__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-quality-menu__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-quality-menu__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-quality-menu__item--active .sp-quality-menu__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Settings Menu (Gear Icon)\n   ============================================ */\n.sp-settings {\n  position: relative;\n}\n\n.sp-settings__btn {\n  display: flex;\n  align-items: center;\n}\n\n.sp-settings-panel {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  min-width: 200px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n  overflow: hidden;\n}\n\n.sp-settings-panel--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Main menu rows */\n.sp-settings-panel--main {\n  padding: 4px 0;\n}\n\n.sp-settings-panel__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__row:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__label {\n  font-weight: 500;\n}\n\n.sp-settings-panel__value {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: rgba(255, 255, 255, 0.6);\n  font-size: 12px;\n}\n\n.sp-settings-panel__arrow {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__arrow svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n/* Sub-menu panels */\n.sp-settings-panel--sub {\n  padding: 0;\n}\n\n.sp-settings-panel__header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__header:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__back {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__back svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__header-label {\n  flex: 1;\n}\n\n.sp-settings-panel__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-settings-panel__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-settings-panel__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-settings-panel__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-settings-panel__check svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__item--active .sp-settings-panel__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Captions Button\n   ============================================ */\n.sp-captions--active {\n  color: var(--sp-accent, #e50914);\n}\n\n/* ============================================\n   Cast Button States\n   ============================================ */\n.sp-cast--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-cast--unavailable {\n  opacity: 0.4;\n}\n\n/* ============================================\n   Error Overlay\n   ============================================ */\n.sp-error-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.85);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 25;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.25s ease, visibility 0.25s;\n}\n\n.sp-error-overlay--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sp-error-overlay__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 24px;\n  max-width: 360px;\n}\n\n.sp-error-overlay__icon {\n  color: rgba(255, 255, 255, 0.7);\n  margin-bottom: 16px;\n}\n\n.sp-error-overlay__icon svg {\n  width: 48px;\n  height: 48px;\n  fill: currentColor;\n}\n\n/* Reconnecting: pulse the icon so the overlay reads as active work,\n   not a dead-end error */\n.sp-error-overlay--reconnecting .sp-error-overlay__icon {\n  animation: sp-reconnect-pulse 1.2s ease-in-out infinite;\n}\n\n@keyframes sp-reconnect-pulse {\n  0%, 100% { opacity: 0.4; }\n  50% { opacity: 1; }\n}\n\n.sp-error-overlay__message {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 15px;\n  line-height: 1.5;\n  margin: 0 0 24px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-error-overlay__actions {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.sp-error-overlay__retry {\n  background: var(--sp-accent, #e50914);\n  color: #fff;\n  border: none;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 120px;\n  min-height: 44px;\n  transition: background 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__retry:hover {\n  filter: brightness(1.1);\n}\n\n.sp-error-overlay__retry:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__retry:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n.sp-error-overlay__dismiss {\n  background: none;\n  color: rgba(255, 255, 255, 0.7);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 100px;\n  min-height: 44px;\n  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__dismiss:hover {\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n.sp-error-overlay__dismiss:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__dismiss:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n/* ============================================\n   Buffering Indicator\n   ============================================ */\n.sp-buffering {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 15;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.sp-buffering--visible {\n  opacity: 1;\n}\n\n.sp-buffering svg {\n  width: 48px;\n  height: 48px;\n  fill: rgba(255, 255, 255, 0.9);\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));\n}\n\n@keyframes sp-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.sp-spin {\n  animation: sp-spin 0.8s linear infinite;\n}\n\n/* ============================================\n   Reduced Motion\n   ============================================ */\n@media (prefers-reduced-motion: reduce) {\n  .sp-gradient,\n  .sp-controls,\n  .sp-progress-wrapper,\n  .sp-progress,\n  .sp-progress__handle,\n  .sp-progress__tooltip,\n  .sp-control,\n  .sp-volume__slider-wrap,\n  .sp-quality-menu,\n  .sp-settings-panel,\n  .sp-settings-panel__row,\n  .sp-settings-panel__item,\n  .sp-settings-panel__header,\n  .sp-buffering,\n  .sp-error-overlay,\n  .sp-error-overlay__retry,\n  .sp-error-overlay__dismiss {\n    transition: none;\n  }\n\n  .sp-live__dot,\n  .sp-spin {\n    animation: none;\n  }\n}\n\n/* ============================================\n   CSS Custom Properties (Theming)\n   ============================================ */\n:root {\n  --sp-accent: #e50914;\n  --sp-color: #fff;\n  --sp-bg: rgba(0, 0, 0, 0.8);\n  --sp-control-height: 48px;\n  --sp-icon-size: 24px;\n}\n";
 
 /**
  * Formatting utility functions

package/dist/index.d.ts

@@ -105,7 +105,7 @@ declare const icons: {
  * Modern, minimal design inspired by Mux Player and Vidstack.
  * Uses CSS custom properties for theming.
  */
-declare const styles = "\n/* ============================================\n   Container & Base\n   ============================================ */\n.sp-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: #000;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-container video {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: contain;\n}\n\n.sp-container:focus {\n  outline: none;\n}\n\n/* ============================================\n   Gradient Overlay\n   ============================================ */\n.sp-gradient {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 160px;\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.8) 0%,\n    rgba(0, 0, 0, 0.4) 50%,\n    transparent 100%\n  );\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.25s ease;\n  z-index: 5;\n}\n\n.sp-gradient--visible {\n  opacity: 1;\n}\n\n/* ============================================\n   Controls Container\n   ============================================ */\n.sp-controls {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 12px 12px;\n  gap: 4px;\n  opacity: 0;\n  transform: translateY(4px);\n  transition: opacity 0.25s ease, transform 0.25s ease;\n  z-index: 10;\n}\n\n.sp-controls--visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.sp-controls--hidden {\n  opacity: 0;\n  transform: translateY(4px);\n  pointer-events: none;\n}\n\n/* ============================================\n   Progress Bar (Above Controls)\n   ============================================ */\n.sp-progress-wrapper {\n  position: absolute;\n  bottom: 48px;\n  left: 12px;\n  right: 12px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 10;\n  opacity: 0;\n  transition: opacity 0.25s ease;\n}\n\n.sp-progress-wrapper--visible {\n  opacity: 1;\n}\n\n.sp-progress {\n  position: relative;\n  width: 100%;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  transition: height 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress {\n    height: 5px;\n  }\n}\n\n.sp-progress--dragging {\n  height: 5px;\n}\n\n.sp-progress__track {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n  overflow: hidden;\n}\n\n.sp-progress__buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.4);\n  border-radius: inherit;\n  transition: width 0.1s linear;\n}\n\n.sp-progress__filled {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: var(--sp-accent, #e50914);\n  border-radius: inherit;\n}\n\n.sp-progress__handle {\n  position: absolute;\n  top: 50%;\n  width: 14px;\n  height: 14px;\n  background: var(--sp-accent, #e50914);\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.15s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__handle {\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.sp-progress--dragging .sp-progress__handle {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* Thumbnail Preview */\n.sp-thumbnail-preview {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  transform: translateX(-50%);\n  pointer-events: none;\n  display: none;\n  z-index: 21;\n  border-radius: 4px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\n.sp-thumbnail-preview__img {\n  background-repeat: no-repeat;\n}\n\n/* Progress Tooltip */\n.sp-progress__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  padding: 6px 10px;\n  background: rgba(20, 20, 20, 0.95);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n  border-radius: 4px;\n  white-space: nowrap;\n  transform: translateX(-50%);\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__tooltip {\n    opacity: 1;\n  }\n}\n\n/* ============================================\n   Control Buttons\n   ============================================ */\n.sp-control {\n  background: none;\n  border: none;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;\n  flex-shrink: 0;\n  min-width: 44px;\n  min-height: 44px;\n}\n\n@media (hover: hover) {\n  .sp-control:hover {\n    color: #fff;\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-control:active {\n  transform: scale(0.92);\n}\n\n.sp-control:focus-visible {\n  outline: 2px solid var(--sp-accent, #e50914);\n  outline-offset: 2px;\n}\n\n.sp-control:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  transform: none;\n}\n\n.sp-control:disabled:hover {\n  background: none;\n}\n\n.sp-control svg {\n  width: 24px;\n  height: 24px;\n  fill: currentColor;\n  display: block;\n}\n\n.sp-control--small svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* ============================================\n   Spacer\n   ============================================ */\n.sp-spacer {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ============================================\n   Time Display\n   ============================================ */\n.sp-time {\n  font-size: 13px;\n  font-variant-numeric: tabular-nums;\n  color: rgba(255, 255, 255, 0.9);\n  white-space: nowrap;\n  padding: 0 4px;\n  letter-spacing: 0.02em;\n}\n\n/* ============================================\n   Volume Control\n   ============================================ */\n.sp-volume {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.sp-volume__slider-wrap {\n  width: 0;\n  overflow: hidden;\n  transition: width 0.2s ease;\n}\n\n@media (hover: hover) {\n  .sp-volume:hover .sp-volume__slider-wrap {\n    width: 64px;\n  }\n}\n\n.sp-volume:focus-within .sp-volume__slider-wrap {\n  width: 64px;\n}\n\n.sp-volume__slider {\n  width: 64px;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  cursor: pointer;\n  position: relative;\n  margin: 0 8px 0 4px;\n}\n\n.sp-volume__level {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: #fff;\n  border-radius: inherit;\n  transition: width 0.1s ease;\n}\n\n/* ============================================\n   Live Indicator\n   ============================================ */\n.sp-live {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--sp-accent, #e50914);\n  cursor: pointer;\n  padding: 6px 10px;\n  border-radius: 4px;\n  transition: background 0.15s ease, opacity 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-live:hover {\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-live__dot {\n  width: 8px;\n  height: 8px;\n  background: currentColor;\n  border-radius: 50%;\n  animation: sp-pulse 2s ease-in-out infinite;\n}\n\n.sp-live--behind {\n  opacity: 0.6;\n}\n\n.sp-live--behind .sp-live__dot {\n  animation: none;\n}\n\n.sp-live--behind span {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n/* Progress bar live mode: accent color for filled bar */\n.sp-progress--live .sp-progress__filled {\n  background: var(--sp-accent, #e50914);\n}\n\n@keyframes sp-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n\n/* ============================================\n   Quality / Settings Menu\n   ============================================ */\n.sp-quality {\n  position: relative;\n}\n\n.sp-quality__btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sp-quality__label {\n  font-size: 12px;\n  font-weight: 500;\n  opacity: 0.9;\n}\n\n.sp-quality-menu {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  padding: 8px 0;\n  min-width: 150px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-quality-menu--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sp-quality-menu__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-quality-menu__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-quality-menu__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-quality-menu__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-quality-menu__item--active .sp-quality-menu__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Settings Menu (Gear Icon)\n   ============================================ */\n.sp-settings {\n  position: relative;\n}\n\n.sp-settings__btn {\n  display: flex;\n  align-items: center;\n}\n\n.sp-settings-panel {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  min-width: 200px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n  overflow: hidden;\n}\n\n.sp-settings-panel--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Main menu rows */\n.sp-settings-panel--main {\n  padding: 4px 0;\n}\n\n.sp-settings-panel__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__row:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__label {\n  font-weight: 500;\n}\n\n.sp-settings-panel__value {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: rgba(255, 255, 255, 0.6);\n  font-size: 12px;\n}\n\n.sp-settings-panel__arrow {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__arrow svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n/* Sub-menu panels */\n.sp-settings-panel--sub {\n  padding: 0;\n}\n\n.sp-settings-panel__header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__header:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__back {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__back svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__header-label {\n  flex: 1;\n}\n\n.sp-settings-panel__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-settings-panel__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-settings-panel__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-settings-panel__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-settings-panel__check svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__item--active .sp-settings-panel__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Captions Button\n   ============================================ */\n.sp-captions--active {\n  color: var(--sp-accent, #e50914);\n}\n\n/* ============================================\n   Cast Button States\n   ============================================ */\n.sp-cast--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-cast--unavailable {\n  opacity: 0.4;\n}\n\n/* ============================================\n   Error Overlay\n   ============================================ */\n.sp-error-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.85);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 25;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.25s ease, visibility 0.25s;\n}\n\n.sp-error-overlay--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sp-error-overlay__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 24px;\n  max-width: 360px;\n}\n\n.sp-error-overlay__icon {\n  color: rgba(255, 255, 255, 0.7);\n  margin-bottom: 16px;\n}\n\n.sp-error-overlay__icon svg {\n  width: 48px;\n  height: 48px;\n  fill: currentColor;\n}\n\n.sp-error-overlay__message {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 15px;\n  line-height: 1.5;\n  margin: 0 0 24px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-error-overlay__actions {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.sp-error-overlay__retry {\n  background: var(--sp-accent, #e50914);\n  color: #fff;\n  border: none;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 120px;\n  min-height: 44px;\n  transition: background 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__retry:hover {\n  filter: brightness(1.1);\n}\n\n.sp-error-overlay__retry:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__retry:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n.sp-error-overlay__dismiss {\n  background: none;\n  color: rgba(255, 255, 255, 0.7);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 100px;\n  min-height: 44px;\n  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__dismiss:hover {\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n.sp-error-overlay__dismiss:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__dismiss:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n/* ============================================\n   Buffering Indicator\n   ============================================ */\n.sp-buffering {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 15;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.sp-buffering--visible {\n  opacity: 1;\n}\n\n.sp-buffering svg {\n  width: 48px;\n  height: 48px;\n  fill: rgba(255, 255, 255, 0.9);\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));\n}\n\n@keyframes sp-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.sp-spin {\n  animation: sp-spin 0.8s linear infinite;\n}\n\n/* ============================================\n   Reduced Motion\n   ============================================ */\n@media (prefers-reduced-motion: reduce) {\n  .sp-gradient,\n  .sp-controls,\n  .sp-progress-wrapper,\n  .sp-progress,\n  .sp-progress__handle,\n  .sp-progress__tooltip,\n  .sp-control,\n  .sp-volume__slider-wrap,\n  .sp-quality-menu,\n  .sp-settings-panel,\n  .sp-settings-panel__row,\n  .sp-settings-panel__item,\n  .sp-settings-panel__header,\n  .sp-buffering,\n  .sp-error-overlay,\n  .sp-error-overlay__retry,\n  .sp-error-overlay__dismiss {\n    transition: none;\n  }\n\n  .sp-live__dot,\n  .sp-spin {\n    animation: none;\n  }\n}\n\n/* ============================================\n   CSS Custom Properties (Theming)\n   ============================================ */\n:root {\n  --sp-accent: #e50914;\n  --sp-color: #fff;\n  --sp-bg: rgba(0, 0, 0, 0.8);\n  --sp-control-height: 48px;\n  --sp-icon-size: 24px;\n}\n";
+declare const styles = "\n/* ============================================\n   Container & Base\n   ============================================ */\n.sp-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: #000;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-container video {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: contain;\n}\n\n.sp-container:focus {\n  outline: none;\n}\n\n/* ============================================\n   Gradient Overlay\n   ============================================ */\n.sp-gradient {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 160px;\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.8) 0%,\n    rgba(0, 0, 0, 0.4) 50%,\n    transparent 100%\n  );\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.25s ease;\n  z-index: 5;\n}\n\n.sp-gradient--visible {\n  opacity: 1;\n}\n\n/* ============================================\n   Controls Container\n   ============================================ */\n.sp-controls {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 12px 12px;\n  gap: 4px;\n  opacity: 0;\n  transform: translateY(4px);\n  transition: opacity 0.25s ease, transform 0.25s ease;\n  z-index: 10;\n}\n\n.sp-controls--visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.sp-controls--hidden {\n  opacity: 0;\n  transform: translateY(4px);\n  pointer-events: none;\n}\n\n/* ============================================\n   Progress Bar (Above Controls)\n   ============================================ */\n.sp-progress-wrapper {\n  position: absolute;\n  bottom: 48px;\n  left: 12px;\n  right: 12px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  z-index: 10;\n  opacity: 0;\n  transition: opacity 0.25s ease;\n}\n\n.sp-progress-wrapper--visible {\n  opacity: 1;\n}\n\n.sp-progress {\n  position: relative;\n  width: 100%;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  transition: height 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress {\n    height: 5px;\n  }\n}\n\n.sp-progress--dragging {\n  height: 5px;\n}\n\n.sp-progress__track {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n  overflow: hidden;\n}\n\n.sp-progress__buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.4);\n  border-radius: inherit;\n  transition: width 0.1s linear;\n}\n\n.sp-progress__filled {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: var(--sp-accent, #e50914);\n  border-radius: inherit;\n}\n\n.sp-progress__handle {\n  position: absolute;\n  top: 50%;\n  width: 14px;\n  height: 14px;\n  background: var(--sp-accent, #e50914);\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.15s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__handle {\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.sp-progress--dragging .sp-progress__handle {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* Thumbnail Preview */\n.sp-thumbnail-preview {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  transform: translateX(-50%);\n  pointer-events: none;\n  display: none;\n  z-index: 21;\n  border-radius: 4px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\n.sp-thumbnail-preview__img {\n  background-repeat: no-repeat;\n}\n\n/* Progress Tooltip */\n.sp-progress__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  padding: 6px 10px;\n  background: rgba(20, 20, 20, 0.95);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n  border-radius: 4px;\n  white-space: nowrap;\n  transform: translateX(-50%);\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n@media (hover: hover) {\n  .sp-progress-wrapper:hover .sp-progress__tooltip {\n    opacity: 1;\n  }\n}\n\n/* ============================================\n   Control Buttons\n   ============================================ */\n.sp-control {\n  background: none;\n  border: none;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;\n  flex-shrink: 0;\n  min-width: 44px;\n  min-height: 44px;\n}\n\n@media (hover: hover) {\n  .sp-control:hover {\n    color: #fff;\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-control:active {\n  transform: scale(0.92);\n}\n\n.sp-control:focus-visible {\n  outline: 2px solid var(--sp-accent, #e50914);\n  outline-offset: 2px;\n}\n\n.sp-control:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  transform: none;\n}\n\n.sp-control:disabled:hover {\n  background: none;\n}\n\n.sp-control svg {\n  width: 24px;\n  height: 24px;\n  fill: currentColor;\n  display: block;\n}\n\n.sp-control--small svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* ============================================\n   Spacer\n   ============================================ */\n.sp-spacer {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ============================================\n   Time Display\n   ============================================ */\n.sp-time {\n  font-size: 13px;\n  font-variant-numeric: tabular-nums;\n  color: rgba(255, 255, 255, 0.9);\n  white-space: nowrap;\n  padding: 0 4px;\n  letter-spacing: 0.02em;\n}\n\n/* ============================================\n   Volume Control\n   ============================================ */\n.sp-volume {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.sp-volume__slider-wrap {\n  width: 0;\n  overflow: hidden;\n  transition: width 0.2s ease;\n}\n\n@media (hover: hover) {\n  .sp-volume:hover .sp-volume__slider-wrap {\n    width: 64px;\n  }\n}\n\n.sp-volume:focus-within .sp-volume__slider-wrap {\n  width: 64px;\n}\n\n.sp-volume__slider {\n  width: 64px;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 1.5px;\n  cursor: pointer;\n  position: relative;\n  margin: 0 8px 0 4px;\n}\n\n.sp-volume__level {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: #fff;\n  border-radius: inherit;\n  transition: width 0.1s ease;\n}\n\n/* ============================================\n   Live Indicator\n   ============================================ */\n.sp-live {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--sp-accent, #e50914);\n  cursor: pointer;\n  padding: 6px 10px;\n  border-radius: 4px;\n  transition: background 0.15s ease, opacity 0.15s ease;\n}\n\n@media (hover: hover) {\n  .sp-live:hover {\n    background: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.sp-live__dot {\n  width: 8px;\n  height: 8px;\n  background: currentColor;\n  border-radius: 50%;\n  animation: sp-pulse 2s ease-in-out infinite;\n}\n\n.sp-live--behind {\n  opacity: 0.6;\n}\n\n.sp-live--behind .sp-live__dot {\n  animation: none;\n}\n\n.sp-live--behind span {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n/* Progress bar live mode: accent color for filled bar */\n.sp-progress--live .sp-progress__filled {\n  background: var(--sp-accent, #e50914);\n}\n\n@keyframes sp-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n\n/* ============================================\n   Quality / Settings Menu\n   ============================================ */\n.sp-quality {\n  position: relative;\n}\n\n.sp-quality__btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sp-quality__label {\n  font-size: 12px;\n  font-weight: 500;\n  opacity: 0.9;\n}\n\n.sp-quality-menu {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  padding: 8px 0;\n  min-width: 150px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n}\n\n.sp-quality-menu--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sp-quality-menu__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-quality-menu__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-quality-menu__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-quality-menu__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-quality-menu__item--active .sp-quality-menu__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Settings Menu (Gear Icon)\n   ============================================ */\n.sp-settings {\n  position: relative;\n}\n\n.sp-settings__btn {\n  display: flex;\n  align-items: center;\n}\n\n.sp-settings-panel {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  background: rgba(20, 20, 20, 0.95);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  border-radius: 8px;\n  min-width: 200px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\n  z-index: 20;\n  overflow: hidden;\n}\n\n.sp-settings-panel--open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Main menu rows */\n.sp-settings-panel--main {\n  padding: 4px 0;\n}\n\n.sp-settings-panel__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__row:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__label {\n  font-weight: 500;\n}\n\n.sp-settings-panel__value {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: rgba(255, 255, 255, 0.6);\n  font-size: 12px;\n}\n\n.sp-settings-panel__arrow {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__arrow svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n/* Sub-menu panels */\n.sp-settings-panel--sub {\n  padding: 0;\n}\n\n.sp-settings-panel__header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  transition: background 0.1s ease;\n}\n\n.sp-settings-panel__header:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-settings-panel__back {\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n}\n\n.sp-settings-panel__back svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__header-label {\n  flex: 1;\n}\n\n.sp-settings-panel__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: rgba(255, 255, 255, 0.8);\n  cursor: pointer;\n  transition: background 0.1s ease, color 0.1s ease;\n}\n\n.sp-settings-panel__item:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n\n.sp-settings-panel__item--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-settings-panel__check {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n  margin-left: 8px;\n  opacity: 0;\n}\n\n.sp-settings-panel__check svg {\n  width: 16px;\n  height: 16px;\n  fill: currentColor;\n}\n\n.sp-settings-panel__item--active .sp-settings-panel__check {\n  opacity: 1;\n}\n\n/* ============================================\n   Captions Button\n   ============================================ */\n.sp-captions--active {\n  color: var(--sp-accent, #e50914);\n}\n\n/* ============================================\n   Cast Button States\n   ============================================ */\n.sp-cast--active {\n  color: var(--sp-accent, #e50914);\n}\n\n.sp-cast--unavailable {\n  opacity: 0.4;\n}\n\n/* ============================================\n   Error Overlay\n   ============================================ */\n.sp-error-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.85);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 25;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.25s ease, visibility 0.25s;\n}\n\n.sp-error-overlay--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sp-error-overlay__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 24px;\n  max-width: 360px;\n}\n\n.sp-error-overlay__icon {\n  color: rgba(255, 255, 255, 0.7);\n  margin-bottom: 16px;\n}\n\n.sp-error-overlay__icon svg {\n  width: 48px;\n  height: 48px;\n  fill: currentColor;\n}\n\n/* Reconnecting: pulse the icon so the overlay reads as active work,\n   not a dead-end error */\n.sp-error-overlay--reconnecting .sp-error-overlay__icon {\n  animation: sp-reconnect-pulse 1.2s ease-in-out infinite;\n}\n\n@keyframes sp-reconnect-pulse {\n  0%, 100% { opacity: 0.4; }\n  50% { opacity: 1; }\n}\n\n.sp-error-overlay__message {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 15px;\n  line-height: 1.5;\n  margin: 0 0 24px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.sp-error-overlay__actions {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.sp-error-overlay__retry {\n  background: var(--sp-accent, #e50914);\n  color: #fff;\n  border: none;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 120px;\n  min-height: 44px;\n  transition: background 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__retry:hover {\n  filter: brightness(1.1);\n}\n\n.sp-error-overlay__retry:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__retry:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n.sp-error-overlay__dismiss {\n  background: none;\n  color: rgba(255, 255, 255, 0.7);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  min-width: 100px;\n  min-height: 44px;\n  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;\n  font-family: inherit;\n}\n\n.sp-error-overlay__dismiss:hover {\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n.sp-error-overlay__dismiss:active {\n  transform: scale(0.96);\n}\n\n.sp-error-overlay__dismiss:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n/* ============================================\n   Buffering Indicator\n   ============================================ */\n.sp-buffering {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 15;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.sp-buffering--visible {\n  opacity: 1;\n}\n\n.sp-buffering svg {\n  width: 48px;\n  height: 48px;\n  fill: rgba(255, 255, 255, 0.9);\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));\n}\n\n@keyframes sp-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.sp-spin {\n  animation: sp-spin 0.8s linear infinite;\n}\n\n/* ============================================\n   Reduced Motion\n   ============================================ */\n@media (prefers-reduced-motion: reduce) {\n  .sp-gradient,\n  .sp-controls,\n  .sp-progress-wrapper,\n  .sp-progress,\n  .sp-progress__handle,\n  .sp-progress__tooltip,\n  .sp-control,\n  .sp-volume__slider-wrap,\n  .sp-quality-menu,\n  .sp-settings-panel,\n  .sp-settings-panel__row,\n  .sp-settings-panel__item,\n  .sp-settings-panel__header,\n  .sp-buffering,\n  .sp-error-overlay,\n  .sp-error-overlay__retry,\n  .sp-error-overlay__dismiss {\n    transition: none;\n  }\n\n  .sp-live__dot,\n  .sp-spin {\n    animation: none;\n  }\n}\n\n/* ============================================\n   CSS Custom Properties (Theming)\n   ============================================ */\n:root {\n  --sp-accent: #e50914;\n  --sp-color: #fff;\n  --sp-bg: rgba(0, 0, 0, 0.8);\n  --sp-control-height: 48px;\n  --sp-icon-size: 24px;\n}\n";
 
 /**
  * Formatting utility functions

package/dist/index.js

@@ -681,6 +681,17 @@ var styles = `
   fill: currentColor;
 }
 
+/* Reconnecting: pulse the icon so the overlay reads as active work,
+   not a dead-end error */
+.sp-error-overlay--reconnecting .sp-error-overlay__icon {
+  animation: sp-reconnect-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes sp-reconnect-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}
+
 .sp-error-overlay__message {
   color: rgba(255, 255, 255, 0.9);
   font-size: 15px;
@@ -887,12 +898,24 @@ function createButton(className, label, icon) {
     "aria-label": label,
     type: "button"
   });
-  btn.innerHTML = icon;
+  setHTML(btn, icon);
   return btn;
 }
 function getVideo(container) {
   return container.querySelector("video");
 }
+var lastHTML = /* @__PURE__ */ new WeakMap();
+function setHTML(el, html) {
+  if (lastHTML.get(el) === html) return false;
+  el.innerHTML = html;
+  lastHTML.set(el, html);
+  return true;
+}
+function setAttr(el, name, value) {
+  if (el.getAttribute(name) === value) return false;
+  el.setAttribute(name, value);
+  return true;
+}
 
 // src/utils/format.ts
 function formatTime(seconds) {
@@ -947,8 +970,8 @@ var PlayButton = class {
       icon = icons.play;
       label = "Play";
     }
-    this.el.innerHTML = icon;
-    this.el.setAttribute("aria-label", label);
+    setHTML(this.el, icon);
+    setAttr(this.el, "aria-label", label);
   }
   toggle() {
     const video = getVideo(this.api.container);
@@ -1452,13 +1475,16 @@ var VolumeControl = class {
       icon = icons.volumeHigh;
       label = "Mute";
     }
-    this.btn.innerHTML = icon;
-    this.btn.setAttribute("aria-label", label);
+    setHTML(this.btn, icon);
+    setAttr(this.btn, "aria-label", label);
     const displayVolume = muted ? 0 : volume;
-    this.level.style.width = `${displayVolume * 100}%`;
+    const width = `${displayVolume * 100}%`;
+    if (this.level.style.width !== width) {
+      this.level.style.width = width;
+    }
     const volumePercent = Math.round(displayVolume * 100);
-    this.slider.setAttribute("aria-valuenow", String(volumePercent));
-    this.slider.setAttribute("aria-valuetext", `${volumePercent}%`);
+    setAttr(this.slider, "aria-valuenow", String(volumePercent));
+    setAttr(this.slider, "aria-valuetext", `${volumePercent}%`);
   }
   toggleMute() {
     const video = getVideo(this.api.container);
@@ -1695,11 +1721,11 @@ var CastButton = class {
       this.el.classList.toggle("sp-cast--active", !!active);
       this.el.classList.toggle("sp-cast--unavailable", !available && !active);
       if (active) {
-        this.el.innerHTML = icons.chromecastConnected;
-        this.el.setAttribute("aria-label", "Stop casting");
+        setHTML(this.el, icons.chromecastConnected);
+        setAttr(this.el, "aria-label", "Stop casting");
       } else {
-        this.el.innerHTML = icons.chromecast;
-        this.el.setAttribute("aria-label", available ? "Cast" : "No Cast devices found");
+        setHTML(this.el, icons.chromecast);
+        setAttr(this.el, "aria-label", available ? "Cast" : "No Cast devices found");
       }
     } else {
       const active = this.api.getState("airplayActive");
@@ -1707,7 +1733,7 @@ var CastButton = class {
       this.el.disabled = false;
       this.el.classList.toggle("sp-cast--active", !!active);
       this.el.classList.remove("sp-cast--unavailable");
-      this.el.setAttribute("aria-label", active ? "Stop AirPlay" : "AirPlay");
+      setAttr(this.el, "aria-label", active ? "Stop AirPlay" : "AirPlay");
     }
   }
   handleClick() {
@@ -1745,25 +1771,38 @@ var CastButton = class {
 var PipButton = class {
   constructor(api) {
     this.clickHandler = () => {
-      this.toggle();
+      void this.toggle().catch(() => {
+      });
     };
     this.api = api;
-    const video = document.createElement("video");
-    this.supported = "pictureInPictureEnabled" in document || "webkitSetPresentationMode" in video;
+    const probe = document.createElement("video");
+    this.supported = "pictureInPictureEnabled" in document || "webkitSetPresentationMode" in probe;
     this.el = createButton("sp-pip", "Picture-in-Picture", icons.pip);
     this.el.addEventListener("click", this.clickHandler);
     if (!this.supported) {
       this.el.style.display = "none";
+    } else {
+      this.el.disabled = true;
+      this.el.setAttribute("aria-disabled", "true");
     }
   }
   render() {
     return this.el;
   }
+  /** Whether the media element is ready to enter PiP (metadata loaded). */
+  isMediaReady() {
+    const video = getVideo(this.api.container);
+    return !!video && video.readyState >= HTMLMediaElement.HAVE_METADATA;
+  }
   update() {
     if (!this.supported) return;
-    const pip = this.api.getState("pip");
-    this.el.setAttribute("aria-label", pip ? "Exit Picture-in-Picture" : "Picture-in-Picture");
-    this.el.classList.toggle("sp-pip--active", !!pip);
+    const pip = !!this.api.getState("pip");
+    const enabled = pip || this.isMediaReady();
+    this.el.disabled = !enabled;
+    setAttr(this.el, "aria-disabled", String(!enabled));
+    setHTML(this.el, pip ? icons.exitPip : icons.pip);
+    setAttr(this.el, "aria-label", pip ? "Exit Picture-in-Picture" : "Picture-in-Picture");
+    this.el.classList.toggle("sp-pip--active", pip);
   }
   async toggle() {
     const video = getVideo(this.api.container);
@@ -1771,8 +1810,14 @@ var PipButton = class {
       this.api.logger.warn("PiP: video element not found");
       return;
     }
+    const isInPip = document.pictureInPictureElement === video || video.webkitPresentationMode === "picture-in-picture";
+    if (!isInPip && video.readyState < HTMLMediaElement.HAVE_METADATA) {
+      this.api.logger.debug("PiP: ignored, media not ready", {
+        readyState: video.readyState
+      });
+      return;
+    }
     try {
-      const isInPip = document.pictureInPictureElement === video || video.webkitPresentationMode === "picture-in-picture";
       if (isInPip) {
         if (document.pictureInPictureElement) {
           await document.exitPictureInPicture();
@@ -1789,7 +1834,8 @@ var PipButton = class {
         this.api.logger.debug("PiP: entered");
       }
     } catch (e) {
-      this.api.logger.warn("PiP: failed", { error: e.message });
+      const message = e instanceof Error ? e.message : String(e);
+      this.api.logger.warn("PiP: failed", { error: message });
     }
   }
   destroy() {
@@ -1814,11 +1860,11 @@ var FullscreenButton = class {
   update() {
     const fullscreen = this.api.getState("fullscreen");
     if (fullscreen) {
-      this.el.innerHTML = icons.exitFullscreen;
-      this.el.setAttribute("aria-label", "Exit fullscreen");
+      setHTML(this.el, icons.exitFullscreen);
+      setAttr(this.el, "aria-label", "Exit fullscreen");
     } else {
-      this.el.innerHTML = icons.fullscreen;
-      this.el.setAttribute("aria-label", "Fullscreen");
+      setHTML(this.el, icons.fullscreen);
+      setAttr(this.el, "aria-label", "Fullscreen");
     }
   }
   async toggle() {
@@ -1859,6 +1905,27 @@ var Spacer = class {
 // src/controls/ErrorOverlay.ts
 function getUserMessage(error) {
   if (!error) return "Something went wrong.";
+  const code = error.code;
+  if (code) {
+    switch (code) {
+      case "MEDIA_NETWORK_ERROR":
+        return "Having trouble connecting. Check your internet and try again.";
+      case "MEDIA_DECODE_ERROR":
+        return "This video can't be played right now.";
+      case "SOURCE_LOAD_FAILED":
+      case "SOURCE_NOT_SUPPORTED":
+      case "PROVIDER_NOT_FOUND":
+        return "Unable to load video. Please try again.";
+      case "PLAYBACK_FAILED":
+        return "Playback stopped unexpectedly. Please try again.";
+      case "MEDIA_APPEND_ERROR":
+        return "Video playback was interrupted. Please try again.";
+      case "MEDIA_BUFFER_FULL":
+        return "Your device is low on video memory. Close other apps or tabs and try again.";
+      case "PLAYLIST_INVALID":
+        return "The stream is temporarily unavailable. Please try again.";
+    }
+  }
   const msg = error.message?.toLowerCase() || "";
   if (msg.includes("network") || msg.includes("timeout") || msg.includes("fetch") || msg.includes("connection")) {
     return "Having trouble connecting. Check your internet and try again.";
@@ -1886,13 +1953,6 @@ var ErrorOverlay = class {
       const src = source?.src || this.lastSource;
       if (src) {
         this.api.emit("error:retry", { src });
-        const video = this.api.container.querySelector("video");
-        if (video) {
-          video.src = src;
-          video.load();
-          video.play().catch(() => {
-          });
-        }
       }
       setTimeout(() => {
         this.retryBtn.disabled = false;
@@ -1953,12 +2013,36 @@ var ErrorOverlay = class {
     }
     this.visible = true;
     this.retryBtn.disabled = false;
+    this.el.classList.remove("sp-error-overlay--reconnecting");
+    this.el.classList.add("sp-error-overlay--visible");
+  }
+  /**
+   * Show the reconnecting state.
+   *
+   * Displayed while the provider auto-reconnects after a fatal error, so the
+   * viewer sees the player working on the problem instead of a dead-end
+   * error. Try Again stays available for viewers who want to force an
+   * immediate attempt.
+   */
+  showReconnecting() {
+    const messageEl = this.el.querySelector(".sp-error-overlay__message");
+    if (messageEl) {
+      messageEl.textContent = "Connection lost. Reconnecting...";
+    }
+    const source = this.api.getState("source");
+    if (source?.src) {
+      this.lastSource = source.src;
+    }
+    this.visible = true;
+    this.retryBtn.disabled = false;
+    this.el.classList.add("sp-error-overlay--reconnecting");
     this.el.classList.add("sp-error-overlay--visible");
   }
   /** Hide the error overlay */
   hide() {
     this.visible = false;
     this.el.classList.remove("sp-error-overlay--visible");
+    this.el.classList.remove("sp-error-overlay--reconnecting");
   }
   isVisible() {
     return this.visible;
@@ -2442,12 +2526,12 @@ var CaptionsButton = class {
     }
     this.el.style.display = "";
     if (currentTrack) {
-      this.el.innerHTML = icons.captions;
-      this.el.setAttribute("aria-label", `Captions: ${currentTrack.label}`);
+      setHTML(this.el, icons.captions);
+      setAttr(this.el, "aria-label", `Captions: ${currentTrack.label}`);
       this.el.classList.add("sp-captions--active");
     } else {
-      this.el.innerHTML = icons.captionsOff;
-      this.el.setAttribute("aria-label", "Captions");
+      setHTML(this.el, icons.captionsOff);
+      setAttr(this.el, "aria-label", "Captions");
       this.el.classList.remove("sp-captions--active");
     }
   }
@@ -2530,7 +2614,10 @@ function uiPlugin(config = {}) {
   let hideTimeout = null;
   let stateUnsubscribe = null;
   let errorUnsubscribe = null;
+  let reconnectingUnsubscribe = null;
+  let recoveredUnsubscribe = null;
   let controlsVisible = true;
+  let rafHandle = null;
   const layout = config.controls || DEFAULT_LAYOUT;
   const hideDelay = config.hideDelay ?? DEFAULT_HIDE_DELAY;
   const createControl = (slot) => {
@@ -2582,6 +2669,13 @@ function uiPlugin(config = {}) {
     bufferingIndicator?.classList.toggle("sp-buffering--visible", !!showSpinner);
     errorOverlay?.update();
   };
+  const scheduleUpdate = () => {
+    if (rafHandle !== null) return;
+    rafHandle = requestAnimationFrame(() => {
+      rafHandle = null;
+      updateControls();
+    });
+  };
   const showControls = () => {
     if (controlsVisible) {
       resetHideTimer();
@@ -2631,7 +2725,12 @@ function uiPlugin(config = {}) {
       case " ":
       case "k":
         e.preventDefault();
-        video.paused ? video.play() : video.pause();
+        if (video.paused) {
+          video.play().catch(() => {
+          });
+        } else {
+          video.pause();
+        }
         break;
       case "m":
         e.preventDefault();
@@ -2640,9 +2739,11 @@ function uiPlugin(config = {}) {
       case "f":
         e.preventDefault();
         if (document.fullscreenElement) {
-          document.exitFullscreen();
+          document.exitFullscreen().catch(() => {
+          });
         } else {
-          api.container.requestFullscreen?.();
+          api.container.requestFullscreen?.().catch(() => {
+          });
         }
         break;
       case "ArrowLeft":
@@ -2710,10 +2811,16 @@ function uiPlugin(config = {}) {
       container.appendChild(errorOverlay.render());
       errorUnsubscribe = api.on("error", (payload) => {
         if (payload?.fatal) {
-          const error = api.getState("error") || new Error(payload.message || "Playback error");
+          const error = api.getState("error") || payload;
           errorOverlay?.show(error);
         }
       });
+      reconnectingUnsubscribe = api.on("error:reconnecting", () => {
+        errorOverlay?.showReconnecting();
+      });
+      recoveredUnsubscribe = api.on("error:recovered", () => {
+        errorOverlay?.hide();
+      });
       progressBar = new ProgressBar(api);
       container.appendChild(progressBar.render());
       if (!isPlaying) {
@@ -2737,8 +2844,8 @@ function uiPlugin(config = {}) {
       container.addEventListener("touchstart", handleInteraction, { passive: true });
       container.addEventListener("click", handleInteraction);
       document.addEventListener("keydown", handleKeyDown);
-      stateUnsubscribe = api.subscribeToState(updateControls);
-      document.addEventListener("fullscreenchange", updateControls);
+      stateUnsubscribe = api.subscribeToState(scheduleUpdate);
+      document.addEventListener("fullscreenchange", scheduleUpdate);
       updateControls();
       if (!container.hasAttribute("tabindex")) {
         container.setAttribute("tabindex", "0");
@@ -2755,10 +2862,18 @@ function uiPlugin(config = {}) {
         clearTimeout(hideTimeout);
         hideTimeout = null;
       }
+      if (rafHandle !== null) {
+        cancelAnimationFrame(rafHandle);
+        rafHandle = null;
+      }
       stateUnsubscribe?.();
       stateUnsubscribe = null;
       errorUnsubscribe?.();
       errorUnsubscribe = null;
+      reconnectingUnsubscribe?.();
+      reconnectingUnsubscribe = null;
+      recoveredUnsubscribe?.();
+      recoveredUnsubscribe = null;
       if (api?.container) {
         api.container.removeEventListener("mousemove", handleInteraction);
         api.container.removeEventListener("mouseenter", handleInteraction);
@@ -2767,7 +2882,7 @@ function uiPlugin(config = {}) {
         api.container.removeEventListener("click", handleInteraction);
       }
       document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("fullscreenchange", updateControls);
+      document.removeEventListener("fullscreenchange", scheduleUpdate);
       controls.forEach((c) => c.destroy());
       controls = [];
       progressBar?.destroy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scarlett-player/ui",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description": "UI Controls Plugin for Scarlett Player",
   "type": "module",
   "main": "dist/index.cjs",
@@ -22,14 +22,14 @@
     "dist"
   ],
   "peerDependencies": {
-    "@scarlett-player/core": "^1.0.2"
+    "@scarlett-player/core": "^1.0.3"
   },
   "devDependencies": {
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
     "vitest": "^1.6.0",
     "jsdom": "^24.0.0",
-    "@scarlett-player/core": "1.0.2"
+    "@scarlett-player/core": "1.2.0"
   },
   "keywords": [
     "video",