@shortkitsdk/react-native 0.2.27 → 0.2.28

package/src/ShortKitPlayer.tsx

@@ -1,7 +1,11 @@
-import React, { useMemo } from 'react';
+import React, { useLayoutEffect, useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import type { ShortKitPlayerProps } from './types';
 import ShortKitPlayerView from './specs/ShortKitPlayerViewNativeComponent';
+import { serializePlayerConfig } from './serialization';
+import { registerOverlayComponent } from './ShortKitOverlaySurface';
+import { registerCarouselOverlayComponent } from './ShortKitCarouselOverlaySurface';
+import { registerVideoCarouselOverlayComponent } from './ShortKitVideoCarouselOverlaySurface';
 
 /**
  * Single-video player component. Displays one video with thumbnail fallback
@@ -19,21 +23,27 @@ export function ShortKitPlayer(props: ShortKitPlayerProps) {
 
   const clickAction = config?.clickAction ?? 'feed';
 
+  useLayoutEffect(() => {
+    if (config?.overlay && config.overlay !== 'none') {
+      registerOverlayComponent(config.overlay.name, config.overlay.component);
+    }
+    if (config?.feedConfig) {
+      const fc = config.feedConfig;
+      if (fc.overlay && fc.overlay !== 'none') {
+        registerOverlayComponent(fc.overlay.name, fc.overlay.component);
+      }
+      if (fc.carouselOverlay && fc.carouselOverlay !== 'none') {
+        registerCarouselOverlayComponent(fc.carouselOverlay.name, fc.carouselOverlay.component);
+      }
+      if (fc.videoCarouselOverlay && fc.videoCarouselOverlay !== 'none') {
+        registerVideoCarouselOverlayComponent(fc.videoCarouselOverlay.name, fc.videoCarouselOverlay.component);
+      }
+    }
+  }, [config?.overlay, config?.feedConfig]);
+
   const serializedConfig = useMemo(() => {
-    const cfg = config ?? {};
-    return JSON.stringify({
-      cornerRadius: cfg.cornerRadius ?? 12,
-      clickAction: clickAction,
-      autoplay: cfg.autoplay ?? true,
-      loop: cfg.loop ?? true,
-      muteOnStart: cfg.muteOnStart ?? true,
-      overlay: cfg.overlay
-        ? typeof cfg.overlay === 'string'
-          ? cfg.overlay
-          : { type: 'custom' }
-        : 'none',
-    });
-  }, [config, clickAction]);
+    return serializePlayerConfig(config ?? {});
+  }, [config]);
 
   const serializedItem = useMemo(() => {
     if (!contentItem) return undefined;

package/src/ShortKitWidget.tsx

@@ -1,8 +1,12 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useLayoutEffect, useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import type { ShortKitWidgetProps } from './types';
 import ShortKitWidgetView from './specs/ShortKitWidgetViewNativeComponent';
 import { ShortKitInitContext } from './ShortKitContext';
+import { serializeWidgetConfig } from './serialization';
+import { registerOverlayComponent } from './ShortKitOverlaySurface';
+import { registerCarouselOverlayComponent } from './ShortKitCarouselOverlaySurface';
+import { registerVideoCarouselOverlayComponent } from './ShortKitVideoCarouselOverlaySurface';
 
 /**
  * Horizontal carousel widget component. Displays a row of video cards
@@ -18,24 +22,26 @@ export function ShortKitWidget(props: ShortKitWidgetProps) {
     throw new Error('ShortKitWidget must be used within a ShortKitProvider');
   }
 
+  useLayoutEffect(() => {
+    if (config?.overlay && config.overlay !== 'none') {
+      registerOverlayComponent(config.overlay.name, config.overlay.component);
+    }
+    if (config?.feedConfig) {
+      const fc = config.feedConfig;
+      if (fc.overlay && fc.overlay !== 'none') {
+        registerOverlayComponent(fc.overlay.name, fc.overlay.component);
+      }
+      if (fc.carouselOverlay && fc.carouselOverlay !== 'none') {
+        registerCarouselOverlayComponent(fc.carouselOverlay.name, fc.carouselOverlay.component);
+      }
+      if (fc.videoCarouselOverlay && fc.videoCarouselOverlay !== 'none') {
+        registerVideoCarouselOverlayComponent(fc.videoCarouselOverlay.name, fc.videoCarouselOverlay.component);
+      }
+    }
+  }, [config?.overlay, config?.feedConfig]);
+
   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',
-      filter: cfg.filter ? JSON.stringify(cfg.filter) : undefined,
-    });
+    return serializeWidgetConfig(config ?? {});
   }, [config]);
 
   const serializedItems = useMemo(() => {

package/src/index.ts

@@ -16,6 +16,7 @@ export type {
   PlayerConfig,
   PlayerClickAction,
   WidgetConfig,
+  WidgetInput,
 
   ContentItem,
   CarouselImage,

package/src/serialization.ts

@@ -4,6 +4,9 @@ import type {
   FeedInput,
   PlayerState,
   PlayerTime,
+  WidgetConfig,
+  PlayerConfig,
+  OverlayConfig,
   VideoCarouselVideoInput,
 } from './types';
 
@@ -130,3 +133,38 @@ export function serializeFeedInputs(items: FeedInput[]): string {
   });
   return JSON.stringify(serialized);
 }
+
+function serializeOverlay(overlay: OverlayConfig | undefined): string | { type: 'custom'; name: string } {
+  if (!overlay || overlay === 'none') return 'none';
+  return { type: 'custom', name: overlay.name };
+}
+
+export function serializeWidgetConfig(config: WidgetConfig): string {
+  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: serializeOverlay(cfg.overlay),
+    filter: cfg.filter ? JSON.stringify(cfg.filter) : undefined,
+    feedConfig: cfg.feedConfig ? serializeFeedConfig(cfg.feedConfig) : undefined,
+  });
+}
+
+export function serializePlayerConfig(config: PlayerConfig): string {
+  const cfg = config ?? {};
+  return JSON.stringify({
+    cornerRadius: cfg.cornerRadius ?? 12,
+    clickAction: cfg.clickAction ?? 'feed',
+    autoplay: cfg.autoplay ?? true,
+    loop: cfg.loop ?? true,
+    muteOnStart: cfg.muteOnStart ?? true,
+    overlay: serializeOverlay(cfg.overlay),
+    feedConfig: cfg.feedConfig ? serializeFeedConfig(cfg.feedConfig) : undefined,
+  });
+}

package/src/specs/NativeShortKitModule.ts

@@ -284,6 +284,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;
+  refresh(feedId: string): void;
   preloadFeed(configJSON: string, itemsJSON: string | null): Promise<string>;
 
   // --- Storyboard / seek thumbnails ---

package/src/types.ts

@@ -408,6 +408,8 @@ export interface ShortKitFeedHandle {
   appendFeedItems: (items: FeedInput[]) => void;
   /** Apply a content filter to this feed instance. Pass null to clear. */
   applyFilter: (filter: FeedFilter | null) => void;
+  /** Programmatically trigger a feed refresh. No-op if already refreshing. */
+  refresh: () => void;
 }
 
 // --- Single Player Config ---
