@shortkitsdk/react-native 0.2.12 → 0.2.14

package/ios/ReactCarouselOverlayHost.swift

@@ -5,8 +5,8 @@ import ShortKitSDK
 /// for rendering the developer's React carousel overlay component inside a feed cell.
 ///
 /// Unlike ReactOverlayHost, this does not subscribe to player state (carousels
-/// are image-based). It emits image URLs to JS for Image.prefetch() and pushes
-/// ImageCarouselItem data as appProperties.
+/// are image-based). It delivers `isActive` and `activeImageIndex` via bridge
+/// events (routed by surfaceId) to avoid Fabric remounts.
 @objc public class ReactCarouselOverlayHost: UIView, @unchecked Sendable, CarouselOverlay {
 
     // MARK: - Configuration
@@ -20,9 +20,6 @@ import ShortKitSDK
 
     // MARK: - Eager Surface Creation
 
-    /// Eagerly create the RN surface so it's ready before the first configure().
-    /// Called by the overlay factory right after setting surfacePresenter and moduleName.
-    /// Mirrors ReactOverlayHost.attach(player:) which does the same for video overlays.
     func prepareSurface() {
         createSurfaceIfNeeded()
     }
@@ -37,6 +34,11 @@ import ShortKitSDK
     private var surface: SKFabricSurfaceWrapper?
     private var surfaceView: UIView?
     private var pendingProps: [String: Any]?
+    private var isActive = false
+    private var activeImageIndex = 0
+
+    /// Unique identifier for this overlay instance, used for event routing.
+    let surfaceId = UUID().uuidString
 
     // MARK: - Init
 
@@ -57,11 +59,11 @@ import ShortKitSDK
     // MARK: - CarouselOverlay
 
     public func configure(with item: ImageCarouselItem) {
+        isActive = false
+        activeImageIndex = 0
         createSurfaceIfNeeded()
 
         // Replace remote URLs with local file URLs for any natively-cached images.
-        // The SDK's PrefetchManager downloads images into NSCache<NSString, UIImage>
-        // which RN can't access. Writing to temp files lets RN load instantly from disk.
         var modifiedItem = item
         if let cachedImage {
             var localImages: [CarouselImage] = []
@@ -85,10 +87,12 @@ import ShortKitSDK
             )
         }
 
-        // Build props — push now if surface exists, otherwise store for later
         if let data = try? JSONEncoder().encode(modifiedItem),
            let json = String(data: data, encoding: .utf8) {
-            let props: [String: Any] = ["item": json]
+            let props: [String: Any] = [
+                "surfaceId": surfaceId,
+                "item": json,
+            ]
             if let surface {
                 surface.setProperties(props)
             } else {
@@ -97,14 +101,35 @@ import ShortKitSDK
         }
     }
 
+    public func activatePlayback() {
+        isActive = true
+        bridge?.emit("onOverlayFullState", body: [
+            "surfaceId": surfaceId,
+            "isActive": true,
+            // Include required fields for the full state event
+            "playerState": "idle",
+            "isMuted": true,
+            "playbackRate": 1.0,
+            "captionsEnabled": false,
+            "activeCue": NSNull(),
+            "feedScrollPhase": NSNull(),
+        ])
+    }
+
+    public func updateActiveImage(index: Int) {
+        activeImageIndex = index
+        bridge?.emit("onCarouselActiveImageChanged", body: [
+            "surfaceId": surfaceId,
+            "activeImageIndex": index,
+        ])
+    }
+
     /// Write a UIImage to the temp directory, returning a file:// URL string.
-    /// Uses a hash of the remote URL as the filename to avoid duplicates.
     private func writeTempImage(_ image: UIImage, for remoteURL: String) -> String? {
         let hash = remoteURL.hash
         let fileName = "sk-carousel-\(abs(hash)).jpg"
         let fileURL = URL(fileURLWithPath: NSTemporaryDirectory()).appendingPathComponent(fileName)
 
-        // Skip if already written
         if FileManager.default.fileExists(atPath: fileURL.path) {
             return fileURL.absoluteString
         }
@@ -119,10 +144,7 @@ import ShortKitSDK
     }
 
     public func resetState() {
-        // Don't clear surface props — matches video overlay (ReactOverlayHost) pattern.
-        // configure() will overwrite with new props directly, letting React do an
-        // in-place re-render (old→new) instead of an unmount+remount (old→empty→new).
-        // The overlay's synchronous reset pattern handles state transitions.
+        // Don't clear surface props — configure() will overwrite.
     }
 
     // MARK: - Surface Creation
@@ -130,7 +152,6 @@ import ShortKitSDK
     private func createSurfaceIfNeeded() {
         guard surface == nil, let presenter = surfacePresenter else { return }
 
-        // Must always dispatch to main queue — see ReactOverlayHost for details.
         DispatchQueue.main.async { [weak self] in
             guard let self, self.surface == nil else { return }
             self.installSurface(presenter: presenter)
@@ -157,7 +178,6 @@ import ShortKitSDK
         surfaceView = view
         surface = surf
 
-        // Flush any props that arrived before surface was ready
         if let pending = pendingProps {
             surf.setProperties(pending)
             pendingProps = nil

package/ios/ReactOverlayHost.swift

@@ -126,6 +126,7 @@ import ShortKitSDK
     }
 
     public func configure(with item: ContentItem) {
+        let isSameItem = item.id == currentItem?.id
         currentItem = item
         isActive = false
         timeDirty = false
@@ -140,10 +141,12 @@ import ShortKitSDK
 
         createSurfaceIfNeeded()
 
-        // Set surface properties ONCE per item. This triggers a Fabric remount,
-        // which is desired on cell reuse (new content, fresh React state).
-        // All subsequent dynamic updates go through events, not setProperties().
-        pushInitialProperties()
+        // Only push properties if the surface already exists.
+        // If the surface is still being created asynchronously,
+        // installSurface() will call pushInitialProperties() when ready.
+        if surface != nil && !isSameItem {
+            pushInitialProperties()
+        }
     }
 
     public func activatePlayback() {
@@ -226,6 +229,15 @@ import ShortKitSDK
 
         // Push any pending properties now that the surface exists
         pushInitialProperties()
+
+        // If activatePlayback() was called before the surface was ready,
+        // emit the full state now that JS can receive events.
+        if isActive {
+            DispatchQueue.main.async { [weak self] in
+                guard let self, self.isActive else { return }
+                self.emitFullState()
+            }
+        }
     }
 
     // MARK: - Layout
@@ -404,10 +416,10 @@ import ShortKitSDK
             props["item"] = json
         }
 
-        // Initial values — may be stale by the time activatePlayback() fires,
-        // which is why activatePlayback() emits a full state flush via events.
-        props["isActive"] = false
-        props["playerState"] = "idle"
+        // Use current state — if activatePlayback() was called before the
+        // surface was created, isActive will already be true.
+        props["isActive"] = isActive
+        props["playerState"] = cachedPlayerState
         props["isMuted"] = cachedIsMuted
         props["playbackRate"] = cachedPlaybackRate
         props["captionsEnabled"] = cachedCaptionsEnabled

package/ios/ReactVideoCarouselOverlayHost.swift

@@ -0,0 +1,283 @@
+import UIKit
+import Combine
+import ShortKitSDK
+
+/// A UIView that conforms to `VideoCarouselOverlay` and hosts an `RCTFabricSurface`
+/// for rendering the developer's React video carousel overlay component inside a feed cell.
+///
+/// Pushes `VideoCarouselItem` and active video data as surface properties, and
+/// emits playback state (isActive, time, playerState, isMuted) via bridge events
+/// using the same event names as `ReactOverlayHost` (routed by `surfaceId`).
+@objc public class ReactVideoCarouselOverlayHost: UIView, @unchecked Sendable, VideoCarouselOverlay {
+
+    // MARK: - Configuration
+
+    var surfacePresenter: AnyObject?
+    weak var bridge: ShortKitBridge?
+
+    /// Module name for the RCTFabricSurface. Set by the overlay factory
+    /// based on the feed config's video carousel overlay name.
+    var videoCarouselOverlayModuleName: String = "ShortKitVideoCarouselOverlay"
+
+    // MARK: - Eager Surface Creation
+
+    func prepareSurface() {
+        createSurfaceIfNeeded()
+    }
+
+    // MARK: - State
+
+    private var surface: SKFabricSurfaceWrapper?
+    private var surfaceView: UIView?
+    private var pendingProps: [String: Any]?
+
+    /// Unique identifier for this overlay instance, used for event routing.
+    let surfaceId = UUID().uuidString
+
+    /// Cached carouselItem JSON — setProperties replaces all props, doesn't merge.
+    private var carouselItemJSON: String?
+
+    // Player state
+    private var player: ShortKitPlayer?
+    private var cancellables = Set<AnyCancellable>()
+    private var isActive = false
+    private var cachedPlayerState: String = "idle"
+    private var cachedIsMuted: Bool = true
+    private var cachedTime: (current: Double, duration: Double, buffered: Double) = (0, 0, 0)
+    private var timeCoalesceTimer: Timer?
+    private var timeDirty = false
+
+    // MARK: - Init
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        backgroundColor = .clear
+        isUserInteractionEnabled = true
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) is not supported")
+    }
+
+    deinit {
+        timeCoalesceTimer?.invalidate()
+        surface?.stop()
+    }
+
+    // MARK: - VideoCarouselOverlay
+
+    public func configure(with item: VideoCarouselItem) {
+        isActive = false
+        timeDirty = false
+        timeCoalesceTimer?.invalidate()
+        timeCoalesceTimer = nil
+        cachedTime = (0, 0, 0)
+        cachedPlayerState = "idle"
+
+        createSurfaceIfNeeded()
+
+        guard let data = try? JSONEncoder().encode(item),
+              let json = String(data: data, encoding: .utf8) else { return }
+        carouselItemJSON = json
+
+        var props: [String: Any] = [
+            "surfaceId": surfaceId,
+            "carouselItem": json,
+            "isActive": false,
+            "playerState": "idle",
+            "isMuted": cachedIsMuted,
+        ]
+        if let firstVideo = item.videos.first,
+           let videoData = try? JSONEncoder().encode(firstVideo),
+           let videoJSON = String(data: videoData, encoding: .utf8) {
+            props["activeVideo"] = videoJSON
+            props["activeVideoIndex"] = 0
+        }
+        if let surface {
+            surface.setProperties(props)
+        } else {
+            pendingProps = props
+        }
+    }
+
+    public func updateActiveVideo(index: Int, item: ContentItem) {
+        guard let data = try? JSONEncoder().encode(item),
+              let json = String(data: data, encoding: .utf8) else { return }
+
+        // Only emit when active — matches ReactOverlayHost pattern.
+        // During initial setup, configure() sets the first video via surface props.
+        // Before activation, the AsyncEventEmitter may not be initialized.
+        guard isActive else { return }
+
+        bridge?.emit("onVideoCarouselActiveVideoChanged", body: [
+            "surfaceId": surfaceId,
+            "activeVideo": json,
+            "activeVideoIndex": index,
+        ])
+    }
+
+    public func resetState() {
+        // Don't clear surface props — configure() will overwrite.
+    }
+
+    public func attach(player: ShortKitPlayer) {
+        self.player = player
+        subscribeToPlayer(player)
+        createSurfaceIfNeeded()
+    }
+
+    public func activatePlayback() {
+        isActive = true
+        startTimeCoalescing()
+
+        DispatchQueue.main.async { [weak self] in
+            guard let self, self.isActive else { return }
+            self.emitFullState()
+        }
+    }
+
+    public func deactivatePlayback() {
+        isActive = false
+        timeDirty = false
+        timeCoalesceTimer?.invalidate()
+        timeCoalesceTimer = nil
+    }
+
+    // MARK: - Player Subscriptions
+
+    private func subscribeToPlayer(_ player: ShortKitPlayer) {
+        cancellables.removeAll()
+        player.playerState
+            .receive(on: DispatchQueue.main)
+            .sink { [weak self] state in
+                guard let self else { return }
+                self.cachedPlayerState = Self.playerStateString(state)
+                if self.isActive {
+                    self.bridge?.emit("onOverlayPlayerStateChanged", body: [
+                        "surfaceId": self.surfaceId,
+                        "playerState": self.cachedPlayerState
+                    ])
+                }
+            }
+            .store(in: &cancellables)
+
+        player.isMuted
+            .receive(on: DispatchQueue.main)
+            .sink { [weak self] muted in
+                guard let self else { return }
+                self.cachedIsMuted = muted
+                if self.isActive {
+                    self.bridge?.emit("onOverlayMutedChanged", body: [
+                        "surfaceId": self.surfaceId,
+                        "isMuted": self.cachedIsMuted
+                    ])
+                }
+            }
+            .store(in: &cancellables)
+
+        player.time
+            .receive(on: DispatchQueue.main)
+            .sink { [weak self] time in
+                guard let self, self.isActive else { return }
+                self.cachedTime = (time.current, time.duration, time.buffered)
+                self.timeDirty = true
+            }
+            .store(in: &cancellables)
+    }
+
+    // MARK: - Time Coalescing
+
+    private func startTimeCoalescing() {
+        timeCoalesceTimer?.invalidate()
+        timeCoalesceTimer = Timer.scheduledTimer(withTimeInterval: 0.25, repeats: true) { [weak self] _ in
+            guard let self, self.timeDirty else { return }
+            self.timeDirty = false
+            self.bridge?.emit("onOverlayTimeUpdate", body: [
+                "surfaceId": self.surfaceId,
+                "current": self.cachedTime.current,
+                "duration": self.cachedTime.duration,
+                "buffered": self.cachedTime.buffered
+            ])
+        }
+    }
+
+    // MARK: - Full State Emission
+
+    private func emitFullState() {
+        bridge?.emit("onOverlayFullState", body: [
+            "surfaceId": surfaceId,
+            "isActive": true,
+            "playerState": cachedPlayerState,
+            "isMuted": cachedIsMuted,
+            "playbackRate": 1.0,
+            "captionsEnabled": false,
+            "activeCue": NSNull(),
+            "feedScrollPhase": NSNull(),
+        ])
+    }
+
+    // MARK: - Surface Creation
+
+    private func createSurfaceIfNeeded() {
+        guard surface == nil, let presenter = surfacePresenter else { return }
+
+        DispatchQueue.main.async { [weak self] in
+            guard let self, self.surface == nil else { return }
+            self.installSurface(presenter: presenter)
+        }
+    }
+
+    private func installSurface(presenter: AnyObject) {
+        guard let surf = SKFabricSurfaceWrapper(
+            presenter: presenter,
+            moduleName: videoCarouselOverlayModuleName,
+            initialProperties: [:]
+        ) else { return }
+        surf.start()
+
+        let view = surf.view
+        view.translatesAutoresizingMaskIntoConstraints = false
+        addSubview(view)
+        NSLayoutConstraint.activate([
+            view.topAnchor.constraint(equalTo: topAnchor),
+            view.leadingAnchor.constraint(equalTo: leadingAnchor),
+            view.trailingAnchor.constraint(equalTo: trailingAnchor),
+            view.bottomAnchor.constraint(equalTo: bottomAnchor),
+        ])
+        surfaceView = view
+        surface = surf
+
+        // Flush any props that arrived before surface was ready
+        if let pending = pendingProps {
+            surf.setProperties(pending)
+            pendingProps = nil
+        }
+    }
+
+    // MARK: - Layout
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        guard let surface else { return }
+        let size = bounds.size
+        guard size.width > 0, size.height > 0 else { return }
+        surface.setMinimumSize(size)
+        surface.setMaximumSize(size)
+    }
+
+    // MARK: - Helpers
+
+    private static func playerStateString(_ state: PlayerState) -> String {
+        switch state {
+        case .idle: return "idle"
+        case .loading: return "loading"
+        case .ready: return "ready"
+        case .playing: return "playing"
+        case .paused: return "paused"
+        case .seeking: return "seeking"
+        case .buffering: return "buffering"
+        case .ended: return "ended"
+        case .error(_): return "error"
+        }
+    }
+}

