@vosjs/studio-core 0.35.3 → 0.36.0

package/dist/index.d.ts

@@ -3630,6 +3630,17 @@ declare function spanOutputExtent(segments: readonly (Segment & {
     start: number;
     end: number;
 } | null;
+/** What a span→track expansion is told about the time around it. */
+interface TrackOptions {
+    /**
+     * No span motion before this output time: the card's entrance owns it
+     * (`prependEntrance` drops what the track put there). A span already
+     * under way at it ramps in FROM it, at its full duration where the span
+     * has the room, instead of losing its ramp and creeping from the
+     * entrance's last pose to the span's end in one straight line.
+     */
+    notBefore?: number;
+}
 /**
  * Expand the doc's source-anchored zoom spans into a standard @vosjs/timeline
  * keyframe track in OUTPUT time (values are [level, cx, cy] vectors):
@@ -3647,7 +3658,7 @@ declare function spanOutputExtent(segments: readonly (Segment & {
 interface LoweredZoomSpan extends ZoomSpan {
     followEvents?: FollowEvent[];
 }
-declare function zoomTrackFromDoc(zoom: LoweredZoomSpan[], segments: Segment[], style?: ZoomStyleParams): KeyframeTrack<number[]>;
+declare function zoomTrackFromDoc(zoom: LoweredZoomSpan[], segments: Segment[], style?: ZoomStyleParams, opts?: TrackOptions): KeyframeTrack<number[]>;
 /**
  * Expand the doc's source-anchored tilt spans into an OUTPUT-time keyframe
  * track of [rx, ry] DEGREES (ON_FRAME converts to radians at the mesh):
@@ -3670,7 +3681,7 @@ declare function tiltTrackFromDoc(tilt: TiltSpan[], segments: Segment[], motion?
     rampOut?: number;
     chainGap?: number;
     pan?: number;
-}): KeyframeTrack<number[]>;
+}, opts?: TrackOptions): KeyframeTrack<number[]>;
 /**
  * The bubble's rest pose as [x, y, size] frame fractions, resolved through the
  * SAME oracle the picking layer uses (camBubbleRect) so the corner math can

package/dist/index.js

@@ -6041,7 +6041,20 @@ function trackEmitter() {
   };
   return { keyframes, push: push2 };
 }
-function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE]) {
+function connectedWindow(o) {
+  const start = Math.max(o.arrived, Math.min(o.tOut, o.landBy - o.dur));
+  const land = Math.max(
+    start + o.floor,
+    Math.min(start + o.dur, Math.max(o.latest, o.landBy))
+  );
+  return { start, land };
+}
+function withEntrance(head, build) {
+  return prependEntrance(build({ notBefore: head.at(-1)?.t }), head);
+}
+var spillLimit = (tIn, tOut) => tIn + (tOut - tIn) / 2;
+function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE], opts = {}) {
+  const notBefore = opts.notBefore ?? -Infinity;
   const panEase = style.panEase;
   const mapped = [...zoom].sort((a, b) => a.in - b.in).flatMap((z) => {
     const ext = spanOutputExtent(segments, z.in, z.out, z.media);
@@ -6062,19 +6075,35 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
     let cur = entry;
     const m = transitionMult(z.transition);
     if (!chained) {
+      if (tOut <= notBefore + RAMP_FLOOR) continue;
       const startWanted = tIn - (style.rampIn - style.rampInOverlap) * m;
-      const start = push2(startWanted, [1, z.cx, z.cy, 0, ...sc(z)], "none");
+      const start = push2(
+        Math.max(startWanted, notBefore),
+        [1, z.cx, z.cy, 0, ...sc(z)],
+        "none"
+      );
       push2(
         rampLanding(start, startWanted, style.rampIn * m, tOut),
         entry,
         spanEase(z.ease, style.ease)
       );
     }
+    const arrived = keyframes.at(-1)?.t ?? tIn;
+    const next = mapped.at(i + 1);
+    const pan = next && next.tIn - tOut <= style.chainGap ? connectedWindow({
+      arrived,
+      tOut,
+      landBy: next.tIn + style.rampInOverlap * transitionMult(next.z.transition),
+      latest: spillLimit(next.tIn, next.tOut),
+      dur: style.pan * transitionMult(next.z.transition),
+      floor: RAMP_FLOOR
+    }) : null;
+    const holdEnd = pan ? pan.start : tOut;
     let inPath = false;
     for (const e of z.followEvents ?? []) {
       const eOut = sourceToTimeline(segments, e.t);
-      if (eOut === null || eOut <= tIn || eOut >= tOut) continue;
-      if (eOut - tIn < RAMP_FLOOR || tOut - eOut < RAMP_FLOOR) continue;
+      if (eOut === null || eOut <= tIn || eOut >= holdEnd) continue;
+      if (eOut - tIn < RAMP_FLOOR || holdEnd - eOut < RAMP_FLOOR) continue;
       const next2 = [cur[0], e.cx, e.cy, 1, ...cur.slice(4)];
       if (e.path) {
         if (!inPath) {
@@ -6087,14 +6116,14 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
       } else {
         inPath = false;
         push2(eOut, cur, "none");
-        push2(Math.min(eOut + style.followRecenter, tOut), next2, panEase);
+        push2(Math.min(eOut + style.followRecenter, holdEnd), next2, panEase);
       }
       cur = next2;
     }
     const drift = Math.max(0, style.holdDrift ?? 0);
     const landed = keyframes.at(-1)?.t;
-    if (drift > 0 && z.focusMode !== "auto" && !(z.followEvents ?? []).length && landed !== void 0 && tOut > landed) {
-      const grow = Math.min(HOLD_DRIFT_MAX, drift * (tOut - landed));
+    if (drift > 0 && z.focusMode !== "auto" && !(z.followEvents ?? []).length && landed !== void 0 && holdEnd > landed) {
+      const grow = Math.min(HOLD_DRIFT_MAX, drift * (holdEnd - landed));
       cur = [
         clampZoomLevel(cur[0] * (1 + grow)),
         cur[1],
@@ -6102,13 +6131,11 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
         cur[3],
         ...cur.slice(4)
       ];
-      push2(tOut, cur, "sine.inOut");
+      push2(holdEnd, cur, "sine.inOut");
     } else {
-      push2(tOut, cur, "none");
+      push2(holdEnd, cur, "none");
     }
-    const next = mapped.at(i + 1);
-    if (next && next.tIn - tOut <= style.chainGap) {
-      const mNext = transitionMult(next.z.transition);
+    if (next && pan) {
       const nextValue = [
         clampZoomLevel(next.z.level),
         next.z.cx,
@@ -6116,17 +6143,7 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
         1,
         ...sc(next.z)
       ];
-      push2(
-        Math.max(
-          tOut + RAMP_FLOOR,
-          Math.min(
-            tOut + style.pan * mNext,
-            next.tIn + style.rampInOverlap * mNext
-          )
-        ),
-        nextValue,
-        panEase
-      );
+      push2(pan.land, nextValue, panEase);
       chained = true;
     } else {
       push2(
@@ -6142,7 +6159,8 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
 function sameVec(a, b) {
   return a.length === b.length && a.every((v, i) => Math.abs(v - b[i]) < 1e-6);
 }
-function tiltTrackFromDoc(tilt, segments, motion = {}) {
+function tiltTrackFromDoc(tilt, segments, motion = {}, opts = {}) {
+  const notBefore = opts.notBefore ?? -Infinity;
   const rampInDur = motion.rampIn ?? TILT_RAMP_IN;
   const rampOutDur = motion.rampOut ?? TILT_RAMP_OUT;
   const chainGap = motion.chainGap ?? TILT_CHAIN_GAP;
@@ -6160,24 +6178,30 @@ function tiltTrackFromDoc(tilt, segments, motion = {}) {
     const pose = [clampTiltDeg(z.rx), clampTiltDeg(z.ry)];
     const m = transitionMult(z.transition);
     if (!chained) {
+      if (tOut <= notBefore + RAMP_FLOOR) continue;
       const startWanted = tIn - rampInDur * m;
-      const start = push2(startWanted, rest, "none");
+      const start = push2(Math.max(startWanted, notBefore), rest, "none");
       push2(
         rampLanding(start, startWanted, rampInDur * m, tOut),
         pose,
         spanEase(z.ease, TILT_EASE)
       );
     }
-    push2(tOut, pose, "none");
+    const arrived = keyframes.at(-1)?.t ?? tIn;
     const next = mapped.at(i + 1);
-    if (next && next.tIn - tOut <= chainGap) {
-      const nextPose = [clampTiltDeg(next.z.rx), clampTiltDeg(next.z.ry)];
+    const swing = next && next.tIn - tOut <= chainGap ? connectedWindow({
+      arrived,
+      tOut,
+      landBy: next.tIn,
+      latest: spillLimit(next.tIn, next.tOut),
+      dur: panDur * transitionMult(next.z.transition),
+      floor: RAMP_FLOOR
+    }) : null;
+    push2(swing ? swing.start : tOut, pose, "none");
+    if (next && swing) {
       push2(
-        Math.max(
-          tOut + RAMP_FLOOR,
-          Math.min(tOut + panDur * transitionMult(next.z.transition), next.tIn)
-        ),
-        nextPose,
+        swing.land,
+        [clampTiltDeg(next.z.rx), clampTiltDeg(next.z.ry)],
         panEase
       );
       chained = true;
@@ -6214,14 +6238,19 @@ function camTrackFromDoc(cam, spans, segments, W, H = 1080) {
       const start = push2(tIn - CAM_RAMP_IN * m, rest, "none");
       push2(start + CAM_RAMP_IN * m, pose, spanEase(z.ease, CAM_EASE));
     }
-    push2(tOut, pose, "none");
+    const arrived = keyframes.at(-1)?.t ?? tIn;
     const next = mapped.at(i + 1);
-    if (next && next.tIn - tOut <= CAM_CHAIN_GAP) {
-      push2(
-        Math.min(tOut + CAM_PAN * transitionMult(next.z.transition), next.tIn),
-        poseOf(next.z),
-        panEase
-      );
+    const morph = next && next.tIn - tOut <= CAM_CHAIN_GAP ? connectedWindow({
+      arrived,
+      tOut,
+      landBy: next.tIn,
+      latest: spillLimit(next.tIn, next.tOut),
+      dur: CAM_PAN * transitionMult(next.z.transition),
+      floor: 0
+    }) : null;
+    push2(morph ? morph.start : tOut, pose, "none");
+    if (next && morph) {
+      push2(morph.land, poseOf(next.z), panEase);
       chained = true;
     } else {
       push2(tOut + CAM_RAMP_OUT * m, rest, spanEase(z.ease, CAM_EASE));
@@ -6367,6 +6396,21 @@ var FRAME_STEP_SRC = `
   }
   function stepBg(bgEl, bgT) {
     if (!bgEl.paused) bgEl.pause()
+    // Capture pages: the loop's frame by PTS from its own provider, like the
+    // footage. The loop clock only moves forward between wraps, so the walk
+    // stays sequential and a wrap is one re-seek to the keyframe at 0.
+    var bwc = bgEl.__voilaWc
+    if (bwc) {
+      var bwT = Math.min(bgT, bwc.duration || bgT)
+      if (bwc.req !== bwT) {
+        var bwp = bwc.seek(bwT)
+        if (ns.pendingDecodes) {
+          ns.pendingDecodes.add(bwp)
+          bwp.finally(function () { ns.pendingDecodes.delete(bwp) })
+        }
+      }
+      return
+    }
     var bgTarget = Math.min(bgT, bgEl.duration || bgT)
     if (bgEl.readyState >= 1 && !bgEl.seeking && Math.abs(bgEl.currentTime - bgTarget) > 0.02) {
       if (ns.pendingDecodes) {
@@ -6450,6 +6494,7 @@ var SETUP = `async (ctx) => {
   // page has a memory budget) and FAIL-OPEN: any fetch trouble degrades to
   // the plain network element, never a dead LOAD.
   const BLOB_FETCH_MAX = 400 * 1024 * 1024
+  const BG_BLOB_MAX = 64 * 1024 * 1024
   const toBlobUrl = async (src) => {
     const resp = await fetch(src)
     if (!resp.ok) throw new Error('[voila] blob fetch HTTP ' + resp.status)
@@ -6650,9 +6695,48 @@ var SETUP = `async (ctx) => {
   if (bgm && bgm.key) {
     try {
       if (bgm.kind === 'image') await loadImage(bgm.key)
-      else (await load(bgm.key, true)).loop = true
+      else {
+        const bgV = await load(bgm.key, true)
+        bgV.loop = true
+        // Capture pages: the loop gets its own provider. An element seek
+        // decodes from the previous keyframe on EVERY frame (a baked loop
+        // has one every few seconds), and the capture waits for it; the
+        // sequential walk decodes each packet once. The whole loop is read
+        // into a Blob first when it is small enough (one request instead
+        // of ranged reads against a CDN). FAIL-OPEN to the element at
+        // every step, like the footage.
+        if (ctx.data.videoDecodeMode === 'webcodecs' && !bgV.__voilaWc) {
+          try {
+            if (!(ns.videoBlobs && ns.videoBlobs.get(bgm.key)) && bgm.key.indexOf('blob:') !== 0 && bgm.key.indexOf('data:') !== 0) {
+              try {
+                const bgResp = await fetch(bgm.key)
+                const bgLen = Number(bgResp.headers.get('content-length') || 0)
+                if (bgResp.ok && bgLen <= BG_BLOB_MAX) {
+                  ;(ns.videoBlobs || (ns.videoBlobs = new Map())).set(bgm.key, await bgResp.blob())
+                } else {
+                  try { if (bgResp.body) await bgResp.body.cancel() } catch (e) { void e }
+                }
+              } catch (e) { void e }
+            }
+            const bgWc = await makeWcProvider(bgm.key)
+            if (bgWc && (!bgV.videoWidth || (bgWc.width === bgV.videoWidth && bgWc.height === bgV.videoHeight))) bgV.__voilaWc = bgWc
+          } catch (e) {
+            console.warn('[voila] webcodecs provider unavailable for the background, seeks stay html5', e)
+          }
+        }
+      }
     } catch (e) { console.warn('[voila] background media failed to load', e) }
   }
+  // Which path decodes what, for a host's telemetry: 'provider' is the
+  // sequential WebCodecs walk, 'element' an HTMLVideoElement seek per frame.
+  ns.voilaDecode = {
+    recording: ctx.data.isImage ? 'none' : video.__voilaWc ? 'provider' : 'element',
+    backdrop: (function () {
+      if (!bgm || !bgm.key || bgm.kind === 'image') return 'none'
+      const bgHit = cache.get(bgm.key)
+      return bgHit && bgHit.__voilaWc ? 'provider' : 'element'
+    })(),
+  }
   // Frame prep: a capture harness calls every ns.framePrep hook right after
   // seeking the timeline and before the first paint, then awaits
   // waitForVideosReady. The footage for the frame is requested HERE, so the
@@ -7281,7 +7365,14 @@ var ON_FRAME = `(ctx, content, dt) => {
       // Blur: softens the media behind the card (design px \xD7 s).
       var bgBlur = bgm.blur || 0
       if (bgBlur > 0 && bgC.filter !== undefined) bgC.filter = 'blur(' + bgBlur * s + 'px)'
-      try { bgC.drawImage(bgEl, (W - bgDw) / 2 + bgOx, (H - bgDh) / 2 + bgOy, bgDw, bgDh) } catch (e) {}
+      // The loop's provider draws its current sample (paused capture
+      // pages); false \u21D2 the element (playback, or before the first ask).
+      try {
+        var bgWcp = !bgIsImg && !playing ? bgEl.__voilaWc : null
+        if (!(bgWcp && bgWcp.draw(bgC, null, (W - bgDw) / 2 + bgOx, (H - bgDh) / 2 + bgOy, bgDw, bgDh))) {
+          bgC.drawImage(bgEl, (W - bgDw) / 2 + bgOx, (H - bgDh) / 2 + bgOy, bgDw, bgDh)
+        }
+      } catch (e) {}
       if (bgBlur > 0 && bgC.filter !== undefined) bgC.filter = 'none'
       var bgDim = bgm.dim || 0
       if (bgDim > 0) {
@@ -8369,9 +8460,9 @@ function lowerToComposition(input) {
     camera,
     zoomStyle
   );
-  const zoomTrack = prependEntrance(
-    zoomTrackFromDoc(zoomSpans, rated, zoomStyle),
-    entranceZoomKeyframes(cardEnter(doc.frame))
+  const zoomTrack = withEntrance(
+    entranceZoomKeyframes(cardEnter(doc.frame)),
+    (opts) => zoomTrackFromDoc(zoomSpans, rated, zoomStyle, opts)
   );
   const pins = resolvePins(doc, layout, camera, zoomTrack);
   const pinsData = pinsDataOf(doc, pins);
@@ -8470,8 +8561,8 @@ function lowerToComposition(input) {
         transitions,
         TILT_SPAN_MIN
       ) : [];
-      const spans = tilts.length ? tiltTrackFromDoc(tilts, rated, zoomStyle.tilt) : void 0;
-      const track = prependEntrance(spans, head);
+      const spans = tilts.length ? (opts) => tiltTrackFromDoc(tilts, rated, zoomStyle.tilt, opts) : () => void 0;
+      const track = withEntrance(head, spans);
       return track ? { tiltTrack: track } : {};
     })(),
     // The card's pose through its enter and its exit: [scale, dy, opacity]
@@ -8567,9 +8658,9 @@ function docZoomTrack(input) {
     camera,
     zoomStyle
   );
-  return prependEntrance(
-    zoomTrackFromDoc(spans, rated, zoomStyle),
-    entranceZoomKeyframes(cardEnter(doc.frame))
+  return withEntrance(
+    entranceZoomKeyframes(cardEnter(doc.frame)),
+    (opts) => zoomTrackFromDoc(spans, rated, zoomStyle, opts)
   );
 }
 function resolvePins(doc, layout, camera, zoomTrack) {