@leavepulse/ui 0.81.0 → 0.83.0

package/dist/components/videoTrim.js

@@ -0,0 +1,121 @@
+import { clamp } from "../composables/clamp.js";
+import { shiftSpan, zoomSpan } from "../composables/span.js";
+const round = (t) => Math.round(t * 1e3) / 1e3;
+function parseClipTime(text) {
+  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) {
+  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 };
+}
+function normalizeRange(range, limits) {
+  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)];
+}
+function dragEnd(range, end, t, limits) {
+  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)))];
+}
+function setEnd(range, end, t, limits) {
+  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)];
+}
+function zoomView(view, anchor, factor, duration, minSpan) {
+  const span = view.end - view.start;
+  const next = zoomSpan(view.start, view.end, anchor, Math.min(1 / factor, duration / (span || 1)), Math.min(minSpan, duration));
+  return shiftView(next, 0, duration);
+}
+function shiftView(view, delta, duration) {
+  const span = Math.min(view.end - view.start, duration);
+  return shiftSpan(view.start, view.start + span, delta, 0, duration);
+}
+function revealTime(view, t, duration, margin = 0.1) {
+  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];
+function tickStep(span, width, minPx = 72) {
+  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];
+}
+function ticks(view, step) {
+  const out = [];
+  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;
+}
+function containRect(boxWidth, boxHeight, videoWidth, videoHeight) {
+  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) => Math.round(n * 1e4) / 1e4;
+function clampRegion(r, minSize = 0.02) {
+  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) };
+}
+function regionBetween(ax, ay, bx, by) {
+  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) };
+}
+function adjustRegion(r, handle, dx, dy, minSize = 0.02) {
+  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) };
+}
+export {
+  adjustRegion,
+  clampRegion,
+  containRect,
+  dragEnd,
+  normalizeRange,
+  parseClipTime,
+  regionBetween,
+  revealTime,
+  setEnd,
+  shiftView,
+  tickStep,
+  ticks,
+  zoomView
+};

package/dist/composables/span.d.ts

@@ -0,0 +1,10 @@
+/** 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 declare function zoomSpan(start: number, end: number, anchor: number, factor: number, minSpan: number): {
+    start: number;
+    end: number;
+};
+/** The window moved by `delta`, its width kept, stopped at `lo` and `hi`. */
+export declare function shiftSpan(start: number, end: number, delta: number, lo: number, hi: number): {
+    start: number;
+    end: number;
+};

package/dist/composables/span.js

@@ -0,0 +1,15 @@
+function zoomSpan(start, end, anchor, factor, minSpan) {
+  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 };
+}
+function shiftSpan(start, end, delta, lo, hi) {
+  const span = end - start;
+  const from = Math.max(lo, Math.min(hi - span, start + delta));
+  return { start: from, end: from + span };
+}
+export {
+  shiftSpan,
+  zoomSpan
+};

package/dist/composables/useVideoMedia.d.ts