package/ios/ShortKitBridge.swift

@@ -651,6 +651,7 @@ import ShortKitSDK
         let feedSource: FeedSource = feedSourceStr == "custom" ? .custom : .algorithmic
 
         let carouselOverlay = parseCarouselOverlay(obj["carouselOverlay"] as? String)
+        let videoCarouselOverlay = parseVideoCarouselOverlay(obj["videoCarouselOverlay"] as? String)
 
         let filter = parseFeedFilter(obj["filter"] as? String)
 
@@ -662,6 +663,7 @@ import ShortKitSDK
             scrollAxis: scrollAxis,
             videoOverlay: videoOverlay,
             carouselOverlay: carouselOverlay,
+            videoCarouselOverlay: videoCarouselOverlay,
             surveyOverlay: .none,
             adOverlay: .none,
             muteOnStart: muteOnStart,
@@ -740,6 +742,39 @@ import ShortKitSDK
         return .none
     }
 
+    /// Parse a double-stringified video carousel overlay JSON into a `VideoCarouselOverlayMode`.
+    ///
+    /// Examples:
+    /// - `"\"none\""` -> `.none`
+    /// - `"{\"type\":\"custom\",\"name\":\"news\"}"` -> `.custom { ReactVideoCarouselOverlayHost() }`
+    private static func parseVideoCarouselOverlay(_ json: String?) -> VideoCarouselOverlayMode {
+        guard let json,
+              let data = json.data(using: .utf8),
+              let parsed = try? JSONSerialization.jsonObject(with: data) else {
+            return .none
+        }
+
+        if let str = parsed as? String, str == "none" {
+            return .none
+        }
+
+        if let obj = parsed as? [String: Any],
+           let type = obj["type"] as? String,
+           type == "custom" {
+            let name = obj["name"] as? String ?? "Default"
+            return .custom { @Sendable in
+                let host = ReactVideoCarouselOverlayHost()
+                host.surfacePresenter = ShortKitBridge.shared?.surfacePresenter
+                host.bridge = ShortKitBridge.shared
+                host.videoCarouselOverlayModuleName = "ShortKitVideoCarouselOverlay_\(name)"
+                host.prepareSurface()
+                return host
+            }
+        }
+
+        return .none
+    }
+
     /// Parse a double-stringified feedHeight JSON.
     /// e.g. `"{\"type\":\"fullscreen\"}"` or `"{\"type\":\"percentage\",\"value\":0.8}"`
     private static func parseFeedHeight(_ json: String?) -> FeedHeight {
@@ -800,6 +835,13 @@ import ShortKitSDK
                     continue
                 }
                 result.append(.imageCarousel(carouselItem))
