@shortkitsdk/react-native 0.2.5 → 0.2.11

package/src/ShortKitProvider.tsx

@@ -6,21 +6,23 @@ import type { ShortKitContextValue } from './ShortKitContext';
 import type {
   ShortKitProviderProps,
   ContentItem,
-  ImageCarouselItem,
-  CustomFeedItem,
+  FeedConfig,
+  FeedFilter,
   PlayerTime,
   PlayerState,
   CaptionTrack,
+  FeedScrollPhase,
   ContentSignal,
+  StoryboardData,
 } from './types';
 import {
-  serializeFeedConfigForModule,
-  serializeCustomFeedItems,
+  serializeFeedConfig,
   deserializePlayerState,
   deserializeContentItem,
   deserializePlayerTime,
 } from './serialization';
 import NativeShortKitModule from './specs/NativeShortKitModule';
+import { registerLoadingComponent } from './ShortKitLoadingSurface';
 
 // ---------------------------------------------------------------------------
 // State & Reducer
@@ -29,7 +31,6 @@ import NativeShortKitModule from './specs/NativeShortKitModule';
 interface State {
   playerState: PlayerState;
   currentItem: ContentItem | null;
-  nextItem: ContentItem | null;
   time: PlayerTime;
   isMuted: boolean;
   playbackRate: number;
@@ -37,22 +38,13 @@ interface State {
   activeCaptionTrack: CaptionTrack | null;
   activeCue: { text: string; startTime: number; endTime: number } | null;
   prefetchedAheadCount: number;
-  remainingContentCount: number;
   isActive: boolean;
-  isTransitioning: boolean;
-  lastOverlayTap: number;
-  lastOverlayDoubleTap: { x: number; y: number; id: number } | null;
-  currentCarouselItem: ImageCarouselItem | null;
-  nextCarouselItem: ImageCarouselItem | null;
-  isCarouselActive: boolean;
-  isCarouselTransitioning: boolean;
-  activeCellType: 'video' | 'carousel' | null;
+  feedScrollPhase: FeedScrollPhase | null;
 }
 
 const initialState: State = {
   playerState: 'idle',
   currentItem: null,
-  nextItem: null,
   time: { current: 0, duration: 0, buffered: 0 },
   isMuted: true,
   playbackRate: 1.0,
@@ -60,16 +52,8 @@ const initialState: State = {
   activeCaptionTrack: null,
   activeCue: null,
   prefetchedAheadCount: 0,
-  remainingContentCount: 0,
   isActive: false,
-  isTransitioning: false,
-  lastOverlayTap: 0,
-  lastOverlayDoubleTap: null,
-  currentCarouselItem: null,
-  nextCarouselItem: null,
-  isCarouselActive: false,
-  isCarouselTransitioning: false,
-  activeCellType: null,
+  feedScrollPhase: null,
 };
 
 type Action =
@@ -82,39 +66,20 @@ type Action =
   | { type: 'CAPTION_TRACK'; payload: CaptionTrack | null }
   | { type: 'CUE'; payload: { text: string; startTime: number; endTime: number } | null }
   | { type: 'PREFETCH_COUNT'; payload: number }
-  | { type: 'REMAINING_COUNT'; payload: number }
-  | { type: 'OVERLAY_CONFIGURE'; payload: ContentItem }
-  | { type: 'OVERLAY_ACTIVATE'; payload: ContentItem }
-  | { type: 'OVERLAY_RESET' }
-  | { type: 'OVERLAY_FADE_OUT' }
-  | { type: 'OVERLAY_RESTORE' }
-  | { type: 'OVERLAY_TAP' }
-  | { type: 'OVERLAY_DOUBLE_TAP'; payload: { x: number; y: number } }
-  | { type: 'ACTIVE_CELL_TYPE'; payload: 'video' | 'carousel' }
-  | { type: 'CAROUSEL_OVERLAY_CONFIGURE'; payload: ImageCarouselItem }
-  | { type: 'CAROUSEL_OVERLAY_ACTIVATE'; payload: ImageCarouselItem }
-  | { type: 'CAROUSEL_OVERLAY_RESET' }
-  | { type: 'CAROUSEL_OVERLAY_FADE_OUT' }
-  | { type: 'CAROUSEL_OVERLAY_RESTORE' };
+  | { type: 'FEED_SCROLL_PHASE'; payload: FeedScrollPhase };
 
 function reducer(state: State, action: Action): State {
   switch (action.type) {
     case 'PLAYER_STATE': {
-      // Only allow isActive to transition TO true from player state.
-      // Once active, the overlay stays mounted — hiding during transient
-      // states like "loading" between videos would cause a visible flash.
       const isPlaybackActive =
         action.payload === 'playing' ||
         action.payload === 'paused' ||
         action.payload === 'buffering' ||
         action.payload === 'seeking';
-      const becameActive = !state.isActive && isPlaybackActive;
       return {
         ...state,
         playerState: action.payload,
         isActive: state.isActive || isPlaybackActive,
-        // First playback means a video cell is active (initial load)
-        activeCellType: becameActive ? 'video' : state.activeCellType,
       };
     }
     case 'CURRENT_ITEM':
@@ -133,58 +98,8 @@ function reducer(state: State, action: Action): State {
       return { ...state, activeCue: action.payload };
     case 'PREFETCH_COUNT':
       return { ...state, prefetchedAheadCount: action.payload };
-    case 'REMAINING_COUNT':
-      return { ...state, remainingContentCount: action.payload };
-    case 'OVERLAY_CONFIGURE':
-      return { ...state, nextItem: action.payload };
-    case 'OVERLAY_ACTIVATE':
-      // Reset time/cue/transition state to prevent stale playback data from
-      // the previous cell flashing on the new cell's overlay.
-      // Note: nextItem is NOT cleared here — the native-side deferred-configure
-      // (ShortKitOverlayBridge) already prevents handleSwipe from polluting it.
-      // Clearing it would cause overlay-next to unmount its content ~80ms before
-      // the page settle swaps overlays, creating a visible dim-layer gap.
-      return {
-        ...state,
-        currentItem: action.payload,
-        isActive: true,
-        time: { current: 0, duration: action.payload.duration, buffered: 0 },
-        activeCue: null,
-        isTransitioning: false,
-      };
-    case 'OVERLAY_RESET':
-      // Don't set isActive = false — the overlay stays mounted during
-      // transitions. In the native SDK each cell has its own overlay
-      // instance, so there's no gap. We replicate this by keeping the
-      // single JS overlay mounted and updating its content on activate.
-      return { ...state, isTransitioning: false };
-    case 'OVERLAY_FADE_OUT':
-      return { ...state, isTransitioning: true };
-    case 'OVERLAY_RESTORE':
-      return { ...state, isTransitioning: false };
-    case 'OVERLAY_TAP':
-      return { ...state, lastOverlayTap: state.lastOverlayTap + 1 };
-    case 'OVERLAY_DOUBLE_TAP':
-      return {
-        ...state,
-        lastOverlayDoubleTap: {
-          x: action.payload.x,
-          y: action.payload.y,
-          id: (state.lastOverlayDoubleTap?.id ?? 0) + 1,
-        },
-      };
-    case 'ACTIVE_CELL_TYPE':
-      return { ...state, activeCellType: action.payload };
-    case 'CAROUSEL_OVERLAY_CONFIGURE':
-      return { ...state, nextCarouselItem: action.payload };
-    case 'CAROUSEL_OVERLAY_ACTIVATE':
-      return { ...state, currentCarouselItem: action.payload, isCarouselActive: true };
-    case 'CAROUSEL_OVERLAY_RESET':
-      return { ...state, isCarouselTransitioning: false };
-    case 'CAROUSEL_OVERLAY_FADE_OUT':
-      return { ...state, isCarouselTransitioning: true };
-    case 'CAROUSEL_OVERLAY_RESTORE':
-      return { ...state, isCarouselTransitioning: false };
+    case 'FEED_SCROLL_PHASE':
+      return { ...state, feedScrollPhase: action.payload };
     default:
       return state;
   }
@@ -196,12 +111,11 @@ function reducer(state: State, action: Action): State {
 
 export function ShortKitProvider({
   apiKey,
-  config,
-  embedId,
   userId,
   clientAppName,
   clientAppVersion,
   customDimensions,
+  loadingViewComponent,
   children,
 }: ShortKitProviderProps): React.JSX.Element {
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -213,15 +127,17 @@ export function ShortKitProvider({
   useEffect(() => {
     if (!NativeShortKitModule) return;
 
-    const serializedConfig = serializeFeedConfigForModule(config);
+    if (loadingViewComponent) {
+      registerLoadingComponent(loadingViewComponent);
+    }
+
     const serializedDimensions = customDimensions
       ? JSON.stringify(customDimensions)
       : undefined;
 
     NativeShortKitModule.initialize(
       apiKey,
-      serializedConfig,
-      embedId,
+      !!loadingViewComponent,
       clientAppName,
       clientAppVersion,
       serializedDimensions,
@@ -314,6 +230,7 @@ export function ShortKitProvider({
           author: event.author,
           articleUrl: event.articleUrl,
           commentCount: event.commentCount,
+          fallbackUrl: event.fallbackUrl,
         };
         dispatch({ type: 'CURRENT_ITEM', payload: item });
       }),
@@ -382,124 +299,34 @@ export function ShortKitProvider({
       }),
     );
 
-    // Remaining content count
-    subscriptions.push(
-      NativeShortKitModule.onRemainingContentCountChanged((event) => {
-        dispatch({ type: 'REMAINING_COUNT', payload: event.count });
-      }),
-    );
-
-    // Overlay lifecycle events
-    subscriptions.push(
-      NativeShortKitModule.onOverlayConfigure((event) => {
-        const item = deserializeContentItem(event.item);
-        if (item) {
-          dispatch({ type: 'OVERLAY_CONFIGURE', payload: item });
-        }
-      }),
-    );
-
+    // Feed transition
     subscriptions.push(
-      NativeShortKitModule.onOverlayActivate((event) => {
-        const item = deserializeContentItem(event.item);
-        if (item) {
-          dispatch({ type: 'OVERLAY_ACTIVATE', payload: item });
-        }
-      }),
-    );
-
-    subscriptions.push(
-      NativeShortKitModule.onOverlayReset((_event) => {
-        dispatch({ type: 'OVERLAY_RESET' });
-      }),
-    );
-
-    subscriptions.push(
-      NativeShortKitModule.onOverlayFadeOut((_event) => {
-        dispatch({ type: 'OVERLAY_FADE_OUT' });
-      }),
-    );
-
-    subscriptions.push(
-      NativeShortKitModule.onOverlayRestore((_event) => {
-        dispatch({ type: 'OVERLAY_RESTORE' });
-      }),
-    );
-
-    // Overlay tap events
-    subscriptions.push(
-      NativeShortKitModule.onOverlayTap((_event) => {
-        dispatch({ type: 'OVERLAY_TAP' });
-      }),
-    );
-
-    subscriptions.push(
-      NativeShortKitModule.onOverlayDoubleTap((event) => {
-        dispatch({
-          type: 'OVERLAY_DOUBLE_TAP',
-          payload: { x: event.x, y: event.y },
-        });
+      NativeShortKitModule.onFeedTransition((_event) => {
+        // Feed transition events are consumed by ShortKitFeed callback props.
+        // No state to update here in the simplified provider.
       }),
     );
 
-    // Feed transition — track active cell type
+    // Feed scroll phase
     subscriptions.push(
-      NativeShortKitModule.onFeedTransition((event) => {
-        if (event.phase === 'ended') {
-          // toItem is null when the destination cell is non-video (carousel, survey, ad)
-          const isVideo = event.toItem != null;
+      NativeShortKitModule.onFeedScrollPhase((event) => {
+        if (event.phase === 'dragging' && event.fromId) {
           dispatch({
-            type: 'ACTIVE_CELL_TYPE',
-            payload: isVideo ? 'video' : 'carousel',
+            type: 'FEED_SCROLL_PHASE',
+            payload: { phase: 'dragging', fromId: event.fromId },
+          });
+        } else if (event.phase === 'settled') {
+          dispatch({
+            type: 'FEED_SCROLL_PHASE',
+            payload: { phase: 'settled' },
           });
         }
       }),
     );
 
-    // Carousel overlay lifecycle events
-    subscriptions.push(
-      NativeShortKitModule.onCarouselOverlayConfigure((event) => {
-        try {
-          const item = JSON.parse(event.item) as ImageCarouselItem;
-          dispatch({ type: 'CAROUSEL_OVERLAY_CONFIGURE', payload: item });
-        } catch {
-          // Ignore malformed JSON
-        }
-      }),
-    );
-
-    subscriptions.push(
-      NativeShortKitModule.onCarouselOverlayActivate((event) => {
-        try {
-          const item = JSON.parse(event.item) as ImageCarouselItem;
-          dispatch({ type: 'CAROUSEL_OVERLAY_ACTIVATE', payload: item });
-        } catch {
-          // Ignore malformed JSON
-        }
-      }),
-    );
-
-    subscriptions.push(
-      NativeShortKitModule.onCarouselOverlayReset((_event) => {
-        dispatch({ type: 'CAROUSEL_OVERLAY_RESET' });
-      }),
-    );
-
-    subscriptions.push(
-      NativeShortKitModule.onCarouselOverlayFadeOut((_event) => {
-        dispatch({ type: 'CAROUSEL_OVERLAY_FADE_OUT' });
-      }),
-    );
-
-    subscriptions.push(
-      NativeShortKitModule.onCarouselOverlayRestore((_event) => {
-        dispatch({ type: 'CAROUSEL_OVERLAY_RESTORE' });
-      }),
-    );
-
     // Note: Feed-level callback events (onDidLoop, onFeedTransition,
-    // onShareTapped, etc.) are subscribed by the ShortKitFeed component
-    // (Task 11), not here. The provider only manages state-driving events.
+    // onDismiss, etc.) are subscribed by the ShortKitFeed component
+    // not here. The provider only manages state-driving events.
 
     return () => {
       for (const sub of subscriptions) {
@@ -567,24 +394,38 @@ export function ShortKitProvider({
     NativeShortKitModule?.clearUserId();
   }, []);
 
-  const setFeedItemsCmd = useCallback((items: CustomFeedItem[]) => {
-    NativeShortKitModule?.setFeedItems(serializeCustomFeedItems(items));
+  const fetchContentCmd = useCallback(async (limit: number = 10, filter?: FeedFilter): Promise<ContentItem[]> => {
+    if (!NativeShortKitModule) return [];
+    const filterJSON = filter ? JSON.stringify(filter) : null;
+    const json = await NativeShortKitModule.fetchContent(limit, filterJSON);
+    try {
+      return JSON.parse(json) as ContentItem[];
+    } catch {
+      return [];
+    }
   }, []);
 
-  const appendFeedItemsCmd = useCallback((items: CustomFeedItem[]) => {
-    NativeShortKitModule?.appendFeedItems(serializeCustomFeedItems(items));
+  const prefetchStoryboardCmd = useCallback((playbackId: string) => {
+    NativeShortKitModule?.prefetchStoryboard(playbackId);
   }, []);
 
-  const fetchContentCmd = useCallback(async (limit: number = 10): Promise<ContentItem[]> => {
-    if (!NativeShortKitModule) return [];
-    const json = await NativeShortKitModule.fetchContent(limit);
+  const getStoryboardDataCmd = useCallback(async (playbackId: string): Promise<StoryboardData | null> => {
+    if (!NativeShortKitModule) return null;
+    const json = await NativeShortKitModule.getStoryboardData(playbackId);
+    if (!json) return null;
     try {
-      return JSON.parse(json) as ContentItem[];
+      return JSON.parse(json) as StoryboardData;
     } catch {
-      return [];
+      return null;
     }
   }, []);
 
+  const preloadFeedCmd = useCallback(async (config?: Partial<FeedConfig>): Promise<string> => {
+    if (!NativeShortKitModule) return '';
+    const configJSON = config ? serializeFeedConfig(config as FeedConfig) : '{}';
+    return NativeShortKitModule.preloadFeed(configJSON);
+  }, []);
+
   // -----------------------------------------------------------------------
   // Context value (memoized to avoid unnecessary re-renders)
   // -----------------------------------------------------------------------
@@ -593,7 +434,6 @@ export function ShortKitProvider({
       // State
       playerState: state.playerState,
       currentItem: state.currentItem,
-      nextItem: state.nextItem,
       time: state.time,
       isMuted: state.isMuted,
       playbackRate: state.playbackRate,
@@ -601,11 +441,8 @@ export function ShortKitProvider({
       activeCaptionTrack: state.activeCaptionTrack,
       activeCue: state.activeCue,
       prefetchedAheadCount: state.prefetchedAheadCount,
-      remainingContentCount: state.remainingContentCount,
       isActive: state.isActive,
-      isTransitioning: state.isTransitioning,
-      lastOverlayTap: state.lastOverlayTap,
-      lastOverlayDoubleTap: state.lastOverlayDoubleTap,
+      feedScrollPhase: state.feedScrollPhase,
 
       // Commands
       play,
@@ -622,27 +459,14 @@ export function ShortKitProvider({
       setMaxBitrate,
       setUserId: setUserIdCmd,
       clearUserId: clearUserIdCmd,
-      setFeedItems: setFeedItemsCmd,
-      appendFeedItems: appendFeedItemsCmd,
       fetchContent: fetchContentCmd,
-
-      // Active cell type
-      activeCellType: state.activeCellType,
-
-      // Carousel overlay state
-      currentCarouselItem: state.currentCarouselItem,
-      nextCarouselItem: state.nextCarouselItem,
-      isCarouselActive: state.isCarouselActive,
-      isCarouselTransitioning: state.isCarouselTransitioning,
-
-      // Internal — consumed by ShortKitFeed to pass to OverlayManager
-      _overlayConfig: config.overlay ?? 'none',
-      _carouselOverlayConfig: config.carouselOverlay ?? 'none',
+      preloadFeed: preloadFeedCmd,
+      prefetchStoryboard: prefetchStoryboardCmd,
+      getStoryboardData: getStoryboardDataCmd,
     }),
     [
       state.playerState,
       state.currentItem,
-      state.nextItem,
       state.time,
       state.isMuted,
       state.playbackRate,
@@ -650,16 +474,8 @@ export function ShortKitProvider({
       state.activeCaptionTrack,
       state.activeCue,
       state.prefetchedAheadCount,
-      state.remainingContentCount,
       state.isActive,
-      state.isTransitioning,
-      state.lastOverlayTap,
-      state.lastOverlayDoubleTap,
-      state.activeCellType,
-      state.currentCarouselItem,
-      state.nextCarouselItem,
-      state.isCarouselActive,
-      state.isCarouselTransitioning,
+      state.feedScrollPhase,
       play,
       pause,
       seek,
@@ -674,11 +490,10 @@ export function ShortKitProvider({
       setMaxBitrate,
       setUserIdCmd,
       clearUserIdCmd,
-      setFeedItemsCmd,
-      appendFeedItemsCmd,
       fetchContentCmd,
-      config.overlay,
-      config.carouselOverlay,
+      preloadFeedCmd,
+      prefetchStoryboardCmd,
+      getStoryboardDataCmd,
     ],
   );
 

package/src/index.ts

@@ -4,7 +4,6 @@ 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,21 +19,27 @@ export type {
   ContentItem,
   CarouselImage,
   ImageCarouselItem,
-  CustomFeedItem,
+  FeedInput,
   JSONValue,
   CaptionTrack,
   PlayerTime,
   PlayerState,
   LoopEvent,
   FeedTransitionEvent,
+  FeedScrollPhase,
   FormatChangeEvent,
   ContentSignal,
   SurveyOption,
-  ShortKitError,
+  FeedFilter,
+  CaptionSource,
   ShortKitProviderProps,
   ShortKitFeedProps,
+  ShortKitFeedHandle,
   ShortKitPlayerProps,
   ShortKitWidgetProps,
   ShortKitPlayerState,
+  StoryboardData,
+  StoryboardTile,
 } from './types';
-export type { ShortKitCarouselState } from './useShortKitCarousel';
+export { ShortKitCommands } from './ShortKitCommands';
+export type { OverlayProps, CarouselOverlayProps } from './types';

package/src/serialization.ts

@@ -1,60 +1,40 @@
 import type {
   FeedConfig,
   ContentItem,
-  CustomFeedItem,
+  FeedInput,
   PlayerState,
   PlayerTime,
 } from './types';
 
 /**
- * Serialized FeedConfig with JSON strings for complex fields.
- * Used by ShortKitFeedView native component props.
- */
-export interface SerializedFeedConfig {
-  feedHeight: string;
-  overlay: string;
-  carouselOverlay: string;
-  surveyMode: string;
-  muteOnStart: boolean;
-  feedSource: string;
-}
-
-/**
- * Serialize FeedConfig for the bridge.
+ * Serialize FeedConfig into a JSON string for the native Fabric view prop.
  * Complex union types are JSON-stringified; the `component` field on custom
  * overlays is stripped because React component references cannot cross the bridge.
+ * The overlay `name` is included so native can look up the correct Fabric surface.
  */
-export function serializeFeedConfig(config: FeedConfig): SerializedFeedConfig {
-  let overlay: string;
-  const rawOverlay = config.overlay ?? 'none';
-  if (typeof rawOverlay === 'string') {
-    overlay = JSON.stringify(rawOverlay);
-  } else {
-    // Strip the component ref — it stays on the JS side for OverlayManager
-    overlay = JSON.stringify({ type: 'custom' });
-  }
+export function serializeFeedConfig(config: FeedConfig): string {
+  const overlay = (() => {
+    const raw = config.overlay ?? 'none';
+    if (typeof raw === 'string') return JSON.stringify(raw);
+    return JSON.stringify({ type: 'custom', name: raw.name });
+  })();
 
-  return {
+  const carouselOverlay = (() => {
+    const raw = config.carouselOverlay ?? 'none';
+    if (typeof raw === 'string') return JSON.stringify(raw);
+    return JSON.stringify({ type: 'custom', name: raw.name });
+  })();
+
+  return JSON.stringify({
     feedHeight: JSON.stringify(config.feedHeight ?? { type: 'fullscreen' }),
     overlay,
-    carouselOverlay: (() => {
-      const raw = config.carouselOverlay ?? 'none';
-      if (typeof raw === 'string') return JSON.stringify(raw);
-      return JSON.stringify({ type: 'custom' });
-    })(),
+    carouselOverlay,
     surveyMode: JSON.stringify(config.surveyMode ?? 'none'),
     muteOnStart: config.muteOnStart ?? true,
     feedSource: config.feedSource ?? 'algorithmic',
-  };
-}
-
-/**
- * Serialize a FeedConfig into a single JSON string for the TurboModule
- * `initialize(config:)` parameter.
- */
-export function serializeFeedConfigForModule(config: FeedConfig): string {
-  const serialized = serializeFeedConfig(config);
-  return JSON.stringify(serialized);
+    autoplay: config.autoplay ?? true,
+    filter: config.filter ? JSON.stringify(config.filter) : undefined,
+  });
 }
 
 /**
@@ -102,8 +82,8 @@ export function deserializePlayerTime(event: {
 }
 
 /**
- * Serialize CustomFeedItem[] to a JSON string for the bridge.
+ * Serialize FeedInput[] to a JSON string for the bridge.
  */
-export function serializeCustomFeedItems(items: CustomFeedItem[]): string {
+export function serializeFeedInputs(items: FeedInput[]): string {
   return JSON.stringify(items);
 }