@sweet-player/core 0.2.0

package/dist/index.js

@@ -0,0 +1,1513 @@
+// src/core/events.ts
+var EventEmitter = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  on(event, fn) {
+    let set = this.listeners.get(event);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(event, set);
+    }
+    set.add(fn);
+    return () => this.off(event, fn);
+  }
+  off(event, fn) {
+    this.listeners.get(event)?.delete(fn);
+  }
+  emit(event, payload) {
+    this.listeners.get(event)?.forEach((fn) => fn(payload));
+  }
+  removeAll() {
+    this.listeners.clear();
+  }
+};
+
+// src/core/media.ts
+import Hls from "hls.js";
+function isHlsSource(src) {
+  return /\.m3u8($|\?)/i.test(src);
+}
+var MediaController = class {
+  constructor(video, emitter, hlsConfig, callbacks = {}) {
+    this.video = video;
+    this.emitter = emitter;
+    this.hlsConfig = hlsConfig;
+    this.callbacks = callbacks;
+    this.hls = null;
+    /** 最近一次加载的地址，错误重试用 */
+    this.currentSrc = "";
+  }
+  load(src) {
+    this.detachHls();
+    this.currentSrc = src;
+    if (isHlsSource(src)) {
+      if (Hls.isSupported()) {
+        this.hls = new Hls(this.hlsConfig);
+        this.hls.on(Hls.Events.ERROR, (_event, data) => {
+          if (data.fatal) {
+            switch (data.type) {
+              case Hls.ErrorTypes.NETWORK_ERROR:
+                this.emitter.emit("error", { type: "hls-network", detail: data });
+                break;
+              case Hls.ErrorTypes.MEDIA_ERROR:
+                this.hls?.recoverMediaError();
+                break;
+              default:
+                this.emitter.emit("error", { type: "hls-fatal", detail: data });
+                this.detachHls();
+            }
+          }
+        });
+        this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          this.notifyTracks();
+        });
+        this.hls.loadSource(src);
+        this.hls.attachMedia(this.video);
+        return;
+      }
+      if (this.video.canPlayType("application/vnd.apple.mpegurl")) {
+        this.video.src = src;
+        return;
+      }
+      this.emitter.emit("error", { type: "hls-unsupported" });
+      return;
+    }
+    this.video.src = src;
+  }
+  /** 重新加载当前地址（错误重试） */
+  reload() {
+    if (this.currentSrc) this.load(this.currentSrc);
+  }
+  notifyTracks() {
+    if (!this.hls) return;
+    if (this.hls.levels.length > 1 && this.callbacks.onLevels) {
+      const levels = this.hls.levels.map((l, i) => ({
+        index: i,
+        height: l.height,
+        bitrate: l.bitrate,
+        label: l.height ? `${l.height}P` : `${Math.round(l.bitrate / 1e3)}kbps`
+      })).sort((a, b) => b.height - a.height);
+      this.callbacks.onLevels(levels);
+    }
+    if (this.hls.audioTracks.length > 1 && this.callbacks.onAudioTracks) {
+      this.callbacks.onAudioTracks(
+        this.hls.audioTracks.map((t, i) => ({ index: i, label: t.name || t.lang || `Track ${i + 1}` }))
+      );
+    }
+  }
+  /** 切换 hls 画质档位，-1 为自动 */
+  setLevel(index) {
+    if (this.hls) this.hls.currentLevel = index;
+  }
+  setAudioTrack(index) {
+    if (this.hls) this.hls.audioTrack = index;
+  }
+  /** hls.js 带宽估算（bps），统计面板用 */
+  get bandwidthEstimate() {
+    return this.hls?.bandwidthEstimate;
+  }
+  /** 当前 hls level 描述，统计面板用 */
+  get currentLevelInfo() {
+    if (!this.hls || this.hls.currentLevel < 0) return void 0;
+    const level = this.hls.levels[this.hls.currentLevel];
+    if (!level) return void 0;
+    return `${level.width}x${level.height}@${Math.round(level.bitrate / 1e3)}kbps`;
+  }
+  detachHls() {
+    if (this.hls) {
+      this.hls.destroy();
+      this.hls = null;
+    }
+  }
+  destroy() {
+    this.detachHls();
+    this.video.removeAttribute("src");
+    this.video.load();
+  }
+};
+
+// src/core/keyboard.ts
+var HOLD_THRESHOLD = 300;
+var TICK_INTERVAL = 250;
+function isEditableTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable;
+}
+var KeyboardController = class {
+  constructor(container, actions, options) {
+    this.container = container;
+    this.actions = actions;
+    this.options = options;
+    this.holdDirection = 0;
+    this.holdStart = 0;
+    this.accumulated = 0;
+    this.tickTimer = null;
+    this.hovering = false;
+    this.onKeyDown = (e) => this.handleKeyDown(e);
+    this.onKeyUp = (e) => this.handleKeyUp(e);
+    this.onEnter = () => this.hovering = true;
+    this.onLeave = () => this.hovering = false;
+    document.addEventListener("keydown", this.onKeyDown);
+    document.addEventListener("keyup", this.onKeyUp);
+    container.addEventListener("mouseenter", this.onEnter);
+    container.addEventListener("mouseleave", this.onLeave);
+  }
+  isScoped(e) {
+    if (isEditableTarget(e.target)) return false;
+    return this.hovering || this.container.contains(document.activeElement);
+  }
+  handleKeyDown(e) {
+    if (!this.isScoped(e)) return;
+    switch (e.key) {
+      case " ":
+        e.preventDefault();
+        if (!e.repeat) this.actions.togglePlay();
+        break;
+      case "ArrowLeft":
+      case "ArrowRight": {
+        e.preventDefault();
+        if (e.repeat) return;
+        this.startHold(e.key === "ArrowRight" ? 1 : -1);
+        break;
+      }
+      case "ArrowUp":
+        e.preventDefault();
+        this.actions.adjustVolume(5);
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        this.actions.adjustVolume(-5);
+        break;
+      case "f":
+      case "F":
+        if (!e.repeat) this.actions.toggleFullscreen();
+        break;
+      case "m":
+      case "M":
+        if (!e.repeat) this.actions.toggleMute();
+        break;
+    }
+  }
+  handleKeyUp(e) {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+    const dir = e.key === "ArrowRight" ? 1 : -1;
+    if (this.holdDirection !== dir) return;
+    this.endHold();
+  }
+  startHold(direction) {
+    if (this.holdDirection !== 0) this.endHold();
+    this.holdDirection = direction;
+    this.holdStart = performance.now();
+    this.accumulated = 0;
+    this.tickTimer = setInterval(() => {
+      const heldMs = performance.now() - this.holdStart;
+      if (heldMs < HOLD_THRESHOLD) return;
+      const { longSeekSteps, stepUpInterval } = this.options;
+      const levelIndex = Math.min(
+        Math.floor((heldMs - HOLD_THRESHOLD) / stepUpInterval),
+        longSeekSteps.length - 1
+      );
+      const stepPerSecond = longSeekSteps[levelIndex];
+      this.accumulated += stepPerSecond * (TICK_INTERVAL / 1e3) * this.holdDirection;
+      this.actions.onLongSeekProgress(Math.round(this.accumulated));
+    }, TICK_INTERVAL);
+  }
+  endHold() {
+    if (this.tickTimer) {
+      clearInterval(this.tickTimer);
+      this.tickTimer = null;
+    }
+    const heldMs = performance.now() - this.holdStart;
+    const dir = this.holdDirection;
+    this.holdDirection = 0;
+    if (heldMs < HOLD_THRESHOLD) {
+      this.actions.seekBy(this.options.seekStep * dir);
+    } else {
+      this.actions.onLongSeekCommit(Math.round(this.accumulated));
+    }
+    this.accumulated = 0;
+  }
+  destroy() {
+    if (this.tickTimer) clearInterval(this.tickTimer);
+    document.removeEventListener("keydown", this.onKeyDown);
+    document.removeEventListener("keyup", this.onKeyUp);
+    this.container.removeEventListener("mouseenter", this.onEnter);
+    this.container.removeEventListener("mouseleave", this.onLeave);
+  }
+};
+
+// src/core/gestures.ts
+var SWIPE_THRESHOLD = 12;
+var DOUBLE_TAP_WINDOW = 280;
+var SEEK_PER_WIDTH = 120;
+var VOLUME_PER_HEIGHT = 100;
+var GestureController = class {
+  constructor(container, video, actions, seekStep) {
+    this.container = container;
+    this.video = video;
+    this.actions = actions;
+    this.seekStep = seekStep;
+    this.startX = 0;
+    this.startY = 0;
+    this.mode = "none";
+    this.pendingDelta = 0;
+    this.lastTapTime = 0;
+    this.lastTapX = 0;
+    this.singleTapTimer = null;
+    this.onPointerDown = (e) => this.handleDown(e);
+    this.onPointerMove = (e) => this.handleMove(e);
+    this.onPointerUp = (e) => this.handleUp(e);
+    container.addEventListener("pointerdown", this.onPointerDown);
+    container.addEventListener("pointermove", this.onPointerMove);
+    container.addEventListener("pointerup", this.onPointerUp);
+    container.addEventListener("pointercancel", this.onPointerUp);
+  }
+  /** 手势只在视频画面区域生效，控件上的触摸不拦截 */
+  isOnVideoSurface(e) {
+    return e.target === this.video || e.target === this.container;
+  }
+  handleDown(e) {
+    if (e.pointerType !== "touch" || !this.isOnVideoSurface(e)) return;
+    this.startX = e.clientX;
+    this.startY = e.clientY;
+    this.mode = "none";
+    this.pendingDelta = 0;
+  }
+  handleMove(e) {
+    if (e.pointerType !== "touch" || this.mode === "none" && !this.isOnVideoSurface(e)) return;
+    const dx = e.clientX - this.startX;
+    const dy = e.clientY - this.startY;
+    const rect = this.container.getBoundingClientRect();
+    if (this.mode === "none") {
+      if (Math.abs(dx) > SWIPE_THRESHOLD && Math.abs(dx) > Math.abs(dy)) {
+        this.mode = "seek";
+      } else if (Math.abs(dy) > SWIPE_THRESHOLD && Math.abs(dy) > Math.abs(dx)) {
+        if (this.startX - rect.left > rect.width / 2) this.mode = "volume";
+      }
+      if (this.mode !== "none") this.container.setPointerCapture(e.pointerId);
+    }
+    if (this.mode === "seek") {
+      this.pendingDelta = Math.round(dx / rect.width * SEEK_PER_WIDTH);
+      this.actions.onSeekPreview(this.pendingDelta);
+    } else if (this.mode === "volume") {
+      const deltaVol = Math.round(-(e.clientY - this.startY) / rect.height * VOLUME_PER_HEIGHT);
+      if (deltaVol !== 0) {
+        this.actions.adjustVolume(deltaVol);
+        this.startY = e.clientY;
+      }
+    }
+  }
+  handleUp(e) {
+    if (e.pointerType !== "touch") return;
+    if (this.mode === "seek") {
+      this.actions.onSeekCommit(this.pendingDelta);
+    } else if (this.mode === "none" && this.isOnVideoSurface(e)) {
+      this.handleTap(e);
+    }
+    this.mode = "none";
+    this.pendingDelta = 0;
+  }
+  handleTap(e) {
+    const now = Date.now();
+    const rect = this.container.getBoundingClientRect();
+    if (now - this.lastTapTime < DOUBLE_TAP_WINDOW && Math.abs(e.clientX - this.lastTapX) < 60) {
+      if (this.singleTapTimer) {
+        clearTimeout(this.singleTapTimer);
+        this.singleTapTimer = null;
+      }
+      this.lastTapTime = 0;
+      const zone = (e.clientX - rect.left) / rect.width;
+      if (zone < 1 / 3) this.actions.seekBy(-this.seekStep);
+      else if (zone > 2 / 3) this.actions.seekBy(this.seekStep);
+      else this.actions.toggleFullscreen();
+      return;
+    }
+    this.lastTapTime = now;
+    this.lastTapX = e.clientX;
+    this.singleTapTimer = setTimeout(() => {
+      this.singleTapTimer = null;
+      this.actions.toggleControls();
+    }, DOUBLE_TAP_WINDOW);
+  }
+  destroy() {
+    if (this.singleTapTimer) clearTimeout(this.singleTapTimer);
+    this.container.removeEventListener("pointerdown", this.onPointerDown);
+    this.container.removeEventListener("pointermove", this.onPointerMove);
+    this.container.removeEventListener("pointerup", this.onPointerUp);
+    this.container.removeEventListener("pointercancel", this.onPointerUp);
+  }
+};
+
+// src/core/fullscreen.ts
+function isFullscreen(el) {
+  const doc = document;
+  const current = doc.fullscreenElement ?? doc.webkitFullscreenElement;
+  return current === el;
+}
+async function toggleFullscreen(el) {
+  const doc = document;
+  const fsEl = el;
+  if (isFullscreen(el)) {
+    await (doc.exitFullscreen?.() ?? doc.webkitExitFullscreen?.());
+  } else {
+    await (fsEl.requestFullscreen?.() ?? fsEl.webkitRequestFullscreen?.());
+  }
+}
+function onFullscreenChange(el, cb) {
+  const handler = () => cb(isFullscreen(el));
+  document.addEventListener("fullscreenchange", handler);
+  document.addEventListener("webkitfullscreenchange", handler);
+  return () => {
+    document.removeEventListener("fullscreenchange", handler);
+    document.removeEventListener("webkitfullscreenchange", handler);
+  };
+}
+
+// src/utils/dom.ts
+function createEl(tag, { className, text, html, attrs, parent } = {}) {
+  const el = document.createElement(tag);
+  if (className) el.className = className;
+  if (text) el.textContent = text;
+  if (html) el.innerHTML = html;
+  if (attrs) for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+  if (parent) parent.appendChild(el);
+  return el;
+}
+function createSvgIcon(pathData, viewBox = "0 0 24 24") {
+  return `<svg viewBox="${viewBox}" fill="currentColor" aria-hidden="true"><path d="${pathData}"/></svg>`;
+}
+
+// src/utils/time.ts
+function formatTime(seconds) {
+  if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
+  const s = Math.floor(seconds % 60);
+  const m = Math.floor(seconds / 60 % 60);
+  const h = Math.floor(seconds / 3600);
+  const mm = h > 0 ? String(m).padStart(2, "0") : String(m);
+  const ss = String(s).padStart(2, "0");
+  return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
+// src/ui/icons.ts
+var icons = {
+  play: createSvgIcon("M8 5v14l11-7z"),
+  pause: createSvgIcon("M6 19h4V5H6v14zm8-14v14h4V5h-4z"),
+  prev: createSvgIcon("M6 6h2v12H6zm3.5 6l8.5 6V6z"),
+  next: createSvgIcon("M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"),
+  seekBack: createSvgIcon(
+    "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"
+  ),
+  seekForward: createSvgIcon(
+    "M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"
+  ),
+  volumeHigh: createSvgIcon(
+    "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"
+  ),
+  volumeLow: createSvgIcon(
+    "M5 9v6h4l5 5V4L9 9H5zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"
+  ),
+  volumeMute: createSvgIcon(
+    "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"
+  ),
+  fullscreen: createSvgIcon(
+    "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+  ),
+  fullscreenExit: createSvgIcon(
+    "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"
+  ),
+  pip: createSvgIcon(
+    "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 16.01H3V4.98h18v14.03z"
+  ),
+  audio: createSvgIcon(
+    "M12 3a9 9 0 0 0-9 9v7c0 1.1.9 2 2 2h4v-8H5v-1c0-3.87 3.13-7 7-7s7 3.13 7 7v1h-4v8h4c1.1 0 2-.9 2-2v-7a9 9 0 0 0-9-9z"
+  )
+};
+
+// src/ui/components/menu.ts
+function createPopupMenu(opts) {
+  const root = createEl("div", { className: "sp-menu" });
+  const btn = createEl("button", {
+    className: "sp-btn sp-menu-btn",
+    html: opts.buttonHtml,
+    attrs: { type: "button", title: opts.title, "aria-label": opts.title },
+    parent: root
+  });
+  const panel = createEl("div", { className: "sp-menu-panel", parent: root });
+  let items = [];
+  let activeValue;
+  function render() {
+    panel.innerHTML = "";
+    if (items.length === 0) {
+      createEl("div", { className: "sp-menu-empty", text: opts.emptyText ?? "-", parent: panel });
+      return;
+    }
+    for (const item of items) {
+      const itemBtn = createEl("button", {
+        className: "sp-menu-item" + (item.value === activeValue ? " sp-active" : ""),
+        text: item.label,
+        attrs: { type: "button" },
+        parent: panel
+      });
+      itemBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        close();
+        opts.onSelect(item);
+      });
+    }
+  }
+  function close() {
+    root.classList.remove("sp-open");
+  }
+  btn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const willOpen = !root.classList.contains("sp-open");
+    root.closest(".sp-controls")?.querySelectorAll(".sp-menu.sp-open").forEach((m) => m.classList.remove("sp-open"));
+    root.classList.toggle("sp-open", willOpen);
+  });
+  document.addEventListener("click", close);
+  render();
+  return {
+    el: root,
+    setItems(next) {
+      items = next;
+      render();
+    },
+    setActive(value) {
+      activeValue = value;
+      render();
+    },
+    setButtonContent(html) {
+      btn.innerHTML = html;
+    },
+    close
+  };
+}
+
+// src/ui/components/progressBar.ts
+function createProgressBar(video, onSeek) {
+  const root = createEl("div", { className: "sp-progress" });
+  const track = createEl("div", { className: "sp-progress-track", parent: root });
+  const buffered = createEl("div", { className: "sp-progress-buffered", parent: track });
+  const played = createEl("div", { className: "sp-progress-played", parent: track });
+  const thumb = createEl("div", { className: "sp-progress-thumb", parent: track });
+  const tooltip = createEl("div", { className: "sp-progress-tooltip", text: "0:00", parent: root });
+  let dragging = false;
+  function ratioFromEvent(e) {
+    const rect = root.getBoundingClientRect();
+    return clamp((e.clientX - rect.left) / rect.width, 0, 1);
+  }
+  function render(ratio) {
+    const duration = video.duration || 0;
+    const playedRatio = ratio ?? (duration ? video.currentTime / duration : 0);
+    played.style.width = `${playedRatio * 100}%`;
+    thumb.style.left = `${playedRatio * 100}%`;
+    let bufferedEnd = 0;
+    for (let i = 0; i < video.buffered.length; i++) {
+      if (video.buffered.start(i) <= video.currentTime && video.buffered.end(i) > bufferedEnd) {
+        bufferedEnd = video.buffered.end(i);
+      }
+    }
+    buffered.style.width = duration ? `${bufferedEnd / duration * 100}%` : "0%";
+  }
+  function onPointerMove(e) {
+    const ratio = ratioFromEvent(e);
+    tooltip.style.left = `${ratio * 100}%`;
+    tooltip.textContent = formatTime(ratio * (video.duration || 0));
+    if (dragging) render(ratio);
+  }
+  function onPointerDown(e) {
+    dragging = true;
+    root.classList.add("sp-dragging");
+    root.setPointerCapture(e.pointerId);
+    render(ratioFromEvent(e));
+  }
+  function onPointerUp(e) {
+    if (!dragging) return;
+    dragging = false;
+    root.classList.remove("sp-dragging");
+    onSeek(ratioFromEvent(e) * (video.duration || 0));
+  }
+  root.addEventListener("pointermove", onPointerMove);
+  root.addEventListener("pointerdown", onPointerDown);
+  root.addEventListener("pointerup", onPointerUp);
+  root.addEventListener("pointercancel", () => {
+    dragging = false;
+    root.classList.remove("sp-dragging");
+  });
+  return {
+    el: root,
+    update() {
+      if (!dragging) render();
+    },
+    destroy() {
+      root.remove();
+    }
+  };
+}
+
+// src/ui/components/volume.ts
+function createVolumeControl(opts) {
+  const root = createEl("div", { className: "sp-volume" });
+  const btn = createEl("button", {
+    className: "sp-btn",
+    html: icons.volumeHigh,
+    attrs: { type: "button", title: opts.muteTitle, "aria-label": opts.muteTitle },
+    parent: root
+  });
+  const sliderWrap = createEl("div", { className: "sp-volume-slider", parent: root });
+  const track = createEl("div", { className: "sp-volume-track", parent: sliderWrap });
+  const fill = createEl("div", { className: "sp-volume-fill", parent: track });
+  const thumb = createEl("div", { className: "sp-volume-thumb", parent: track });
+  btn.addEventListener("click", opts.onToggleMute);
+  let dragging = false;
+  function volumeFromEvent(e) {
+    const rect = track.getBoundingClientRect();
+    return Math.round(clamp((e.clientX - rect.left) / rect.width, 0, 1) * 100);
+  }
+  track.addEventListener("pointerdown", (e) => {
+    dragging = true;
+    root.classList.add("sp-dragging");
+    track.setPointerCapture(e.pointerId);
+    opts.onVolumeChange(volumeFromEvent(e));
+  });
+  track.addEventListener("pointermove", (e) => {
+    if (dragging) opts.onVolumeChange(volumeFromEvent(e));
+  });
+  const endDrag = () => {
+    dragging = false;
+    root.classList.remove("sp-dragging");
+  };
+  track.addEventListener("pointerup", endDrag);
+  track.addEventListener("pointercancel", endDrag);
+  return {
+    el: root,
+    update(volume, muted) {
+      const shown = muted ? 0 : volume;
+      fill.style.width = `${shown}%`;
+      thumb.style.left = `${shown}%`;
+      btn.innerHTML = muted || volume === 0 ? icons.volumeMute : volume < 50 ? icons.volumeLow : icons.volumeHigh;
+    }
+  };
+}
+
+// src/ui/controls.ts
+function createControls(ctx) {
+  const { video, actions, i18n } = ctx;
+  const topEl = createEl("div", { className: "sp-top" });
+  const titleEl = createEl("div", { className: "sp-title", text: ctx.title, parent: topEl });
+  titleEl.addEventListener("click", actions.onTitleClick);
+  const bottomEl = createEl("div", { className: "sp-bottom" });
+  const progress = createProgressBar(video, (t) => {
+    video.currentTime = t;
+  });
+  bottomEl.appendChild(progress.el);
+  const row = createEl("div", { className: "sp-controls", parent: bottomEl });
+  const button = (html, title, onClick, disabled = false) => {
+    const btn = createEl("button", {
+      className: "sp-btn",
+      html,
+      attrs: { type: "button", title, "aria-label": title },
+      parent: row
+    });
+    btn.disabled = disabled;
+    btn.addEventListener("click", onClick);
+    return btn;
+  };
+  button(icons.prev, i18n.t("prev"), () => actions.onPrev?.(), !actions.onPrev);
+  button(icons.seekBack, i18n.t("seekBack", { n: ctx.seekStep }), () => actions.seekBy(-ctx.seekStep));
+  const playBtn = button(icons.play, i18n.t("playPause"), actions.togglePlay);
+  button(icons.seekForward, i18n.t("seekForward", { n: ctx.seekStep }), () => actions.seekBy(ctx.seekStep));
+  button(icons.next, i18n.t("next"), () => actions.onNext?.(), !actions.onNext);
+  const timeEl = createEl("span", { className: "sp-time", text: "0:00 / 0:00", parent: row });
+  createEl("div", { className: "sp-controls-spacer", parent: row });
+  const rateMenu = createPopupMenu({
+    buttonHtml: "1x",
+    title: i18n.t("speed"),
+    emptyText: i18n.t("empty"),
+    onSelect: (item) => actions.setRate(item.value)
+  });
+  rateMenu.setItems(ctx.playbackRates.map((r) => ({ label: `${r}x`, value: r })));
+  rateMenu.setActive(video.playbackRate);
+  row.appendChild(rateMenu.el);
+  const qualityMenu = createPopupMenu({
+    buttonHtml: i18n.t("quality"),
+    title: i18n.t("quality"),
+    emptyText: i18n.t("empty"),
+    onSelect: (item) => actions.selectQuality(item.value)
+  });
+  row.appendChild(qualityMenu.el);
+  const ratioMenu = createPopupMenu({
+    buttonHtml: i18n.t("aspectRatio"),
+    title: i18n.t("aspectRatio"),
+    emptyText: i18n.t("empty"),
+    onSelect: (item) => actions.setAspectRatio(item.value)
+  });
+  ratioMenu.setItems(
+    ctx.aspectRatios.map((r) => ({ label: r === "original" ? i18n.t("ratioOriginal") : r, value: r }))
+  );
+  ratioMenu.setActive("original");
+  row.appendChild(ratioMenu.el);
+  const audioMenu = createPopupMenu({
+    buttonHtml: icons.audio,
+    title: i18n.t("audioTrack"),
+    emptyText: i18n.t("empty"),
+    onSelect: (item) => actions.selectAudioTrack(item.value)
+  });
+  row.appendChild(audioMenu.el);
+  const volume = createVolumeControl({
+    muteTitle: i18n.t("mute"),
+    onVolumeChange: actions.setVolume,
+    onToggleMute: actions.toggleMute
+  });
+  row.appendChild(volume.el);
+  if (document.pictureInPictureEnabled) {
+    button(icons.pip, i18n.t("pip"), actions.togglePip);
+  }
+  const fsBtn = button(icons.fullscreen, i18n.t("fullscreen"), actions.toggleFullscreen);
+  return {
+    topEl,
+    bottomEl,
+    progress,
+    volume,
+    qualityMenu,
+    audioMenu,
+    updatePlayState(playing) {
+      playBtn.innerHTML = playing ? icons.pause : icons.play;
+    },
+    updateTime() {
+      timeEl.textContent = `${formatTime(video.currentTime)} / ${formatTime(video.duration)}`;
+      progress.update();
+    },
+    updateRate(rate) {
+      rateMenu.setButtonContent(`${rate}x`);
+      rateMenu.setActive(rate);
+    },
+    updateFullscreen(fs) {
+      fsBtn.innerHTML = fs ? icons.fullscreenExit : icons.fullscreen;
+    },
+    updateRatio(ratio) {
+      ratioMenu.setActive(ratio);
+    },
+    destroy() {
+      topEl.remove();
+      bottomEl.remove();
+    }
+  };
+}
+
+// src/ui/components/osd.ts
+function createOsd() {
+  const el = createEl("div", { className: "sp-osd" });
+  let hideTimer = null;
+  function show(text) {
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+    el.textContent = text;
+    el.classList.add("sp-visible");
+  }
+  function hide() {
+    el.classList.remove("sp-visible");
+  }
+  return {
+    el,
+    show,
+    hide,
+    flash(text) {
+      show(text);
+      hideTimer = setTimeout(hide, 800);
+    }
+  };
+}
+
+// src/ui/components/statsOverlay.ts
+function createStatsOverlay(container, video, media, i18n) {
+  let root = null;
+  let timer = null;
+  function collect() {
+    const q = video.getVideoPlaybackQuality?.();
+    const bufferedRanges = [];
+    for (let i = 0; i < video.buffered.length; i++) {
+      bufferedRanges.push(`${formatTime(video.buffered.start(i))}-${formatTime(video.buffered.end(i))}`);
+    }
+    const bw = media.bandwidthEstimate;
+    return [
+      ["Video Res", `${video.videoWidth}x${video.videoHeight}`],
+      ["Viewport", `${container.clientWidth}x${container.clientHeight}`],
+      ["Time", `${formatTime(video.currentTime)} / ${formatTime(video.duration)}`],
+      ["Buffered", bufferedRanges.join(", ") || "-"],
+      ["Dropped Frames", q ? `${q.droppedVideoFrames} / ${q.totalVideoFrames}` : "N/A"],
+      ["Bandwidth", bw ? `${(bw / 1e3 / 1e3).toFixed(2)} Mbps` : "N/A"],
+      ["HLS Level", media.currentLevelInfo ?? "N/A"],
+      ["Speed", `${video.playbackRate}x`],
+      ["Volume", video.muted ? "muted" : `${Math.round(video.volume * 100)}%`],
+      ["Ready State", String(video.readyState)],
+      ["Source", video.currentSrc || "-"]
+    ];
+  }
+  function render() {
+    if (!root) return;
+    const dl = root.querySelector(".sp-stats-body");
+    dl.innerHTML = "";
+    for (const [label, value] of collect()) {
+      const row = createEl("div", { className: "sp-stats-row", parent: dl });
+      createEl("dt", { text: label, parent: row });
+      createEl("dd", { text: value, parent: row });
+    }
+  }
+  function show() {
+    if (root) return;
+    root = createEl("div", { className: "sp-stats", parent: container });
+    const closeBtn = createEl("button", {
+      className: "sp-stats-close",
+      text: "\u2715",
+      attrs: { type: "button", "aria-label": i18n.t("closeStats") },
+      parent: root
+    });
+    closeBtn.addEventListener("click", hide);
+    createEl("dl", { className: "sp-stats-body", parent: root });
+    render();
+    timer = setInterval(render, 500);
+  }
+  function hide() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+    root?.remove();
+    root = null;
+  }
+  return {
+    toggle() {
+      root ? hide() : show();
+    },
+    hide,
+    destroy: hide
+  };
+}
+
+// src/ui/components/stateOverlay.ts
+function createStateOverlay(i18n) {
+  const el = createEl("div", { className: "sp-state" });
+  const spinner = createEl("div", { className: "sp-spinner", parent: el });
+  spinner.innerHTML = '<div class="sp-spinner-ring"></div>';
+  let errorEl = null;
+  let endedEl = null;
+  let countdownTimer = null;
+  function stopCountdown() {
+    if (countdownTimer) {
+      clearInterval(countdownTimer);
+      countdownTimer = null;
+    }
+  }
+  function hideError() {
+    errorEl?.remove();
+    errorEl = null;
+  }
+  function hideEnded() {
+    stopCountdown();
+    endedEl?.remove();
+    endedEl = null;
+  }
+  return {
+    el,
+    showLoading() {
+      el.classList.add("sp-loading");
+    },
+    hideLoading() {
+      el.classList.remove("sp-loading");
+    },
+    showError(onRetry) {
+      hideError();
+      hideEnded();
+      el.classList.remove("sp-loading");
+      errorEl = createEl("div", { className: "sp-state-panel", parent: el });
+      createEl("div", { className: "sp-state-message", text: i18n.t("loadError"), parent: errorEl });
+      const retryBtn = createEl("button", {
+        className: "sp-state-btn",
+        text: i18n.t("retry"),
+        attrs: { type: "button" },
+        parent: errorEl
+      });
+      retryBtn.addEventListener("click", () => {
+        hideError();
+        onRetry();
+      });
+    },
+    hideError,
+    showEnded({ onReplay, onNext, autoNextSeconds }) {
+      hideEnded();
+      hideError();
+      el.classList.remove("sp-loading");
+      endedEl = createEl("div", { className: "sp-state-panel", parent: el });
+      const buttons = createEl("div", { className: "sp-state-actions", parent: endedEl });
+      const replayBtn = createEl("button", {
+        className: "sp-state-btn",
+        text: i18n.t("replay"),
+        attrs: { type: "button" },
+        parent: buttons
+      });
+      replayBtn.addEventListener("click", () => {
+        hideEnded();
+        onReplay();
+      });
+      if (onNext) {
+        const nextBtn = createEl("button", {
+          className: "sp-state-btn sp-state-btn-primary",
+          text: i18n.t("playNext"),
+          attrs: { type: "button" },
+          parent: buttons
+        });
+        nextBtn.addEventListener("click", () => {
+          hideEnded();
+          onNext();
+        });
+        if (autoNextSeconds && autoNextSeconds > 0) {
+          let remain = autoNextSeconds;
+          const tip = createEl("div", {
+            className: "sp-state-countdown",
+            text: i18n.t("autoNextIn", { n: remain }),
+            parent: endedEl
+          });
+          const cancelBtn = createEl("button", {
+            className: "sp-state-cancel",
+            text: i18n.t("cancel"),
+            attrs: { type: "button" },
+            parent: tip
+          });
+          cancelBtn.addEventListener("click", () => {
+            stopCountdown();
+            tip.remove();
+          });
+          countdownTimer = setInterval(() => {
+            remain -= 1;
+            if (remain <= 0) {
+              hideEnded();
+              onNext();
+            } else {
+              tip.firstChild.textContent = i18n.t("autoNextIn", { n: remain });
+            }
+          }, 1e3);
+        }
+      }
+    },
+    hideEnded,
+    destroy() {
+      stopCountdown();
+      el.remove();
+    }
+  };
+}
+
+// src/i18n/index.ts
+var zhCN = {
+  play: "\u64AD\u653E",
+  pause: "\u6682\u505C",
+  playPause: "\u64AD\u653E/\u6682\u505C (\u7A7A\u683C)",
+  prev: "\u4E0A\u4E00\u4E2A",
+  next: "\u4E0B\u4E00\u4E2A",
+  seekBack: "\u5FEB\u9000 {n} \u79D2 (\u2190)",
+  seekForward: "\u5FEB\u8FDB {n} \u79D2 (\u2192)",
+  speed: "\u64AD\u653E\u500D\u901F",
+  quality: "\u753B\u8D28",
+  qualityAuto: "\u81EA\u52A8",
+  aspectRatio: "\u753B\u9762\u6BD4\u4F8B",
+  ratioOriginal: "\u539F\u59CB",
+  audioTrack: "\u97F3\u8F68",
+  mute: "\u9759\u97F3 (M)",
+  fullscreen: "\u5168\u5C4F (F)",
+  pip: "\u753B\u4E2D\u753B (P)",
+  empty: "\u6682\u65E0\u53EF\u9009\u9879",
+  closeStats: "\u5173\u95ED\u7EDF\u8BA1\u4FE1\u606F",
+  seconds: "\u79D2",
+  volume: "\u97F3\u91CF",
+  muted: "\u9759\u97F3",
+  replay: "\u91CD\u65B0\u64AD\u653E",
+  playNext: "\u64AD\u653E\u4E0B\u4E00\u4E2A",
+  autoNextIn: "{n} \u79D2\u540E\u64AD\u653E\u4E0B\u4E00\u4E2A",
+  cancel: "\u53D6\u6D88",
+  loadError: "\u89C6\u9891\u52A0\u8F7D\u5931\u8D25",
+  retry: "\u91CD\u8BD5"
+};
+var en = {
+  play: "Play",
+  pause: "Pause",
+  playPause: "Play/Pause (Space)",
+  prev: "Previous",
+  next: "Next",
+  seekBack: "Rewind {n}s (\u2190)",
+  seekForward: "Forward {n}s (\u2192)",
+  speed: "Playback speed",
+  quality: "Quality",
+  qualityAuto: "Auto",
+  aspectRatio: "Aspect ratio",
+  ratioOriginal: "Original",
+  audioTrack: "Audio track",
+  mute: "Mute (M)",
+  fullscreen: "Fullscreen (F)",
+  pip: "Picture-in-Picture (P)",
+  empty: "Nothing available",
+  closeStats: "Close stats",
+  seconds: "s",
+  volume: "Volume",
+  muted: "Muted",
+  replay: "Replay",
+  playNext: "Play next",
+  autoNextIn: "Playing next in {n}s",
+  cancel: "Cancel",
+  loadError: "Failed to load video",
+  retry: "Retry"
+};
+var locales = { "zh-CN": zhCN, en };
+var I18n = class {
+  constructor(locale = "zh-CN", overrides) {
+    this.strings = { ...locales[locale] ?? zhCN, ...overrides };
+  }
+  t(key, params) {
+    let text = this.strings[key];
+    if (params) {
+      for (const [k, v] of Object.entries(params)) text = text.replace(`{${k}}`, String(v));
+    }
+    return text;
+  }
+};
+function registerLocale(name, strings) {
+  locales[name] = strings;
+}
+
+// src/utils/injectStyle.ts
+var STYLE_ID = "sweet-player-style";
+function injectStyle(css) {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+
+// src/utils/storage.ts
+var PREFS_KEY = "sweet-player:prefs";
+var PROGRESS_PREFIX = "sweet-player:progress:";
+function safeGet(key) {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function safeSet(key, value) {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function loadPrefs() {
+  const raw = safeGet(PREFS_KEY);
+  if (!raw) return {};
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return {};
+  }
+}
+function savePrefs(prefs) {
+  safeSet(PREFS_KEY, JSON.stringify({ ...loadPrefs(), ...prefs }));
+}
+function loadProgress(id) {
+  const raw = safeGet(PROGRESS_PREFIX + id);
+  const n = raw === null ? NaN : Number(raw);
+  return Number.isFinite(n) ? n : null;
+}
+function saveProgress(id, time) {
+  safeSet(PROGRESS_PREFIX + id, String(Math.floor(time)));
+}
+function clearProgress(id) {
+  try {
+    localStorage.removeItem(PROGRESS_PREFIX + id);
+  } catch {
+  }
+}
+
+// src/styles/player.css
+var player_default = ".sweet-player {\n  --sp-accent: #ff4d6d;\n  --sp-bg: #000;\n  --sp-text: #fff;\n  --sp-bar-height: 4px;\n  --sp-bar-hover-height: 6px;\n  --sp-control-size: 36px;\n  --sp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--sp-bg);\n  color: var(--sp-text);\n  font-family: var(--sp-font);\n  font-size: 13px;\n  overflow: hidden;\n  user-select: none;\n  -webkit-user-select: none;\n  outline: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sweet-player *,\n.sweet-player *::before,\n.sweet-player *::after {\n  box-sizing: border-box;\n}\n\n.sp-video {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n}\n\n/* \u5F3A\u5236\u753B\u9762\u6BD4\u4F8B\uFF1Avideo \u5C45\u4E2D\u3001\u6309\u6BD4\u4F8B\u9650\u5236\u5C3A\u5BF8\u5E76\u62C9\u4F38\u586B\u5145 */\n.sweet-player[data-ratio]:not([data-ratio='original']) .sp-video {\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  aspect-ratio: var(--sp-forced-ratio);\n  object-fit: fill;\n}\n\n/* ---------- \u9876\u90E8\u6807\u9898\u533A ---------- */\n.sp-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 12px 16px 28px;\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);\n  transition: opacity 0.25s ease;\n  pointer-events: none;\n}\n\n.sp-title {\n  display: inline-block;\n  max-width: 70%;\n  font-size: 15px;\n  font-weight: 500;\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  pointer-events: auto;\n  cursor: default;\n}\n\n/* ---------- \u7EDF\u8BA1\u4FE1\u606F\u8499\u5C42 ---------- */\n.sp-stats {\n  position: absolute;\n  top: 12px;\n  left: 12px;\n  z-index: 30;\n  min-width: 300px;\n  max-width: calc(100% - 24px);\n  padding: 10px 14px;\n  background: rgba(0, 0, 0, 0.75);\n  border-radius: 6px;\n  font-size: 12px;\n  line-height: 1.7;\n  font-family: 'SFMono-Regular', Consolas, monospace;\n  pointer-events: auto;\n}\n\n.sp-stats-close {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  width: 22px;\n  height: 22px;\n  border: none;\n  background: transparent;\n  color: var(--sp-text);\n  cursor: pointer;\n  opacity: 0.7;\n  font-size: 16px;\n  line-height: 1;\n}\n\n.sp-stats-close:hover {\n  opacity: 1;\n}\n\n.sp-stats-row {\n  display: flex;\n  gap: 12px;\n}\n\n.sp-stats-row dt {\n  flex: 0 0 110px;\n  opacity: 0.65;\n  margin: 0;\n}\n\n.sp-stats-row dd {\n  margin: 0;\n  word-break: break-all;\n}\n\n/* ---------- \u4E2D\u592E OSD \u53CD\u9988 ---------- */\n.sp-osd {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 20;\n  padding: 10px 18px;\n  background: rgba(0, 0, 0, 0.65);\n  border-radius: 6px;\n  font-size: 16px;\n  font-weight: 500;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.sp-osd.sp-visible {\n  opacity: 1;\n}\n\n/* ---------- \u5E95\u90E8\u63A7\u5236\u533A ---------- */\n.sp-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 24px 12px 6px;\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);\n  transition: opacity 0.25s ease;\n  z-index: 10;\n}\n\n.sweet-player.sp-controls-hidden .sp-bottom,\n.sweet-player.sp-controls-hidden .sp-top {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.sweet-player.sp-controls-hidden {\n  cursor: none;\n}\n\n/* ---------- \u8FDB\u5EA6\u6761 ---------- */\n.sp-progress {\n  position: relative;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin-bottom: 4px;\n}\n\n.sp-progress-track {\n  position: relative;\n  width: 100%;\n  height: var(--sp-bar-height);\n  background: rgba(255, 255, 255, 0.25);\n  border-radius: 2px;\n  overflow: visible;\n  transition: height 0.1s ease;\n}\n\n.sp-progress:hover .sp-progress-track {\n  height: var(--sp-bar-hover-height);\n}\n\n.sp-progress-buffered,\n.sp-progress-played {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  border-radius: 2px;\n}\n\n.sp-progress-buffered {\n  background: rgba(255, 255, 255, 0.35);\n}\n\n.sp-progress-played {\n  background: var(--sp-accent);\n}\n\n.sp-progress-thumb {\n  position: absolute;\n  top: 50%;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--sp-accent);\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.1s ease;\n  pointer-events: none;\n}\n\n.sp-progress:hover .sp-progress-thumb,\n.sp-progress.sp-dragging .sp-progress-thumb {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n.sp-progress-tooltip {\n  position: absolute;\n  bottom: 18px;\n  transform: translateX(-50%);\n  padding: 2px 6px;\n  background: rgba(0, 0, 0, 0.8);\n  border-radius: 3px;\n  font-size: 12px;\n  display: none;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.sp-progress:hover .sp-progress-tooltip {\n  display: block;\n}\n\n/* ---------- \u63A7\u5236\u6309\u94AE\u884C ---------- */\n.sp-controls {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.sp-controls-spacer {\n  flex: 1;\n}\n\n.sp-btn {\n  width: var(--sp-control-size);\n  height: var(--sp-control-size);\n  border: none;\n  background: transparent;\n  color: var(--sp-text);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  padding: 0;\n  opacity: 0.9;\n  transition: opacity 0.1s ease, background 0.1s ease;\n}\n\n.sp-btn:hover {\n  opacity: 1;\n  background: rgba(255, 255, 255, 0.15);\n}\n\n.sp-btn svg {\n  width: 22px;\n  height: 22px;\n}\n\n.sp-btn:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.sp-time {\n  padding: 0 8px;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  opacity: 0.95;\n}\n\n/* ---------- \u5F39\u51FA\u83DC\u5355 ---------- */\n.sp-menu {\n  position: relative;\n}\n\n.sp-menu-btn {\n  min-width: var(--sp-control-size);\n  width: auto;\n  padding: 0 8px;\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.sp-menu-panel {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%);\n  min-width: 80px;\n  max-height: 220px;\n  overflow-y: auto;\n  background: rgba(28, 28, 28, 0.95);\n  border-radius: 6px;\n  padding: 4px 0;\n  display: none;\n  z-index: 25;\n}\n\n.sp-menu.sp-open .sp-menu-panel {\n  display: block;\n}\n\n.sp-menu-item {\n  display: block;\n  width: 100%;\n  padding: 7px 16px;\n  border: none;\n  background: transparent;\n  color: var(--sp-text);\n  text-align: center;\n  cursor: pointer;\n  font-size: 13px;\n  white-space: nowrap;\n}\n\n.sp-menu-item:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n.sp-menu-item.sp-active {\n  color: var(--sp-accent);\n  font-weight: 600;\n}\n\n.sp-menu-empty {\n  padding: 7px 16px;\n  opacity: 0.5;\n  white-space: nowrap;\n}\n\n/* ---------- \u72B6\u6001\u8499\u5C42\uFF1Aloading / \u9519\u8BEF / \u7ED3\u675F ---------- */\n.sp-state {\n  position: absolute;\n  inset: 0;\n  z-index: 15;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.sp-spinner {\n  opacity: 0;\n  transition: opacity 0.2s ease 0.3s; /* \u5EF6\u8FDF\u51FA\u73B0\uFF0C\u907F\u514D\u77ED\u6682 seek \u95EA\u70C1 */\n}\n\n.sp-state.sp-loading .sp-spinner {\n  opacity: 1;\n}\n\n.sp-spinner-ring {\n  width: 44px;\n  height: 44px;\n  border: 4px solid rgba(255, 255, 255, 0.25);\n  border-top-color: var(--sp-accent);\n  border-radius: 50%;\n  animation: sp-spin 0.8s linear infinite;\n}\n\n@keyframes sp-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.sp-state-panel {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  background: rgba(0, 0, 0, 0.55);\n  pointer-events: auto;\n}\n\n.sp-state-message {\n  font-size: 15px;\n  opacity: 0.95;\n}\n\n.sp-state-actions {\n  display: flex;\n  gap: 12px;\n}\n\n.sp-state-btn {\n  padding: 8px 22px;\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  border-radius: 18px;\n  background: transparent;\n  color: var(--sp-text);\n  font-size: 14px;\n  cursor: pointer;\n  transition: background 0.1s ease;\n}\n\n.sp-state-btn:hover {\n  background: rgba(255, 255, 255, 0.15);\n}\n\n.sp-state-btn-primary {\n  background: var(--sp-accent);\n  border-color: var(--sp-accent);\n}\n\n.sp-state-btn-primary:hover {\n  background: var(--sp-accent);\n  filter: brightness(1.1);\n}\n\n.sp-state-countdown {\n  font-size: 13px;\n  opacity: 0.85;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.sp-state-cancel {\n  border: none;\n  background: transparent;\n  color: var(--sp-accent);\n  cursor: pointer;\n  font-size: 13px;\n  padding: 2px 6px;\n}\n\n/* ---------- \u97F3\u91CF ---------- */\n.sp-volume {\n  display: flex;\n  align-items: center;\n}\n\n.sp-volume-slider {\n  width: 0;\n  overflow: hidden;\n  transition: width 0.15s ease;\n  display: flex;\n  align-items: center;\n}\n\n.sp-volume:hover .sp-volume-slider,\n.sp-volume.sp-dragging .sp-volume-slider {\n  width: 64px;\n}\n\n.sp-volume-track {\n  position: relative;\n  width: 56px;\n  height: var(--sp-bar-height);\n  margin: 0 4px;\n  background: rgba(255, 255, 255, 0.25);\n  border-radius: 2px;\n  cursor: pointer;\n}\n\n.sp-volume-fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: var(--sp-text);\n  border-radius: 2px;\n}\n\n.sp-volume-thumb {\n  position: absolute;\n  top: 50%;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: var(--sp-text);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n";
+
+// src/player.ts
+var DEFAULT_RATES = [0.5, 1, 1.5, 2];
+var DEFAULT_RATIOS = ["original", "21:9", "16:9", "4:3"];
+var DEFAULT_LONG_SEEK_STEPS = [10, 30, 60];
+var DEFAULT_STEP_UP_INTERVAL = 2e3;
+var DEFAULT_AUTO_NEXT_SECONDS = 5;
+var CONTROLS_HIDE_DELAY = 3e3;
+var TITLE_CLICK_COUNT = 10;
+var TITLE_CLICK_WINDOW = 1500;
+var SINGLE_CLICK_DELAY = 250;
+var PROGRESS_SAVE_INTERVAL = 5e3;
+var PROGRESS_END_GUARD = 10;
+var SweetPlayer = class {
+  constructor(options) {
+    this.emitter = new EventEmitter();
+    this.hideTimer = null;
+    this.clickTimer = null;
+    this.progressTimer = null;
+    this.titleClicks = 0;
+    this.lastTitleClick = 0;
+    this.currentRatio = "original";
+    /** 画质/音轨菜单当前是否由 hls.js 自动接管（业务 setQualities 会关闭） */
+    this.hlsManagedQuality = false;
+    this.hlsManagedAudio = false;
+    this.disposers = [];
+    this.pluginCleanups = [];
+    this.destroyed = false;
+    this.options = options;
+    this.i18n = new I18n(options.locale, options.localeStrings);
+    const target = typeof options.container === "string" ? document.querySelector(options.container) : options.container;
+    if (!target) throw new Error(`[sweet-player] container not found: ${options.container}`);
+    injectStyle(player_default);
+    this.container = createEl("div", {
+      className: "sweet-player",
+      attrs: { tabindex: "0", "data-ratio": "original" },
+      parent: target
+    });
+    this.video = createEl("video", {
+      className: "sp-video",
+      attrs: { playsinline: "" },
+      parent: this.container
+    });
+    const persist = options.persist !== false;
+    const prefs = persist ? loadPrefs() : {};
+    this.video.volume = clamp(prefs.volume ?? options.volume ?? 100, 0, 100) / 100;
+    this.video.muted = prefs.muted ?? options.muted ?? false;
+    if (options.autoplay) this.video.autoplay = true;
+    const autoQuality = options.autoQuality !== false;
+    this.media = new MediaController(this.video, this.emitter, options.hlsConfig, {
+      onLevels: autoQuality && !options.qualities?.length ? (levels) => this.applyHlsLevels(levels) : void 0,
+      onAudioTracks: autoQuality && !options.audioTracks?.length ? (tracks) => this.applyHlsAudioTracks(tracks) : void 0
+    });
+    this.osd = createOsd();
+    this.stats = createStatsOverlay(this.container, this.video, this.media, this.i18n);
+    this.state = createStateOverlay(this.i18n);
+    this.controls = createControls({
+      video: this.video,
+      title: options.title ?? "",
+      i18n: this.i18n,
+      playbackRates: options.playbackRates ?? DEFAULT_RATES,
+      aspectRatios: options.aspectRatios ?? DEFAULT_RATIOS,
+      seekStep: options.seekStep ?? 10,
+      actions: {
+        togglePlay: () => this.toggle(),
+        seekBy: (d) => this.seekBy(d),
+        setRate: (r) => this.setRate(r),
+        setVolume: (v) => this.setVolume(v),
+        toggleMute: () => this.setMuted(!this.video.muted),
+        setAspectRatio: (r) => this.setAspectRatio(r),
+        toggleFullscreen: () => this.toggleFullscreen(),
+        togglePip: () => this.togglePip(),
+        selectQuality: (q) => this.handleQualitySelect(q),
+        selectAudioTrack: (t) => this.handleAudioTrackSelect(t),
+        onPrev: options.onPrev,
+        onNext: options.onNext,
+        onTitleClick: () => this.handleTitleClick()
+      }
+    });
+    this.container.appendChild(this.controls.topEl);
+    this.container.appendChild(this.controls.bottomEl);
+    this.container.appendChild(this.state.el);
+    this.container.appendChild(this.osd.el);
+    if (options.qualities?.length) this.setQualities(options.qualities);
+    if (options.audioTracks?.length) this.setAudioTracks(options.audioTracks);
+    const seekStep = options.seekStep ?? 10;
+    this.keyboard = new KeyboardController(
+      this.container,
+      {
+        togglePlay: () => this.toggle(),
+        seekBy: (d) => this.seekBy(d),
+        onLongSeekProgress: (acc) => this.osd.show(`${acc > 0 ? "+" : ""}${acc} ${this.i18n.t("seconds")}`),
+        onLongSeekCommit: (acc) => {
+          this.osd.hide();
+          if (acc !== 0) this.seekBy(acc, false);
+        },
+        adjustVolume: (d) => this.setVolume(Math.round(this.video.volume * 100) + d),
+        toggleFullscreen: () => this.toggleFullscreen(),
+        toggleMute: () => this.setMuted(!this.video.muted)
+      },
+      {
+        seekStep,
+        longSeekSteps: options.longSeek?.steps ?? DEFAULT_LONG_SEEK_STEPS,
+        stepUpInterval: options.longSeek?.stepUpInterval ?? DEFAULT_STEP_UP_INTERVAL
+      }
+    );
+    this.gestures = new GestureController(
+      this.container,
+      this.video,
+      {
+        seekBy: (d) => this.seekBy(d),
+        onSeekPreview: (d) => this.osd.show(
+          `${d > 0 ? "+" : ""}${d} ${this.i18n.t("seconds")} (${formatTime(
+            clamp(this.video.currentTime + d, 0, this.video.duration || 0)
+          )})`
+        ),
+        onSeekCommit: (d) => {
+          this.osd.hide();
+          if (d !== 0) this.seekBy(d, false);
+        },
+        adjustVolume: (d) => this.setVolume(Math.round(this.video.volume * 100) + d),
+        toggleControls: () => {
+          this.container.classList.contains("sp-controls-hidden") ? this.scheduleHide() : this.hideControlsNow();
+        },
+        toggleFullscreen: () => this.toggleFullscreen()
+      },
+      seekStep
+    );
+    this.bindMediaEvents();
+    this.bindActivityTracking();
+    this.disposers.push(
+      onFullscreenChange(this.container, (fs) => {
+        this.controls.updateFullscreen(fs);
+        this.emitter.emit("fullscreenchange", fs);
+      })
+    );
+    if (persist && prefs.rate) {
+      this.video.defaultPlaybackRate = prefs.rate;
+      this.video.playbackRate = prefs.rate;
+    }
+    this.media.load(options.src);
+    this.controls.volume.update(Math.round(this.video.volume * 100), this.video.muted);
+    this.controls.updateRate(this.video.playbackRate);
+    if (persist) this.bindPersistence();
+    if (options.id) this.bindProgressMemory(options.id);
+    options.plugins?.forEach((p) => this.use(p));
+  }
+  // ---------- 公开 API ----------
+  play() {
+    return this.video.play();
+  }
+  pause() {
+    this.video.pause();
+  }
+  toggle() {
+    this.video.paused ? void this.play().catch(() => {
+    }) : this.pause();
+  }
+  seek(time) {
+    this.video.currentTime = clamp(time, 0, this.video.duration || 0);
+  }
+  /** 相对跳转；showOsd 为 false 时不显示中央提示 */
+  seekBy(delta, showOsd = true) {
+    this.seek(this.video.currentTime + delta);
+    if (showOsd) this.osd.flash(`${delta > 0 ? "+" : ""}${delta} ${this.i18n.t("seconds")}`);
+  }
+  setRate(rate) {
+    this.video.playbackRate = rate;
+  }
+  /** 0-100 */
+  setVolume(volume) {
+    const v = clamp(volume, 0, 100);
+    this.video.volume = v / 100;
+    if (v > 0) this.video.muted = false;
+    this.osd.flash(`${this.i18n.t("volume")} ${v}%`);
+  }
+  setMuted(muted) {
+    this.video.muted = muted;
+    this.osd.flash(muted ? this.i18n.t("muted") : `${this.i18n.t("volume")} ${Math.round(this.video.volume * 100)}%`);
+  }
+  setAspectRatio(ratio) {
+    this.currentRatio = ratio;
+    this.container.setAttribute("data-ratio", ratio);
+    if (ratio !== "original") {
+      this.container.style.setProperty("--sp-forced-ratio", ratio.replace(":", " / "));
+    }
+    this.controls.updateRatio(ratio);
+    this.emitter.emit("aspectratiochange", ratio);
+  }
+  get aspectRatio() {
+    return this.currentRatio;
+  }
+  /** 运行时更新画质列表 */
+  setQualities(qualities, active) {
+    this.hlsManagedQuality = false;
+    this.controls.qualityMenu.setItems(qualities.map((q) => ({ label: q.label, value: q })));
+    if (active) this.controls.qualityMenu.setActive(active);
+  }
+  /** 运行时更新音轨列表 */
+  setAudioTracks(tracks, active) {
+    this.hlsManagedAudio = false;
+    this.controls.audioMenu.setItems(tracks.map((t) => ({ label: t.label, value: t })));
+    if (active) this.controls.audioMenu.setActive(active);
+  }
+  async toggleFullscreen() {
+    await toggleFullscreen(this.container).catch(() => {
+    });
+  }
+  get fullscreen() {
+    return isFullscreen(this.container);
+  }
+  async togglePip() {
+    try {
+      if (document.pictureInPictureElement === this.video) {
+        await document.exitPictureInPicture();
+      } else {
+        await this.video.requestPictureInPicture();
+      }
+    } catch {
+    }
+  }
+  load(src) {
+    this.state.hideEnded();
+    this.state.hideError();
+    this.media.load(src);
+  }
+  setTitle(title) {
+    const el = this.controls.topEl.querySelector(".sp-title");
+    if (el) el.textContent = title;
+  }
+  /** 安装插件；返回本次插件的卸载函数 */
+  use(plugin) {
+    const cleanup = plugin.apply(this);
+    const dispose = typeof cleanup === "function" ? cleanup : () => {
+    };
+    this.pluginCleanups.push(dispose);
+    return dispose;
+  }
+  on(event, fn) {
+    return this.emitter.on(event, fn);
+  }
+  off(event, fn) {
+    this.emitter.off(event, fn);
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.saveProgressNow();
+    this.emitter.emit("destroy", void 0);
+    this.pluginCleanups.forEach((d) => d());
+    this.keyboard.destroy();
+    this.gestures.destroy();
+    this.stats.destroy();
+    this.state.destroy();
+    this.controls.destroy();
+    this.disposers.forEach((d) => d());
+    if (this.hideTimer) clearTimeout(this.hideTimer);
+    if (this.clickTimer) clearTimeout(this.clickTimer);
+    if (this.progressTimer) clearInterval(this.progressTimer);
+    this.media.destroy();
+    this.emitter.removeAll();
+    this.container.remove();
+  }
+  // ---------- 内部：hls 自动画质/音轨 ----------
+  applyHlsLevels(levels) {
+    const auto = { label: this.i18n.t("qualityAuto"), value: -1 };
+    const items = [auto, ...levels.map((l) => ({ label: l.label, value: l.index }))];
+    this.setQualities(items, auto);
+    this.hlsManagedQuality = true;
+  }
+  applyHlsAudioTracks(tracks) {
+    const items = tracks.map((t) => ({ label: t.label, value: t.index }));
+    this.setAudioTracks(items, items[0]);
+    this.hlsManagedAudio = true;
+  }
+  handleQualitySelect(quality) {
+    this.controls.qualityMenu.setActive(quality);
+    if (this.hlsManagedQuality && typeof quality.value === "number") {
+      this.media.setLevel(quality.value);
+    } else if (quality.src) {
+      const time = this.video.currentTime;
+      this.media.load(quality.src);
+      this.video.currentTime = time;
+    }
+    this.options.onQualityChange?.(quality);
+    this.emitter.emit("qualitychange", quality);
+  }
+  handleAudioTrackSelect(track) {
+    this.controls.audioMenu.setActive(track);
+    if (this.hlsManagedAudio && typeof track.value === "number") {
+      this.media.setAudioTrack(track.value);
+    }
+    this.options.onAudioTrackChange?.(track);
+    this.emitter.emit("audiotrackchange", track);
+  }
+  // ---------- 内部：持久化 ----------
+  bindPersistence() {
+    const onVolume = () => savePrefs({ volume: Math.round(this.video.volume * 100), muted: this.video.muted });
+    const onRate = () => savePrefs({ rate: this.video.playbackRate });
+    this.video.addEventListener("volumechange", onVolume);
+    this.video.addEventListener("ratechange", onRate);
+    this.disposers.push(() => {
+      this.video.removeEventListener("volumechange", onVolume);
+      this.video.removeEventListener("ratechange", onRate);
+    });
+  }
+  bindProgressMemory(id) {
+    const restore = () => {
+      const saved = loadProgress(id);
+      if (saved !== null && saved > 3 && saved < this.video.duration - PROGRESS_END_GUARD) {
+        this.video.currentTime = saved;
+      }
+    };
+    this.video.addEventListener("loadedmetadata", restore, { once: true });
+    this.progressTimer = setInterval(() => {
+      if (!this.video.paused) this.saveProgressNow();
+    }, PROGRESS_SAVE_INTERVAL);
+  }
+  saveProgressNow() {
+    const id = this.options.id;
+    if (!id || !this.video.duration) return;
+    if (this.video.currentTime >= this.video.duration - PROGRESS_END_GUARD) {
+      clearProgress(id);
+    } else if (this.video.currentTime > 3) {
+      saveProgress(id, this.video.currentTime);
+    }
+  }
+  // ---------- 内部：交互 ----------
+  handleTitleClick() {
+    const now = Date.now();
+    this.titleClicks = now - this.lastTitleClick <= TITLE_CLICK_WINDOW ? this.titleClicks + 1 : 1;
+    this.lastTitleClick = now;
+    if (this.titleClicks >= TITLE_CLICK_COUNT) {
+      this.titleClicks = 0;
+      this.stats.toggle();
+    }
+  }
+  bindMediaEvents() {
+    const v = this.video;
+    const listen = (event, fn) => {
+      v.addEventListener(event, fn);
+      this.disposers.push(() => v.removeEventListener(event, fn));
+    };
+    listen("loadedmetadata", () => {
+      this.controls.updateTime();
+      this.emitter.emit("ready", void 0);
+    });
+    listen("play", () => {
+      this.state.hideEnded();
+      this.controls.updatePlayState(true);
+      this.scheduleHide();
+      this.emitter.emit("play", void 0);
+    });
+    listen("pause", () => {
+      this.controls.updatePlayState(false);
+      this.showControls();
+      this.emitter.emit("pause", void 0);
+    });
+    listen("ended", () => {
+      this.saveProgressNow();
+      this.showControls();
+      const onNext = this.options.onNext;
+      const autoNext = this.options.autoNext;
+      this.state.showEnded({
+        onReplay: () => {
+          this.seek(0);
+          void this.play().catch(() => {
+          });
+        },
+        onNext,
+        autoNextSeconds: onNext && autoNext ? typeof autoNext === "number" ? autoNext : DEFAULT_AUTO_NEXT_SECONDS : void 0
+      });
+      this.emitter.emit("ended", void 0);
+    });
+    listen("timeupdate", () => {
+      this.controls.updateTime();
+      this.emitter.emit("timeupdate", { currentTime: v.currentTime, duration: v.duration });
+    });
+    listen("progress", () => this.controls.progress.update());
+    listen("ratechange", () => {
+      this.controls.updateRate(v.playbackRate);
+      this.emitter.emit("ratechange", v.playbackRate);
+    });
+    listen("volumechange", () => {
+      const volume = Math.round(v.volume * 100);
+      this.controls.volume.update(volume, v.muted);
+      this.emitter.emit("volumechange", { volume, muted: v.muted });
+    });
+    listen("waiting", () => this.state.showLoading());
+    listen("stalled", () => this.state.showLoading());
+    listen("seeking", () => this.state.showLoading());
+    listen("canplay", () => this.state.hideLoading());
+    listen("playing", () => {
+      this.state.hideLoading();
+      this.state.hideError();
+    });
+    listen("seeked", () => this.state.hideLoading());
+    listen("error", () => this.showErrorState({ type: "media", detail: v.error }));
+    this.disposers.push(
+      this.emitter.on("error", (payload) => {
+        if (payload.type.startsWith("hls-")) this.showErrorStateUi();
+      })
+    );
+    listen("enterpictureinpicture", () => this.emitter.emit("pipchange", true));
+    listen("leavepictureinpicture", () => this.emitter.emit("pipchange", false));
+    const onVideoClick = (e) => {
+      if (e.target !== this.video || e.pointerType === "touch") return;
+      if (this.clickTimer) return;
+      this.clickTimer = setTimeout(() => {
+        this.clickTimer = null;
+        this.toggle();
+      }, SINGLE_CLICK_DELAY);
+    };
+    const onVideoDblClick = (e) => {
+      if (e.target !== this.video) return;
+      if (this.clickTimer) {
+        clearTimeout(this.clickTimer);
+        this.clickTimer = null;
+      }
+      void this.toggleFullscreen();
+    };
+    this.container.addEventListener("click", onVideoClick);
+    this.container.addEventListener("dblclick", onVideoDblClick);
+    this.disposers.push(() => {
+      this.container.removeEventListener("click", onVideoClick);
+      this.container.removeEventListener("dblclick", onVideoDblClick);
+    });
+  }
+  showErrorState(payload) {
+    this.emitter.emit("error", payload);
+    this.showErrorStateUi();
+  }
+  showErrorStateUi() {
+    this.state.hideLoading();
+    this.state.showError(() => {
+      const time = this.video.currentTime;
+      this.media.reload();
+      if (time > 0) this.video.currentTime = time;
+      void this.play().catch(() => {
+      });
+    });
+  }
+  // ---------- 控制栏自动隐藏 ----------
+  showControls() {
+    this.container.classList.remove("sp-controls-hidden");
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+  }
+  hideControlsNow() {
+    if (!this.video.paused) this.container.classList.add("sp-controls-hidden");
+  }
+  scheduleHide() {
+    this.showControls();
+    this.hideTimer = setTimeout(() => this.hideControlsNow(), CONTROLS_HIDE_DELAY);
+  }
+  bindActivityTracking() {
+    const onActivity = (e) => {
+      if (e.pointerType === "touch") return;
+      if (this.video.paused) this.showControls();
+      else this.scheduleHide();
+    };
+    this.container.addEventListener("pointermove", onActivity);
+    this.container.addEventListener("pointerdown", onActivity);
+    this.disposers.push(() => {
+      this.container.removeEventListener("pointermove", onActivity);
+      this.container.removeEventListener("pointerdown", onActivity);
+    });
+  }
+};
+export {
+  SweetPlayer,
+  registerLocale
+};