@vanillaskyai/video 0.3.2 → 0.3.4

package/CHANGELOG.md

@@ -4,6 +4,29 @@ VanillaSky follows semantic versioning. This changelog begins with the 0.1 beta.
 
 ## Unreleased
 
+## 0.3.4
+
+- Mounts a scene that brings a new photo or video 1.2s before it appears,
+  instead of 0.3s, so the element has time to decode and the scene arrives
+  showing its picture rather than a gradient that pops a beat later. The extra
+  time is invisible: the layer stays fully transparent until the existing
+  0.3s cross-fade begins, so every rendered frame is unchanged, and the mounted
+  element is handed to the incoming scene rather than rebuilt. Scenes that
+  reuse the backdrop already on screen are unaffected.
+
+## 0.3.3
+
+- Keeps a soundtrack audible on iPhone Safari when its audio context cannot be
+  unlocked. Routing a media element into a context that never reaches
+  `running` does not fade it, it silences it, so playback now stays on the
+  element unless the context is confirmed running.
+- Actually preloads scene backdrops. The warm elements were unreferenced the
+  moment they were created, so a browser was free to collect them and cancel
+  the request mid-flight; they are now held until they finish. Video streams
+  are warmed too, not just their posters, which is what left a gradient
+  flashing between two consecutive media scenes. One video warms at a time and
+  is released as soon as its first frame lands.
+
 ## 0.3.2
 
 - Rebuilds text legibility over photo and video backdrops. Scrims now ramp off

package/README.md

@@ -1,6 +1,6 @@
 # Give your AI a video output
 
