@shortkitsdk/react-native 0.2.12 → 0.2.15

package/ios/ReactOverlayHost.swift

@@ -46,7 +46,9 @@ import ShortKitSDK
     private var cachedPlaybackRate: Double = 1.0
     private var cachedCaptionsEnabled: Bool = false
     private var cachedActiveCue: [String: Any]? = nil
-    private var cachedFeedScrollPhase: String? = nil
+    private var cachedActiveCueJson: String? = nil      // pre-serialized for bridge
+    private var cachedFeedScrollPhase: String? = nil     // already a JSON string
+    private var isDragging: Bool = false                  // true while scroll phase is .dragging
 
     // Time coalescing
     private var cachedTime: (current: Double, duration: Double, buffered: Double) = (0, 0, 0)
@@ -126,6 +128,7 @@ import ShortKitSDK
     }
 
     public func configure(with item: ContentItem) {
+        let isSameItem = item.id == currentItem?.id
         currentItem = item
         isActive = false
         timeDirty = false
@@ -136,14 +139,18 @@ import ShortKitSDK
         cachedTime = (0, 0, 0)
         cachedPlayerState = "idle"
         cachedActiveCue = nil
+        cachedActiveCueJson = nil
         cachedFeedScrollPhase = nil
+        isDragging = false
 
         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() {
@@ -162,30 +169,21 @@ import ShortKitSDK
         }
     }
 
-    /// Emit all cached state as individual events. Called from activatePlayback()
-    /// (deferred) and can be called whenever we need to synchronize JS state.
+    /// Emit all cached state as a single batched event. Called from
+    /// activatePlayback() (deferred) and on drag→settled transitions.
+    /// Uses pre-serialized JSON strings to avoid JSONSerialization on the
+    /// main thread during the swipe-settle critical path.
     private func emitFullState() {
-        var body: [String: Any] = [
+        bridge?.emit("onOverlayFullState", body: [
             "surfaceId": surfaceId,
             "isActive": true,
             "playerState": cachedPlayerState,
             "isMuted": cachedIsMuted,
             "playbackRate": cachedPlaybackRate,
             "captionsEnabled": cachedCaptionsEnabled,
-        ]
-        if let cue = cachedActiveCue,
-           let cueData = try? JSONSerialization.data(withJSONObject: cue),
-           let cueJson = String(data: cueData, encoding: .utf8) {
-            body["activeCue"] = cueJson
-        } else {
-            body["activeCue"] = NSNull()
-        }
-        if let scrollPhase = cachedFeedScrollPhase {
-            body["feedScrollPhase"] = scrollPhase
-        } else {
-            body["feedScrollPhase"] = NSNull()
-        }
-        bridge?.emit("onOverlayFullState", body: body)
+            "activeCue": cachedActiveCueJson ?? NSNull(),
+            "feedScrollPhase": cachedFeedScrollPhase ?? NSNull(),
+        ])
     }
 
     // MARK: - Surface Creation
@@ -226,6 +224,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
@@ -243,17 +250,21 @@ import ShortKitSDK
     // MARK: - Player Subscriptions
 
     private func subscribeToPlayer(_ player: ShortKitPlayer) {
+        // Player state, muted, playbackRate, captionsEnabled, and activeCue
+        // are suppressed during .dragging to avoid unnecessary bridge traffic
+        // for an overlay that is scrolling off screen. emitFullState() re-syncs
+        // all cached values when the scroll settles (or on cancelled swipe).
+
         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
-                    ])
-                }
+                guard self.isActive, !self.isDragging else { return }
+                self.bridge?.emit("onOverlayPlayerStateChanged", body: [
+                    "surfaceId": self.surfaceId,
+                    "playerState": self.cachedPlayerState
+                ])
             }
             .store(in: &cancellables)
 
@@ -262,12 +273,11 @@ import ShortKitSDK
             .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
-                    ])
-                }
+                guard self.isActive, !self.isDragging else { return }
+                self.bridge?.emit("onOverlayMutedChanged", body: [
+                    "surfaceId": self.surfaceId,
+                    "isMuted": self.cachedIsMuted
+                ])
             }
             .store(in: &cancellables)
 
@@ -276,12 +286,11 @@ import ShortKitSDK
             .sink { [weak self] rate in
                 guard let self else { return }
                 self.cachedPlaybackRate = Double(rate)
-                if self.isActive {
-                    self.bridge?.emit("onOverlayPlaybackRateChanged", body: [
-                        "surfaceId": self.surfaceId,
-                        "playbackRate": self.cachedPlaybackRate
-                    ])
-                }
+                guard self.isActive, !self.isDragging else { return }
+                self.bridge?.emit("onOverlayPlaybackRateChanged", body: [
+                    "surfaceId": self.surfaceId,
+                    "playbackRate": self.cachedPlaybackRate
+                ])
             }
             .store(in: &cancellables)
 
