@shortkitsdk/react-native 0.1.0 → 0.2.1

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

@@ -2,6 +2,8 @@ package com.shortkit.reactnative
 
 import android.content.Context
 import android.content.ContextWrapper
+import android.os.Handler
+import android.os.Looper
 import android.util.Log
 import android.view.View
 import android.view.ViewGroup
@@ -36,6 +38,7 @@ class ShortKitFeedView(context: Context) : FrameLayout(context) {
 
     private var feedFragment: ShortKitFeedFragment? = null
     private var fragmentContainerId: Int = View.generateViewId()
+    private val handler = Handler(Looper.getMainLooper())
 
     init {
         id = fragmentContainerId
@@ -54,9 +57,12 @@ class ShortKitFeedView(context: Context) : FrameLayout(context) {
     /** Overlay for the upcoming cell (nativeID="overlay-next"). */
     private var nextOverlayView: View? = null
 
-    /** The page index from which the current scroll gesture started. */
+    /** The page index used for overlay transform calculations. */
     private var currentPage: Int = 0
 
+    /** Deferred page update to avoid flashing stale metadata. */
+    private var pageUpdateRunnable: Runnable? = null
+
     // -----------------------------------------------------------------------
     // Lifecycle
     // -----------------------------------------------------------------------
@@ -145,6 +151,8 @@ class ShortKitFeedView(context: Context) : FrameLayout(context) {
     }
 
     private fun teardownScrollTracking() {
+        pageUpdateRunnable?.let { handler.removeCallbacks(it) }
+        pageUpdateRunnable = null
         pageChangeCallback?.let { viewPager?.unregisterOnPageChangeCallback(it) }
         pageChangeCallback = null
         viewPager = null
@@ -162,6 +170,41 @@ class ShortKitFeedView(context: Context) : FrameLayout(context) {
         val cellHeight = height.toFloat()
         if (cellHeight <= 0) return
 
+        // Detect page change, but DEFER updating currentPage.
+        //
+        // Why: when the scroll settles on a new page, overlay-current still
+        // shows the OLD page's metadata (React hasn't processed OVERLAY_ACTIVATE
+        // yet). If we update currentPage immediately, delta snaps to 0 and
+        // overlay-current becomes visible with stale data.
+        //
+        // By deferring ~80ms, overlay-next (which already shows the correct
+        // data via NextOverlayProvider) stays visible at y=0 while React
+        // processes the state update.
+        if (positionOffset == 0f) {
+            if (position != currentPage && pageUpdateRunnable == null) {
+                val targetPage = position
+                val runnable = Runnable {
+                    currentPage = targetPage
+                    pageUpdateRunnable = null
+                    // Reapply overlay transforms now that currentPage is updated.
+                    // Without this, overlay-next (static NextOverlayProvider state)
+                    // stays visible at y=0 while overlay-current (live state) stays
+                    // hidden — no scroll event fires to trigger handleScrollOffset.
+                    val h = height.toFloat()
+                    currentOverlayView?.translationY = 0f
+                    nextOverlayView?.translationY = h
+                }
+                pageUpdateRunnable = runnable
+                handler.postDelayed(runnable, 80)
+            }
+        } else if (pageUpdateRunnable != null) {
+            // User is scrolling again — apply pending update immediately
+            // so transforms stay aligned for the new gesture.
+            handler.removeCallbacks(pageUpdateRunnable!!)
+            pageUpdateRunnable = null
+            currentPage = position
+        }
+
         // positionOffset is 0.0 when settled, approaches 1.0 during forward scroll.
         // position is the index of the page currently filling most of the screen.
         val delta: Float = if (position >= currentPage) {
@@ -172,11 +215,6 @@ class ShortKitFeedView(context: Context) : FrameLayout(context) {
             -(cellHeight - positionOffsetPixels.toFloat())
         }
 
-        // Update currentPage when the scroll settles
-        if (positionOffset == 0f) {
-            currentPage = position
-        }
-
         // Find the overlay views if not cached
         if (currentOverlayView == null || nextOverlayView == null) {
             findOverlayViews()
@@ -196,23 +234,40 @@ class ShortKitFeedView(context: Context) : FrameLayout(context) {
     }
 
     /**
-     * Find the sibling RN overlay views by nativeID. In the Fabric hierarchy,
-     * the ShortKitFeedView and the overlay containers are children of the
-     * same parent (wrapped by ShortKitFeed.tsx with overflow: hidden).
+     * Find the sibling RN overlay views by nativeID.
+     *
+     * In Fabric interop, this view may be wrapped in an intermediate
+     * ViewGroup, so `getParent()` may not be the React `<View>` container
+     * from ShortKitFeed.tsx. We walk up the ancestor chain until we find
+     * the overlays.
      */
     private fun findOverlayViews() {
-        val parent = parent as? ViewGroup ?: return
-
-        for (i in 0 until parent.childCount) {
-            val sibling = parent.getChildAt(i)
-            if (sibling === this) continue
-            if (currentOverlayView == null) {
-                currentOverlayView = ReactFindViewUtil.findView(sibling, "overlay-current")
-            }
-            if (nextOverlayView == null) {
-                nextOverlayView = ReactFindViewUtil.findView(sibling, "overlay-next")
+        var ancestor = parent as? ViewGroup ?: return
+        while (true) {
+            for (i in 0 until ancestor.childCount) {
+                val child = ancestor.getChildAt(i)
+                if (child === this || isOwnAncestor(child)) continue
+
+                if (currentOverlayView == null) {
+                    currentOverlayView = ReactFindViewUtil.findView(child, "overlay-current")
+                }
+                if (nextOverlayView == null) {
+                    nextOverlayView = ReactFindViewUtil.findView(child, "overlay-next")
+                }
             }
+            if (currentOverlayView != null && nextOverlayView != null) return
+            ancestor = ancestor.parent as? ViewGroup ?: return
+        }
+    }
+
+    /** Check if the given view is an ancestor of this view. */
+    private fun isOwnAncestor(view: View): Boolean {
+        var current: ViewParent? = parent
+        while (current != null) {
+            if (current === view) return true
+            current = current.parent
         }
+        return false
     }
 
     /** Recursively find the first [ViewPager2] in a view hierarchy. */

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

@@ -5,18 +5,18 @@ import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReactMethod
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.modules.core.DeviceEventManagerModule
+import com.shortkit.CarouselImage
 import com.shortkit.ContentItem
 import com.shortkit.ContentSignal
+import com.shortkit.CustomFeedItem
+import com.shortkit.ImageCarouselItem
 import com.shortkit.FeedConfig
 import com.shortkit.FeedHeight
+import com.shortkit.FeedSource
 import com.shortkit.FeedTransitionPhase
 import com.shortkit.JsonValue
-import com.shortkit.OverlayActionDelegate
 import com.shortkit.ShortKit
-import com.shortkit.ShortKitDelegate
-import com.shortkit.ShortKitError
 import com.shortkit.ShortKitPlayer
-import com.shortkit.SurveyOption
 import com.shortkit.VideoOverlayMode
 import com.shortkit.CarouselOverlayMode
 import com.shortkit.SurveyOverlayMode
@@ -30,8 +30,7 @@ import org.json.JSONArray
 import org.json.JSONObject
 
 class ShortKitModule(reactContext: ReactApplicationContext) :
-    NativeShortKitModuleSpec(reactContext),
-    ShortKitDelegate {
+    NativeShortKitModuleSpec(reactContext) {
 
     companion object {
         const val NAME = "ShortKitModule"
@@ -94,6 +93,7 @@ class ShortKitModule(reactContext: ReactApplicationContext) :
     override fun initialize(
         apiKey: String,
         config: String,
+        embedId: String?,
         clientAppName: String?,
         clientAppVersion: String?,
         customDimensions: String?
@@ -110,19 +110,27 @@ class ShortKitModule(reactContext: ReactApplicationContext) :
             context = context,
             apiKey = apiKey,
             config = feedConfig,
+            embedId = embedId,
             userId = null,
             adProvider = null,
             clientAppName = clientAppName,
             clientAppVersion = clientAppVersion,
             customDimensions = dims
         )
-        sdk.delegate = this
-        sdk.overlayActionDelegate = overlayDelegate
-
         this.shortKit = sdk
         shared = this
 
         subscribeToFlows(sdk.player)
+
+        sdk.delegate = object : com.shortkit.ShortKitDelegate {
+            override fun onContentTapped(contentId: String, index: Int) {
+                val params = Arguments.createMap().apply {
+                    putString("contentId", contentId)
+                    putInt("index", index)
+                }
+                sendEvent("onContentTapped", params)
+            }
+        }
     }
 
     @ReactMethod
@@ -220,98 +228,39 @@ class ShortKitModule(reactContext: ReactApplicationContext) :
     }
 
     // -----------------------------------------------------------------------
-    // ShortKitDelegate
+    // Custom feed
     // -----------------------------------------------------------------------
 
-    override fun onError(error: ShortKitError) {
-        val params = Arguments.createMap().apply {
-            when (error) {
-                is ShortKitError.NetworkError -> {
-                    putString("code", "network_error")
-                    putString("message", error.cause?.localizedMessage ?: "Network error")
-                }
-                is ShortKitError.ApiError -> {
-                    putString("code", "api_error")
-                    putString("message", error.message ?: "API error")
-                }
-                is ShortKitError.PlayerError -> {
-                    putString("code", error.code)
-                    putString("message", error.message ?: "Player error")
-                }
-                is ShortKitError.ConfigError -> {
-                    putString("code", "config_error")
-                    putString("message", error.message ?: "Config error")
-                }
-                is ShortKitError.AuthError -> {
-                    putString("code", "auth_error")
-                    putString("message", "Invalid API key")
-                }
-            }
-        }
-        sendEvent("onError", params)
-    }
-
-    override fun onShareTapped(item: ContentItem) {
-        val params = Arguments.createMap().apply {
-            putString("item", serializeContentItemToJSON(item))
-        }
-        sendEvent("onShareTapped", params)
+    @ReactMethod
+    override fun setFeedItems(items: String) {
+        val parsed = parseCustomFeedItems(items) ?: return
+        shortKit?.setFeedItems(parsed)
     }
 
-    override fun onSurveyResponse(surveyId: String, option: SurveyOption) {
-        val params = Arguments.createMap().apply {
-            putString("surveyId", surveyId)
-            putString("optionId", option.id)
-            putString("optionText", option.text)
-        }
-        sendEvent("onSurveyResponse", params)
+    @ReactMethod
+    override fun appendFeedItems(items: String) {
+        val parsed = parseCustomFeedItems(items) ?: return
+        shortKit?.appendFeedItems(parsed)
     }
 
-    // We implement the optional delegate methods as no-ops; events are handled
-    // via StateFlow/SharedFlow subscriptions instead.
-    override fun onFeedReady() {}
-    override fun onContentChanged(item: ContentItem) {}
-    override fun onFeedEmpty() {}
-
-    // -----------------------------------------------------------------------
-    // OverlayActionDelegate (separate object to avoid signature clash with
-    // ShortKitDelegate.onShareTapped)
-    // -----------------------------------------------------------------------
-
-    private val overlayDelegate = object : OverlayActionDelegate {
-        override fun onReadMoreTapped(item: ContentItem) {
-            val params = Arguments.createMap().apply {
-                putString("item", serializeContentItemToJSON(item))
-            }
-            sendEvent("onArticleTapped", params)
-        }
-
-        override fun onShareTapped(item: ContentItem) {
-            val params = Arguments.createMap().apply {
-                putString("item", serializeContentItemToJSON(item))
-            }
-            sendEvent("onOverlayShareTapped", params)
-        }
-
-        override fun onCommentTapped(item: ContentItem) {
-            val params = Arguments.createMap().apply {
-                putString("item", serializeContentItemToJSON(item))
-            }
-            sendEvent("onCommentTapped", params)
-        }
-
-        override fun onSaveTapped(item: ContentItem) {
-            val params = Arguments.createMap().apply {
-                putString("item", serializeContentItemToJSON(item))
-            }
-            sendEvent("onSaveTapped", params)
-        }
-
-        override fun onLikeTapped(item: ContentItem) {
-            val params = Arguments.createMap().apply {
-                putString("item", serializeContentItemToJSON(item))
+    @ReactMethod
+    override fun fetchContent(limit: Double, promise: com.facebook.react.bridge.Promise) {
+        val sdk = shortKit
+        if (sdk == null) {
+            promise.resolve("[]")
+            return
+        }
+        scope?.launch {
+            try {
+                val items = sdk.fetchContent(limit.toInt())
+                val arr = JSONArray()
+                for (item in items) {
+                    arr.put(JSONObject(serializeContentItemToJSON(item)))
+                }
+                promise.resolve(arr.toString())
+            } catch (e: Exception) {
+                promise.resolve("[]")
             }
-            sendEvent("onLikeTapped", params)
         }
     }
 
@@ -489,6 +438,16 @@ class ShortKitModule(reactContext: ReactApplicationContext) :
                 sendEvent("onPrefetchedAheadCountChanged", params)
             }
         }
+
+        // Remaining content count
+        newScope.launch {
+            player.remainingContentCount.collect { count ->
+                val params = Arguments.createMap().apply {
+                    putInt("count", count)
+                }
+                sendEvent("onRemainingContentCountChanged", params)
+            }
+        }
     }
 
     // -----------------------------------------------------------------------
@@ -529,6 +488,7 @@ class ShortKitModule(reactContext: ReactApplicationContext) :
     private fun contentItemMap(item: ContentItem): WritableMap {
         return Arguments.createMap().apply {
             putString("id", item.id)
+            item.playbackId?.let { putString("playbackId", it) }
             putString("title", item.title)
             item.description?.let { putString("description", it) }
             putDouble("duration", item.duration)
@@ -679,13 +639,17 @@ class ShortKitModule(reactContext: ReactApplicationContext) :
             val muteOnStart = obj.optBoolean("muteOnStart", true)
             val videoOverlay = parseVideoOverlay(obj.optString("overlay", null))
 
+            val feedSourceStr = obj.optString("feedSource", "algorithmic")
+            val feedSource = if (feedSourceStr == "custom") FeedSource.CUSTOM else FeedSource.ALGORITHMIC
+
             FeedConfig(
                 feedHeight = feedHeight,
                 videoOverlay = videoOverlay,
                 carouselOverlay = CarouselOverlayMode.None,
                 surveyOverlay = SurveyOverlayMode.None,
                 adOverlay = AdOverlayMode.None,
-                muteOnStart = muteOnStart
+                muteOnStart = muteOnStart,
+                feedSource = feedSource
             )
         } catch (_: Exception) {
             FeedConfig()
@@ -748,6 +712,54 @@ class ShortKitModule(reactContext: ReactApplicationContext) :
         }
     }
 
+    private fun parseCustomFeedItems(json: String): List<CustomFeedItem>? {
+        return try {
+            val arr = JSONArray(json)
+            val result = mutableListOf<CustomFeedItem>()
+            for (i in 0 until arr.length()) {
+                val obj = arr.getJSONObject(i)
+                when (obj.optString("type")) {
+                    "video" -> {
+                        val playbackId = obj.optString("playbackId", null) ?: continue
+                        result.add(CustomFeedItem.Video(playbackId))
+                    }
+                    "imageCarousel" -> {
+                        val itemObj = obj.optJSONObject("item") ?: continue
+                        val carouselItem = parseImageCarouselItem(itemObj) ?: continue
+                        result.add(CustomFeedItem.ImageCarousel(carouselItem))
+                    }
+                }
+            }
+            result.ifEmpty { null }
+        } catch (_: Exception) {
+            null
+        }
+    }
+
+    private fun parseImageCarouselItem(obj: JSONObject): ImageCarouselItem? {
+        val id = obj.optString("id", null) ?: return null
+        val imagesArr = obj.optJSONArray("images") ?: return null
+        val images = mutableListOf<CarouselImage>()
+        for (i in 0 until imagesArr.length()) {
+            val imgObj = imagesArr.getJSONObject(i)
+            images.add(CarouselImage(
+                url = imgObj.getString("url"),
+                alt = imgObj.optString("alt", null)
+            ))
+        }
+        return ImageCarouselItem(
+            id = id,
+            images = images,
+            autoScrollInterval = if (obj.has("autoScrollInterval")) obj.getDouble("autoScrollInterval") else null,
+            caption = obj.optString("caption", null),
+            title = obj.optString("title", null),
+            description = obj.optString("description", null),
+            author = obj.optString("author", null),
+            section = obj.optString("section", null),
+            articleUrl = obj.optString("articleUrl", null)
+        )
+    }
+
     /**
      * Parse optional custom dimensions JSON string into map.
      */

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

@@ -35,6 +35,10 @@ class ShortKitPackage : TurboReactPackage() {
     override fun createViewManagers(
         reactContext: ReactApplicationContext
     ): List<ViewManager<*, *>> {
-        return listOf(ShortKitFeedViewManager())
+        return listOf(
+            ShortKitFeedViewManager(),
+            ShortKitPlayerViewManager(),
+            ShortKitWidgetViewManager(),
+        )
     }
 }

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

@@ -0,0 +1,136 @@
+package com.shortkit.reactnative
+
+import android.content.Context
+import android.widget.FrameLayout
+import com.shortkit.sdk.config.PlayerClickAction
+import com.shortkit.sdk.config.PlayerConfig
+import com.shortkit.sdk.config.VideoOverlayMode
+import com.shortkit.sdk.model.ContentItem
+import com.shortkit.sdk.player.ShortKitPlayerView
+import org.json.JSONObject
+
+/**
+ * Fabric native view wrapping [ShortKitPlayerView] for use as a
+ * single-video player in React Native.
+ */
+class ShortKitPlayerNativeView(context: Context) : FrameLayout(context) {
+
+    private var playerView: ShortKitPlayerView? = null
+    private var configJson: String? = null
+    private var contentItemJson: String? = null
+
+    var config: String?
+        get() = configJson
+        set(value) {
+            if (value == configJson) return
+            configJson = value
+            rebuildIfNeeded()
+        }
+
+    var contentItem: String?
+        get() = contentItemJson
+        set(value) {
+            if (value == contentItemJson) return
+            contentItemJson = value
+            applyContentItem()
+        }
+
+    var active: Boolean = true
+        set(value) {
+            if (field == value) return
+            field = value
+            applyActive()
+        }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        rebuildIfNeeded()
+    }
+
+    override fun onDetachedFromWindow() {
+        playerView?.deactivate()
+        super.onDetachedFromWindow()
+    }
+
+    private fun rebuildIfNeeded() {
+        if (playerView != null) return
+
+        val sdk = ShortKitModule.shared?.sdk ?: return
+        val playerConfig = parsePlayerConfig(configJson)
+
+        val view = ShortKitPlayerView(context).apply {
+            layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        }
+        view.initialize(sdk, playerConfig)
+        addView(view)
+        playerView = view
+
+        applyContentItem()
+        if (active) view.activate()
+    }
+
+    private fun applyContentItem() {
+        val json = contentItemJson ?: return
+        val view = playerView ?: return
+        val item = parseContentItem(json) ?: return
+        view.configure(item)
+    }
+
+    private fun applyActive() {
+        val view = playerView ?: return
+        if (active) view.activate() else view.deactivate()
+    }
+
+    private fun parsePlayerConfig(json: String?): PlayerConfig {
+        if (json.isNullOrEmpty()) return PlayerConfig()
+        return try {
+            val obj = JSONObject(json)
+            PlayerConfig(
+                cornerRadius = obj.optDouble("cornerRadius", 12.0).toFloat(),
+                clickAction = when (obj.optString("clickAction", "feed")) {
+                    "feed" -> PlayerClickAction.FEED
+                    "mute" -> PlayerClickAction.MUTE
+                    "none" -> PlayerClickAction.NONE
+                    else -> PlayerClickAction.FEED
+                },
+                autoplay = obj.optBoolean("autoplay", true),
+                loop = obj.optBoolean("loop", true),
+                muteOnStart = obj.optBoolean("muteOnStart", true),
+                videoOverlay = parseOverlay(obj),
+            )
+        } catch (_: Exception) {
+            PlayerConfig()
+        }
+    }
+
+    private fun parseOverlay(obj: JSONObject): VideoOverlayMode {
+        val overlay = obj.opt("overlay") ?: return VideoOverlayMode.None
+        if (overlay is JSONObject && overlay.optString("type") == "custom") {
+            return VideoOverlayMode.Custom {
+                ShortKitOverlayBridge(context)
+            }
+        }
+        return VideoOverlayMode.None
+    }
+
+    private fun parseContentItem(json: String): ContentItem? {
+        return try {
+            val obj = JSONObject(json)
+            ContentItem(
+                id = obj.getString("id"),
+                title = obj.getString("title"),
+                description = obj.optString("description", null),
+                duration = obj.getDouble("duration"),
+                streamingUrl = obj.getString("streamingUrl"),
+                thumbnailUrl = obj.getString("thumbnailUrl"),
+                captionTracks = emptyList(),
+                customMetadata = null,
+                author = obj.optString("author", null),
+                articleUrl = obj.optString("articleUrl", null),
+                commentCount = if (obj.has("commentCount")) obj.getInt("commentCount") else null,
+            )
+        } catch (_: Exception) {
+            null
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+package com.shortkit.reactnative
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+
+@ReactModule(name = ShortKitPlayerViewManager.REACT_CLASS)
+class ShortKitPlayerViewManager : SimpleViewManager<ShortKitPlayerNativeView>() {
+
+    override fun getName(): String = REACT_CLASS
+
+    override fun createViewInstance(context: ThemedReactContext): ShortKitPlayerNativeView {
+        return ShortKitPlayerNativeView(context)
+    }
+
+    @ReactProp(name = "config")
+    fun setConfig(view: ShortKitPlayerNativeView, config: String?) {
+        view.config = config
+    }
+
+    @ReactProp(name = "contentItem")
+    fun setContentItem(view: ShortKitPlayerNativeView, contentItem: String?) {
+        view.contentItem = contentItem
+    }
+
+    @ReactProp(name = "active", defaultBoolean = true)
+    fun setActive(view: ShortKitPlayerNativeView, active: Boolean) {
+        view.active = active
+    }
+
+    companion object {
+        const val REACT_CLASS = "ShortKitPlayerView"
+    }
+}