-![Version 0.3.2 beta](https://img.shields.io/badge/version-0.3.2_beta-7c3aed)
+![Version 0.3.4 beta](https://img.shields.io/badge/version-0.3.4_beta-7c3aed)
 
 **VanillaSky is the open-source video response layer.** Turn text, structured
 data, and live application context into personalized video responses that start
@@ -17,7 +17,7 @@ the planning prompt, trusted templates, validation, streaming, and player.
 For humans:
 
 ```bash
-npm install @vanillaskyai/video@0.3.2 ai @ai-sdk/openai
+npm install @vanillaskyai/video@0.3.4 ai @ai-sdk/openai
 ```
 
 For coding agents:
@@ -106,7 +106,7 @@ shows each complete, validated scene as soon as it is ready and returns a
 deterministic `Video` object when generation finishes.
 
 A copy-and-run app is in
-[`examples/nextjs-quickstart`](https://github.com/VanillaSkyAi/video/tree/v0.3.2/examples/nextjs-quickstart).
+[`examples/nextjs-quickstart`](https://github.com/VanillaSkyAi/video/tree/v0.3.4/examples/nextjs-quickstart).
 
 ## Shape the response
 

package/dist/check-runtime.js

@@ -1,6 +1,6 @@
 import {
   VideoFrame
-} from "./chunk-HXSV6RHF.js";
+} from "./chunk-N3KUA7VP.js";
 import "./chunk-XWWLKRNU.js";
 import "./chunk-SPVTJH3F.js";
 import {

package/dist/{chunk-HXSV6RHF.js → chunk-N3KUA7VP.js}

@@ -31,6 +31,7 @@ function scaleSafeZone(zone, factor) {
 // src/player/video-frame.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var SCENE_TRANSITION_SECONDS = 0.3;
+var MEDIA_PREROLL_SECONDS = 1.2;
 var CONTIGUITY_ULP_FACTOR = 4;
 function clamp01(value) {
   return Math.max(0, Math.min(1, value));
@@ -51,6 +52,9 @@ function brandBackgroundFallback(config) {
   const background = config.style.brand.background;
   return background.type === "solid" ? background.color : background.colors[0];
 }
+function sceneHasBackdrop(range) {
+  return String(range.scene.variables.mediaType || "auto") !== "gradient" && String(range.scene.variables.mediaUrl || "").trim() !== "";
+}
 function sceneBackgroundChanges(left, right) {
   const mediaUrl = (range) => String(range.scene.variables.mediaType || "auto") === "gradient" ? "" : String(range.scene.variables.mediaUrl || "");
   return mediaUrl(left) !== mediaUrl(right);
@@ -178,6 +182,14 @@ function VideoFrame({
   );
   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 mountingNext = Boolean(
+    contiguousNext && time >= prerollStart && time < blendEnd && (eligibleNextTransition || prerollsNext)
+  );
   const previewingNext = Boolean(
     eligibleNextTransition && time >= blendStart && time < blendEnd
   );
@@ -232,7 +244,7 @@ function VideoFrame({
                 }
               }
             ),
-            previewingNext && contiguousNext && nextTiming ? [
+            mountingNext && contiguousNext ? [
               /* @__PURE__ */ jsx(
                 SceneLayer,
                 {
@@ -244,7 +256,7 @@ function VideoFrame({
                   width: canvas.width,
                   height: canvas.height,
                   playing,
-                  layer: "outgoing",
+                  layer: previewingNext ? "outgoing" : "active",
                   opacity: 1 - blendProgress,
                   interactive: true,
                   zIndex: 1

package/dist/preload-media-NKQ6JA3T.js

@@ -0,0 +1,55 @@
+import {
+  resolveMediaType
+} from "./chunk-35LIYILY.js";
+
+// src/player/preload-media.ts
+var warmed = /* @__PURE__ */ new Set();
+var inFlight = /* @__PURE__ */ new Set();
+function warmImage(url) {
+  const trimmed = url.trim();
+  if (!trimmed || warmed.has(trimmed)) return;
+  warmed.add(trimmed);
+  const image = new Image();
+  const release = () => inFlight.delete(image);
+  image.onload = release;
+  image.onerror = release;
+  inFlight.add(image);
+  image.src = trimmed;
+}
+var videoWarmInFlight = false;
+function warmVideo(url) {
+  const trimmed = url.trim();
+  if (!trimmed || warmed.has(trimmed) || videoWarmInFlight) return;
+  warmed.add(trimmed);
+  videoWarmInFlight = true;
+  const video = document.createElement("video");
+  video.preload = "auto";
+  video.muted = true;
+  video.playsInline = true;
+  const release = () => {
+    videoWarmInFlight = false;
+    inFlight.delete(video);
+    video.removeAttribute("src");
+    video.load();
+  };
+  video.onloadeddata = release;
+  video.onerror = release;
+  inFlight.add(video);
+  video.src = trimmed;
+}
+function preloadSceneMedia(variables) {
+  if (typeof window === "undefined" || typeof Image === "undefined") return;
+  const mediaUrl = String(variables.mediaUrl || "").trim();
+  if (!mediaUrl) return;
+  const resolved = resolveMediaType(String(variables.mediaType || "auto"), mediaUrl);
+  if (resolved === "gradient") return;
+  if (resolved === "video") {
+    warmImage(String(variables.mediaPoster || ""));
+    warmVideo(mediaUrl);
+    return;
+  }
+  warmImage(mediaUrl);
+}
+export {
+  preloadSceneMedia
+};

package/dist/react.js

@@ -29,7 +29,7 @@ import "./chunk-2E6T633S.js";
 import {
   VideoFrame,
   getDimensions
-} from "./chunk-HXSV6RHF.js";
+} from "./chunk-N3KUA7VP.js";
 import {
   fontStack
 } from "./chunk-XWWLKRNU.js";
@@ -144,7 +144,7 @@ function preloadBuiltinTemplate(id) {
 
 // src/player/warm-scene-media.ts
 function warmSceneMedia(variables) {
-  void import("./preload-media-KIYBFYRH.js").then((module) => module.preloadSceneMedia(variables)).catch(() => {
+  void import("./preload-media-NKQ6JA3T.js").then((module) => module.preloadSceneMedia(variables)).catch(() => {
   });
 }
 
@@ -248,8 +248,15 @@ function VideoPlayerRuntime({
     const Context = window.AudioContext ?? window.webkitAudioContext;
     if (!Context) return;
     const context = new Context();
-    context.resume().catch(Boolean);
-    import("./control-visibility-NQOWTKOQ.js").then((output) => output.default(audio, context)).catch(() => context.close());
+    const unlocked = context.resume().catch(Boolean);
+    void import("./control-visibility-NQOWTKOQ.js").then(async (output) => {
+      await unlocked;
+      if (context.state !== "running") {
+        void context.close();
+        return;
+      }
+      output.default(audio, context);
+    }).catch(() => context.close());
   };
   if (stream !== activeStream) {
     const autoStartReplacement = Boolean(playbackMode && stream && shouldAutoPlay && !reducedMotion);

package/docs/getting-started.md

@@ -5,7 +5,7 @@
 Install VanillaSky:
 
 ```bash
-npm install @vanillaskyai/video@0.3.2 ai @ai-sdk/openai
+npm install @vanillaskyai/video@0.3.4 ai @ai-sdk/openai
 ```
 
 Set your provider key in `.env.local` (never commit it):
@@ -50,7 +50,7 @@ sets its marker only for `next dev`, and it accepts only localhost. Every
 production request is denied. Replace it with your real session validation
 before deploying. For literal files and commands,
 use the tested
-[`examples/nextjs-quickstart` directory](https://github.com/VanillaSkyAi/video/tree/v0.3.2/examples/nextjs-quickstart).
+[`examples/nextjs-quickstart` directory](https://github.com/VanillaSkyAi/video/tree/v0.3.4/examples/nextjs-quickstart).
 
 `model` can come from any AI SDK provider, registry, gateway, compatible API,
 or custom implementation. The application can choose a cheaper or faster model

package/docs/integrate-nextjs.md

@@ -5,7 +5,7 @@
 Install VanillaSky and one AI SDK provider:
 
 ```bash
-npm install @vanillaskyai/video@0.3.2 ai @ai-sdk/openai
+npm install @vanillaskyai/video@0.3.4 ai @ai-sdk/openai
 ```
 
 Create an ignored `.env.local`:
@@ -74,7 +74,7 @@ requests; replace it with your application's session validation before
 deploying.
 
 The copy-and-run app is in the
-[`examples/nextjs-quickstart` directory](https://github.com/VanillaSkyAi/video/tree/v0.3.2/examples/nextjs-quickstart).
+[`examples/nextjs-quickstart` directory](https://github.com/VanillaSkyAi/video/tree/v0.3.4/examples/nextjs-quickstart).
 
 For another LLM, replace `openai(...)` with the matching AI SDK model. The route
 shape and React code stay the same. See [Provider integration](provider-integration.md)

package/examples/nextjs-quickstart/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^4.0.42",
-    "@vanillaskyai/video": "0.3.2",
+    "@vanillaskyai/video": "0.3.4",
     "ai": "^7.0.66",
     "next": "16.3.1",
     "react": "19.2.8",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanillaskyai/video",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Open-source video response SDK for personalized AI applications.",
   "keywords": [
     "generative-video",

package/dist/preload-media-KIYBFYRH.js

@@ -1,30 +0,0 @@
-import {
-  resolveMediaType
-} from "./chunk-35LIYILY.js";
-
-// src/player/preload-media.ts
-var warmed = /* @__PURE__ */ new Set();
-function warm(url) {
-  const trimmed = url.trim();
-  if (!trimmed || warmed.has(trimmed)) return;
-  warmed.add(trimmed);
-  const image = new Image();
-  image.onerror = () => {
-  };
-  image.src = trimmed;
-}
-function preloadSceneMedia(variables) {
-  if (typeof window === "undefined" || typeof Image === "undefined") return;
-  const mediaUrl = String(variables.mediaUrl || "").trim();
-  if (!mediaUrl) return;
-  const resolved = resolveMediaType(String(variables.mediaType || "auto"), mediaUrl);
-  if (resolved === "gradient") return;
-  if (resolved === "video") {
-    warm(String(variables.mediaPoster || ""));
-    return;
-  }
-  warm(mediaUrl);
-}
-export {
-  preloadSceneMedia
-};