@shortkitsdk/react-native 0.2.6 → 0.2.12

package/ios/ShortKitCarouselOverlayBridge.swift

@@ -1,219 +0,0 @@
-import UIKit
-import ShortKitSDK
-
-/// A UIView that conforms to `CarouselOverlay` and renders carousel images
-/// natively inside the feed cell using a horizontal paging UIScrollView.
-///
-/// This matches the Swift SDK's `DefaultCarouselView` architecture: images
-/// are rendered INSIDE the cell (part of the feed scroll view), so vertical
-/// feed scrolling and horizontal image swiping work naturally through UIKit's
-/// gesture conflict resolution.
-///
-/// The RN side only renders metadata (title, description, page dots, buttons)
-/// on top via the `CarouselOverlayManager`.
-@objc public class ShortKitCarouselOverlayBridge: UIView, @unchecked Sendable, CarouselOverlay {
-
-    // MARK: - Bridge Reference
-
-    weak var bridge: ShortKitBridge?
-
-    // MARK: - CarouselOverlay
-
-    public var cachedImage: ((String) -> UIImage?)?
-
-    // MARK: - State
-
-    private var currentItem: ImageCarouselItem?
-    private var loadTasks: [Task<Void, Never>] = []
-    private var currentPage: Int = 0
-    private var autoScrollTimer: Timer?
-
-    // MARK: - UI
-
-    private let scrollView = UIScrollView()
-    private let pageControl = UIPageControl()
-    private var imageViews: [UIImageView] = []
-
-    // MARK: - Init
-
-    override init(frame: CGRect) {
-        super.init(frame: frame)
-        backgroundColor = .black
-        isUserInteractionEnabled = true
-        setupScrollView()
-        setupPageControl()
-    }
-
-    required init?(coder: NSCoder) {
-        fatalError("init(coder:) is not supported")
-    }
-
-    private func setupScrollView() {
-        scrollView.isPagingEnabled = true
-        scrollView.showsHorizontalScrollIndicator = false
-        scrollView.bounces = false
-        scrollView.delegate = self
-        scrollView.translatesAutoresizingMaskIntoConstraints = false
-        addSubview(scrollView)
-        NSLayoutConstraint.activate([
-            scrollView.topAnchor.constraint(equalTo: topAnchor),
-            scrollView.leadingAnchor.constraint(equalTo: leadingAnchor),
-            scrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
-            scrollView.bottomAnchor.constraint(equalTo: bottomAnchor),
-        ])
-    }
-
-    private func setupPageControl() {
-        pageControl.isUserInteractionEnabled = false
-        pageControl.translatesAutoresizingMaskIntoConstraints = false
-        addSubview(pageControl)
-        NSLayoutConstraint.activate([
-            pageControl.centerXAnchor.constraint(equalTo: centerXAnchor),
-            pageControl.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -40),
-        ])
-    }
-
-    // MARK: - Layout
-
-    public override func layoutSubviews() {
-        super.layoutSubviews()
-        let w = bounds.width
-        let h = bounds.height
-        guard w > 0, h > 0 else { return }
-        scrollView.contentSize = CGSize(width: w * CGFloat(imageViews.count), height: h)
-        for (i, iv) in imageViews.enumerated() {
-            iv.frame = CGRect(x: w * CGFloat(i), y: 0, width: w, height: h)
-        }
-    }
-
-    // MARK: - CarouselOverlay
-
-    public func configure(with item: ImageCarouselItem) {
-        NSLog("[CarouselBridge] configure id=\(item.id) images=\(item.images.count)")
-        currentItem = item
-
-        // Cancel previous loads & auto-scroll
-        cancelLoads()
-        autoScrollTimer?.invalidate()
-        autoScrollTimer = nil
-
-        // Remove old image views
-        for iv in imageViews { iv.removeFromSuperview() }
-        imageViews.removeAll()
-
-        // Create image views and load images
-        for image in item.images {
-            let iv = UIImageView()
-            iv.contentMode = .scaleAspectFill
-            iv.clipsToBounds = true
-            iv.backgroundColor = .black
-            scrollView.addSubview(iv)
-            imageViews.append(iv)
-
-            if let cached = cachedImage?(image.url) {
-                iv.image = cached
-            } else {
-                let task = Task { [weak iv] in
-                    guard let url = URL(string: image.url),
-                          let (data, _) = try? await URLSession.shared.data(from: url),
-                          !Task.isCancelled,
-                          let uiImage = UIImage(data: data) else { return }
-                    await MainActor.run { iv?.image = uiImage }
-                }
-                loadTasks.append(task)
-            }
-        }
-
-        // Reset scroll position and page
-        currentPage = 0
-        scrollView.contentOffset = .zero
-        setNeedsLayout()
-
-        // Update page control
-        pageControl.numberOfPages = item.images.count
-        pageControl.currentPage = 0
-        pageControl.isHidden = item.images.count <= 1
-
-        // Start auto-scroll if configured
-        let interval = item.autoScrollInterval ?? 0
-        if interval > 0 && item.images.count > 1 {
-            startAutoScroll(interval: interval)
-        }
-
-        // Emit configure to JS so the metadata overlay updates
-        bridge?.emitCarouselOverlayEvent("onCarouselOverlayConfigure", item: item)
-    }
-
-    public func resetState() {
-        NSLog("[CarouselBridge] resetState")
-        cancelLoads()
-        autoScrollTimer?.invalidate()
-        autoScrollTimer = nil
-        for iv in imageViews { iv.removeFromSuperview() }
-        imageViews.removeAll()
-        scrollView.contentOffset = .zero
-        currentPage = 0
-        currentItem = nil
-        bridge?.emitCarouselOverlayEvent("onCarouselOverlayReset", body: [:])
-    }
-
-    public func fadeOutForTransition() {
-        // No-op — native images are inside the cell, transitions are handled
-        // by the feed's collection view.
-    }
-
-    public func restoreFromTransition() {
-        // No-op
-    }
-
-    // MARK: - Auto-Scroll
-
-    private func startAutoScroll(interval: Double) {
-        autoScrollTimer = Timer.scheduledTimer(withTimeInterval: interval, repeats: true) { [weak self] _ in
-            guard let self, !self.imageViews.isEmpty else { return }
-            let nextPage = (self.currentPage + 1) % self.imageViews.count
-            let offset = CGFloat(nextPage) * self.scrollView.bounds.width
-            self.scrollView.setContentOffset(CGPoint(x: offset, y: 0), animated: true)
-            self.currentPage = nextPage
-            self.pageControl.currentPage = nextPage
-        }
-    }
-
-    // MARK: - Helpers
-
-    private func cancelLoads() {
-        for task in loadTasks { task.cancel() }
-        loadTasks.removeAll()
-    }
-
-}
-
-// MARK: - UIScrollViewDelegate
-
-extension ShortKitCarouselOverlayBridge: UIScrollViewDelegate {
-    public func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
-        guard scrollView.bounds.width > 0 else { return }
-        let page = Int(round(scrollView.contentOffset.x / scrollView.bounds.width))
-        currentPage = page
-        pageControl.currentPage = page
-
-        // Restart auto-scroll after user interaction
-        if let interval = currentItem?.autoScrollInterval, interval > 0, imageViews.count > 1 {
-            autoScrollTimer?.invalidate()
-            startAutoScroll(interval: interval)
-        }
-    }
-
-    public func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
-        guard scrollView.bounds.width > 0 else { return }
-        let page = Int(round(scrollView.contentOffset.x / scrollView.bounds.width))
-        currentPage = page
-        pageControl.currentPage = page
-    }
-
-    public func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
-        // Pause auto-scroll during user interaction
-        autoScrollTimer?.invalidate()
-        autoScrollTimer = nil
-    }
-}

package/ios/ShortKitOverlayBridge.swift

@@ -1,111 +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() {
-        // No-op: JS overlays handle fading via feedScrollPhase
-    }
-
-    public func restoreFromTransition() {
-        // No-op: JS overlays handle fading via feedScrollPhase
-    }
-}

package/src/CarouselOverlayManager.tsx

@@ -1,70 +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,
-    };
-  }, [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,
-      feedScrollPhase: null,
-      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;
-  currentCarouselPage: number;
-}
-
-/**
- * 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,
-    currentCarouselPage: context.currentCarouselPage,
-  };
-}