@shortkitsdk/react-native 0.2.0 → 0.2.2

package/ios/ShortKitPlayerNativeView.swift

@@ -0,0 +1,186 @@
+import UIKit
+import ShortKit
+
+/// Fabric native view wrapping `ShortKitPlayerViewController` for use as
+/// a single-video player in React Native.
+///
+/// Props (set by RCTViewManager):
+/// - `config`: JSON string with PlayerConfig values
+/// - `contentItem`: JSON string with ContentItem data
+@objc public class ShortKitPlayerNativeView: UIView {
+
+    // MARK: - Props
+
+    @objc public var config: String? {
+        didSet {
+            guard config != oldValue else { return }
+            applyConfig()
+        }
+    }
+
+    @objc public var contentItem: String? {
+        didSet {
+            guard contentItem != oldValue else { return }
+            applyContentItem()
+        }
+    }
+
+    @objc public var active: Bool = true {
+        didSet {
+            guard active != oldValue else { return }
+            applyActive()
+        }
+    }
+
+    // MARK: - Child VC
+
+    private var playerVC: ShortKitPlayerViewController?
+    private var parsedConfig: PlayerConfig?
+
+    // MARK: - Lifecycle
+
+    public override func didMoveToWindow() {
+        super.didMoveToWindow()
+        if window != nil {
+            embedPlayerVCIfNeeded()
+        }
+    }
+
+    public override func willMove(toWindow newWindow: UIWindow?) {
+        super.willMove(toWindow: newWindow)
+        if newWindow == nil {
+            removePlayerVC()
+        }
+    }
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        playerVC?.view.frame = bounds
+    }
+
+    // MARK: - VC Containment
+
+    private func embedPlayerVCIfNeeded() {
+        guard playerVC == nil else { return }
+        guard let sdk = ShortKitBridge.shared?.sdk else { return }
+        guard let parentVC = findParentViewController() else { return }
+
+        let playerConfig = parsedConfig ?? PlayerConfig()
+
+        let vc = ShortKitPlayerViewController(shortKit: sdk, config: playerConfig)
+        self.playerVC = vc
+
+        // Inject content BEFORE the view loads so loadData() skips its own
+        // fetch. Accessing vc.view triggers viewDidLoad, so configure first.
+        if let json = contentItem, let item = Self.parseContentItem(json) {
+            vc.configure(with: item)
+        }
+
+        parentVC.addChild(vc)
+        vc.view.frame = bounds
+        vc.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        addSubview(vc.view)
+        vc.didMove(toParent: parentVC)
+
+        // Activate based on the `active` prop (defaults to true)
+        if active {
+            vc.activate()
+        }
+    }
+
+    private func removePlayerVC() {
+        guard let vc = playerVC else { return }
+        vc.deactivate()
+        vc.willMove(toParent: nil)
+        vc.view.removeFromSuperview()
+        vc.removeFromParent()
+        self.playerVC = nil
+    }
+
+    // MARK: - Prop Application
+
+    private func applyConfig() {
+        guard let json = config else { return }
+        parsedConfig = Self.parsePlayerConfig(json)
+        // Config changes require re-embedding
+        if playerVC != nil {
+            removePlayerVC()
+            embedPlayerVCIfNeeded()
+        }
+    }
+
+    private func applyContentItem() {
+        guard let json = contentItem, let item = Self.parseContentItem(json) else { return }
+        playerVC?.configure(with: item)
+    }
+
+    private func applyActive() {
+        guard let vc = playerVC else { return }
+        if active {
+            vc.activate()
+        } else {
+            vc.deactivate()
+        }
+    }
+
+    // MARK: - Parsing
+
+    private static func parsePlayerConfig(_ json: String) -> PlayerConfig {
+        guard let data = json.data(using: .utf8),
+              let obj = try? JSONSerialization.jsonObject(with: data) as? [String: Any] else {
+            return PlayerConfig()
+        }
+
+        let cornerRadius = obj["cornerRadius"] as? CGFloat ?? 12
+        let autoplay = obj["autoplay"] as? Bool ?? true
+        let loop = obj["loop"] as? Bool ?? true
+        let muteOnStart = obj["muteOnStart"] as? Bool ?? true
+
+        let clickAction: PlayerClickAction
+        switch obj["clickAction"] as? String {
+        case "feed": clickAction = .feed
+        case "mute": clickAction = .mute
+        case "none": clickAction = .none
+        default: clickAction = .feed
+        }
+
+        let overlayMode: VideoOverlayMode
+        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
+            }
+        } else {
+            overlayMode = .none
+        }
+
+        return PlayerConfig(
+            cornerRadius: cornerRadius,
+            clickAction: clickAction,
+            autoplay: autoplay,
+            loop: loop,
+            muteOnStart: muteOnStart,
+            videoOverlay: overlayMode
+        )
+    }
+
+    private static func parseContentItem(_ json: String) -> ContentItem? {
+        guard let data = json.data(using: .utf8) else { return nil }
+        return try? JSONDecoder().decode(ContentItem.self, from: data)
+    }
+
+    // MARK: - Helpers
+
+    private func findParentViewController() -> UIViewController? {
+        var responder: UIResponder? = self
+        while let next = responder?.next {
+            if let vc = next as? UIViewController {
+                return vc
+            }
+            responder = next
+        }
+        return nil
+    }
+}

