@vanillaskyai/video 0.1.1 → 0.3.0

package/dist/react.js

@@ -2,14 +2,14 @@ import {
   VIDEO_STREAM_CONTENT_TYPE,
   VIDEO_STREAM_HEADER,
   decodeVideoSse
-} from "./chunk-OOPIETLW.js";
+} from "./chunk-S5ZU5WUU.js";
 import {
   applyVideoEvent,
   createVideoState
-} from "./chunk-ABPKM4GK.js";
+} from "./chunk-STIFILQG.js";
 import {
   safePublicDiagnostic
-} from "./chunk-ERY4S6QV.js";
+} from "./chunk-JW47XCRL.js";
 import {
   parseVideo
 } from "./chunk-GHJEAP4O.js";
@@ -24,12 +24,12 @@ import {
   BUILTIN_TEMPLATE_CAPABILITIES,
   BUILTIN_TEMPLATE_CATALOG,
   getBuiltinTemplateMetadata
-} from "./chunk-CHLGW22F.js";
+} from "./chunk-XAMUOSX7.js";
 import "./chunk-2E6T633S.js";
 import {
   VideoFrame,
   getDimensions
-} from "./chunk-XB7LH4J2.js";
+} from "./chunk-QTMHS7JD.js";
 import {
   fontStack
 } from "./chunk-FNAEQ7QO.js";
