@shortkitsdk/react-native 0.2.5 → 0.2.11

package/ios/ShortKitCarouselOverlayBridge.swift

@@ -1,54 +0,0 @@
-import UIKit
-import ShortKitSDK
-
-/// A transparent UIView that conforms to `CarouselOverlay` and bridges
-/// carousel overlay lifecycle calls to JS events via `ShortKitBridge`.
-///
-/// The actual carousel overlay UI is rendered by React Native on the JS side
-/// through the `CarouselOverlayManager` component. This view simply relays
-/// the SDK lifecycle events so the JS carousel overlay knows when to
-/// configure, activate, reset, etc.
-@objc public class ShortKitCarouselOverlayBridge: UIView, @unchecked Sendable, CarouselOverlay {
-
-    // MARK: - Bridge Reference
-
-    /// Weak reference to the bridge, set by the factory closure in `parseFeedConfig`.
-    weak var bridge: ShortKitBridge?
-
-    // MARK: - State
-
-    /// Stores the last configured ImageCarouselItem so we can pass it with
-    /// lifecycle events that don't receive the item as a parameter.
-    private var currentItem: ImageCarouselItem?
-
-    // MARK: - Init
-
-    override init(frame: CGRect) {
-        super.init(frame: frame)
-        backgroundColor = .clear
-        isUserInteractionEnabled = true
-    }
-
-    required init?(coder: NSCoder) {
-        fatalError("init(coder:) is not supported")
-    }
-
-    // MARK: - CarouselOverlay
-
-    public func configure(with item: ImageCarouselItem) {
-        currentItem = item
-        bridge?.emitCarouselOverlayEvent("onCarouselOverlayConfigure", item: item)
-    }
-
-    public func resetState() {
-        bridge?.emitCarouselOverlayEvent("onCarouselOverlayReset", body: [:])
-    }
-
-    public func fadeOutForTransition() {
-        bridge?.emitCarouselOverlayEvent("onCarouselOverlayFadeOut", body: [:])
-    }
-
-    public func restoreFromTransition() {
-        bridge?.emitCarouselOverlayEvent("onCarouselOverlayRestore", body: [:])
-    }
-}

package/ios/ShortKitOverlayBridge.swift

