@vanillaskyai/video 0.10.22 → 0.11.0

package/dist/chunk-M4QTEJTK.js

@@ -1,709 +0,0 @@
-import {
-  ExternalVideoBackdropProvider,
-  resolveDensity
-} from "./chunk-5JBMYQP6.js";
-import {
-  limitsConcurrentVideoDecoders,
-  resolveMediaType
-} from "./chunk-224QNWRA.js";
-import {
-  resolveVideoTimeline
-} from "./chunk-SPVTJH3F.js";
-import {
-  supportsExternalVideoBackdrop
-} from "./chunk-R3XAOMKP.js";
-import {
-  getTemplateDefaults
-} from "./chunk-73NTSFFI.js";
-
-// src/player/mounted-scene-readiness.tsx
-import { createContext, useContext, useEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var MountedReadinessContext = createContext(void 0);
-var sceneReadinessKey = (scene) => `${scene.id}\0${String(scene.variables.mediaUrl || "")}`;
-function MountedSceneReadiness({
-  scene,
-  playing,
-  fallback = false,
-  onFailure,
-  onReady,
-  observeIncoming = false,
-  timeoutMs = 8e3,
-  preparedProof
-}) {
-  const marker = useRef(null);
-  const report = useContext(MountedReadinessContext);
-  const key = sceneReadinessKey(scene);
-  const onFailureRef = useRef(onFailure);
-  onFailureRef.current = onFailure;
-  const onReadyRef = useRef(onReady);
-  onReadyRef.current = onReady;
-  useEffect(() => {
-    if (!report && !onReadyRef.current || !playing) return;
-    let stopped = false;
-    let frame = 0;
-    let callback;
-    let observed;
-    let presented;
-    let previousMediaTime;
-    let forwardFrames = 0;
-    let motionRevision = 0;
-    const root = marker.current?.closest("[data-video-frame]");
-    const start = performance.now();
-    const finish = (error, actualVideoFrame = false) => {
-      if (stopped) return;
-      stopped = true;
-      if (callback !== void 0) observed?.cancelVideoFrameCallback?.(callback);
-      if (error && onFailureRef.current) onFailureRef.current();
-      else if (onReadyRef.current && !error) {
-        const video = presented;
-        const mediaTime = video?.currentTime ?? 0;
-        const confirmedAt = performance.now();
-        const source = video?.currentSrc;
-        const revision = motionRevision;
-        let consumed = false;
-        onReadyRef.current(actualVideoFrame && video ? { consume: (candidate) => {
-          const valid = !consumed && candidate === video && video.isConnected && motionRevision === revision && !video.paused && !video.seeking && video.currentSrc === source && video.currentSrc === video.src && performance.now() - confirmedAt <= 200 && video.currentTime >= mediaTime && video.currentTime - mediaTime <= 0.2;
-          consumed = true;
-          return valid;
-        } } : void 0);
-      } else report?.(key, error, actualVideoFrame);
-    };
-    const check = () => {
-      if (stopped) return;
-      if (fallback && root?.querySelector("[data-scene-fallback]") && !root.querySelector("[data-template-loading]") && document.fonts?.status !== "loading") {
-        finish();
-        return;
-      }
-      const layer = observeIncoming ? [...root?.querySelectorAll("[data-layer-scene-id]") ?? []].find((node) => node.getAttribute("data-layer-scene-id") === scene.id) : root?.querySelector('[data-scene-layer="active"]');
-      const loading = layer?.querySelector("[data-template-loading]");
-      const mediaUrl = String(scene.variables.mediaUrl || "");
-      const isVideo = scene.variables.mediaType === "video" || /\.(mp4|webm|mov)(?:[?#]|$)/i.test(mediaUrl);
-      if (root && layer && !loading && document.fonts?.status !== "loading") {
-        if (!mediaUrl || scene.variables.mediaType === "gradient") {
-          finish();
-          return;
-        }
-        if (isVideo) {
-          const video = layer.querySelector("video");
-          if (video && video.getAttribute("src") === mediaUrl && video.currentSrc === video.src && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
-            if (preparedProof?.consume(video)) {
-              finish(void 0, true);
-              return;
-            }
-            if (observed !== video) {
-              previousMediaTime = void 0;
-              forwardFrames = 0;
-            }
-            if (presented === video && (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA || forwardFrames >= 2)) {
-              finish(void 0, true);
-              return;
-            }
-            observed = video;
-            if (video.requestVideoFrameCallback) {
-              callback = video.requestVideoFrameCallback((_now, metadata) => {
-                callback = void 0;
-                if (stopped) return;
-                const sameSource = video.isConnected && video.getAttribute("src") === mediaUrl && video.currentSrc === video.src;
-                const mediaTime = metadata.mediaTime;
-                if (!sameSource || video.paused || video.seeking || !Number.isFinite(mediaTime) || previousMediaTime !== void 0 && mediaTime <= previousMediaTime + 1e-3) forwardFrames = 0;
-                else if (previousMediaTime !== void 0 && mediaTime > previousMediaTime + 1e-3) forwardFrames++;
-                previousMediaTime = sameSource && !video.paused && !video.seeking ? mediaTime : void 0;
-                if (sameSource) presented = video;
-                check();
-              });
-              return;
-            }
-            if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
-              finish(void 0, true);
-              return;
-            }
-          }
-        } else {
-          const image = [...layer.querySelectorAll("img") ?? []].find((element) => element.getAttribute("src") === mediaUrl);
-          if (image?.complete && image.naturalWidth > 0) {
-            finish();
-            return;
-          }
-        }
-      }
-      if (timeoutMs !== null && performance.now() - start >= timeoutMs) {
-        finish(new Error("Scene media did not become ready"));
-        return;
-      }
-      frame = requestAnimationFrame(check);
-    };
-    const onPresented = (event) => {
-      const video = event.target;
-      if (!(video instanceof HTMLVideoElement) || stopped || video.getAttribute("src") !== String(scene.variables.mediaUrl || "") || video.currentSrc !== video.src) return;
-      presented = video;
-      cancelAnimationFrame(frame);
-      if (callback !== void 0) observed?.cancelVideoFrameCallback?.(callback);
-      callback = void 0;
-      check();
-    };
-    const resetMotion = (event) => {
-      if (event.target === observed || event.target === presented) {
-        motionRevision++;
-        previousMediaTime = void 0;
-        forwardFrames = 0;
-      }
-    };
-    for (const type of ["pause", "waiting", "seeking"]) root?.addEventListener(type, resetMotion, true);
-    root?.addEventListener("vanillasky:video-frame-presented", onPresented);
-    check();
-    const timeout = timeoutMs === null ? void 0 : setTimeout(() => finish(new Error("Scene media did not become ready")), timeoutMs);
-    return () => {
-      root?.removeEventListener("vanillasky:video-frame-presented", onPresented);
-      for (const type of ["pause", "waiting", "seeking"]) root?.removeEventListener(type, resetMotion, true);
-      stopped = true;
-      clearTimeout(timeout);
-      cancelAnimationFrame(frame);
-      if (callback !== void 0) observed?.cancelVideoFrameCallback?.(callback);
-    };
-  }, [key, report, scene, playing, fallback, observeIncoming, timeoutMs, preparedProof]);
-  return /* @__PURE__ */ jsx("span", { ref: marker, hidden: true });
-}
-
-// src/player/video-frame.tsx
-import {
-  createElement,
-  Component,
-  Suspense,
-  useState,
-  useRef as useRef2,
-  useCallback,
-  useEffect as useEffect2,
-  useSyncExternalStore
-} from "react";
-
-// src/visual-system/layout.ts
-function getDimensions(orientation = "portrait") {
-  return orientation === "landscape" ? { width: 1920, height: 1080, aspectRatio: "16 / 9" } : { width: 1080, height: 1920, aspectRatio: "9 / 16" };
-}
-function getSafeZone(orientation = "portrait") {
-  return orientation === "landscape" ? { top: 108, bottom: 108, left: 192, right: 192 } : { top: 100, bottom: 100, left: 60, right: 60 };
-}
-function scaleSafeZone(zone, factor) {
-  if (factor === 1) return zone;
-  return {
-    top: Math.round(zone.top * factor),
-    bottom: Math.round(zone.bottom * factor),
-    left: Math.round(zone.left * factor),
-    right: Math.round(zone.right * factor)
-  };
-}
-
-// src/player/video-frame.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function PresentedScene({ notify }) {
-  useEffect2(() => {
-    if (!notify) return;
-    const frame = requestAnimationFrame(() => {
-      try {
-        void Promise.resolve(notify()).catch(() => void 0);
-      } catch {
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [notify]);
-  return null;
-}
-function SafeScene({ scene, onFramePresented }) {
-  const copy = scene.narration?.trim() || Object.values(scene.variables).filter((value) => typeof value === "string" && !/^https?:/i.test(value)).join(" ");
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-scene-fallback": "true",
-      style: {
-        width: "100%",
-        height: "100%",
-        display: "grid",
-        placeContent: "center",
-        boxSizing: "border-box",
-        padding: "8%",
-        background: "#090712",
-        color: "#fff",
-        font: "500 clamp(20px, 4vw, 64px)/1.3 system-ui",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx2(MountedSceneReadiness, { scene, playing: true, fallback: true }),
-        /* @__PURE__ */ jsx2(PresentedScene, { notify: onFramePresented }),
-        /* @__PURE__ */ jsx2("p", { children: copy.slice(0, 600) || "Your response continues." }),
-        /* @__PURE__ */ jsx2("small", { style: { fontSize: "0.3em" }, role: "status", children: "This scene uses a simpler layout." })
-      ]
-    }
-  );
-}
-var SceneBoundary = class extends Component {
-  state = { failed: false };
-  static getDerivedStateFromError() {
-    return { failed: true };
-  }
-  render() {
-    return this.state.failed ? /* @__PURE__ */ jsx2(SafeScene, { scene: this.props.scene, onFramePresented: this.props.onFramePresented }) : this.props.children;
-  }
-};
-var SCENE_TRANSITION_SECONDS = 0.3;
-var MEDIA_PREROLL_SECONDS = 1.2;
-var CONTIGUITY_ULP_FACTOR = 4;
-var subscribeToDecoderPolicy = () => () => {
-};
-function useDecoderConstraint() {
-  return useSyncExternalStore(
-    subscribeToDecoderPolicy,
-    limitsConcurrentVideoDecoders,
-    () => false
-  );
-}
-function clamp01(value) {
-  return Math.max(0, Math.min(1, value));
-}
-function supportsContinuousTransition(value) {
-  return value === "crossfade" || value === "fade";
-}
-function rangesAreContiguous(left, right) {
-  const scale = Math.max(1, Math.abs(left.end), Math.abs(right.start));
-  const ulpTolerance = Number.EPSILON * scale * CONTIGUITY_ULP_FACTOR;
-  return Math.abs(left.end - right.start) <= ulpTolerance;
-}
-function sceneHasBackdrop(range) {
-  return String(range.scene.variables.mediaType || "auto") !== "gradient" && String(range.scene.variables.mediaUrl || "").trim() !== "";
-}
-function sceneHasVideoBackdrop(range) {
-  const mediaUrl = String(range.scene.variables.mediaUrl || "").trim();
-  return mediaUrl !== "" && resolveMediaType(
-    String(range.scene.variables.mediaType || "auto"),
-    mediaUrl
-  ) === "video";
-}
-function registrySupportsExternalVideoBackdrop(kit) {
-  return kit.templates.every((template) => {
-    const properties = template.schema?.properties;
-    if (!properties?.mediaUrl) return true;
-    const mediaTypes = properties.mediaType?.enum;
-    const canRenderVideo = mediaTypes == null || mediaTypes.includes("video") || mediaTypes.includes("auto");
-    return !canRenderVideo || supportsExternalVideoBackdrop(template);
-  });
-}
-function sceneBackgroundChanges(left, right) {
-  const mediaUrl = (range) => String(range.scene.variables.mediaType || "auto") === "gradient" ? "" : String(range.scene.variables.mediaUrl || "");
-  return mediaUrl(left) !== mediaUrl(right);
-}
-function SceneLayer({
-  onFramePresented,
-  onMediaError,
-  kit,
-  config,
-  range,
-  progress,
-  motionProgress,
-  width,
-  height,
-  playing,
-  preparingNarration,
-  mediaAudioMuted,
-  mediaAudioVolume,
-  layer,
-  opacity,
-  interactive,
-  zIndex,
-  externalVideoBackdrop
-}) {
-  const mediaFailed = externalVideoBackdrop === "fallback" || range.scene.templateId === "cinemaMedia" && !String(range.scene.variables.mediaUrl || "").trim();
-  const recoveryTitle = mediaFailed && range.scene.templateId === "cinemaMedia" && typeof range.scene.variables.fallbackText === "string" ? range.scene.variables.fallbackText : void 0;
-  const template = kit.getTemplate(recoveryTitle ? "chapterTitle" : range.scene.templateId);
-  const duration = range.end - range.start;
-  return /* @__PURE__ */ jsx2(
-    ExternalVideoBackdropProvider,
-    {
-      mode: externalVideoBackdrop,
-      audioMuted: mediaAudioMuted || !playing,
-      audioVolume: mediaAudioVolume,
-      preparingNarration,
-      onMediaError,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-scene-layer": layer,
-          "data-scene-fallback": mediaFailed ? "true" : void 0,
-          "data-layer-scene-id": range.scene.id,
-          "data-layer-template-id": range.scene.templateId,
-          "aria-hidden": interactive ? void 0 : true,
-          ...interactive ? {} : { inert: "inert" },
-          style: {
-            position: "absolute",
-            inset: 0,
-            opacity,
-            zIndex,
-            pointerEvents: interactive ? "auto" : "none",
-            // A changed-media transition can expose an incoming template's true
-            // initial frame. Values that would be false placeholders at progress
-            // zero opt into this inherited guard.
-            "--vanillasky-transition-semantic-visibility": layer === "incoming" ? "hidden" : "visible",
-            "--vanillasky-template-surface": externalVideoBackdrop !== false ? "transparent" : void 0
-          },
-          children: [
-            range.scene.templateId === "cinemaMedia" && !recoveryTitle && (mediaFailed || !String(range.scene.variables.mediaUrl || "").trim()) && /* @__PURE__ */ jsx2(
-              "div",
-              {
-                role: "status",
-                "data-media-unavailable": "true",
-                style: { position: "absolute", inset: 0, zIndex: 2, display: "grid", placeContent: "center", color: "#bbb", font: "14px system-ui", background: "#000" },
-                children: "Visual unavailable"
-              }
-            ),
-            template ? /* @__PURE__ */ jsx2(SceneBoundary, { scene: range.scene, onFramePresented, children: /* @__PURE__ */ jsxs(Suspense, { fallback: /* @__PURE__ */ jsx2(
-              "div",
-              {
-                "data-template-loading": range.scene.templateId,
-                style: { position: "absolute", inset: 0 }
-              }
-            ), children: [
-              /* @__PURE__ */ jsx2(PresentedScene, { notify: onFramePresented }),
-              createElement(template.component, {
-                variables: {
-                  ...template.defaults ?? getTemplateDefaults(template.schema),
-                  ...range.scene.variables,
-                  ...mediaFailed ? { mediaUrl: "", mediaPoster: "", mediaType: "gradient" } : {},
-                  ...recoveryTitle ? { title: recoveryTitle } : {}
-                },
-                style: config.style,
-                progress,
-                motionProgress,
-                beatIntensity: 0,
-                width,
-                height,
-                textArchetype: range.scene.textArchetype ?? config.style.defaultTextArchetype,
-                backgroundEffect: range.scene.backgroundEffect ?? config.style.defaultBackgroundEffect,
-                safeZone: scaleSafeZone(
-                  getSafeZone(config.orientation),
-                  resolveDensity(config.style.density).safeZoneScale
-                ),
-                sceneDuration: duration,
-                isPlaying: playing
-              })
-            ] }) }, range.scene.id) : /* @__PURE__ */ jsx2(SafeScene, { scene: range.scene, onFramePresented })
-          ]
-        }
-      )
-    }
-  );
-}
-function VideoFrame({
-  onFramePresented,
-  kit,
-  config,
-  time,
-  width,
-  height,
-  playing = false,
-  preparingNarration = false,
-  mediaAudioMuted = true,
-  mediaAudioVolume = 1,
-  className,
-  style
-}) {
-  const recoveryRoot = useRef2(null);
-  const displayedKey = useRef2(void 0);
-  const displayedWasPlaying = useRef2(false);
-  const handoffProof = useRef2(void 0);
-  const confirmedHandoff = useRef2(void 0);
-  const [preparedMedia, setPreparedMedia] = useState(() => /* @__PURE__ */ new Set());
-  const markPrepared = useCallback((key) => setPreparedMedia((previous2) => /* @__PURE__ */ new Set([...previous2, key])), []);
-  const reportedFailures = useRef2(/* @__PURE__ */ new Set());
-  const [failedMedia, setFailedMedia] = useState(() => /* @__PURE__ */ new Set());
-  const markMediaFailed = useCallback((key, reason = "playback-error") => {
-    if (!key || !config.scenes.some((scene) => sceneReadinessKey(scene) === key)) return;
-    if (!reportedFailures.current.has(key)) {
-      reportedFailures.current.add(key);
-      recoveryRoot.current?.dispatchEvent(new CustomEvent("vanillasky:media-recovery", { bubbles: true, detail: { reason: ["decode-error", "frame-readiness-timeout", "stalled-media", "playback-error"].includes(reason) ? reason : "playback-error" } }));
-    }
-    setFailedMedia((previous2) => previous2.has(key) ? previous2 : /* @__PURE__ */ new Set([...previous2, key]));
-  }, [config.scenes]);
-  useEffect2(() => {
-    const currentKeys = new Set(config.scenes.map(sceneReadinessKey));
-    setPreparedMedia((previous2) => {
-      const retained = new Set([...previous2].filter((key) => currentKeys.has(key)));
-      return retained.size === previous2.size ? previous2 : retained;
-    });
-    for (const key of reportedFailures.current) if (!currentKeys.has(key)) reportedFailures.current.delete(key);
-    setFailedMedia((previous2) => {
-      const retained = new Set([...previous2].filter((key) => currentKeys.has(key)));
-      return retained.size === previous2.size ? previous2 : retained;
-    });
-  }, [config.scenes]);
-  const decoderConstrainedDevice = useDecoderConstraint();
-  const timeline = resolveVideoTimeline(config);
-  const lastRange = timeline.at(-1);
-  const foundIndex = timeline.findIndex((range) => time >= range.start && time < range.end);
-  const afterEnd = lastRange && time >= lastRange.end;
-  const targetIndex = foundIndex >= 0 ? foundIndex : afterEnd ? timeline.length - 1 : -1;
-  const target = timeline[targetIndex];
-  const targetKey = target ? sceneReadinessKey(target.scene) : void 0;
-  if (confirmedHandoff.current !== targetKey || !(playing || preparingNarration)) {
-    confirmedHandoff.current = void 0;
-    handoffProof.current = void 0;
-  }
-  const previousIndex = timeline.findIndex((range) => sceneReadinessKey(range.scene) === displayedKey.current);
-  const previous = timeline[previousIndex];
-  const canPrepare = (range) => Boolean(range && (mediaAudioMuted || !sceneHasVideoBackdrop(range)) && sceneHasBackdrop(range) && supportsExternalVideoBackdrop(kit.getTemplate(range.scene.templateId)));
-  const canRetain = (range) => canPrepare(range) || range?.scene.templateId === "chapterTitle";
-  const hasPlayableMedia = (range) => {
-    if (!range || !preparedMedia.has(sceneReadinessKey(range.scene))) return false;
-    const layer = [...recoveryRoot.current?.querySelectorAll("[data-layer-scene-id]") ?? []].find((node) => node.getAttribute("data-layer-scene-id") === range.scene.id);
-    if (!sceneHasVideoBackdrop(range)) {
-      const image = [...layer?.querySelectorAll("img") ?? []].find((element) => element.getAttribute("src") === range.scene.variables.mediaUrl);
-      return Boolean(image && image.getAttribute("src") === range.scene.variables.mediaUrl && image.complete && image.naturalWidth > 0);
-    }
-    const video = layer?.querySelector("video");
-    return Boolean(video && video.getAttribute("src") === range.scene.variables.mediaUrl && video.currentSrc === video.src && video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA);
-  };
-  const handoffPending = Boolean(displayedWasPlaying.current && target && previous && targetIndex === previousIndex + 1 && time <= target.start + 1e-3 && rangesAreContiguous(previous, target) && canRetain(previous) && canPrepare(target) && !failedMedia.has(sceneReadinessKey(target.scene)) && !hasPlayableMedia(target) && confirmedHandoff.current !== targetKey);
-  const activeIndex = handoffPending ? previousIndex : targetIndex;
-  const active = timeline[activeIndex];
-  const displayKey = active ? sceneReadinessKey(active.scene) : void 0;
-  displayedWasPlaying.current = displayedKey.current === displayKey && displayedWasPlaying.current || playing || preparingNarration;
-  displayedKey.current = displayKey;
-  if (!active) {
-    return /* @__PURE__ */ jsx2(
-      "div",
-      {
-        "data-video-frame": timeline.length === 0 ? "empty" : "gap",
-        className,
-        style: { width, height, background: "#000", ...style }
-      }
-    );
-  }
-  if (!kit.getTemplate(active.scene.templateId)) {
-    return /* @__PURE__ */ jsx2(
-      "div",
-      {
-        "data-video-frame": "unsupported",
-        "data-template-id": active.scene.templateId,
-        className,
-        style: { width, height, background: "#090712", color: "#fff", ...style },
-        children: /* @__PURE__ */ jsx2(SafeScene, { scene: active.scene, onFramePresented })
-      }
-    );
-  }
-  const duration = active.end - active.start;
-  const rawProgress = clamp01((time - active.start) / duration);
-  const transitionEnabled = supportsContinuousTransition(config.style.defaultTransition);
-  const next = activeIndex < timeline.length - 1 ? timeline[activeIndex + 1] : void 0;
-  const activeTemplate = kit.getTemplate(active.scene.templateId);
-  const nextTemplate = next ? kit.getTemplate(next.scene.templateId) : void 0;
-  const contiguousNext = next && rangesAreContiguous(active, next) ? next : void 0;
-  const transitionableNext = contiguousNext && activeTemplate.usesGlobalTransition && activeTemplate.transitionTiming && nextTemplate?.usesGlobalTransition && nextTemplate.transitionTiming ? contiguousNext : void 0;
-  const activeTiming = activeTemplate.transitionTiming;
-  const nextTiming = nextTemplate?.transitionTiming;
-  const eligibleNextTransition = Boolean(
-    transitionEnabled && transitionableNext && activeTiming && nextTiming && sceneBackgroundChanges(active, transitionableNext)
-  );
-  const blendDuration = Math.min(
-    SCENE_TRANSITION_SECONDS,
-    Math.max(0, duration)
-  );
-  const blendStart = active.end - blendDuration;
-  const blendEnd = blendStart + blendDuration;
-  const prerollsNext = Boolean(
-    contiguousNext && sceneHasBackdrop(contiguousNext) && sceneBackgroundChanges(active, contiguousNext)
-  );
-  const prerollDuration = prerollsNext ? Math.min(Math.max(MEDIA_PREROLL_SECONDS, blendDuration), Math.max(0, duration)) : blendDuration;
-  const prerollStart = active.end - prerollDuration;
-  const boundedPreparation = decoderConstrainedDevice && registrySupportsExternalVideoBackdrop(kit);
-  const decoderConstrainedTransition = Boolean(
-    contiguousNext && decoderConstrainedDevice && !boundedPreparation && sceneHasVideoBackdrop(active) && sceneHasVideoBackdrop(contiguousNext)
-  );
-  const activeMediaFailed = failedMedia.has(sceneReadinessKey(active.scene));
-  const preparingNext = canRetain(active) && canPrepare(contiguousNext);
-  const nextPlayable = hasPlayableMedia(contiguousNext);
-  const mountingNext = handoffPending || Boolean(
-    contiguousNext && !decoderConstrainedTransition && (boundedPreparation || time >= prerollStart) && time < blendEnd && (eligibleNextTransition || prerollsNext || boundedPreparation && sceneHasVideoBackdrop(contiguousNext))
-  );
-  const previewingNext = Boolean(
-    eligibleNextTransition && time >= blendStart && time < blendEnd && (!preparingNext || nextPlayable)
-  );
-  const blendProgress = previewingNext && blendDuration > 0 ? Math.round(clamp01((time - blendStart) / blendDuration) * 1e6) / 1e6 : 0;
-  const progress = rawProgress;
-  const isFinalScene = activeIndex === timeline.length - 1;
-  const presentsChapter = active.scene.templateId === "chapterTitle" || active.scene.templateId === "cinemaMedia" && (activeMediaFailed || !String(active.scene.variables.mediaUrl || "").trim());
-  const finalHold = presentsChapter ? 0.76 : activeTiming?.holdProgress;
-  const holdChapter = presentsChapter && preparingNext && !nextPlayable;
-  const motionProgress = (isFinalScene || holdChapter) && finalHold !== void 0 ? Math.min(rawProgress, finalHold) : rawProgress;
-  const canvas = getDimensions(config.orientation);
-  const scale = Math.min(width / canvas.width, height / canvas.height);
-  const canvasLeft = (width - canvas.width * scale) / 2;
-  const canvasTop = (height - canvas.height * scale) / 2;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: recoveryRoot,
-      onErrorCapture: (event) => {
-        const target2 = event.target;
-        if (!(target2 instanceof HTMLVideoElement || target2 instanceof HTMLImageElement)) return;
-        const ownerId = target2.closest("[data-layer-scene-id]")?.getAttribute("data-layer-scene-id");
-        const owner = [active, contiguousNext].find((range) => range?.scene.id === ownerId);
-        const template = owner && kit.getTemplate(owner.scene.templateId);
-        if (owner && template && supportsExternalVideoBackdrop(template) && target2.getAttribute("src") === owner.scene.variables.mediaUrl) {
-          markMediaFailed(sceneReadinessKey(owner.scene), "decode-error");
-        }
-      },
-      "data-video-frame": "ready",
-      "data-scene-id": active.scene.id,
-      "data-template-id": active.scene.templateId,
-      className,
-      style: {
-        width,
-        height,
-        position: "relative",
-        overflow: "hidden",
-        background: "#000",
-        ...style
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          MountedSceneReadiness,
-          {
-            scene: active.scene,
-            playing: playing && !handoffPending,
-            fallback: activeMediaFailed,
-            preparedProof: confirmedHandoff.current === sceneReadinessKey(active.scene) ? handoffProof.current : void 0,
-            onFailure: sceneHasBackdrop(active) && supportsExternalVideoBackdrop(activeTemplate) && !activeMediaFailed ? () => markMediaFailed(sceneReadinessKey(active.scene), "frame-readiness-timeout") : void 0
-          }
-        ),
-        mountingNext && contiguousNext && preparingNext && /* @__PURE__ */ jsx2(
-          MountedSceneReadiness,
-          {
-            scene: contiguousNext.scene,
-            playing: playing || preparingNarration,
-            observeIncoming: true,
-            timeoutMs: handoffPending ? 8e3 : null,
-            onReady: (proof) => {
-              const key = sceneReadinessKey(contiguousNext.scene);
-              if (handoffPending) {
-                confirmedHandoff.current = key;
-                handoffProof.current = proof;
-              }
-              markPrepared(key);
-            },
-            onFailure: () => markMediaFailed(sceneReadinessKey(contiguousNext.scene), "frame-readiness-timeout")
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-video-canvas": "true",
-            style: {
-              position: "absolute",
-              left: canvasLeft,
-              top: canvasTop,
-              width: canvas.width,
-              height: canvas.height,
-              transform: `scale(${scale})`,
-              transformOrigin: "top left"
-            },
-            children: [
-              /* @__PURE__ */ jsx2(
-                "div",
-                {
-                  "data-player-background": "black",
-                  "aria-hidden": "true",
-                  style: {
-                    position: "absolute",
-                    inset: 0,
-                    background: "#000",
-                    backgroundColor: "#000",
-                    pointerEvents: "none"
-                  }
-                }
-              ),
-              mountingNext && contiguousNext ? [
-                /* @__PURE__ */ jsx2(
-                  SceneLayer,
-                  {
-                    onFramePresented,
-                    kit,
-                    config,
-                    range: active,
-                    onMediaError: (reason) => markMediaFailed(sceneReadinessKey(active.scene), reason),
-                    progress,
-                    motionProgress,
-                    width: canvas.width,
-                    height: canvas.height,
-                    playing: handoffPending ? playing || preparingNarration : playing,
-                    preparingNarration: handoffPending ? false : preparingNarration,
-                    mediaAudioMuted,
-                    mediaAudioVolume,
-                    layer: previewingNext ? "outgoing" : "active",
-                    opacity: 1 - blendProgress,
-                    interactive: true,
-                    zIndex: 1,
-                    externalVideoBackdrop: activeMediaFailed ? "fallback" : false
-                  },
-                  active.scene.id
-                ),
-                /* @__PURE__ */ jsx2(
-                  SceneLayer,
-                  {
-                    kit,
-                    config,
-                    range: contiguousNext,
-                    progress: 0,
-                    motionProgress: 0,
-                    width: canvas.width,
-                    height: canvas.height,
-                    playing: Boolean(preparingNext && (!preparedMedia.has(sceneReadinessKey(contiguousNext.scene)) || handoffPending) && (playing || preparingNarration)),
-                    preparingNarration: preparingNext,
-                    mediaAudioMuted: true,
-                    mediaAudioVolume,
-                    layer: "incoming",
-                    opacity: blendProgress,
-                    interactive: false,
-                    zIndex: 2,
-                    onMediaError: (reason) => markMediaFailed(sceneReadinessKey(contiguousNext.scene), reason),
-                    externalVideoBackdrop: failedMedia.has(sceneReadinessKey(contiguousNext.scene)) ? "fallback" : false
-                  },
-                  contiguousNext.scene.id
-                )
-              ] : [
-                /* @__PURE__ */ jsx2(
-                  SceneLayer,
-                  {
-                    onFramePresented,
-                    kit,
-                    config,
-                    range: active,
-                    onMediaError: (reason) => markMediaFailed(sceneReadinessKey(active.scene), reason),
-                    progress,
-                    motionProgress,
-                    width: canvas.width,
-                    height: canvas.height,
-                    playing,
-                    preparingNarration,
-                    mediaAudioMuted,
-                    mediaAudioVolume,
-                    layer: "active",
-                    opacity: 1,
-                    interactive: true,
-                    zIndex: 1,
-                    externalVideoBackdrop: activeMediaFailed ? "fallback" : false
-                  },
-                  active.scene.id
-                )
-              ]
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-
-export {
-  MountedReadinessContext,
-  sceneReadinessKey,
-  getDimensions,
-  VideoFrame
-};