@shortkitsdk/react-native 0.2.6 → 0.2.12

package/src/ShortKitOverlaySurface.tsx

@@ -0,0 +1,313 @@
+import React, { useEffect, useState } from 'react';
+import { AppRegistry, View, Text } from 'react-native';
+import type { OverlayProps, PlayerState, PlayerTime, FeedScrollPhase } from './types';
+import { deserializeContentItem } from './serialization';
+import NativeShortKitModule from './specs/NativeShortKitModule';
+
+const SK_OVERLAY_TAG = '[ShortKit:OverlaySurface]';
+
+// 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} />;
+    };
+  });
+}
+
+/**
+ * Error boundary that catches crashes inside the overlay component.
+ * Without this, a crash in an isolated React surface is silent on Android.
+ */
+class OverlayErrorBoundary extends React.Component<
+  { surfaceId?: string; overlayName: string; children: React.ReactNode },
+  { error: Error | null }
+> {
+  state: { error: Error | null } = { error: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error(
+      `${SK_OVERLAY_TAG} CRASH in overlay '${this.props.overlayName}' (surfaceId=${this.props.surfaceId}):`,
+      error.message,
+      '\nComponent stack:',
+      info.componentStack,
+    );
+  }
+
+  render() {
+    if (this.state.error) {
+      // Render a visible red indicator in __DEV__ so it's obvious
+      if (__DEV__) {
+        return (
+          <View style={{ flex: 1, backgroundColor: 'rgba(255,0,0,0.3)', justifyContent: 'center', alignItems: 'center', padding: 20 }}>
+            <Text style={{ color: 'white', fontSize: 14, textAlign: 'center' }}>
+              {`Overlay '${this.props.overlayName}' crashed:\n${this.state.error.message}`}
+            </Text>
+          </View>
+        );
+      }
+      return null;
+    }
+    return this.props.children;
+  }
+}
+
+/** 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.
+ *
+ * Both iOS and Android (new arch) emit events through the codegen
+ * EventEmitter path (mEventEmitterCallback / JSI direct channel).
+ * We subscribe via the codegen emitter method on the TurboModule.
+ */
+function useOverlayEvent<T extends { surfaceId: string }>(
+  eventName: string,
+  surfaceId: string | undefined,
+  handler: (event: T) => void,
+) {
+  useEffect(() => {
+    if (!surfaceId) return;
+
+    let sub: { remove: () => void } | undefined;
+
+    // Both platforms: 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);
+      });
+    }
+
+    return () => sub?.remove();
+  }, [surfaceId]);
+}
+
+function ShortKitOverlaySurfaceInner(props: InnerProps) {
+  const Component = _overlayRegistry.get(props.overlayName);
+  if (!Component) {
+    console.error(`${SK_OVERLAY_TAG} ShortKitOverlaySurfaceInner: Component NOT FOUND in registry for '${props.overlayName}'. Registered names: [${Array.from(_overlayRegistry.keys()).join(', ')}]`);
+    return null;
+  }
+
+  const [item, setItem] = useState(() =>
+    props.item ? deserializeContentItem(props.item) : null,
+  );
+
+  // Sync item from props when surface is first mounted or remounted via updateInitProps
+  const prevPropsItemRef = React.useRef(props.item);
+  if (props.item !== prevPropsItemRef.current) {
+    prevPropsItemRef.current = props.item;
+    // Synchronous state update during render — React restarts with new state
+    // before committing, so stale frame is never painted.
+    setItem(props.item ? deserializeContentItem(props.item) : null);
+  }
+
+  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) ---
+
+  // Item changed via event (not updateInitProps) — triggers React DIFF
+  // instead of full remount. Uses DeviceEventEmitter because this event
+  // is not in the TurboModule spec (avoids native codegen changes).
+  useEffect(() => {
+    if (!sid) return;
+    const { DeviceEventEmitter } = require('react-native');
+    const sub = DeviceEventEmitter.addListener('onOverlayItemChanged', (e: { surfaceId: string; item: string }) => {
+      if (e.surfaceId !== sid) return;
+      const newItem = e.item ? deserializeContentItem(e.item) : null;
+      if (newItem) setItem(newItem);
+      // Reset playback state for the new item
+      setIsActive(false);
+      setPlayerState('idle' as PlayerState);
+      setTime({ current: 0, duration: 0, buffered: 0 });
+    });
+    return () => sub.remove();
+  }, [sid]);
+
+  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 {
+        const next = e.feedScrollPhase ? JSON.parse(e.feedScrollPhase) : null;
+        // Stabilize object reference: only update state if the phase actually
+        // changed. Prevents unnecessary re-renders of memo'd overlay components
+        // that receive feedScrollPhase as a prop (new JSON.parse object !== old).
+        setFeedScrollPhase(prev => {
+          if (prev?.phase === next?.phase && prev?.fromId === next?.fromId) {
+            return prev;
+          }
+          return next;
+        });
+      } catch {
+        setFeedScrollPhase(null);
+      }
+    },
+  );
+
+  // EXPERIMENT: time updates disabled to measure impact on swipe perf
+  // useOverlayEvent<{ surfaceId: string; current: number; duration: number; buffered: number }>(
+  //   'onOverlayTimeUpdate', sid,
+  //   (e) => setTime({ current: e.current, duration: e.duration, buffered: e.buffered }),
+  // );
+
+  // Batched full-state sync — replaces 7 individual events on swipe settle.
+  // All setState calls within one handler = one React render (auto-batched).
+  useOverlayEvent<{
+    surfaceId: string;
+    isActive: boolean;
+    playerState: string;
+    isMuted: boolean;
+    playbackRate: number;
+    captionsEnabled: boolean;
+    activeCue: string | null;
+    feedScrollPhase: string | null;
+  }>('onOverlayFullState', sid, (e) => {
+    setIsActive(e.isActive);
+    setPlayerState(e.playerState as PlayerState);
+    setIsMuted(e.isMuted);
+    setPlaybackRate(e.playbackRate);
+    setCaptionsEnabled(e.captionsEnabled);
+    try {
+      setActiveCue(e.activeCue ? JSON.parse(e.activeCue) : null);
+    } catch {
+      setActiveCue(null);
+    }
+    try {
+      const next = e.feedScrollPhase ? JSON.parse(e.feedScrollPhase) : null;
+      setFeedScrollPhase(prev => {
+        if (prev?.phase === next?.phase && prev?.fromId === next?.fromId) return prev;
+        return next;
+      });
+    } catch {
+      setFeedScrollPhase(null);
+    }
+  });
+
+  if (!item) {
+    return null;
+  }
+
+  return (
+    <OverlayErrorBoundary surfaceId={sid} overlayName={props.overlayName}>
+      <Component
+        item={item}
+        isActive={isActive}
+        playerState={playerState}
+        time={time}
+        isMuted={isMuted}
+        playbackRate={playbackRate}
+        captionsEnabled={captionsEnabled}
+        activeCue={activeCue}
+        feedScrollPhase={feedScrollPhase}
+      />
+    </OverlayErrorBoundary>
+  );
+}

