@leavepulse/ui 0.81.0 → 0.83.0

package/src/components/SteadyText.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/*
+ * Text that changes while it is read (a clock, a length under a dragged
+ * handle) in a box as wide as the widest it will get: an invisible twin of
+ * that widest text sits in the same grid cell, the way LpEditable sizes its
+ * field. Without it each new value resized the box and everything after it
+ * on the line shifted, and a row that wraps re-wrapped and took the whole
+ * layout under it up and down with it.
+ *
+ * `widest` is the longest the text can be, its digits as zeros: with
+ * tabular figures every digit is as wide as a zero.
+ */
+defineProps<{ text: string; widest: string }>()
+</script>
+
+<template>
+  <span class="inline-grid whitespace-nowrap tabular-nums">
+    <span aria-hidden="true" class="invisible col-start-1 row-start-1">{{ widest }}</span>
+    <span class="col-start-1 row-start-1">{{ text }}</span>
+  </span>
+</template>

package/src/components/VideoFlash.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+/*
+ * The answer to a play or pause on LpVideoPlayer and LpVideoTrim: a round
+ * badge with what just happened, in the middle of the picture, that swells a
+ * little and fades. A press on the picture, or Space with the eyes on it,
+ * otherwise has only the motion itself to confirm it, and a pause on a still
+ * scene shows nothing at all. Each new `flash` replays it; reduced motion has none.
+ */
+import LpIcon from "./LpIcon.vue"
+
+defineProps<{
+  /** What happened, and a count that changes on every press so the same icon twice still plays twice. */
+  flash: { icon: string; n: number } | null
+}>()
+</script>
+
+<template>
+  <div class="pointer-events-none absolute inset-0 flex items-center justify-center motion-reduce:hidden" aria-hidden="true">
+    <span
+      v-if="flash"
+      :key="flash.n"
+      class="lp-video-flash flex size-16 items-center justify-center rounded-full bg-black/50 text-white opacity-0"
+    >
+      <LpIcon :name="flash.icon" :size="28" :class="flash.icon === 'lucide:play' ? 'translate-x-0.5' : ''" />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+/* Rises into view, holds a moment, then swells away: arriving at full strength in one frame read as a blink. */
+.lp-video-flash {
+  animation: lp-video-flash 700ms var(--ease-emphasized) both;
+}
+@keyframes lp-video-flash {
+  0% {
+    opacity: 0;
+    scale: 0.8;
+  }
+  25% {
+    opacity: 1;
+    scale: 1;
+  }
+  45% {
+    opacity: 1;
+    scale: 1;
+  }
+  100% {
+    opacity: 0;
+    scale: 1.15;
+  }
+}
+</style>

package/src/components/VideoThumb.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/*
+ * A video's face in a grid or a strip (LpMediaGallery's tile, LpLightbox's
+ * filmstrip): its poster, or without one its first frame, under a round play
+ * badge and, when there is room and it is known, its length.
+ *
+ * Without a poster the frame comes from the video itself: metadata and the
+ * one frame at a tenth of a second (a media fragment), never the whole file.
+ * Its length comes along with the metadata when the item did not say it.
+ */
+import { computed, ref } from "vue"
+import LpIcon from "./LpIcon.vue"
+import type { LightboxItem } from "./lightbox"
+import { formatClipTime } from "./videoBackdrop"
+
+const props = defineProps<{
+  item: LightboxItem
+  /** Classes for the picture itself (the gallery's blur and dimming ride on it). */
+  mediaClass?: string | (string | false | undefined)[]
+  /** A small thumbnail: the badge shrinks and the length is left out. */
+  compact?: boolean
+  alt?: string
+}>()
+
+const measured = ref<number | null>(null)
+const length = computed(() => props.item.duration ?? measured.value)
+const still = computed(() => props.item.poster ?? props.item.thumb)
+</script>
+
+<template>
+  <img
+    v-if="still"
+    :src="still"
+    :alt="alt ?? ''"
+    loading="lazy"
+    decoding="async"
+    class="size-full object-cover"
+    :class="mediaClass"
+    draggable="false"
+  />
+  <video
+    v-else
+    :src="`${item.src}#t=0.1`"
+    preload="metadata"
+    muted
+    playsinline
+    tabindex="-1"
+    aria-hidden="true"
+    class="pointer-events-none size-full object-cover"
+    :class="mediaClass"
+    @loadedmetadata="(e) => Number.isFinite((e.target as HTMLVideoElement).duration) && (measured = (e.target as HTMLVideoElement).duration)"
+  />
+  <span class="pointer-events-none absolute inset-0 flex items-center justify-center" aria-hidden="true">
+    <span
+      class="flex items-center justify-center rounded-full bg-black/50 text-white ring-1 ring-white/25 transition-transform duration-(--duration-fast) ease-(--ease-emphasized) group-hover:scale-110 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
+      :class="compact ? 'size-6' : 'size-10'"
+    >
+      <LpIcon name="lucide:play" :size="compact ? 12 : 18" class="translate-x-px" />
+    </span>
+  </span>
+  <span
+    v-if="!compact && length"
+    class="pointer-events-none absolute right-1.5 bottom-1.5 rounded-pill bg-black/60 px-1.5 py-0.5 font-mono text-[10px] text-white tabular-nums"
+    aria-hidden="true"
+  >{{ formatClipTime(length) }}</span>
+</template>

