unified-video-framework/packages/web/src/react/hooks/useCommerceSync.ts

Cross-platform video player framework supporting iOS, Android, Web, Smart TVs (Samsung/LG), Roku, and more

import { useMemo } from "react";
import { VCManifest, VCCue } from "../types/VideoCommerceTypes";

export function resolveActiveCues(manifest: VCManifest | undefined, t: number, paused: boolean) {
  if (!manifest) return [] as VCCue[];
  return manifest.cues.filter(c => {
    if (c.trigger.type === "time" && c.trigger.time) {
      const { start, end } = c.trigger.time;
      return t >= start && (end == null || t <= end);
    }
    if (c.trigger.type === "userAction") {
      return (c.trigger.userAction === "pause" && paused) || (c.trigger.userAction === "resume" && !paused);
    }
    return false;
  });
}

export function useCommerceSync(manifest: VCManifest | undefined, time: number, paused: boolean) {
  const activeCues = useMemo(() => {
    const cues = resolveActiveCues(manifest, time, paused);
    if (manifest && cues.length > 0) {
      console.log(`[COMMERCE] ✅ Active cues at time ${time.toFixed(2)}s (paused=${paused}):`, cues.map(c => c.id));
    }
    return cues;
  }, [manifest, time, paused]);

  const activeOverlays = useMemo(
    () => activeCues.flatMap(c => c.overlays),
    [activeCues]
  );

  const activeProducts = useMemo(() => {
    if (!manifest) return [];
    const ids = new Set<string>();
    for (const o of activeOverlays) for (const r of o.productRefs) ids.add(r.productId);
    const products = manifest.products.filter(p => ids.has(p.id));
    if (products.length > 0) {
      console.log(`[COMMERCE] 🛍️ Active products:`, products.map(p => ({ id: p.id, title: p.title })));
    }
    return products;
  }, [manifest, activeOverlays]);

  return { activeCues, activeOverlays, activeProducts };
}