@@ -421,6 +423,7 @@ export interface PlayerConfig {
   loop?: boolean;
   muteOnStart?: boolean;
   overlay?: OverlayConfig;
+  feedConfig?: FeedConfig;
 }
 
 // --- Widget Config ---
@@ -436,8 +439,17 @@ export interface WidgetConfig {
   clickAction?: PlayerClickAction;
   overlay?: OverlayConfig;
   filter?: FeedFilter;
+  feedConfig?: FeedConfig;
 }
 
+/**
+ * Compact input for widget items. Mirrors the video variant of `FeedInput` —
+ * host apps pass a playback ID and the SDK hydrates it into a full
+ * `ContentItem` internally (same resolver the feed uses).
+ */
+export type WidgetInput =
+  | { type: 'video'; playbackId: string; origin?: ContentOrigin; fallbackUrl?: string };
+
 // --- Single Player Props ---
 
 export interface ShortKitPlayerProps {
@@ -455,7 +467,13 @@ export interface ShortKitPlayerProps {
 
 export interface ShortKitWidgetProps {
   config?: WidgetConfig;
-  items?: ContentItem[];
+  /**
+   * Optional list of widget items to render. When provided, the widget
+   * skips its internal server fetch and renders these videos in order.
+   * Compact playback-ID form — the SDK hydrates URLs internally, matching
+   * how `<ShortKitFeed feedItems={...} />` works.
+   */
+  items?: WidgetInput[];
   style?: ViewStyle;
 }