@@ -0,0 +1,74 @@
+import { type Ref } from "vue";
+/**
+ * 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 declare function mediaErrorCause(error: MediaError | null): VideoErrorCause;
+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;
+}
+export declare function useVideoMedia(el: Ref<HTMLVideoElement | null>, options: UseVideoMediaOptions): {
+    duration: Ref<number, number>;
+    time: Ref<number, number>;
+    playing: Ref<boolean, boolean>;
+    wantsPlay: Ref<boolean, boolean>;
+    waiting: Ref<boolean, boolean>;
+    ended: Ref<boolean, boolean>;
+    muted: Ref<boolean, boolean>;
+    volume: Ref<number, number>;
+    rate: Ref<number, number>;
+    buffered: Ref<[number, number][], [number, number][]>;
+    failure: Ref<VideoErrorCause | null, VideoErrorCause | null>;
+    size: Ref<{
+        width: number;
+        height: number;
+    }, {
+        width: number;
+        height: number;
+    } | {
+        width: number;
+        height: number;
+    }>;
+    listeners: {
+        loadedmetadata(): void;
+        durationchange(): void;
+        seeked(): void;
+        play(): void;
+        pause(): void;
+        ended(): void;
+        waiting(): void;
+        playing(): void;
+        canplay(): void;
+        timeupdate(): void;
+        progress(): void;
+        volumechange(): void;
+        ratechange(): void;
+        error(): Promise<void>;
+    };
+    seek: (t: number) => void;
+    play: () => void;
+    pause: (options?: {
+        instant?: boolean;
+    }) => void;
+    toggle: () => void;
+    setMuted: (value: boolean) => void;
+    setVolume: (value: number) => void;
+    setRate: (value: number) => void;
+    captureFrame: () => Promise<Blob | null>;
+};
+export type VideoMedia = ReturnType<typeof useVideoMedia>;

package/dist/composables/useVideoMedia.js

@@ -0,0 +1,291 @@
+import { ref, watch, onBeforeUnmount } from "vue";
+import { SLOWEST_RATE } from "../components/videoBackdrop.js";
+import { nodeWindow } from "./realm.js";
+import { usePersisted } from "./usePersisted.js";
+import { usePrefersReducedMotion } from "./useReducedMotion.js";
+import { useTween } from "./useTween.js";
+function mediaErrorCause(error) {
+  if (error?.code === 3) return "decode";
+  if (error?.code === 4) return "unsupported";
+  return "load";
+}
+const isSound = (v) => {
+  if (!v || typeof v !== "object") return false;
+  const { volume, muted, rate } = v;
+  return typeof muted === "boolean" && typeof volume === "number" && volume >= 0 && volume <= 1 && typeof rate === "number" && rate >= 0.25 && rate <= 4;
+};
+function useVideoMedia(el, options) {
+  const duration = ref(0);
+  const time = ref(0);
+  const playing = ref(false);
+  const waiting = ref(false);
+  const ended = ref(false);
+  const muted = ref(false);
+  const volume = ref(1);
+  const rate = ref(1);
+  const buffered = ref([]);
+  const failure = ref(null);
+  const size = ref({ width: 0, height: 0 });
+  const sound = usePersisted(() => (options.remember?.() ?? true) && "lp-video:sound", { volume: 1, muted: false, rate: 1 }, { validate: isSound });
+  let applied = "";
+  let seekBusy = false;
+  let seekTarget = null;
+  let probingDuration = false;
+  let frame = 0;
+  function seek(t) {
+    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;
+  }
+  const AHEAD_LIMIT = 0.25;
+  let lastMedia = -1;
+  let lastAt = 0;
+  function smoothTime(video, now) {
+    const t = video.currentTime;
+    if (t !== lastMedia) {
+      lastMedia = t;
+      lastAt = now;
+    }
+    const estimate = Math.min(lastMedia + (now - lastAt) / 1e3 * video.playbackRate, lastMedia + AHEAD_LIMIT, duration.value || Infinity);
+    return Math.max(estimate, Math.min(time.value, lastMedia + AHEAD_LIMIT));
+  }
+  function tick(now) {
+    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) {
+    const d = duration.value;
+    if (!d) return;
+    const out = [];
+    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) {
+    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";
+    }
+  }
+  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;
+      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;
+      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);
+    }
+  };
+  const wantsPlay = ref(false);
+  let instant = false;
+  const reducedMotion = usePrefersReducedMotion();
+  const throttle = useTween(
+    () => wantsPlay.value ? 1 : 0,
+    (from, to, k) => from + (to - from) * k,
+    { enabled: () => !instant && !reducedMotion.value && (options.ease?.() ?? true) }
+  );
+  const written = { rate: Number.NaN, volume: Number.NaN };
+  function applyThrottle(video, k) {
+    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;
+  });
+  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 };
+  }
+  function play() {
+    const video = el.value;
+    if (!video || failure.value) return;
+    if (ended.value) seek(0);
+    wantsPlay.value = true;
+    if (!instant && !reducedMotion.value && (options.ease?.() ?? true) && throttle.value === 0) applyThrottle(video, 0);
+    void video.play().catch(() => {
+      wantsPlay.value = false;
+    });
+  }
+  function pause(options2 = {}) {
+    if (options2.instant) instant = true;
+    wantsPlay.value = false;
+  }
+  function toggle() {
+    if (wantsPlay.value) pause();
+    else play();
+  }
+  function setMuted(value) {
+    if (el.value) el.value.muted = value;
+    muted.value = value;
+    remember();
+  }
+  function setVolume(value) {
+    const v = Math.min(1, Math.max(0, value));
+    volume.value = v;
+    if (el.value) {
+      el.value.volume = easing() ? v * throttle.value : v;
+      if (v > 0 && el.value.muted) el.value.muted = false;
+    }
+    if (v > 0) muted.value = false;
+    remember();
+  }
+  function setRate(value) {
+    rate.value = value;
+    if (el.value) el.value.playbackRate = easing() ? Math.max(SLOWEST_RATE, value * throttle.value) : value;
+    remember();
+  }
+  function captureFrame() {
+    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;
+    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 {
+  mediaErrorCause,
+  useVideoMedia
+};

package/dist/icons-all.js

@@ -1,3 +1,3 @@
 import lucide from "@iconify-json/lucide/icons.json";
-import { a as registerIconCollection } from "./chunks/icons-C1vppR4f.js";
+import { a as registerIconCollection } from "./chunks/icons-CdSlCrle.js";
 registerIconCollection(lucide);

package/dist/index.d.ts

@@ -94,7 +94,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";
@@ -157,6 +157,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";