@shortkitsdk/react-native 0.2.5 → 0.2.11

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.5",
+  "version": "0.2.11",
   "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,21 +1,20 @@
 import { createContext } from 'react';
 import type {
   ContentItem,
-  ImageCarouselItem,
-  CustomFeedItem,
+  FeedConfig,
+  FeedFilter,
   PlayerTime,
   PlayerState,
   CaptionTrack,
+  FeedScrollPhase,
   ContentSignal,
-  OverlayConfig,
-  CarouselOverlayConfig,
+  StoryboardData,
 } from './types';
 
 export interface ShortKitContextValue {
   // Player state
   playerState: PlayerState;
   currentItem: ContentItem | null;
-  nextItem: ContentItem | null;
   time: PlayerTime;
   isMuted: boolean;
   playbackRate: number;
@@ -23,11 +22,8 @@ export interface ShortKitContextValue {
   activeCaptionTrack: CaptionTrack | null;
   activeCue: { text: string; startTime: number; endTime: number } | null;
   prefetchedAheadCount: number;
-  remainingContentCount: number;
   isActive: boolean;
-  isTransitioning: boolean;
-  lastOverlayTap: number;
-  lastOverlayDoubleTap: { x: number; y: number; id: number } | null;
+  feedScrollPhase: FeedScrollPhase | null;
 
   // Player commands
   play: () => void;
@@ -46,24 +42,14 @@ export interface ShortKitContextValue {
   // SDK operations
   setUserId: (id: string) => void;
   clearUserId: () => void;
-  setFeedItems: (items: CustomFeedItem[]) => void;
-  appendFeedItems: (items: CustomFeedItem[]) => void;
-  fetchContent: (limit?: number) => Promise<ContentItem[]>;
+  fetchContent: (limit?: number, filter?: FeedFilter) => Promise<ContentItem[]>;
 
-  // Carousel overlay state
-  currentCarouselItem: ImageCarouselItem | null;
-  nextCarouselItem: ImageCarouselItem | null;
-  isCarouselActive: boolean;
-  isCarouselTransitioning: boolean;
+  // Preload
+  preloadFeed: (config?: Partial<FeedConfig>) => Promise<string>;
 
-  // 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;
+  // Storyboard / seek thumbnails
+  prefetchStoryboard: (playbackId: string) => void;
+  getStoryboardData: (playbackId: string) => Promise<StoryboardData | null>;
 }
 
 export const ShortKitContext = createContext<ShortKitContextValue | null>(null);

package/src/ShortKitFeed.tsx

@@ -1,36 +1,46 @@
-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,
   } = props;
 
   const context = useContext(ShortKitContext);
@@ -38,8 +48,53 @@ 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]);
+
+  // 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 +104,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 +158,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 +210,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' },
+});

package/src/ShortKitOverlaySurface.tsx

