@vanillaskyai/video 0.10.3 → 0.10.4

package/dist/react.js

@@ -40,9 +40,9 @@ import {
   VideoFrame,
   getDimensions,
   sceneReadinessKey
-} from "./chunk-3U2F7C7C.js";
+} from "./chunk-WZFLEPLM.js";
 import "./chunk-224QNWRA.js";
-import "./chunk-YZZSWGC3.js";
+import "./chunk-OOBT4X46.js";
 import {
   getVideoDuration,
   resolveVideoTimeline
@@ -94,13 +94,13 @@ import { createElement } from "react";
 
 // src/visual-system/catalog/builtin-loaders.generated.ts
 var GENERATED_BUILTIN_TEMPLATE_LOADERS = {
-  "cinemaMedia": () => import("./cinema-media-4JUYKPQI.js").then((module) => ({ default: module.MediaSceneTemplate })),
+  "cinemaMedia": () => import("./cinema-media-3SIGVVCY.js").then((module) => ({ default: module.MediaSceneTemplate })),
   "chapterTitle": () => import("./chapter-title-YRLIQY3V.js").then((module) => ({ default: module.TitleSceneTemplate })),
-  "editorialTimeline": () => import("./editorial-timeline-IVE2P25N.js").then((module) => ({ default: module.TimelineSceneTemplate })),
-  "mobileMessage": () => import("./mobile-message-WLK3WY5B.js").then((module) => ({ default: module.NotificationSceneTemplate })),
-  "comparison": () => import("./comparison-3QLMUC5V.js").then((module) => ({ default: module.ComparisonSceneTemplate })),
-  "quote": () => import("./quote-Z6YET5BO.js").then((module) => ({ default: module.QuoteSceneTemplate })),
-  "keyFigure": () => import("./key-figure-APD56LCO.js").then((module) => ({ default: module.KeyFigureSceneTemplate }))
+  "editorialTimeline": () => import("./editorial-timeline-QJU4JJWB.js").then((module) => ({ default: module.TimelineSceneTemplate })),
+  "mobileMessage": () => import("./mobile-message-ZMMTUDUQ.js").then((module) => ({ default: module.NotificationSceneTemplate })),
+  "comparison": () => import("./comparison-VDGRWPB5.js").then((module) => ({ default: module.ComparisonSceneTemplate })),
+  "quote": () => import("./quote-BB6UJT6L.js").then((module) => ({ default: module.QuoteSceneTemplate })),
+  "keyFigure": () => import("./key-figure-YUAQW6OE.js").then((module) => ({ default: module.KeyFigureSceneTemplate }))
 };
 
 // src/visual-system/catalog/builtin-player.generated.ts
@@ -2095,7 +2095,7 @@ function errorFrom(cause) {
   return new VideoError("Video chat could not produce a playable response", { code: "video_chat_failed", recoverable: false });
 }
 async function responseError(response) {
-  return new VideoError(response.status === 429 ? "The conversation limit has been reached. Please try again later." : "Video chat could not produce a playable response", {
+  return new VideoError(response.status === 429 ? "Too many requests right now. Please try again shortly." : "Video chat could not produce a playable response", {
     code: "http_error",
     status: response.status,
     recoverable: false
@@ -2288,7 +2288,7 @@ function useVideoChatSession(options = {}) {
       throw new VideoError("timeoutMs must be positive", { code: "invalid_option" });
     }
     const timeout = setTimeout(() => controller.abort(new DOMException("Video chat timed out", "TimeoutError")), timeoutMs);
-    const mode = "cinematic";
+    const mode = currentOptions.mode ?? "cinematic";
     const orientation = currentOptions.orientation ?? "landscape";
     const id = (currentOptions.createTurnId ?? defaultTurnId)();
     const conversation = conversationFor(stateRef.current.turns);
@@ -2300,6 +2300,7 @@ function useVideoChatSession(options = {}) {
       completed: false,
       orientation,
       fixedOrientation: true,
+      mode,
       suggestions: [],
       ...openingMedia ? { openingMedia } : {}
     };
@@ -2368,26 +2369,30 @@ function useVideoChatSession(options = {}) {
       }
     };
     flushRef.current = flush;
-    const resolveOpeningMedia = async (keyword, fallbackKeyword) => {
-      try {
-        const response = await request("opening-media", {
-          method: "POST",
-          body: JSON.stringify({ keyword, ...fallbackKeyword ? { fallbackKeyword } : {}, orientation })
-        }, openingController.signal);
-        if (!response.ok || !isOpeningCurrent() || timeline) return;
-        const payload = await response.json();
-        const media = sanitizeVideoChatMedia(payload.media);
-        if (media && isOpeningCurrent() && !timeline) dispatch({ type: "opening-media", id, media });
-      } catch {
-      }
-    };
-    const prepareSpeech = async (text, signal) => {
-      try {
-        return currentOptions.voice ? await withDeadline((child) => voiceRef.current.prepare(text, { signal: child }), 3e3, signal) : await voiceRef.current.prepare(text, { signal });
-      } catch (cause) {
-        if (currentOptions.voice && !signal.aborted && isCurrent()) unavailableVoiceLines.current.add(text);
-        throw cause;
-      }
+    const speechLoads = /* @__PURE__ */ new Map();
+    const speechLanes = [Promise.resolve(), Promise.resolve()];
+    let nextSpeechLane = 0;
+    let customVoiceFailed = false;
+    const prepareSpeech = (text, signal) => {
+      const cached = speechLoads.get(text);
+      if (cached) return cached;
+      const lane = nextSpeechLane++ % speechLanes.length;
+      const prepared = speechLanes[lane].then(async () => {
+        signal.throwIfAborted();
+        try {
+          if (customVoiceFailed) throw new Error("Voice preparation did not respond");
+          return currentOptions.voice ? await withDeadline((child) => voiceRef.current.prepare(text, { signal: child }), 3e3, signal) : await voiceRef.current.prepare(text, { signal });
+        } catch (cause) {
+          if (currentOptions.voice && !signal.aborted && isCurrent()) {
+            unavailableVoiceLines.current.add(text);
+            if (cause instanceof DOMException && cause.name === "TimeoutError") customVoiceFailed = true;
+          }
+          throw cause;
+        }
+      });
+      speechLoads.set(text, prepared);
+      speechLanes[lane] = prepared.catch(() => void 0);
+      return prepared;
     };
     const speakOpening = async (text) => {
       try {
@@ -2440,12 +2445,16 @@ function useVideoChatSession(options = {}) {
           if (event.type === "response.warning" || event.type === "response.error" && !event.data.terminal) {
             warn(event.type === "response.warning" && event.data.warning.message === MEDIA_RECOVERY_NOTICE ? MEDIA_RECOVERY_NOTICE : "Some parts were simplified so the response could continue.");
           }
+          if (event.type === "data.video-chat-preparation") {
+            const data = event.data;
+            if (data && typeof data.sceneId === "string" && data.sceneId.length <= 200 && typeof data.narration === "string" && data.narration.trim() && data.narration.length <= 2e3 && speechLoads.size < 32) {
+              void prepareSpeech(data.narration.trim(), controller.signal).catch(() => void 0);
+            }
+            continue;
+          }
           if (event.type === "data.video-chat-opening") {
             const payload = event.data && typeof event.data === "object" && !Array.isArray(event.data) ? event.data : {};
             const line = typeof payload.line === "string" ? payload.line.trim().slice(0, 300) : "";
-            const keyword = typeof payload.keyword === "string" ? payload.keyword.trim().slice(0, 80) : "";
-            const fallbackKeyword = typeof payload.fallbackKeyword === "string" ? payload.fallbackKeyword.trim().slice(0, 80) : void 0;
-            if (!openingMedia && keyword) void resolveOpeningMedia(keyword, fallbackKeyword);
             if (!openingRequested && line) {
               spokenHook = line;
               lines.push(line);
@@ -3328,6 +3337,13 @@ function Logo() {
   return /* @__PURE__ */ jsx7("img", { className: "brand-logo", src: new URL("./assets/vanillasky-logo.svg", import.meta.url).href, alt: "VanillaSky", width: 144, height: 36 });
 }
 
+// src/video-chat/modes.ts
+var visualModes = [
+  { id: "cinematic", label: "AI video", note: "Generated footage shaped by your prompt" },
+  { id: "pexels", label: "Pexels", note: "Stock footage with lower generation costs" }
+];
+var defaultMode = visualModes[0];
+
 // src/video-chat/video-chat.tsx
 import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var DESKTOP_WIDTH = 900;
@@ -3343,28 +3359,13 @@ function useViewportOrientation() {
   }, []);
   return portrait ? "portrait" : "landscape";
 }
-var STEPS = [
-  "Rolling camera\u2026",
-  "Framing the shots\u2026",
-  "Filming your response\u2026",
-  "Still filming\u2026"
-];
-function useFilmingStep(active, key) {
-  const [step, setStep] = useState7(0);
-  useEffect9(() => {
-    if (!active) return;
-    setStep(0);
-    const stepper = window.setInterval(() => setStep((current) => current + 1), 3e3);
-    return () => window.clearInterval(stepper);
-  }, [active, key]);
-  return STEPS[Math.min(step, STEPS.length - 1)];
-}
 function Waveform({ active, listening }) {
   return /* @__PURE__ */ jsx8("span", { className: `waveform${active ? " on" : ""}${listening ? " hearing" : ""}`, "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((bar) => /* @__PURE__ */ jsx8("span", { style: { animationDelay: `${bar * 140}ms`, animationDuration: `${900 + bar * 130}ms` } }, bar)) });
 }
 function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice = false }) {
   const [dismissedNoticeTurn, setDismissedNoticeTurn] = useState7();
   const [draft, setDraft] = useState7("");
+  const [selectedMode, setSelectedMode] = useState7();
   const [savedSessions, setSavedSessions] = useState7([]);
   const [historyOpen, setHistoryOpen] = useState7(false);
   const [settingsOpen, setSettingsOpen] = useState7(false);
@@ -3380,7 +3381,8 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
   const sessionOrientation = options.orientation ?? viewportOrientation;
   const { chat, restoreSession } = useVideoChatSession({
     ...options,
-    orientation: sessionOrientation
+    orientation: sessionOrientation,
+    mode: selectedMode ?? options.mode
   });
   const instanceId = useId();
   const historyId = `${instanceId}-history`;
@@ -3417,7 +3419,6 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
     resumeAfterInput.current = false;
     inputRef.current?.blur();
     void chat.ask(prompt, typeof value === "string" ? void 0 : {
-      openingMedia: value.media,
       opening: value.opening
     });
   }, [chat, listen]);
@@ -3440,16 +3441,10 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
     resumeAfterInput.current = false;
     inputRef.current?.blur();
   }, [chat, listen]);
-  const current = chat.currentTurn;
   const shown = chat.shownTurn;
   const showing = chat.playerProps != null;
-  const [openingAsset, setOpeningAsset] = useState7();
-  const openingAssetKey = `${shown?.id ?? ""}:${shown?.openingMedia?.url ?? ""}`;
-  const openingMediaFailed = openingAsset?.key === openingAssetKey && openingAsset.state === "failed";
-  const openingMediaReady = openingAsset?.key === openingAssetKey && openingAsset.state === "ready";
-  const openingChapter = !showing && Boolean(shown?.opening) && (!shown?.openingMedia || openingMediaFailed || !openingMediaReady);
-  const waitingForPicture = chat.turns.length > 0 && !showing && (chat.status === "composing" || chat.status === "playing" || chat.status === "paused");
-  const filmingStep = useFilmingStep(waitingForPicture, current?.id);
+  const openingChapter = !showing && Boolean(shown?.prompt);
+  const openingTitle = shown?.opening ?? shown?.prompt ?? "";
   const status = chat.turns.length === 0 ? "idle" : chat.status === "composing" ? "drawing" : chat.status === "playing" ? "narrating" : chat.status === "error" || chat.status === "cancelled" ? "ended" : chat.status;
   const shownOrientation = shown?.orientation ?? sessionOrientation;
   const stageOrientation = shown?.fixedOrientation ? shownOrientation : sessionOrientation;
@@ -3509,7 +3504,10 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
       onKeyDownCapture: controls.reveal,
       children: [
         /* @__PURE__ */ jsxs6("header", { className: "chrome", ...controlEvents, children: [
-          /* @__PURE__ */ jsx8("div", { className: "session-brand", children: /* @__PURE__ */ jsx8(Logo, {}) }),
+          /* @__PURE__ */ jsxs6("div", { className: "session-brand", children: [
+            /* @__PURE__ */ jsx8(Logo, {}),
+            (shown?.mode ?? selectedMode ?? options.mode) === "pexels" && /* @__PURE__ */ jsx8("a", { className: "media-credit", href: "https://www.pexels.com", target: "_blank", rel: "noopener noreferrer", children: "Videos by Pexels" })
+          ] }),
           /* @__PURE__ */ jsxs6("div", { className: "group", children: [
             /* @__PURE__ */ jsxs6(
               "button",
@@ -3564,27 +3562,8 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
         /* @__PURE__ */ jsxs6("div", { className: "stage-area", children: [
           /* @__PURE__ */ jsxs6("div", { className: "stage", style: { background: "#000" }, children: [
             !showing && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-              /* @__PURE__ */ jsx8("div", { className: "ground", "aria-hidden": "true" }),
-              openingChapter && /* @__PURE__ */ jsx8(OpeningChapter, { title: shown.opening }, shown.id),
-              shown?.openingMedia && !openingMediaFailed && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-                /* @__PURE__ */ jsx8(
-                  Frame,
-                  {
-                    media: shown.openingMedia,
-                    poster: true,
-                    revealWhenReady: true,
-                    onReady: () => setOpeningAsset({ key: openingAssetKey, state: "ready" }),
-                    onError: () => setOpeningAsset({ key: openingAssetKey, state: "failed" })
-                  },
-                  openingAssetKey
-                ),
-                openingMediaReady && /* @__PURE__ */ jsx8("div", { className: "opening-wash", "aria-hidden": "true" })
-              ] }),
-              chat.turns.length === 0 && /* @__PURE__ */ jsx8(Welcome, { data: chat.welcome, onAsk: ask, title: welcomeTitle }),
-              shown?.prompt && !shown.opening && /* @__PURE__ */ jsxs6("div", { className: "asked", children: [
-                /* @__PURE__ */ jsx8("p", { className: "asked-prompt", children: shown.prompt }),
-                waitingForPicture && /* @__PURE__ */ jsx8("p", { className: "asked-step", "aria-live": "polite", children: filmingStep })
-              ] })
+              openingChapter && /* @__PURE__ */ jsx8(OpeningChapter, { title: openingTitle.length > 120 ? `${openingTitle.slice(0, 117).trimEnd()}\u2026` : openingTitle }, shown.id),
+              chat.turns.length === 0 && /* @__PURE__ */ jsx8(Welcome, { data: chat.welcome, onAsk: ask, title: welcomeTitle })
             ] }),
             chat.playerProps && /* @__PURE__ */ jsx8("div", { className: "player-fit", style: { width: stageOrientation === "portrait" ? "min(100cqw, 56.25cqh)" : "min(100cqw, 177.7778cqh)" }, children: /* @__PURE__ */ jsx8(
               VideoPlayer,
@@ -3683,6 +3662,25 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                   /* @__PURE__ */ jsx8("h2", { children: "Settings" }),
                   /* @__PURE__ */ jsx8("button", { type: "button", className: "round", "aria-label": "Close settings", onClick: closeSettings, children: /* @__PURE__ */ jsx8(Close, {}) })
                 ] }),
+                /* @__PURE__ */ jsxs6("fieldset", { className: "playback-options", children: [
+                  /* @__PURE__ */ jsx8("legend", { children: "Video source" }),
+                  visualModes.filter((mode) => chat.availableModes.includes(mode.id)).map((mode) => /* @__PURE__ */ jsxs6("label", { className: "switch-row", children: [
+                    /* @__PURE__ */ jsxs6("span", { children: [
+                      /* @__PURE__ */ jsx8("strong", { children: mode.label }),
+                      /* @__PURE__ */ jsx8("small", { children: mode.note })
+                    ] }),
+                    /* @__PURE__ */ jsx8(
+                      "input",
+                      {
+                        type: "radio",
+                        name: `${instanceId}-source`,
+                        value: mode.id,
+                        checked: (selectedMode ?? options.mode ?? "cinematic") === mode.id,
+                        onChange: () => setSelectedMode(mode.id)
+                      }
+                    )
+                  ] }, mode.id))
+                ] }),
                 /* @__PURE__ */ jsxs6("fieldset", { className: "playback-options", children: [
                   /* @__PURE__ */ jsx8("legend", { children: "Watching" }),
                   /* @__PURE__ */ jsxs6("label", { className: "switch-row", children: [

package/dist/{scene-video-backdrop-OWUXPXHZ.js → scene-video-backdrop-4EZVVQY7.js}

@@ -1,7 +1,7 @@
 import {
   SceneVideoBackdrop
-} from "./chunk-SI6CFFAA.js";
-import "./chunk-YZZSWGC3.js";
+} from "./chunk-O6FBIB4L.js";
+import "./chunk-OOBT4X46.js";
 export {
   SceneVideoBackdrop
 };

package/dist/server.d.ts

@@ -2,8 +2,8 @@ import { k as VideoGenerationContext, l as VideoPlanner, m as VideoRequest, a as
 import { a as VideoFinishReason, V as VideoWarning, b as VideoEvent } from './events-B4YCc4vc.js';
 export { c as VideoWarningCategory } from './events-B4YCc4vc.js';
 import { S as SceneTemplateMetadata } from './catalog-types-WTbLP6Jh.js';
-import { f as VideoChatWelcomeOptions } from './types-CdBmNTGD.js';
-export { d as VideoChatCapabilities, g as VideoChatConversationTurn, V as VideoChatMode, h as VideoChatWelcomePrompt } from './types-CdBmNTGD.js';
+import { V as VideoChatMode, f as VideoChatWelcomeOptions } from './types-BqB8zC9u.js';
+export { d as VideoChatCapabilities, g as VideoChatConversationTurn, h as VideoChatWelcomePrompt } from './types-BqB8zC9u.js';
 
 interface VideoProviderUsage {
     inputTokens?: number;
@@ -236,6 +236,18 @@ interface VideoChatHandlerOptions extends Pick<VideoHandlerOptions, "templates"
     maxGeneratedVideos?: number;
     /** Generated media deadline in milliseconds, 1–120000. Defaults to 15000. Host providers must honor cancellation. */
     generateVideoTimeoutMs?: number;
+    /** Provider-supported clip duration in seconds, 2–20. Defaults to 5; does not change provider billing configuration. */
+    generatedClipDurationSec?: number;
+    /** Safe host-only phase timings; never includes prompts, narration, media URLs or provider error text. */
+    onDiagnostic?: (event: {
+        requestId: string;
+        mode: VideoChatMode;
+        phase: "request-accepted" | "opening-authored" | "shot-authored" | "media-start" | "media-end" | "media-skipped";
+        elapsedMs: number;
+        sceneId?: string;
+        durationMs?: number;
+        reason?: "ready" | "empty" | "provider-error" | "timeout" | "cancelled" | "allowance" | "deadline" | "not-configured";
+    }) => unknown;
     /** Trusted application guidance appended to the general-purpose response brief. */
     instructions?: string;
     /** Application-owned prompts and visual searches shown before the first turn. */
@@ -254,4 +266,4 @@ type VideoChatHandler = (request: Request) => Promise<Response>;
  */
 declare function createVideoChatHandler(options: VideoChatHandlerOptions): VideoChatHandler;
 
-export { SceneTemplateMetadata as ServerTemplateMetadata, type ServerTemplateRegistry, type VideoChatHandlerOptions, VideoChatWelcomeOptions, VideoFinishReason, type VideoGenerationSummary, type VideoProviderUsage, VideoWarning, createServerTemplateRegistry, createVideoChatHandler };
+export { SceneTemplateMetadata as ServerTemplateMetadata, type ServerTemplateRegistry, type VideoChatHandlerOptions, VideoChatMode, VideoChatWelcomeOptions, VideoFinishReason, type VideoGenerationSummary, type VideoProviderUsage, VideoWarning, createServerTemplateRegistry, createVideoChatHandler };