@leavepulse/ui 0.82.0 → 0.83.1

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/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/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"

package/src/components/videoTrim.ts

@@ -182,17 +182,5 @@ export function adjustRegion(r: FrameRegion, handle: RegionHandle, dx: number, d
   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"
-}
+/** Why the editor has no video to show; see `VideoErrorCause`. */
+export type { VideoErrorCause as VideoTrimErrorCause } from "../composables/useVideoMedia"