@leavepulse/ui 0.48.0 → 0.49.0

package/dist/chunks/{LpVideoBackdrop-DN6xPUav.js → LpVideoBackdrop-qWRYBOTQ.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, normalizeStyle, createCommentVNode, createElementVNode, normalizeClass } from "vue";
-import { prefersReducedMotion } from "../composables/easing.js";
+import { prefersReducedMotion, easeTravel } from "../composables/easing.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { planLoop, isNativeLoop, seamReached, seamProgress } from "../components/videoBackdrop.js";
 const _hoisted_1 = ["src"];
@@ -19,7 +19,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     dim: { default: 0 },
     fit: { default: "cover" },
     paused: { type: Boolean, default: false },
-    playWithReducedMotion: { type: Boolean, default: false }
+    playWithReducedMotion: { type: Boolean, default: false },
+    easePlayback: { default: 600 }
   },
   emits: ["loaded", "error"],
   setup(__props, { emit: __emit }) {
@@ -32,6 +33,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const active = ref(0);
     const incoming = ref(null);
     const incomingOpacity = ref(0);
+    const running = ref(false);
+    const throttle = ref(1);
+    const SLOWEST_RATE = 1 / 16;
     const reducedMotion = ref(prefersReducedMotion());
     const pageHidden = ref(typeof document !== "undefined" && document.hidden);
     const plan = computed(
@@ -47,7 +51,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function setRate(video) {
       if (!video) return;
       video.defaultPlaybackRate = props.rate;
-      video.playbackRate = props.rate;
+      video.playbackRate = Math.max(SLOWEST_RATE, props.rate * throttle.value);
+    }
+    function applyRate() {
+      setRate(first.value);
+      setRate(second.value);
+    }
+    let ramp = 0;
+    function rampTo(target, ms, done) {
+      if (ramp) cancelAnimationFrame(ramp);
+      ramp = 0;
+      const from = throttle.value;
+      const span = ms * Math.abs(target - from);
+      if (span <= 0) {
+        throttle.value = target;
+        applyRate();
+        done?.();
+        return;
+      }
+      const began = performance.now();
+      const step = (now) => {
+        const k = Math.min(1, (now - began) / span);
+        throttle.value = from + (target - from) * easeTravel(k);
+        applyRate();
+        if (k < 1) ramp = requestAnimationFrame(step);
+        else {
+          ramp = 0;
+          done?.();
+        }
+      };
+      ramp = requestAnimationFrame(step);
     }
     function onMetadata(event) {
       const video = event.target;
@@ -86,7 +119,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let frame = 0;
     function watchFrames() {
       frame = 0;
-      if (!playing.value) return;
+      if (!running.value) return;
       const current = element(active.value);
       const loop = plan.value;
       if (current && !native.value) {
@@ -113,28 +146,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       frame = requestAnimationFrame(watchFrames);
     }
-    function sync() {
+    function startElements() {
+      running.value = true;
+      applyRate();
+      void element(active.value)?.play().catch(() => {
+      });
+      if (incoming.value !== null) void element(incoming.value)?.play().catch(() => {
+      });
+      if (!frame) frame = requestAnimationFrame(watchFrames);
+    }
+    function stopElements() {
+      running.value = false;
+      first.value?.pause();
+      second.value?.pause();
+      if (frame) cancelAnimationFrame(frame);
+      frame = 0;
       const current = element(active.value);
-      const other = element(active.value === 0 ? 1 : 0);
+      if (still.value && current && ready.value) current.currentTime = plan.value.from;
+    }
+    function sync() {
+      const easing = props.easePlayback > 0 && !prefersReducedMotion() ? props.easePlayback : 0;
       if (playing.value) {
-        void current?.play().catch(() => {
-        });
-        if (incoming.value !== null) void other?.play().catch(() => {
-        });
-        if (!frame) frame = requestAnimationFrame(watchFrames);
+        if (!running.value) throttle.value = easing ? 0 : 1;
+        startElements();
+        rampTo(1, easing);
         return;
       }
-      current?.pause();
-      other?.pause();
-      if (frame) cancelAnimationFrame(frame);
-      frame = 0;
-      if (still.value && current && ready.value) current.currentTime = plan.value.from;
+      if (!running.value || pageHidden.value || still.value || !easing) {
+        rampTo(throttle.value, 0);
+        stopElements();
+        return;
+      }
+      rampTo(0, easing, () => {
+        if (!playing.value) stopElements();
+      });
     }
     watch(playing, sync, { flush: "post" });
-    watch(() => props.rate, () => {
-      setRate(first.value);
-      setRate(second.value);
-    });
+    watch(() => props.rate, applyRate);
     watch(
       () => props.src,
       () => {
@@ -170,14 +218,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     let motionQuery = null;
     onMounted(() => {
-      setRate(first.value);
-      setRate(second.value);
+      applyRate();
       motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
       motionQuery.addEventListener("change", onMotionChange);
       document.addEventListener("visibilitychange", onVisibility);
     });
     onBeforeUnmount(() => {
       if (frame) cancelAnimationFrame(frame);
+      if (ramp) cancelAnimationFrame(ramp);
       motionQuery?.removeEventListener("change", onMotionChange);
       document.removeEventListener("visibilitychange", onVisibility);
     });
@@ -190,7 +238,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
     }
     const { class: rootClass, attrs: rest } = useMergedAttrs(
-      "pointer-events-none absolute inset-0 overflow-hidden"
+      "pointer-events-none absolute inset-0 isolate overflow-hidden"
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({

package/dist/components/LpVideoBackdrop.vue.d.ts

@@ -18,6 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     paused?: boolean;
     /** Keep playing when the system asks for reduced motion (it shows a still otherwise). */
     playWithReducedMotion?: boolean;
+    /** Milliseconds over which a pause slows the picture to a halt and a resume brings it back up; 0 stops dead. */
+    easePlayback?: number;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     error: () => any;
     loaded: (info: {
@@ -43,6 +45,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     paused?: boolean;
     /** Keep playing when the system asks for reduced motion (it shows a still otherwise). */
     playWithReducedMotion?: boolean;
+    /** Milliseconds over which a pause slows the picture to a halt and a resume brings it back up; 0 stops dead. */
+    easePlayback?: number;
 }> & Readonly<{
     onError?: (() => any) | undefined;
     onLoaded?: ((info: {
@@ -58,4 +62,5 @@ declare const __VLS_export: import("vue").DefineComponent<{
     rate: number;
     fit: "cover" | "contain" | "fill" | "none";
     playWithReducedMotion: boolean;
+    easePlayback: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/LpVideoBackdrop.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpVideoBackdrop-DN6xPUav.js";
+import { _ as _sfc_main } from "../chunks/LpVideoBackdrop-qWRYBOTQ.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -87,7 +87,7 @@ import { _ as _61 } from "./chunks/LpSidebar-DpEiGi8L.js";
 import { _ as _62 } from "./chunks/LpSkeleton-BB6XIV-w.js";
 import { _ as _63 } from "./chunks/LpSlider-Cuzmrd7p.js";
 import { _ as _64 } from "./chunks/LpRangeSlider-C1yF9-nP.js";
-import { _ as _65 } from "./chunks/LpVideoBackdrop-DN6xPUav.js";
+import { _ as _65 } from "./chunks/LpVideoBackdrop-qWRYBOTQ.js";
 import { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop.js";
 import { _ as _66 } from "./chunks/LpSparkline-CB80N8SJ.js";
 import { _ as _67 } from "./chunks/LpStat-B-7udBRP.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpVideoBackdrop.vue

@@ -24,13 +24,16 @@ export default { inheritAttrs: false }
  * - Pausing where motion is unwanted: `paused`, a hidden tab, and the
  *   system's reduced-motion setting, which shows the first frame of the
  *   stretch instead (`playWithReducedMotion` overrides it).
+ * - Easing in and out of a pause (`easePlayback`): the picture slows to a
+ *   standstill and gathers speed again instead of freezing and lurching. A
+ *   hidden tab and reduced motion still stop at once.
  *
  * The second element exists only while there is a seam to blend, so a plain
  * loop decodes one stream. Both play the same `src`: a URL the media element
  * fetches by range, or an object URL of a file already in memory.
  */
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
-import { prefersReducedMotion } from "../composables/easing"
+import { easeTravel, prefersReducedMotion } from "../composables/easing"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { isNativeLoop, planLoop, seamProgress, seamReached } from "./videoBackdrop"
 
@@ -53,8 +56,19 @@ const props = withDefaults(
     paused?: boolean
     /** Keep playing when the system asks for reduced motion (it shows a still otherwise). */
     playWithReducedMotion?: boolean
+    /** Milliseconds over which a pause slows the picture to a halt and a resume brings it back up; 0 stops dead. */
+    easePlayback?: number
   }>(),
-  { start: 0, crossfade: 0, rate: 1, dim: 0, fit: "cover", paused: false, playWithReducedMotion: false },
+  {
+    start: 0,
+    crossfade: 0,
+    rate: 1,
+    dim: 0,
+    fit: "cover",
+    paused: false,
+    playWithReducedMotion: false,
+    easePlayback: 600,
+  },
 )
 
 const emit = defineEmits<{
@@ -74,6 +88,18 @@ const active = ref<0 | 1>(0)
 const incoming = ref<0 | 1 | null>(null)
 const incomingOpacity = ref(0)
 
+/** The elements are playing, which includes slowing down into a pause. */
+const running = ref(false)
+/** Share of `rate` played at, 0 to 1: below 1 while easing into or out of a pause. */
+const throttle = ref(1)
+
+/**
+ * The slowest rate a pause eases down to before the element is paused.
+ * Chromium refuses a rate below a sixteenth; past that point the picture is
+ * all but still anyway.
+ */
+const SLOWEST_RATE = 1 / 16
+
 const reducedMotion = ref(prefersReducedMotion())
 const pageHidden = ref(typeof document !== "undefined" && document.hidden)
 
@@ -93,7 +119,39 @@ function setRate(video: HTMLVideoElement | null) {
   if (!video) return
   // `defaultPlaybackRate` too: a reload of the source resets the rate to it.
   video.defaultPlaybackRate = props.rate
-  video.playbackRate = props.rate
+  video.playbackRate = Math.max(SLOWEST_RATE, props.rate * throttle.value)
+}
+
+function applyRate() {
+  setRate(first.value)
+  setRate(second.value)
+}
+
+let ramp = 0
+/** Move `throttle` to `target` over `ms`, eased, then call `done`. */
+function rampTo(target: number, ms: number, done?: () => void) {
+  if (ramp) cancelAnimationFrame(ramp)
+  ramp = 0
+  const from = throttle.value
+  const span = ms * Math.abs(target - from)
+  if (span <= 0) {
+    throttle.value = target
+    applyRate()
+    done?.()
+    return
+  }
+  const began = performance.now()
+  const step = (now: number) => {
+    const k = Math.min(1, (now - began) / span)
+    throttle.value = from + (target - from) * easeTravel(k)
+    applyRate()
+    if (k < 1) ramp = requestAnimationFrame(step)
+    else {
+      ramp = 0
+      done?.()
+    }
+  }
+  ramp = requestAnimationFrame(step)
 }
 
 function onMetadata(event: Event) {
@@ -140,7 +198,7 @@ function finishSeam() {
 let frame = 0
 function watchFrames() {
   frame = 0
-  if (!playing.value) return
+  if (!running.value) return
   const current = element(active.value)
   const loop = plan.value
   if (current && !native.value) {
@@ -167,28 +225,47 @@ function watchFrames() {
   frame = requestAnimationFrame(watchFrames)
 }
 
-function sync() {
-  const current = element(active.value)
-  const other = element(active.value === 0 ? 1 : 0)
-  if (playing.value) {
-    void current?.play().catch(() => {})
-    if (incoming.value !== null) void other?.play().catch(() => {})
-    if (!frame) frame = requestAnimationFrame(watchFrames)
-    return
-  }
-  current?.pause()
-  other?.pause()
+function startElements() {
+  running.value = true
+  applyRate()
+  void element(active.value)?.play().catch(() => {})
+  if (incoming.value !== null) void element(incoming.value)?.play().catch(() => {})
+  if (!frame) frame = requestAnimationFrame(watchFrames)
+}
+
+function stopElements() {
+  running.value = false
+  first.value?.pause()
+  second.value?.pause()
   if (frame) cancelAnimationFrame(frame)
   frame = 0
   // A still shows the stretch's first frame, not wherever the clip stopped.
+  const current = element(active.value)
   if (still.value && current && ready.value) current.currentTime = plan.value.from
 }
 
+function sync() {
+  const easing = props.easePlayback > 0 && !prefersReducedMotion() ? props.easePlayback : 0
+  if (playing.value) {
+    // A resume from a standstill gathers speed from the slowest rate.
+    if (!running.value) throttle.value = easing ? 0 : 1
+    startElements()
+    rampTo(1, easing)
+    return
+  }
+  // Nobody sees a hidden tab, and a still is asked for outright: both stop at once.
+  if (!running.value || pageHidden.value || still.value || !easing) {
+    rampTo(throttle.value, 0)
+    stopElements()
+    return
+  }
+  rampTo(0, easing, () => {
+    if (!playing.value) stopElements()
+  })
+}
+
 watch(playing, sync, { flush: "post" })
-watch(() => props.rate, () => {
-  setRate(first.value)
-  setRate(second.value)
-})
+watch(() => props.rate, applyRate)
 watch(
   () => props.src,
   () => {
@@ -230,8 +307,7 @@ function onVisibility() {
 let motionQuery: MediaQueryList | null = null
 
 onMounted(() => {
-  setRate(first.value)
-  setRate(second.value)
+  applyRate()
   motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
   motionQuery.addEventListener("change", onMotionChange)
   document.addEventListener("visibilitychange", onVisibility)
@@ -239,6 +315,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   if (frame) cancelAnimationFrame(frame)
+  if (ramp) cancelAnimationFrame(ramp)
   motionQuery?.removeEventListener("change", onMotionChange)
   document.removeEventListener("visibilitychange", onVisibility)
 })
@@ -252,8 +329,12 @@ function layerStyle(index: 0 | 1) {
   }
 }
 
+// `isolate`: the element fading in at the seam is raised over the one going
+// out with a z-index, and without a stacking context of its own here that
+// z-index lifted it over the page's content too, so text laid on the backdrop
+// faded away at every seam.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "pointer-events-none absolute inset-0 overflow-hidden",
+  "pointer-events-none absolute inset-0 isolate overflow-hidden",
 )
 </script>