package/src/components/VideoVolume.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+/*
+ * Sound for LpVideoPlayer and LpVideoTrim: the mute button, and beside it a
+ * volume slider that opens while the pointer or the focus is on either, the
+ * way most players keep it out of the way until it is reached for. On a touch
+ * screen the slider stays closed: a phone's own buttons set the volume, and a
+ * thin slider under a thumb only gets in the way.
+ */
+import LpButton from "./LpButton.vue"
+import LpIcon from "./LpIcon.vue"
+import LpSlider from "./LpSlider.vue"
+import type { VideoMedia } from "../composables/useVideoMedia"
+import { ICON_SWAP, OVERLAY_BUTTON } from "./videoMotion"
+
+const props = defineProps<{
+  media: VideoMedia
+  labels: { mute: string; unmute: string; volume: string }
+  disabled?: boolean
+  /** Over the picture (white on the video) rather than on the page. */
+  overlay?: boolean
+}>()
+
+const icon = () => {
+  const { muted, volume } = props.media
+  if (muted.value || volume.value === 0) return "lucide:volume-x"
+  return volume.value < 0.5 ? "lucide:volume-1" : "lucide:volume-2"
+}
+</script>
+
+<template>
+  <div class="group/volume flex items-center">
+    <LpButton
+      size="sm"
+      variant="ghost"
+      square
+      :class="overlay ? OVERLAY_BUTTON : ''"
+      :disabled="disabled"
+      :aria-label="media.muted.value ? labels.unmute : labels.mute"
+      :title="media.muted.value ? labels.unmute : labels.mute"
+      :aria-pressed="media.muted.value"
+      @click="media.setMuted(!media.muted.value)"
+    >
+      <!-- Muting, and the volume crossing a half, hand the icon over instead of swapping it in one frame. -->
+      <Transition v-bind="ICON_SWAP">
+        <LpIcon :key="icon()" :name="icon()" :size="16" />
+      </Transition>
+    </LpButton>
+    <div
+      class="w-0 overflow-hidden opacity-0 transition-[width,opacity] duration-(--duration-medium) ease-(--ease-emphasized) group-hover/volume:w-20 group-hover/volume:opacity-100 group-focus-within/volume:w-20 group-focus-within/volume:opacity-100 pointer-coarse:hidden motion-reduce:transition-none"
+    >
+      <LpSlider
+        class="mx-2 w-16"
+        :model-value="media.muted.value ? 0 : Math.round(media.volume.value * 100)"
+        :min="0"
+        :max="100"
+        :step="5"
+        :disabled="disabled"
+        :aria-label="labels.volume"
+        @update:model-value="(v: number) => media.setVolume(v / 100)"
+      />
+    </div>
+  </div>
+</template>

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

@@ -24,6 +24,29 @@ export interface LightboxItem {
    * a marked picture sitting beside plain ones.
    */
   spoiler?: boolean
+  /**
+   * A video rather than a picture: shown in LpVideoPlayer, with a play badge
+   * on its tile and its strip thumbnail. Left out, an address ending in a
+   * video extension (.mp4, .webm, .mov…) counts as one; set it for an address
+   * that does not say (an API route, a blob: URL).
+   */
+  kind?: "image" | "video"
+  /** A still for a video's tile and thumbnail; the video's first frame when absent. */
+  poster?: string
+  /** A video's length in seconds, for the badge on its tile, when known up front. */
+  duration?: number
+}
+
+const VIDEO_EXTENSION = /\.(mp4|m4v|webm|mov|ogv|ogg|mkv)$/i
+
+/** Whether the item is a video: said outright by `kind`, else told by its address's extension. */
+export function isVideoItem(item: Pick<LightboxItem, "src" | "kind">): boolean {
+  if (item.kind) return item.kind === "video"
+  try {
+    return VIDEO_EXTENSION.test(new URL(item.src, "http://x").pathname)
+  } catch {
+    return false
+  }
 }
 
 /** Last path segment of a URL, or a fallback — used to name a download. */

