@shortkitsdk/react-native 0.2.6 → 0.2.12

package/ios/ShortKitSDK.xcframework.bak/ios-arm64-simulator/ShortKitSDK.framework/Modules/module.modulemap

@@ -0,0 +1,4 @@
+framework module ShortKitSDK {
+    header "ShortKitSDK-Swift.h"
+    export *
+}

package/ios/ShortKitWidgetNativeView.swift

@@ -127,9 +127,9 @@ import ShortKitSDK
         if let overlayObj = obj["overlay"] as? [String: Any],
            overlayObj["type"] as? String == "custom" {
             overlayMode = .custom { @Sendable in
-                let overlay = ShortKitOverlayBridge()
-                overlay.bridge = ShortKitBridge.shared
-                return overlay
+                let host = ReactOverlayHost()
+                host.surfacePresenter = ShortKitBridge.shared?.surfacePresenter
+                return host
             }
         } else {
             overlayMode = .none

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shortkitsdk/react-native",
-  "version": "0.2.6",
+  "version": "0.2.12",
   "description": "ShortKit React Native SDK — short-form video feed",
   "react-native": "src/index",
   "source": "src/index",

package/src/ShortKitCarouselOverlaySurface.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import { AppRegistry } from 'react-native';
+import type { CarouselOverlayProps, ImageCarouselItem } from './types';
+
+const _carouselRegistry = new Map<string, React.ComponentType<CarouselOverlayProps>>();
+
+/**
+ * Register a named carousel overlay component for rendering inside feed cells.
+ * Called by ShortKitFeed on mount via useLayoutEffect.
+ * Idempotent — registering the same name twice is a no-op.
+ */
+export function registerCarouselOverlayComponent(
+  name: string,
+  component: React.ComponentType<CarouselOverlayProps>,
+) {
+  if (_carouselRegistry.has(name)) return;
+  _carouselRegistry.set(name, component);
+
+  const moduleName = `ShortKitCarouselOverlay_${name}`;
+  AppRegistry.registerComponent(moduleName, () => {
+    return function NamedCarouselSurface(props: RawCarouselSurfaceProps) {
+      return <CarouselSurfaceInner {...props} overlayName={name} />;
+    };
+  });
+}
+
+interface RawCarouselSurfaceProps {
+  item?: string;
+}
+
+interface InnerProps extends RawCarouselSurfaceProps {
+  overlayName: string;
+}
+
+function CarouselSurfaceInner(props: InnerProps) {
+  const Component = _carouselRegistry.get(props.overlayName);
+  if (!Component) {
+    return null;
+  }
+
+  const item: ImageCarouselItem | null = useMemo(() => {
+    if (!props.item) {
+      return null;
+    }
+    try {
+      return JSON.parse(props.item);
+    } catch {
+      return null;
+    }
+  }, [props.item]);
+
+  if (!item) return null;
+
+  return <Component item={item} />;
+}

package/src/ShortKitCommands.ts

@@ -0,0 +1,31 @@
+import NativeShortKitModule from './specs/NativeShortKitModule';
+
+/**
+ * Imperative player commands for use inside overlay components.
+ *
+ * Overlay components run in isolated React surfaces and cannot access
+ * ShortKitProvider context. Use these commands instead of useShortKitPlayer()
+ * hooks for player control.
+ */
+export const ShortKitCommands = {
+  play: () => NativeShortKitModule?.play(),
+  pause: () => NativeShortKitModule?.pause(),
+  seek: (seconds: number) => NativeShortKitModule?.seek(seconds),
+  seekAndPlay: (seconds: number) => NativeShortKitModule?.seekAndPlay(seconds),
+  skipToNext: () => NativeShortKitModule?.skipToNext(),
+  skipToPrevious: () => NativeShortKitModule?.skipToPrevious(),
+  setMuted: (muted: boolean) => NativeShortKitModule?.setMuted(muted),
+  setPlaybackRate: (rate: number) => NativeShortKitModule?.setPlaybackRate(rate),
+  setCaptionsEnabled: (enabled: boolean) =>
+    NativeShortKitModule?.setCaptionsEnabled(enabled),
+  selectCaptionTrack: (language: string) =>
+    NativeShortKitModule?.selectCaptionTrack(language),
+  sendContentSignal: (signal: 'positive' | 'negative') =>
+    NativeShortKitModule?.sendContentSignal(signal),
+  setMaxBitrate: (bitrate: number) =>
+    NativeShortKitModule?.setMaxBitrate(bitrate),
+  prefetchStoryboard: (playbackId: string) =>
+    NativeShortKitModule?.prefetchStoryboard(playbackId),
+  getStoryboardData: (playbackId: string): Promise<string | null> =>
+    NativeShortKitModule?.getStoryboardData(playbackId) ?? Promise.resolve(null),
+} as const;

package/src/ShortKitContext.ts

@@ -1,15 +1,14 @@
 import { createContext } from 'react';
 import type {
   ContentItem,
-  ImageCarouselItem,
+  FeedConfig,
+  FeedFilter,
   FeedInput,
   PlayerTime,
   PlayerState,
   CaptionTrack,
   FeedScrollPhase,
   ContentSignal,
-  OverlayConfig,
-  CarouselOverlayConfig,
   StoryboardData,
 } from './types';
 
@@ -17,7 +16,6 @@ export interface ShortKitContextValue {
   // Player state
   playerState: PlayerState;
   currentItem: ContentItem | null;
-  nextItem: ContentItem | null;
   time: PlayerTime;
   isMuted: boolean;
   playbackRate: number;
@@ -25,11 +23,8 @@ export interface ShortKitContextValue {
   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;
 
   // Player commands
   play: () => void;
@@ -48,27 +43,14 @@ export interface ShortKitContextValue {
   // SDK operations
   setUserId: (id: string) => void;
   clearUserId: () => void;
-  setFeedItems: (items: FeedInput[]) => void;
-  appendFeedItems: (items: FeedInput[]) => void;
-  fetchContent: (limit?: number) => Promise<ContentItem[]>;
+  fetchContent: (limit?: number, filter?: FeedFilter) => Promise<ContentItem[]>;
+
+  // Preload
+  preloadFeed: (config?: Partial<FeedConfig>, items?: FeedInput[]) => Promise<string>;
 
   // Storyboard / seek thumbnails
   prefetchStoryboard: (playbackId: string) => void;
   getStoryboardData: (playbackId: string) => Promise<StoryboardData | null>;
-
-  // Carousel overlay state
-  currentCarouselItem: ImageCarouselItem | null;
-  nextCarouselItem: ImageCarouselItem | null;
-  isCarouselActive: boolean;
-  currentCarouselPage: number;
-  // Active cell type — used by overlay managers to show/hide
-  activeCellType: 'video' | 'carousel' | null;
-
-  // Internal — used by ShortKitFeed to render custom overlays
-  /** @internal */
-  _overlayConfig: OverlayConfig;
-  /** @internal */
-  _carouselOverlayConfig: CarouselOverlayConfig;
 }
 
 export const ShortKitContext = createContext<ShortKitContextValue | null>(null);

package/src/ShortKitFeed.tsx

@@ -1,36 +1,47 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, forwardRef } from 'react';
 import { View, StyleSheet } from 'react-native';
-import type { ShortKitFeedProps } from './types';
+import type { ShortKitFeedProps, FeedInput, FeedFilter, ShortKitFeedHandle } from './types';
 import ShortKitFeedView from './specs/ShortKitFeedViewNativeComponent';
 import NativeShortKitModule from './specs/NativeShortKitModule';
-import { OverlayManager } from './OverlayManager';
-import { CarouselOverlayManager } from './CarouselOverlayManager';
 import { ShortKitContext } from './ShortKitContext';
-import { deserializeContentItem } from './serialization';
+import { deserializeContentItem, serializeFeedConfig, serializeFeedInputs } from './serialization';
+import { registerOverlayComponent } from './ShortKitOverlaySurface';
+import { registerCarouselOverlayComponent } from './ShortKitCarouselOverlaySurface';
+
+function generateFeedId(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
 
 /**
  * Renders the native ShortKit video feed and forwards feed-level events to
  * callback props.
  *
- * Must be rendered inside a `<ShortKitProvider>`. The native feed view
- * receives its configuration from the `NativeShortKitModule.initialize()` call
- * made by the provider, so the view props here are placeholders required by
- * the Fabric codegen contract.
- *
- * When the overlay config is of type `custom`, the `OverlayManager` is
- * rendered alongside the native view to display the developer's React overlay
- * component.
+ * Must be rendered inside a `<ShortKitProvider>`. Feed configuration is passed
+ * via the `config` prop. Custom overlay components are registered with
+ * AppRegistry via the named overlay registry and mounted directly by native
+ * per-cell RCTFabricSurface instances.
  */
-export function ShortKitFeed(props: ShortKitFeedProps) {
+export const ShortKitFeed = forwardRef<ShortKitFeedHandle, ShortKitFeedProps>(
+  function ShortKitFeed(props, ref) {
   const {
+    config,
+    preloadId,
     style,
-    onError,
-    onShareTapped,
+    startAtItemId,
     onSurveyResponse,
     onLoop,
     onFeedTransition,
     onFormatChange,
     onContentTapped,
+    onDismiss,
+    onRefreshRequested,
+    onDidFetchContentItems,
+    onRemainingContentCountChange,
+    onFeedReady,
   } = props;
 
   const context = useContext(ShortKitContext);
@@ -38,8 +49,66 @@ export function ShortKitFeed(props: ShortKitFeedProps) {
     throw new Error('ShortKitFeed must be used within a ShortKitProvider');
   }
 
-  const overlayConfig = context._overlayConfig;
-  const carouselOverlayConfig = context._carouselOverlayConfig;
+  // Stable feed instance ID — survives re-renders and React fast refresh
+  const feedIdRef = useRef(generateFeedId());
+  const feedId = feedIdRef.current;
+
+  // Expose per-feed imperative methods on the ref
+  useImperativeHandle(ref, () => ({
+    setFeedItems: (items: FeedInput[]) => {
+      NativeShortKitModule?.setFeedItems(feedId, serializeFeedInputs(items));
+    },
+    appendFeedItems: (items: FeedInput[]) => {
+      NativeShortKitModule?.appendFeedItems(feedId, serializeFeedInputs(items));
+    },
+    applyFilter: (filter: FeedFilter | null) => {
+      NativeShortKitModule?.applyFilter(feedId, filter ? JSON.stringify(filter) : null);
+    },
+  }), [feedId]);
+
+  // Subscribe to per-feed remaining content count events
+  useEffect(() => {
+    if (!NativeShortKitModule || !onRemainingContentCountChange) return;
+
+    const subscription = NativeShortKitModule.onRemainingContentCountChanged((event) => {
+      // Match by feedId, or accept empty feedId as fallback (Android global routing)
+      if (event.feedId === feedId || event.feedId === '') {
+        onRemainingContentCountChange(event.count);
+      }
+    });
+
+    return () => subscription.remove();
+  }, [feedId, onRemainingContentCountChange]);
+
+  // Subscribe to per-feed ready event
+  useEffect(() => {
+    if (!NativeShortKitModule || !onFeedReady) return;
+
+    const subscription = NativeShortKitModule.onFeedReady((event) => {
+      if (event.feedId === feedId) {
+        onFeedReady();
+      }
+    });
+
+    return () => subscription.remove();
+  }, [feedId, onFeedReady]);
+
+  // Register overlay components before native view mounts.
+  // useLayoutEffect fires after commit but before paint — before
+  // didMoveToWindow/onAttachedToWindow on the native view.
+  useLayoutEffect(() => {
+    if (config?.overlay && config.overlay !== 'none') {
+      registerOverlayComponent(config.overlay.name, config.overlay.component);
+    }
+    if (config?.carouselOverlay && config.carouselOverlay !== 'none') {
+      registerCarouselOverlayComponent(config.carouselOverlay.name, config.carouselOverlay.component);
+    }
+  }, [config?.overlay, config?.carouselOverlay]);
+
+  const serializedConfig = useMemo(
+    () => (config ? serializeFeedConfig(config) : '{}'),
+    [config],
+  );
 
   // ---------------------------------------------------------------------------
   // Subscribe to feed-level events and forward to callback props
@@ -49,23 +118,6 @@ export function ShortKitFeed(props: ShortKitFeedProps) {
 
     const subscriptions: Array<{ remove: () => void }> = [];
 
-    if (onError) {
-      subscriptions.push(
-        NativeShortKitModule.onError((event) => {
-          onError({ code: event.code, message: event.message });
-        }),
-      );
-    }
-
-    if (onShareTapped) {
-      subscriptions.push(
-        NativeShortKitModule.onShareTapped((event) => {
-          const item = deserializeContentItem(event.item);
-          if (item) onShareTapped(item);
-        }),
-      );
-    }
-
     if (onSurveyResponse) {
       subscriptions.push(
         NativeShortKitModule.onSurveyResponse((event) => {
@@ -120,19 +172,49 @@ export function ShortKitFeed(props: ShortKitFeedProps) {
       );
     }
 
+    if (onDismiss) {
+      subscriptions.push(
+        NativeShortKitModule.onDismiss(() => {
+          onDismiss();
+        }),
+      );
+    }
+
+    if (onRefreshRequested) {
+      subscriptions.push(
+        NativeShortKitModule.onRefreshRequested(() => {
+          onRefreshRequested();
+        }),
+      );
+    }
+
+    if (onDidFetchContentItems) {
+      subscriptions.push(
+        NativeShortKitModule.onDidFetchContentItems((event) => {
+          try {
+            const items = JSON.parse(event.items);
+            onDidFetchContentItems(items);
+          } catch {
+            // ignore malformed JSON
+          }
+        }),
+      );
+    }
+
     return () => {
       for (const sub of subscriptions) {
         sub.remove();
       }
     };
   }, [
-    onError,
-    onShareTapped,
     onSurveyResponse,
     onLoop,
     onFeedTransition,
     onFormatChange,
     onContentTapped,
+    onDismiss,
+    onRefreshRequested,
+    onDidFetchContentItems,
   ]);
 
   // ---------------------------------------------------------------------------
@@ -142,13 +224,14 @@ export function ShortKitFeed(props: ShortKitFeedProps) {
     <View style={[feedStyles.container, style]}>
       <ShortKitFeedView
         style={feedStyles.feed}
-        config="{}"
+        config={serializedConfig}
+        feedId={feedId}
+        startAtItemId={startAtItemId}
+        preloadId={preloadId}
       />
-      <OverlayManager overlay={overlayConfig} />
-      <CarouselOverlayManager carouselOverlay={carouselOverlayConfig} />
     </View>
   );
-}
+});
 
 const feedStyles = StyleSheet.create({
   container: {

package/src/ShortKitLoadingSurface.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { AppRegistry, View, StyleSheet } from 'react-native';
+
+const SURFACE_NAME = 'ShortKitLoading';
+let registered = false;
+
+export function registerLoadingComponent(
+  Component: React.ComponentType<{}>,
+): void {
+  if (registered) return;
+  registered = true;
+
+  const LoadingRoot = () => (
+    <View style={styles.container}>
+      <Component />
+    </View>
+  );
+
+  AppRegistry.registerComponent(SURFACE_NAME, () => LoadingRoot);
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});