@leavepulse/ui 0.81.0 → 0.82.0

package/dist/components/LpVideoTrim.vue.js

@@ -0,0 +1,955 @@
+import { defineComponent, ref, computed, watch, shallowRef, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeStyle, Fragment, renderList, normalizeClass, createCommentVNode, createVNode, toDisplayString, withCtx, createTextVNode, withDirectives, vShow, withKeys, withModifiers, createBlock } from "vue";
+import { startPointerDrag } from "../composables/pointerDrag.js";
+import { isHTMLElement } from "../composables/realm.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useResizeObserver } from "../composables/useResizeObserver.js";
+import { usePrefersReducedMotion } from "../composables/useReducedMotion.js";
+import { _ as _sfc_main$2 } from "../chunks/LpButton-DSHioIfD.js";
+import { _ as _sfc_main$1 } from "../chunks/LpIcon-CytpcLmS.js";
+import { _ as _sfc_main$3 } from "../chunks/LpInput-P2C12X7s.js";
+import { formatClipTime } from "./videoBackdrop.js";
+import { stillSpan, FrameSampler } from "./videoFrames.js";
+import { normalizeRange, ticks, tickStep, containRect, mediaErrorCause, revealTime, zoomView, shiftView, adjustRegion, dragEnd, setEnd, parseClipTime, regionBetween } from "./videoTrim.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
+import '../assets/LpVideoTrim-Ci6IIHW0.css';const _hoisted_1 = ["data-disabled"];
+const _hoisted_2 = ["src", "poster", "muted"];
+const _hoisted_3 = ["src"];
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = ["data-lp-corner", "onPointerdown"];
+const _hoisted_6 = {
+  key: 1,
+  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 = { class: "flex flex-wrap items-center gap-1" };
+const _hoisted_8 = {
+  class: "px-1.5 font-mono text-xs text-muted tabular-nums",
+  "data-lp-clock": ""
+};
+const _hoisted_9 = { class: "text-ink" };
+const _hoisted_10 = {
+  class: "relative h-4 overflow-hidden text-[10px] text-muted tabular-nums",
+  "aria-hidden": "true"
+};
+const _hoisted_11 = ["aria-label"];
+const _hoisted_12 = { class: "absolute inset-0 overflow-hidden rounded-control" };
+const _hoisted_13 = ["data-lp-still"];
+const _hoisted_14 = ["tabindex", "aria-label", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-disabled", "data-lp-handle", "onPointerdown"];
+const _hoisted_15 = ["tabindex", "aria-label", "aria-valuemax", "aria-valuenow", "aria-valuetext"];
+const _hoisted_16 = ["aria-label"];
+const _hoisted_17 = { class: "flex flex-wrap items-end gap-x-3 gap-y-2 text-xs" };
+const _hoisted_18 = { class: "text-muted" };
+const _hoisted_19 = { class: "flex flex-col gap-1 pb-1.5" };
+const _hoisted_20 = { class: "text-muted" };
+const _hoisted_21 = {
+  class: "font-mono text-sm text-ink tabular-nums",
+  "data-lp-length": ""
+};
+const _hoisted_22 = {
+  key: 0,
+  class: "pb-2 text-muted",
+  "data-lp-left": ""
+};
+const _hoisted_23 = {
+  key: 1,
+  class: "pb-2 text-muted"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpVideoTrim",
+  props: {
+    src: {},
+    poster: { default: void 0 },
+    range: { default: void 0 },
+    maxClip: { default: void 0 },
+    minClip: { default: 0.1 },
+    regionSelect: { type: Boolean },
+    region: { default: null },
+    frameRate: { default: 30 },
+    disabled: { type: Boolean },
+    labels: { default: () => ({}) }
+  },
+  emits: ["update:range", "change", "update:region", "error"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const text = useLabels(
+      "videoTrim",
+      {
+        play: "Play",
+        pause: "Pause",
+        stepBack: "Previous frame",
+        stepForward: "Next frame",
+        mute: "Mute",
+        unmute: "Unmute",
+        zoomIn: "Zoom in",
+        zoomOut: "Zoom out",
+        zoomFit: "Show whole video",
+        start: "Start",
+        end: "End",
+        position: "Position",
+        length: "Length",
+        /** `{left}` and `{max}` are replaced by times. */
+        left: "{left} left of {max}",
+        overview: "Visible part of the timeline",
+        timeline: "Timeline — Space plays, arrows step, I and O set start and end",
+        region: "Marked area — arrows move it, Shift+arrows resize, Delete removes",
+        regionHint: "Drag on the picture to mark an area",
+        regionClear: "Remove area",
+        failed: "This video couldn't be loaded.",
+        unsupported: "This browser can't play this video's format.",
+        invalidTime: "Type a time like 1:05.5"
+      },
+      () => props.labels
+    );
+    const { class: rootClass, attrs: rest } = useMergedAttrs("flex flex-col gap-3 select-none");
+    const reduced = usePrefersReducedMotion();
+    const videoEl = ref(null);
+    const samplerEl = ref(null);
+    const stageEl = ref(null);
+    const trackEl = ref(null);
+    const duration = ref(0);
+    const failure = ref(null);
+    const time = ref(0);
+    const playing = ref(false);
+    const muted = ref(false);
+    const videoSize = ref({ width: 0, height: 0 });
+    const stageSize = ref({ width: 0, height: 0 });
+    const trackWidth = ref(0);
+    const ready = computed(() => duration.value > 0 && !failure.value);
+    const off = computed(() => props.disabled || !ready.value);
+    const limits = computed(() => ({
+      duration: duration.value,
+      minClip: Math.max(0, props.minClip ?? 0),
+      maxClip: props.maxClip && props.maxClip > 0 ? props.maxClip : Infinity
+    }));
+    const local = ref([0, 0]);
+    const dragging = ref(null);
+    const same = (a, b) => !!a && a[0] === b[0] && a[1] === b[1];
+    watch(
+      [() => props.range, limits],
+      () => {
+        if (dragging.value !== null || !duration.value) return;
+        const next = normalizeRange(props.range, limits.value);
+        local.value = next;
+        if (!same(props.range, next)) emit("update:range", next);
+      },
+      { deep: true }
+    );
+    function put(next, commit) {
+      const changed = !same(local.value, next);
+      local.value = next;
+      if (changed) emit("update:range", next);
+      if (commit) emit("change", next);
+    }
+    const clipLength = computed(() => local.value[1] - local.value[0]);
+    let seekTarget = null;
+    let seekBusy = false;
+    function seek(t) {
+      const video = videoEl.value;
+      const target = Math.min(Math.max(0, t), duration.value || t);
+      time.value = target;
+      if (!video) return;
+      if (seekBusy) {
+        seekTarget = target;
+        return;
+      }
+      seekBusy = true;
+      video.currentTime = target;
+    }
+    function onSeeked() {
+      seekBusy = false;
+      if (seekTarget !== null) {
+        const next = seekTarget;
+        seekTarget = null;
+        seek(next);
+      } else if (videoEl.value && !playing.value) time.value = videoEl.value.currentTime;
+    }
+    let probingDuration = false;
+    function onMetadata() {
+      const video = videoEl.value;
+      if (!video) return;
+      videoSize.value = { width: video.videoWidth, height: video.videoHeight };
+      if (Number.isFinite(video.duration)) {
+        duration.value = video.duration;
+        return;
+      }
+      probingDuration = true;
+      video.currentTime = 1e101;
+    }
+    function onDurationChange() {
+      const video = videoEl.value;
+      if (!video || !Number.isFinite(video.duration) || !video.duration) return;
+      duration.value = video.duration;
+      if (probingDuration) {
+        probingDuration = false;
+        video.currentTime = 0;
+      }
+    }
+    async function onError() {
+      const video = videoEl.value;
+      if (!video?.error) return;
+      const src = props.src;
+      let cause = mediaErrorCause(video.error);
+      if (cause === "unsupported") cause = await probeSource(src);
+      if (src !== props.src) return;
+      failure.value = cause;
+      emit("error", { cause, message: cause === "unsupported" ? text.value.unsupported : text.value.failed });
+    }
+    async function probeSource(src) {
+      try {
+        const res = await fetch(src, { headers: { Range: "bytes=0-0" }, credentials: "same-origin" });
+        void res.body?.cancel();
+        const type = res.headers.get("content-type") ?? "";
+        return res.ok && !/^text\/|json|xml/.test(type) ? "unsupported" : "load";
+      } catch {
+        return "unsupported";
+      }
+    }
+    let stopAtEnd = false;
+    let frame = 0;
+    function tick() {
+      frame = 0;
+      const video = videoEl.value;
+      if (!video || !playing.value) return;
+      time.value = video.currentTime;
+      if (stopAtEnd && video.currentTime >= local.value[1]) {
+        video.pause();
+        seek(local.value[1]);
+        return;
+      }
+      if (zoomed.value) view.value = revealTime(view.value, time.value, duration.value, 0.05);
+      frame = requestAnimationFrame(tick);
+    }
+    function onPlay() {
+      playing.value = true;
+      if (!frame) frame = requestAnimationFrame(tick);
+    }
+    function onPause() {
+      playing.value = false;
+      if (frame) cancelAnimationFrame(frame);
+      frame = 0;
+      if (videoEl.value && !seekBusy) time.value = videoEl.value.currentTime;
+    }
+    function togglePlay() {
+      const video = videoEl.value;
+      if (!video || off.value) return;
+      if (!video.paused) {
+        video.pause();
+        return;
+      }
+      const [a, b] = local.value;
+      let from = time.value;
+      if (from >= b - 1e-3 && from <= b + 1e-3) from = a;
+      stopAtEnd = from >= a - 1e-3 && from < b;
+      if (from !== time.value) seek(from);
+      void video.play().catch(() => {
+      });
+    }
+    function pause() {
+      videoEl.value?.pause();
+    }
+    function step(seconds) {
+      if (off.value) return;
+      pause();
+      seek(time.value + seconds);
+      if (zoomed.value) view.value = revealTime(view.value, time.value, duration.value);
+    }
+    function toggleMute() {
+      muted.value = !muted.value;
+      if (videoEl.value) videoEl.value.muted = muted.value;
+    }
+    const frameStep = computed(() => 1 / Math.max(1, props.frameRate));
+    const MIN_SPAN = 2;
+    const view = ref({ start: 0, end: 0 });
+    const span = computed(() => Math.max(1e-6, view.value.end - view.value.start));
+    const zoomed = computed(() => duration.value > 0 && span.value < duration.value - 1e-6);
+    const canZoomIn = computed(() => span.value > Math.min(MIN_SPAN, duration.value) + 1e-6);
+    watch(duration, (d) => {
+      view.value = { start: 0, end: d };
+    });
+    const xOf = (t) => (t - view.value.start) / span.value * trackWidth.value;
+    const pct = (t) => `${(t - view.value.start) / span.value * 100}%`;
+    function timeAt(clientX) {
+      const box = trackEl.value?.getBoundingClientRect();
+      if (!box || !box.width) return 0;
+      return view.value.start + (clientX - box.left) / box.width * span.value;
+    }
+    function zoomBy(factor, anchor = time.value) {
+      if (!duration.value) return;
+      view.value = zoomView(view.value, anchor, factor, duration.value, MIN_SPAN);
+    }
+    function fit() {
+      view.value = { start: 0, end: duration.value };
+    }
+    function onWheel(event) {
+      if (!ready.value) return;
+      const dx = event.shiftKey ? event.deltaY : event.deltaX;
+      if (Math.abs(dx) > Math.abs(event.deltaY) || event.shiftKey) {
+        if (!zoomed.value) return;
+        event.preventDefault();
+        view.value = shiftView(view.value, dx / Math.max(1, trackWidth.value) * span.value, duration.value);
+        return;
+      }
+      event.preventDefault();
+      const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 400 : 1;
+      zoomBy(Math.exp(-event.deltaY * unit / (event.ctrlKey ? 100 : 300)), timeAt(event.clientX));
+    }
+    const marks = computed(() => ready.value ? ticks(view.value, tickStep(span.value, trackWidth.value)) : []);
+    const markDigits = computed(() => tickStep(span.value, trackWidth.value) < 1);
+    const pointers = /* @__PURE__ */ new Map();
+    let pinch = null;
+    let edgeFrame = 0;
+    let lastX = 0;
+    let scrubbing = false;
+    function onHandleDown(end, event) {
+      if (off.value || event.button !== 0) return;
+      event.stopPropagation();
+      event.currentTarget.focus({ preventScroll: true });
+      pause();
+      dragging.value = end;
+      lastX = event.clientX;
+      startPointerDrag(event, {
+        cursor: "ew-resize",
+        move: (e) => {
+          lastX = e.clientX;
+          moveHandle();
+          edgeScroll();
+        },
+        end: () => {
+          dragging.value = null;
+          if (edgeFrame) cancelAnimationFrame(edgeFrame);
+          edgeFrame = 0;
+          emit("change", local.value);
+        }
+      });
+    }
+    function moveHandle() {
+      const end = dragging.value;
+      if (end === null) return;
+      const next = dragEnd(local.value, end, timeAt(lastX), limits.value);
+      put(next, false);
+      seek(next[end]);
+    }
+    function edgeScroll() {
+      if (edgeFrame || !zoomed.value) return;
+      const box = trackEl.value?.getBoundingClientRect();
+      if (!box) return;
+      const over = lastX < box.left ? lastX - box.left : lastX > box.right ? lastX - box.right : 0;
+      if (!over || dragging.value === null && !scrubbing) return;
+      edgeFrame = requestAnimationFrame(() => {
+        edgeFrame = 0;
+        view.value = shiftView(view.value, Math.max(-60, Math.min(60, over)) / 6 / Math.max(1, box.width) * span.value, duration.value);
+        if (dragging.value !== null) moveHandle();
+        else seek(timeAt(lastX));
+        edgeScroll();
+      });
+    }
+    function onTrackDown(event) {
+      if (off.value || event.pointerType === "mouse" && event.button !== 0) return;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      pointers.set(event.pointerId, event.clientX);
+      if (pointers.size === 2) {
+        scrubbing = false;
+        const [a, b] = [...pointers.values()];
+        pinch = { distance: Math.max(8, Math.abs(a - b)), anchor: timeAt((a + b) / 2) };
+        return;
+      }
+      if (pointers.size > 2) return;
+      event.preventDefault();
+      trackEl.value?.querySelector("[data-lp-playhead]")?.focus({ preventScroll: true });
+      pause();
+      scrubbing = true;
+      lastX = event.clientX;
+      seek(timeAt(event.clientX));
+    }
+    function onTrackMove(event) {
+      if (!pointers.has(event.pointerId)) return;
+      pointers.set(event.pointerId, event.clientX);
+      if (pinch && pointers.size === 2) {
+        const [a, b] = [...pointers.values()];
+        const distance = Math.max(8, Math.abs(a - b));
+        zoomBy(distance / pinch.distance, pinch.anchor);
+        pinch.distance = distance;
+        return;
+      }
+      if (!scrubbing) return;
+      lastX = event.clientX;
+      seek(timeAt(event.clientX));
+      edgeScroll();
+    }
+    function onTrackUp(event) {
+      pointers.delete(event.pointerId);
+      if (pointers.size < 2) pinch = null;
+      if (!pointers.size) scrubbing = false;
+    }
+    function onOverviewDown(event) {
+      if (off.value || event.button !== 0) return;
+      const box = event.currentTarget.getBoundingClientRect();
+      const centreAt = (clientX) => {
+        const centre = (clientX - box.left) / Math.max(1, box.width) * duration.value;
+        view.value = shiftView(view.value, centre - (view.value.start + view.value.end) / 2, duration.value);
+      };
+      centreAt(event.clientX);
+      startPointerDrag(event, { move: (e) => centreAt(e.clientX), end: () => {
+      } });
+    }
+    const STILL_HEIGHT = 56;
+    const stillWidth = computed(() => {
+      const { width, height } = videoSize.value;
+      return Math.round(Math.min(160, Math.max(40, width && height ? STILL_HEIGHT * width / height : STILL_HEIGHT * (16 / 9))));
+    });
+    const stillSeconds = computed(() => stillSpan(span.value / Math.max(1, trackWidth.value), stillWidth.value));
+    const stills = computed(() => {
+      if (!ready.value || !trackWidth.value) return [];
+      const step2 = stillSeconds.value;
+      const first = Math.floor(view.value.start / step2);
+      const last = Math.min(Math.ceil(view.value.end / step2), Math.ceil(duration.value / step2));
+      const out = [];
+      for (let k = first; k < last && out.length < 200; k++) {
+        out.push({ key: `${step2}:${k}`, time: Math.min(duration.value, k * step2 + step2 / 2), left: pct(k * step2), width: `${step2 / span.value * 100}%` });
+      }
+      return out;
+    });
+    const frames = shallowRef(/* @__PURE__ */ new Map());
+    let sampler = null;
+    let stillTimer;
+    watch(stills, (list) => {
+      clearTimeout(stillTimer);
+      stillTimer = setTimeout(() => {
+        if (!sampler) return;
+        const centre = (view.value.start + view.value.end) / 2;
+        sampler.want([...list].sort((a, b) => Math.abs(a.time - centre) - Math.abs(b.time - centre)));
+      }, 120);
+    });
+    function mountFrame(key, el) {
+      if (!isHTMLElement(el)) return;
+      const canvas = frames.value.get(key) ?? sampler?.cached(key);
+      if (canvas && canvas.parentElement !== el) el.replaceChildren(canvas);
+    }
+    const picture = computed(() => containRect(stageSize.value.width, stageSize.value.height, videoSize.value.width, videoSize.value.height));
+    const draft = ref(null);
+    const shownRegion = computed(() => draft.value ?? props.region ?? null);
+    function fractionAt(event) {
+      const box = stageEl.value?.getBoundingClientRect();
+      const p = picture.value;
+      if (!box || !p.width || !p.height) return { x: 0, y: 0 };
+      return { x: (event.clientX - box.left - p.x) / p.width, y: (event.clientY - box.top - p.y) / p.height };
+    }
+    function onRegionDown(handle, event) {
+      if (props.disabled || !props.regionSelect || event.pointerType === "mouse" && event.button !== 0) return;
+      event.stopPropagation();
+      pause();
+      const start = fractionAt(event);
+      const from = props.region ?? null;
+      startPointerDrag(event, {
+        move: (e) => {
+          const at = fractionAt(e);
+          draft.value = handle === "draw" || !from ? regionBetween(start.x, start.y, at.x, at.y) : adjustRegion(from, handle, at.x - start.x, at.y - start.y);
+        },
+        end: (completed) => {
+          const next = draft.value;
+          draft.value = null;
+          if (!completed || !next || handle === "draw" && (next.w < 0.01 || next.h < 0.01)) return;
+          emit("update:region", next);
+        }
+      });
+    }
+    function onRegionKey(event) {
+      const r = props.region;
+      if (!r || props.disabled) return;
+      if (event.key === "Delete" || event.key === "Backspace") {
+        event.preventDefault();
+        emit("update:region", null);
+        return;
+      }
+      const d = event.altKey ? 2e-3 : 0.01;
+      const moves = { ArrowLeft: [-d, 0], ArrowRight: [d, 0], ArrowUp: [0, -d], ArrowDown: [0, d] };
+      const move = moves[event.key];
+      if (!move) return;
+      event.preventDefault();
+      event.stopPropagation();
+      emit("update:region", adjustRegion(r, event.shiftKey ? "se" : "move", move[0], move[1]));
+    }
+    function onKeydown(event) {
+      const target = event.target;
+      if (event.defaultPrevented || event.ctrlKey || event.metaKey || target.closest("input, textarea, select, [contenteditable='true']")) return;
+      const handle = target.dataset.lpHandle;
+      const end = handle === "0" ? 0 : handle === "1" ? 1 : null;
+      const big = event.shiftKey ? 1 : frameStep.value;
+      const delta = { ArrowLeft: -big, ArrowRight: big, ArrowDown: -big, ArrowUp: big, PageDown: -10, PageUp: 10 };
+      if (event.key === " " && target.tagName !== "BUTTON") {
+        event.preventDefault();
+        togglePlay();
+      } else if (event.key in delta || event.key === "Home" || event.key === "End") {
+        if (off.value) return;
+        event.preventDefault();
+        if (end !== null) {
+          const from = local.value[end];
+          const to = event.key === "Home" ? 0 : event.key === "End" ? duration.value : from + delta[event.key];
+          const next = dragEnd(local.value, end, to, limits.value);
+          put(next, true);
+          pause();
+          seek(next[end]);
+        } else if (event.key === "Home" || event.key === "End") {
+          pause();
+          seek(event.key === "Home" ? 0 : duration.value);
+        } else step(delta[event.key]);
+        if (zoomed.value) view.value = revealTime(view.value, time.value, duration.value);
+      } else if ((event.key === "i" || event.key === "I" || event.key === "o" || event.key === "O") && !event.altKey) {
+        if (off.value) return;
+        event.preventDefault();
+        put(setEnd(local.value, event.key.toLowerCase() === "i" ? 0 : 1, time.value, limits.value), true);
+      }
+    }
+    const drafts = ref([null, null]);
+    const invalid = ref([false, false]);
+    const fieldText = (end) => drafts.value[end] ?? formatClipTime(local.value[end], true);
+    function onFieldInput(end, value) {
+      drafts.value[end] = value;
+      invalid.value[end] = false;
+    }
+    function commitField(end) {
+      const typed = drafts.value[end];
+      if (typed === null) return;
+      const t = parseClipTime(typed);
+      if (t === null) {
+        invalid.value[end] = true;
+        return;
+      }
+      drafts.value[end] = null;
+      put(setEnd(local.value, end, t, limits.value), true);
+      seek(local.value[end]);
+      if (zoomed.value) view.value = revealTime(view.value, local.value[end], duration.value);
+    }
+    function revertField(end) {
+      drafts.value[end] = null;
+      invalid.value[end] = false;
+    }
+    useResizeObserver(trackEl, (_, el) => trackWidth.value = el.clientWidth, { immediate: true });
+    useResizeObserver(stageEl, (_, el) => stageSize.value = { width: el.clientWidth, height: el.clientHeight }, { immediate: true });
+    function startSampler() {
+      sampler?.dispose();
+      sampler = samplerEl.value ? new FrameSampler(samplerEl.value, () => ({ width: stillWidth.value, height: STILL_HEIGHT }), (key, canvas) => {
+        const next = new Map(frames.value);
+        next.set(key, canvas);
+        if (next.size > 240) next.delete(next.keys().next().value);
+        frames.value = next;
+      }) : null;
+    }
+    watch(
+      () => props.src,
+      () => {
+        duration.value = 0;
+        failure.value = null;
+        time.value = 0;
+        frames.value = /* @__PURE__ */ new Map();
+        seekBusy = false;
+        seekTarget = null;
+        void nextTick(startSampler);
+      }
+    );
+    onMounted(startSampler);
+    onBeforeUnmount(() => {
+      sampler?.dispose();
+      clearTimeout(stillTimer);
+      if (frame) cancelAnimationFrame(frame);
+      if (edgeFrame) cancelAnimationFrame(edgeFrame);
+      for (const el of [videoEl.value, samplerEl.value]) {
+        if (!el) continue;
+        el.pause();
+        el.removeAttribute("src");
+        el.load();
+      }
+    });
+    __expose({
+      play: () => videoEl.value?.paused ? togglePlay() : void 0,
+      pause,
+      seek,
+      /** The playhead, in seconds. */
+      currentTime: () => time.value
+    });
+    const handleText = (t) => formatClipTime(t, true);
+    const leftText = computed(
+      () => Number.isFinite(limits.value.maxClip) ? text.value.left.replace("{left}", formatClipTime(Math.max(0, limits.value.maxClip - clipLength.value), true)).replace("{max}", formatClipTime(limits.value.maxClip, true)) : ""
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({ class: unref(rootClass) }, unref(rest), {
+        "data-disabled": __props.disabled || void 0,
+        onKeydown
+      }), [
+        createElementVNode("div", {
+          ref_key: "stageEl",
+          ref: stageEl,
+          class: "relative aspect-video w-full overflow-hidden rounded-card bg-black"
+        }, [
+          createElementVNode("video", {
+            ref_key: "videoEl",
+            ref: videoEl,
+            class: "absolute inset-0 size-full object-contain",
+            src: __props.src,
+            poster: __props.poster,
+            preload: "metadata",
+            playsinline: "",
+            muted: muted.value,
+            onLoadedmetadata: onMetadata,
+            onDurationchange: onDurationChange,
+            onSeeked,
+            onPlay,
+            onPause,
+            onError,
+            onClick: _cache[0] || (_cache[0] = ($event) => !__props.regionSelect && togglePlay())
+          }, null, 40, _hoisted_2),
+          createElementVNode("video", {
+            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),
+          __props.regionSelect && ready.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "absolute cursor-crosshair touch-none",
+            style: normalizeStyle({ left: `${picture.value.x}px`, top: `${picture.value.y}px`, width: `${picture.value.width}px`, height: `${picture.value.height}px` }),
+            "data-lp-region-layer": "",
+            onPointerdown: _cache[2] || (_cache[2] = ($event) => onRegionDown("draw", $event))
+          }, [
+            shownRegion.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "absolute cursor-move rounded-inner border-2 border-dashed border-white bg-brand/25 shadow-[0_0_0_9999px_rgb(0_0_0/0.35)] outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              style: normalizeStyle({ left: `${shownRegion.value.x * 100}%`, top: `${shownRegion.value.y * 100}%`, width: `${shownRegion.value.w * 100}%`, height: `${shownRegion.value.h * 100}%` }),
+              tabindex: "0",
+              role: "group",
+              "aria-label": unref(text).region,
+              "data-lp-region": "",
+              onPointerdown: _cache[1] || (_cache[1] = ($event) => onRegionDown("move", $event)),
+              onKeydown: onRegionKey
+            }, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(["nw", "ne", "sw", "se"], (corner) => {
+                return createElementVNode("span", {
+                  key: corner,
+                  class: normalizeClass(["absolute grid size-6 place-items-center pointer-coarse:size-11", [
+                    corner[0] === "n" ? "top-0 -translate-y-1/2" : "bottom-0 translate-y-1/2",
+                    corner[1] === "w" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2",
+                    corner === "nw" || corner === "se" ? "cursor-nwse-resize" : "cursor-nesw-resize"
+                  ]]),
+                  "data-lp-corner": corner,
+                  onPointerdown: ($event) => onRegionDown(corner, $event)
+                }, [..._cache[8] || (_cache[8] = [
+                  createElementVNode("span", { class: "size-3 rounded-pill border-2 border-white bg-brand shadow" }, null, -1)
+                ])], 42, _hoisted_5);
+              }), 64))
+            ], 44, _hoisted_4)) : createCommentVNode("", true)
+          ], 36)) : createCommentVNode("", true),
+          failure.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            createVNode(_sfc_main$1, {
+              name: "lucide:video-off",
+              size: 32
+            }),
+            createElementVNode("p", null, toDisplayString(failure.value === "unsupported" ? unref(text).unsupported : unref(text).failed), 1)
+          ])) : createCommentVNode("", true)
+        ], 512),
+        createElementVNode("div", _hoisted_7, [
+          createVNode(_sfc_main$2, {
+            size: "sm",
+            variant: "ghost",
+            square: "",
+            disabled: off.value,
+            "aria-label": playing.value ? unref(text).pause : unref(text).play,
+            title: playing.value ? unref(text).pause : unref(text).play,
+            onClick: togglePlay
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                name: playing.value ? "lucide:pause" : "lucide:play",
+                size: 16
+              }, null, 8, ["name"])
+            ]),
+            _: 1
+          }, 8, ["disabled", "aria-label", "title"]),
+          createVNode(_sfc_main$2, {
+            size: "sm",
+            variant: "ghost",
+            square: "",
+            disabled: off.value,
+            "aria-label": unref(text).stepBack,
+            title: unref(text).stepBack,
+            onClick: _cache[3] || (_cache[3] = ($event) => step(-frameStep.value))
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                name: "lucide:step-back",
+                size: 16
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled", "aria-label", "title"]),
+          createVNode(_sfc_main$2, {
+            size: "sm",
+            variant: "ghost",
+            square: "",
+            disabled: off.value,
+            "aria-label": unref(text).stepForward,
+            title: unref(text).stepForward,
+            onClick: _cache[4] || (_cache[4] = ($event) => step(frameStep.value))
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                name: "lucide:step-forward",
+                size: 16
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled", "aria-label", "title"]),
+          createElementVNode("span", _hoisted_8, [
+            createElementVNode("span", _hoisted_9, toDisplayString(unref(formatClipTime)(time.value, true)), 1),
+            createTextVNode(" / " + toDisplayString(unref(formatClipTime)(duration.value, true)), 1)
+          ]),
+          createVNode(_sfc_main$2, {
+            size: "sm",
+            variant: "ghost",
+            square: "",
+            disabled: !ready.value,
+            "aria-label": muted.value ? unref(text).unmute : unref(text).mute,
+            title: muted.value ? unref(text).unmute : unref(text).mute,
+            "aria-pressed": muted.value,
+            onClick: toggleMute
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                name: muted.value ? "lucide:volume-x" : "lucide:volume-2",
+                size: 16
+              }, null, 8, ["name"])
+            ]),
+            _: 1
+          }, 8, ["disabled", "aria-label", "title", "aria-pressed"]),
+          _cache[9] || (_cache[9] = createElementVNode("span", { class: "flex-1" }, null, -1)),
+          createVNode(_sfc_main$2, {
+            size: "sm",
+            variant: "ghost",
+            square: "",
+            disabled: off.value || !zoomed.value,
+            "aria-label": unref(text).zoomOut,
+            title: unref(text).zoomOut,
+            onClick: _cache[5] || (_cache[5] = ($event) => zoomBy(0.5))
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                name: "lucide:zoom-out",
+                size: 16
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled", "aria-label", "title"]),
+          createVNode(_sfc_main$2, {
+            size: "sm",
+            variant: "ghost",
+            square: "",
+            disabled: off.value || !canZoomIn.value,
+            "aria-label": unref(text).zoomIn,
+            title: unref(text).zoomIn,
+            onClick: _cache[6] || (_cache[6] = ($event) => zoomBy(2))
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                name: "lucide:zoom-in",
+                size: 16
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled", "aria-label", "title"]),
+          createVNode(_sfc_main$2, {
+            size: "sm",
+            variant: "ghost",
+            square: "",
+            disabled: off.value || !zoomed.value,
+            "aria-label": unref(text).zoomFit,
+            title: unref(text).zoomFit,
+            onClick: fit
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                name: "lucide:maximize-2",
+                size: 16
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled", "aria-label", "title"])
+        ]),
+        createElementVNode("div", {
+          class: "relative",
+          onWheel
+        }, [
+          createElementVNode("div", _hoisted_10, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(marks.value, (m) => {
+              return openBlock(), createElementBlock("span", {
+                key: m,
+                class: normalizeClass(["absolute top-0 whitespace-nowrap", xOf(m) < 16 ? "" : xOf(m) > trackWidth.value - 16 ? "-translate-x-full" : "-translate-x-1/2"]),
+                style: normalizeStyle({ left: pct(m) })
+              }, toDisplayString(unref(formatClipTime)(m, markDigits.value)), 7);
+            }), 128))
+          ]),
+          createElementVNode("div", {
+            ref_key: "trackEl",
+            ref: trackEl,
+            class: normalizeClass(["relative h-14 touch-none rounded-control bg-surface-soft", off.value ? "opacity-60" : "cursor-text"]),
+            "aria-label": unref(text).timeline,
+            role: "group",
+            onPointerdown: onTrackDown,
+            onPointermove: onTrackMove,
+            onPointerup: onTrackUp,
+            onPointercancel: onTrackUp
+          }, [
+            createElementVNode("div", _hoisted_12, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(stills.value, (s) => {
+                return openBlock(), createElementBlock("div", {
+                  key: s.key,
+                  ref_for: true,
+                  ref: (el) => mountFrame(s.key, el),
+                  class: normalizeClass(["lp-trim-still absolute inset-y-0 overflow-hidden border-r border-black/20 [&>canvas]:size-full [&>canvas]:object-cover", { "lp-trim-still-in": !unref(reduced) }]),
+                  style: normalizeStyle({ left: s.left, width: s.width }),
+                  "data-lp-still": frames.value.has(s.key) ? "ready" : "pending"
+                }, null, 14, _hoisted_13);
+              }), 128)),
+              createElementVNode("div", {
+                class: "absolute inset-y-0 left-0 bg-black/55",
+                style: normalizeStyle({ width: `${Math.max(0, xOf(local.value[0]))}px` })
+              }, null, 4),
+              createElementVNode("div", {
+                class: "absolute inset-y-0 right-0 bg-black/55",
+                style: normalizeStyle({ left: `${Math.min(trackWidth.value, Math.max(0, xOf(local.value[1])))}px` })
+              }, null, 4)
+            ]),
+            ready.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "pointer-events-none absolute inset-y-0 border-y-2 border-brand",
+              style: normalizeStyle({ left: pct(local.value[0]), width: `${clipLength.value / span.value * 100}%` }),
+              "data-lp-range": ""
+            }, null, 4)) : createCommentVNode("", true),
+            (openBlock(), createElementBlock(Fragment, null, renderList([0, 1], (end) => {
+              return withDirectives(createElementVNode("div", {
+                key: end,
+                class: normalizeClass(["group/handle absolute inset-y-0 z-10 flex w-6 touch-none items-stretch outline-none pointer-coarse:w-11", [end === 0 ? "justify-start" : "-translate-x-full justify-end", off.value ? "" : "cursor-ew-resize"]]),
+                style: normalizeStyle({ left: pct(local.value[end]) }),
+                role: "slider",
+                tabindex: off.value ? -1 : 0,
+                "aria-label": end === 0 ? unref(text).start : unref(text).end,
+                "aria-valuemin": 0,
+                "aria-valuemax": Math.round(duration.value * 1e3) / 1e3,
+                "aria-valuenow": local.value[end],
+                "aria-valuetext": handleText(local.value[end]),
+                "aria-disabled": off.value || void 0,
+                "data-lp-handle": end,
+                onPointerdown: ($event) => onHandleDown(end, $event)
+              }, [
+                createElementVNode("span", {
+                  class: normalizeClass(["flex w-3 items-center justify-center bg-brand transition-[width] duration-(--duration-fast) group-focus-visible/handle:ring-2 group-focus-visible/handle:ring-ring motion-reduce:transition-none", end === 0 ? "rounded-l-control" : "rounded-r-control"])
+                }, [..._cache[10] || (_cache[10] = [
+                  createElementVNode("span", { class: "h-5 w-0.5 rounded-pill bg-white/85" }, null, -1)
+                ])], 2)
+              ], 46, _hoisted_14), [
+                [vShow, ready.value]
+              ]);
+            }), 64)),
+            withDirectives(createElementVNode("div", {
+              class: "absolute -top-4 bottom-0 z-20 w-0 outline-none",
+              style: normalizeStyle({ left: pct(time.value) }),
+              role: "slider",
+              tabindex: off.value ? -1 : 0,
+              "aria-label": unref(text).position,
+              "aria-valuemin": 0,
+              "aria-valuemax": Math.round(duration.value * 1e3) / 1e3,
+              "aria-valuenow": Math.round(time.value * 1e3) / 1e3,
+              "aria-valuetext": handleText(time.value),
+              "data-lp-playhead": ""
+            }, [..._cache[11] || (_cache[11] = [
+              createElementVNode("span", { class: "pointer-events-none absolute inset-y-0 -left-px w-0.5 bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.45)]" }, null, -1),
+              createElementVNode("span", { class: "pointer-events-none absolute -top-0.5 -left-1.5 size-3 rounded-pill border-2 border-white bg-ink shadow [[data-lp-playhead]:focus-visible_&]:ring-2 [[data-lp-playhead]:focus-visible_&]:ring-ring" }, null, -1)
+            ])], 12, _hoisted_15), [
+              [vShow, ready.value && time.value >= view.value.start && time.value <= view.value.end]
+            ])
+          ], 42, _hoisted_11),
+          zoomed.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "relative mt-1.5 h-2 cursor-pointer touch-none rounded-pill bg-surface-soft",
+            "aria-label": unref(text).overview,
+            role: "presentation",
+            "data-lp-overview": "",
+            onPointerdown: onOverviewDown
+          }, [
+            createElementVNode("span", {
+              class: "absolute inset-y-0 rounded-pill bg-brand/45",
+              style: normalizeStyle({ left: `${local.value[0] / duration.value * 100}%`, width: `${clipLength.value / duration.value * 100}%` })
+            }, null, 4),
+            createElementVNode("span", {
+              class: "absolute -inset-y-0.5 rounded-pill border-2 border-ink/70",
+              style: normalizeStyle({ left: `${view.value.start / duration.value * 100}%`, width: `${span.value / duration.value * 100}%` })
+            }, null, 4)
+          ], 40, _hoisted_16)) : createCommentVNode("", true)
+        ], 32),
+        createElementVNode("div", _hoisted_17, [
+          (openBlock(), createElementBlock(Fragment, null, renderList([0, 1], (end) => {
+            return createElementVNode("label", {
+              key: end,
+              class: "flex flex-col gap-1"
+            }, [
+              createElementVNode("span", _hoisted_18, toDisplayString(end === 0 ? unref(text).start : unref(text).end), 1),
+              createVNode(_sfc_main$3, {
+                size: "sm",
+                class: "w-28 font-mono tabular-nums",
+                "model-value": fieldText(end),
+                disabled: off.value,
+                invalid: invalid.value[end],
+                title: invalid.value[end] ? unref(text).invalidTime : void 0,
+                inputmode: "decimal",
+                spellcheck: "false",
+                autocomplete: "off",
+                "data-lp-time": end,
+                "onUpdate:modelValue": ($event) => onFieldInput(end, $event),
+                onBlur: ($event) => commitField(end),
+                onKeydown: [
+                  withKeys(withModifiers(($event) => commitField(end), ["prevent"]), ["enter"]),
+                  withKeys(($event) => revertField(end), ["esc"])
+                ]
+              }, null, 8, ["model-value", "disabled", "invalid", "title", "data-lp-time", "onUpdate:modelValue", "onBlur", "onKeydown"])
+            ]);
+          }), 64)),
+          createElementVNode("div", _hoisted_19, [
+            createElementVNode("span", _hoisted_20, toDisplayString(unref(text).length), 1),
+            createElementVNode("span", _hoisted_21, toDisplayString(unref(formatClipTime)(clipLength.value, true)), 1)
+          ]),
+          leftText.value ? (openBlock(), createElementBlock("span", _hoisted_22, toDisplayString(leftText.value), 1)) : createCommentVNode("", true),
+          _cache[12] || (_cache[12] = createElementVNode("span", { class: "flex-1" }, null, -1)),
+          __props.regionSelect ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            __props.region ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              size: "sm",
+              variant: "outline",
+              disabled: __props.disabled,
+              onClick: _cache[7] || (_cache[7] = ($event) => emit("update:region", null))
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$1, {
+                  name: "lucide:x",
+                  size: 14
+                }),
+                createTextVNode(toDisplayString(unref(text).regionClear), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"])) : (openBlock(), createElementBlock("span", _hoisted_23, toDisplayString(unref(text).regionHint), 1))
+          ], 64)) : createCommentVNode("", true)
+        ])
+      ], 16, _hoisted_1);
+    };
+  }
+});
+const LpVideoTrim = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-04a3a07a"]]);
+export {
+  LpVideoTrim as default
+};