@@ -290,12 +299,11 @@ import ShortKitSDK
             .sink { [weak self] enabled in
                 guard let self else { return }
                 self.cachedCaptionsEnabled = enabled
-                if self.isActive {
-                    self.bridge?.emit("onOverlayCaptionsEnabledChanged", body: [
-                        "surfaceId": self.surfaceId,
-                        "captionsEnabled": self.cachedCaptionsEnabled
-                    ])
-                }
+                guard self.isActive, !self.isDragging else { return }
+                self.bridge?.emit("onOverlayCaptionsEnabledChanged", body: [
+                    "surfaceId": self.surfaceId,
+                    "captionsEnabled": self.cachedCaptionsEnabled
+                ])
             }
             .store(in: &cancellables)
 
@@ -303,30 +311,26 @@ import ShortKitSDK
             .receive(on: DispatchQueue.main)
             .sink { [weak self] cue in
                 guard let self else { return }
+                // Pre-serialize once; reused by emitFullState() and individual emission.
                 if let cue {
                     self.cachedActiveCue = [
                         "text": cue.text,
                         "startTime": cue.startTime,
                         "endTime": cue.endTime,
                     ]
-                } else {
-                    self.cachedActiveCue = nil
-                }
-                if self.isActive {
-                    if let cached = self.cachedActiveCue,
-                       let data = try? JSONSerialization.data(withJSONObject: cached),
+                    if let data = try? JSONSerialization.data(withJSONObject: self.cachedActiveCue!),
                        let json = String(data: data, encoding: .utf8) {
-                        self.bridge?.emit("onOverlayActiveCueChanged", body: [
-                            "surfaceId": self.surfaceId,
-                            "activeCue": json
-                        ])
-                    } else {
-                        self.bridge?.emit("onOverlayActiveCueChanged", body: [
-                            "surfaceId": self.surfaceId,
-                            "activeCue": NSNull()
-                        ])
+                        self.cachedActiveCueJson = json
                     }
+                } else {
+                    self.cachedActiveCue = nil
+                    self.cachedActiveCueJson = nil
                 }
+                guard self.isActive, !self.isDragging else { return }
+                self.bridge?.emit("onOverlayActiveCueChanged", body: [
+                    "surfaceId": self.surfaceId,
+                    "activeCue": self.cachedActiveCueJson ?? NSNull()
+                ])
             }
             .store(in: &cancellables)
 
@@ -334,18 +338,26 @@ import ShortKitSDK
             .receive(on: DispatchQueue.main)
             .sink { [weak self] phase in
                 guard let self else { return }
+                // Pre-serialize once; reused by emitFullState() and individual emission.
                 switch phase {
                 case .dragging(let from):
-                    let dict: [String: Any] = ["phase": "dragging", "fromId": from]
-                    if let data = try? JSONSerialization.data(withJSONObject: dict),
+                    self.isDragging = true
+                    if let data = try? JSONSerialization.data(withJSONObject: ["phase": "dragging", "fromId": from]),
                        let json = String(data: data, encoding: .utf8) {
                         self.cachedFeedScrollPhase = json
                     }
                 case .settled:
-                    let dict: [String: Any] = ["phase": "settled"]
-                    if let data = try? JSONSerialization.data(withJSONObject: dict),
-                       let json = String(data: data, encoding: .utf8) {
-                        self.cachedFeedScrollPhase = json
+                    let wasDragging = self.isDragging
+                    self.isDragging = false
+                    self.cachedFeedScrollPhase = "{\"phase\":\"settled\"}"
+
+                    // Re-sync all state that was suppressed during the drag.
+                    // Handles both normal swipes (new item's activatePlayback
+                    // will also fire) and cancelled swipes (same item, no
+                    // activatePlayback — this is the only re-sync path).
+                    if wasDragging, self.isActive {
+                        self.emitFullState()
+                        return  // fullState includes feedScrollPhase
                     }
                 }
                 if self.isActive {
@@ -360,7 +372,7 @@ import ShortKitSDK
         player.time
             .receive(on: DispatchQueue.main)
             .sink { [weak self] time in
-                guard let self, self.isActive else { return }
+                guard let self, self.isActive, !self.isDragging else { return }
                 self.cachedTime = (time.current, time.duration, time.buffered)
                 self.timeDirty = true
             }
@@ -404,17 +416,15 @@ 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
 
-        if let cue = cachedActiveCue,
-           let cueData = try? JSONSerialization.data(withJSONObject: cue),
-           let cueJson = String(data: cueData, encoding: .utf8) {
+        if let cueJson = cachedActiveCueJson {
             props["activeCue"] = cueJson
         }
 

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"
+        }
+    }
+}