@vanillaskyai/video 0.10.7 → 0.10.9

package/starters/video-chat/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vanillaskyai/video": "0.10.7",
+    "@vanillaskyai/video": "0.10.9",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "@ai-sdk/anthropic": "^3.0.0",

package/starters/video-chat/server.ts

@@ -25,11 +25,6 @@ export const handleVideoChat = createVideoChatHandler({
         output_config: { effort: "medium" },
       },
     },
-    onFinish: ({ finishReason, text }) => {
-      if (finishReason !== "stop") console.warn(`[planner] ${finishReason}: ${text.slice(0, 300)}`);
-      const keyed = (text.match(/"mediaKeyword"/g) ?? []).length;
-      console.log(`[planner] ${(text.match(/"scene\.add"/g) ?? []).length} scenes, ${keyed} asked for footage`);
-    },
   }),
   generateText: async ({ systemPrompt, userPrompt, maxOutputTokens, signal }) => {
     const { text } = await generateText({
@@ -42,7 +37,7 @@ export const handleVideoChat = createVideoChatHandler({
     return text;
   },
   searchMedia: process.env.PEXELS_API_KEY
-    ? (query, { orientation, signal }) => findStockFootage(query, orientation, signal)
+    ? (query, { orientation, signal, scene }) => findStockFootage(query, orientation, signal, scene?.variables.stockSelection)
     : undefined,
   ...providers,
   welcome: {

package/starters/video-chat/stock.ts

@@ -9,11 +9,27 @@ interface PexelsVideo {
   url?: string;
   image?: string;
   title?: unknown;
+  description?: unknown;
   tags?: unknown;
   video_files?: { link?: string; width?: number; height?: number; file_type?: string }[];
 }
 const cache = new Map<string, { expires: number; media: StockVideo | null }>();
 const words = (value: string): string[] => value.toLowerCase().match(/[\p{L}\p{N}]+/gu) ?? [];
+const ignored = new Set(['a','an','the','in','on','at','of','with','and','to']);
+const terms = (value: string) => words(value).filter(word => !ignored.has(word));
+function selectionHint(value: unknown) {
+  const phrase = (input: unknown) => {
+    if (typeof input !== 'string') return undefined;
+    const normalized = input.trim().toLowerCase().replace(/\s+/gu,' ').replaceAll('’', "'");
+    return normalized.length <= 48 && /^[\p{L}\p{N} '-]+$/u.test(normalized) && words(normalized).length <= 4 && terms(normalized).length ? normalized : undefined;
+  };
+  const raw = value && typeof value === 'object' ? value as Record<string, unknown> : {};
+  const subject = phrase(raw.subject);
+  if (!subject) return undefined;
+  const activity = phrase(raw.activity), equipment = phrase(raw.equipment);
+  const exclude = Array.isArray(raw.exclude) && raw.exclude.length <= 3 ? raw.exclude.map(phrase).filter((item): item is string => Boolean(item)) : [];
+  return {subject, ...(activity ? {activity} : {}), ...(equipment ? {equipment} : {}), ...(exclude.length ? {exclude} : {})};
+}
 function pexelsUrl(value: unknown): value is string {
   if (typeof value !== "string") return false;
   try {
@@ -27,11 +43,12 @@ function pexelsUrl(value: unknown): value is string {
  * Applications using this adapter must display a prominent link to Pexels.
  * https://www.pexels.com/api/documentation/#guidelines
  */
-export async function findStockFootage(query: string, orientation: VideoOrientation, signal: AbortSignal) {
+export async function findStockFootage(query: string, orientation: VideoOrientation, signal: AbortSignal, rawSelection?: unknown) {
   signal.throwIfAborted();
   const normalized = query.trim().toLowerCase().replace(/\s+/g, " ");
   const tokens = words(normalized);
-  const key = `${orientation}:${normalized}`;
+  const selection = selectionHint(rawSelection);
+  const key = JSON.stringify({version: 2, orientation, query: normalized, selection});
   const apiKey = process.env.PEXELS_API_KEY;
   if (!apiKey || !tokens.length || normalized.length > 80 || tokens.length > 8) return null;
   const existing = cache.get(key);
@@ -49,8 +66,14 @@ export async function findStockFootage(query: string, orientation: VideoOrientat
     const slug = new URL(video.url).pathname.replace(/^\/video\//, "");
     const title = typeof video.title === "string" ? video.title : "";
     const tags = Array.isArray(video.tags) ? video.tags.filter((tag): tag is string => typeof tag === "string").join(" ") : "";
-    const subject = words(`${slug} ${title} ${tags}`).filter(token => !/^\d+$/.test(token));
-    const matches = tokens.filter(token => subject.includes(token)).length;
+    const subject = words(`${slug} ${title} ${typeof video.description === "string" ? video.description : ""} ${tags}`).filter(token => !/^\d+$/.test(token));
+    let matches = tokens.filter(token => subject.includes(token)).length;
+    if (selection && subject.length) {
+      const covers = (phrase: string) => terms(phrase).every(word => subject.includes(word));
+      if (!covers(selection.subject) || selection.exclude?.some(covers)) continue;
+      matches = 2 + Number(Boolean(selection.activity && covers(selection.activity)))
+        + Number(Boolean(selection.equipment && covers(selection.equipment)));
+    }
     // The documented Video resource can have only a numeric page URL and no
     // editorial metadata. Preserve provider search order for unknown relevance;
     // positive overlap ranks above it, while explicitly unrelated copy is skipped.

package/dist/chunk-X4RGAEL5.js

@@ -1,207 +0,0 @@
-import {
-  BrandGradientOverlay,
-  SceneVideoBackdrop,
-  getBackgroundTransform,
-  resolveMediaPosition
-} from "./chunk-OBRKB7PL.js";
-import {
-  resolveMediaType
-} from "./chunk-224QNWRA.js";
-import {
-  useExternalVideoBackdrop
-} from "./chunk-OOBT4X46.js";
-
-// src/visual-system/scene-templates/scene-background.tsx
-import { useEffect, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function resolveMediaTreatment(value) {
-  return value === "none" || value === "subtle" || value === "text-safe" ? value : "cinematic";
-}
-var SCRIM_STOP_COUNT = 7;
-function smoothstep(t) {
-  return t * t * (3 - 2 * t);
-}
-function easedStops(peakAlpha, start, end, direction) {
-  const alphaAt = (t) => {
-    const eased = direction === "fade-out" ? 1 - smoothstep(t) : smoothstep(t);
-    return `rgba(0,0,0,${Number((peakAlpha * eased).toFixed(3))})`;
-  };
-  const stops = [];
-  if (start > 0) stops.push(`${alphaAt(0)} 0%`);
-  for (let i = 0; i < SCRIM_STOP_COUNT; i += 1) {
-    const t = i / (SCRIM_STOP_COUNT - 1);
-    const position = Number((start + (end - start) * t).toFixed(2));
-    stops.push(`${alphaAt(t)} ${position}%`);
-  }
-  if (end < 100) stops.push(`${alphaAt(1)} 100%`);
-  return stops.join(", ");
-}
-function getMediaTreatmentLayers(value, anchor = "full") {
-  const treatment = resolveMediaTreatment(value);
-  if (treatment === "none") return [];
-  const vignette = {
-    id: "vignette",
-    background: treatment === "subtle" ? `radial-gradient(ellipse at center, ${easedStops(0.28, 45, 100, "fade-in")})` : `radial-gradient(ellipse at center, ${easedStops(0.72, 32, 100, "fade-in")})`
-  };
-  if (treatment === "subtle") return [vignette];
-  const textSafe = treatment === "text-safe";
-  const layers = [vignette];
-  if (anchor !== "bottom") {
-    layers.push({
-      id: "center-scrim",
-      background: textSafe ? `radial-gradient(ellipse 92% 58% at 50% 50%, ${easedStops(0.46, 34, 90, "fade-out")})` : `radial-gradient(ellipse 88% 52% at 50% 50%, ${easedStops(0.26, 30, 88, "fade-out")})`
-    });
-  }
-  if (anchor !== "center") {
-    layers.push({
-      id: "bottom-scrim",
-      background: `linear-gradient(to top, ${easedStops(textSafe ? 0.64 : 0.5, 8, 100, "fade-out")})`,
-      style: { top: "55%" }
-    });
-  }
-  return layers;
-}
-function initialMediaPaint(wantsMedia, resolved, mediaUrl, mediaPoster) {
-  if (typeof window === "undefined") return "ready";
-  if (!wantsMedia) return "ready";
-  if (resolved === "video") return mediaPoster ? "ready" : "pending";
-  if (typeof Image === "undefined") return "ready";
-  const cached = new Image();
-  cached.src = mediaUrl;
-  return cached.complete && cached.naturalWidth > 0 ? "ready" : "pending";
-}
-function getMediaBackgroundProps(variables) {
-  return {
-    mediaUrl: String(variables.mediaUrl || ""),
-    mediaType: String(variables.mediaType || "auto"),
-    mediaPoster: String(variables.mediaPoster || ""),
-    mediaPosition: String(variables.mediaPosition || "center"),
-    mediaTreatment: String(variables.mediaTreatment || "cinematic")
-  };
-}
-var SceneBackground = ({
-  style,
-  progress,
-  sceneDuration,
-  width: _width,
-  // accepted for symmetry; not currently used in render
-  height: _height,
-  mediaUrl = "",
-  mediaType = "auto",
-  mediaPoster,
-  mediaPosition = "center",
-  mediaTreatment = "cinematic",
-  textAnchor = "full",
-  backgroundEffect,
-  seed,
-  isPlaying = true,
-  beatIntensity = 0
-}) => {
-  void _width;
-  void _height;
-  const resolved = resolveMediaType(mediaType, mediaUrl);
-  const wantsMedia = resolved !== "gradient" && !!mediaUrl;
-  const externalVideoBackdrop = useExternalVideoBackdrop();
-  const hasExternalVideoBackdrop = externalVideoBackdrop !== false && resolved === "video";
-  const externalVideoFailed = externalVideoBackdrop === "fallback" && resolved === "video";
-  const externalVideoReady = externalVideoBackdrop === "ready" && resolved === "video";
-  const [mediaPaint, setMediaPaint] = useState(
-    () => initialMediaPaint(wantsMedia, resolved, mediaUrl, mediaPoster)
-  );
-  useEffect(() => {
-    setMediaPaint(initialMediaPaint(wantsMedia, resolved, mediaUrl, mediaPoster));
-    if (!wantsMedia || resolved !== "photo") return;
-    if (typeof Image === "undefined") return;
-    let cancelled = false;
-    const probe = new Image();
-    probe.onload = () => {
-      if (!cancelled) setMediaPaint("ready");
-    };
-    probe.onerror = () => {
-      if (!cancelled) setMediaPaint("failed");
-    };
-    probe.src = mediaUrl;
-    if (probe.complete) setMediaPaint(probe.naturalWidth > 0 ? "ready" : "failed");
-    return () => {
-      cancelled = true;
-      probe.onload = null;
-      probe.onerror = null;
-    };
-  }, [mediaUrl, mediaPoster, resolved, wantsMedia]);
-  const showMedia = wantsMedia && mediaPaint !== "failed";
-  const showTreatment = wantsMedia && mediaPaint === "ready";
-  const resolvedPosition = resolveMediaPosition(mediaPosition);
-  const resolvedTreatment = resolveMediaTreatment(mediaTreatment);
-  const treatmentLayers = getMediaTreatmentLayers(resolvedTreatment, textAnchor);
-  const gradSeed = typeof seed === "number" ? seed : typeof seed === "string" ? seed.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0) : 0;
-  const bgTransform = getBackgroundTransform(
-    backgroundEffect,
-    progress,
-    beatIntensity
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    (!hasExternalVideoBackdrop || externalVideoFailed) && /* @__PURE__ */ jsx(
-      BrandGradientOverlay,
-      {
-        style,
-        progress,
-        sceneDuration,
-        seed: gradSeed
-      }
-    ),
-    showMedia && !hasExternalVideoBackdrop && (resolved === "video" ? /* @__PURE__ */ jsx(
-      SceneVideoBackdrop,
-      {
-        mediaUrl,
-        mediaPoster,
-        mediaPosition,
-        backgroundEffect,
-        progress,
-        sceneDuration,
-        beatIntensity,
-        isPlaying,
-        onReady: () => setMediaPaint("ready"),
-        onError: () => setMediaPaint("failed")
-      }
-    ) : /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: mediaUrl,
-        alt: "",
-        "aria-hidden": "true",
-        draggable: false,
-        "data-media-position": mediaPosition,
-        style: {
-          position: "absolute",
-          inset: 0,
-          transform: bgTransform.transform,
-          transformOrigin: bgTransform.transformOrigin,
-          width: "100%",
-          height: "100%",
-          objectFit: "cover",
-          objectPosition: resolvedPosition
-        }
-      }
-    )),
-    (hasExternalVideoBackdrop ? externalVideoReady : showTreatment) && !externalVideoFailed && treatmentLayers.map((layer) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-media-treatment": resolvedTreatment,
-        "data-media-overlay": layer.id,
-        style: {
-          position: "absolute",
-          inset: 0,
-          background: layer.background,
-          pointerEvents: "none",
-          ...layer.style
-        }
-      },
-      layer.id
-    ))
-  ] });
-};
-
-export {
-  getMediaBackgroundProps,
-  SceneBackground
-};

package/dist/scene-video-backdrop-NK2XK3XE.js

@@ -1,7 +0,0 @@
-import {
-  SceneVideoBackdrop
-} from "./chunk-OBRKB7PL.js";
-import "./chunk-OOBT4X46.js";
-export {
-  SceneVideoBackdrop
-};

package/dist/{chunk-OOBT4X46.js → chunk-5JBMYQP6.js}

@@ -1,37 +1,3 @@
-// src/visual-system/scene-templates/external-video-backdrop.tsx
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-var DEFAULT = { mode: false, audioMuted: true, audioVolume: 1 };
-var sharedContext = globalThis;
-var BackdropContext = sharedContext.__vanillaskyVideoBackdropContext ??= React.createContext(DEFAULT);
-function ExternalVideoBackdropProvider({
-  mode,
-  audioMuted = true,
-  audioVolume = 1,
-  preparingNarration = false,
-  onMediaError,
-  children
-}) {
-  const value = React.useMemo(
-    () => ({ mode, audioMuted, audioVolume, preparingNarration, onMediaError }),
-    [mode, audioMuted, audioVolume, preparingNarration, onMediaError]
-  );
-  return /* @__PURE__ */ jsx(BackdropContext.Provider, { value, children });
-}
-function useExternalVideoBackdrop() {
-  return React.useContext(BackdropContext).mode;
-}
-function useMediaAudio() {
-  const { audioMuted, audioVolume } = React.useContext(BackdropContext);
-  return { muted: audioMuted, volume: audioVolume };
-}
-function useNarrationPreroll() {
-  return React.useContext(BackdropContext).preparingNarration === true;
-}
-function useMediaFailure() {
-  return React.useContext(BackdropContext).onMediaError;
-}
-
 // src/visual-system/scene-templates/tokens.ts
 var STYLE_PRESETS = {
   bold: {
@@ -144,6 +110,40 @@ function darken(hex, factor) {
   return `#${ch(1)}${ch(3)}${ch(5)}`;
 }
 
+// src/visual-system/scene-templates/external-video-backdrop.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT = { mode: false, audioMuted: true, audioVolume: 1 };
+var sharedContext = globalThis;
+var BackdropContext = sharedContext.__vanillaskyVideoBackdropContext ??= React.createContext(DEFAULT);
+function ExternalVideoBackdropProvider({
+  mode,
+  audioMuted = true,
+  audioVolume = 1,
+  preparingNarration = false,
+  onMediaError,
+  children
+}) {
+  const value = React.useMemo(
+    () => ({ mode, audioMuted, audioVolume, preparingNarration, onMediaError }),
+    [mode, audioMuted, audioVolume, preparingNarration, onMediaError]
+  );
+  return /* @__PURE__ */ jsx(BackdropContext.Provider, { value, children });
+}
+function useExternalVideoBackdrop() {
+  return React.useContext(BackdropContext).mode;
+}
+function useMediaAudio() {
+  const { audioMuted, audioVolume } = React.useContext(BackdropContext);
+  return { muted: audioMuted, volume: audioVolume };
+}
+function useNarrationPreroll() {
+  return React.useContext(BackdropContext).preparingNarration === true;
+}
+function useMediaFailure() {
+  return React.useContext(BackdropContext).onMediaError;
+}
+
 export {
   resolveDensity,
   resolveTokens,