@leavepulse/ui 0.80.1 → 0.82.0

package/src/components/chartWindow.ts

@@ -1,4 +1,5 @@
 import { clamp } from "../composables/clamp"
+import { shiftSpan, zoomSpan } from "../composables/span"
 
 /*
  * The part of a long series a chart draws: which points are in the window, and
@@ -54,18 +55,13 @@ export function clampRange(range: ChartRange | null | undefined, count: number):
 /** The range after a zoom by `factor` (below 1 is in), keeping `anchor` (0–1 across it) in place. */
 export function zoomRange(range: ChartRange | null, count: number, anchor: number, factor: number): ChartRange | null {
   const from = range ?? { start: 0, end: count - 1 }
-  const span = from.end - from.start
-  const next = Math.max(MIN_RANGE_POINTS - 1, span * factor)
-  const at = from.start + span * clamp(anchor, 0, 1)
-  const start = at - (at - from.start) * (next / (span || 1))
-  return clampRange({ start, end: start + next }, count)
+  const at = from.start + (from.end - from.start) * clamp(anchor, 0, 1)
+  return clampRange(zoomSpan(from.start, from.end, at, factor, MIN_RANGE_POINTS - 1), count)
 }
 
 /** The range moved by `delta` points, keeping its width at the ends of the data. */
 export function panRange(range: ChartRange, count: number, delta: number): ChartRange | null {
-  const span = range.end - range.start
-  const start = Math.max(0, Math.min(count - 1 - span, range.start + delta))
-  return clampRange({ start, end: start + span }, count)
+  return clampRange(shiftSpan(range.start, range.end, delta, 0, count - 1), count)
 }
 
 /**

package/src/components/videoFrames.ts

@@ -0,0 +1,171 @@
+/*
+ * Stills for LpVideoTrim's timeline, taken from a second, hidden <video> of the
+ * same address: seek, wait for the frame, draw it on a small canvas.
+ *
+ * - One seek at a time. A seek started while another runs is dropped by some
+ *   engines and freezes WebKitGTK's GStreamer pipeline (WebKit bug 194499);
+ *   a seek that never answers is given up after a while, so one bad spot does
+ *   not stop the strip.
+ * - A seek lands on a key frame where the engine can (`fastSeek`, WebKit and
+ *   Firefox): a thumbnail needs a nearby frame, not the exact one, and a key
+ *   frame needs no decoding forward from the previous one.
+ * - Asking again replaces what is still queued: zooming or panning should not
+ *   wait for stills of a stretch already scrolled away.
+ * - The canvas is only ever drawn, never read back, so a video from another
+ *   origin without CORS still gives stills (a tainted canvas still shows).
+ */
+
+const SEEK_TIMEOUT_MS = 4000
+const FRAME_TIMEOUT_MS = 250
+const CACHE_LIMIT = 240
+
+export interface FrameRequest {
+  key: string
+  time: number
+}
+
+type VideoWithFrames = HTMLVideoElement & {
+  requestVideoFrameCallback?: (cb: () => void) => number
+  fastSeek?: (time: number) => void
+}
+
+export class FrameSampler {
+  private queue: FrameRequest[] = []
+  private running = false
+  private disposed = false
+  private cache = new Map<string, HTMLCanvasElement>()
+
+  constructor(
+    private readonly video: VideoWithFrames,
+    private readonly size: () => { width: number; height: number },
+    private readonly onFrame: (key: string, canvas: HTMLCanvasElement) => void,
+  ) {}
+
+  /** A frame taken earlier, if it is still kept. */
+  cached(key: string): HTMLCanvasElement | undefined {
+    const hit = this.cache.get(key)
+    if (hit) {
+      // Least recently used goes first: refresh this one's place.
+      this.cache.delete(key)
+      this.cache.set(key, hit)
+    }
+    return hit
+  }
+
+  /** The frames wanted now, most wanted first; whatever was queued before is dropped. */
+  want(requests: FrameRequest[]): void {
+    this.queue = requests.filter((r) => !this.cache.has(r.key))
+    void this.pump()
+  }
+
+  dispose(): void {
+    this.disposed = true
+    this.queue = []
+    this.cache.clear()
+  }
+
+  private async pump() {
+    if (this.running) return
+    this.running = true
+    try {
+      while (!this.disposed && this.queue.length) {
+        const next = this.queue.shift()!
+        if (this.cache.has(next.key)) continue
+        const canvas = await this.take(next.time)
+        if (this.disposed) return
+        if (!canvas) continue
+        this.cache.set(next.key, canvas)
+        if (this.cache.size > CACHE_LIMIT) this.cache.delete(this.cache.keys().next().value as string)
+        this.onFrame(next.key, canvas)
+      }
+    } finally {
+      this.running = false
+    }
+  }
+
+  private async take(time: number): Promise<HTMLCanvasElement | null> {
+    const video = this.video
+    if (video.readyState < 1) {
+      const ready = await this.once("loadedmetadata", SEEK_TIMEOUT_MS)
+      if (!ready) return null
+    }
+    const target = Math.min(Math.max(0, time), Number.isFinite(video.duration) ? Math.max(0, video.duration - 0.05) : time)
+    const seeked = this.once("seeked", SEEK_TIMEOUT_MS)
+    if (video.fastSeek) video.fastSeek(target)
+    else video.currentTime = target
+    if (!(await seeked)) return null
+    await this.framePresented()
+    if (this.disposed || !video.videoWidth) return null
+    const { width, height } = this.size()
+    const ratio = Math.min(2, video.ownerDocument.defaultView?.devicePixelRatio ?? 1)
+    const canvas = video.ownerDocument.createElement("canvas")
+    canvas.width = Math.max(1, Math.round(width * ratio))
+    canvas.height = Math.max(1, Math.round(height * ratio))
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return null
+    // Cover the tile, as object-fit: cover would: a strip of letterboxes reads as broken.
+    const scale = Math.max(canvas.width / video.videoWidth, canvas.height / video.videoHeight)
+    const w = video.videoWidth * scale
+    const h = video.videoHeight * scale
+    try {
+      ctx.drawImage(video, (canvas.width - w) / 2, (canvas.height - h) / 2, w, h)
+    } catch {
+      return null
+    }
+    return canvas
+  }
+
+  /*
+   * `seeked` says the position moved, not that its picture is ready to draw:
+   * Chromium can still hand the previous frame for a moment. Wait for the
+   * frame where the engine reports it, and a couple of paints where not.
+   */
+  private framePresented(): Promise<void> {
+    const video = this.video
+    const win = video.ownerDocument.defaultView
+    return new Promise((resolve) => {
+      let done = false
+      const finish = () => {
+        if (done) return
+        done = true
+        resolve()
+      }
+      if (video.requestVideoFrameCallback) {
+        video.requestVideoFrameCallback(finish)
+        win?.setTimeout(finish, FRAME_TIMEOUT_MS)
+      } else if (win) {
+        win.requestAnimationFrame(() => win.requestAnimationFrame(finish))
+      } else finish()
+    })
+  }
+
+  private once(event: string, timeout: number): Promise<boolean> {
+    const video = this.video
+    const win = video.ownerDocument.defaultView
+    return new Promise((resolve) => {
+      const finish = (ok: boolean) => {
+        video.removeEventListener(event, onEvent)
+        video.removeEventListener("error", onError)
+        if (timer) win?.clearTimeout(timer)
+        resolve(ok)
+      }
+      const onEvent = () => finish(true)
+      const onError = () => finish(false)
+      video.addEventListener(event, onEvent)
+      video.addEventListener("error", onError)
+      const timer = win?.setTimeout(() => finish(false), timeout)
+    })
+  }
+}
+
+/**
+ * Seconds one still stands for at this zoom: the shortest power of two that
+ * keeps a still at least `minPx` wide. Stills sit at fixed points in time, so
+ * panning reuses the ones already taken and a zoom step of two keeps half.
+ */
+export function stillSpan(secondsPerPx: number, minPx: number): number {
+  const wanted = secondsPerPx * minPx
+  let span = 1 / 8
+  while (span < wanted && span < 8192) span *= 2
+  return span
+}

