@miraiclip/player 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 comaniacs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,15 @@
-# Temporary Holding Version
+# @miraiclip/player
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+`<miraiclip-player>`: a framework-free web component that plays a rendered video file or a live [Miraiclip](https://docs.miraiclip.com/) project, with a scrubber, chapters and keyboard control.
+
+```html
+<script type="module">import "@miraiclip/player/define";</script>
+
+<!-- a rendered file, chapters from a WebVTT (or JSON) file -->
+<miraiclip-player src="launch.mp4" chapters="launch.chapters.vtt" controls></miraiclip-player>
+
+<!-- a live document: chapters come from its markers -->
+<miraiclip-player document="video.miraiclip.json" controls></miraiclip-player>
+```
+
+Live documents need `@miraiclip/core` and `@miraiclip/renderer` installed (loaded on demand; file playback needs neither). Docs: https://docs.miraiclip.com/

package/dist/chunk-TMHYBF54.js

@@ -0,0 +1,572 @@
+// src/chapters.ts
+function chaptersFromMarkers(markers, durationS) {
+  const list = Object.values(markers ?? {}).sort((a, b) => a.timeUs - b.timeUs || a.id.localeCompare(b.id));
+  return list.map((m, i) => {
+    const start = m.timeUs / 1e6;
+    const next = list[i + 1];
+    const end = m.durationUs !== void 0 ? (m.timeUs + m.durationUs) / 1e6 : next ? next.timeUs / 1e6 : Math.max(durationS, start);
+    return { id: m.id, label: m.label, start, end };
+  });
+}
+function parseVttChapters(vtt) {
+  const chapters = [];
+  const blocks = vtt.replace(/\r/g, "").split(/\n{2,}/);
+  const time = (t) => {
+    const parts = t.trim().split(":").map(Number);
+    let s = 0;
+    for (const p of parts) s = s * 60 + p;
+    return s;
+  };
+  for (const block of blocks) {
+    const lines = block.split("\n").filter((l) => l.trim() !== "");
+    const at = lines.findIndex((l) => l.includes("-->"));
+    if (at < 0) continue;
+    const [from, to] = lines[at].split("-->").map((s) => s.trim().split(/\s+/)[0]);
+    const label = lines.slice(at + 1).join(" ").trim();
+    if (!label) continue;
+    chapters.push({ id: at > 0 ? lines[0].trim() : `c${chapters.length + 1}`, label, start: time(from), end: time(to) });
+  }
+  return chapters.sort((a, b) => a.start - b.start);
+}
+function normalizeChapters(input, durationS) {
+  if (!Array.isArray(input)) return [];
+  const raw = input.map((c, i) => {
+    const o = c;
+    const label = String(o["label"] ?? o["title"] ?? "");
+    const start = typeof o["start"] === "number" ? o["start"] : typeof o["timeUs"] === "number" ? o["timeUs"] / 1e6 : NaN;
+    const end = typeof o["end"] === "number" ? o["end"] : typeof o["durationUs"] === "number" && typeof o["timeUs"] === "number" ? (o["timeUs"] + o["durationUs"]) / 1e6 : void 0;
+    return { id: String(o["id"] ?? `c${i + 1}`), label, start, end };
+  }).filter((c) => c.label && Number.isFinite(c.start)).sort((a, b) => a.start - b.start);
+  return raw.map((c, i) => ({ id: c.id, label: c.label, start: c.start, end: c.end ?? raw[i + 1]?.start ?? Math.max(durationS, c.start) }));
+}
+function chapterAt(chapters, timeS, toleranceS = 0.05) {
+  let found;
+  for (const c of chapters) if (c.start <= timeS + toleranceS && timeS < c.end) found = c;
+  return found;
+}
+function formatTime(seconds) {
+  const s = Math.max(0, Math.floor(seconds + 1e-6));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const ss = String(s % 60).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+}
+
+// src/engines.ts
+function createVideoEngine(src, options) {
+  const video = document.createElement("video");
+  video.src = src;
+  video.preload = "metadata";
+  video.playsInline = true;
+  video.loop = options.loop;
+  video.muted = options.muted;
+  if (options.poster) video.poster = options.poster;
+  video.setAttribute("part", "media");
+  const change = [];
+  const ended = [];
+  const errors = [];
+  const emit = () => change.forEach((l) => l());
+  for (const type of ["timeupdate", "play", "pause", "durationchange", "loadedmetadata", "seeked"]) video.addEventListener(type, emit);
+  video.addEventListener("ended", () => ended.forEach((l) => l()));
+  video.addEventListener("error", () => errors.forEach((l) => l(video.error?.message || "the video could not be played")));
+  return {
+    element: video,
+    play: () => void video.play()?.catch?.((e) => errors.forEach((l) => l(e.message))),
+    pause: () => video.pause(),
+    seek: (s) => {
+      video.currentTime = Math.max(0, s);
+      emit();
+    },
+    state: () => ({ playing: !video.paused && !video.ended, timeS: video.currentTime || 0, durationS: Number.isFinite(video.duration) ? video.duration : 0 }),
+    setMuted: (m) => {
+      video.muted = m;
+    },
+    onChange: (l) => change.push(l),
+    onEnded: (l) => ended.push(l),
+    onError: (l) => errors.push(l),
+    resize: () => void 0,
+    destroy: () => {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+    }
+  };
+}
+function resolveAssetSources(doc, base) {
+  if (!base) return doc;
+  const copy = JSON.parse(JSON.stringify(doc));
+  for (const asset of Object.values(copy.assets)) {
+    if (/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i.test(asset.src)) continue;
+    try {
+      asset.src = new URL(asset.src, base).href;
+    } catch {
+    }
+  }
+  return copy;
+}
+var modules;
+function loadLiveModules() {
+  modules ??= Promise.all([import("@miraiclip/core"), import("@miraiclip/renderer")]).then(([core, renderer]) => ({ core, renderer }));
+  return modules;
+}
+async function createDocumentEngine(doc, options) {
+  const { core, renderer } = await loadLiveModules();
+  if (options.loadPlugins && doc.plugins?.length) await renderer.loadDocumentPlugins(doc);
+  const project = core.createProject(doc);
+  const controller = renderer.createPreviewController(project, { player: { loop: options.loop } });
+  if (options.muted) controller.toggleMute();
+  const canvas = document.createElement("canvas");
+  canvas.setAttribute("part", "media");
+  const change = [];
+  const ended = [];
+  const errors = [];
+  let durationUs = 0;
+  for (const clip of Object.values(doc.clips)) durationUs = Math.max(durationUs, clip.startUs + clip.durationUs);
+  let wasPlaying = false;
+  const emit = () => {
+    const playing = controller.getState().playing;
+    if (wasPlaying && !playing && project.getState().playheadUs >= durationUs - 1) ended.forEach((l) => l());
+    wasPlaying = playing;
+    change.forEach((l) => l());
+  };
+  controller.subscribe(() => {
+    const error = controller.getState().lastError;
+    if (error) errors.forEach((l) => l(error));
+    emit();
+  });
+  const offPlayhead = project.events.on("playhead", emit);
+  let attached = false;
+  return {
+    element: canvas,
+    play: () => controller.play(),
+    pause: () => controller.pause(),
+    seek: (s) => controller.seek(Math.round(Math.max(0, s) * 1e6)),
+    state: () => ({ playing: controller.getState().playing, timeS: project.getState().playheadUs / 1e6, durationS: durationUs / 1e6 }),
+    setMuted: (m) => {
+      if (controller.getState().muted !== m) controller.toggleMute();
+    },
+    onChange: (l) => change.push(l),
+    onEnded: (l) => ended.push(l),
+    onError: (l) => errors.push(l),
+    resize: (width, height) => {
+      if (width <= 0 || height <= 0) return;
+      if (!attached) {
+        controller.attach(canvas, { width, height });
+        attached = true;
+      } else controller.resize(width, height);
+    },
+    destroy: () => {
+      offPlayhead();
+      controller.destroy();
+    }
+  };
+}
+
+// src/element.ts
+var STYLE = `
+:host{display:block;position:relative;--mc-accent:#22d3ee;--mc-bg:#000;--mc-fg:#fff;--mc-radius:12px;--mc-font:Inter,system-ui,sans-serif;color:var(--mc-fg);font-family:var(--mc-font)}
+:host([hidden]){display:none}
+.frame{position:relative;width:100%;aspect-ratio:var(--mc-aspect,16/9);background:var(--mc-bg);border-radius:var(--mc-radius);overflow:hidden;outline:none}
+.stage,.stage>*{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
+.big{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;border:0;background:#000a;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
+.big svg{width:34px;height:34px;margin-left:4px}
+:host([data-playing]) .big,:host(:not([data-ready])) .big{display:none}
+.bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:28px 12px 10px;background:linear-gradient(transparent,#000c);opacity:0;transition:opacity .2s}
+:host([controls]) .frame:hover .bar,:host([controls]) .frame:focus-within .bar,:host([controls]:not([data-playing])) .bar{opacity:1}
+:host(:not([controls])) .bar{display:none}
+button.icon{background:none;border:0;color:inherit;width:34px;height:34px;padding:5px;cursor:pointer;border-radius:8px;flex:none}
+button.icon:hover,button.icon:focus-visible{background:#ffffff22;outline:none}
+button svg{width:100%;height:100%;fill:currentColor}
+.time{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.9}
+.scrub{position:relative;flex:1;height:22px;cursor:pointer;outline:none;touch-action:none}
+.rail{position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;background:#ffffff40}
+.fill{position:absolute;left:0;top:9px;height:4px;border-radius:2px;background:var(--mc-accent);width:0}
+.tick{position:absolute;top:7px;width:2px;height:8px;background:#fff;opacity:.85;border-radius:1px}
+.thumb{position:absolute;top:4px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0008;left:0}
+.scrub:focus-visible .thumb{outline:2px solid var(--mc-accent);outline-offset:2px}
+.label{font-size:13px;max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.9}
+.menu{position:absolute;right:10px;bottom:56px;max-height:60%;overflow:auto;margin:0;padding:6px;list-style:none;border-radius:10px;background:#111827f2;box-shadow:0 10px 30px #0009;min-width:200px}
+.menu[hidden]{display:none}
+.menu button{display:flex;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:6px;background:none;color:inherit;font:inherit;font-size:14px;text-align:left;cursor:pointer}
+.menu button:hover,.menu button:focus-visible{background:#ffffff1f;outline:none}
+.menu button[aria-current="true"]{color:var(--mc-accent)}
+.menu .t{opacity:.7;font-variant-numeric:tabular-nums}
+.error{position:absolute;left:12px;right:12px;top:12px;padding:8px 12px;border-radius:8px;background:#7f1d1dee;font-size:13px}
+.error[hidden]{display:none}
+`;
+var ICON = {
+  play: '<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>',
+  pause: '<svg viewBox="0 0 24 24"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>',
+  chapters: '<svg viewBox="0 0 24 24"><path d="M4 6h2v2H4zm4 0h12v2H8zM4 11h2v2H4zm4 0h12v2H8zm-4 5h2v2H4zm4 0h12v2H8z"/></svg>',
+  sound: '<svg viewBox="0 0 24 24"><path d="M4 9v6h4l5 4V5L8 9zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z"/></svg>',
+  muted: '<svg viewBox="0 0 24 24"><path d="M4 9v6h4l5 4V5L8 9zm16.6 0L19 7.4 16.4 10 13.8 7.4 12.4 9l2.6 2.6-2.6 2.6 1.4 1.4 2.6-2.6 2.6 2.6 1.6-1.6-2.6-2.6z"/></svg>'
+};
+var BaseElement = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+var MiraiclipPlayerElement = class extends BaseElement {
+  static get observedAttributes() {
+    return ["src", "document", "chapters", "poster", "loop", "muted", "assets-base"];
+  }
+  root;
+  engine;
+  loadToken = 0;
+  docValue;
+  chapterList = [];
+  explicitChapters;
+  currentChapter;
+  resizeObserver;
+  dragging = false;
+  els;
+  constructor() {
+    super();
+    this.root = this.attachShadow({ mode: "open" });
+    this.root.innerHTML = `<style>${STYLE}</style>
+<div class="frame" part="frame" tabindex="0">
+  <div class="stage" part="stage"></div>
+  <button class="big" part="big-play" aria-label="Play">${ICON.play}</button>
+  <div class="bar" part="controls">
+    <button class="icon play" aria-label="Play">${ICON.play}</button>
+    <span class="time" part="time">0:00 / 0:00</span>
+    <div class="scrub" part="scrubber" role="slider" tabindex="0" aria-label="Seek" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0">
+      <div class="rail"></div><div class="fill"></div><div class="ticks"></div><div class="thumb"></div>
+    </div>
+    <span class="label" part="chapter-label"></span>
+    <button class="icon chapters" aria-label="Chapters" aria-haspopup="true" aria-expanded="false" hidden>${ICON.chapters}</button>
+    <button class="icon mute" aria-label="Mute">${ICON.sound}</button>
+  </div>
+  <ol class="menu" part="chapters" hidden></ol>
+  <div class="error" part="error" role="alert" hidden></div>
+</div>`;
+    const $ = (sel) => this.root.querySelector(sel);
+    this.els = {
+      frame: $(".frame"),
+      stage: $(".stage"),
+      big: $(".big"),
+      play: $(".play"),
+      time: $(".time"),
+      scrub: $(".scrub"),
+      fill: $(".fill"),
+      thumb: $(".thumb"),
+      ticks: $(".ticks"),
+      label: $(".label"),
+      chaptersBtn: $(".chapters"),
+      menu: $(".menu"),
+      mute: $(".mute"),
+      error: $(".error")
+    };
+    this.wire();
+  }
+  // ------------------------------------------------------------------ API
+  /** A project document to play live (takes precedence over `document`/`src` attributes). */
+  get document() {
+    return this.docValue;
+  }
+  set document(doc) {
+    this.docValue = doc;
+    void this.load();
+  }
+  /** Chapters in seconds. Set to override markers / the `chapters` attribute. */
+  get chapters() {
+    return [...this.chapterList];
+  }
+  set chapters(value) {
+    this.explicitChapters = value ? normalizeChapters(value, this.duration) : void 0;
+    this.refreshChapters();
+  }
+  get currentTime() {
+    return this.engine?.state().timeS ?? 0;
+  }
+  set currentTime(seconds) {
+    this.seek(seconds);
+  }
+  get duration() {
+    return this.engine?.state().durationS ?? 0;
+  }
+  get paused() {
+    return !(this.engine?.state().playing ?? false);
+  }
+  get currentChapterInfo() {
+    return this.currentChapter;
+  }
+  play() {
+    this.engine?.play();
+  }
+  pause() {
+    this.engine?.pause();
+  }
+  toggle() {
+    if (this.paused) this.play();
+    else this.pause();
+  }
+  seek(seconds) {
+    this.engine?.seek(Math.min(Math.max(0, seconds), this.duration || seconds));
+    this.render();
+  }
+  /** Jump to a chapter by id or index. */
+  goToChapter(which) {
+    const chapter = typeof which === "number" ? this.chapterList[which] : this.chapterList.find((c) => c.id === which);
+    if (chapter) this.seek(chapter.start);
+  }
+  // ------------------------------------------------------------------ lifecycle
+  connectedCallback() {
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => this.sizeEngine());
+      this.resizeObserver.observe(this.els.frame);
+    }
+    if (!this.engine) void this.load();
+  }
+  disconnectedCallback() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = void 0;
+    this.engine?.destroy();
+    this.engine = void 0;
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.isConnected) return;
+    if (name === "src" || name === "document" || name === "assets-base") void this.load();
+    else if (name === "chapters") void this.loadChapterAttribute();
+    else if (name === "muted") this.engine?.setMuted(next !== null);
+  }
+  // ------------------------------------------------------------------ loading
+  async load() {
+    const token = ++this.loadToken;
+    this.engine?.destroy();
+    this.engine = void 0;
+    this.removeAttribute("data-ready");
+    this.showError(null);
+    this.els.stage.replaceChildren();
+    const loop = this.hasAttribute("loop");
+    const muted = this.hasAttribute("muted");
+    try {
+      let engine;
+      let doc = this.docValue;
+      const docUrl = this.getAttribute("document");
+      if (!doc && docUrl) {
+        const response = await fetch(docUrl);
+        if (!response.ok) throw new Error(`could not load ${docUrl} (HTTP ${response.status})`);
+        doc = await response.json();
+        if (token !== this.loadToken) return;
+      }
+      if (doc) {
+        const base = this.getAttribute("assets-base") ?? (docUrl ? new URL(docUrl, location.href).href : void 0);
+        const resolved = resolveAssetSources(doc, base);
+        this.style.setProperty("--mc-aspect", `${resolved.settings.width}/${resolved.settings.height}`);
+        engine = await createDocumentEngine(resolved, { loop, muted, loadPlugins: this.hasAttribute("plugins") });
+        this.docChapters = (durationS) => chaptersFromMarkers(resolved.markers, durationS);
+      } else {
+        const src = this.getAttribute("src");
+        if (!src) return;
+        const poster = this.getAttribute("poster");
+        engine = createVideoEngine(src, { loop, muted, ...poster ? { poster } : {} });
+        this.docChapters = void 0;
+        const video = engine.element;
+        video.addEventListener("loadedmetadata", () => {
+          if (video.videoWidth && video.videoHeight) this.style.setProperty("--mc-aspect", `${video.videoWidth}/${video.videoHeight}`);
+          this.refreshChapters();
+        });
+      }
+      if (token !== this.loadToken) {
+        engine.destroy();
+        return;
+      }
+      this.engine = engine;
+      this.els.stage.append(engine.element);
+      let wasPlaying = false;
+      engine.onChange(() => {
+        const playing = engine.state().playing;
+        if (playing !== wasPlaying) {
+          wasPlaying = playing;
+          this.toggleAttribute("data-playing", playing);
+          this.dispatch(playing ? "play" : "pause");
+        }
+        this.render();
+        this.dispatch("timeupdate");
+      });
+      engine.onEnded(() => this.dispatch("ended"));
+      engine.onError((message) => {
+        this.showError(message);
+        this.dispatch("error", { message });
+      });
+      this.sizeEngine();
+      await this.loadChapterAttribute();
+      this.refreshChapters();
+      this.setAttribute("data-ready", "");
+      this.render();
+      this.dispatch("ready");
+      if (this.hasAttribute("autoplay")) engine.play();
+    } catch (error) {
+      if (token !== this.loadToken) return;
+      const message = error instanceof Error ? error.message : String(error);
+      this.showError(message);
+      this.dispatch("error", { message });
+    }
+  }
+  docChapters;
+  attributeChapters;
+  async loadChapterAttribute() {
+    const url = this.getAttribute("chapters");
+    if (!url) {
+      this.attributeChapters = void 0;
+      return;
+    }
+    try {
+      const response = await fetch(url);
+      const text = await response.text();
+      this.attributeChapters = text.trimStart().startsWith("WEBVTT") ? parseVttChapters(text) : normalizeChapters(JSON.parse(text), this.duration);
+    } catch {
+      this.attributeChapters = void 0;
+    }
+    this.refreshChapters();
+  }
+  refreshChapters() {
+    const duration = this.duration;
+    this.chapterList = this.explicitChapters ?? this.attributeChapters ?? this.docChapters?.(duration) ?? [];
+    const { ticks, menu, chaptersBtn } = this.els;
+    ticks.replaceChildren();
+    menu.replaceChildren();
+    chaptersBtn.hidden = this.chapterList.length === 0;
+    for (const [i, chapter] of this.chapterList.entries()) {
+      if (duration > 0 && chapter.start > 0) {
+        const tick = document.createElement("div");
+        tick.className = "tick";
+        tick.style.left = `${chapter.start / duration * 100}%`;
+        tick.title = chapter.label;
+        ticks.append(tick);
+      }
+      const li = document.createElement("li");
+      const button = document.createElement("button");
+      button.type = "button";
+      button.dataset["index"] = String(i);
+      button.innerHTML = `<span class="t"></span><span class="n"></span>`;
+      button.querySelector(".t").textContent = formatTime(chapter.start);
+      button.querySelector(".n").textContent = chapter.label;
+      li.append(button);
+      menu.append(li);
+    }
+    this.currentChapter = void 0;
+    this.render();
+  }
+  // ------------------------------------------------------------------ UI
+  wire() {
+    const { big, play, scrub, chaptersBtn, menu, mute, frame } = this.els;
+    big.addEventListener("click", () => this.play());
+    play.addEventListener("click", () => this.toggle());
+    this.els.stage.addEventListener("click", () => this.toggle());
+    mute.addEventListener("click", () => {
+      const muted = !this.hasAttribute("muted");
+      this.toggleAttribute("muted", muted);
+      this.engine?.setMuted(muted);
+      mute.innerHTML = muted ? ICON.muted : ICON.sound;
+      mute.setAttribute("aria-label", muted ? "Unmute" : "Mute");
+    });
+    chaptersBtn.addEventListener("click", () => {
+      const open = menu.hidden;
+      menu.hidden = !open;
+      chaptersBtn.setAttribute("aria-expanded", String(open));
+      if (open) (menu.querySelector('button[aria-current="true"]') ?? menu.querySelector("button"))?.focus();
+    });
+    menu.addEventListener("click", (event) => {
+      const button = event.target.closest("button");
+      if (!button) return;
+      this.goToChapter(Number(button.dataset["index"]));
+      menu.hidden = true;
+      chaptersBtn.setAttribute("aria-expanded", "false");
+    });
+    const seekFromPointer = (event) => {
+      const rect = scrub.getBoundingClientRect();
+      if (rect.width <= 0) return;
+      this.seek((event.clientX - rect.left) / rect.width * this.duration);
+    };
+    scrub.addEventListener("pointerdown", (event) => {
+      this.dragging = true;
+      scrub.setPointerCapture?.(event.pointerId);
+      seekFromPointer(event);
+    });
+    scrub.addEventListener("pointermove", (event) => {
+      if (this.dragging) seekFromPointer(event);
+    });
+    scrub.addEventListener("pointerup", () => {
+      this.dragging = false;
+    });
+    const keys = (event) => {
+      const step = event.shiftKey ? 10 : 5;
+      if (event.key === " " || event.key === "k") this.toggle();
+      else if (event.key === "ArrowRight" || event.key === "l") this.seek(this.currentTime + step);
+      else if (event.key === "ArrowLeft" || event.key === "j") this.seek(this.currentTime - step);
+      else if (event.key === "Home") this.seek(0);
+      else if (event.key === "End") this.seek(this.duration);
+      else if (event.key === "]") this.stepChapter(1);
+      else if (event.key === "[") this.stepChapter(-1);
+      else if (event.key === "Escape") menu.hidden = true;
+      else return;
+      event.preventDefault();
+    };
+    frame.addEventListener("keydown", keys);
+  }
+  stepChapter(direction) {
+    if (this.chapterList.length === 0) return;
+    const t = this.currentTime;
+    if (direction > 0) {
+      const next = this.chapterList.find((c) => c.start > t + 0.25);
+      if (next) this.seek(next.start);
+    } else {
+      const previous = [...this.chapterList].reverse().find((c) => c.start < t - 1);
+      this.seek(previous?.start ?? 0);
+    }
+  }
+  render() {
+    const state = this.engine?.state() ?? { playing: false, timeS: 0, durationS: 0 };
+    const { time, fill, thumb, scrub, play, label, menu } = this.els;
+    const fraction = state.durationS > 0 ? Math.min(1, state.timeS / state.durationS) : 0;
+    time.textContent = `${formatTime(state.timeS)} / ${formatTime(state.durationS)}`;
+    fill.style.width = `${fraction * 100}%`;
+    thumb.style.left = `${fraction * 100}%`;
+    scrub.setAttribute("aria-valuemax", String(Math.round(state.durationS)));
+    scrub.setAttribute("aria-valuenow", String(Math.round(state.timeS)));
+    scrub.setAttribute("aria-valuetext", time.textContent);
+    const wanted = state.playing ? "Pause" : "Play";
+    if (play.getAttribute("aria-label") !== wanted) {
+      play.innerHTML = state.playing ? ICON.pause : ICON.play;
+      play.setAttribute("aria-label", wanted);
+    }
+    const chapter = chapterAt(this.chapterList, state.timeS);
+    label.textContent = chapter?.label ?? "";
+    if (chapter?.id !== this.currentChapter?.id) {
+      this.currentChapter = chapter;
+      for (const button of Array.from(menu.querySelectorAll("button"))) {
+        button.setAttribute("aria-current", String(this.chapterList[Number(button.dataset["index"])]?.id === chapter?.id));
+      }
+      this.dispatch("chapterchange", { chapter: chapter ?? null });
+    }
+  }
+  sizeEngine() {
+    const rect = this.els.frame.getBoundingClientRect();
+    this.engine?.resize(rect.width, rect.height);
+  }
+  showError(message) {
+    this.els.error.hidden = message === null;
+    this.els.error.textContent = message ?? "";
+  }
+  dispatch(type, detail) {
+    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: type !== "timeupdate", composed: true }));
+  }
+};
+function defineMiraiclipPlayer(tagName = "miraiclip-player") {
+  if (typeof customElements === "undefined") return MiraiclipPlayerElement;
+  const existing = customElements.get(tagName);
+  if (existing) return existing;
+  customElements.define(tagName, MiraiclipPlayerElement);
+  return MiraiclipPlayerElement;
+}
+
+export {
+  chaptersFromMarkers,
+  parseVttChapters,
+  normalizeChapters,
+  chapterAt,
+  formatTime,
+  resolveAssetSources,
+  MiraiclipPlayerElement,
+  defineMiraiclipPlayer
+};
+//# sourceMappingURL=chunk-TMHYBF54.js.map