@shortkitsdk/react-native 0.2.23 → 0.2.25

package/src/ShortKitCarouselOverlaySurface.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useRef, useState, useEffect, useMemo } from 'react';
 import { AppRegistry } from 'react-native';
 import type { CarouselOverlayProps, ImageCarouselItem } from './types';
 import NativeShortKitModule from './specs/NativeShortKitModule';
@@ -31,6 +31,12 @@ function useOverlayEvent<T extends { surfaceId: string }>(
   surfaceId: string | undefined,
   handler: (event: T) => void,
 ) {
+  // Ref-based handler capture so the subscription always calls the latest
+  // closure. Effect depends on [eventName, surfaceId] only — re-subscribing
+  // on every render would churn native subscriptions.
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
   useEffect(() => {
     if (!surfaceId) return;
 
@@ -39,12 +45,12 @@ function useOverlayEvent<T extends { surfaceId: string }>(
     if (typeof emitter === 'function') {
       sub = (emitter as (cb: (e: T) => void) => { remove: () => void })((e: T) => {
         if (e.surfaceId !== surfaceId) return;
-        handler(e);
+        handlerRef.current(e);
       });
     }
 
     return () => sub?.remove();
-  }, [surfaceId]);
+  }, [eventName, surfaceId]);
 }
 
 interface RawCarouselSurfaceProps {
@@ -87,21 +93,43 @@ function CarouselSurfaceInner(props: InnerProps) {
     (e) => setActiveImageIndex(e.activeImageIndex),
   );
 
-  const item: ImageCarouselItem | null = useMemo(() => {
-    if (!props.item) {
-      return null;
-    }
+  // Initial item — from surface props (set once on first mount).
+  const initialItem: ImageCarouselItem | null = useMemo(() => {
+    if (!props.item) return null;
+    try { return JSON.parse(props.item); } catch { return null; }
+  }, [props.item]);
+
+  // Subsequent item changes arrive via event — React diff instead of a full
+  // Fabric remount on cell reuse. Payload also resets isActive/activeImageIndex.
+  const [eventItem, setEventItem] = useState<ImageCarouselItem | null>(null);
+  useOverlayEvent<{
+    surfaceId: string;
+    item: string;
+    isActive: boolean;
+    activeImageIndex: number;
+  }>('onCarouselItemChanged', sid, (e) => {
     try {
-      return JSON.parse(props.item);
+      setEventItem(JSON.parse(e.item));
     } catch {
-      return null;
+      setEventItem(null);
     }
-  }, [props.item]);
+    setIsActive(e.isActive);
+    setActiveImageIndex(e.activeImageIndex);
+  });
+
+  // Prefer event-sourced item (set after first item change) over the initial
+  // props-sourced value. Initial mount still uses props; all subsequent
+  // transitions are event-driven.
+  const item = eventItem ?? initialItem;
 
   if (!item) return null;
 
   return (
+    // key={item.id} preserves "fresh mount per item" for the user's component
+    // — their local state resets cleanly across items — while the SDK wrapper
+    // above stays mounted and keeps its bridge event subscriptions alive.
     <Component
+      key={item.id}
       item={item}
       isActive={isActive}
       activeImageIndex={activeImageIndex}

package/src/ShortKitCommands.ts

@@ -14,6 +14,10 @@ export const ShortKitCommands = {
   seekAndPlay: (seconds: number) => NativeShortKitModule?.seekAndPlay(seconds),
   skipToNext: () => NativeShortKitModule?.skipToNext(),
   skipToPrevious: () => NativeShortKitModule?.skipToPrevious(),
+  carouselNext: (): boolean => NativeShortKitModule?.carouselNext() ?? false,
+  carouselPrevious: (): boolean => NativeShortKitModule?.carouselPrevious() ?? false,
+  carouselSetActiveIndex: (index: number): boolean =>
+    NativeShortKitModule?.carouselSetActiveIndex(index) ?? false,
   setMuted: (muted: boolean) => NativeShortKitModule?.setMuted(muted),
   setPlaybackRate: (rate: number) => NativeShortKitModule?.setPlaybackRate(rate),
   setCaptionsEnabled: (enabled: boolean) =>
@@ -28,4 +32,7 @@ export const ShortKitCommands = {
     NativeShortKitModule?.prefetchStoryboard(playbackId),
   getStoryboardData: (playbackId: string): Promise<string | null> =>
     NativeShortKitModule?.getStoryboardData(playbackId) ?? Promise.resolve(null),
+  downloadVideo: (itemId: string, mode: 'nonInterruptive' | 'interruptive' = 'nonInterruptive'): Promise<string> =>
+    NativeShortKitModule?.downloadVideo(itemId, mode) ?? Promise.reject(new Error('ShortKit not initialized')),
+  cancelDownload: () => NativeShortKitModule?.cancelDownload(),
 } as const;

package/src/ShortKitContext.ts

@@ -1,6 +1,7 @@
 import { createContext } from 'react';
 import type {
   ContentItem,
+  DownloadState,
   FeedConfig,
   FeedFilter,
   FeedInput,
@@ -51,6 +52,11 @@ export interface ShortKitContextValue {
   // Storyboard / seek thumbnails
   prefetchStoryboard: (playbackId: string) => void;
   getStoryboardData: (playbackId: string) => Promise<StoryboardData | null>;
+
+  // Download
+  downloadState: DownloadState;
+  downloadVideo: (itemId: string, mode?: 'nonInterruptive' | 'interruptive') => Promise<string>;
+  cancelDownload: () => void;
 }
 
 export const ShortKitContext = createContext<ShortKitContextValue | null>(null);

package/src/ShortKitFeed.tsx

@@ -33,6 +33,7 @@ export const ShortKitFeed = forwardRef<ShortKitFeedHandle, ShortKitFeedProps>(
     preloadId,
     style,
     startAtItemId,
+    seedThumbnailUrl,
     onLoop,
     onFeedTransition,
     onFormatChange,
@@ -42,6 +43,7 @@ export const ShortKitFeed = forwardRef<ShortKitFeedHandle, ShortKitFeedProps>(
     onDidFetchContentItems,
     onRemainingContentCountChange,
     onFeedReady,
+    onCarouselActiveVideoCompleted,
   } = props;
 
   const isInitialized = useContext(ShortKitInitContext);
@@ -49,13 +51,6 @@ export const ShortKitFeed = forwardRef<ShortKitFeedHandle, ShortKitFeedProps>(
     throw new Error('ShortKitFeed must be used within a ShortKitProvider');
   }
 
-  // ⚡ TEMP — remove after verifying. Should only log on mount, not on every swipe/time update.
-  const renderCount = useRef(0);
-  renderCount.current++;
-  if (renderCount.current <= 3 || renderCount.current % 100 === 0) {
-    console.log(`[SK:Feed] render #${renderCount.current}`);
-  }
-
   // Stable feed instance ID — survives re-renders and React fast refresh
   const feedIdRef = useRef(generateFeedId());
   const feedId = feedIdRef.current;
@@ -204,6 +199,25 @@ export const ShortKitFeed = forwardRef<ShortKitFeedHandle, ShortKitFeedProps>(
       );
     }
 
+    if (onCarouselActiveVideoCompleted) {
+      subscriptions.push(
+        NativeShortKitModule.onCarouselActiveVideoCompleted((event) => {
+          try {
+            onCarouselActiveVideoCompleted({
+              surfaceId: event.surfaceId,
+              contentItem: JSON.parse(event.contentItem),
+              indexInCarousel: event.indexInCarousel,
+              carouselItem: JSON.parse(event.carouselItem),
+              wasLast: event.wasLast,
+              willAutoAdvance: event.willAutoAdvance,
+            });
+          } catch (err) {
+            console.warn('[ShortKit] failed to parse onCarouselActiveVideoCompleted', err);
+          }
+        }),
+      );
+    }
+
     return () => {
       for (const sub of subscriptions) {
         sub.remove();
@@ -217,6 +231,7 @@ export const ShortKitFeed = forwardRef<ShortKitFeedHandle, ShortKitFeedProps>(
     onDismiss,
     onRefreshStateChanged,
     onDidFetchContentItems,
+    onCarouselActiveVideoCompleted,
   ]);
 
   // ---------------------------------------------------------------------------
@@ -230,6 +245,7 @@ export const ShortKitFeed = forwardRef<ShortKitFeedHandle, ShortKitFeedProps>(
         feedId={feedId}
         startAtItemId={startAtItemId}
         preloadId={preloadId}
+        seedThumbnailUrl={seedThumbnailUrl}
       />
     </View>
   );

package/src/ShortKitOverlaySurface.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { AppRegistry, View, Text } from 'react-native';
 import type { OverlayProps, PlayerState, PlayerTime, FeedScrollPhase } from './types';
 import { deserializeContentItem } from './serialization';
@@ -101,6 +101,12 @@ function useOverlayEvent<T extends { surfaceId: string }>(
   surfaceId: string | undefined,
   handler: (event: T) => void,
 ) {
+  // Stash the latest handler in a ref so the subscription below always calls
+  // the current closure. The effect deliberately depends on [eventName, surfaceId]
+  // only — re-subscribing on every render would churn native subscriptions.
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
   useEffect(() => {
     if (!surfaceId) return;
 
@@ -112,12 +118,12 @@ function useOverlayEvent<T extends { surfaceId: string }>(
     if (typeof emitter === 'function') {
       sub = (emitter as (cb: (e: T) => void) => { remove: () => void })((e: T) => {
         if (e.surfaceId !== surfaceId) return;
-        handler(e);
+        handlerRef.current(e);
       });
     }
 
     return () => sub?.remove();
-  }, [surfaceId]);
+  }, [eventName, surfaceId]);
 }
 
 function ShortKitOverlaySurfaceInner(props: InnerProps) {
@@ -131,12 +137,12 @@ function ShortKitOverlaySurfaceInner(props: InnerProps) {
     props.item ? deserializeContentItem(props.item) : null,
   );
 
-  // Sync item from props when surface is first mounted or remounted via updateInitProps
+  // Sync item from props when surface is first mounted or remounted via updateInitProps.
+  // Synchronous setState during render — React restarts with new state before
+  // committing, so the stale frame is never painted.
   const prevPropsItemRef = React.useRef(props.item);
   if (props.item !== prevPropsItemRef.current) {
     prevPropsItemRef.current = props.item;
-    // Synchronous state update during render — React restarts with new state
-    // before committing, so stale frame is never painted.
     setItem(props.item ? deserializeContentItem(props.item) : null);
   }
 
@@ -188,23 +194,45 @@ function ShortKitOverlaySurfaceInner(props: InnerProps) {
 
   // --- Event subscriptions (filtered by surfaceId) ---
 
-  // Item changed via event (not updateInitProps) — triggers React DIFF
-  // instead of full remount. Uses DeviceEventEmitter because this event
-  // is not in the TurboModule spec (avoids native codegen changes).
-  useEffect(() => {
-    if (!sid) return;
-    const { DeviceEventEmitter } = require('react-native');
-    const sub = DeviceEventEmitter.addListener('onOverlayItemChanged', (e: { surfaceId: string; item: string }) => {
-      if (e.surfaceId !== sid) return;
-      const newItem = e.item ? deserializeContentItem(e.item) : null;
-      if (newItem) setItem(newItem);
-      // Reset playback state for the new item
-      setIsActive(false);
-      setPlayerState('idle' as PlayerState);
-      setTime({ current: 0, duration: 0, buffered: 0 });
-    });
-    return () => sub.remove();
-  }, [sid]);
+  // Item changed via event — triggers React DIFF instead of a full Fabric
+  // remount. Now a first-class codegen event (see NativeShortKitModule.ts),
+  // which routes through the JSI EventEmitterCallback on both platforms.
+  // Payload carries full initial state to match what pushInitialProperties()
+  // would have set, avoiding any stale-state window before activatePlayback().
+  useOverlayEvent<{
+    surfaceId: string;
+    item: string;
+    isActive: boolean;
+    playerState: string;
+    isMuted: boolean;
+    playbackRate: number;
+    captionsEnabled: boolean;
+    activeCue: string | null;
+    feedScrollPhase: string | null;
+  }>('onOverlayItemChanged', sid, (e) => {
+    const newItem = e.item ? deserializeContentItem(e.item) : null;
+    if (newItem) setItem(newItem);
+    // Apply ALL initial state — matches the old setProperties() behavior.
+    setIsActive(e.isActive);
+    setPlayerState(e.playerState as PlayerState);
+    setIsMuted(e.isMuted);
+    setPlaybackRate(e.playbackRate);
+    setCaptionsEnabled(e.captionsEnabled);
+    setTime({ current: 0, duration: 0, buffered: 0 });
+    const rawCue = e.activeCue ?? null;
+    lastActiveCueJsonRef.current = rawCue;
+    try {
+      setActiveCue(rawCue ? JSON.parse(rawCue) : null);
+    } catch {
+      setActiveCue(null);
+    }
+    try {
+      const next = e.feedScrollPhase ? JSON.parse(e.feedScrollPhase) : null;
+      setFeedScrollPhase(next);
+    } catch {
+      setFeedScrollPhase(null);
+    }
+  });
 
   useOverlayEvent<{ surfaceId: string; isActive: boolean }>(
     'onOverlayActiveChanged', sid,
@@ -310,7 +338,15 @@ function ShortKitOverlaySurfaceInner(props: InnerProps) {
 
   return (
     <OverlayErrorBoundary surfaceId={sid} overlayName={props.overlayName}>
+      {/*
+        key={item.id} preserves the legacy "fresh mount per item" contract
+        for the user's overlay component (their local useState/useRef reset
+        cleanly across items). The SDK wrapper above stays mounted, so
+        bridge event subscriptions and SDK-side state survive cell reuse
+        instead of churning on every swipe.
+      */}
       <Component
+        key={item.id}
         item={item}
         isActive={isActive}
         playerState={playerState}

package/src/ShortKitProvider.tsx

@@ -6,6 +6,7 @@ import type { ShortKitContextValue } from './ShortKitContext';
 import type {
   ShortKitProviderProps,
   ContentItem,
+  DownloadState,
   FeedConfig,
   FeedFilter,
   FeedInput,
@@ -23,6 +24,7 @@ import {
   deserializePlayerTime,
 } from './serialization';
 import NativeShortKitModule from './specs/NativeShortKitModule';
+import { ShortKitCommands } from './ShortKitCommands';
 import { registerLoadingComponent } from './ShortKitLoadingSurface';
 
 // ---------------------------------------------------------------------------
@@ -41,6 +43,7 @@ interface State {
   prefetchedAheadCount: number;
   isActive: boolean;
   feedScrollPhase: FeedScrollPhase | null;
+  downloadState: DownloadState;
 }
 
 const initialState: State = {
@@ -55,6 +58,7 @@ const initialState: State = {
   prefetchedAheadCount: 0,
   isActive: false,
   feedScrollPhase: null,
+  downloadState: { status: 'idle', progress: 0 },
 };
 
 type Action =
@@ -67,7 +71,11 @@ type Action =
   | { type: 'CAPTION_TRACK'; payload: CaptionTrack | null }
   | { type: 'CUE'; payload: { text: string; startTime: number; endTime: number } | null }
   | { type: 'PREFETCH_COUNT'; payload: number }
-  | { type: 'FEED_SCROLL_PHASE'; payload: FeedScrollPhase };
+  | { type: 'FEED_SCROLL_PHASE'; payload: FeedScrollPhase }
+  | { type: 'DOWNLOAD_STARTED'; itemId: string }
+  | { type: 'DOWNLOAD_PROGRESS'; itemId: string; progress: number }
+  | { type: 'DOWNLOAD_COMPLETED'; itemId: string; fileUrl: string }
+  | { type: 'DOWNLOAD_FAILED'; itemId: string; error: string };
 
 function reducer(state: State, action: Action): State {
   switch (action.type) {
@@ -101,6 +109,14 @@ function reducer(state: State, action: Action): State {
       return { ...state, prefetchedAheadCount: action.payload };
     case 'FEED_SCROLL_PHASE':
       return { ...state, feedScrollPhase: action.payload };
+    case 'DOWNLOAD_STARTED':
+      return { ...state, downloadState: { status: 'downloading', itemId: action.itemId, progress: 0 } };
+    case 'DOWNLOAD_PROGRESS':
+      return { ...state, downloadState: { ...state.downloadState, progress: action.progress } };
+    case 'DOWNLOAD_COMPLETED':
+      return { ...state, downloadState: { status: 'completed', itemId: action.itemId, progress: 1, fileUrl: action.fileUrl } };
+    case 'DOWNLOAD_FAILED':
+      return { ...state, downloadState: { status: 'failed', itemId: action.itemId, progress: 0, error: action.error } };
     default:
       return state;
   }
@@ -327,6 +343,26 @@ export function ShortKitProvider({
       }),
     );
 
+    // Download started
+    const downloadStartedSub = NativeShortKitModule.onDownloadStarted((event) => {
+      dispatch({ type: 'DOWNLOAD_STARTED', itemId: event.itemId });
+    });
+
+    // Download progress
+    const downloadProgressSub = NativeShortKitModule.onDownloadProgress((event) => {
+      dispatch({ type: 'DOWNLOAD_PROGRESS', itemId: event.itemId, progress: event.progress });
+    });
+
+    // Download completed
+    const downloadCompletedSub = NativeShortKitModule.onDownloadCompleted((event) => {
+      dispatch({ type: 'DOWNLOAD_COMPLETED', itemId: event.itemId, fileUrl: event.fileUrl });
+    });
+
+    // Download failed
+    const downloadFailedSub = NativeShortKitModule.onDownloadFailed((event) => {
+      dispatch({ type: 'DOWNLOAD_FAILED', itemId: event.itemId, error: event.error });
+    });
+
     // Note: Feed-level callback events (onDidLoop, onFeedTransition,
     // onDismiss, etc.) are subscribed by the ShortKitFeed component
     // not here. The provider only manages state-driving events.
@@ -335,6 +371,10 @@ export function ShortKitProvider({
       for (const sub of subscriptions) {
         sub.remove();
       }
+      downloadStartedSub.remove();
+      downloadProgressSub.remove();
+      downloadCompletedSub.remove();
+      downloadFailedSub.remove();
     };
   }, []);
 
@@ -447,6 +487,7 @@ export function ShortKitProvider({
       prefetchedAheadCount: state.prefetchedAheadCount,
       isActive: state.isActive,
       feedScrollPhase: state.feedScrollPhase,
+      downloadState: state.downloadState,
 
       // Commands
       play,
@@ -467,6 +508,8 @@ export function ShortKitProvider({
       preloadFeed: preloadFeedCmd,
       prefetchStoryboard: prefetchStoryboardCmd,
       getStoryboardData: getStoryboardDataCmd,
+      downloadVideo: ShortKitCommands.downloadVideo,
+      cancelDownload: ShortKitCommands.cancelDownload,
     }),
     [
       state.playerState,
@@ -480,6 +523,7 @@ export function ShortKitProvider({
       state.prefetchedAheadCount,
       state.isActive,
       state.feedScrollPhase,
+      state.downloadState,
       play,
       pause,
       seek,

package/src/ShortKitVideoCarouselOverlaySurface.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useRef, useState, useEffect, useMemo } from 'react';
 import { AppRegistry } from 'react-native';
 import type { VideoCarouselOverlayProps, VideoCarouselItem, ContentItem, PlayerTime, PlayerState } from './types';
 import NativeShortKitModule from './specs/NativeShortKitModule';
@@ -31,6 +31,12 @@ function useOverlayEvent<T extends { surfaceId: string }>(
   surfaceId: string | undefined,
   handler: (event: T) => void,
 ) {
+  // Ref-based handler capture so the subscription always calls the latest
+  // closure. Effect depends on [eventName, surfaceId] only — re-subscribing
+  // on every render would churn native subscriptions.
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
   useEffect(() => {
     if (!surfaceId) return;
 
@@ -39,12 +45,12 @@ function useOverlayEvent<T extends { surfaceId: string }>(
     if (typeof emitter === 'function') {
       sub = (emitter as (cb: (e: T) => void) => { remove: () => void })((e: T) => {
         if (e.surfaceId !== surfaceId) return;
-        handler(e);
+        handlerRef.current(e);
       });
     }
 
     return () => sub?.remove();
-  }, [surfaceId]);
+  }, [eventName, surfaceId]);
 }
 
 interface RawProps {
@@ -140,11 +146,51 @@ function VideoCarouselSurfaceInner(props: InnerProps) {
     },
   );
 
-  if (!carouselItem || !activeVideo) return null;
+  // Carousel item itself changes via event — React diff instead of a full
+  // Fabric remount on cell reuse. Payload carries full initial state to match
+  // the old setProperties() path.
+  const [eventCarouselItem, setEventCarouselItem] = useState<VideoCarouselItem | null>(null);
+  useOverlayEvent<{
+    surfaceId: string;
+    carouselItem: string;
+    activeVideo: string;
+    activeVideoIndex: number;
+    isActive: boolean;
+    playerState: string;
+    isMuted: boolean;
+  }>('onVideoCarouselItemChanged', sid, (e) => {
+    try {
+      setEventCarouselItem(JSON.parse(e.carouselItem));
+    } catch {
+      setEventCarouselItem(null);
+    }
+    try {
+      setActiveVideo(e.activeVideo ? JSON.parse(e.activeVideo) : null);
+    } catch {
+      setActiveVideo(null);
+    }
+    setActiveVideoIndex(e.activeVideoIndex);
+    setIsActive(e.isActive);
+    setPlayerState(e.playerState as PlayerState);
+    setIsMuted(e.isMuted);
+    setTime({ current: 0, duration: 0, buffered: 0 });
+  });
+
+  // Prefer the event-sourced carousel item (set after first item change) over
+  // the initial props-sourced value. The initial mount still goes through
+  // props, but all subsequent item transitions are event-driven.
+  const effectiveCarouselItem = eventCarouselItem ?? carouselItem;
+
+  if (!effectiveCarouselItem || !activeVideo) return null;
 
   return (
+    // key={effectiveCarouselItem.id} preserves the legacy "fresh mount per
+    // carousel item" contract for the user's component — their local state
+    // resets cleanly across items — while the SDK wrapper above stays mounted
+    // and keeps its bridge event subscriptions alive.
     <Component
-      carouselItem={carouselItem}
+      key={effectiveCarouselItem.id}
+      carouselItem={effectiveCarouselItem}
       activeVideo={activeVideo}
       activeVideoIndex={activeVideoIndex}
       isActive={isActive}

package/src/index.ts

@@ -4,6 +4,7 @@ export { ShortKitPlayer } from './ShortKitPlayer';
 export { ShortKitWidget } from './ShortKitWidget';
 export { useShortKitPlayer } from './useShortKitPlayer';
 export { useShortKit } from './useShortKit';
+export { useShortKitCarousel } from './useShortKitCarousel';
 export type {
   FeedConfig,
   FeedHeight,
@@ -20,6 +21,8 @@ export type {
   CarouselImage,
   ImageCarouselItem,
   VideoCarouselItem,
+  VideoCarouselVideoInput,
+  VideoCarouselInput,
   FeedInput,
   JSONValue,
   CaptionTrack,
@@ -38,6 +41,7 @@ export type {
   ShortKitPlayerProps,
   ShortKitWidgetProps,
   ShortKitPlayerState,
+  ShortKitCarouselState,
   ShortKitRefreshState,
   StoryboardData,
   StoryboardTile,

package/src/serialization.ts

@@ -4,6 +4,7 @@ import type {
   FeedInput,
   PlayerState,
   PlayerTime,
+  VideoCarouselVideoInput,
 } from './types';
 
 /**
@@ -88,9 +89,44 @@ export function deserializePlayerTime(event: {
   };
 }
 
+/**
+ * Serialize a single VideoCarouselVideoInput slide for the bridge.
+ * Always emits `origin` (defaults to 'other') for a consistent native shape.
+ */
+function serializeVideoCarouselSlide(
+  slide: VideoCarouselVideoInput,
+): Record<string, unknown> {
+  return {
+    playbackId: slide.playbackId,
+    origin: slide.origin ?? 'other',
+    ...(slide.fallbackUrl != null ? { fallbackUrl: slide.fallbackUrl } : {}),
+  };
+}
+
 /**
  * Serialize FeedInput[] to a JSON string for the bridge.
+ * For video items, `origin` is included and defaults to 'other' when omitted.
  */
 export function serializeFeedInputs(items: FeedInput[]): string {
-  return JSON.stringify(items);
+  const serialized = items.map((input) => {
+    if (input.type === 'video') {
+      return {
+        type: 'video',
+        playbackId: input.playbackId,
+        origin: input.origin ?? 'other',
+        ...(input.fallbackUrl != null ? { fallbackUrl: input.fallbackUrl } : {}),
+      };
+    }
+    if (input.type === 'videoCarousel') {
+      return {
+        type: 'videoCarousel',
+        item: {
+          ...input.item,
+          videos: input.item.videos.map(serializeVideoCarouselSlide),
+        },
+      };
+    }
+    return input;
+  });
+  return JSON.stringify(serialized);
 }