package/src/components/videoTrim.ts

@@ -0,0 +1,198 @@
+/*
+ * 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, as its `error` event reports it:
+ * - "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 VideoTrimErrorCause = "load" | "decode" | "unsupported"
+
+export function mediaErrorCause(error: MediaError | null): VideoTrimErrorCause {
+  if (error?.code === 3) return "decode"
+  if (error?.code === 4) return "unsupported"
+  return "load"
+}

package/src/composables/overlayHistory.ts

@@ -31,6 +31,10 @@
  *    entries keep working once Back returns past it.
  *  - Someone else's `replaceState` on a kit entry keeps the kit's key, so a
  *    router saving its scroll position does not orphan the entry.
+ *  - Someone else's `pushState` or `replaceState` while a step the kit started
+ *    is on its way (closing an overlay and following a link in it in one tick)
+ *    is held until the step lands, then applied there: the address changes a
+ *    traversal later than the router's own route does.
  *  - An app that keeps an overlay in its query through `replace` rewrites the
  *    address of the kit's entry when the overlay closes, and the entry under it
  *    still holds the old one. Taking the entry out lands there, so the address
@@ -362,7 +366,7 @@ function install() {
 
   const push = history.pushState.bind(history)
   const replace = history.replaceState.bind(history)
-  history.pushState = function (data: unknown, unused: string, url?: string | URL | null) {
+  const pushed = (data: unknown, unused: string, url?: string | URL | null) => {
     const before = location.href
     push(data, unused, url)
     s.href = location.href
@@ -371,12 +375,35 @@ function install() {
     if (pathOf(before) !== pathOf(location.href)) leavePage()
     mute()
   }
-  history.replaceState = function (data: unknown, unused: string, url?: string | URL | null) {
+  const replaced = (data: unknown, unused: string, url?: string | URL | null) => {
     const mark = s.internal ? null : current()
     const keep = mark && data && typeof data === "object" && !markOf(data) ? { ...(data as object), [KEY]: mark } : data
     replace(keep, unused, url)
     s.href = location.href
   }
+  history.pushState = function (data: unknown, unused: string, url?: string | URL | null) {
+    if (!s.internal && s.silent > 0) s.waiting.push(() => pushed(unmarked(data), unused, url))
+    else pushed(data, unused, url)
+  }
+  history.replaceState = function (data: unknown, unused: string, url?: string | URL | null) {
+    if (!s.internal && s.silent > 0) s.waiting.push(() => replaced(unmarked(data), unused, url))
+    else replaced(data, unused, url)
+  }
+}
+
+/*
+ * A change written while a step the kit started is on its way (an overlay
+ * closed and a link inside it navigated in the same tick) waits for the step to
+ * land. Applied at once, the step would then go back from the new entry, and
+ * the page would end on the old path. A router builds its state from the entry
+ * it sat on, the kit's, so the kit's key is taken off: the entry it lands on is
+ * not the kit's any more.
+ */
+function unmarked(data: unknown): unknown {
+  if (!markOf(data)) return data
+  const copy = { ...(data as Record<string, unknown>) }
+  delete copy[KEY]
+  return copy
 }
 
 /** Record an entry on top of the history, under the current address. */

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/index.ts

@@ -226,6 +226,9 @@ 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 { 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"