@scarlett-player/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1566 @@
+// src/styles.ts
+var styles = `
+/* ============================================
+   Container & Base
+   ============================================ */
+.sp-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.sp-container video {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+}
+
+.sp-container:focus {
+  outline: none;
+}
+
+/* ============================================
+   Gradient Overlay
+   ============================================ */
+.sp-gradient {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 160px;
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.8) 0%,
+    rgba(0, 0, 0, 0.4) 50%,
+    transparent 100%
+  );
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  z-index: 5;
+}
+
+.sp-gradient--visible {
+  opacity: 1;
+}
+
+/* ============================================
+   Controls Container
+   ============================================ */
+.sp-controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 12px 12px;
+  gap: 4px;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  z-index: 10;
+}
+
+.sp-controls--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.sp-controls--hidden {
+  opacity: 0;
+  transform: translateY(4px);
+  pointer-events: none;
+}
+
+/* ============================================
+   Progress Bar (Above Controls)
+   ============================================ */
+.sp-progress-wrapper {
+  position: absolute;
+  bottom: 48px;
+  left: 12px;
+  right: 12px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+.sp-progress-wrapper--visible {
+  opacity: 1;
+}
+
+.sp-progress {
+  position: relative;
+  width: 100%;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 1.5px;
+  transition: height 0.15s ease;
+}
+
+.sp-progress-wrapper:hover .sp-progress,
+.sp-progress--dragging {
+  height: 5px;
+}
+
+.sp-progress__track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  overflow: hidden;
+}
+
+.sp-progress__buffered {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: inherit;
+  transition: width 0.1s linear;
+}
+
+.sp-progress__filled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--sp-accent, #e50914);
+  border-radius: inherit;
+}
+
+.sp-progress__handle {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  background: var(--sp-accent, #e50914);
+  border-radius: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.15s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.sp-progress-wrapper:hover .sp-progress__handle,
+.sp-progress--dragging .sp-progress__handle {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* Progress Tooltip */
+.sp-progress__tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  padding: 6px 10px;
+  background: rgba(20, 20, 20, 0.95);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  border-radius: 4px;
+  white-space: nowrap;
+  transform: translateX(-50%);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.sp-progress-wrapper:hover .sp-progress__tooltip {
+  opacity: 1;
+}
+
+/* ============================================
+   Control Buttons
+   ============================================ */
+.sp-control {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;
+  flex-shrink: 0;
+}
+
+.sp-control:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.sp-control:active {
+  transform: scale(0.92);
+}
+
+.sp-control:focus-visible {
+  outline: 2px solid var(--sp-accent, #e50914);
+  outline-offset: 2px;
+}
+
+.sp-control:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.sp-control:disabled:hover {
+  background: none;
+}
+
+.sp-control svg {
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+  display: block;
+}
+
+.sp-control--small svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* ============================================
+   Spacer
+   ============================================ */
+.sp-spacer {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ============================================
+   Time Display
+   ============================================ */
+.sp-time {
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  color: rgba(255, 255, 255, 0.9);
+  white-space: nowrap;
+  padding: 0 4px;
+  letter-spacing: 0.02em;
+}
+
+/* ============================================
+   Volume Control
+   ============================================ */
+.sp-volume {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.sp-volume__slider-wrap {
+  width: 0;
+  overflow: hidden;
+  transition: width 0.2s ease;
+}
+
+.sp-volume:hover .sp-volume__slider-wrap,
+.sp-volume:focus-within .sp-volume__slider-wrap {
+  width: 64px;
+}
+
+.sp-volume__slider {
+  width: 64px;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 1.5px;
+  cursor: pointer;
+  position: relative;
+  margin: 0 8px 0 4px;
+}
+
+.sp-volume__level {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: #fff;
+  border-radius: inherit;
+  transition: width 0.1s ease;
+}
+
+/* ============================================
+   Live Indicator
+   ============================================ */
+.sp-live {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--sp-accent, #e50914);
+  cursor: pointer;
+  padding: 6px 10px;
+  border-radius: 4px;
+  transition: background 0.15s ease, opacity 0.15s ease;
+}
+
+.sp-live:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.sp-live__dot {
+  width: 8px;
+  height: 8px;
+  background: currentColor;
+  border-radius: 50%;
+  animation: sp-pulse 2s ease-in-out infinite;
+}
+
+.sp-live--behind {
+  opacity: 0.6;
+}
+
+.sp-live--behind .sp-live__dot {
+  animation: none;
+}
+
+@keyframes sp-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* ============================================
+   Quality / Settings Menu
+   ============================================ */
+.sp-quality {
+  position: relative;
+}
+
+.sp-quality__btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.sp-quality__label {
+  font-size: 12px;
+  font-weight: 500;
+  opacity: 0.9;
+}
+
+.sp-quality-menu {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  right: 0;
+  background: rgba(20, 20, 20, 0.95);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: 8px;
+  padding: 8px 0;
+  min-width: 150px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(8px);
+  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
+  z-index: 20;
+}
+
+.sp-quality-menu--open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.sp-quality-menu__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+
+.sp-quality-menu__item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.sp-quality-menu__item--active {
+  color: var(--sp-accent, #e50914);
+}
+
+.sp-quality-menu__check {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  margin-left: 8px;
+  opacity: 0;
+}
+
+.sp-quality-menu__item--active .sp-quality-menu__check {
+  opacity: 1;
+}
+
+/* ============================================
+   Cast Button States
+   ============================================ */
+.sp-cast--active {
+  color: var(--sp-accent, #e50914);
+}
+
+.sp-cast--unavailable {
+  opacity: 0.4;
+}
+
+/* ============================================
+   Buffering Indicator
+   ============================================ */
+.sp-buffering {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 15;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.sp-buffering--visible {
+  opacity: 1;
+}
+
+.sp-buffering svg {
+  width: 48px;
+  height: 48px;
+  fill: rgba(255, 255, 255, 0.9);
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+}
+
+@keyframes sp-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.sp-spin {
+  animation: sp-spin 0.8s linear infinite;
+}
+
+/* ============================================
+   Reduced Motion
+   ============================================ */
+@media (prefers-reduced-motion: reduce) {
+  .sp-gradient,
+  .sp-controls,
+  .sp-progress-wrapper,
+  .sp-progress,
+  .sp-progress__handle,
+  .sp-progress__tooltip,
+  .sp-control,
+  .sp-volume__slider-wrap,
+  .sp-quality-menu,
+  .sp-buffering {
+    transition: none;
+  }
+
+  .sp-live__dot,
+  .sp-spin {
+    animation: none;
+  }
+}
+
+/* ============================================
+   CSS Custom Properties (Theming)
+   ============================================ */
+:root {
+  --sp-accent: #e50914;
+  --sp-color: #fff;
+  --sp-bg: rgba(0, 0, 0, 0.8);
+  --sp-control-height: 48px;
+  --sp-icon-size: 24px;
+}
+`;
+
+// src/icons.ts
+var icons = {
+  play: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>`,
+  pause: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>`,
+  replay: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>`,
+  volumeHigh: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>`,
+  volumeLow: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>`,
+  volumeMute: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>`,
+  fullscreen: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>`,
+  exitFullscreen: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>`,
+  pip: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z"/></svg>`,
+  exitPip: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM9 9h6v2H9z"/></svg>`,
+  settings: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>`,
+  chromecast: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>`,
+  chromecastConnected: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm18-7H5v1.63c3.96 1.28 7.09 4.41 8.37 8.37H19V7zM1 10v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>`,
+  airplay: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 22h12l-6-6-6 6zM21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V5h18v12h-4v2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>`,
+  captions: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z"/></svg>`,
+  captionsOff: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.5 5.5v13h-15v-13h15zM19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"/></svg>`,
+  checkmark: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`,
+  chevronUp: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>`,
+  chevronDown: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>`,
+  spinner: `<svg viewBox="0 0 24 24" fill="currentColor" class="sp-spin"><path d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z"/></svg>`,
+  skipForward: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/></svg>`,
+  skipBack: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/></svg>`,
+  forward10: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 13c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6v4l5-5-5-5v4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8h-2z"/><text x="12" y="15" text-anchor="middle" font-size="7" font-weight="600">10</text></svg>`,
+  replay10: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/><text x="12" y="15" text-anchor="middle" font-size="7" font-weight="600">10</text></svg>`
+};
+
+// src/utils/dom.ts
+function createElement(tag, attrs, children) {
+  const el = document.createElement(tag);
+  if (attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      if (key === "className") {
+        el.className = value;
+      } else {
+        el.setAttribute(key, value);
+      }
+    }
+  }
+  if (children) {
+    for (const child of children) {
+      if (typeof child === "string") {
+        el.appendChild(document.createTextNode(child));
+      } else {
+        el.appendChild(child);
+      }
+    }
+  }
+  return el;
+}
+function createButton(className, label, icon) {
+  const btn = createElement("button", {
+    className: `sp-control ${className}`,
+    "aria-label": label,
+    type: "button"
+  });
+  btn.innerHTML = icon;
+  return btn;
+}
+function getVideo(container) {
+  return container.querySelector("video");
+}
+
+// src/utils/format.ts
+function formatTime(seconds) {
+  if (!isFinite(seconds) || isNaN(seconds)) {
+    return "0:00";
+  }
+  const absSeconds = Math.abs(seconds);
+  const h = Math.floor(absSeconds / 3600);
+  const m = Math.floor(absSeconds % 3600 / 60);
+  const s = Math.floor(absSeconds % 60);
+  const sign = seconds < 0 ? "-" : "";
+  if (h > 0) {
+    return `${sign}${h}:${pad(m)}:${pad(s)}`;
+  }
+  return `${sign}${m}:${pad(s)}`;
+}
+function pad(n) {
+  return n < 10 ? `0${n}` : `${n}`;
+}
+function formatLiveTime(behindLive) {
+  if (behindLive <= 0) {
+    return "LIVE";
+  }
+  return `-${formatTime(behindLive)}`;
+}
+
+// src/controls/PlayButton.ts
+var PlayButton = class {
+  constructor(api) {
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    this.api = api;
+    this.el = createButton("sp-play", "Play", icons.play);
+    this.el.addEventListener("click", this.clickHandler);
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const playing = this.api.getState("playing");
+    const ended = this.api.getState("ended");
+    let icon;
+    let label;
+    if (ended) {
+      icon = icons.replay;
+      label = "Replay";
+    } else if (playing) {
+      icon = icons.pause;
+      label = "Pause";
+    } else {
+      icon = icons.play;
+      label = "Play";
+    }
+    this.el.innerHTML = icon;
+    this.el.setAttribute("aria-label", label);
+  }
+  toggle() {
+    const video = getVideo(this.api.container);
+    if (!video) return;
+    const ended = this.api.getState("ended");
+    const playing = this.api.getState("playing");
+    if (ended) {
+      video.currentTime = 0;
+      video.play().catch(() => {
+      });
+    } else if (playing) {
+      video.pause();
+    } else {
+      video.play().catch(() => {
+      });
+    }
+  }
+  destroy() {
+    this.el.removeEventListener("click", this.clickHandler);
+    this.el.remove();
+  }
+};
+
+// src/controls/ProgressBar.ts
+var ProgressBar = class {
+  constructor(api) {
+    this.isDragging = false;
+    this.lastSeekTime = 0;
+    this.seekThrottleMs = 100;
+    // Throttle seeks to max 10/sec
+    this.wasPlayingBeforeDrag = false;
+    this.onMouseDown = (e) => {
+      e.preventDefault();
+      const video = getVideo(this.api.container);
+      this.wasPlayingBeforeDrag = video ? !video.paused : false;
+      this.isDragging = true;
+      this.el.classList.add("sp-progress--dragging");
+      this.lastSeekTime = 0;
+      this.seek(e.clientX, true);
+    };
+    this.onDocMouseMove = (e) => {
+      if (this.isDragging) {
+        this.seek(e.clientX);
+        this.updateVisualPosition(e.clientX);
+      }
+    };
+    this.onMouseUp = (e) => {
+      if (this.isDragging) {
+        this.seek(e.clientX, true);
+        this.isDragging = false;
+        this.el.classList.remove("sp-progress--dragging");
+        if (this.wasPlayingBeforeDrag) {
+          const video = getVideo(this.api.container);
+          if (video && video.paused) {
+            video.play().catch(() => {
+            });
+          }
+        }
+      }
+    };
+    this.onMouseMove = (e) => {
+      this.updateTooltip(e.clientX);
+    };
+    this.onMouseLeave = () => {
+      if (!this.isDragging) {
+        this.tooltip.style.opacity = "0";
+      }
+    };
+    this.onKeyDown = (e) => {
+      const video = getVideo(this.api.container);
+      if (!video) return;
+      const step = 5;
+      const duration = this.api.getState("duration") || 0;
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          video.currentTime = Math.max(0, video.currentTime - step);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          video.currentTime = Math.min(duration, video.currentTime + step);
+          break;
+        case "Home":
+          e.preventDefault();
+          video.currentTime = 0;
+          break;
+        case "End":
+          e.preventDefault();
+          video.currentTime = duration;
+          break;
+      }
+    };
+    this.api = api;
+    this.wrapper = createElement("div", { className: "sp-progress-wrapper" });
+    this.el = createElement("div", { className: "sp-progress" });
+    const track = createElement("div", { className: "sp-progress__track" });
+    this.buffered = createElement("div", { className: "sp-progress__buffered" });
+    this.filled = createElement("div", { className: "sp-progress__filled" });
+    this.handle = createElement("div", { className: "sp-progress__handle" });
+    this.tooltip = createElement("div", { className: "sp-progress__tooltip" });
+    this.tooltip.textContent = "0:00";
+    track.appendChild(this.buffered);
+    track.appendChild(this.filled);
+    track.appendChild(this.handle);
+    this.el.appendChild(track);
+    this.el.appendChild(this.tooltip);
+    this.wrapper.appendChild(this.el);
+    this.el.setAttribute("role", "slider");
+    this.el.setAttribute("aria-label", "Seek");
+    this.el.setAttribute("aria-valuemin", "0");
+    this.el.setAttribute("tabindex", "0");
+    this.wrapper.addEventListener("mousedown", this.onMouseDown);
+    this.wrapper.addEventListener("mousemove", this.onMouseMove);
+    this.wrapper.addEventListener("mouseleave", this.onMouseLeave);
+    this.el.addEventListener("keydown", this.onKeyDown);
+    document.addEventListener("mousemove", this.onDocMouseMove);
+    document.addEventListener("mouseup", this.onMouseUp);
+  }
+  render() {
+    return this.wrapper;
+  }
+  /** Show the progress bar */
+  show() {
+    this.wrapper.classList.add("sp-progress-wrapper--visible");
+  }
+  /** Hide the progress bar */
+  hide() {
+    this.wrapper.classList.remove("sp-progress-wrapper--visible");
+  }
+  update() {
+    const currentTime = this.api.getState("currentTime") || 0;
+    const duration = this.api.getState("duration") || 0;
+    const bufferedRanges = this.api.getState("buffered");
+    if (duration > 0) {
+      const progress = currentTime / duration * 100;
+      this.filled.style.width = `${progress}%`;
+      this.handle.style.left = `${progress}%`;
+      if (bufferedRanges && bufferedRanges.length > 0) {
+        const bufferedEnd = bufferedRanges.end(bufferedRanges.length - 1);
+        const bufferedPercent = bufferedEnd / duration * 100;
+        this.buffered.style.width = `${bufferedPercent}%`;
+      }
+      this.el.setAttribute("aria-valuemax", String(Math.floor(duration)));
+      this.el.setAttribute("aria-valuenow", String(Math.floor(currentTime)));
+      this.el.setAttribute("aria-valuetext", formatTime(currentTime));
+    }
+  }
+  getTimeFromPosition(clientX) {
+    const rect = this.el.getBoundingClientRect();
+    const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const duration = this.api.getState("duration") || 0;
+    return percent * duration;
+  }
+  updateTooltip(clientX) {
+    const rect = this.el.getBoundingClientRect();
+    const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const time = this.getTimeFromPosition(clientX);
+    this.tooltip.textContent = formatTime(time);
+    this.tooltip.style.left = `${percent * 100}%`;
+  }
+  updateVisualPosition(clientX) {
+    const rect = this.el.getBoundingClientRect();
+    const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    this.filled.style.width = `${percent * 100}%`;
+    this.handle.style.left = `${percent * 100}%`;
+  }
+  seek(clientX, force = false) {
+    const video = getVideo(this.api.container);
+    if (!video) return;
+    const now = Date.now();
+    if (!force && this.isDragging && now - this.lastSeekTime < this.seekThrottleMs) {
+      return;
+    }
+    this.lastSeekTime = now;
+    const time = this.getTimeFromPosition(clientX);
+    video.currentTime = time;
+  }
+  destroy() {
+    this.wrapper.removeEventListener("mousedown", this.onMouseDown);
+    this.wrapper.removeEventListener("mousemove", this.onMouseMove);
+    this.wrapper.removeEventListener("mouseleave", this.onMouseLeave);
+    document.removeEventListener("mousemove", this.onDocMouseMove);
+    document.removeEventListener("mouseup", this.onMouseUp);
+    this.wrapper.remove();
+  }
+};
+
+// src/controls/TimeDisplay.ts
+var TimeDisplay = class {
+  constructor(api) {
+    this.api = api;
+    this.el = createElement("div", { className: "sp-time" });
+    this.el.setAttribute("aria-live", "off");
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const live = this.api.getState("live");
+    const currentTime = this.api.getState("currentTime") || 0;
+    const duration = this.api.getState("duration") || 0;
+    if (live) {
+      const seekableRange = this.api.getState("seekableRange");
+      if (seekableRange) {
+        const behindLive = seekableRange.end - currentTime;
+        this.el.textContent = formatLiveTime(behindLive);
+      } else {
+        this.el.textContent = formatLiveTime(0);
+      }
+    } else {
+      this.el.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
+    }
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+
+// src/controls/VolumeControl.ts
+var VolumeControl = class {
+  constructor(api) {
+    this.isDragging = false;
+    this.onMouseDown = (e) => {
+      e.preventDefault();
+      this.isDragging = true;
+      this.setVolume(this.getVolumeFromPosition(e.clientX));
+    };
+    this.onDocMouseMove = (e) => {
+      if (this.isDragging) {
+        this.setVolume(this.getVolumeFromPosition(e.clientX));
+      }
+    };
+    this.onMouseUp = () => {
+      this.isDragging = false;
+    };
+    this.onKeyDown = (e) => {
+      const video = getVideo(this.api.container);
+      if (!video) return;
+      const step = 0.1;
+      switch (e.key) {
+        case "ArrowUp":
+        case "ArrowRight":
+          e.preventDefault();
+          this.setVolume(video.volume + step);
+          break;
+        case "ArrowDown":
+        case "ArrowLeft":
+          e.preventDefault();
+          this.setVolume(video.volume - step);
+          break;
+      }
+    };
+    this.api = api;
+    this.el = createElement("div", { className: "sp-volume" });
+    this.btn = createElement("button", {
+      className: "sp-control sp-volume__btn",
+      "aria-label": "Mute",
+      type: "button"
+    });
+    this.btn.innerHTML = icons.volumeHigh;
+    this.btn.onclick = () => this.toggleMute();
+    const sliderWrap = createElement("div", { className: "sp-volume__slider-wrap" });
+    this.slider = createElement("div", { className: "sp-volume__slider" });
+    this.slider.setAttribute("role", "slider");
+    this.slider.setAttribute("aria-label", "Volume");
+    this.slider.setAttribute("aria-valuemin", "0");
+    this.slider.setAttribute("aria-valuemax", "100");
+    this.slider.setAttribute("tabindex", "0");
+    this.level = createElement("div", { className: "sp-volume__level" });
+    this.slider.appendChild(this.level);
+    sliderWrap.appendChild(this.slider);
+    this.el.appendChild(this.btn);
+    this.el.appendChild(sliderWrap);
+    this.slider.addEventListener("mousedown", this.onMouseDown);
+    this.slider.addEventListener("keydown", this.onKeyDown);
+    document.addEventListener("mousemove", this.onDocMouseMove);
+    document.addEventListener("mouseup", this.onMouseUp);
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const volume = this.api.getState("volume") ?? 1;
+    const muted = this.api.getState("muted") ?? false;
+    let icon;
+    let label;
+    if (muted || volume === 0) {
+      icon = icons.volumeMute;
+      label = "Unmute";
+    } else if (volume < 0.5) {
+      icon = icons.volumeLow;
+      label = "Mute";
+    } else {
+      icon = icons.volumeHigh;
+      label = "Mute";
+    }
+    this.btn.innerHTML = icon;
+    this.btn.setAttribute("aria-label", label);
+    const displayVolume = muted ? 0 : volume;
+    this.level.style.width = `${displayVolume * 100}%`;
+    this.slider.setAttribute("aria-valuenow", String(Math.round(displayVolume * 100)));
+  }
+  toggleMute() {
+    const video = getVideo(this.api.container);
+    if (!video) return;
+    video.muted = !video.muted;
+  }
+  setVolume(percent) {
+    const video = getVideo(this.api.container);
+    if (!video) return;
+    const vol = Math.max(0, Math.min(1, percent));
+    video.volume = vol;
+    if (vol > 0 && video.muted) {
+      video.muted = false;
+    }
+  }
+  getVolumeFromPosition(clientX) {
+    const rect = this.slider.getBoundingClientRect();
+    return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+  }
+  destroy() {
+    document.removeEventListener("mousemove", this.onDocMouseMove);
+    document.removeEventListener("mouseup", this.onMouseUp);
+    this.el.remove();
+  }
+};
+
+// src/controls/LiveIndicator.ts
+var LiveIndicator = class {
+  constructor(api) {
+    this.api = api;
+    this.el = createElement("div", { className: "sp-live" });
+    this.el.innerHTML = '<div class="sp-live__dot"></div><span>LIVE</span>';
+    this.el.setAttribute("role", "button");
+    this.el.setAttribute("aria-label", "Seek to live");
+    this.el.setAttribute("tabindex", "0");
+    this.el.onclick = () => this.seekToLive();
+    this.el.onkeydown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.seekToLive();
+      }
+    };
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const live = this.api.getState("live");
+    const liveEdge = this.api.getState("liveEdge");
+    this.el.style.display = live ? "" : "none";
+    if (liveEdge) {
+      this.el.classList.remove("sp-live--behind");
+    } else {
+      this.el.classList.add("sp-live--behind");
+    }
+  }
+  seekToLive() {
+    const video = getVideo(this.api.container);
+    if (!video) return;
+    const seekableRange = this.api.getState("seekableRange");
+    if (seekableRange) {
+      video.currentTime = seekableRange.end;
+    }
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+
+// src/controls/QualityMenu.ts
+var QualityMenu = class {
+  constructor(api) {
+    this.isOpen = false;
+    this.lastQualitiesJson = "";
+    this.api = api;
+    this.el = createElement("div", { className: "sp-quality" });
+    this.btn = createButton("sp-quality__btn", "Quality", icons.settings);
+    this.btnLabel = createElement("span", { className: "sp-quality__label" });
+    this.btnLabel.textContent = "Auto";
+    this.btn.appendChild(this.btnLabel);
+    this.btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggle();
+    });
+    this.menu = createElement("div", { className: "sp-quality-menu" });
+    this.menu.setAttribute("role", "menu");
+    this.menu.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+    this.el.appendChild(this.btn);
+    this.el.appendChild(this.menu);
+    this.closeHandler = (e) => {
+      if (!this.el.contains(e.target)) {
+        this.close();
+      }
+    };
+    document.addEventListener("click", this.closeHandler);
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const qualities = this.api.getState("qualities") || [];
+    const currentQuality = this.api.getState("currentQuality");
+    this.el.style.display = qualities.length > 0 ? "" : "none";
+    this.btnLabel.textContent = currentQuality?.label || "Auto";
+    const qualitiesJson = JSON.stringify(qualities.map((q) => q.id));
+    const currentId = currentQuality?.id || "auto";
+    if (qualitiesJson !== this.lastQualitiesJson) {
+      this.lastQualitiesJson = qualitiesJson;
+      this.rebuildMenu(qualities);
+    }
+    this.updateActiveStates(currentId);
+  }
+  rebuildMenu(qualities) {
+    this.menu.innerHTML = "";
+    const autoItem = this.createMenuItem("Auto", "auto");
+    this.menu.appendChild(autoItem);
+    const sorted = [...qualities].sort((a, b) => b.height - a.height);
+    for (const q of sorted) {
+      if (q.id === "auto") continue;
+      const item = this.createMenuItem(q.label, q.id);
+      this.menu.appendChild(item);
+    }
+  }
+  updateActiveStates(activeId) {
+    const items = this.menu.querySelectorAll(".sp-quality-menu__item");
+    items.forEach((item) => {
+      const id = item.getAttribute("data-quality-id");
+      const isActive = id === activeId;
+      item.classList.toggle("sp-quality-menu__item--active", isActive);
+    });
+  }
+  createMenuItem(label, qualityId) {
+    const item = createElement("div", {
+      className: "sp-quality-menu__item"
+    });
+    item.setAttribute("role", "menuitem");
+    item.setAttribute("data-quality-id", qualityId);
+    const labelSpan = createElement("span", { className: "sp-quality-menu__label" });
+    labelSpan.textContent = label;
+    item.appendChild(labelSpan);
+    item.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.selectQuality(qualityId);
+    });
+    return item;
+  }
+  selectQuality(qualityId) {
+    this.api.emit("quality:select", {
+      quality: qualityId,
+      auto: qualityId === "auto"
+    });
+    this.close();
+  }
+  toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+  open() {
+    this.isOpen = true;
+    this.menu.classList.add("sp-quality-menu--open");
+    this.btn.setAttribute("aria-expanded", "true");
+  }
+  close() {
+    this.isOpen = false;
+    this.menu.classList.remove("sp-quality-menu--open");
+    this.btn.setAttribute("aria-expanded", "false");
+  }
+  destroy() {
+    document.removeEventListener("click", this.closeHandler);
+    this.el.remove();
+  }
+};
+
+// src/controls/CastButton.ts
+function isChromecastSupported() {
+  if (typeof navigator === "undefined") return false;
+  const ua = navigator.userAgent;
+  return /Chrome/.test(ua) && !/Edge|Edg/.test(ua);
+}
+function isAirPlaySupported() {
+  if (typeof HTMLVideoElement === "undefined") return false;
+  return typeof HTMLVideoElement.prototype.webkitShowPlaybackTargetPicker === "function";
+}
+var CastButton = class {
+  constructor(api, type) {
+    this.api = api;
+    this.type = type;
+    this.supported = type === "chromecast" ? isChromecastSupported() : isAirPlaySupported();
+    const icon = type === "chromecast" ? icons.chromecast : icons.airplay;
+    const label = type === "chromecast" ? "Cast" : "AirPlay";
+    this.el = createButton(`sp-cast sp-cast--${type}`, label, icon);
+    this.el.addEventListener("click", () => this.handleClick());
+    if (!this.supported) {
+      this.el.style.display = "none";
+    }
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    if (!this.supported) {
+      this.el.style.display = "none";
+      return;
+    }
+    if (this.type === "chromecast") {
+      const available = this.api.getState("chromecastAvailable");
+      const active = this.api.getState("chromecastActive");
+      this.el.style.display = "";
+      this.el.disabled = !available && !active;
+      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");
+      } else {
+        this.el.innerHTML = icons.chromecast;
+        this.el.setAttribute("aria-label", available ? "Cast" : "No Cast devices found");
+      }
+    } else {
+      const active = this.api.getState("airplayActive");
+      this.el.style.display = "";
+      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");
+    }
+  }
+  handleClick() {
+    if (this.type === "chromecast") {
+      this.handleChromecast();
+    } else {
+      this.handleAirPlay();
+    }
+  }
+  handleChromecast() {
+    const chromecast = this.api.getPlugin("chromecast");
+    if (!chromecast) return;
+    if (chromecast.isConnected()) {
+      chromecast.endSession();
+    } else {
+      chromecast.requestSession().catch(() => {
+      });
+    }
+  }
+  async handleAirPlay() {
+    const airplayPlugin = this.api.getPlugin("airplay");
+    if (airplayPlugin) {
+      await airplayPlugin.showPicker();
+    } else {
+      const video = getVideo(this.api.container);
+      video?.webkitShowPlaybackTargetPicker?.();
+    }
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+
+// src/controls/PipButton.ts
+var PipButton = class {
+  constructor(api) {
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    this.api = api;
+    const video = document.createElement("video");
+    this.supported = "pictureInPictureEnabled" in document || "webkitSetPresentationMode" in video;
+    this.el = createButton("sp-pip", "Picture-in-Picture", icons.pip);
+    this.el.addEventListener("click", this.clickHandler);
+    if (!this.supported) {
+      this.el.style.display = "none";
+    }
+  }
+  render() {
+    return this.el;
+  }
+  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);
+  }
+  async toggle() {
+    const video = getVideo(this.api.container);
+    if (!video) {
+      this.api.logger.warn("PiP: video element not found");
+      return;
+    }
+    try {
+      const isInPip = document.pictureInPictureElement === video || video.webkitPresentationMode === "picture-in-picture";
+      if (isInPip) {
+        if (document.pictureInPictureElement) {
+          await document.exitPictureInPicture();
+        } else if (video.webkitSetPresentationMode) {
+          video.webkitSetPresentationMode("inline");
+        }
+        this.api.logger.debug("PiP: exited");
+      } else {
+        if (video.requestPictureInPicture) {
+          await video.requestPictureInPicture();
+        } else if (video.webkitSetPresentationMode) {
+          video.webkitSetPresentationMode("picture-in-picture");
+        }
+        this.api.logger.debug("PiP: entered");
+      }
+    } catch (e) {
+      this.api.logger.warn("PiP: failed", { error: e.message });
+    }
+  }
+  destroy() {
+    this.el.removeEventListener("click", this.clickHandler);
+    this.el.remove();
+  }
+};
+
+// src/controls/FullscreenButton.ts
+var FullscreenButton = class {
+  constructor(api) {
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    this.api = api;
+    this.el = createButton("sp-fullscreen", "Fullscreen", icons.fullscreen);
+    this.el.addEventListener("click", this.clickHandler);
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const fullscreen = this.api.getState("fullscreen");
+    if (fullscreen) {
+      this.el.innerHTML = icons.exitFullscreen;
+      this.el.setAttribute("aria-label", "Exit fullscreen");
+    } else {
+      this.el.innerHTML = icons.fullscreen;
+      this.el.setAttribute("aria-label", "Fullscreen");
+    }
+  }
+  async toggle() {
+    const container = this.api.container;
+    const video = getVideo(container);
+    try {
+      if (document.fullscreenElement) {
+        await document.exitFullscreen();
+      } else if (container.requestFullscreen) {
+        await container.requestFullscreen();
+      } else if (video?.webkitEnterFullscreen) {
+        video.webkitEnterFullscreen();
+      }
+    } catch {
+    }
+  }
+  destroy() {
+    this.el.removeEventListener("click", this.clickHandler);
+    this.el.remove();
+  }
+};
+
+// src/controls/Spacer.ts
+var Spacer = class {
+  constructor() {
+    this.el = createElement("div", { className: "sp-spacer" });
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+
+// src/index.ts
+var DEFAULT_LAYOUT = [
+  "play",
+  "volume",
+  "time",
+  "live-indicator",
+  "spacer",
+  "quality",
+  "chromecast",
+  "airplay",
+  "pip",
+  "fullscreen"
+];
+var DEFAULT_HIDE_DELAY = 3e3;
+function uiPlugin(config = {}) {
+  let api;
+  let controlBar = null;
+  let gradient = null;
+  let progressBar = null;
+  let bufferingIndicator = null;
+  let styleEl = null;
+  let controls = [];
+  let hideTimeout = null;
+  let stateUnsubscribe = null;
+  let controlsVisible = true;
+  const layout = config.controls || DEFAULT_LAYOUT;
+  const hideDelay = config.hideDelay ?? DEFAULT_HIDE_DELAY;
+  const createControl = (slot) => {
+    switch (slot) {
+      case "play":
+        return new PlayButton(api);
+      case "volume":
+        return new VolumeControl(api);
+      case "progress":
+        return null;
+      case "time":
+        return new TimeDisplay(api);
+      case "live-indicator":
+        return new LiveIndicator(api);
+      case "quality":
+        return new QualityMenu(api);
+      case "chromecast":
+        return new CastButton(api, "chromecast");
+      case "airplay":
+        return new CastButton(api, "airplay");
+      case "pip":
+        return new PipButton(api);
+      case "fullscreen":
+        return new FullscreenButton(api);
+      case "spacer":
+        return new Spacer();
+      default:
+        return null;
+    }
+  };
+  const updateControls = () => {
+    controls.forEach((c) => c.update());
+    progressBar?.update();
+    const waiting = api?.getState("waiting");
+    const seeking = api?.getState("seeking");
+    const playbackState = api?.getState("playbackState");
+    const isLoading = playbackState === "loading";
+    const showSpinner = waiting || seeking && !api?.getState("paused") || isLoading;
+    bufferingIndicator?.classList.toggle("sp-buffering--visible", !!showSpinner);
+  };
+  const showControls = () => {
+    if (controlsVisible) {
+      resetHideTimer();
+      return;
+    }
+    controlsVisible = true;
+    controlBar?.classList.add("sp-controls--visible");
+    controlBar?.classList.remove("sp-controls--hidden");
+    gradient?.classList.add("sp-gradient--visible");
+    progressBar?.show();
+    api?.setState("controlsVisible", true);
+    resetHideTimer();
+  };
+  const hideControls = () => {
+    const paused = api?.getState("paused");
+    if (paused) return;
+    controlsVisible = false;
+    controlBar?.classList.remove("sp-controls--visible");
+    controlBar?.classList.add("sp-controls--hidden");
+    gradient?.classList.remove("sp-gradient--visible");
+    progressBar?.hide();
+    api?.setState("controlsVisible", false);
+  };
+  const resetHideTimer = () => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+    }
+    hideTimeout = setTimeout(hideControls, hideDelay);
+  };
+  const handleInteraction = () => {
+    showControls();
+  };
+  const handleMouseLeave = () => {
+    hideControls();
+  };
+  const handleKeyDown = (e) => {
+    if (!api.container.contains(document.activeElement)) return;
+    const video = api.container.querySelector("video");
+    if (!video) return;
+    switch (e.key) {
+      case " ":
+      case "k":
+        e.preventDefault();
+        video.paused ? video.play() : video.pause();
+        break;
+      case "m":
+        e.preventDefault();
+        video.muted = !video.muted;
+        break;
+      case "f":
+        e.preventDefault();
+        if (document.fullscreenElement) {
+          document.exitFullscreen();
+        } else {
+          api.container.requestFullscreen?.();
+        }
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        video.currentTime = Math.max(0, video.currentTime - 5);
+        showControls();
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        video.currentTime = Math.min(video.duration || 0, video.currentTime + 5);
+        showControls();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        video.volume = Math.min(1, video.volume + 0.1);
+        showControls();
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        video.volume = Math.max(0, video.volume - 0.1);
+        showControls();
+        break;
+    }
+  };
+  return {
+    id: "ui-controls",
+    name: "UI Controls",
+    type: "ui",
+    version: "1.0.0",
+    async init(pluginApi) {
+      api = pluginApi;
+      styleEl = document.createElement("style");
+      styleEl.textContent = styles;
+      document.head.appendChild(styleEl);
+      if (config.theme) {
+        this.setTheme(config.theme);
+      }
+      const container = api.container;
+      if (!container) {
+        api.logger.error("UI plugin: container not found");
+        return;
+      }
+      const containerStyle = getComputedStyle(container);
+      if (containerStyle.position === "static") {
+        container.style.position = "relative";
+      }
+      gradient = document.createElement("div");
+      gradient.className = "sp-gradient sp-gradient--visible";
+      container.appendChild(gradient);
+      bufferingIndicator = document.createElement("div");
+      bufferingIndicator.className = "sp-buffering";
+      bufferingIndicator.innerHTML = icons.spinner;
+      bufferingIndicator.setAttribute("aria-hidden", "true");
+      container.appendChild(bufferingIndicator);
+      progressBar = new ProgressBar(api);
+      container.appendChild(progressBar.render());
+      progressBar.show();
+      controlBar = document.createElement("div");
+      controlBar.className = "sp-controls sp-controls--visible";
+      controlBar.setAttribute("role", "toolbar");
+      controlBar.setAttribute("aria-label", "Video controls");
+      for (const slot of layout) {
+        const control = createControl(slot);
+        if (control) {
+          controls.push(control);
+          controlBar.appendChild(control.render());
+        }
+      }
+      container.appendChild(controlBar);
+      container.addEventListener("mousemove", handleInteraction);
+      container.addEventListener("mouseenter", handleInteraction);
+      container.addEventListener("mouseleave", handleMouseLeave);
+      container.addEventListener("touchstart", handleInteraction, { passive: true });
+      container.addEventListener("click", handleInteraction);
+      document.addEventListener("keydown", handleKeyDown);
+      stateUnsubscribe = api.subscribeToState(updateControls);
+      document.addEventListener("fullscreenchange", updateControls);
+      updateControls();
+      if (!container.hasAttribute("tabindex")) {
+        container.setAttribute("tabindex", "0");
+      }
+      api.logger.debug("UI controls plugin initialized");
+    },
+    async destroy() {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = null;
+      }
+      stateUnsubscribe?.();
+      stateUnsubscribe = null;
+      if (api?.container) {
+        api.container.removeEventListener("mousemove", handleInteraction);
+        api.container.removeEventListener("mouseenter", handleInteraction);
+        api.container.removeEventListener("mouseleave", handleMouseLeave);
+        api.container.removeEventListener("touchstart", handleInteraction);
+        api.container.removeEventListener("click", handleInteraction);
+      }
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("fullscreenchange", updateControls);
+      controls.forEach((c) => c.destroy());
+      controls = [];
+      progressBar?.destroy();
+      progressBar = null;
+      controlBar?.remove();
+      controlBar = null;
+      gradient?.remove();
+      gradient = null;
+      bufferingIndicator?.remove();
+      bufferingIndicator = null;
+      styleEl?.remove();
+      styleEl = null;
+      api?.logger.debug("UI controls plugin destroyed");
+    },
+    // Public API
+    show() {
+      showControls();
+    },
+    hide() {
+      controlsVisible = false;
+      controlBar?.classList.remove("sp-controls--visible");
+      controlBar?.classList.add("sp-controls--hidden");
+      gradient?.classList.remove("sp-gradient--visible");
+      progressBar?.hide();
+      api?.setState("controlsVisible", false);
+    },
+    setTheme(theme) {
+      const root = api?.container || document.documentElement;
+      if (theme.primaryColor) {
+        root.style.setProperty("--sp-color", theme.primaryColor);
+      }
+      if (theme.accentColor) {
+        root.style.setProperty("--sp-accent", theme.accentColor);
+      }
+      if (theme.backgroundColor) {
+        root.style.setProperty("--sp-bg", theme.backgroundColor);
+      }
+      if (theme.controlBarHeight) {
+        root.style.setProperty("--sp-control-height", `${theme.controlBarHeight}px`);
+      }
+      if (theme.iconSize) {
+        root.style.setProperty("--sp-icon-size", `${theme.iconSize}px`);
+      }
+    },
+    getControlBar() {
+      return controlBar;
+    }
+  };
+}
+var index_default = uiPlugin;
+export {
+  index_default as default,
+  formatLiveTime,
+  formatTime,
+  icons,
+  styles,
+  uiPlugin
+};