@leavepulse/ui 0.81.0 → 0.83.0

package/src/components/videoTrim.ts

@@ -0,0 +1,186 @@
+/*
+ * The arithmetic behind LpVideoTrim, kept apart from the component so the
+ * rules a server will rely on (what range comes out, what a typed time means)
+ * are tested without a video.
+ */
+import { clamp } from "../composables/clamp"
+import { shiftSpan, zoomSpan } from "../composables/span"
+
+export type TimeRange = [number, number]
+
+/** A rectangle on the video's frame, every value a fraction of it (0..1). */
+export interface FrameRegion {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+export interface RangeLimits {
+  duration: number
+  /** Shortest clip, seconds. */
+  minClip: number
+  /** Longest clip, seconds; Infinity for none. */
+  maxClip: number
+}
+
+/* Milliseconds: finer than any frame, and what an ffmpeg -ss argument takes. */
+const round = (t: number) => Math.round(t * 1000) / 1000
+
+/**
+ * A typed time, the inverse of `formatClipTime`: "75", "75.5", "1:15",
+ * "75:00.5", and "1:02:03.25" for whoever types the hours. A comma reads as
+ * the decimal point, as a Russian keyboard's numpad types it. Anything else,
+ * a negative or a seconds field past 59 after a colon, is null.
+ */
+export function parseClipTime(text: string): number | null {
+  const value = text.trim().replace(",", ".")
+  if (!/^\d+(:\d{1,2}){0,2}(\.\d*)?$/.test(value)) return null
+  const parts = value.split(":")
+  let total = 0
+  for (const [i, part] of parts.entries()) {
+    const n = Number(part)
+    if (!Number.isFinite(n)) return null
+    if (i > 0 && n >= 60) return null
+    total = total * 60 + n
+  }
+  return total
+}
+
+function limitsOf(l: RangeLimits) {
+  const duration = Math.max(0, l.duration)
+  const min = clamp(l.minClip, 0, duration)
+  const max = Math.max(min, l.maxClip)
+  return { duration, min, max }
+}
+
+/** A range that keeps every limit: inside the video, no shorter than minClip, no longer than maxClip. */
+export function normalizeRange(range: TimeRange | null | undefined, limits: RangeLimits): TimeRange {
+  const { duration, min, max } = limitsOf(limits)
+  if (!range || !Number.isFinite(range[0]) || !Number.isFinite(range[1])) return [0, round(Math.min(duration, max))]
+  let [a, b] = range[0] <= range[1] ? range : [range[1], range[0]]
+  a = clamp(a, 0, Math.max(0, duration - min))
+  b = clamp(b, a + min, Math.min(duration, a + max))
+  return [round(a), round(b)]
+}
+
+/**
+ * One end dragged to `t`. The dragged end stops at a limit and the other end
+ * stays put: a handle that pushed its partner would move the clip's other
+ * edge without the person touching it.
+ */
+export function dragEnd(range: TimeRange, end: 0 | 1, t: number, limits: RangeLimits): TimeRange {
+  const { duration, min, max } = limitsOf(limits)
+  const [a, b] = range
+  if (end === 0) return [round(clamp(t, Math.max(0, b - max), b - min)), b]
+  return [a, round(clamp(t, a + min, Math.min(duration, a + max)))]
+}
+
+/**
+ * One end set to `t` on purpose (the I or O key, a typed time). That end goes
+ * where it was told, and the other follows when a limit asks for it.
+ */
+export function setEnd(range: TimeRange, end: 0 | 1, t: number, limits: RangeLimits): TimeRange {
+  const { duration, min, max } = limitsOf(limits)
+  const [a, b] = range
+  if (end === 0) {
+    const start = clamp(t, 0, duration - min)
+    return [round(start), round(clamp(b, start + min, Math.min(duration, start + max)))]
+  }
+  const stop = clamp(t, min, duration)
+  return [round(clamp(a, Math.max(0, stop - max), stop - min)), round(stop)]
+}
+
+export interface TimeView {
+  start: number
+  end: number
+}
+
+/** The view zoomed by `factor` (above 1 zooms in) around `anchor`, which stays where it is on screen. */
+export function zoomView(view: TimeView, anchor: number, factor: number, duration: number, minSpan: number): TimeView {
+  const span = view.end - view.start
+  // No wider than the video: the shared zoom only floors the width, so cap the factor here.
+  const next = zoomSpan(view.start, view.end, anchor, Math.min(1 / factor, duration / (span || 1)), Math.min(minSpan, duration))
+  return shiftView(next, 0, duration)
+}
+
+/** The view moved by `delta` seconds, held inside the video. */
+export function shiftView(view: TimeView, delta: number, duration: number): TimeView {
+  const span = Math.min(view.end - view.start, duration)
+  return shiftSpan(view.start, view.start + span, delta, 0, duration)
+}
+
+/** The view moved just enough to show `t`, with `margin` of its span to spare. */
+export function revealTime(view: TimeView, t: number, duration: number, margin = 0.1): TimeView {
+  const span = view.end - view.start
+  const pad = span * margin
+  if (t < view.start + pad) return shiftView(view, t - pad - view.start, duration)
+  if (t > view.end - pad) return shiftView(view, t + pad - view.end, duration)
+  return view
+}
+
+const TICK_STEPS = [0.1, 0.2, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600, 7200]
+
+/** Seconds between ruler marks, so that marks stand at least `minPx` apart. */
+export function tickStep(span: number, width: number, minPx = 72): number {
+  if (span <= 0 || width <= 0) return 1
+  const perPx = span / width
+  return TICK_STEPS.find((step) => step / perPx >= minPx) ?? TICK_STEPS[TICK_STEPS.length - 1]!
+}
+
+/** The ruler's marks within the view. */
+export function ticks(view: TimeView, step: number): number[] {
+  const out: number[] = []
+  const first = Math.ceil(view.start / step - 1e-9) * step
+  for (let t = first; t <= view.end + 1e-9 && out.length < 500; t += step) out.push(round(t))
+  return out
+}
+
+/**
+ * Where the picture sits in a box that shows it whole (object-fit: contain):
+ * the region is drawn on the picture, not on the black bars around it.
+ */
+export function containRect(boxWidth: number, boxHeight: number, videoWidth: number, videoHeight: number) {
+  if (!videoWidth || !videoHeight || !boxWidth || !boxHeight) return { x: 0, y: 0, width: boxWidth, height: boxHeight }
+  const scale = Math.min(boxWidth / videoWidth, boxHeight / videoHeight)
+  const width = videoWidth * scale
+  const height = videoHeight * scale
+  return { x: (boxWidth - width) / 2, y: (boxHeight - height) / 2, width, height }
+}
+
+const fix = (n: number) => Math.round(n * 10000) / 10000
+
+/** A region held inside the frame and no smaller than `minSize` a side. */
+export function clampRegion(r: FrameRegion, minSize = 0.02): FrameRegion {
+  const w = clamp(r.w, minSize, 1)
+  const h = clamp(r.h, minSize, 1)
+  return { x: fix(clamp(r.x, 0, 1 - w)), y: fix(clamp(r.y, 0, 1 - h)), w: fix(w), h: fix(h) }
+}
+
+/** The region spanned by two corners, in either order, cut to the frame. */
+export function regionBetween(ax: number, ay: number, bx: number, by: number): FrameRegion {
+  const x0 = clamp(Math.min(ax, bx), 0, 1)
+  const y0 = clamp(Math.min(ay, by), 0, 1)
+  const x1 = clamp(Math.max(ax, bx), 0, 1)
+  const y1 = clamp(Math.max(ay, by), 0, 1)
+  return { x: fix(x0), y: fix(y0), w: fix(x1 - x0), h: fix(y1 - y0) }
+}
+
+export type RegionHandle = "move" | "nw" | "ne" | "sw" | "se"
+
+/** The region after one of its handles moved by (dx, dy), fractions of the frame. */
+export function adjustRegion(r: FrameRegion, handle: RegionHandle, dx: number, dy: number, minSize = 0.02): FrameRegion {
+  if (handle === "move") return clampRegion({ ...r, x: r.x + dx, y: r.y + dy }, minSize)
+  let x0 = r.x
+  let y0 = r.y
+  let x1 = r.x + r.w
+  let y1 = r.y + r.h
+  if (handle === "nw" || handle === "sw") x0 = clamp(x0 + dx, 0, x1 - minSize)
+  else x1 = clamp(x1 + dx, x0 + minSize, 1)
+  if (handle === "nw" || handle === "ne") y0 = clamp(y0 + dy, 0, y1 - minSize)
+  else y1 = clamp(y1 + dy, y0 + minSize, 1)
+  return { x: fix(x0), y: fix(y0), w: fix(x1 - x0), h: fix(y1 - y0) }
+}
+
+/** Why the editor has no video to show; see `VideoErrorCause`. */
+export type { VideoErrorCause as VideoTrimErrorCause } from "../composables/useVideoMedia"

package/src/composables/span.ts

@@ -0,0 +1,21 @@
+/*
+ * A window onto a line (a chart's points, a video's seconds): zoomed around a
+ * point that stays put, or slid along without changing its width. Shared by
+ * LpChart's window and LpVideoTrim's timeline, which differ only in what they
+ * round to and how they hold the result inside their bounds.
+ */
+
+/** The window zoomed by `factor` (below 1 is in) around `anchor`, a position on the line; no wider than it was asked, no narrower than `minSpan`. */
+export function zoomSpan(start: number, end: number, anchor: number, factor: number, minSpan: number): { start: number; end: number } {
+  const span = end - start
+  const next = Math.max(minSpan, span * factor)
+  const from = anchor - (anchor - start) * (next / (span || 1))
+  return { start: from, end: from + next }
+}
+
+/** The window moved by `delta`, its width kept, stopped at `lo` and `hi`. */
+export function shiftSpan(start: number, end: number, delta: number, lo: number, hi: number): { start: number; end: number } {
+  const span = end - start
+  const from = Math.max(lo, Math.min(hi - span, start + delta))
+  return { start: from, end: from + span }
+}

package/src/composables/useVideoMedia.ts

@@ -0,0 +1,411 @@
+import { onBeforeUnmount, ref, watch, type Ref } from "vue"
+import { SLOWEST_RATE } from "../components/videoBackdrop"
+import { nodeWindow } from "./realm"
+import { usePersisted } from "./usePersisted"
+import { usePrefersReducedMotion } from "./useReducedMotion"
+import { useTween } from "./useTween"
+
+/*
+ * The state of a <video> as a component that draws its own controls needs it,
+ * shared by LpVideoPlayer and LpVideoTrim so both know the same things about
+ * a video the same way:
+ *
+ * - One seek at a time, the latest wins: a drag asks for a position on every
+ *   pointer move, and WebKitGTK's pipeline stalls on a seek started inside
+ *   another.
+ * - A MediaRecorder WebM carries no duration until its end has been seen: it
+ *   is found by seeking far past it once.
+ * - Chromium answers a 404, or a login page served in place of an expired
+ *   session's video, with "format not supported", the same code as a real
+ *   codec problem; one byte of the address tells the two apart.
+ * - The playhead follows the picture every frame while playing, not the four
+ *   `timeupdate`s a second.
+ *
+ * Bind `listeners` on the element with `v-on`.
+ */
+
+/**
+ * Why there is no video to show:
+ * - "load": the address did not answer (network, 404, an expired session);
+ * - "decode": the file arrived but is damaged;
+ * - "unsupported": a format or codec this browser cannot play (H.265 in
+ *   Chromium without hardware support, ProRes anywhere).
+ */
+export type VideoErrorCause = "load" | "decode" | "unsupported"
+
+export function mediaErrorCause(error: MediaError | null): VideoErrorCause {
+  if (error?.code === 3) return "decode"
+  if (error?.code === 4) return "unsupported"
+  return "load"
+}
+
+export interface UseVideoMediaOptions {
+  src: () => string
+  /** Every frame while playing, after `time` is updated. */
+  onFrame?: () => void
+  onError?: (cause: VideoErrorCause) => void
+  /** Ease starts and stops (true by default); false cuts in and out at once. */
+  ease?: () => boolean
+  /**
+   * Keep volume, mute and speed between videos on this device, shared by every
+   * player and editor of the kit: someone who turned the sound down turned it
+   * down, whichever component the next video is in. False forgets.
+   */
+  remember?: () => boolean
+}
+
+interface Sound {
+  volume: number
+  muted: boolean
+  rate: number
+}
+/*
+ * A kept record is used only when it is one a person could have chosen: a
+ * speed outside what the menus offer, or a volume outside 0..1, is a record
+ * written by an easing caught mid-way (a sixteenth speed and silence, once),
+ * and restoring it would start every video stuck.
+ */
+const isSound = (v: unknown): v is Sound => {
+  if (!v || typeof v !== "object") return false
+  const { volume, muted, rate } = v as Sound
+  return typeof muted === "boolean" && typeof volume === "number" && volume >= 0 && volume <= 1 && typeof rate === "number" && rate >= 0.25 && rate <= 4
+}
+
+export function useVideoMedia(el: Ref<HTMLVideoElement | null>, options: UseVideoMediaOptions) {
+  const duration = ref(0)
+  const time = ref(0)
+  const playing = ref(false)
+  /** Playback stalled for data. */
+  const waiting = ref(false)
+  const ended = ref(false)
+  const muted = ref(false)
+  const volume = ref(1)
+  const rate = ref(1)
+  /** Buffered stretches as fractions of the duration. */
+  const buffered = ref<[number, number][]>([])
+  const failure = ref<VideoErrorCause | null>(null)
+  const size = ref({ width: 0, height: 0 })
+
+  const sound = usePersisted<Sound>(() => (options.remember?.() ?? true) && "lp-video:sound", { volume: 1, muted: false, rate: 1 }, { validate: isSound })
+  /* Applied once per address, when it first knows its duration; saved only after, so a fresh element's defaults never overwrite what was kept. */
+  let applied = ""
+
+  let seekBusy = false
+  let seekTarget: number | null = null
+  let probingDuration = false
+  let frame = 0
+
+  function seek(t: number) {
+    const video = el.value
+    const target = Math.min(Math.max(0, t), duration.value || t)
+    time.value = target
+    ended.value = false
+    if (!video) return
+    if (seekBusy) {
+      seekTarget = target
+      return
+    }
+    seekBusy = true
+    video.currentTime = target
+  }
+
+  /*
+   * `currentTime` moves in steps, one per decoded frame: at a few frames a
+   * second (a screen recording, a slideshow) a bar or a playhead driven by it
+   * jumps along. Between steps the position runs on the clock from the last
+   * one, at the playback rate; it never goes back (a step that lands a hair
+   * behind the estimate is held), and never runs more than a moment ahead of
+   * the video, so a stall shows as a stop, not as a bar that keeps going.
+   */
+  const AHEAD_LIMIT = 0.25
+  let lastMedia = -1
+  let lastAt = 0
+  function smoothTime(video: HTMLVideoElement, now: number): number {
+    const t = video.currentTime
+    if (t !== lastMedia) {
+      lastMedia = t
+      lastAt = now
+    }
+    const estimate = Math.min(lastMedia + ((now - lastAt) / 1000) * video.playbackRate, lastMedia + AHEAD_LIMIT, duration.value || Infinity)
+    return Math.max(estimate, Math.min(time.value, lastMedia + AHEAD_LIMIT))
+  }
+
+  function tick(now: number) {
+    frame = 0
+    const video = el.value
+    if (!video || !playing.value) return
+    if (!seekBusy) time.value = smoothTime(video, now)
+    options.onFrame?.()
+    if (playing.value) frame = nodeWindow(video).requestAnimationFrame(tick)
+  }
+  function stopTicking() {
+    if (frame && el.value) nodeWindow(el.value).cancelAnimationFrame(frame)
+    frame = 0
+  }
+
+  function readBuffered(video: HTMLVideoElement) {
+    const d = duration.value
+    if (!d) return
+    const out: [number, number][] = []
+    for (let i = 0; i < video.buffered.length; i++) out.push([video.buffered.start(i) / d, video.buffered.end(i) / d])
+    buffered.value = out
+  }
+
+  async function probe(src: string): Promise<VideoErrorCause> {
+    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 {
+      // Another origin without CORS: there is no telling, so the browser's word stands.
+      return "unsupported"
+    }
+  }
+
+  const listeners = {
+    loadedmetadata() {
+      const video = el.value
+      if (!video) return
+      size.value = { width: video.videoWidth, height: video.videoHeight }
+      if (applied !== options.src()) {
+        applied = options.src()
+        volume.value = sound.value.volume
+        rate.value = sound.value.rate
+        video.muted = video.muted || sound.value.muted
+        muted.value = video.muted
+        video.volume = volume.value
+        video.playbackRate = rate.value
+      }
+      if (Number.isFinite(video.duration)) {
+        duration.value = video.duration
+        return
+      }
+      probingDuration = true
+      video.currentTime = 1e101
+    },
+    durationchange() {
+      const video = el.value
+      if (!video || !Number.isFinite(video.duration) || !video.duration) return
+      duration.value = video.duration
+      if (probingDuration) {
+        probingDuration = false
+        video.currentTime = 0
+      }
+    },
+    seeked() {
+      seekBusy = false
+      lastMedia = -1
+      if (seekTarget !== null) {
+        const next = seekTarget
+        seekTarget = null
+        seek(next)
+      } else if (el.value && !playing.value) time.value = el.value.currentTime
+    },
+    play() {
+      lastMedia = -1
+      // Started from outside (media keys, the picture-in-picture window): it wants to play now.
+      wantsPlay.value = true
+      playing.value = true
+      ended.value = false
+      if (!frame && el.value) frame = nodeWindow(el.value).requestAnimationFrame(tick)
+    },
+    pause() {
+      wantsPlay.value = false
+      playing.value = false
+      stopTicking()
+      if (el.value && !seekBusy) time.value = el.value.currentTime
+    },
+    ended() {
+      instant = true
+      wantsPlay.value = false
+      ended.value = true
+    },
+    waiting() {
+      waiting.value = true
+    },
+    playing() {
+      waiting.value = false
+    },
+    canplay() {
+      waiting.value = false
+    },
+    timeupdate() {
+      if (el.value && !playing.value && !seekBusy) time.value = el.value.currentTime
+    },
+    progress() {
+      if (el.value) readBuffered(el.value)
+    },
+    volumechange() {
+      const video = el.value
+      if (!video) return
+      // Firefox reports itself muted below a quarter speed: during the easing that is the easing's.
+      if (!easing()) muted.value = video.muted
+      if (easing() || video.volume === written.volume) return
+      volume.value = video.volume
+      remember()
+    },
+    ratechange() {
+      const video = el.value
+      if (!video || easing() || video.playbackRate === written.rate) return
+      rate.value = video.playbackRate
+      remember()
+    },
+    async error() {
+      const video = el.value
+      if (!video?.error) return
+      const src = options.src()
+      let cause = mediaErrorCause(video.error)
+      if (cause === "unsupported") cause = await probe(src)
+      if (src !== options.src()) return
+      failure.value = cause
+      waiting.value = false
+      options.onError?.(cause)
+    },
+  }
+
+  /*
+   * Start and stop are eased, as LpVideoBackdrop's `easePlayback` is: a play
+   * gathers speed and sound from a standstill over a moment, a pause slows and
+   * quietens to one, instead of the picture and the sound cutting in and out
+   * in a single frame (and the sound with a click). `wantsPlay` turns at once,
+   * so a button's icon answers the press; the element follows. A pause for a
+   * seek or a drag, or at a clip's end, is `instant`: there the exact frame
+   * matters more than the glide. Reduced motion has no easing at all.
+   */
+  const wantsPlay = ref(false)
+  let instant = false
+  const reducedMotion = usePrefersReducedMotion()
+  const throttle = useTween<number>(
+    () => (wantsPlay.value ? 1 : 0),
+    (from, to, k) => from + (to - from) * k,
+    { enabled: () => !instant && !reducedMotion.value && (options.ease?.() ?? true) },
+  )
+  /*
+   * Only around playback: a paused element keeps its real rate and volume.
+   * Firefox silences sound below a quarter speed and reports the element as
+   * muted meanwhile, so a paused video held at the slowest rate came up muted
+   * and would not be unmuted. While the rate eases, what the element reports
+   * about its sound is the easing's, not a choice, and is not taken as one.
+   */
+  /* What the easing itself last wrote: the element's later report of the same value is an echo, not a choice. */
+  const written = { rate: Number.NaN, volume: Number.NaN }
+  function applyThrottle(video: HTMLVideoElement, k: number) {
+    written.rate = video.playbackRate = k >= 1 ? rate.value : Math.max(SLOWEST_RATE, rate.value * k)
+    written.volume = video.volume = k >= 1 ? volume.value : volume.value * k
+  }
+  watch(throttle, (k) => {
+    const video = el.value
+    if (!video) return
+    if (k === 0 && !wantsPlay.value) {
+      if (!video.paused) video.pause()
+      applyThrottle(video, 1)
+      instant = false
+      return
+    }
+    applyThrottle(video, k)
+    if (k === 1) instant = false
+  })
+  /*
+   * Whether the element's rate and volume are the easing's rather than the
+   * chosen ones: from the press of play until full speed, and from the press
+   * of pause until the stop. The element reports a change a moment after it
+   * is made, so the bounds are the intent, not the throttle alone: a start
+   * reported while the throttle still read 0 was taken for a choice of a
+   * sixteenth speed and silence.
+   */
+  const easing = () => (wantsPlay.value ? throttle.value < 1 : throttle.value > 0)
+
+  function remember() {
+    if (applied) sound.value = { volume: volume.value, muted: muted.value, rate: rate.value }
+  }
+
+  /** Play, quietly: a browser that refuses (autoplay with sound) just leaves it paused. */
+  function play() {
+    const video = el.value
+    if (!video || failure.value) return
+    if (ended.value) seek(0)
+    wantsPlay.value = true
+    // From a standstill the first frame already plays slow and quiet, not at full speed for one frame.
+    if (!instant && !reducedMotion.value && (options.ease?.() ?? true) && throttle.value === 0) applyThrottle(video, 0)
+    void video.play().catch(() => {
+      wantsPlay.value = false
+    })
+  }
+  /** Pause, easing to a stop unless `instant` (a seek, a drag, a clip's end, where the frame must be exact). */
+  function pause(options: { instant?: boolean } = {}) {
+    if (options.instant) instant = true
+    wantsPlay.value = false
+  }
+  function toggle() {
+    if (wantsPlay.value) pause()
+    else play()
+  }
+  function setMuted(value: boolean) {
+    if (el.value) el.value.muted = value
+    muted.value = value
+    remember()
+  }
+  function setVolume(value: number) {
+    const v = Math.min(1, Math.max(0, value))
+    volume.value = v
+    if (el.value) {
+      el.value.volume = easing() ? v * throttle.value : v
+      // Turning the sound up is asking to hear it.
+      if (v > 0 && el.value.muted) el.value.muted = false
+    }
+    // Said now, not on the element's event: a slider bound to "muted ? 0 : volume" would spring back to 0 meanwhile.
+    if (v > 0) muted.value = false
+    remember()
+  }
+  function setRate(value: number) {
+    rate.value = value
+    if (el.value) el.value.playbackRate = easing() ? Math.max(SLOWEST_RATE, value * throttle.value) : value
+    remember()
+  }
+
+  /**
+   * The frame on screen as a PNG, for "copy frame". Null when there is none
+   * yet, or when the video came from another origin without CORS and the
+   * browser will not let it be read back.
+   */
+  function captureFrame(): Promise<Blob | null> {
+    const video = el.value
+    if (!video?.videoWidth) return Promise.resolve(null)
+    const canvas = video.ownerDocument.createElement("canvas")
+    canvas.width = video.videoWidth
+    canvas.height = video.videoHeight
+    try {
+      canvas.getContext("2d")?.drawImage(video, 0, 0)
+      return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), "image/png"))
+    } catch {
+      return Promise.resolve(null)
+    }
+  }
+
+  watch(options.src, () => {
+    duration.value = 0
+    time.value = 0
+    failure.value = null
+    buffered.value = []
+    ended.value = false
+    waiting.value = false
+    seekBusy = false
+    seekTarget = null
+    probingDuration = false
+  })
+
+  onBeforeUnmount(() => {
+    stopTicking()
+    const video = el.value
+    if (!video) return
+    // Stop the stream from fetching on: an element that is merely detached keeps its connection.
+    video.pause()
+    video.removeAttribute("src")
+    video.load()
+  })
+
+  return { duration, time, playing, wantsPlay, waiting, ended, muted, volume, rate, buffered, failure, size, listeners, seek, play, pause, toggle, setMuted, setVolume, setRate, captureFrame }
+}
+
+export type VideoMedia = ReturnType<typeof useVideoMedia>