package/src/components/videoBackdrop.ts

@@ -64,12 +64,29 @@ export function isNativeLoop(plan: LoopPlan, duration: number): boolean {
   return plan.fade === 0 && plan.from === 0 && plan.to >= duration
 }
 
-/** "1:05", "0:07.5": a position on a clip as a range slider labels it. */
-export function formatClipTime(seconds: number, precise = false): string {
+/**
+ * "1:05", "0:07.5": a position on a clip as a range slider labels it.
+ * `precise` adds tenths when there are any; "fixed" always writes them, for a
+ * time that changes while it is read, so it keeps one length ("0:05.0", not
+ * "0:05" between "0:04.9" and "0:05.1").
+ */
+export function formatClipTime(seconds: number, precise: boolean | "fixed" = false): string {
   const t = splitTime(Number.isFinite(seconds) ? seconds * 1000 : 0)
   // Hours fold into minutes: a slider over a clip reads "75:00", not "1:15:00".
   const minutes = (t.days * 24 + t.hours) * 60 + t.minutes
   const secs = String(t.seconds).padStart(2, "0")
   const tenth = Math.floor(t.ms / 100)
-  return precise && tenth ? `${minutes}:${secs}.${tenth}` : `${minutes}:${secs}`
+  return precise === "fixed" || (precise && tenth) ? `${minutes}:${secs}.${tenth}` : `${minutes}:${secs}`
+}
+
+/** The widest a clip time up to `seconds` gets, its digits as zeros: what SteadyText reserves. */
+export function widestClipTime(seconds: number): string {
+  return formatClipTime(seconds, "fixed").replace(/\d/g, "0")
 }
+
+/**
+ * The slowest rate a pause eases down to before the element is paused, and a
+ * start eases up from. Chromium refuses a rate below a sixteenth; past that
+ * point the picture is all but still anyway.
+ */
+export const SLOWEST_RATE = 1 / 16

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

@@ -0,0 +1,38 @@
+/*
+ * How things come and go in LpVideoPlayer and LpVideoTrim, bound on a
+ * <Transition> with v-bind so every control, overlay and hint in both appears
+ * and leaves the same way, never in a single frame. Entrances take the
+ * medium duration and the emphasized curve; exits are quicker, since what is
+ * leaving no longer needs reading. Reduced motion swaps instantly.
+ */
+export const FADE = {
+  enterActiveClass: "transition-opacity duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none",
+  leaveActiveClass: "transition-opacity duration-(--duration-fast) ease-(--ease-emphasized) motion-reduce:transition-none",
+  enterFromClass: "opacity-0",
+  leaveToClass: "opacity-0",
+} as const
+
+/** A fade with a small settle in scale: for a button or a box, which reads as arriving rather than blinking on. */
+export const FADE_SCALE = {
+  enterActiveClass: "transition-[opacity,scale] duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none",
+  leaveActiveClass: "transition-[opacity,scale] duration-(--duration-fast) ease-(--ease-emphasized) motion-reduce:transition-none",
+  enterFromClass: "scale-90 opacity-0",
+  leaveToClass: "scale-90 opacity-0",
+} as const
+
+/** One icon handing over to another in the same spot (play and pause, sound on and off). */
+export const ICON_SWAP = {
+  mode: "out-in",
+  enterActiveClass: "transition-[opacity,scale] duration-(--duration-fast) ease-(--ease-emphasized) motion-reduce:transition-none",
+  leaveActiveClass: "transition-[opacity,scale] duration-(--duration-fast) ease-(--ease-emphasized) motion-reduce:transition-none",
+  enterFromClass: "scale-75 opacity-0",
+  leaveToClass: "scale-75 opacity-0",
+} as const
+
+/**
+ * A ghost button over the picture: white on the video in every theme, as the
+ * lightbox's are. The players' own buttons use it, and their `#actions` and
+ * `#controls` slots hand it out as `buttonClass`, so an app's button there
+ * (a bin that takes the video back out of a dropzone) looks like theirs.
+ */
+export const OVERLAY_BUTTON = "text-white/85 hover:bg-white/15 hover:text-white"