package/ios/ShortKitPlayerNativeViewManager.mm

@@ -0,0 +1,28 @@
+#import <React/RCTViewManager.h>
+
+#if __has_include(<ShortKitReactNative/ShortKitReactNative-Swift.h>)
+#import <ShortKitReactNative/ShortKitReactNative-Swift.h>
+#else
+#import "ShortKitReactNative-Swift.h"
+#endif
+
+@interface ShortKitPlayerViewManager : RCTViewManager
+@end
+
+@implementation ShortKitPlayerViewManager
+
+RCT_EXPORT_MODULE(ShortKitPlayerView)
+
++ (BOOL)requiresMainQueueSetup {
+  return YES;
+}
+
+- (UIView *)view {
+  return [[ShortKitPlayerNativeView alloc] init];
+}
+
+RCT_EXPORT_VIEW_PROPERTY(config, NSString)
+RCT_EXPORT_VIEW_PROPERTY(contentItem, NSString)
+RCT_EXPORT_VIEW_PROPERTY(active, BOOL)
+
+@end

package/ios/ShortKitWidgetNativeView.swift

@@ -0,0 +1,168 @@
+import UIKit
+import ShortKit
+
+/// Fabric native view wrapping `ShortKitWidgetViewController` for use as
+/// a horizontal video carousel in React Native.
+///
+/// Props (set by RCTViewManager):
+/// - `config`: JSON string with WidgetConfig values
+/// - `items`: JSON string with ContentItem array
+@objc public class ShortKitWidgetNativeView: UIView {
+
+    // MARK: - Props
+
+    @objc public var config: String? {
+        didSet {
+            guard config != oldValue else { return }
+            applyConfig()
+        }
+    }
+
+    @objc public var items: String? {
+        didSet {
+            guard items != oldValue else { return }
+            applyItems()
+        }
+    }
+
+    // MARK: - Child VC
+
+    private var widgetVC: ShortKitWidgetViewController?
+    private var parsedConfig: WidgetConfig?
+
+    // MARK: - Lifecycle
+
+    public override func didMoveToWindow() {
+        super.didMoveToWindow()
+        if window != nil {
+            embedWidgetVCIfNeeded()
+        }
+    }
+
+    public override func willMove(toWindow newWindow: UIWindow?) {
+        super.willMove(toWindow: newWindow)
+        if newWindow == nil {
+            removeWidgetVC()
+        }
+    }
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        widgetVC?.view.frame = bounds
+    }
+
+    // MARK: - VC Containment
+
+    private func embedWidgetVCIfNeeded() {
+        guard widgetVC == nil else { return }
+        guard let sdk = ShortKitBridge.shared?.sdk else { return }
+        guard let parentVC = findParentViewController() else { return }
+
+        let widgetConfig = parsedConfig ?? WidgetConfig()
+
+        let vc = ShortKitWidgetViewController(shortKit: sdk, config: widgetConfig)
+        self.widgetVC = vc
+
+        parentVC.addChild(vc)
+        vc.view.frame = bounds
+        vc.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        addSubview(vc.view)
+        vc.didMove(toParent: parentVC)
+
+        // If items were already set, apply them
+        if let json = items, let contentItems = Self.parseContentItems(json) {
+            vc.configure(with: contentItems)
+        }
+    }
+
+    private func removeWidgetVC() {
+        guard let vc = widgetVC else { return }
+        vc.willMove(toParent: nil)
+        vc.view.removeFromSuperview()
+        vc.removeFromParent()
+        self.widgetVC = nil
+    }
+
+    // MARK: - Prop Application
+
+    private func applyConfig() {
+        guard let json = config else { return }
+        parsedConfig = Self.parseWidgetConfig(json)
+        if widgetVC != nil {
+            removeWidgetVC()
+            embedWidgetVCIfNeeded()
+        }
+    }
+
+    private func applyItems() {
+        guard let json = items, let contentItems = Self.parseContentItems(json) else { return }
+        widgetVC?.configure(with: contentItems)
+    }
+
+    // MARK: - Parsing
+
+    private static func parseWidgetConfig(_ json: String) -> WidgetConfig {
+        guard let data = json.data(using: .utf8),
+              let obj = try? JSONSerialization.jsonObject(with: data) as? [String: Any] else {
+            return WidgetConfig()
+        }
+
+        let cardCount = obj["cardCount"] as? Int ?? 3
+        let cardSpacing = obj["cardSpacing"] as? CGFloat ?? 8
+        let cornerRadius = obj["cornerRadius"] as? CGFloat ?? 12
+        let autoplay = obj["autoplay"] as? Bool ?? true
+        let muteOnStart = obj["muteOnStart"] as? Bool ?? true
+        let loop = obj["loop"] as? Bool ?? true
+        let rotationInterval = obj["rotationInterval"] as? TimeInterval ?? 10000
+
+        let clickAction: PlayerClickAction
+        switch obj["clickAction"] as? String {
+        case "feed": clickAction = .feed
+        case "mute": clickAction = .mute
+        case "none": clickAction = .none
+        default: clickAction = .feed
+        }
+
+        let overlayMode: VideoOverlayMode
+        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
+            }
+        } else {
+            overlayMode = .none
+        }
+
+        return WidgetConfig(
+            cardCount: cardCount,
+            cardSpacing: cardSpacing,
+            cornerRadius: cornerRadius,
+            autoplay: autoplay,
+            muteOnStart: muteOnStart,
+            loop: loop,
+            rotationInterval: rotationInterval / 1000.0, // JS sends ms, iOS expects seconds
+            clickAction: clickAction,
+            cardOverlay: overlayMode
+        )
+    }
+
+    private static func parseContentItems(_ json: String) -> [ContentItem]? {
+        guard let data = json.data(using: .utf8) else { return nil }
+        return try? JSONDecoder().decode([ContentItem].self, from: data)
+    }
+
+    // MARK: - Helpers
+
+    private func findParentViewController() -> UIViewController? {
+        var responder: UIResponder? = self
+        while let next = responder?.next {
+            if let vc = next as? UIViewController {
+                return vc
+            }
+            responder = next
+        }
+        return nil
+    }
+}

