@vanillaskyai/video 0.10.23 → 0.11.1

package/dist/{chunk-44WND2VP.js → chunk-RFXHLLYU.js}

@@ -1,9 +1,6 @@
 import {
   parseVideoEvent
-} from "./chunk-7M56IUUX.js";
-import {
-  MAX_RETAINED_MEDIA_URL_LENGTH
-} from "./chunk-AUPC6MDK.js";
+} from "./chunk-6Z3ID54H.js";
 import {
   VIDEO_PROTOCOL_VERSION
 } from "./chunk-7NZOMTAL.js";
@@ -139,65 +136,37 @@ function videoSseHeaders(headers) {
   return result;
 }
 
-// src/video-chat/deadline.ts
-function withDeadline(operation, timeoutMs, parent) {
-  return new Promise((resolve, reject) => {
-    const controller = new AbortController();
-    let settled = false;
-    const timer = setTimeout(() => finish({ error: new DOMException("Optional work exceeded its deadline", "TimeoutError") }), timeoutMs);
-    const finish = (result) => {
-      if (settled) return;
-      settled = true;
-      clearTimeout(timer);
-      parent?.removeEventListener("abort", cancel);
-      if ("error" in result) {
-        reject(result.error);
-        controller.abort(result.error);
-      } else {
-        resolve(result.value);
-        controller.abort();
-      }
-    };
-    const cancel = () => finish({ error: parent?.reason ?? new DOMException("Cancelled", "AbortError") });
-    if (parent?.aborted) {
-      cancel();
-      return;
-    }
-    parent?.addEventListener("abort", cancel, { once: true });
-    try {
-      const result = operation(controller.signal);
-      Promise.resolve(result).then((value) => finish({ value }), (error) => finish({ error }));
-    } catch (error) {
-      finish({ error });
-    }
-  });
-}
-
-// src/video-chat/media.ts
-function sanitizeVideoChatMedia(value) {
-  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
-  const media = value;
-  if (media.type !== "image" && media.type !== "video") return null;
-  if (typeof media.url !== "string") return null;
-  const url = media.url.trim();
-  if (!safeMediaUrl(url)) return null;
-  if (media.posterUrl != null && typeof media.posterUrl !== "string") return null;
-  const posterUrl = typeof media.posterUrl === "string" ? media.posterUrl.trim() : "";
-  if (posterUrl && !safeMediaUrl(posterUrl)) return null;
+// src/protocol/clip-budget.ts
+var CLIP_NARRATION_TAIL_SEC = 0.8;
+function clipNarrationBudget(clipDurationSec) {
+  const maxSpeechSec = Math.max(0, clipDurationSec - CLIP_NARRATION_TAIL_SEC);
+  const maxWords = Math.floor(maxSpeechSec * 2);
+  const maxUnspacedCharacters = Math.floor(maxSpeechSec * 3);
   return {
-    url,
-    type: media.type,
-    ...posterUrl ? { posterUrl } : {}
+    clipDurationSec,
+    maxSpeechSec,
+    targetWords: Math.floor(maxWords * 0.8),
+    targetUnspacedCharacters: Math.floor(maxUnspacedCharacters * 0.8),
+    maxWords,
+    maxUnspacedCharacters
   };
 }
-function safeMediaUrl(value) {
-  if (!value || value.length > MAX_RETAINED_MEDIA_URL_LENGTH) return false;
-  try {
-    const protocol = new URL(value).protocol;
-    return protocol === "https:" || protocol === "http:";
-  } catch {
-    return false;
-  }
+var UNSPACED_SCRIPT = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}\p{Script=Thai}\p{Script=Lao}\p{Script=Khmer}\p{Script=Myanmar}]/gu;
+function estimateNarrationSeconds(text) {
+  const normalized = text.trim();
+  if (!normalized) return 0;
+  const characters = normalized.match(UNSPACED_SCRIPT)?.length ?? 0;
+  const words = normalized.replace(UNSPACED_SCRIPT, " ").match(/[\p{L}\p{N}]+(?:['’][\p{L}\p{N}]+)*/gu)?.length ?? 0;
+  const numericExpansion = (normalized.match(/\p{Nd}+/gu) ?? []).reduce((sum, digits) => sum + Math.max(0, digits.length - 1) + (digits.length >= 3 ? 1 : 0), 0);
+  const symbols = normalized.match(/[%°\p{Sc}]/gu)?.length ?? 0;
+  const pauses = normalized.match(/[.!?。！？;；:：]/gu)?.length ?? 0;
+  return (words + numericExpansion + symbols) / 2.2 + characters / 3.5 + pauses * 0.15;
+}
+function speechFitsClip(seconds, durationSec) {
+  return Number.isFinite(seconds) && seconds >= 0 && Number.isFinite(durationSec) && durationSec > 0 && seconds + CLIP_NARRATION_TAIL_SEC <= durationSec + 1e-6;
+}
+function narrationFitsClip(text, durationSec) {
+  return speechFitsClip(estimateNarrationSeconds(text), durationSec);
 }
 
 export {
@@ -208,6 +177,9 @@ export {
   encodeVideoSseEvent,
   decodeVideoSse,
   videoSseHeaders,
-  withDeadline,
-  sanitizeVideoChatMedia
+  CLIP_NARRATION_TAIL_SEC,
+  clipNarrationBudget,
+  estimateNarrationSeconds,
+  speechFitsClip,
+  narrationFitsClip
 };

package/dist/{chunk-RXTN2CW6.js → chunk-Z3DLSLAJ.js}

@@ -1,6 +1,6 @@
 import {
   parseVideoEvent
-} from "./chunk-7M56IUUX.js";
+} from "./chunk-6Z3ID54H.js";
 import {
   VIDEO_PROTOCOL_VERSION,
   VIDEO_SCHEMA_VERSION

package/dist/cinema-media-YZ2UANJG.js

@@ -0,0 +1,365 @@
+import {
+  useExternalVideoBackdrop,
+  useMediaAudio,
+  useMediaFailure,
+  useNarrationPreroll
+} from "./chunk-666HGTVZ.js";
+import {
+  resolveMediaType
+} from "./chunk-K5J7ESRO.js";
+
+// src/visual-system/scene-templates/scene-background.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/visual-system/scene-templates/media-position.ts
+var MEDIA_POSITIONS = {
+  center: "center center",
+  top: "center top",
+  bottom: "center bottom",
+  left: "left center",
+  right: "right center"
+};
+function resolveMediaPosition(value) {
+  return MEDIA_POSITIONS[value] ?? MEDIA_POSITIONS.center;
+}
+
+// src/visual-system/scene-templates/scene-video-backdrop.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SceneVideoBackdrop = ({
+  mediaUrl,
+  mediaPoster,
+  mediaPosition = "center",
+  progress,
+  sceneDuration,
+  preparingNarration = false,
+  isPlaying,
+  muted,
+  volume,
+  playbackId = mediaUrl,
+  onReady,
+  onError
+}) => {
+  const inheritedAudio = useMediaAudio();
+  const reportMediaFailure = useMediaFailure();
+  const inheritedPreroll = useNarrationPreroll();
+  const rewindPreroll = preparingNarration || inheritedPreroll;
+  const resolvedMuted = muted ?? inheritedAudio.muted;
+  const resolvedVolume = volume ?? inheritedAudio.volume;
+  const resolvedPosition = resolveMediaPosition(mediaPosition);
+  const [decodedVideoUrl, setDecodedVideoUrl] = useState();
+  const [waitingKey, setWaitingKey] = useState();
+  const [exhaustedKey, setExhaustedKey] = useState();
+  const videoRef = useRef(null);
+  const playableVideoUrl = useRef(void 0);
+  const startedVideoUrl = useRef(void 0);
+  const startedPlaybackId = useRef(void 0);
+  const videoPresentationKey = `${playbackId}\0${mediaUrl}`;
+  const presentationRef = useRef({ key: videoPresentationKey, playing: isPlaying });
+  const failedPresentationRef = useRef(void 0);
+  const previousProgressRef = useRef({ key: videoPresentationKey, progress });
+  presentationRef.current = { key: videoPresentationKey, playing: isPlaying };
+  const unavailable = (reason = "playback-error") => {
+    if (presentationRef.current.key === videoPresentationKey && failedPresentationRef.current !== videoPresentationKey && (presentationRef.current.playing || reason === "duration-mismatch")) {
+      failedPresentationRef.current = videoPresentationKey;
+      setExhaustedKey(videoPresentationKey);
+      onError?.();
+      reportMediaFailure?.(reason);
+    }
+  };
+  useEffect(() => {
+    if (!isPlaying || rewindPreroll || waitingKey !== videoPresentationKey) {
+      if (waitingKey) setWaitingKey(void 0);
+      return;
+    }
+    const video = videoRef.current;
+    if (!video) return;
+    const expectedSource = video.getAttribute("src") === mediaUrl ? video.src : void 0;
+    let awaitingPlayback = playableVideoUrl.current !== mediaUrl || video.currentSrc !== expectedSource;
+    let previousTime = video.currentTime;
+    let forwardFrames = 0;
+    let stopped = false;
+    let frame;
+    let poll;
+    const observe = (_now, metadata) => {
+      if (stopped) return;
+      const currentSource = video.currentSrc === expectedSource;
+      if (currentSource && awaitingPlayback && video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+        playableVideoUrl.current = mediaUrl;
+        awaitingPlayback = false;
+        clearTimeout(deadline);
+        deadline = setTimeout(fail, 1e3);
+      }
+      const time = metadata?.mediaTime ?? video.currentTime;
+      if (!currentSource || video.seeking || time < previousTime) forwardFrames = 0;
+      else if (time > previousTime + 1e-3) forwardFrames++;
+      previousTime = time;
+      if (forwardFrames >= 2) {
+        playableVideoUrl.current = mediaUrl;
+        stopped = true;
+        clearTimeout(deadline);
+        setWaitingKey(void 0);
+        return;
+      }
+      if (video.requestVideoFrameCallback) frame = video.requestVideoFrameCallback(observe);
+      else poll = setTimeout(observe, 50);
+    };
+    const fail = () => {
+      if (!stopped) {
+        stopped = true;
+        unavailable(awaitingPlayback ? "frame-readiness-timeout" : "stalled-media");
+      }
+    };
+    let deadline = setTimeout(fail, awaitingPlayback ? 8e3 : 1e3);
+    observe();
+    return () => {
+      stopped = true;
+      clearTimeout(deadline);
+      clearTimeout(poll);
+      if (frame !== void 0) video.cancelVideoFrameCallback?.(frame);
+    };
+  }, [waitingKey, videoPresentationKey, isPlaying, rewindPreroll]);
+  const onReadyRef = useRef(onReady);
+  onReadyRef.current = onReady;
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    let stopped = false;
+    let frame;
+    const markPresented = () => {
+      if (stopped || !video.isConnected || presentationRef.current.key !== videoPresentationKey || video.getAttribute("src") !== mediaUrl || video.currentSrc !== video.src || failedPresentationRef.current === videoPresentationKey) return false;
+      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) playableVideoUrl.current = mediaUrl;
+      video.dispatchEvent(new Event("vanillasky:video-frame-presented", { bubbles: true }));
+      onReadyRef.current?.();
+      setDecodedVideoUrl(mediaUrl);
+      stopped = true;
+      return true;
+    };
+    const observe = () => {
+      if (stopped || frame !== void 0) return;
+      if (video.requestVideoFrameCallback) {
+        frame = video.requestVideoFrameCallback(() => {
+          frame = void 0;
+          if (!markPresented()) observe();
+        });
+      } else if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) markPresented();
+    };
+    video.addEventListener("loadeddata", observe);
+    observe();
+    return () => {
+      stopped = true;
+      video.removeEventListener("loadeddata", observe);
+      if (frame !== void 0) video.cancelVideoFrameCallback?.(frame);
+    };
+  }, [mediaUrl, videoPresentationKey]);
+  const fitDuration = useCallback((video) => {
+    video.playbackRate = 1;
+    if (sceneDuration && Number.isFinite(video.duration) && video.duration > 0 && sceneDuration > video.duration + 0.05) {
+      video.pause();
+      unavailable("duration-mismatch");
+      return false;
+    }
+    return true;
+  }, [sceneDuration, videoPresentationKey]);
+  useEffect(() => {
+    if (videoRef.current) fitDuration(videoRef.current);
+  }, [fitDuration]);
+  const finishMotion = () => {
+    if (!isPlaying) return;
+    unavailable();
+  };
+  useEffect(() => {
+    const previous = previousProgressRef.current;
+    previousProgressRef.current = { key: videoPresentationKey, progress };
+    const video = videoRef.current;
+    if (!video || rewindPreroll || previous.key !== videoPresentationKey || progress >= previous.progress - 0.05 || !sceneDuration || !Number.isFinite(sceneDuration)) return;
+    video.currentTime = Math.max(0, progress * sceneDuration);
+    failedPresentationRef.current = void 0;
+    setExhaustedKey(void 0);
+    if (isPlaying && video.paused) void video.play().catch(() => unavailable());
+  }, [progress, videoPresentationKey, sceneDuration, rewindPreroll, isPlaying]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.getAttribute("src") !== mediaUrl) {
+      video.setAttribute("src", mediaUrl);
+      video.load();
+    }
+  }, [mediaUrl]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    return () => {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+      startedVideoUrl.current = void 0;
+      startedPlaybackId.current = void 0;
+    };
+  }, []);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (video) video.volume = resolvedVolume;
+  }, [resolvedVolume]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (!isPlaying) {
+      video.pause();
+      if (rewindPreroll && !resolvedMuted && video.currentTime > 0) video.currentTime = 0;
+      return;
+    }
+    if (startedPlaybackId.current === playbackId) {
+      if (video.ended) finishMotion();
+      else void video.play().catch(() => unavailable());
+      return;
+    }
+    const changingSource = startedVideoUrl.current !== void 0 && startedVideoUrl.current !== mediaUrl;
+    if (!fitDuration(video)) return;
+    if (!changingSource && video.currentTime > 0) video.currentTime = 0;
+    video.play().catch(() => unavailable());
+    startedVideoUrl.current = mediaUrl;
+    startedPlaybackId.current = playbackId;
+  }, [isPlaying, mediaUrl, playbackId, rewindPreroll]);
+  const enforceRequestedPause = (event) => {
+    if (presentationRef.current.playing) return;
+    event.currentTarget.pause();
+    if (rewindPreroll && event.currentTarget.currentTime > 0) event.currentTarget.currentTime = 0;
+  };
+  const mediaStyle = {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    objectPosition: resolvedPosition
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    exhaustedKey === videoPresentationKey && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "status",
+        "data-media-continuity": "exhausted",
+        style: { position: "absolute", inset: 0, zIndex: 3, background: "#000", color: "#bbb", display: "grid", placeContent: "center", font: "14px system-ui" },
+        children: "Visual unavailable"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "video",
+      {
+        ref: videoRef,
+        src: mediaUrl,
+        poster: decodedVideoUrl !== mediaUrl ? mediaPoster || void 0 : void 0,
+        muted: resolvedMuted,
+        loop: false,
+        playsInline: true,
+        preload: "auto",
+        onLoadedMetadata: (event) => fitDuration(event.currentTarget),
+        onEnded: finishMotion,
+        onPlay: enforceRequestedPause,
+        onPlaying: (event) => {
+          if (event.currentTarget.currentSrc === event.currentTarget.src && event.currentTarget.getAttribute("src") === mediaUrl && event.currentTarget.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) playableVideoUrl.current = mediaUrl;
+          enforceRequestedPause(event);
+        },
+        onWaiting: () => {
+          if (isPlaying) setWaitingKey(videoPresentationKey);
+        },
+        onError,
+        "data-media-position": mediaPosition,
+        "data-video-backdrop": "scene",
+        style: { ...mediaStyle, visibility: exhaustedKey === videoPresentationKey ? "hidden" : void 0 }
+      }
+    )
+  ] });
+};
+
+// src/visual-system/scene-templates/scene-background.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function getMediaBackgroundProps(variables) {
+  return {
+    mediaUrl: String(variables.mediaUrl || ""),
+    mediaType: String(variables.mediaType || "auto"),
+    mediaPoster: String(variables.mediaPoster || ""),
+    mediaPosition: String(variables.mediaPosition || "center")
+  };
+}
+function SceneBackground({
+  progress,
+  sceneDuration,
+  mediaUrl = "",
+  mediaType = "auto",
+  mediaPoster,
+  mediaPosition = "center",
+  isPlaying = true
+}) {
+  const resolved = resolveMediaType(mediaType, mediaUrl);
+  const wantsMedia = resolved !== "gradient" && !!mediaUrl;
+  const backdrop = useExternalVideoBackdrop();
+  const external = backdrop !== false && resolved === "video";
+  const [failedUrl, setFailedUrl] = useState2();
+  useEffect2(() => {
+    if (!wantsMedia || resolved !== "photo" || typeof Image === "undefined") return;
+    let cancelled = false;
+    const probe = new Image();
+    const fail = () => {
+      if (!cancelled) setFailedUrl(mediaUrl);
+    };
+    probe.onerror = fail;
+    probe.src = mediaUrl;
+    if (probe.complete && probe.naturalWidth === 0) fail();
+    return () => {
+      cancelled = true;
+      probe.onerror = null;
+    };
+  }, [mediaUrl, resolved, wantsMedia]);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    (!external || backdrop === "fallback") && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        "data-scene-background": "black",
+        style: { position: "absolute", inset: 0, background: "#000", pointerEvents: "none" }
+      }
+    ),
+    wantsMedia && failedUrl !== mediaUrl && !external && (resolved === "video" ? /* @__PURE__ */ jsx2(
+      SceneVideoBackdrop,
+      {
+        mediaUrl,
+        mediaPoster,
+        mediaPosition,
+        progress,
+        sceneDuration,
+        isPlaying,
+        onError: () => setFailedUrl(mediaUrl)
+      }
+    ) : /* @__PURE__ */ jsx2(
+      "img",
+      {
+        src: mediaUrl,
+        alt: "",
+        "aria-hidden": "true",
+        draggable: false,
+        "data-media-position": mediaPosition,
+        onError: () => setFailedUrl(mediaUrl),
+        style: {
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          objectPosition: resolveMediaPosition(mediaPosition)
+        }
+      }
+    ))
+  ] });
+}
+
+// src/visual-system/scene-templates/cinema-media.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function MediaScene({ variables, width, height, progress, sceneDuration, isPlaying }) {
+  return /* @__PURE__ */ jsx3("div", { "data-template": "cinemaMedia", style: { width, height, position: "relative", overflow: "hidden" }, children: /* @__PURE__ */ jsx3(SceneBackground, { progress, sceneDuration, ...getMediaBackgroundProps(variables), isPlaying }) });
+}
+var MediaSceneTemplate = MediaScene;
+export {
+  MediaScene,
+  MediaSceneTemplate
+};