@shortkitsdk/react-native 0.1.0 → 0.2.1

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.1.0",
+  "version": "0.2.1",
   "description": "ShortKit React Native SDK — short-form video feed",
   "react-native": "src/index",
   "source": "src/index",

package/src/ShortKitContext.ts

@@ -1,6 +1,7 @@
 import { createContext } from 'react';
 import type {
   ContentItem,
+  CustomFeedItem,
   PlayerTime,
   PlayerState,
   CaptionTrack,
@@ -20,6 +21,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,6 +44,9 @@ export interface ShortKitContextValue {
   // SDK operations
   setUserId: (id: string) => void;
   clearUserId: () => void;
+  setFeedItems: (items: CustomFeedItem[]) => void;
+  appendFeedItems: (items: CustomFeedItem[]) => void;
+  fetchContent: (limit?: number) => Promise<ContentItem[]>;
 
   // Internal — used by ShortKitFeed to render custom overlays
   /** @internal */

package/src/ShortKitFeed.tsx

@@ -29,11 +29,7 @@ export function ShortKitFeed(props: ShortKitFeedProps) {
     onLoop,
     onFeedTransition,
     onFormatChange,
-    onArticleTapped,
-    onCommentTapped,
-    onOverlayShareTapped,
-    onSaveTapped,
-    onLikeTapped,
+    onContentTapped,
   } = props;
 
   const context = useContext(ShortKitContext);
@@ -114,47 +110,10 @@ export function ShortKitFeed(props: ShortKitFeedProps) {
       );
     }
 
-    if (onArticleTapped) {
+    if (onContentTapped) {
       subscriptions.push(
-        NativeShortKitModule.onArticleTapped((event) => {
-          const item = deserializeContentItem(event.item);
-          if (item) onArticleTapped(item);
-        }),
-      );
-    }
-
-    if (onCommentTapped) {
-      subscriptions.push(
-        NativeShortKitModule.onCommentTapped((event) => {
-          const item = deserializeContentItem(event.item);
-          if (item) onCommentTapped(item);
-        }),
-      );
-    }
-
-    if (onOverlayShareTapped) {
-      subscriptions.push(
-        NativeShortKitModule.onOverlayShareTapped((event) => {
-          const item = deserializeContentItem(event.item);
-          if (item) onOverlayShareTapped(item);
-        }),
-      );
-    }
-
-    if (onSaveTapped) {
-      subscriptions.push(
-        NativeShortKitModule.onSaveTapped((event) => {
-          const item = deserializeContentItem(event.item);
-          if (item) onSaveTapped(item);
-        }),
-      );
-    }
-
-    if (onLikeTapped) {
-      subscriptions.push(
-        NativeShortKitModule.onLikeTapped((event) => {
-          const item = deserializeContentItem(event.item);
-          if (item) onLikeTapped(item);
+        NativeShortKitModule.onContentTapped((event) => {
+          onContentTapped(event.contentId, event.index);
         }),
       );
     }
@@ -171,11 +130,7 @@ export function ShortKitFeed(props: ShortKitFeedProps) {
     onLoop,
     onFeedTransition,
     onFormatChange,
-    onArticleTapped,
-    onCommentTapped,
-    onOverlayShareTapped,
-    onSaveTapped,
-    onLikeTapped,
+    onContentTapped,
   ]);
 
   // ---------------------------------------------------------------------------

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,
+  },
+});