package/src/ShortKitPlayer.tsx

@@ -1,28 +1,29 @@
-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 clickAction = config?.clickAction ?? 'feed';
 
   const serializedConfig = useMemo(() => {
     const cfg = config ?? {};
     return JSON.stringify({
       cornerRadius: cfg.cornerRadius ?? 12,
-      clickAction: cfg.clickAction ?? 'feed',
+      clickAction: clickAction,
       autoplay: cfg.autoplay ?? true,
       loop: cfg.loop ?? true,
       muteOnStart: cfg.muteOnStart ?? true,
@@ -32,20 +33,40 @@ export function ShortKitPlayer(props: ShortKitPlayerProps) {
           : { type: 'custom' }
         : 'none',
     });
-  }, [config]);
+  }, [config, clickAction]);
 
   const serializedItem = useMemo(() => {
     if (!contentItem) return undefined;
     return JSON.stringify(contentItem);
   }, [contentItem]);
 
+  // When clickAction is "none", the native view should not participate in
+  // Fabric's JS-side hit testing. Without this, Fabric on Android sees the
+  // native component as the touch target and never routes the touch to a
+  // parent Pressable — even though the native view returns false from
+  // dispatchTouchEvent. iOS doesn't need this because UIKit's responder
+  // chain bubbles unhandled touches automatically.
+  //
+  // "box-none" on the container means the container View itself is
+  // transparent to touches (passes through to parent), but children can
+  // still receive touches if needed. "none" on the native view means it
+  // is fully invisible to hit testing.
+  const nativeTouchPassthrough = clickAction === 'none';
+
   return (
-    <View style={[styles.container, style]}>
+    <View
+      style={[styles.container, style]}
+      pointerEvents={nativeTouchPassthrough ? 'box-none' : 'auto'}
+      onStartShouldSetResponder={() => {
+        return false;
+      }}
+    >
       <ShortKitPlayerView
         style={styles.player}
         config={serializedConfig}
         contentItem={serializedItem}
         active={active}
+        pointerEvents={nativeTouchPassthrough ? 'none' : 'auto'}
       />
     </View>
   );