package/ios/ShortKitWidgetNativeViewManager.mm

@@ -0,0 +1,27 @@
+#import <React/RCTViewManager.h>
+
+#if __has_include(<ShortKitReactNative/ShortKitReactNative-Swift.h>)
+#import <ShortKitReactNative/ShortKitReactNative-Swift.h>
+#else
+#import "ShortKitReactNative-Swift.h"
+#endif
+
+@interface ShortKitWidgetViewManager : RCTViewManager
+@end
+
+@implementation ShortKitWidgetViewManager
+
+RCT_EXPORT_MODULE(ShortKitWidgetView)
+
++ (BOOL)requiresMainQueueSetup {
+  return YES;
+}
+
+- (UIView *)view {
+  return [[ShortKitWidgetNativeView alloc] init];
+}
+
+RCT_EXPORT_VIEW_PROPERTY(config, NSString)
+RCT_EXPORT_VIEW_PROPERTY(items, NSString)
+
+@end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shortkitsdk/react-native",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "ShortKit React Native SDK — short-form video feed",
   "react-native": "src/index",
   "source": "src/index",

package/src/CarouselOverlayManager.tsx

@@ -0,0 +1,71 @@
+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/ShortKitContext.ts

@@ -1,11 +1,14 @@
 import { createContext } from 'react';
 import type {
   ContentItem,
+  ImageCarouselItem,
+  CustomFeedItem,
   PlayerTime,
   PlayerState,
   CaptionTrack,
   ContentSignal,
   OverlayConfig,
+  CarouselOverlayConfig,
 } from './types';
 
 export interface ShortKitContextValue {
@@ -20,6 +23,7 @@ export interface ShortKitContextValue {
   activeCaptionTrack: CaptionTrack | null;
   activeCue: { text: string; startTime: number; endTime: number } | null;
   prefetchedAheadCount: number;
+  remainingContentCount: number;
   isActive: boolean;
   isTransitioning: boolean;
   lastOverlayTap: number;
@@ -42,10 +46,24 @@ export interface ShortKitContextValue {
   // SDK operations
   setUserId: (id: string) => void;
   clearUserId: () => void;
+  setFeedItems: (items: CustomFeedItem[]) => void;
+  appendFeedItems: (items: CustomFeedItem[]) => void;
+  fetchContent: (limit?: number) => Promise<ContentItem[]>;
+
+  // Carousel overlay state
+  currentCarouselItem: ImageCarouselItem | null;
+  nextCarouselItem: ImageCarouselItem | null;
+  isCarouselActive: boolean;
+  isCarouselTransitioning: boolean;
+
+  // 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;
 }
 
 export const ShortKitContext = createContext<ShortKitContextValue | null>(null);

package/src/ShortKitFeed.tsx

@@ -4,6 +4,7 @@ import type { ShortKitFeedProps } 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';
 
@@ -29,6 +30,7 @@ export function ShortKitFeed(props: ShortKitFeedProps) {
     onLoop,
     onFeedTransition,
     onFormatChange,
+    onContentTapped,
   } = props;
 
   const context = useContext(ShortKitContext);
@@ -37,6 +39,7 @@ export function ShortKitFeed(props: ShortKitFeedProps) {
   }
 
   const overlayConfig = context._overlayConfig;
+  const carouselOverlayConfig = context._carouselOverlayConfig;
 
   // ---------------------------------------------------------------------------
   // Subscribe to feed-level events and forward to callback props
@@ -109,6 +112,14 @@ export function ShortKitFeed(props: ShortKitFeedProps) {
       );
     }
 
+    if (onContentTapped) {
+      subscriptions.push(
+        NativeShortKitModule.onContentTapped((event) => {
+          onContentTapped(event.contentId, event.index);
+        }),
+      );
+    }
+
     return () => {
       for (const sub of subscriptions) {
         sub.remove();
@@ -121,6 +132,7 @@ export function ShortKitFeed(props: ShortKitFeedProps) {
     onLoop,
     onFeedTransition,
     onFormatChange,
+    onContentTapped,
   ]);
 
   // ---------------------------------------------------------------------------
@@ -133,6 +145,7 @@ export function ShortKitFeed(props: ShortKitFeedProps) {
         config="{}"
       />
       <OverlayManager overlay={overlayConfig} />
+      <CarouselOverlayManager carouselOverlay={carouselOverlayConfig} />
     </View>
   );
 }

package/src/ShortKitPlayer.tsx

@@ -0,0 +1,61 @@
+import React, { useContext, 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>`.
+ */
+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({
+      cornerRadius: cfg.cornerRadius ?? 12,
+      clickAction: cfg.clickAction ?? 'feed',
+      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]);
+
+  const serializedItem = useMemo(() => {
+    if (!contentItem) return undefined;
+    return JSON.stringify(contentItem);
+  }, [contentItem]);
+
+  return (
+    <View style={[styles.container, style]}>
+      <ShortKitPlayerView
+        style={styles.player}
+        config={serializedConfig}
+        contentItem={serializedItem}
+        active={active}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  player: {
+    flex: 1,
+  },
+});