@shortkitsdk/react-native 0.2.6 → 0.2.12

package/android/src/main/java/com/shortkit/reactnative/ReactOverlayHost.kt

@@ -0,0 +1,570 @@
+package com.shortkit.reactnative
+
+import android.content.Context
+import android.os.Bundle
+import android.os.Handler
+import android.os.Looper
+import android.view.MotionEvent
+import android.widget.FrameLayout
+import com.facebook.react.ReactApplication
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.interfaces.fabric.ReactSurface
+import com.facebook.react.runtime.ReactSurfaceImpl
+import com.shortkit.sdk.ShortKitPlayer
+import com.shortkit.sdk.VttCue
+import com.shortkit.sdk.model.ContentItem
+import com.shortkit.sdk.model.FeedScrollPhase
+import com.shortkit.sdk.model.PlayerState
+import com.shortkit.sdk.overlay.FeedOverlay
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
+import kotlinx.coroutines.cancel
+import kotlinx.coroutines.launch
+import org.json.JSONObject
+import java.util.UUID
+
+/**
+ * A [FrameLayout] that conforms to [FeedOverlay] and hosts a React Native
+ * Fabric [ReactSurface] for rendering the developer's React overlay component
+ * inside a feed cell.
+ *
+ * Each cell gets its own instance (via the overlay factory). The surface is
+ * created eagerly on the first [attach] call and reused across cell reuse cycles.
+ *
+ * Surface properties are set ONCE per item (in [configure]) to provide initial
+ * values. All subsequent dynamic state changes flow through native module events
+ * routed by [surfaceId], triggering React re-renders instead of Fabric remounts.
+ *
+ * Android equivalent of `react_native_sdk/ios/ReactOverlayHost.swift`.
+ */
+class ReactOverlayHost(context: Context) : FrameLayout(context), FeedOverlay {
+
+    private companion object {
+        const val TAG = "SK:OverlayHost"
+    }
+
+    // ------------------------------------------------------------------
+    // Configuration
+    // ------------------------------------------------------------------
+
+    /** Suffix for the surface module name (e.g. "news" -> "ShortKitOverlay_news"). */
+    var overlayName: String = "Default"
+
+    /** Unique identifier for this overlay instance, used for event routing. */
+    val surfaceId: String = UUID.randomUUID().toString()
+
+    // ------------------------------------------------------------------
+    // Fabric layout workaround
+    // ------------------------------------------------------------------
+
+    private val layoutHandler = Handler(Looper.getMainLooper())
+
+    /** Reusable runnable to avoid lambda allocation on every requestLayout. */
+    private val layoutRunnable = Runnable {
+        measure(
+            MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+        )
+        layout(left, top, right, bottom)
+    }
+
+    /**
+     * Fabric may suppress layout propagation to native child views inside
+     * the SDK's RecyclerView cells. Override to force a manual layout pass.
+     */
+    override fun requestLayout() {
+        super.requestLayout()
+        if (!isInLayoutPass) {
+            @Suppress("UNNECESSARY_SAFE_CALL")
+            layoutHandler?.post(layoutRunnable)
+        }
+    }
+
+    // ------------------------------------------------------------------
+    // State
+    // ------------------------------------------------------------------
+
+    private var surface: ReactSurface? = null
+    private var player: ShortKitPlayer? = null
+    private var currentItem: ContentItem? = null
+    private var isActive: Boolean = false
+
+    // Player state cache — always updated by flow subscriptions,
+    // but only emitted to JS when isActive == true.
+    private var cachedPlayerState: String = "idle"
+    private var cachedIsMuted: Boolean = true
+    private var cachedPlaybackRate: Double = 1.0
+    private var cachedCaptionsEnabled: Boolean = false
+    private var cachedActiveCue: JSONObject? = null
+    private var cachedFeedScrollPhase: String? = null
+
+    // Time coalescing (250ms)
+    private var cachedCurrentTime: Double = 0.0
+    private var cachedDuration: Double = 0.0
+    private var cachedBuffered: Double = 0.0
+    private var timeDirty: Boolean = false
+    private val handler = Handler(Looper.getMainLooper())
+    private var timeCoalesceRunnable: Runnable? = null
+
+    private var flowScope: CoroutineScope? = null
+    private var isInLayoutPass: Boolean = false
+
+    // ------------------------------------------------------------------
+    // Init
+    // ------------------------------------------------------------------
+
+    /** Height of the scrubber touch area in dp (matches styles.scrubberTouchArea). */
+    private val scrubberTouchHeightPx: Int
+        get() = (40 * resources.displayMetrics.density).toInt()
+
+    init {
+        setBackgroundColor(android.graphics.Color.TRANSPARENT)
+    }
+
+    // ------------------------------------------------------------------
+    // Touch: prevent feed scroll when scrubbing
+    // ------------------------------------------------------------------
+
+    /**
+     * When the user touches the bottom scrubber zone, immediately tell the
+     * parent RecyclerView to stop intercepting touch events. This prevents
+     * vertical feed swipes from stealing the horizontal scrub gesture.
+     *
+     * Must be done in native (not JS) because RecyclerView's
+     * onInterceptTouchEvent fires before the RN touch system processes
+     * the PanResponder grant.
+     */
+    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
+        if (ev.action == MotionEvent.ACTION_DOWN && height > 0) {
+            if (ev.y > height - scrubberTouchHeightPx) {
+                parent?.requestDisallowInterceptTouchEvent(true)
+            }
+        }
+        return super.onInterceptTouchEvent(ev)
+    }
+
+    // ------------------------------------------------------------------
+    // FeedOverlay
+    // ------------------------------------------------------------------
+
+    override fun attach(player: ShortKitPlayer) {
+        this.player = player
+        resubscribeToPlayer(player)
+    }
+
+    /** Whether the surface has been started at least once. */
+    private var surfaceHasStarted: Boolean = false
+
+    override fun configure(item: ContentItem) {
+        val isSameItem = item.id == currentItem?.id
+        currentItem = item
+        isActive = false
+        timeDirty = false
+        stopTimeCoalescing()
+
+        // Reset ALL cached state so recycled cells don't flash stale values.
+        cachedCurrentTime = 0.0
+        cachedDuration = 0.0
+        cachedBuffered = 0.0
+        cachedPlayerState = "idle"
+        cachedActiveCue = null
+        cachedFeedScrollPhase = null
+
+        if (surface == null) {
+            createSurfaceIfNeeded()
+            surfaceHasStarted = true
+        } else if (!surfaceHasStarted) {
+            (surface as? ReactSurfaceImpl)?.updateInitProps(buildInitialPropsBundle())
+            surfaceHasStarted = true
+        } else if (isSameItem) {
+            // Same item = deactivation only. The overlay already has this
+            // item's data from a previous swipe. Just deactivate (isActive
+            // set to false above, timer stopped). No event emission — avoids
+            // broadcasting to all 7 surfaces for no visual change.
+        } else {
+            // Different item — send via event for React tree diff (not
+            // updateInitProps which causes full Fabric remount).
+            val params = Arguments.createMap().apply {
+                putString("surfaceId", surfaceId)
+                putString("item", ShortKitBridge.serializeContentItemToJSON(item))
+            }
+            ShortKitBridge.shared?.emitEvent("onOverlayItemChanged", params)
+        }
+        // Pre-size the surface view
+        val parentView = parent as? android.view.View
+        val w = if (width > 0) width
+                else if (parentView != null && parentView.width > 0) parentView.width
+                else context.resources.displayMetrics.widthPixels
+        val h = if (height > 0) height
+                else if (parentView != null && parentView.height > 0) parentView.height
+                else context.resources.displayMetrics.heightPixels
+        measureAndLayoutSurfaceView(w, h)
+    }
+
+    override fun activatePlayback() {
+        isActive = true
+        startTimeCoalescing()
+
+        // Defer the event burst to the next tick.
+        handler.post {
+            if (isActive) {
+                emitFullState()
+            }
+        }
+    }
+
+    override fun fadeOutForTransition() {
+        // No-op. The JS overlay component handles fade via feedScrollPhase
+        // prop (dragging/settled), not these events. iOS ReactOverlayHost
+        // doesn't implement these methods at all. The previous implementation
+        // serialized the full ContentItem to JSON and emitted across the
+        // bridge to a listener that doesn't exist — 2-15ms of pure waste
+        // on every swipe.
+    }
+
+    override fun restoreFromTransition() {
+        // No-op. See fadeOutForTransition comment.
+    }
+
+    // ------------------------------------------------------------------
+    // View lifecycle
+    // ------------------------------------------------------------------
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+
+        // Re-subscribe to player flows if we were detached and reattached
+        // (RecyclerView cell recycling). onDetachedFromWindow cancels flowScope.
+        if (flowScope == null) {
+            player?.let { resubscribeToPlayer(it) }
+        }
+
+        // Force self-measurement using parent dimensions. The SDK adds us
+        // with MATCH_PARENT but RecyclerView may not have laid out the cell yet.
+        val parentView = parent as? android.view.View
+        if (parentView != null && parentView.width > 0 && parentView.height > 0 && (width == 0 || height == 0)) {
+            val wSpec = MeasureSpec.makeMeasureSpec(parentView.width, MeasureSpec.EXACTLY)
+            val hSpec = MeasureSpec.makeMeasureSpec(parentView.height, MeasureSpec.EXACTLY)
+            measure(wSpec, hSpec)
+            layout(0, 0, parentView.width, parentView.height)
+        }
+    }
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        // Cancel flow subscriptions to avoid emitting events for off-screen cells.
+        // Do NOT stop the surface — keep JS alive so subscriptions persist across
+        // RecyclerView detach/reattach cycles. This matches iOS behavior where the
+        // surface is never stopped (UICollectionView doesn't detach from window).
+        flowScope?.cancel()
+        flowScope = null
+        isActive = false
+        stopTimeCoalescing()
+    }
+
+    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+        super.onSizeChanged(w, h, oldw, oldh)
+        if (w > 0 && h > 0) {
+            measureAndLayoutSurfaceView(w, h)
+        }
+    }
+
+    /**
+     * Continuously enforce size on the ReactSurfaceView child.
+     *
+     * ReactSurfaceView.onMeasure only sizes correctly with EXACTLY mode
+     * specs. Fabric's async layout may reset the surface view to 0x0 after
+     * our initial measure. Override onLayout to re-push the correct
+     * dimensions on every layout pass — mirrors iOS's layoutSubviews()
+     * calling setMinimumSize/setMaximumSize in ReactOverlayHost.swift.
+     */
+    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+        isInLayoutPass = true
+        try {
+            super.onLayout(changed, left, top, right, bottom)
+            val w = right - left
+            val h = bottom - top
+            if (w > 0 && h > 0) {
+                measureAndLayoutSurfaceView(w, h)
+            } else {
+                // Host still 0x0 — try parent dimensions
+                val parentView = parent as? android.view.View
+                val pw = parentView?.width ?: 0
+                val ph = parentView?.height ?: 0
+                if (pw > 0 && ph > 0) {
+                    measureAndLayoutSurfaceView(pw, ph)
+                }
+            }
+        } finally {
+            isInLayoutPass = false
+        }
+    }
+
+    private fun measureAndLayoutSurfaceView(w: Int, h: Int) {
+        val sv = surface?.view ?: return
+        if (sv.width == w && sv.height == h) return // already correct
+        val wSpec = MeasureSpec.makeMeasureSpec(w, MeasureSpec.EXACTLY)
+        val hSpec = MeasureSpec.makeMeasureSpec(h, MeasureSpec.EXACTLY)
+        sv.measure(wSpec, hSpec)
+        sv.layout(0, 0, w, h)
+    }
+
+    // ------------------------------------------------------------------
+    // Surface Creation
+    // ------------------------------------------------------------------
+
+    private fun createSurfaceIfNeeded() {
+        if (surface != null) return
+
+        val appContext = context.applicationContext
+        val reactHost = (appContext as? ReactApplication)?.reactHost
+
+        if (reactHost == null) {
+            android.util.Log.e(TAG, "[$surfaceId] createSurface FAILED: reactHost is null")
+            return
+        }
+        val moduleName = "ShortKitOverlay_$overlayName"
+        val initialProps = buildInitialPropsBundle()
+
+        val newSurface = reactHost.createSurface(context, moduleName, initialProps)
+        surface = newSurface
+
+        val surfaceView = newSurface.view
+        if (surfaceView != null) {
+            surfaceView.layoutParams = LayoutParams(
+                LayoutParams.MATCH_PARENT,
+                LayoutParams.MATCH_PARENT
+            )
+            addView(surfaceView)
+        } else {
+            android.util.Log.e(TAG, "[$surfaceId] createSurface: surfaceView is NULL")
+        }
+
+        newSurface.start()
+
+        // The host may still be 0x0 at this point. Use the parent's dimensions.
+        val parentView = parent as? android.view.View
+        val w = if (width > 0) width else parentView?.width ?: 0
+        val h = if (height > 0) height else parentView?.height ?: 0
+        if (w > 0 && h > 0) {
+            measureAndLayoutSurfaceView(w, h)
+        }
+    }
+
+    /**
+     * Build a Bundle with the full initial state for the surface.
+     * Mirrors iOS's pushInitialProperties().
+     */
+    private fun buildInitialPropsBundle(): Bundle = Bundle().apply {
+        putString("surfaceId", surfaceId)
+        putBoolean("isActive", false)
+        putString("playerState", "idle")
+        putBoolean("isMuted", cachedIsMuted)
+        putDouble("playbackRate", cachedPlaybackRate)
+        putBoolean("captionsEnabled", cachedCaptionsEnabled)
+        currentItem?.let { item ->
+            putString("item", ShortKitBridge.serializeContentItemToJSON(item))
+        }
+        cachedActiveCue?.let { cue ->
+            putString("activeCue", cue.toString())
+        }
+        cachedFeedScrollPhase?.let { putString("feedScrollPhase", it) }
+    }
+
+    // ------------------------------------------------------------------
+    // Player Subscriptions
+    // ------------------------------------------------------------------
+
+    private fun resubscribeToPlayer(player: ShortKitPlayer) {
+        flowScope?.cancel()
+        val scope = CoroutineScope(Dispatchers.Main + SupervisorJob())
+        flowScope = scope
+
+        // Player state
+        scope.launch {
+            player.playerState.collect { state ->
+                cachedPlayerState = ShortKitBridge.playerStateString(state)
+                if (isActive) {
+                    val params = Arguments.createMap().apply {
+                        putString("surfaceId", surfaceId)
+                        putString("playerState", cachedPlayerState)
+                    }
+                    ShortKitBridge.shared?.emitEvent("onOverlayPlayerStateChanged", params)
+                }
+            }
+        }
+
+        // Muted
+        scope.launch {
+            player.isMuted.collect { muted ->
+                cachedIsMuted = muted
+                if (isActive) {
+                    val params = Arguments.createMap().apply {
+                        putString("surfaceId", surfaceId)
+                        putBoolean("isMuted", cachedIsMuted)
+                    }
+                    ShortKitBridge.shared?.emitEvent("onOverlayMutedChanged", params)
+                }
+            }
+        }
+
+        // Playback rate
+        scope.launch {
+            player.playbackRate.collect { rate ->
+                cachedPlaybackRate = rate.toDouble()
+                if (isActive) {
+                    val params = Arguments.createMap().apply {
+                        putString("surfaceId", surfaceId)
+                        putDouble("playbackRate", cachedPlaybackRate)
+                    }
+                    ShortKitBridge.shared?.emitEvent("onOverlayPlaybackRateChanged", params)
+                }
+            }
+        }
+
+        // Captions enabled
+        scope.launch {
+            player.captionsEnabled.collect { enabled ->
+                cachedCaptionsEnabled = enabled
+                if (isActive) {
+                    val params = Arguments.createMap().apply {
+                        putString("surfaceId", surfaceId)
+                        putBoolean("captionsEnabled", cachedCaptionsEnabled)
+                    }
+                    ShortKitBridge.shared?.emitEvent("onOverlayCaptionsEnabledChanged", params)
+                }
+            }
+        }
+
+        // Active cue (ms -> seconds)
+        scope.launch {
+            player.activeCue.collect { cue ->
+                cachedActiveCue = if (cue != null) {
+                    JSONObject().apply {
+                        put("text", cue.text)
+                        put("startTime", cue.startMs / 1000.0)
+                        put("endTime", cue.endMs / 1000.0)
+                    }
+                } else {
+                    null
+                }
+                if (isActive) {
+                    val params = Arguments.createMap().apply {
+                        putString("surfaceId", surfaceId)
+                        val cueJson = cachedActiveCue?.toString()
+                        if (cueJson != null) {
+                            putString("activeCue", cueJson)
+                        } else {
+                            putNull("activeCue")
+                        }
+                    }
+                    ShortKitBridge.shared?.emitEvent("onOverlayActiveCueChanged", params)
+                }
+            }
+        }
+
+        // Time (ms -> seconds, coalesced via handler)
+        scope.launch {
+            player.time.collect { time ->
+                cachedCurrentTime = time.currentMs / 1000.0
+                cachedDuration = time.durationMs / 1000.0
+                cachedBuffered = time.bufferedMs / 1000.0
+                if (isActive) {
+                    timeDirty = true
+                }
+            }
+        }
+
+        // Feed scroll phase
+        scope.launch {
+            player.feedScrollPhase.collect { phase ->
+                cachedFeedScrollPhase = when (phase) {
+                    is FeedScrollPhase.Dragging -> JSONObject().apply {
+                        put("phase", "dragging")
+                        put("fromId", phase.fromId)
+                    }.toString()
+                    is FeedScrollPhase.Settled -> """{"phase":"settled"}"""
+                }
+                if (isActive) {
+                    val params = Arguments.createMap().apply {
+                        putString("surfaceId", surfaceId)
+                        putString("feedScrollPhase", cachedFeedScrollPhase)
+                    }
+                    ShortKitBridge.shared?.emitEvent("onOverlayFeedScrollPhaseChanged", params)
+                }
+            }
+        }
+    }
+
+    // ------------------------------------------------------------------
+    // Time Coalescing (250ms)
+    // ------------------------------------------------------------------
+
+    private fun startTimeCoalescing() {
+        stopTimeCoalescing()
+        val runnable = object : Runnable {
+            override fun run() {
+                // Suppress time updates while seeking. On iOS, AVPlayer's time
+                // observer naturally stops firing during seeks. On Android,
+                // ExoPlayer's time flow keeps emitting the stale pre-seek
+                // position, causing the progress bar to oscillate between the
+                // seek target and the old position. Skip until seek completes.
+                if (isActive && timeDirty && cachedPlayerState != "seeking") {
+                    emitTimeUpdate()
+                    timeDirty = false
+                }
+                if (isActive) {
+                    handler.postDelayed(this, 250)
+                }
+            }
+        }
+        timeCoalesceRunnable = runnable
+        handler.postDelayed(runnable, 250)
+    }
+
+    private fun stopTimeCoalescing() {
+        timeCoalesceRunnable?.let { handler.removeCallbacks(it) }
+        timeCoalesceRunnable = null
+    }
+
+    private fun emitTimeUpdate() {
+        val params = Arguments.createMap().apply {
+            putString("surfaceId", surfaceId)
+            putDouble("current", cachedCurrentTime)
+            putDouble("duration", cachedDuration)
+            putDouble("buffered", cachedBuffered)
+        }
+        ShortKitBridge.shared?.emitEvent("onOverlayTimeUpdate", params)
+    }
+
+    // ------------------------------------------------------------------
+    // Full State Emission
+    // ------------------------------------------------------------------
+
+    /**
+     * Emit all cached state as individual events. Called from [activatePlayback]
+     * (deferred) to synchronize JS state after cell reuse.
+     */
+    private fun emitFullState() {
+        val bridge = ShortKitBridge.shared ?: return
+
+        val params = Arguments.createMap().apply {
+            putString("surfaceId", surfaceId)
+            putBoolean("isActive", true)
+            putString("playerState", cachedPlayerState)
+            putBoolean("isMuted", cachedIsMuted)
+            putDouble("playbackRate", cachedPlaybackRate)
+            putBoolean("captionsEnabled", cachedCaptionsEnabled)
+            val cueJson = cachedActiveCue?.toString()
+            if (cueJson != null) {
+                putString("activeCue", cueJson)
+            } else {
+                putNull("activeCue")
+            }
+            cachedFeedScrollPhase?.let { putString("feedScrollPhase", it) }
+                ?: putNull("feedScrollPhase")
+        }
+        bridge.emitEvent("onOverlayFullState", params)
+    }
+}