package/src/index.ts

@@ -156,7 +156,7 @@ export { default as LpInput } from "./components/LpInput.vue"
 export { default as LpLightbox } from "./components/LpLightbox.vue"
 export type { LightboxLabels } from "./components/LpLightbox.vue"
 export type { LightboxItem } from "./components/lightbox"
-export { fileNameOf } from "./components/lightbox"
+export { fileNameOf, isVideoItem } from "./components/lightbox"
 export { default as LpLink } from "./components/LpLink.vue"
 export { default as LpLogViewer } from "./components/LpLogViewer.vue"
 export { default as LpLogInspector } from "./components/LpLogInspector.vue"
@@ -226,6 +226,12 @@ export { default as LpRangeSlider } from "./components/LpRangeSlider.vue"
 export { default as LpVideoBackdrop } from "./components/LpVideoBackdrop.vue"
 export { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop"
 export type { LoopPlan } from "./components/videoBackdrop"
+export { default as LpVideoTrim } from "./components/LpVideoTrim.vue"
+export { default as LpVideoPlayer } from "./components/LpVideoPlayer.vue"
+export { useVideoMedia } from "./composables/useVideoMedia"
+export type { VideoErrorCause, VideoMedia } from "./composables/useVideoMedia"
+export { dragEnd, normalizeRange as normalizeTrimRange, parseClipTime, setEnd } from "./components/videoTrim"
+export type { FrameRegion, TimeRange, VideoTrimErrorCause } from "./components/videoTrim"
 export { default as LpSparkline } from "./components/LpSparkline.vue"
 export { default as LpStat } from "./components/LpStat.vue"
 export { default as LpStepper } from "./components/LpStepper.vue"