@@ -1,113 +0,0 @@
-import UIKit
-import ShortKitSDK
-
-/// A transparent UIView that conforms to `FeedOverlay` and bridges overlay
-/// lifecycle calls to JS events via `ShortKitBridge`.
-///
-/// The actual overlay UI is rendered by React Native on the JS side through
-/// the `OverlayManager` component. This view simply relays the SDK lifecycle
-/// events so the JS overlay knows when to configure, activate, reset, etc.
-@objc public class ShortKitOverlayBridge: UIView, @unchecked Sendable, FeedOverlay {
-
-    // MARK: - Bridge Reference
-
-    /// Weak reference to the bridge, set by the factory closure in `parseFeedConfig`.
-    weak var bridge: ShortKitBridge?
-
-    // MARK: - State
-
-    /// Stores the last configured ContentItem so we can pass it with lifecycle
-    /// events that don't receive the item as a parameter.
-    private var currentItem: ContentItem?
-
-    /// Deferred configure emission — cancelled if `activatePlayback()` fires
-    /// on the same run-loop iteration (meaning this was a handleSwipe
-    /// re-configure of the active cell, not a prefetch for the next cell).
-    private var pendingConfigureWorkItem: DispatchWorkItem?
-
-    // MARK: - Init
-
-    override init(frame: CGRect) {
-        super.init(frame: frame)
-        backgroundColor = .clear
-        isUserInteractionEnabled = true
-        setupGestures()
-    }
-
-    required init?(coder: NSCoder) {
-        fatalError("init(coder:) is not supported")
-    }
-
-    // MARK: - Gestures
-
-    private func setupGestures() {
-        let doubleTap = UITapGestureRecognizer(target: self, action: #selector(handleDoubleTap(_:)))
-        doubleTap.numberOfTapsRequired = 2
-        addGestureRecognizer(doubleTap)
-
-        let singleTap = UITapGestureRecognizer(target: self, action: #selector(handleSingleTap))
-        singleTap.require(toFail: doubleTap)
-        addGestureRecognizer(singleTap)
-    }
-
-    @objc private func handleSingleTap() {
-        bridge?.emitOverlayEvent("onOverlayTap", body: [:])
-    }
-
-    @objc private func handleDoubleTap(_ gesture: UITapGestureRecognizer) {
-        let location = gesture.location(in: self)
-        bridge?.emitOverlayEvent("onOverlayDoubleTap", body: [
-            "x": location.x,
-            "y": location.y,
-        ])
-    }
-
-    // MARK: - FeedOverlay
-
-    public func attach(player: ShortKitPlayer) {
-        // No-op on the native side. The JS overlay subscribes to player
-        // state via the TurboModule's Combine publishers.
-    }
-
-    public func configure(with item: ContentItem) {
-        currentItem = item
-
-        // Defer the configure event by one run-loop tick. If activatePlayback()
-        // fires before then (handleSwipe sequence: configure → reset → activate),
-        // the event is cancelled — preventing nextItem from being overwritten
-        // with the current cell's data.
-        pendingConfigureWorkItem?.cancel()
-        let workItem = DispatchWorkItem { [weak self] in
-            guard let self, let item = self.currentItem else { return }
-            self.bridge?.emitOverlayEvent("onOverlayConfigure", item: item)
-            self.pendingConfigureWorkItem = nil
-        }
-        pendingConfigureWorkItem = workItem
-        DispatchQueue.main.async(execute: workItem)
-    }
-
-    public func resetPlaybackProgress() {
-        guard let item = currentItem else { return }
-        bridge?.emitOverlayEvent("onOverlayReset", item: item)
-    }
-
-    public func activatePlayback() {
-        // Cancel the pending configure — it was for the current cell (part of
-        // handleSwipe), not a prefetch for the next cell.
-        pendingConfigureWorkItem?.cancel()
-        pendingConfigureWorkItem = nil
-
-        guard let item = currentItem else { return }
-        bridge?.emitOverlayEvent("onOverlayActivate", item: item)
-    }
-
-    public func fadeOutForTransition() {
-        guard let item = currentItem else { return }
-        bridge?.emitOverlayEvent("onOverlayFadeOut", item: item)
-    }
-
-    public func restoreFromTransition() {
-        guard let item = currentItem else { return }
-        bridge?.emitOverlayEvent("onOverlayRestore", item: item)
-    }
-}

package/src/CarouselOverlayManager.tsx

@@ -1,71 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
-import type { CarouselOverlayConfig } from './types';
-import { ShortKitContext } from './ShortKitContext';
-import type { ShortKitContextValue } from './ShortKitContext';
-
-interface CarouselOverlayManagerProps {
-  carouselOverlay: CarouselOverlayConfig;
-}
-
-/**
- * Internal component that renders TWO instances of the developer's custom
- * carousel overlay component — one for the current cell and one for the next.
- *
- * Works identically to `OverlayManager` but for image carousel cells.
- * The native side finds these views by their `nativeID` and applies
- * scroll-tracking transforms so each overlay moves with its respective
- * carousel cell during swipe transitions.
- */
-export function CarouselOverlayManager({ carouselOverlay }: CarouselOverlayManagerProps) {
-  if (
-    carouselOverlay === 'none' ||
-    typeof carouselOverlay === 'string' ||
-    carouselOverlay.type !== 'custom' ||
-    !('component' in carouselOverlay)
-  ) {
-    return null;
-  }
-
-  const CarouselComponent = carouselOverlay.component;
-
-  return (
-    <>
-      <View style={StyleSheet.absoluteFill} nativeID="carousel-overlay-current" pointerEvents="box-none">
-        <CarouselComponent />
-      </View>
-      <View style={StyleSheet.absoluteFill} nativeID="carousel-overlay-next" pointerEvents="box-none">
-        <NextCarouselOverlayProvider>
-          <CarouselComponent />
-        </NextCarouselOverlayProvider>
-      </View>
-    </>
-  );
-}
-
-/**
- * Wraps children with a modified ShortKitContext where `currentCarouselItem`
- * is set to the provider's `nextCarouselItem`.
- */
-function NextCarouselOverlayProvider({ children }: { children: React.ReactNode }) {
-  const context = useContext(ShortKitContext);
-
-  const nextValue: ShortKitContextValue | null = useMemo(() => {
-    if (!context) return null;
-
-    return {
-      ...context,
-      currentCarouselItem: context.nextCarouselItem,
-      isCarouselActive: context.nextCarouselItem != null,
-      isCarouselTransitioning: false,
-    };
-  }, [context]);
-
-  if (!nextValue) return <>{children}</>;
-
-  return (
-    <ShortKitContext.Provider value={nextValue}>
-      {children}
-    </ShortKitContext.Provider>
-  );
-}

package/src/OverlayManager.tsx

@@ -1,87 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
-import type { OverlayConfig, PlayerState } from './types';
-import { ShortKitContext } from './ShortKitContext';
-import type { ShortKitContextValue } from './ShortKitContext';
-
-interface OverlayManagerProps {
-  overlay: OverlayConfig;
-}
-
-/**
- * Internal component that renders TWO instances of the developer's custom
- * overlay component — one for the current cell and one for the next cell.
- *
- * On the native side, `ShortKitFeedView` finds these views by their
- * `nativeID` and applies scroll-tracking transforms so each overlay moves
- * with its respective cell during swipe transitions — matching the native
- * iOS/Android SDK behavior where each cell has its own overlay instance.
- *
- * The "current" overlay uses the actual provider context.
- * The "next" overlay uses a context override where `currentItem = nextItem`
- * with initial playback state, so it renders the upcoming video's overlay
- * content before the user scrolls to it.
- */
-export function OverlayManager({ overlay }: OverlayManagerProps) {
-  if (
-    overlay === 'none' ||
-    typeof overlay === 'string' ||
-    overlay.type !== 'custom' ||
-    !('component' in overlay)
-  ) {
-    return null;
-  }
-
-  const OverlayComponent = overlay.component;
-
-  return (
-    <>
-      <View style={StyleSheet.absoluteFill} nativeID="overlay-current" pointerEvents="box-none">
-        <OverlayComponent />
-      </View>
-      <View style={StyleSheet.absoluteFill} nativeID="overlay-next" pointerEvents="box-none">
-        <NextOverlayProvider>
-          <OverlayComponent />
-        </NextOverlayProvider>
-      </View>
-    </>
-  );
-}
-
-/**
- * Wraps children with a modified ShortKitContext where `currentItem` is
- * set to the provider's `nextItem` (the item configured for the upcoming
- * cell). Other state reflects an "about to play" initial state so the
- * overlay renders correctly before playback starts on that cell.
- */
-function NextOverlayProvider({ children }: { children: React.ReactNode }) {
-  const context = useContext(ShortKitContext);
-
-  const nextValue: ShortKitContextValue | null = useMemo(() => {
-    if (!context) return null;
-
-    return {
-      ...context,
-      currentItem: context.nextItem,
-      isActive: context.nextItem != null,
-      time: {
-        current: 0,
-        duration: context.nextItem?.duration ?? 0,
-        buffered: 0,
-      },
-      playerState: 'idle' as PlayerState,
-      isTransitioning: false,
-      activeCue: null,
-      lastOverlayTap: 0,
-      lastOverlayDoubleTap: null,
-    };
-  }, [context]);
-
-  if (!nextValue) return <>{children}</>;
-
-  return (
-    <ShortKitContext.Provider value={nextValue}>
-      {children}
-    </ShortKitContext.Provider>
-  );
-}

package/src/useShortKitCarousel.ts

@@ -1,29 +0,0 @@
-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,
-  };
-}