@leavepulse/ui 0.82.0 → 0.83.0

package/dist/chunks/LpVideoPlayer-DcWd9DDW.js

@@ -0,0 +1,813 @@
+import { defineComponent, ref, computed, watch, shallowRef, onMounted, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, createElementVNode, normalizeStyle, normalizeClass, toHandlers, renderSlot, createCommentVNode, Transition, normalizeProps, guardReactiveProps, withModifiers, toDisplayString, Fragment, renderList, createBlock, createTextVNode, nextTick } from "vue";
+import { startPointerDrag } from "../composables/pointerDrag.js";
+import { nodeWindow, isHTMLElement } from "../composables/realm.js";
+import { useClipboard } from "../composables/useClipboard.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useToast } from "../composables/useToast.js";
+import { useVideoMedia } from "../composables/useVideoMedia.js";
+import { useView, provideView } from "../composables/useView.js";
+import { _ as _sfc_main$4 } from "./LpButton-DSHioIfD.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-DIYhlap8.js";
+import { _ as _sfc_main$7 } from "./LpDropdownMenu-zSsK2Xra.js";
+import { _ as _sfc_main$2 } from "./LpIcon-CoOLz1oJ.js";
+import { _ as _sfc_main$3 } from "./LpLoader-Bf1yZwaU.js";
+import { _ as _sfc_main$6 } from "./SteadyText-CwH-kduj.js";
+import VideoFlash from "../components/VideoFlash.vue.js";
+import { _ as _sfc_main$5 } from "./VideoVolume-B4_DNmNi.js";
+import { widestClipTime, formatClipTime } from "../components/videoBackdrop.js";
+import { FrameSampler } from "../components/videoFrames.js";
+import { FADE_SCALE, FADE, OVERLAY_BUTTON, ICON_SWAP } from "../components/videoMotion.js";
+const _hoisted_1 = ["aria-label", "data-fullscreen"];
+const _hoisted_2 = ["src", "poster", "loop", "muted"];
+const _hoisted_3 = ["src"];
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = {
+  key: 0,
+  class: "pointer-events-none absolute inset-0 flex items-center justify-center"
+};
+const _hoisted_6 = {
+  key: 0,
+  role: "alert",
+  class: "absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-center text-sm text-white/80"
+};
+const _hoisted_7 = ["aria-label", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-disabled"];
+const _hoisted_8 = { class: "relative h-1 w-full overflow-hidden rounded-pill bg-white/25 transition-[height] duration-(--duration-fast) ease-(--ease-emphasized) group-hover/seek:h-1.5 group-focus-visible/seek:h-1.5 motion-reduce:transition-none" };
+const _hoisted_9 = { class: "rounded-pill bg-black/70 px-2 py-0.5 font-mono text-xs text-white" };
+const _hoisted_10 = { class: "mt-1 flex items-center gap-0.5" };
+const _hoisted_11 = { class: "min-w-0 truncate px-1.5 font-mono text-xs text-white/70" };
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpVideoPlayer",
+  props: {
+    src: {},
+    poster: { default: void 0 },
+    title: { default: void 0 },
+    autoplay: { type: Boolean },
+    loop: { type: Boolean },
+    muted: { type: Boolean },
+    startAt: { default: 0 },
+    rates: { default: () => [0.5, 0.75, 1, 1.25, 1.5, 2] },
+    remember: { type: Boolean, default: true },
+    preview: { type: Boolean, default: true },
+    fit: { type: Boolean },
+    menuItems: { type: Function, default: void 0 },
+    labels: { default: () => ({}) }
+  },
+  emits: ["play", "pause", "ended", "error"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const text = useLabels(
+      "videoPlayer",
+      {
+        player: "Video player — Space plays, arrows seek, F fullscreen",
+        play: "Play",
+        pause: "Pause",
+        replay: "Play again",
+        mute: "Mute",
+        unmute: "Unmute",
+        volume: "Volume",
+        speed: "Speed",
+        normalSpeed: "Normal",
+        fullscreen: "Full screen",
+        exitFullscreen: "Exit full screen",
+        pip: "Picture in picture",
+        exitPip: "Exit picture in picture",
+        captions: "Captions",
+        seek: "Seek",
+        failed: "This video couldn't be loaded.",
+        unsupported: "This browser can't play this video's format.",
+        /** `{n}` is replaced by seconds. */
+        back: "−{n} s",
+        forward: "+{n} s",
+        /** `{n}` is replaced by seconds. */
+        rewind: "Back {n} seconds",
+        fastForward: "Forward {n} seconds",
+        /** `{time}` is replaced by the playhead's time. */
+        menuAt: "At {time}",
+        copyTime: "Copy time",
+        copyFrame: "Copy frame",
+        copiedTime: "Time copied",
+        copiedFrame: "Frame copied",
+        copyFailed: "Couldn't copy"
+      },
+      () => props.labels
+    );
+    const rootEl = ref(null);
+    const videoEl = ref(null);
+    const media = useVideoMedia(videoEl, {
+      src: () => props.src,
+      remember: () => props.remember,
+      onError: (cause) => emit("error", { cause, message: cause === "unsupported" ? text.value.unsupported : text.value.failed })
+    });
+    const { duration, time, playing, wantsPlay, waiting, ended, muted, rate, buffered, failure, size } = media;
+    const ready = computed(() => duration.value > 0 && !failure.value);
+    const started = ref(false);
+    const widest = computed(() => widestClipTime(duration.value));
+    let prepared = "";
+    watch(ready, (ok) => {
+      if (!ok || prepared === props.src) return;
+      prepared = props.src;
+      if (props.startAt > 0) media.seek(props.startAt);
+      if (props.autoplay) media.play();
+    });
+    watch(() => props.src, () => {
+      started.value = false;
+    });
+    watch(playing, (on) => {
+      if (on) {
+        started.value = true;
+        emit("play");
+      } else emit("pause");
+    });
+    watch(ended, (on) => {
+      if (on) emit("ended");
+    });
+    const HIDE_AFTER_MS = 2500;
+    const awake = ref(true);
+    const menuOpen = ref(false);
+    const overControls = ref(false);
+    const scrubbing = ref(false);
+    let sleepTimer;
+    const showControls = computed(
+      () => !playing.value || awake.value || menuOpen.value || overControls.value || scrubbing.value || !!failure.value
+    );
+    function wake() {
+      awake.value = true;
+      clearTimeout(sleepTimer);
+      sleepTimer = setTimeout(() => awake.value = false, HIDE_AFTER_MS);
+    }
+    watch(playing, (on) => on && wake());
+    const osd = ref("");
+    let osdTimer;
+    function say(message) {
+      osd.value = message;
+      clearTimeout(osdTimer);
+      osdTimer = setTimeout(() => osd.value = "", 700);
+    }
+    const flash = ref(null);
+    function togglePlayback() {
+      if (!ready.value) return;
+      media.toggle();
+      flash.value = { icon: wantsPlay.value ? "lucide:play" : "lucide:pause", n: (flash.value?.n ?? 0) + 1 };
+    }
+    const SKIP = computed(() => duration.value >= 30 ? 10 : duration.value >= 10 ? 5 : 2);
+    const NUDGE = computed(() => duration.value >= 30 ? 5 : duration.value >= 10 ? 2 : 1);
+    function skip(seconds) {
+      if (!ready.value) return;
+      media.seek(time.value + seconds);
+      say((seconds < 0 ? text.value.back : text.value.forward).replace("{n}", String(Math.abs(seconds))));
+    }
+    function setVolumeBy(delta) {
+      media.setVolume(media.volume.value + delta);
+      say(`${Math.round(media.volume.value * 100)}%`);
+    }
+    const rateLabel = (r) => r === 1 ? text.value.normalSpeed : `${r}×`;
+    function setRate(r) {
+      media.setRate(r);
+      say(`${r}×`);
+    }
+    function stepRate(direction) {
+      const list = [...props.rates].sort((a, b) => a - b);
+      const at = list.findIndex((r) => r >= rate.value - 1e-6);
+      const next = list[Math.min(list.length - 1, Math.max(0, (at < 0 ? list.length - 1 : at) + direction))];
+      if (next !== void 0) setRate(next);
+    }
+    const { copy } = useClipboard();
+    const { error: toastError } = useToast();
+    function copyTime() {
+      void copy(formatClipTime(time.value, "fixed"), { toast: text.value.copiedTime, errorToast: text.value.copyFailed });
+    }
+    async function copyFrame() {
+      const blob = await media.captureFrame();
+      if (blob) void copy(blob, { toast: text.value.copiedFrame, errorToast: text.value.copyFailed });
+      else toastError(text.value.copyFailed);
+    }
+    const fullscreen = ref(false);
+    const canFullscreen = ref(false);
+    const pip = ref(false);
+    const canPip = ref(false);
+    const hasCaptions = ref(false);
+    const captionsOn = ref(false);
+    const outer = useView();
+    provideView(
+      computed(() => {
+        const root = rootEl.value;
+        if (!fullscreen.value || !root) return outer.value;
+        return { window: nodeWindow(root), document: root.ownerDocument, portal: root };
+      })
+    );
+    function syncFullscreen() {
+      const doc = rootEl.value?.ownerDocument;
+      fullscreen.value = !!doc && (doc.fullscreenElement ?? doc.webkitFullscreenElement) === rootEl.value;
+    }
+    function toggleFullscreen() {
+      const root = rootEl.value;
+      const video = videoEl.value;
+      if (!root || !video) return;
+      const doc = root.ownerDocument;
+      if (fullscreen.value) {
+        if (doc.exitFullscreen) void doc.exitFullscreen().catch(() => {
+        });
+        else doc.webkitExitFullscreen?.();
+      } else if (root.requestFullscreen) void root.requestFullscreen().catch(() => {
+      });
+      else if (root.webkitRequestFullscreen) root.webkitRequestFullscreen();
+      else video.webkitEnterFullscreen?.();
+    }
+    function syncPip() {
+      const video = videoEl.value;
+      if (!video) return;
+      pip.value = video.ownerDocument.pictureInPictureElement === video || video.webkitPresentationMode === "picture-in-picture";
+    }
+    function togglePip() {
+      const video = videoEl.value;
+      if (!video) return;
+      if (!video.requestPictureInPicture && video.webkitSetPresentationMode) {
+        video.webkitSetPresentationMode(pip.value ? "inline" : "picture-in-picture");
+      } else if (pip.value) void video.ownerDocument.exitPictureInPicture().catch(() => {
+      });
+      else void video.requestPictureInPicture().catch(() => {
+      });
+    }
+    function captionTrack() {
+      const tracks = videoEl.value?.textTracks;
+      if (!tracks) return null;
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        if (track.kind === "subtitles" || track.kind === "captions") return track;
+      }
+      return null;
+    }
+    function syncCaptions() {
+      const track = captionTrack();
+      hasCaptions.value = !!track;
+      captionsOn.value = track?.mode === "showing";
+    }
+    function toggleCaptions() {
+      const track = captionTrack();
+      if (!track) return;
+      track.mode = track.mode === "showing" ? "disabled" : "showing";
+      syncCaptions();
+    }
+    const barEl = ref(null);
+    const hover = ref(null);
+    const pct = (t) => `${duration.value ? t / duration.value * 100 : 0}%`;
+    function fractionAt(clientX) {
+      const box = barEl.value?.getBoundingClientRect();
+      if (!box || !box.width) return 0;
+      return Math.min(1, Math.max(0, (clientX - box.left) / box.width));
+    }
+    function onBarDown(event) {
+      if (!ready.value || event.button !== 0) return;
+      const wasPlaying = media.wantsPlay.value;
+      media.pause({ instant: true });
+      scrubbing.value = true;
+      media.seek(fractionAt(event.clientX) * duration.value);
+      startPointerDrag(event, {
+        move: (e) => {
+          hover.value = fractionAt(e.clientX);
+          media.seek(hover.value * duration.value);
+        },
+        end: () => {
+          scrubbing.value = false;
+          if (wasPlaying) media.play();
+        }
+      });
+    }
+    function onBarHover(event) {
+      if (!ready.value) return;
+      hover.value = fractionAt(event.clientX);
+      if (props.preview && event.pointerType === "mouse") wantPreview(hover.value * duration.value);
+    }
+    const PREVIEW = { width: 160, height: 90 };
+    const samplerEl = ref(null);
+    const previewWanted = ref(false);
+    const previewFrame = shallowRef(null);
+    let sampler = null;
+    let previewKey = "";
+    function wantPreview(t) {
+      if (!previewWanted.value) {
+        previewWanted.value = true;
+        void nextTick(() => {
+          if (!samplerEl.value) return;
+          sampler = new FrameSampler(samplerEl.value, () => PREVIEW, (key, canvas) => {
+            if (key === previewKey) previewFrame.value = canvas;
+          });
+          wantPreview(t);
+        });
+        return;
+      }
+      const grain = Math.max(1, duration.value / 200);
+      const at = Math.round(t / grain) * grain;
+      previewKey = String(at);
+      const hit = sampler?.cached(previewKey);
+      if (hit) previewFrame.value = hit;
+      else sampler?.want([{ key: previewKey, time: at }]);
+    }
+    function mountPreview(el) {
+      if (isHTMLElement(el) && previewFrame.value && previewFrame.value.parentElement !== el) el.replaceChildren(previewFrame.value);
+    }
+    const previewSize = computed(() => {
+      const { width, height } = size.value;
+      return width && height ? { width: PREVIEW.width, height: Math.round(PREVIEW.width * height / width) } : PREVIEW;
+    });
+    function onKeydown(event) {
+      const target = event.target;
+      if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) return;
+      if (target.closest("input, textarea, select, [contenteditable='true']")) return;
+      if (target.getAttribute("role") === "slider" && target !== barEl.value) return;
+      const key = event.key;
+      const actions = {
+        " ": togglePlayback,
+        k: togglePlayback,
+        j: () => skip(-SKIP.value),
+        l: () => skip(SKIP.value),
+        ArrowLeft: () => skip(-NUDGE.value),
+        ArrowRight: () => skip(NUDGE.value),
+        ArrowUp: () => setVolumeBy(0.1),
+        ArrowDown: () => setVolumeBy(-0.1),
+        m: () => media.setMuted(!muted.value),
+        f: () => toggleFullscreen(),
+        c: () => toggleCaptions(),
+        Home: () => media.seek(0),
+        End: () => media.seek(duration.value),
+        "<": () => stepRate(-1),
+        ">": () => stepRate(1)
+      };
+      const digit = /^[0-9]$/.test(key) ? () => media.seek(Number(key) / 10 * duration.value) : void 0;
+      const run = actions[key.length === 1 ? key.toLowerCase() : key] ?? actions[key] ?? digit;
+      if (!run || key === " " && target.tagName === "BUTTON" || !ready.value && key !== " ") return;
+      event.preventDefault();
+      run();
+      wake();
+    }
+    let lastTap = { at: 0, side: 0 };
+    let tapTimer;
+    function onPictureUp(event) {
+      if (event.pointerType !== "touch" || !ready.value) return;
+      const box = event.currentTarget.getBoundingClientRect();
+      const x = (event.clientX - box.left) / box.width;
+      const side = x < 1 / 3 ? -1 : x > 2 / 3 ? 1 : 0;
+      const now = event.timeStamp;
+      if (now - lastTap.at < 300 && side !== 0 && side === lastTap.side) {
+        clearTimeout(tapTimer);
+        skip(side * SKIP.value);
+        lastTap = { at: 0, side: 0 };
+        return;
+      }
+      lastTap = { at: now, side };
+      clearTimeout(tapTimer);
+      tapTimer = setTimeout(() => {
+        if (showControls.value && playing.value) awake.value = false;
+        else wake();
+      }, 300);
+    }
+    function onPictureClick(event) {
+      if (event.pointerType === "touch") return;
+      togglePlayback();
+    }
+    const rateItems = computed(
+      () => props.rates.map((r) => ({ label: rateLabel(r), icon: Math.abs(r - rate.value) < 1e-6 ? "lucide:check" : void 0, onSelect: () => setRate(r) }))
+    );
+    const menu = computed(() => {
+      if (!ready.value) return [];
+      const items = [
+        { label: wantsPlay.value ? text.value.pause : text.value.play, icon: wantsPlay.value ? "lucide:pause" : "lucide:play", shortcut: "Space", onSelect: () => media.toggle() },
+        { label: muted.value ? text.value.unmute : text.value.mute, icon: muted.value ? "lucide:volume-2" : "lucide:volume-x", shortcut: "M", onSelect: () => media.setMuted(!muted.value) },
+        { label: text.value.rewind.replace("{n}", String(SKIP.value)), icon: "lucide:rewind", shortcut: "J", separatorBefore: true, onSelect: () => skip(-SKIP.value) },
+        { label: text.value.fastForward.replace("{n}", String(SKIP.value)), icon: "lucide:fast-forward", shortcut: "L", onSelect: () => skip(SKIP.value) },
+        { label: text.value.speed, icon: "lucide:gauge", separatorBefore: true, children: rateItems.value }
+      ];
+      if (hasCaptions.value) items.push({ label: text.value.captions, icon: "lucide:captions", shortcut: "C", checked: captionsOn.value, onSelect: toggleCaptions });
+      if (canPip.value) items.push({ label: pip.value ? text.value.exitPip : text.value.pip, icon: "lucide:picture-in-picture-2", onSelect: togglePip });
+      if (canFullscreen.value) items.push({ label: fullscreen.value ? text.value.exitFullscreen : text.value.fullscreen, icon: fullscreen.value ? "lucide:minimize" : "lucide:maximize", shortcut: "F", onSelect: toggleFullscreen });
+      items.push(
+        { label: text.value.copyTime, icon: "lucide:clock", separatorBefore: true, onSelect: copyTime },
+        { label: text.value.copyFrame, icon: "lucide:image", onSelect: () => void copyFrame() }
+      );
+      const extra = props.menuItems?.() ?? [];
+      return [...items, ...extra.map((item, i) => i === 0 ? { ...item, separatorBefore: true } : item)];
+    });
+    const menuTitle = computed(() => text.value.menuAt.replace("{time}", formatClipTime(time.value, "fixed")));
+    onMounted(() => {
+      const root = rootEl.value;
+      const video = videoEl.value;
+      if (!root || !video) return;
+      const doc = root.ownerDocument;
+      canFullscreen.value = !!(root.requestFullscreen || root.webkitRequestFullscreen || video.webkitEnterFullscreen);
+      canPip.value = !!doc.pictureInPictureEnabled && !video.disablePictureInPicture || !!video.webkitSupportsPresentationMode?.("picture-in-picture");
+      doc.addEventListener("fullscreenchange", syncFullscreen);
+      doc.addEventListener("webkitfullscreenchange", syncFullscreen);
+      video.textTracks.addEventListener?.("addtrack", syncCaptions);
+      video.textTracks.addEventListener?.("change", syncCaptions);
+      syncCaptions();
+    });
+    onBeforeUnmount(() => {
+      clearTimeout(sleepTimer);
+      clearTimeout(osdTimer);
+      clearTimeout(tapTimer);
+      sampler?.dispose();
+      const doc = rootEl.value?.ownerDocument;
+      doc?.removeEventListener("fullscreenchange", syncFullscreen);
+      doc?.removeEventListener("webkitfullscreenchange", syncFullscreen);
+      const stills = samplerEl.value;
+      if (stills) {
+        stills.removeAttribute("src");
+        stills.load();
+      }
+    });
+    __expose({
+      play: media.play,
+      pause: media.pause,
+      toggle: togglePlayback,
+      seek: media.seek,
+      currentTime: () => time.value,
+      /** The frame on screen as a PNG, or null where it cannot be read back. */
+      captureFrame: media.captureFrame
+    });
+    const FRAME = "overflow-hidden rounded-card bg-black";
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      () => props.fit ? "group/player relative flex size-full items-center justify-center text-white outline-none select-none [container-type:size] focus-visible:ring-2 focus-visible:ring-ring" : `group/player relative block w-full ${FRAME} text-white outline-none select-none focus-visible:ring-2 focus-visible:ring-ring`
+    );
+    const ratio = computed(() => size.value.width && size.value.height ? size.value.width / size.value.height : 16 / 9);
+    const aspect = computed(() => size.value.width && size.value.height ? `${size.value.width} / ${size.value.height}` : "16 / 9");
+    const frameStyle = computed(() => {
+      if (!props.fit || fullscreen.value) return void 0;
+      const natural = size.value.width ? `max(${size.value.width}px, 28rem)` : "100cqw";
+      return { width: `min(100cqw, calc(100cqh * ${ratio.value}), ${natural})` };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "rootEl",
+        ref: rootEl,
+        class: [unref(rootClass), fullscreen.value ? "rounded-none" : "", unref(playing) && !showControls.value ? "cursor-none" : ""]
+      }, unref(rest), {
+        tabindex: "0",
+        role: "region",
+        "aria-label": __props.title ?? unref(text).player,
+        "data-fullscreen": fullscreen.value || void 0,
+        onKeydown,
+        onPointermove: wake,
+        onFocusin: wake
+      }), [
+        createVNode(_sfc_main$1, {
+          items: menu.value,
+          title: menuTitle.value,
+          always: ""
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(["@container", __props.fit && !fullscreen.value ? FRAME : ""]),
+              style: normalizeStyle(frameStyle.value),
+              "data-lp-video-frame": ""
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(["relative w-full", fullscreen.value ? "h-dvh" : ""]),
+                style: normalizeStyle(fullscreen.value ? void 0 : { aspectRatio: aspect.value })
+              }, [
+                createElementVNode("video", mergeProps({
+                  ref_key: "videoEl",
+                  ref: videoEl,
+                  class: "absolute inset-0 size-full object-contain",
+                  src: __props.src,
+                  poster: __props.poster,
+                  loop: __props.loop,
+                  muted: _ctx.$props.muted,
+                  preload: "metadata",
+                  playsinline: ""
+                }, toHandlers(unref(media).listeners, true), {
+                  onEnterpictureinpicture: syncPip,
+                  onLeavepictureinpicture: syncPip,
+                  onWebkitpresentationmodechanged: syncPip,
+                  onClick: onPictureClick,
+                  onDblclick: _cache[0] || (_cache[0] = ($event) => canFullscreen.value && toggleFullscreen()),
+                  onPointerup: onPictureUp
+                }), [
+                  renderSlot(_ctx.$slots, "default")
+                ], 16, _hoisted_2),
+                createVNode(VideoFlash, { flash: flash.value }, null, 8, ["flash"]),
+                previewWanted.value ? (openBlock(), createElementBlock("video", {
+                  key: 0,
+                  ref_key: "samplerEl",
+                  ref: samplerEl,
+                  class: "pointer-events-none absolute size-px opacity-0",
+                  src: __props.src,
+                  preload: "metadata",
+                  muted: "",
+                  playsinline: "",
+                  "aria-hidden": "true",
+                  tabindex: "-1"
+                }, null, 8, _hoisted_3)) : createCommentVNode("", true),
+                createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE_SCALE))), {
+                  default: withCtx(() => [
+                    ready.value && (!started.value || unref(ended)) && !unref(wantsPlay) ? (openBlock(), createElementBlock("button", {
+                      key: 0,
+                      type: "button",
+                      class: "absolute top-1/2 left-1/2 flex size-16 -translate-1/2 items-center justify-center rounded-full bg-black/45 text-white shadow-lg ring-1 ring-white/20 outline-none transition-[background-color,scale] duration-(--duration-fast) ease-(--ease-emphasized) hover:scale-105 hover:bg-black/60 focus-visible:ring-2 focus-visible:ring-ring active:scale-95 motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:active:scale-100",
+                      "aria-label": unref(ended) ? unref(text).replay : unref(text).play,
+                      tabindex: "-1",
+                      onClick: withModifiers(togglePlayback, ["stop"])
+                    }, [
+                      createVNode(_sfc_main$2, {
+                        name: unref(ended) ? "lucide:rotate-ccw" : "lucide:play",
+                        size: 28,
+                        class: normalizeClass(unref(ended) ? "" : "translate-x-0.5")
+                      }, null, 8, ["name", "class"])
+                    ], 8, _hoisted_4)) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                }, 16),
+                createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE))), {
+                  default: withCtx(() => [
+                    unref(waiting) && unref(playing) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                      createVNode(_sfc_main$3, {
+                        size: "lg",
+                        class: "text-white"
+                      })
+                    ])) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                }, 16),
+                createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE))), {
+                  default: withCtx(() => [
+                    osd.value ? (openBlock(), createElementBlock("span", {
+                      key: osd.value,
+                      class: "pointer-events-none absolute top-4 left-1/2 -translate-x-1/2 rounded-pill bg-black/55 px-3 py-1 text-sm font-medium tabular-nums text-white",
+                      "aria-live": "polite"
+                    }, toDisplayString(osd.value), 1)) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                }, 16),
+                createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE))), {
+                  default: withCtx(() => [
+                    unref(failure) ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                      createVNode(_sfc_main$2, {
+                        name: "lucide:video-off",
+                        size: 32
+                      }),
+                      createElementVNode("p", null, toDisplayString(unref(failure) === "unsupported" ? unref(text).unsupported : unref(text).failed), 1)
+                    ])) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                }, 16),
+                _ctx.$slots.actions ? (openBlock(), createElementBlock("div", {
+                  key: 1,
+                  class: normalizeClass(["absolute inset-x-0 top-0 flex justify-end gap-0.5 bg-linear-to-b from-black/55 to-transparent px-2 pt-2 pb-8 transition-opacity duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none", showControls.value ? "" : "pointer-events-none opacity-0"]),
+                  onPointerenter: _cache[1] || (_cache[1] = ($event) => overControls.value = true),
+                  onPointerleave: _cache[2] || (_cache[2] = ($event) => overControls.value = false)
+                }, [
+                  renderSlot(_ctx.$slots, "actions", { buttonClass: unref(OVERLAY_BUTTON) })
+                ], 34)) : createCommentVNode("", true),
+                createElementVNode("div", {
+                  class: normalizeClass(["absolute inset-x-0 bottom-0 bg-linear-to-t from-black/75 via-black/35 to-transparent px-3 pt-12 pb-2 transition-opacity duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none", showControls.value && !unref(failure) ? "" : "pointer-events-none opacity-0"]),
+                  "data-lp-player-controls": "",
+                  onPointerenter: _cache[8] || (_cache[8] = ($event) => overControls.value = true),
+                  onPointerleave: _cache[9] || (_cache[9] = ($event) => {
+                    overControls.value = false;
+                    hover.value = null;
+                  })
+                }, [
+                  createElementVNode("div", {
+                    ref_key: "barEl",
+                    ref: barEl,
+                    class: "group/seek relative flex h-4 cursor-pointer touch-none items-center outline-none",
+                    role: "slider",
+                    tabindex: "0",
+                    "aria-label": unref(text).seek,
+                    "aria-valuemin": 0,
+                    "aria-valuemax": Math.round(unref(duration) * 10) / 10,
+                    "aria-valuenow": Math.round(unref(time) * 10) / 10,
+                    "aria-valuetext": unref(formatClipTime)(unref(time), "fixed"),
+                    "aria-disabled": !ready.value || void 0,
+                    onPointerdown: onBarDown,
+                    onPointermove: onBarHover,
+                    onPointerleave: _cache[3] || (_cache[3] = ($event) => !scrubbing.value && (hover.value = null))
+                  }, [
+                    createElementVNode("div", _hoisted_8, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buffered), (b, i) => {
+                        return openBlock(), createElementBlock("span", {
+                          key: i,
+                          class: "absolute inset-y-0 bg-white/35",
+                          style: normalizeStyle({ left: `${b[0] * 100}%`, width: `${(b[1] - b[0]) * 100}%` })
+                        }, null, 4);
+                      }), 128)),
+                      hover.value !== null ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        class: "absolute inset-y-0 left-0 bg-white/25",
+                        style: normalizeStyle({ width: `${hover.value * 100}%` })
+                      }, null, 4)) : createCommentVNode("", true),
+                      createElementVNode("span", {
+                        class: "absolute inset-y-0 left-0 bg-white",
+                        style: normalizeStyle({ width: pct(unref(time)) })
+                      }, null, 4)
+                    ]),
+                    createElementVNode("span", {
+                      class: normalizeClass(["pointer-events-none absolute top-1/2 size-3 -translate-1/2 scale-0 rounded-full bg-white shadow transition-transform duration-(--duration-fast) ease-(--ease-emphasized) group-hover/seek:scale-100 group-focus-visible/seek:scale-100 group-focus-visible/seek:ring-2 group-focus-visible/seek:ring-ring motion-reduce:transition-none", scrubbing.value ? "scale-100" : ""]),
+                      style: normalizeStyle({ left: pct(unref(time)) })
+                    }, null, 6),
+                    createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE))), {
+                      default: withCtx(() => [
+                        hover.value !== null && ready.value ? (openBlock(), createElementBlock("div", {
+                          key: 0,
+                          class: "pointer-events-none absolute bottom-full mb-2 flex -translate-x-1/2 flex-col items-center gap-1",
+                          style: normalizeStyle({ left: `clamp(${__props.preview && previewFrame.value ? previewSize.value.width / 2 : 28}px, ${hover.value * 100}%, calc(100% - ${__props.preview && previewFrame.value ? previewSize.value.width / 2 : 28}px))` })
+                        }, [
+                          __props.preview && previewFrame.value ? (openBlock(), createElementBlock("div", {
+                            key: 0,
+                            ref: (el) => mountPreview(el),
+                            class: "overflow-hidden rounded-control bg-black shadow-lg ring-1 ring-white/20 [&>canvas]:size-full [&>canvas]:object-cover",
+                            style: normalizeStyle({ width: `${previewSize.value.width}px`, height: `${previewSize.value.height}px` })
+                          }, null, 4)) : createCommentVNode("", true),
+                          createElementVNode("span", _hoisted_9, toDisplayString(unref(formatClipTime)(hover.value * unref(duration), "fixed")), 1)
+                        ], 4)) : createCommentVNode("", true)
+                      ]),
+                      _: 1
+                    }, 16)
+                  ], 40, _hoisted_7),
+                  createElementVNode("div", _hoisted_10, [
+                    createVNode(_sfc_main$4, {
+                      size: "sm",
+                      variant: "ghost",
+                      square: "",
+                      class: normalizeClass(unref(OVERLAY_BUTTON)),
+                      disabled: !ready.value,
+                      "aria-label": unref(wantsPlay) ? unref(text).pause : unref(ended) ? unref(text).replay : unref(text).play,
+                      title: unref(wantsPlay) ? unref(text).pause : unref(text).play,
+                      onClick: _cache[4] || (_cache[4] = ($event) => unref(media).toggle())
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(Transition, normalizeProps(guardReactiveProps(unref(ICON_SWAP))), {
+                          default: withCtx(() => [
+                            (openBlock(), createBlock(_sfc_main$2, {
+                              key: unref(wantsPlay) ? "pause" : unref(ended) ? "replay" : "play",
+                              name: unref(wantsPlay) ? "lucide:pause" : unref(ended) ? "lucide:rotate-ccw" : "lucide:play",
+                              size: 16
+                            }, null, 8, ["name"]))
+                          ]),
+                          _: 1
+                        }, 16)
+                      ]),
+                      _: 1
+                    }, 8, ["class", "disabled", "aria-label", "title"]),
+                    createVNode(_sfc_main$4, {
+                      size: "sm",
+                      variant: "ghost",
+                      square: "",
+                      class: normalizeClass([unref(OVERLAY_BUTTON), "@max-[26rem]:hidden"]),
+                      disabled: !ready.value,
+                      "aria-label": unref(text).rewind.replace("{n}", String(SKIP.value)),
+                      title: unref(text).rewind.replace("{n}", String(SKIP.value)),
+                      onClick: _cache[5] || (_cache[5] = ($event) => skip(-SKIP.value))
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_sfc_main$2, {
+                          name: "lucide:rewind",
+                          size: 16
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["class", "disabled", "aria-label", "title"]),
+                    createVNode(_sfc_main$4, {
+                      size: "sm",
+                      variant: "ghost",
+                      square: "",
+                      class: normalizeClass([unref(OVERLAY_BUTTON), "@max-[26rem]:hidden"]),
+                      disabled: !ready.value,
+                      "aria-label": unref(text).fastForward.replace("{n}", String(SKIP.value)),
+                      title: unref(text).fastForward.replace("{n}", String(SKIP.value)),
+                      onClick: _cache[6] || (_cache[6] = ($event) => skip(SKIP.value))
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_sfc_main$2, {
+                          name: "lucide:fast-forward",
+                          size: 16
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["class", "disabled", "aria-label", "title"]),
+                    createVNode(_sfc_main$5, {
+                      media: unref(media),
+                      labels: unref(text),
+                      disabled: !ready.value,
+                      overlay: ""
+                    }, null, 8, ["media", "labels", "disabled"]),
+                    createElementVNode("span", _hoisted_11, [
+                      createVNode(_sfc_main$6, {
+                        class: "text-white",
+                        text: unref(formatClipTime)(unref(time), "fixed"),
+                        widest: widest.value
+                      }, null, 8, ["text", "widest"]),
+                      createTextVNode(" / " + toDisplayString(unref(formatClipTime)(unref(duration), "fixed")), 1)
+                    ]),
+                    _cache[10] || (_cache[10] = createElementVNode("span", { class: "flex-1" }, null, -1)),
+                    createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE_SCALE))), {
+                      default: withCtx(() => [
+                        hasCaptions.value ? (openBlock(), createBlock(_sfc_main$4, {
+                          key: 0,
+                          size: "sm",
+                          variant: "ghost",
+                          square: "",
+                          class: normalizeClass([unref(OVERLAY_BUTTON), captionsOn.value ? "bg-white/15 text-white" : ""]),
+                          "aria-label": unref(text).captions,
+                          title: unref(text).captions,
+                          "aria-pressed": captionsOn.value,
+                          onClick: toggleCaptions
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_sfc_main$2, {
+                              name: "lucide:captions",
+                              size: 16
+                            })
+                          ]),
+                          _: 1
+                        }, 8, ["class", "aria-label", "title", "aria-pressed"])) : createCommentVNode("", true)
+                      ]),
+                      _: 1
+                    }, 16),
+                    renderSlot(_ctx.$slots, "controls", { buttonClass: unref(OVERLAY_BUTTON) }),
+                    createVNode(_sfc_main$7, {
+                      items: rateItems.value,
+                      title: unref(text).speed,
+                      "onUpdate:open": _cache[7] || (_cache[7] = (open) => menuOpen.value = open)
+                    }, {
+                      trigger: withCtx(() => [
+                        createVNode(_sfc_main$4, {
+                          size: "sm",
+                          variant: "ghost",
+                          class: normalizeClass(["min-w-12 px-2 font-mono text-xs @max-[18rem]:hidden", unref(OVERLAY_BUTTON)]),
+                          disabled: !ready.value,
+                          "aria-label": unref(text).speed,
+                          title: unref(text).speed
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_sfc_main$6, {
+                              text: `${unref(rate)}×`,
+                              widest: `${Math.max(...__props.rates)}×`.replace(/\d/g, "0")
+                            }, null, 8, ["text", "widest"])
+                          ]),
+                          _: 1
+                        }, 8, ["class", "disabled", "aria-label", "title"])
+                      ]),
+                      _: 1
+                    }, 8, ["items", "title"]),
+                    canPip.value ? (openBlock(), createBlock(_sfc_main$4, {
+                      key: 0,
+                      size: "sm",
+                      variant: "ghost",
+                      square: "",
+                      class: normalizeClass([unref(OVERLAY_BUTTON), "@max-[22rem]:hidden"]),
+                      disabled: !ready.value,
+                      "aria-label": pip.value ? unref(text).exitPip : unref(text).pip,
+                      title: pip.value ? unref(text).exitPip : unref(text).pip,
+                      "aria-pressed": pip.value,
+                      onClick: togglePip
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_sfc_main$2, {
+                          name: "lucide:picture-in-picture-2",
+                          size: 16
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["class", "disabled", "aria-label", "title", "aria-pressed"])) : createCommentVNode("", true),
+                    canFullscreen.value ? (openBlock(), createBlock(_sfc_main$4, {
+                      key: 1,
+                      size: "sm",
+                      variant: "ghost",
+                      square: "",
+                      class: normalizeClass(unref(OVERLAY_BUTTON)),
+                      "aria-label": fullscreen.value ? unref(text).exitFullscreen : unref(text).fullscreen,
+                      title: fullscreen.value ? unref(text).exitFullscreen : unref(text).fullscreen,
+                      onClick: toggleFullscreen
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(Transition, normalizeProps(guardReactiveProps(unref(ICON_SWAP))), {
+                          default: withCtx(() => [
+                            (openBlock(), createBlock(_sfc_main$2, {
+                              key: fullscreen.value ? "min" : "max",
+                              name: fullscreen.value ? "lucide:minimize" : "lucide:maximize",
+                              size: 16
+                            }, null, 8, ["name"]))
+                          ]),
+                          _: 1
+                        }, 16)
+                      ]),
+                      _: 1
+                    }, 8, ["class", "aria-label", "title"])) : createCommentVNode("", true)
+                  ])
+                ], 34)
+              ], 6)
+            ], 6)
+          ]),
+          _: 3
+        }, 8, ["items", "title"])
+      ], 16, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};