@shortkitsdk/react-native 0.2.0 → 0.2.1

package/src/ShortKitProvider.tsx

@@ -6,6 +6,7 @@ import type { ShortKitContextValue } from './ShortKitContext';
 import type {
   ShortKitProviderProps,
   ContentItem,
+  CustomFeedItem,
   PlayerTime,
   PlayerState,
   CaptionTrack,
@@ -13,6 +14,7 @@ import type {
 } from './types';
 import {
   serializeFeedConfigForModule,
+  serializeCustomFeedItems,
   deserializePlayerState,
   deserializeContentItem,
   deserializePlayerTime,
@@ -34,6 +36,7 @@ interface State {
   activeCaptionTrack: CaptionTrack | null;
   activeCue: { text: string; startTime: number; endTime: number } | null;
   prefetchedAheadCount: number;
+  remainingContentCount: number;
   isActive: boolean;
   isTransitioning: boolean;
   lastOverlayTap: number;
@@ -51,6 +54,7 @@ const initialState: State = {
   activeCaptionTrack: null,
   activeCue: null,
   prefetchedAheadCount: 0,
+  remainingContentCount: 0,
   isActive: false,
   isTransitioning: false,
   lastOverlayTap: 0,
@@ -67,6 +71,7 @@ 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' }
@@ -108,6 +113,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':
@@ -145,6 +152,7 @@ function reducer(state: State, action: Action): State {
 export function ShortKitProvider({
   apiKey,
   config,
+  embedId,
   userId,
   clientAppName,
   clientAppVersion,
@@ -168,6 +176,7 @@ export function ShortKitProvider({
     NativeShortKitModule.initialize(
       apiKey,
       serializedConfig,
+      embedId,
       clientAppName,
       clientAppVersion,
       serializedDimensions,
@@ -245,6 +254,7 @@ export function ShortKitProvider({
       NativeShortKitModule.onCurrentItemChanged((event) => {
         const item: ContentItem = {
           id: event.id,
+          playbackId: event.playbackId,
           title: event.title,
           description: event.description,
           duration: event.duration,
@@ -327,6 +337,13 @@ 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) => {
@@ -450,6 +467,24 @@ export function ShortKitProvider({
     NativeShortKitModule?.clearUserId();
   }, []);
 
+  const setFeedItemsCmd = useCallback((items: CustomFeedItem[]) => {
+    NativeShortKitModule?.setFeedItems(serializeCustomFeedItems(items));
+  }, []);
+
+  const appendFeedItemsCmd = useCallback((items: CustomFeedItem[]) => {
+    NativeShortKitModule?.appendFeedItems(serializeCustomFeedItems(items));
+  }, []);
+
+  const fetchContentCmd = useCallback(async (limit: number = 10): Promise<ContentItem[]> => {
+    if (!NativeShortKitModule) return [];
+    const json = await NativeShortKitModule.fetchContent(limit);
+    try {
+      return JSON.parse(json) as ContentItem[];
+    } catch {
+      return [];
+    }
+  }, []);
+
   // -----------------------------------------------------------------------
   // Context value (memoized to avoid unnecessary re-renders)
   // -----------------------------------------------------------------------
@@ -466,6 +501,7 @@ export function ShortKitProvider({
       activeCaptionTrack: state.activeCaptionTrack,
       activeCue: state.activeCue,
       prefetchedAheadCount: state.prefetchedAheadCount,
+      remainingContentCount: state.remainingContentCount,
       isActive: state.isActive,
       isTransitioning: state.isTransitioning,
       lastOverlayTap: state.lastOverlayTap,
@@ -486,6 +522,9 @@ export function ShortKitProvider({
       setMaxBitrate,
       setUserId: setUserIdCmd,
       clearUserId: clearUserIdCmd,
+      setFeedItems: setFeedItemsCmd,
+      appendFeedItems: appendFeedItemsCmd,
+      fetchContent: fetchContentCmd,
 
       // Internal — consumed by ShortKitFeed to pass to OverlayManager
       _overlayConfig: config.overlay ?? 'none',
@@ -501,6 +540,7 @@ export function ShortKitProvider({
       state.activeCaptionTrack,
       state.activeCue,
       state.prefetchedAheadCount,
+      state.remainingContentCount,
       state.isActive,
       state.isTransitioning,
       state.lastOverlayTap,
@@ -519,6 +559,9 @@ export function ShortKitProvider({
       setMaxBitrate,
       setUserIdCmd,
       clearUserIdCmd,
+      setFeedItemsCmd,
+      appendFeedItemsCmd,
+      fetchContentCmd,
       config.overlay,
     ],
   );

package/src/ShortKitWidget.tsx

@@ -0,0 +1,63 @@
+import React, { useContext, useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { ShortKitWidgetProps } from './types';
+import ShortKitWidgetView from './specs/ShortKitWidgetViewNativeComponent';
+import { ShortKitContext } from './ShortKitContext';
+
+/**
+ * Horizontal carousel widget component. Displays a row of video cards
+ * with automatic rotation. Wraps a native Fabric view.
+ *
+ * Must be rendered inside a `<ShortKitProvider>`.
+ */
+export function ShortKitWidget(props: ShortKitWidgetProps) {
+  const { config, items, style } = props;
+
+  const context = useContext(ShortKitContext);
+  if (!context) {
+    throw new Error('ShortKitWidget must be used within a ShortKitProvider');
+  }
+
+  const serializedConfig = useMemo(() => {
+    const cfg = config ?? {};
+    return JSON.stringify({
+      cardCount: cfg.cardCount ?? 3,
+      cardSpacing: cfg.cardSpacing ?? 8,
+      cornerRadius: cfg.cornerRadius ?? 12,
+      autoplay: cfg.autoplay ?? true,
+      muteOnStart: cfg.muteOnStart ?? true,
+      loop: cfg.loop ?? true,
+      rotationInterval: cfg.rotationInterval ?? 10000,
+      clickAction: cfg.clickAction ?? 'feed',
+      overlay: cfg.overlay
+        ? typeof cfg.overlay === 'string'
+          ? cfg.overlay
+          : { type: 'custom' }
+        : 'none',
+    });
+  }, [config]);
+
+  const serializedItems = useMemo(() => {
+    if (!items || items.length === 0) return undefined;
+    return JSON.stringify(items);
+  }, [items]);
+
+  return (
+    <View style={[styles.container, style]}>
+      <ShortKitWidgetView
+        style={styles.widget}
+        config={serializedConfig}
+        items={serializedItems}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  widget: {
+    flex: 1,
+  },
+});

package/src/index.ts

@@ -1,15 +1,25 @@
 export { ShortKitProvider } from './ShortKitProvider';
 export { ShortKitFeed } from './ShortKitFeed';
+export { ShortKitPlayer } from './ShortKitPlayer';
+export { ShortKitWidget } from './ShortKitWidget';
 export { useShortKitPlayer } from './useShortKitPlayer';
 export { useShortKit } from './useShortKit';
 export type {
   FeedConfig,
   FeedHeight,
+  FeedSource,
   OverlayConfig,
   CarouselMode,
   SurveyMode,
 
+  PlayerConfig,
+  PlayerClickAction,
+  WidgetConfig,
+
   ContentItem,
+  CarouselImage,
+  ImageCarouselItem,
+  CustomFeedItem,
   JSONValue,
   CaptionTrack,
   PlayerTime,
@@ -22,5 +32,7 @@ export type {
   ShortKitError,
   ShortKitProviderProps,
   ShortKitFeedProps,
+  ShortKitPlayerProps,
+  ShortKitWidgetProps,
   ShortKitPlayerState,
 } from './types';

package/src/serialization.ts

@@ -1,6 +1,7 @@
 import type {
   FeedConfig,
   ContentItem,
+  CustomFeedItem,
   PlayerState,
   PlayerTime,
 } from './types';
@@ -15,6 +16,7 @@ export interface SerializedFeedConfig {
   carouselMode: string;
   surveyMode: string;
   muteOnStart: boolean;
+  feedSource: string;
 }
 
 /**
@@ -38,6 +40,7 @@ export function serializeFeedConfig(config: FeedConfig): SerializedFeedConfig {
     carouselMode: JSON.stringify(config.carouselMode ?? 'none'),
     surveyMode: JSON.stringify(config.surveyMode ?? 'none'),
     muteOnStart: config.muteOnStart ?? true,
+    feedSource: config.feedSource ?? 'algorithmic',
   };
 }
 
@@ -93,3 +96,10 @@ export function deserializePlayerTime(event: {
     buffered: event.buffered,
   };
 }
+
+/**
+ * Serialize CustomFeedItem[] to a JSON string for the bridge.
+ */
+export function serializeCustomFeedItems(items: CustomFeedItem[]): string {
+  return JSON.stringify(items);
+}

package/src/specs/NativeShortKitModule.ts

@@ -11,6 +11,7 @@ type PlayerStateEvent = Readonly<{
 
 type CurrentItemEvent = Readonly<{
   id: string;
+  playbackId?: string;
   title: string;
   description?: string;
   duration: Double;
@@ -77,6 +78,10 @@ type PrefetchedAheadCountEvent = Readonly<{
   count: Int32;
 }>;
 
+type RemainingContentCountEvent = Readonly<{
+  count: Int32;
+}>;
+
 type ErrorEvent = Readonly<{
   code: string;
   message: string;
@@ -112,6 +117,11 @@ type OverlayRestoreEvent = Readonly<{
   item: string; // JSON-serialized ContentItem
 }>;
 
+type ContentTappedEvent = Readonly<{
+  contentId: string;
+  index: Int32;
+}>;
+
 type OverlayTapEvent = Readonly<{}>;
 
 type OverlayDoubleTapEvent = Readonly<{
@@ -124,6 +134,7 @@ export interface Spec extends TurboModule {
   initialize(
     apiKey: string,
     config: string, // JSON-serialized FeedConfig
+    embedId?: string,
     clientAppName?: string,
     clientAppVersion?: string,
     customDimensions?: string, // JSON-serialized Record<string, string>
@@ -148,6 +159,11 @@ export interface Spec extends TurboModule {
   sendContentSignal(signal: string): void;
   setMaxBitrate(bitrate: Double): void;
 
+  // --- Custom feed ---
+  setFeedItems(items: string): void;
+  appendFeedItems(items: string): void;
+  fetchContent(limit: Int32): Promise<string>;
+
   // --- Event emitters ---
   readonly onPlayerStateChanged: EventEmitter<PlayerStateEvent>;
   readonly onCurrentItemChanged: EventEmitter<CurrentItemEvent>;
@@ -161,6 +177,7 @@ export interface Spec extends TurboModule {
   readonly onFeedTransition: EventEmitter<FeedTransitionEvent>;
   readonly onFormatChange: EventEmitter<FormatChangeEvent>;
   readonly onPrefetchedAheadCountChanged: EventEmitter<PrefetchedAheadCountEvent>;
+  readonly onRemainingContentCountChanged: EventEmitter<RemainingContentCountEvent>;
   readonly onError: EventEmitter<ErrorEvent>;
   readonly onShareTapped: EventEmitter<ShareTappedEvent>;
   readonly onSurveyResponse: EventEmitter<SurveyResponseEvent>;
@@ -171,6 +188,7 @@ export interface Spec extends TurboModule {
   readonly onOverlayRestore: EventEmitter<OverlayRestoreEvent>;
   readonly onOverlayTap: EventEmitter<OverlayTapEvent>;
   readonly onOverlayDoubleTap: EventEmitter<OverlayDoubleTapEvent>;
+  readonly onContentTapped: EventEmitter<ContentTappedEvent>;
 }
 
 export default TurboModuleRegistry.getEnforcing<Spec>('ShortKitModule');

package/src/specs/ShortKitPlayerViewNativeComponent.ts

@@ -0,0 +1,13 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  config: string;
+  contentItem?: string;
+  active?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'ShortKitPlayerView',
+  {},
+) as HostComponent<NativeProps>;

package/src/specs/ShortKitWidgetViewNativeComponent.ts

@@ -0,0 +1,12 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  config: string;
+  items?: string;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'ShortKitWidgetView',
+  {},
+) as HostComponent<NativeProps>;

package/src/types.ts

@@ -2,12 +2,15 @@ import type { ViewStyle } from 'react-native';
 
 // --- Configuration ---
 
+export type FeedSource = 'algorithmic' | 'custom';
+
 export interface FeedConfig {
   feedHeight?: FeedHeight;
   overlay?: OverlayConfig;
   carouselMode?: CarouselMode;
   surveyMode?: SurveyMode;
   muteOnStart?: boolean;
+  feedSource?: FeedSource;
 }
 
 export type FeedHeight =
@@ -30,6 +33,7 @@ export type SurveyMode =
 
 export interface ContentItem {
   id: string;
+  playbackId?: string;
   title: string;
   description?: string;
   duration: number;
@@ -42,6 +46,29 @@ export interface ContentItem {
   commentCount?: number;
 }
 
+// --- Custom Feed Types ---
+
+export interface CarouselImage {
+  url: string;
+  alt?: string;
+}
+
+export interface ImageCarouselItem {
+  id: string;
+  images: CarouselImage[];
+  autoScrollInterval?: number;
+  caption?: string;
+  title?: string;
+  description?: string;
+  author?: string;
+  section?: string;
+  articleUrl?: string;
+}
+
+export type CustomFeedItem =
+  | { type: 'video'; playbackId: string }
+  | { type: 'imageCarousel'; item: ImageCarouselItem };
+
 export type JSONValue =
   | string
   | number
@@ -109,6 +136,7 @@ export interface ShortKitError {
 export interface ShortKitProviderProps {
   apiKey: string;
   config: FeedConfig;
+  embedId?: string;
   userId?: string;
 
   clientAppName?: string;
@@ -127,6 +155,55 @@ export interface ShortKitFeedProps {
   onLoop?: (event: LoopEvent) => void;
   onFeedTransition?: (event: FeedTransitionEvent) => void;
   onFormatChange?: (event: FormatChangeEvent) => void;
+  onContentTapped?: (contentId: string, index: number) => void;
+}
+
+// --- Single Player Config ---
+
+export type PlayerClickAction = 'feed' | 'mute' | 'none';
+
+export interface PlayerConfig {
+  cornerRadius?: number;
+  clickAction?: PlayerClickAction;
+  autoplay?: boolean;
+  loop?: boolean;
+  muteOnStart?: boolean;
+  overlay?: OverlayConfig;
+}
+
+// --- Widget Config ---
+
+export interface WidgetConfig {
+  cardCount?: number;
+  cardSpacing?: number;
+  cornerRadius?: number;
+  autoplay?: boolean;
+  muteOnStart?: boolean;
+  loop?: boolean;
+  rotationInterval?: number;
+  clickAction?: PlayerClickAction;
+  overlay?: OverlayConfig;
+}
+
+// --- Single Player Props ---
+
+export interface ShortKitPlayerProps {
+  config?: PlayerConfig;
+  contentItem?: ContentItem;
+  /** Controls whether the player is actively playing. When `false` the player
+   *  returns to thumbnail-only mode without tearing down the view. Defaults to
+   *  the value of `config.autoplay` (which itself defaults to `true`). */
+  active?: boolean;
+  style?: ViewStyle;
+  onTap?: () => void;
+}
+
+// --- Widget Props ---
+
+export interface ShortKitWidgetProps {
+  config?: WidgetConfig;
+  items?: ContentItem[];
+  style?: ViewStyle;
 }
 
 // --- Hook Return Types ---
@@ -142,6 +219,7 @@ export interface ShortKitPlayerState {
   activeCaptionTrack: CaptionTrack | null;
   activeCue: { text: string; startTime: number; endTime: number } | null;
   prefetchedAheadCount: number;
+  remainingContentCount: number;
   isActive: boolean;
   isTransitioning: boolean;
   lastOverlayTap: number;

package/src/useShortKit.ts

@@ -6,7 +6,7 @@ import { ShortKitContext } from './ShortKitContext';
  *
  * Must be used within a `<ShortKitProvider>`.
  *
- * @returns SDK operations: `setUserId` and `clearUserId`.
+ * @returns SDK operations and state.
  */
 export function useShortKit() {
   const context = useContext(ShortKitContext);
@@ -16,5 +16,9 @@ export function useShortKit() {
   return {
     setUserId: context.setUserId,
     clearUserId: context.clearUserId,
+    setFeedItems: context.setFeedItems,
+    appendFeedItems: context.appendFeedItems,
+    fetchContent: context.fetchContent,
+    remainingContentCount: context.remainingContentCount,
   };
 }