@leavepulse/ui 0.82.0 → 0.83.0

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-BOdqDUii.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";
@@ -158,6 +158,9 @@ 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";