@shortkitsdk/react-native 0.2.6 → 0.2.11

package/src/ShortKitProvider.tsx

@@ -6,8 +6,8 @@ import type { ShortKitContextValue } from './ShortKitContext';
 import type {
   ShortKitProviderProps,
   ContentItem,
-  ImageCarouselItem,
-  FeedInput,
+  FeedConfig,
+  FeedFilter,
   PlayerTime,
   PlayerState,
   CaptionTrack,
@@ -16,13 +16,13 @@ import type {
   StoryboardData,
 } from './types';
 import {
-  serializeFeedConfigForModule,
-  serializeFeedInputs,
+  serializeFeedConfig,
   deserializePlayerState,
   deserializeContentItem,
   deserializePlayerTime,
 } from './serialization';
 import NativeShortKitModule from './specs/NativeShortKitModule';
+import { registerLoadingComponent } from './ShortKitLoadingSurface';
 
 // ---------------------------------------------------------------------------
 // State & Reducer
@@ -31,7 +31,6 @@ import NativeShortKitModule from './specs/NativeShortKitModule';
 interface State {
   playerState: PlayerState;
   currentItem: ContentItem | null;
-  nextItem: ContentItem | null;
   time: PlayerTime;
   isMuted: boolean;
   playbackRate: number;
@@ -39,22 +38,13 @@ interface State {
   activeCaptionTrack: CaptionTrack | null;
   activeCue: { text: string; startTime: number; endTime: number } | null;
   prefetchedAheadCount: number;
-  remainingContentCount: number;
   isActive: boolean;
   feedScrollPhase: FeedScrollPhase | null;
-  lastOverlayTap: number;
-  lastOverlayDoubleTap: { x: number; y: number; id: number } | null;
-  currentCarouselItem: ImageCarouselItem | null;
-  nextCarouselItem: ImageCarouselItem | null;
-  isCarouselActive: boolean;
-  currentCarouselPage: number;
-  activeCellType: 'video' | 'carousel' | null;
 }
 
 const initialState: State = {
   playerState: 'idle',
   currentItem: null,
-  nextItem: null,
   time: { current: 0, duration: 0, buffered: 0 },
   isMuted: true,
   playbackRate: 1.0,
@@ -62,16 +52,8 @@ const initialState: State = {
   activeCaptionTrack: null,
   activeCue: null,
   prefetchedAheadCount: 0,
-  remainingContentCount: 0,
   isActive: false,
   feedScrollPhase: null,
-  lastOverlayTap: 0,
-  lastOverlayDoubleTap: null,
-  currentCarouselItem: null,
-  nextCarouselItem: null,
-  isCarouselActive: false,
-  currentCarouselPage: 0,
-  activeCellType: null,
 };
 
 type Action =
@@ -84,38 +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_TAP' }
-  | { type: 'OVERLAY_DOUBLE_TAP'; payload: { x: number; y: number } }
-  | { type: 'ACTIVE_CELL_TYPE'; payload: 'video' | 'carousel' | null }
-  | { type: 'FEED_TRANSITION_ENDED'; payload: { isVideo: boolean } }
-  | { type: 'CAROUSEL_OVERLAY_CONFIGURE'; payload: ImageCarouselItem }
-  | { type: 'CAROUSEL_OVERLAY_ACTIVATE'; payload: ImageCarouselItem }
-  | { type: 'CAROUSEL_OVERLAY_RESET' }
-  | { type: 'CAROUSEL_PAGE_CHANGED'; payload: number }
   | { 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':
@@ -134,84 +98,6 @@ 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':
-      // Clear nextItem so overlay-next doesn't show stale data from the
-      // handleSwipe re-configure. The next OVERLAY_CONFIGURE (from UIKit
-      // prefetching cell N+2) will set it to the correct upcoming item.
-      // Also clear carousel state — a video cell is now active.
-      console.log('[ShortKitProvider] OVERLAY_ACTIVATE (video):', action.payload.playbackId);
-      return {
-        ...state,
-        currentItem: action.payload,
-        isActive: true,
-        time: { current: 0, duration: action.payload.duration ?? 0, buffered: 0 },
-        nextItem: null,
-        currentCarouselItem: null,
-        isCarouselActive: false,
-        nextCarouselItem: null,
-        currentCarouselPage: 0,
-      };
-    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.
-      console.log('[ShortKitProvider] OVERLAY_RESET (video)');
-      return { ...state, feedScrollPhase: null };
-    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':
-      console.log('[ShortKitProvider] ACTIVE_CELL_TYPE:', action.payload);
-      return { ...state, activeCellType: action.payload };
-    case 'FEED_TRANSITION_ENDED': {
-      if (action.payload.isVideo) {
-        return {
-          ...state,
-          activeCellType: 'video',
-          currentCarouselItem: null,
-          isCarouselActive: false,
-          nextCarouselItem: null,
-          currentCarouselPage: 0,
-        };
-      }
-      // Non-video destination. If a carousel configure was received, activate it.
-      if (state.nextCarouselItem) {
-        console.log('[ShortKitProvider] FEED_TRANSITION_ENDED → carousel activate:', state.nextCarouselItem.id);
-        return {
-          ...state,
-          activeCellType: 'carousel',
-          currentCarouselItem: state.nextCarouselItem,
-          isCarouselActive: true,
-          nextCarouselItem: null,
-        };
-      }
-      // Unknown non-video type (survey, ad, etc.)
-      return { ...state, activeCellType: null };
-    }
-    case 'CAROUSEL_OVERLAY_CONFIGURE':
-      console.log('[ShortKitProvider] CAROUSEL_OVERLAY_CONFIGURE:', action.payload.id);
-      return { ...state, nextCarouselItem: action.payload };
-    case 'CAROUSEL_OVERLAY_ACTIVATE':
-      console.log('[ShortKitProvider] CAROUSEL_OVERLAY_ACTIVATE:', action.payload.id);
-      return { ...state, currentCarouselItem: action.payload, isCarouselActive: true, nextCarouselItem: null };
-    case 'CAROUSEL_OVERLAY_RESET':
-      console.log('[ShortKitProvider] CAROUSEL_OVERLAY_RESET');
-      return { ...state, currentCarouselItem: null, isCarouselActive: false, nextCarouselItem: null, currentCarouselPage: 0 };
-    case 'CAROUSEL_PAGE_CHANGED':
-      return { ...state, currentCarouselPage: action.payload };
     case 'FEED_SCROLL_PHASE':
       return { ...state, feedScrollPhase: action.payload };
     default:
@@ -225,11 +111,11 @@ function reducer(state: State, action: Action): State {
 
 export function ShortKitProvider({
   apiKey,
-  config,
   userId,
   clientAppName,
   clientAppVersion,
   customDimensions,
+  loadingViewComponent,
   children,
 }: ShortKitProviderProps): React.JSX.Element {
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -241,14 +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,
+      !!loadingViewComponent,
       clientAppName,
       clientAppVersion,
       serializedDimensions,
@@ -341,6 +230,7 @@ export function ShortKitProvider({
           author: event.author,
           articleUrl: event.articleUrl,
           commentCount: event.commentCount,
+          fallbackUrl: event.fallbackUrl,
         };
         dispatch({ type: 'CURRENT_ITEM', payload: item });
       }),
@@ -409,96 +299,11 @@ 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 });
-        }
-      }),
-    );
-
-    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' });
-      }),
-    );
-
-    // 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 },
-        });
-      }),
-    );
-
-    // Feed transition — track active cell type
-    subscriptions.push(
-      NativeShortKitModule.onFeedTransition((event) => {
-        console.log('[ShortKitProvider] onFeedTransition:', event.phase, 'toItem:', event.toItem != null ? 'video' : 'non-video');
-        if (event.phase === 'ended') {
-          // toItem is null when the destination cell is non-video (carousel, survey, ad).
-          // The reducer checks nextCarouselItem to distinguish carousel from other types.
-          const isVideo = event.toItem != null;
-          dispatch({
-            type: 'FEED_TRANSITION_ENDED',
-            payload: { isVideo },
-          });
-        }
-      }),
-    );
-
-    // 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
-        }
-      }),
-    );
-
+    // Feed transition
     subscriptions.push(
-      NativeShortKitModule.onCarouselOverlayReset((_event) => {
-        dispatch({ type: 'CAROUSEL_OVERLAY_RESET' });
+      NativeShortKitModule.onFeedTransition((_event) => {
+        // Feed transition events are consumed by ShortKitFeed callback props.
+        // No state to update here in the simplified provider.
       }),
     );
 
@@ -520,7 +325,7 @@ export function ShortKitProvider({
     );
 
     // Note: Feed-level callback events (onDidLoop, onFeedTransition,
-    // onShareTapped, etc.) are subscribed by the ShortKitFeed component
+    // onDismiss, etc.) are subscribed by the ShortKitFeed component
     // not here. The provider only manages state-driving events.
 
     return () => {
@@ -530,40 +335,6 @@ export function ShortKitProvider({
     };
   }, []);
 
-  // -----------------------------------------------------------------------
-  // Overlay ready signal — tell native it's safe to swap overlay transforms.
-  // This fires after React has re-rendered overlay-current with the new
-  // content item (and the overlay component has reset its opacity).
-  // Child effects (e.g. NewsOverlay's content-change reset) fire before
-  // this parent effect, guaranteeing the overlay is visually ready.
-  // -----------------------------------------------------------------------
-  const currentItemIdRef = useRef<string | null>(null);
-  useEffect(() => {
-    const newId = state.currentItem?.id ?? null;
-    if (newId && newId !== currentItemIdRef.current) {
-      currentItemIdRef.current = newId;
-      NativeShortKitModule?.notifyOverlayReady();
-    }
-  }, [state.currentItem?.id]);
-
-  // Carousel overlay ready signal — same mechanism as video overlays.
-  const currentCarouselIdRef = useRef<string | null>(null);
-  useEffect(() => {
-    const newId = state.currentCarouselItem?.id ?? null;
-    if (newId && newId !== currentCarouselIdRef.current) {
-      currentCarouselIdRef.current = newId;
-      NativeShortKitModule?.notifyOverlayReady();
-    }
-  }, [state.currentCarouselItem?.id]);
-
-  // Safety net: if a carousel configure arrives before any feed transition
-  // (e.g. the feed starts on a carousel cell), activate after one render cycle.
-  useEffect(() => {
-    if (state.nextCarouselItem && !state.currentCarouselItem && !state.activeCellType) {
-      dispatch({ type: 'CAROUSEL_OVERLAY_ACTIVATE', payload: state.nextCarouselItem });
-    }
-  }, [state.nextCarouselItem, state.currentCarouselItem, state.activeCellType]);
-
   // -----------------------------------------------------------------------
   // Commands (stable refs)
   // -----------------------------------------------------------------------
@@ -623,17 +394,10 @@ export function ShortKitProvider({
     NativeShortKitModule?.clearUserId();
   }, []);
 
-  const setFeedItemsCmd = useCallback((items: FeedInput[]) => {
-    NativeShortKitModule?.setFeedItems(serializeFeedInputs(items));
-  }, []);
-
-  const appendFeedItemsCmd = useCallback((items: FeedInput[]) => {
-    NativeShortKitModule?.appendFeedItems(serializeFeedInputs(items));
-  }, []);
-
-  const fetchContentCmd = useCallback(async (limit: number = 10): Promise<ContentItem[]> => {
+  const fetchContentCmd = useCallback(async (limit: number = 10, filter?: FeedFilter): Promise<ContentItem[]> => {
     if (!NativeShortKitModule) return [];
-    const json = await NativeShortKitModule.fetchContent(limit);
+    const filterJSON = filter ? JSON.stringify(filter) : null;
+    const json = await NativeShortKitModule.fetchContent(limit, filterJSON);
     try {
       return JSON.parse(json) as ContentItem[];
     } catch {
@@ -656,6 +420,12 @@ export function ShortKitProvider({
     }
   }, []);
 
+  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)
   // -----------------------------------------------------------------------
@@ -664,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,
@@ -672,11 +441,8 @@ export function ShortKitProvider({
       activeCaptionTrack: state.activeCaptionTrack,
       activeCue: state.activeCue,
       prefetchedAheadCount: state.prefetchedAheadCount,
-      remainingContentCount: state.remainingContentCount,
       isActive: state.isActive,
       feedScrollPhase: state.feedScrollPhase,
-      lastOverlayTap: state.lastOverlayTap,
-      lastOverlayDoubleTap: state.lastOverlayDoubleTap,
 
       // Commands
       play,
@@ -693,28 +459,14 @@ export function ShortKitProvider({
       setMaxBitrate,
       setUserId: setUserIdCmd,
       clearUserId: clearUserIdCmd,
-      setFeedItems: setFeedItemsCmd,
-      appendFeedItems: appendFeedItemsCmd,
       fetchContent: fetchContentCmd,
+      preloadFeed: preloadFeedCmd,
       prefetchStoryboard: prefetchStoryboardCmd,
       getStoryboardData: getStoryboardDataCmd,
-
-      // Active cell type
-      activeCellType: state.activeCellType,
-
-      // Carousel overlay state
-      currentCarouselItem: state.currentCarouselItem,
-      nextCarouselItem: state.nextCarouselItem,
-      isCarouselActive: state.isCarouselActive,
-      currentCarouselPage: state.currentCarouselPage,
-      // Internal — consumed by ShortKitFeed to pass to OverlayManager
-      _overlayConfig: config.overlay ?? 'none',
-      _carouselOverlayConfig: config.carouselOverlay ?? 'none',
     }),
     [
       state.playerState,
       state.currentItem,
-      state.nextItem,
       state.time,
       state.isMuted,
       state.playbackRate,
@@ -722,16 +474,8 @@ export function ShortKitProvider({
       state.activeCaptionTrack,
       state.activeCue,
       state.prefetchedAheadCount,
-      state.remainingContentCount,
       state.isActive,
       state.feedScrollPhase,
-      state.lastOverlayTap,
-      state.lastOverlayDoubleTap,
-      state.activeCellType,
-      state.currentCarouselItem,
-      state.nextCarouselItem,
-      state.isCarouselActive,
-      state.currentCarouselPage,
       play,
       pause,
       seek,
@@ -746,13 +490,10 @@ export function ShortKitProvider({
       setMaxBitrate,
       setUserIdCmd,
       clearUserIdCmd,
-      setFeedItemsCmd,
-      appendFeedItemsCmd,
       fetchContentCmd,
+      preloadFeedCmd,
       prefetchStoryboardCmd,
       getStoryboardDataCmd,
-      config.overlay,
-      config.carouselOverlay,
     ],
   );
 

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,
@@ -31,13 +30,16 @@ export type {
   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

@@ -7,54 +7,34 @@ import type {
 } 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,
+  });
 }
 
 /**