@@ -144,6 +144,7 @@ function preloadBuiltinTemplate(id) {
 
 // src/player/video-player.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var MINIMUM_GENERATION_INTRO_MS = 3e3;
 function savedVideoState(video) {
   return {
     ...createVideoState(),
@@ -155,6 +156,7 @@ function VideoPlayerRuntime({
   kit,
   stream,
   video,
+  playbackMode,
   autoPlay = true,
   startMuted = true,
   width,
@@ -167,33 +169,62 @@ function VideoPlayerRuntime({
   onError,
   onStateChange
 }) {
-  const [reducedMotion] = useState(
+  const [reducedMotion, setReducedMotion] = useState(
     () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
   );
-  const [isPlaying, setIsPlaying] = useState(() => autoPlay && !reducedMotion);
-  const [isMuted, setIsMuted] = useState(startMuted);
+  const [audioUnlocked, setAudioUnlocked] = useState(false);
+  const resolvedStartMuted = playbackMode === "muted-autoplay" ? true : playbackMode ? false : startMuted;
+  const shouldAutoPlay = playbackMode === "manual" ? false : playbackMode === "autoplay-after-interaction" ? audioUnlocked : playbackMode === "muted-autoplay" || playbackMode === "autoplay-with-sound" ? true : autoPlay;
+  const autoStartGeneration = Boolean(playbackMode && stream && shouldAutoPlay && !reducedMotion);
+  const [isPlaying, setIsPlaying] = useState(() => shouldAutoPlay && !reducedMotion && !autoStartGeneration);
+  const [isMuted, setIsMuted] = useState(resolvedStartMuted);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [state, setState] = useState(() => video ? savedVideoState(video) : createVideoState());
   const [currentTime, setCurrentTime] = useState(0);
+  const [activeStream, setActiveStream] = useState(stream);
+  const [replacementPending, setReplacementPending] = useState(false);
+  const [startRequested, setStartRequested] = useState(autoStartGeneration);
+  const [introPlaying, setIntroPlaying] = useState(autoStartGeneration);
+  const [generationIntroComplete, setGenerationIntroComplete] = useState(() => !playbackMode || !stream);
   const [observedWidth, setObservedWidth] = useState(0);
   const containerRef = useRef(null);
   const stateRef = useRef(state);
   const timeRef = useRef(currentTime);
   const audioRef = useRef(null);
+  const introStartedAtRef = useRef(autoStartGeneration ? performance.now() : null);
   const callbacksRef = useRef({ onComplete, onError, onStateChange });
   stateRef.current = state;
   timeRef.current = currentTime;
   callbacksRef.current = { onComplete, onError, onStateChange };
+  if (stream !== activeStream) {
+    const autoStartReplacement = Boolean(playbackMode && stream && shouldAutoPlay && !reducedMotion);
+    setActiveStream(stream);
+    setReplacementPending(stream != null);
+    setState(video ? savedVideoState(video) : createVideoState());
+    setCurrentTime(0);
+    setIsMuted(resolvedStartMuted);
+    setIsPlaying(shouldAutoPlay && !reducedMotion && !autoStartReplacement);
+    setStartRequested(autoStartReplacement);
+    setIntroPlaying(autoStartReplacement);
+    setGenerationIntroComplete(!playbackMode || !stream);
+    introStartedAtRef.current = autoStartReplacement ? performance.now() : null;
+  }
   useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
     const handleChange = (event) => {
-      if (event.matches) setIsPlaying(false);
+      setReducedMotion(event.matches);
+      if (event.matches) {
+        introStartedAtRef.current = null;
+        setStartRequested(false);
+        setIntroPlaying(false);
+        setIsPlaying(false);
+      }
     };
     preference.addEventListener?.("change", handleChange);
     return () => preference.removeEventListener?.("change", handleChange);
   }, []);
-  useEffect(() => setIsMuted(startMuted), [startMuted]);
+  useEffect(() => setIsMuted(resolvedStartMuted), [resolvedStartMuted]);
   useEffect(() => {
     const updateFullscreen = () => setIsFullscreen(document.fullscreenElement === containerRef.current);
     document.addEventListener("fullscreenchange", updateFullscreen);
@@ -224,6 +255,7 @@ function VideoPlayerRuntime({
             ...current.config ? { mutableSceneIds } : {}
           });
           stateRef.current = next;
+          setReplacementPending(false);
           setState(next);
           callbacksRef.current.onStateChange?.(next);
           if (next.status === "complete" && current.status !== "complete") {
@@ -302,14 +334,65 @@ function VideoPlayerRuntime({
   useEffect(() => {
     const audio = audioRef.current;
     if (!audio) return;
-    if (isPlaying) {
-      void audio.play().catch(() => {
+    if (isPlaying || introPlaying) {
+      void audio.play().then(() => {
+        if (!audio.muted) setAudioUnlocked(true);
+      }).catch(() => {
+        audio.currentTime = 0;
+        timeRef.current = 0;
+        setCurrentTime(0);
+        setStartRequested(false);
+        setIntroPlaying(false);
         setIsPlaying(false);
       });
     } else {
       audio.pause();
     }
-  }, [isPlaying, state.config?.audio?.audioUrl]);
+  }, [introPlaying, isPlaying, state.config?.audio?.audioUrl]);
+  useEffect(() => {
+    if (!state.config?.scenes.length) {
+      const terminalWithoutVideo = state.status === "complete" || state.status === "error" || state.status === "aborted";
+      if (terminalWithoutVideo) {
+        audioRef.current?.pause();
+        introStartedAtRef.current = null;
+        setStartRequested(false);
+        setIntroPlaying(false);
+        setGenerationIntroComplete(true);
+      }
+      return;
+    }
+    if (!startRequested) return;
+    if (state.config.scenes[0]?.id === "supplied-opening") {
+      timeRef.current = 0;
+      setCurrentTime(0);
+      if (audioRef.current) audioRef.current.volume = state.config.audio?.volume ?? 1;
+      introStartedAtRef.current = null;
+      setStartRequested(false);
+      setIntroPlaying(false);
+      setGenerationIntroComplete(true);
+      setIsPlaying(true);
+      return;
+    }
+    const startedAt = introStartedAtRef.current ?? performance.now();
+    introStartedAtRef.current = startedAt;
+    const remaining = Math.max(0, MINIMUM_GENERATION_INTRO_MS - (performance.now() - startedAt));
+    const startGeneratedVideo = () => {
+      timeRef.current = 0;
+      setCurrentTime(0);
+      if (audioRef.current) audioRef.current.volume = state.config?.audio?.volume ?? 1;
+      introStartedAtRef.current = null;
+      setStartRequested(false);
+      setIntroPlaying(false);
+      setGenerationIntroComplete(true);
+      setIsPlaying(true);
+    };
+    if (remaining <= 0) {
+      startGeneratedVideo();
+      return;
+    }
+    const timer = setTimeout(startGeneratedVideo, remaining);
+    return () => clearTimeout(timer);
+  }, [startRequested, state.config?.audio?.volume, state.config?.scenes.length, state.status]);
   const streamOrientation = state.config?.orientation ?? "portrait";
   const responsiveWidth = width ?? observedWidth;
   const orientation = orientationOverride === "auto" ? responsiveWidth > 0 ? responsiveWidth <= responsiveBreakpoint ? "portrait" : "landscape" : streamOrientation : orientationOverride ?? streamOrientation;
@@ -322,15 +405,63 @@ function VideoPlayerRuntime({
   const duration = config ? getVideoDuration(config) : 0;
   const terminal = state.status === "complete" || state.status === "error" || state.status === "aborted";
   const ended = terminal && duration > 0 && currentTime >= duration - 1e-3;
+  const generationIntroWaiting = Boolean(playbackMode && stream && !generationIntroComplete);
+  const firstSceneRange = config ? resolveVideoTimeline(config)[0] : void 0;
+  const hasSuppliedOpening = firstSceneRange?.scene.id === "supplied-opening";
+  const showStartPoster = (!generationIntroWaiting || hasSuppliedOpening) && !startRequested && !isPlaying && !ended && currentTime <= 1e-3 && Boolean(config?.scenes.length);
+  const firstSceneHoldProgress = firstSceneRange ? kit.getTemplateMetadata(firstSceneRange.scene.templateId)?.transitionTiming?.holdProgress ?? 0.7 : 0;
+  const posterTime = firstSceneRange ? firstSceneRange.start + Math.max(0, firstSceneRange.end - firstSceneRange.start) * firstSceneHoldProgress : currentTime;
+  const startPlayback = () => {
+    setGenerationIntroComplete(true);
+    const audio = audioRef.current;
+    if (audio) {
+      void audio.play().then(() => {
+        if (!audio.muted) setAudioUnlocked(true);
+      }).catch(() => {
+        audio.currentTime = 0;
+        timeRef.current = 0;
+        setCurrentTime(0);
+        setIsPlaying(false);
+      });
+    }
+    setIsPlaying(true);
+  };
+  const armPlayback = () => {
+    introStartedAtRef.current = performance.now();
+    setStartRequested(true);
+    setIntroPlaying(true);
+    const audio = audioRef.current;
+    if (!audio) return;
+    const volume = stateRef.current.config?.audio?.volume ?? 1;
+    audio.volume = volume;
+    void audio.play().then(() => {
+      if (!audio.muted) setAudioUnlocked(true);
+    }).catch(() => {
+      audio.volume = volume;
+      audio.currentTime = 0;
+      timeRef.current = 0;
+      setCurrentTime(0);
+      introStartedAtRef.current = null;
+      setStartRequested(false);
+      setIntroPlaying(false);
+      setIsPlaying(false);
+    });
+  };
   const togglePlayback = () => {
+    if (startRequested) return;
+    if (!stateRef.current.config?.scenes.length) {
+      armPlayback();
+      return;
+    }
     if (!isPlaying && ended) {
       timeRef.current = 0;
       setCurrentTime(0);
       if (audioRef.current) audioRef.current.currentTime = 0;
-      setIsPlaying(true);
+      startPlayback();
       return;
     }
-    setIsPlaying((playing) => !playing);
+    if (isPlaying) setIsPlaying(false);
+    else startPlayback();
   };
   const toggleFullscreen = async () => {
     const container = containerRef.current;
@@ -352,7 +483,31 @@ function VideoPlayerRuntime({
     font: "600 13px/1 system-ui, sans-serif",
     cursor: "pointer"
   };
-  const generationCoverVisible = state.status === "streaming" && !config?.scenes.length;
+  const startButtonStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 10,
+    minHeight: 54,
+    padding: "12px 18px",
+    border: "1px solid rgba(255, 255, 255, 0.3)",
+    borderRadius: 999,
+    backgroundColor: "rgba(9, 7, 18, 0.88)",
+    color: "#ffffff",
+    boxShadow: "0 8px 28px rgba(0, 0, 0, 0.4)",
+    backdropFilter: "blur(12px)",
+    font: "700 15px/1 system-ui, sans-serif",
+    cursor: "pointer"
+  };
+  const startButtonPositionStyle = {
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    zIndex: 3,
+    transform: "translate(-50%, -50%)"
+  };
+  const pendingReplacement = replacementPending && state.status === "idle";
+  const displayedStatus = pendingReplacement ? "streaming" : state.status;
+  const generationCoverVisible = generationIntroWaiting && !hasSuppliedOpening || displayedStatus === "streaming" && !config?.scenes.length;
   const coverBackground = config?.style.brand.background;
   const coverText = config?.style.brand.colors.foreground ?? "#ffffff";
   const coverBackgroundCss = coverBackground?.type === "solid" ? coverBackground.color : `linear-gradient(135deg, ${coverBackground?.colors[0] ?? "#8711C1"}, ${coverBackground?.colors[1] ?? "#2167E3"})`;
@@ -370,13 +525,19 @@ function VideoPlayerRuntime({
         }
       },
       "data-testid": "video-player",
-      "data-status": state.status,
+      "data-status": displayedStatus,
       "data-finish-reason": state.finishReason,
       "data-scenes": config?.scenes.length ?? 0,
       "data-orientation": orientation,
       "data-current-time": currentTime.toFixed(3),
-      "data-playing": isPlaying,
+      "data-playing": isPlaying || introPlaying,
       "data-ended": ended,
+      "data-start-poster": showStartPoster,
+      "data-start-requested": startRequested,
+      "data-intro-playing": introPlaying,
+      "data-generation-intro-complete": generationIntroComplete,
+      "data-audio-unlocked": audioUnlocked,
+      "data-playback-mode": playbackMode ?? "custom",
       className,
       style: {
         width: width ?? "100%",
@@ -387,7 +548,7 @@ function VideoPlayerRuntime({
         ...style
       },
       children: [
-        generationCoverVisible ? /* @__PURE__ */ jsx(
+        generationCoverVisible ? /* @__PURE__ */ jsxs(
           "div",
           {
             "data-testid": "video-generation-cover",
@@ -404,18 +565,33 @@ function VideoPlayerRuntime({
               background: coverBackgroundCss,
               fontFamily: fontStack(config?.style.brand.font)
             },
-            children: /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { fontSize: "clamp(28px, 8vw, 72px)", opacity: 0.9 }, children: "\u2726" }),
-              /* @__PURE__ */ jsx("strong", { style: { display: "block", marginTop: 18, fontSize: "clamp(24px, 5vw, 56px)", lineHeight: 1.08 }, children: "Creating your video\u2026" }),
-              /* @__PURE__ */ jsx("span", { style: { display: "block", marginTop: 14, fontSize: "clamp(14px, 2vw, 22px)", lineHeight: 1.4, opacity: 0.78 }, children: "Choosing the best scenes for your content." })
-            ] })
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: "28%", left: "10%", right: "10%" }, children: [
+                /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { fontSize: "clamp(28px, 8vw, 72px)", opacity: 0.9 }, children: "\u2726" }),
+                /* @__PURE__ */ jsx("strong", { style: { display: "block", marginTop: 18, fontSize: "clamp(24px, 5vw, 56px)", lineHeight: 1.08 }, children: "Creating your video\u2026" }),
+                /* @__PURE__ */ jsx("span", { style: { display: "block", marginTop: 14, fontSize: "clamp(14px, 2vw, 22px)", lineHeight: 1.4, opacity: 0.78 }, children: "Choosing the best scenes for your content." })
+              ] }),
+              !startRequested && !isPlaying ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": config?.audio && !isMuted ? "Play video with sound" : "Play video response",
+                  onClick: armPlayback,
+                  style: { ...startButtonStyle, ...startButtonPositionStyle },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B6" }),
+                    config?.audio && !isMuted ? "Play with sound" : "Play video"
+                  ]
+                }
+              ) : null
+            ]
           }
         ) : config?.scenes.length ? /* @__PURE__ */ jsx(
           VideoFrame,
           {
             kit,
             config: displayConfig,
-            time: currentTime,
+            time: showStartPoster ? posterTime : currentTime,
             width: dimensions.width,
             height: dimensions.height,
             playing: isPlaying,
@@ -427,6 +603,23 @@ function VideoPlayerRuntime({
             }
           }
         ) : null,
+        showStartPoster ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-testid": "video-start-button",
+            "aria-label": config?.audio && !isMuted ? "Play video with sound" : "Play video response",
+            onClick: startPlayback,
+            style: {
+              ...startButtonStyle,
+              ...startButtonPositionStyle
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B6" }),
+              config?.audio && !isMuted ? "Play with sound" : "Play video"
+            ]
+          }
+        ) : null,
         config?.audio ? /* @__PURE__ */ jsx(
           "audio",
           {
@@ -435,7 +628,7 @@ function VideoPlayerRuntime({
             autoPlay: isPlaying,
             muted: isMuted,
             preload: "auto",
-            loop: state.status === "streaming"
+            loop: state.status === "streaming" || introPlaying
           }
         ) : null,
         !generationCoverVisible ? /* @__PURE__ */ jsxs(
@@ -460,23 +653,26 @@ function VideoPlayerRuntime({
               boxShadow: "0 4px 20px rgba(0, 0, 0, 0.35)"
             },
             children: [
-              /* @__PURE__ */ jsx(
+              !showStartPoster ? /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
                   "aria-label": ended ? "Replay video response" : isPlaying ? "Pause video response" : "Play video response",
                   onClick: togglePlayback,
                   style: controlButtonStyle,
-                  children: ended ? "\u21BB" : isPlaying ? "\u2161" : "\u25B6"
+                  children: ended ? "\u21BB Replay" : isPlaying ? "\u2161" : "\u25B6"
                 }
-              ),
+              ) : null,
               config?.audio ? /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
                   "aria-label": isMuted ? "Unmute video response" : "Mute video response",
                   "aria-pressed": !isMuted,
-                  onClick: () => setIsMuted((muted) => !muted),
+                  onClick: () => setIsMuted((muted) => {
+                    if (muted) setAudioUnlocked(true);
+                    return !muted;
+                  }),
                   style: controlButtonStyle,
                   children: isMuted ? "\u{1F507}" : "\u{1F50A}"
                 }

package/dist/server.d.ts

@@ -1,6 +1,6 @@
-import { l as VideoGenerationContext, m as VideoPlanner, n as VideoRequest, j as VideoCapabilities, d as VideoInput, a as VideoAudio, o as VideoSceneValidator, p as VideoTemplatePacing, q as VideoSnapshotRetention, r as VideoResumeCursor, s as VideoSceneValidationContext, f as VideoScene } from './types-B-PZR6G_.js';
-import { b as VideoFinishReason, a as VideoWarning, V as VideoEvent } from './events-_wfjbmEp.js';
-export { c as VideoWarningCategory } from './events-_wfjbmEp.js';
+import { m as VideoGenerationContext, n as VideoPlanner, o as VideoRequest, k as VideoCapabilities, d as VideoInput, a as VideoAudio, p as VideoSceneValidator, q as VideoTemplatePacing, r as VideoSnapshotRetention, s as VideoResumeCursor, t as VideoSceneValidationContext, g as VideoScene } from './types-CkO2EYr4.js';
+import { b as VideoFinishReason, a as VideoWarning, V as VideoEvent } from './events-CTIsANzz.js';
+export { c as VideoWarningCategory } from './events-CTIsANzz.js';
 import { S as SceneTemplateMetadata } from './catalog-types-BIhSpOWK.js';
 
 interface VideoProviderUsage {
@@ -84,6 +84,8 @@ interface VideoStreamHandlerOptions {
     onComplete?: (summary: VideoGenerationSummary) => unknown;
     /** Drop malformed generated parts by default, or preserve fail-fast behavior. */
     invalidPartBehavior?: "drop" | "fail";
+    /** Require one explicit closer before a standard generated plan is considered complete. */
+    requireCloser?: boolean;
     /** Allow credentialed cross-origin requests from explicit allowedOrigins. */
     allowCredentials?: boolean;
     /** Templates and extensions implemented by this customer deployment. */
@@ -120,6 +122,19 @@ declare function createTemplateSceneValidator(options: {
     }) => boolean;
 }): VideoSceneValidator;
 
+interface ResolvedMedia {
+    url: string;
+    type: "image" | "video";
+    posterUrl?: string;
+}
+interface MediaResolverContext {
+    input: VideoInput;
+    templateId: string;
+    preferredType: "image" | "video" | "any";
+    signal: AbortSignal;
+}
+type MediaResolver = (query: string, context: MediaResolverContext) => ResolvedMedia | null | Promise<ResolvedMedia | null>;
+
 interface VideoHandlerOptions extends Omit<VideoStreamHandlerOptions, "generate" | "systemPrompt" | "supportedCapabilities" | "validateScene" | "getTemplatePacing"> {
     /** Customer-owned templates that replace matching built-ins and add new IDs. */
     templates?: ServerTemplateRegistry;
@@ -131,6 +146,8 @@ interface VideoHandlerOptions extends Omit<VideoStreamHandlerOptions, "generate"
     basePrompt?: string;
     /** Authorize an app-approved media URL in addition to URLs supplied in the request. */
     allowMediaUrl?: Parameters<typeof createTemplateSceneValidator>[0]["allowMediaUrl"];
+    /** Resolve bounded semantic media intent through an application-owned provider. */
+    resolveMedia?: MediaResolver;
 }
 /**
  * Build the secure route for a template kit while leaving provider, model,
@@ -138,4 +155,4 @@ interface VideoHandlerOptions extends Omit<VideoStreamHandlerOptions, "generate"
  */
 declare function createVideoHandler(options: VideoHandlerOptions): VideoStreamHandler;
 
-export { SceneTemplateMetadata as ServerTemplateMetadata, type ServerTemplateRegistry, VideoFinishReason, type VideoGenerationSummary, type VideoHandlerOptions, type VideoProviderUsage, VideoWarning, createServerTemplateRegistry, createVideoHandler };
+export { type MediaResolver, type MediaResolverContext, type ResolvedMedia, SceneTemplateMetadata as ServerTemplateMetadata, type ServerTemplateRegistry, VideoFinishReason, type VideoGenerationSummary, type VideoHandlerOptions, type VideoProviderUsage, VideoWarning, createServerTemplateRegistry, createVideoHandler };