@vanillaskyai/video 0.10.2 → 0.10.4

package/starters/video-chat/server.ts

@@ -42,7 +42,7 @@ export const handleVideoChat = createVideoChatHandler({
     return text;
   },
   searchMedia: process.env.PEXELS_API_KEY
-    ? (query, { orientation, signal, fallbackQuery }) => findStockFootage(query, orientation, signal, fallbackQuery)
+    ? (query, { orientation, signal }) => findStockFootage(query, orientation, signal)
     : undefined,
   ...providers,
   welcome: {

package/starters/video-chat/stock.ts

@@ -1,38 +1,66 @@
 import type { VideoOrientation } from "@vanillaskyai/video";
 
-export interface ApprovedStock {
-  /** Literal phrases the inspected clip actually depicts; no broad topic aliases. */
-  queries: readonly string[];
-  orientations: readonly VideoOrientation[];
-  description: string;
-  reviewedAt: string;
-  media: { url: string; type: "video" | "image"; posterUrl?: string };
+interface StockVideo {
+  url: string;
+  type: "video";
+  posterUrl?: string;
 }
-
-/** Add assets only after watching the clip and checking its crop and poster.
- * An empty collection deliberately declines stock instead of guessing from
- * search rank. The host can maintain this reviewed index independently of the SDK.
- */
-export const approvedStock: readonly ApprovedStock[] = [];
-
-const normalize = (value: string) => value.trim().toLowerCase().replace(/\s+/g, ' ');
-function approvedUrl(value: string): boolean {
-  try { const url=new URL(value);return url.protocol==='https:' && !url.username && !url.password && !url.port; }
-  catch { return false; }
+interface PexelsVideo {
+  url?: string;
+  image?: string;
+  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) ?? [];
+function pexelsUrl(value: unknown): value is string {
+  if (typeof value !== "string") return false;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" && !url.username && !url.password && !url.port
+      && (url.hostname === "pexels.com" || url.hostname.endsWith(".pexels.com"));
+  } catch { return false; }
 }
 
-export async function findStockFootage(
-  query: string,
-  orientation: VideoOrientation,
-  signal: AbortSignal,
-  _fallbackQuery?: string,
-  index: readonly ApprovedStock[] = approvedStock,
-) {
+/** Full catalog search. Metadata establishes subject relevance, not factual proof.
+ * 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) {
+  signal.throwIfAborted();
+  const normalized = query.trim().toLowerCase().replace(/\s+/g, " ");
+  const tokens = words(normalized);
+  const key = `${orientation}:${normalized}`;
+  const apiKey = process.env.PEXELS_API_KEY;
+  if (!apiKey || !tokens.length || normalized.length > 80 || tokens.length > 8) return null;
+  const existing = cache.get(key);
+  if (existing && existing.expires > Date.now()) return existing.media;
+  const url = new URL("https://api.pexels.com/v1/videos/search");
+  url.search = new URLSearchParams({ query: normalized, orientation, per_page: "12", size: "medium" }).toString();
+  const response = await fetch(url, { headers: { Authorization: apiKey }, signal });
+  signal.throwIfAborted();
+  if (!response.ok) return null;
+  const result = await response.json() as { videos?: PexelsVideo[] };
   signal.throwIfAborted();
-  const intent=normalize(query);
-  if(!intent || intent.length>80 || intent.split(' ').length>8)return null;
-  const entry=index.find(asset=>asset.reviewedAt && asset.description && asset.orientations.includes(orientation)
-    && asset.queries.some(candidate=>normalize(candidate)===intent)
-    && approvedUrl(asset.media.url) && (!asset.media.posterUrl || approvedUrl(asset.media.posterUrl)));
-  return entry ? {...entry.media} : null;
+  let selected: StockVideo | null = null, bestScore = 0;
+  for (const video of (Array.isArray(result.videos) ? result.videos : []).slice(0, 12)) {
+    if (!pexelsUrl(video.url)) continue;
+    const subject = words(new URL(video.url).pathname);
+    const matches = tokens.filter(token => subject.includes(token)).length;
+    // Require a majority of the literal query, never accept search rank alone.
+    if (matches < Math.ceil(tokens.length * 0.6)) continue;
+    const files = (Array.isArray(video.video_files) ? video.video_files : []).filter(file =>
+      file.file_type === "video/mp4" && pexelsUrl(file.link)
+      && Number.isFinite(file.width) && Number.isFinite(file.height)
+      && Math.min(file.width!, file.height!) >= 360
+      && (orientation === "portrait" ? file.height! > file.width! : file.width! >= file.height!),
+    ).sort((a, b) => Math.abs(Math.max(a.width!, a.height!) - 1280) - Math.abs(Math.max(b.width!, b.height!) - 1280));
+    const file = files[0];
+    if (!file || matches <= bestScore) continue;
+    bestScore = matches;
+    selected = { url: file.link!, type: "video", ...(pexelsUrl(video.image) ? { posterUrl: video.image } : {}) };
+  }
+  // Bounded process-local cache; no request signal or credentials are retained.
+  if (cache.size >= 128) cache.delete(cache.keys().next().value!);
+  cache.set(key, { expires: Date.now() + (selected ? 24 * 60 * 60_000 : 60_000), media: selected });
+  return selected;
 }

package/styles/video-chat.css

@@ -193,59 +193,6 @@
 
 .vanillasky-video-chat .stage :where(video, canvas, img) { max-width: 100%; max-height: 100%; object-fit: contain; }
 
-.vanillasky-video-chat .ground {
-  position: absolute;
-  inset: -30%;
-  background: radial-gradient(closest-side, oklch(1 0 0 / 28%), transparent 70%);
-  animation: vanillasky-video-chat-drift 9s ease-in-out infinite alternate;
-}
-
-@keyframes vanillasky-video-chat-drift {
-  from { transform: translate3d(-12%, -8%, 0) scale(1); }
-  to { transform: translate3d(14%, 10%, 0) scale(1.25); }
-}
-
-.vanillasky-video-chat .asked {
-  margin: 0 auto;
-  padding: 0 1.5rem;
-  display: grid;
-  gap: 1.1rem;
-  justify-items: center;
-  align-content: center;
-  text-align: center;
-  color: var(--vs-on-media);
-}
-
-.vanillasky-video-chat .asked-prompt {
-  margin: 0;
-  max-width: 26ch;
-  font-size: var(--vs-text-display);
-  line-height: var(--vs-lead-display);
-  letter-spacing: var(--vs-track-display);
-  font-weight: 700;
-  text-wrap: balance;
-  animation: vanillasky-video-chat-step-in 620ms ease both;
-}
-
-.vanillasky-video-chat .asked-step {
-  margin: 0;
-  font-size: var(--vs-text-subhead);
-  line-height: var(--vs-lead-subhead);
-  letter-spacing: var(--vs-track-subhead);
-  font-weight: 500;
-  background: linear-gradient(100deg, oklch(1 0 0 / 45%) 20%, oklch(1 0 0) 42%, oklch(1 0 0 / 45%) 64%);
-  background-size: 220% 100%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  animation: vanillasky-video-chat-sweep 2.4s linear infinite, vanillasky-video-chat-step-in 520ms ease both;
-}
-
-@keyframes vanillasky-video-chat-step-in {
-  from { opacity: 0; transform: translateY(6px); }
-  to { opacity: 1; transform: none; }
-}
-
 .vanillasky-video-chat .welcome { position: absolute; inset: 0; overflow: hidden; }
 
 .vanillasky-video-chat .frame-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@@ -463,7 +410,6 @@
   animation: vanillasky-video-chat-fade-in 320ms ease both;
 }
 
-@keyframes vanillasky-video-chat-sweep { from { background-position: 140% 0; } to { background-position: -40% 0; } }
 
 @keyframes vanillasky-video-chat-fade-in { from { opacity: 0; } to { opacity: 1; } }
 
@@ -573,7 +519,6 @@
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
-  .vanillasky-video-chat .asked-step { color: var(--vs-on-media); -webkit-text-fill-color: currentColor; }
 }
 
 .vanillasky-video-chat {
@@ -1053,12 +998,7 @@
 @media (max-width: 700px) {
   .vanillasky-video-chat .sheet-popover { max-height: calc(100% - 102px); }
 }
-.vanillasky-video-chat .opening-wash {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(180deg, rgb(8 11 22 / 12%), rgb(8 11 22 / 42%));
-  pointer-events: none;
-}
+
 .vanillasky-video-chat .ending { pointer-events: none; }
 .vanillasky-video-chat .ending .cards { pointer-events: auto; }
 
@@ -1138,3 +1078,8 @@
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
 }
+
+.vanillasky-video-chat .opening-chapter { animation: vanillasky-chapter-enter 450ms ease-out both; }
+.vanillasky-video-chat .media-credit { color: var(--vs-fg); font-size: 11px; margin-left: 12px; text-underline-offset: 3px; }
+@keyframes vanillasky-chapter-enter { from { opacity: 0; } to { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .vanillasky-video-chat .opening-chapter { animation: none; } }