+            case "videoCarousel":
+                guard let itemData = obj["item"] as? [String: Any],
+                      let itemJSON = try? JSONSerialization.data(withJSONObject: itemData),
+                      let carouselItem = try? JSONDecoder().decode(VideoCarouselItem.self, from: itemJSON) else {
+                    continue
+                }
+                result.append(.videoCarousel(carouselItem))
             default:
                 continue
             }

package/ios/ShortKitModule.mm

@@ -83,6 +83,8 @@ RCT_EXPORT_MODULE(ShortKitModule)
     @"onOverlayFeedScrollPhaseChanged",
     @"onOverlayTimeUpdate",
     @"onOverlayFullState",
+    @"onCarouselActiveImageChanged",
+    @"onVideoCarouselActiveVideoChanged",
   ];
 }
 
@@ -106,7 +108,6 @@ RCT_EXPORT_MODULE(ShortKitModule)
 
 - (void)emitEvent:(NSString *)name body:(NSDictionary *)body {
 #ifdef RCT_NEW_ARCH_ENABLED
-  // New Architecture: use the codegen EventEmitterCallback directly
   if (_eventEmitterCallback) {
     _eventEmitterCallback(std::string([name UTF8String]), body);
   }

package/ios/ShortKitSDK.xcframework/Info.plist

@@ -8,7 +8,7 @@
 			<key>BinaryPath</key>
 			<string>ShortKitSDK.framework/ShortKitSDK</string>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64-simulator</string>
+			<string>ios-arm64</string>
 			<key>LibraryPath</key>
 			<string>ShortKitSDK.framework</string>
 			<key>SupportedArchitectures</key>
@@ -17,14 +17,12 @@
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>BinaryPath</key>
 			<string>ShortKitSDK.framework/ShortKitSDK</string>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64</string>
+			<string>ios-arm64-simulator</string>
 			<key>LibraryPath</key>
 			<string>ShortKitSDK.framework</string>
 			<key>SupportedArchitectures</key>
@@ -33,6 +31,8 @@
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>