@shortkitsdk/react-native 0.2.11 → 0.2.14

package/src/index.ts

@@ -7,9 +7,11 @@ export { useShortKit } from './useShortKit';
 export type {
   FeedConfig,
   FeedHeight,
+  ScrollAxis,
   FeedSource,
   OverlayConfig,
   CarouselOverlayConfig,
+  VideoCarouselOverlayConfig,
   SurveyMode,
 
   PlayerConfig,
@@ -19,6 +21,7 @@ export type {
   ContentItem,
   CarouselImage,
   ImageCarouselItem,
+  VideoCarouselItem,
   FeedInput,
   JSONValue,
   CaptionTrack,
@@ -42,4 +45,8 @@ export type {
   StoryboardTile,
 } from './types';
 export { ShortKitCommands } from './ShortKitCommands';
-export type { OverlayProps, CarouselOverlayProps } from './types';
+export { default as NativeShortKitModule } from './specs/NativeShortKitModule';
+export { registerOverlayComponent } from './ShortKitOverlaySurface';
+export { registerCarouselOverlayComponent } from './ShortKitCarouselOverlaySurface';
+export { registerVideoCarouselOverlayComponent } from './ShortKitVideoCarouselOverlaySurface';
+export type { OverlayProps, CarouselOverlayProps, VideoCarouselOverlayProps } from './types';

package/src/serialization.ts

@@ -25,10 +25,18 @@ export function serializeFeedConfig(config: FeedConfig): string {
     return JSON.stringify({ type: 'custom', name: raw.name });
   })();
 
+  const videoCarouselOverlay = (() => {
+    const raw = config.videoCarouselOverlay ?? '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' }),
+    scrollAxis: config.scrollAxis ?? 'vertical',
     overlay,
     carouselOverlay,
+    videoCarouselOverlay,
     surveyMode: JSON.stringify(config.surveyMode ?? 'none'),
     muteOnStart: config.muteOnStart ?? true,
     feedSource: config.feedSource ?? 'algorithmic',

package/src/specs/NativeShortKitModule.ts

@@ -108,6 +108,10 @@ type ContentTappedEvent = Readonly<{
   index: Int32;
 }>;
 
+type FeedReadyEvent = Readonly<{
+  feedId: string;
+}>;
+
 // --- Overlay per-surface event payload types ---
 
 type OverlayActiveEvent = Readonly<{
@@ -152,6 +156,28 @@ type OverlayTimeUpdateEvent = Readonly<{
   buffered: Double;
 }>;
 
+type CarouselActiveImageEvent = Readonly<{
+  surfaceId: string;
+  activeImageIndex: Int32;
+}>;
+
+type VideoCarouselActiveVideoEvent = Readonly<{
+  surfaceId: string;
+  activeVideo: string;
+  activeVideoIndex: Int32;
+}>;
+
+type OverlayFullStateEvent = Readonly<{
+  surfaceId: string;
+  isActive: boolean;
+  playerState: string;
+  isMuted: boolean;
+  playbackRate: Double;
+  captionsEnabled: boolean;
+  activeCue: string;
+  feedScrollPhase: string;
+}>;
+
 export interface Spec extends TurboModule {
   // --- Lifecycle ---
   initialize(
@@ -186,7 +212,7 @@ export interface Spec extends TurboModule {
   appendFeedItems(feedId: string, items: string): void;
   fetchContent(limit: Int32, filterJSON: string | null): Promise<string>;
   applyFilter(feedId: string, filterJSON: string | null): void;
-  preloadFeed(configJSON: string): Promise<string>;
+  preloadFeed(configJSON: string, itemsJSON: string | null): Promise<string>;
 
   // --- Storyboard / seek thumbnails ---
   prefetchStoryboard(playbackId: string): void;
@@ -212,6 +238,7 @@ export interface Spec extends TurboModule {
   readonly onDismiss: EventEmitter<DismissEvent>;
   readonly onRefreshRequested: EventEmitter<RefreshRequestedEvent>;
   readonly onDidFetchContentItems: EventEmitter<DidFetchContentItemsEvent>;
+  readonly onFeedReady: EventEmitter<FeedReadyEvent>;
 
   // --- Overlay per-surface events ---
   readonly onOverlayActiveChanged: EventEmitter<OverlayActiveEvent>;
@@ -222,6 +249,9 @@ export interface Spec extends TurboModule {
   readonly onOverlayActiveCueChanged: EventEmitter<OverlayActiveCueEvent>;
   readonly onOverlayFeedScrollPhaseChanged: EventEmitter<OverlayFeedScrollPhaseEvent>;
   readonly onOverlayTimeUpdate: EventEmitter<OverlayTimeUpdateEvent>;
+  readonly onOverlayFullState: EventEmitter<OverlayFullStateEvent>;
+  readonly onCarouselActiveImageChanged: EventEmitter<CarouselActiveImageEvent>;
+  readonly onVideoCarouselActiveVideoChanged: EventEmitter<VideoCarouselActiveVideoEvent>;
 }
 
 export default TurboModuleRegistry.getEnforcing<Spec>('ShortKitModule');

package/src/types.ts

@@ -17,8 +17,10 @@ export type CaptionSource = 'embedded' | 'external' | 'generated';
 
 export interface FeedConfig {
   feedHeight?: FeedHeight;
+  scrollAxis?: ScrollAxis;
   overlay?: OverlayConfig;
   carouselOverlay?: CarouselOverlayConfig;
+  videoCarouselOverlay?: VideoCarouselOverlayConfig;
   surveyMode?: SurveyMode;
   muteOnStart?: boolean;
   feedSource?: FeedSource;
@@ -30,6 +32,8 @@ export type FeedHeight =
   | { type: 'fullscreen' }
   | { type: 'percentage'; value: number };
 
+export type ScrollAxis = 'vertical' | 'horizontal';
+
 export type OverlayConfig =
   | 'none'
   | { type: 'custom'; name: string; component: React.ComponentType<OverlayProps> };
@@ -38,6 +42,10 @@ export type CarouselOverlayConfig =
   | 'none'
   | { type: 'custom'; name: string; component: React.ComponentType<CarouselOverlayProps> };
 
+export type VideoCarouselOverlayConfig =
+  | 'none'
+  | { type: 'custom'; name: string; component: React.ComponentType<VideoCarouselOverlayProps> };
+
 export type SurveyMode =
   | 'none'
   | { type: 'template'; name: 'default' };
@@ -78,9 +86,20 @@ export interface ImageCarouselItem {
   articleUrl?: string;
 }
 
+export interface VideoCarouselItem {
+  id: string;
+  videos: ContentItem[];
+  title?: string;
+  description?: string;
+  author?: string;
+  section?: string;
+  articleUrl?: string;
+}
+
 export type FeedInput =
   | { type: 'video'; playbackId: string; fallbackUrl?: string }
-  | { type: 'imageCarousel'; item: ImageCarouselItem };
+  | { type: 'imageCarousel'; item: ImageCarouselItem }
+  | { type: 'videoCarousel'; item: VideoCarouselItem };
 
 export type JSONValue =
   | string
@@ -192,6 +211,28 @@ export interface OverlayProps {
 export interface CarouselOverlayProps {
   /** The carousel item for this cell. */
   item: ImageCarouselItem;
+  /** Whether this carousel cell is the active (on-screen) cell. */
+  isActive: boolean;
+  /** Index of the currently visible image within the carousel. */
+  activeImageIndex: number;
+}
+
+/** Props passed to video carousel overlay components rendered inside feed cells. */
+export interface VideoCarouselOverlayProps {
+  /** The video carousel item for this cell. */
+  carouselItem: VideoCarouselItem;
+  /** The currently active video within the carousel. */
+  activeVideo: ContentItem;
+  /** Index of the currently active video within the carousel. */
+  activeVideoIndex: number;
+  /** Whether this carousel cell is the active (on-screen) cell. */
+  isActive: boolean;
+  /** Current playback time for the active video. */
+  time: PlayerTime;
+  /** Current player state for the active video. */
+  playerState: PlayerState;
+  /** Whether audio is muted. */
+  isMuted: boolean;
 }
 
 // --- Provider Props ---
@@ -231,6 +272,9 @@ export interface ShortKitFeedProps {
   onDidFetchContentItems?: (items: ContentItem[]) => void;
   /** Called when the number of remaining items in this feed changes. */
   onRemainingContentCountChange?: (count: number) => void;
+  /** Called once when this feed has loaded content and assigned a player
+   *  to the first cell. Use to dismiss a splash screen or loading overlay. */
+  onFeedReady?: () => void;
 }
 
 /**