@@ -0,0 +1,205 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { AppRegistry, DeviceEventEmitter, Platform } from 'react-native';
+import type { OverlayProps, PlayerState, PlayerTime, FeedScrollPhase } from './types';
+import { deserializeContentItem } from './serialization';
+import NativeShortKitModule from './specs/NativeShortKitModule';
+
+// Named registry — supports different overlay components per feed
+const _overlayRegistry = new Map<string, React.ComponentType<OverlayProps>>();
+
+/**
+ * Register a named 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 registerOverlayComponent(
+  name: string,
+  component: React.ComponentType<OverlayProps>,
+) {
+  if (_overlayRegistry.has(name)) return;
+  _overlayRegistry.set(name, component);
+
+  const moduleName = `ShortKitOverlay_${name}`;
+  AppRegistry.registerComponent(moduleName, () => {
+    return function NamedOverlaySurface(props: RawOverlaySurfaceProps) {
+      return <ShortKitOverlaySurfaceInner {...props} overlayName={name} />;
+    };
+  });
+}
+
+/** Raw props received from native appProperties (set once per item in configure()). */
+interface RawOverlaySurfaceProps {
+  surfaceId?: string;
+  item?: string;
+  isActive?: boolean;
+  playerState?: string;
+  isMuted?: boolean;
+  playbackRate?: number;
+  captionsEnabled?: boolean;
+  activeCue?: string;
+  feedScrollPhase?: string;
+}
+
+interface InnerProps extends RawOverlaySurfaceProps {
+  overlayName: string;
+}
+
+/**
+ * Subscribe to a native overlay event, filtered by surfaceId.
+ *
+ * iOS and Android new arch emit events through different paths:
+ * - iOS: _eventEmitterCallback (codegen path) — only the codegen EventEmitter
+ *   subscriptions (NativeShortKitModule.onXxx) receive these events.
+ * - Android: getJSModule(RCTDeviceEventEmitter).emit() — only
+ *   DeviceEventEmitter.addListener() receives these events (codegen
+ *   EventEmitter subscriptions do NOT receive them on Android new arch).
+ *
+ * We branch per platform to use the path that actually delivers events.
+ */
+function useOverlayEvent<T extends { surfaceId: string }>(
+  eventName: string,
+  surfaceId: string | undefined,
+  handler: (event: T) => void,
+) {
+  useEffect(() => {
+    if (!surfaceId) return;
+
+    let sub: { remove: () => void } | undefined;
+
+    if (Platform.OS === 'ios') {
+      // iOS new arch: events come through the codegen EventEmitterCallback.
+      // Access the codegen emitter method by name on the TurboModule.
+      const emitter = NativeShortKitModule?.[eventName as keyof typeof NativeShortKitModule];
+      if (typeof emitter === 'function') {
+        sub = (emitter as (cb: (e: T) => void) => { remove: () => void })((e: T) => {
+          if (e.surfaceId !== surfaceId) return;
+          handler(e);
+        });
+      }
+    } else {
+      // Android new arch: events come through RCTDeviceEventEmitter.emit().
+      sub = DeviceEventEmitter.addListener(eventName, (e: T) => {
+        if (e.surfaceId !== surfaceId) return;
+        handler(e);
+      });
+    }
+
+    return () => sub?.remove();
+  }, [surfaceId]);
+}
+
+function ShortKitOverlaySurfaceInner(props: InnerProps) {
+  const Component = _overlayRegistry.get(props.overlayName);
+  if (!Component) return null;
+
+  const item = useMemo(
+    () => (props.item ? deserializeContentItem(props.item) : null),
+    [props.item],
+  );
+
+  const sid = props.surfaceId;
+
+  // Initialize state from surface properties (set once in configure()).
+  // All subsequent updates arrive via events filtered by surfaceId.
+  const [isActive, setIsActive] = useState(props.isActive ?? false);
+  const [playerState, setPlayerState] = useState<PlayerState>(
+    (props.playerState ?? 'idle') as PlayerState,
+  );
+  const [isMuted, setIsMuted] = useState(props.isMuted ?? true);
+  const [playbackRate, setPlaybackRate] = useState(props.playbackRate ?? 1);
+  const [captionsEnabled, setCaptionsEnabled] = useState(
+    props.captionsEnabled ?? false,
+  );
+  const [time, setTime] = useState<PlayerTime>({
+    current: 0,
+    duration: 0,
+    buffered: 0,
+  });
+  const [activeCue, setActiveCue] = useState<OverlayProps['activeCue']>(
+    props.activeCue ? JSON.parse(props.activeCue) : null,
+  );
+  const [feedScrollPhase, setFeedScrollPhase] =
+    useState<FeedScrollPhase | null>(
+      props.feedScrollPhase ? JSON.parse(props.feedScrollPhase) : null,
+    );
+
+  // Reset state when the item changes (cell reuse). useState initial values
+  // only apply on mount, so on re-render with new props we must sync manually.
+  // This prevents stale progress bar / player state flashing from the previous cell.
+  useEffect(() => {
+    setIsActive(props.isActive ?? false);
+    setPlayerState((props.playerState ?? 'idle') as PlayerState);
+    setTime({ current: 0, duration: 0, buffered: 0 });
+    setIsMuted(props.isMuted ?? true);
+    setPlaybackRate(props.playbackRate ?? 1);
+    setCaptionsEnabled(props.captionsEnabled ?? false);
+    setActiveCue(props.activeCue ? JSON.parse(props.activeCue) : null);
+    setFeedScrollPhase(
+      props.feedScrollPhase ? JSON.parse(props.feedScrollPhase) : null,
+    );
+  }, [props.item]);
+
+  // --- Event subscriptions (filtered by surfaceId) ---
+
+  useOverlayEvent<{ surfaceId: string; isActive: boolean }>(
+    'onOverlayActiveChanged', sid,
+    (e) => setIsActive(e.isActive),
+  );
+
+  useOverlayEvent<{ surfaceId: string; playerState: string }>(
+    'onOverlayPlayerStateChanged', sid,
+    (e) => setPlayerState(e.playerState as PlayerState),
+  );
+
+  useOverlayEvent<{ surfaceId: string; isMuted: boolean }>(
+    'onOverlayMutedChanged', sid,
+    (e) => setIsMuted(e.isMuted),
+  );
+
+  useOverlayEvent<{ surfaceId: string; playbackRate: number }>(
+    'onOverlayPlaybackRateChanged', sid,
+    (e) => setPlaybackRate(e.playbackRate),
+  );
+
+  useOverlayEvent<{ surfaceId: string; captionsEnabled: boolean }>(
+    'onOverlayCaptionsEnabledChanged', sid,
+    (e) => setCaptionsEnabled(e.captionsEnabled),
+  );
+
+  useOverlayEvent<{ surfaceId: string; activeCue: string | null }>(
+    'onOverlayActiveCueChanged', sid,
+    (e) => setActiveCue(e.activeCue ? JSON.parse(e.activeCue) : null),
+  );
+
+  useOverlayEvent<{ surfaceId: string; feedScrollPhase: string | null }>(
+    'onOverlayFeedScrollPhaseChanged', sid,
+    (e) => {
+      try {
+        setFeedScrollPhase(e.feedScrollPhase ? JSON.parse(e.feedScrollPhase) : null);
+      } catch {
+        setFeedScrollPhase(null);
+      }
+    },
+  );
+
+  useOverlayEvent<{ surfaceId: string; current: number; duration: number; buffered: number }>(
+    'onOverlayTimeUpdate', sid,
+    (e) => setTime({ current: e.current, duration: e.duration, buffered: e.buffered }),
+  );
+
+  if (!item) return null;
+
+  return (
+    <Component
+      item={item}
+      isActive={isActive}
+      playerState={playerState}
+      time={time}
+      isMuted={isMuted}
+      playbackRate={playbackRate}
+      captionsEnabled={captionsEnabled}
+      activeCue={activeCue}
+      feedScrollPhase={feedScrollPhase}
+    />
+  );
+}

package/src/ShortKitPlayer.tsx

@@ -1,23 +1,22 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import type { ShortKitPlayerProps } from './types';
 import ShortKitPlayerView from './specs/ShortKitPlayerViewNativeComponent';
-import { ShortKitContext } from './ShortKitContext';
 
 /**
  * Single-video player component. Displays one video with thumbnail fallback
  * and optional overlay. Wraps a native Fabric view.
  *
  * Must be rendered inside a `<ShortKitProvider>`.
+ *
+ * NOTE: Removed useContext(ShortKitContext) subscription — it was only used
+ * for an existence check but caused re-renders on every TIME update (~4x/sec)
+ * from the feed, flickering all grid tiles. The provider check is the host
+ * app's responsibility.
  */
 export function ShortKitPlayer(props: ShortKitPlayerProps) {
   const { config, contentItem, active, style } = props;
 
-  const context = useContext(ShortKitContext);
-  if (!context) {
-    throw new Error('ShortKitPlayer must be used within a ShortKitProvider');
-  }
-
   const serializedConfig = useMemo(() => {
     const cfg = config ?? {};
     return JSON.stringify({