@shortkitsdk/react-native 0.2.0 → 0.2.2

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;
+  carouselOverlay?: CarouselOverlayConfig;
   surveyMode?: SurveyMode;
   muteOnStart?: boolean;
+  feedSource?: FeedSource;
 }
 
 export type FeedHeight =
@@ -18,9 +21,9 @@ export type OverlayConfig =
   | 'none'
   | { type: 'custom'; component: React.ComponentType };
 
-export type CarouselMode =
+export type CarouselOverlayConfig =
   | 'none'
-  | { type: 'template'; name: 'default' };
+  | { type: 'custom'; component: React.ComponentType };
 
 export type SurveyMode =
   | 'none'
@@ -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 ---
@@ -135,6 +212,7 @@ export interface ShortKitPlayerState {
   playerState: PlayerState;
   currentItem: ContentItem | null;
   nextItem: ContentItem | null;
+  activeCellType: 'video' | 'carousel' | null;
   time: PlayerTime;
   isMuted: boolean;
   playbackRate: number;
@@ -142,6 +220,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,
   };
 }

package/src/useShortKitCarousel.ts

@@ -0,0 +1,29 @@
+import { useContext } from 'react';
+import { ShortKitContext } from './ShortKitContext';
+import type { ImageCarouselItem } from './types';
+
+export interface ShortKitCarouselState {
+  currentCarouselItem: ImageCarouselItem | null;
+  isCarouselActive: boolean;
+  isCarouselTransitioning: boolean;
+}
+
+/**
+ * Hook to access carousel overlay state from the nearest ShortKitProvider.
+ *
+ * Use this inside a custom carousel overlay component to get the current
+ * `ImageCarouselItem` data (images, title, description, etc.).
+ *
+ * Must be used within a `<ShortKitProvider>`.
+ */
+export function useShortKitCarousel(): ShortKitCarouselState {
+  const context = useContext(ShortKitContext);
+  if (!context) {
+    throw new Error('useShortKitCarousel must be used within a ShortKitProvider');
+  }
+  return {
+    currentCarouselItem: context.currentCarouselItem,
+    isCarouselActive: context.isCarouselActive,
+    isCarouselTransitioning: context.isCarouselTransitioning,
+  };
+}

package/src/useShortKitPlayer.ts

@@ -16,12 +16,20 @@ export function useShortKitPlayer(): ShortKitPlayerState {
     throw new Error('useShortKitPlayer must be used within a ShortKitProvider');
   }
 
-  // Return only player-related state and commands (exclude SDK operations
-  // and internal fields)
+  // Return only player-related state and commands (exclude SDK operations,
+  // carousel state, and internal fields)
   const {
     setUserId: _setUserId,
     clearUserId: _clearUserId,
+    setFeedItems: _setFeedItems,
+    appendFeedItems: _appendFeedItems,
+    fetchContent: _fetchContent,
+    currentCarouselItem: _currentCarouselItem,
+    nextCarouselItem: _nextCarouselItem,
+    isCarouselActive: _isCarouselActive,
+    isCarouselTransitioning: _isCarouselTransitioning,
     _overlayConfig: _overlay,
+    _carouselOverlayConfig: _carouselOverlay,
     ...playerState
   } = context;