@onekeyfe/react-native-native-list 3.0.157-alpha.254 → 3.0.157-alpha.255

package/android/build.gradle

@@ -94,11 +94,18 @@ repositories {
 }
 
 def kotlinVersion = getExtOrDefault("kotlinVersion")
+// Keep native media preview formats aligned with react-native-video's default.
+def media3Version = rootProject.ext.has("media3Version") ? rootProject.ext.get("media3Version") : "1.4.1"
 
 dependencies {
   implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlinVersion"
   implementation "androidx.recyclerview:recyclerview:1.4.0"
+  implementation "androidx.media3:media3-exoplayer:$media3Version"
+  implementation "androidx.media3:media3-exoplayer-hls:$media3Version"
+  implementation "androidx.media3:media3-exoplayer-dash:$media3Version"
+  implementation "androidx.media3:media3-ui:$media3Version"
+  implementation "androidx.media3:media3-datasource-okhttp:$media3Version"
   implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"
   implementation project(":react-native-nitro-modules")
   implementation project(":onekeyfe_react-native-native-logger")

package/android/src/main/java/com/onekey/nativelist/HybridNativeList.kt

@@ -11,6 +11,26 @@ class HybridNativeList(context: ThemedReactContext) : HybridNativeListSpec() {
 
   override val view: View = hostView
 
+  override var scrollPositionThresholdsJson: String = ""
+    set(value) {
+      if (field == value) return
+      field = value
+      dispatchToUi { hostView.setScrollPositionThresholdsJson(value) }
+    }
+
+  override var onScrollPositionThresholdChange: ((isBeyondThreshold: Boolean) -> Unit)? = null
+    set(value) {
+      field = value
+      dispatchToUi { hostView.onScrollPositionThresholdChange = value }
+    }
+
+  override var containerSlotHeightsJson: String = "[]"
+    set(value) {
+      if (field == value) return
+      field = value
+      dispatchToUi { hostView.setContainerSlotHeightsJson(value) }
+    }
+
   override var snapshotJson: String = ""
     get() = field
     set(value) {

package/android/src/main/java/com/onekey/nativelist/NativeListActivityDetailsView.kt

@@ -0,0 +1,179 @@
+package com.margelo.nitro.nativelist
+
+import android.graphics.drawable.GradientDrawable
+import android.text.Spannable
+import android.text.SpannableStringBuilder
+import android.text.style.AbsoluteSizeSpan
+import android.view.Gravity
+import android.view.View
+import android.widget.LinearLayout
+import com.facebook.react.uimanager.ThemedReactContext
+import kotlin.math.roundToInt
+import org.json.JSONObject
+
+/** Bounded rich activity fields; no wallet or transaction semantics live here. */
+internal class NativeListActivityDetailsView(private val reactContext: ThemedReactContext) : LinearLayout(reactContext) {
+  var onAction: ((String, View, String, Int) -> Unit)? = null
+  private var sourceScale = false
+  private val main = LinearLayout(context).apply { orientation = HORIZONTAL; gravity = Gravity.CENTER_VERTICAL }
+  private val visual = NativeListLeadingVisual(reactContext)
+  private val identity = LinearLayout(context).apply { orientation = VERTICAL }
+  private val titleLine = LinearLayout(context).apply { orientation = HORIZONTAL; gravity = Gravity.CENTER_VERTICAL }
+  private val title = NativeListTextView(context)
+  private val description = NativeListTextView(context)
+  private val status = NativeListTextView(context)
+  private val amounts = LinearLayout(context).apply { orientation = VERTICAL }
+  private val fee = LinearLayout(context).apply { orientation = VERTICAL; gravity = Gravity.END }
+  private val feeLabel = NativeListTextView(context)
+  private val feeLine = LinearLayout(context).apply { orientation = HORIZONTAL; gravity = Gravity.END }
+  private val feePrimary = NativeListTextView(context)
+  private val feeSecondary = NativeListTextView(context)
+  private val actions = LinearLayout(context).apply { orientation = HORIZONTAL }
+  private val amountViews = mutableListOf<AmountView>()
+  private val badges = mutableListOf<View>()
+
+  init {
+    orientation = VERTICAL
+    titleLine.addView(title, LayoutParams(0, -2, 1f))
+    identity.addView(titleLine)
+    identity.addView(description)
+    identity.addView(status)
+    feeLine.addView(feePrimary); feeLine.addView(feeSecondary)
+    fee.addView(feeLabel); fee.addView(feeLine)
+    main.addView(visual)
+    main.addView(identity, LayoutParams(0, -2, 1f))
+    main.addView(amounts)
+    main.addView(fee)
+    addView(main, LayoutParams(-1, -2))
+    addView(actions, LayoutParams(-1, -2))
+  }
+  private fun dp(value: Int) = if (sourceScale) (value * resources.displayMetrics.density).roundToInt() else NativeListScale.dp(resources, value)
+  private fun px(value: Double) = (value * resources.displayMetrics.density).roundToInt()
+  private fun color(tone: String, theme: JSONObject?): Int {
+    val (key, fallback) = when (tone) {
+      "positive", "success" -> "positive" to "#218358"
+      "negative", "danger" -> "negative" to "#CE2C31"
+      "secondary" -> "secondaryText" to "#646464"
+      "warning" -> "warning" to "#AB6400"
+      "info" -> "info" to "#007BEF"
+      else -> "primaryText" to "#202020"
+    }
+    return parseNativeListColor(theme?.optString(key, fallback) ?: fallback)
+  }
+  private fun text(label: NativeListTextView, value: String, style: JSONObject?, size: Float,
+                   ink: Int, line: Int, weight: String = "regular", lines: Int = 1) {
+    NativeListResolvedText.resolve(context, value, style, size, weight, ink, line, lines, sourceScale).bind(label)
+  }
+  fun bind(item: NativeListItem, theme: JSONObject?, sourceScale: Boolean) {
+    this.sourceScale = sourceScale
+    val data = item.json
+    val style = data.optJSONObject("style") ?: JSONObject()
+    val image = style.optJSONObject("image") ?: JSONObject()
+    val table = data.optString("presentation") == "table"
+    val gap = if (style.has("leadingGap")) px(style.optDouble("leadingGap")) else dp(12)
+    val iw = if (image.has("width")) px(image.optDouble("width")) else dp(40)
+    visual.layoutParams = LayoutParams(iw, if (image.has("height")) px(image.optDouble("height")) else dp(40)).apply { marginEnd = gap }
+    visual.bind(data.optJSONObject("leading") ?: JSONObject(), image, item.key, theme, false, sourceScale, data.optJSONObject("secondaryLeading"))
+    amounts.layoutParams = if (table) LayoutParams(0, -2, 1f).apply { marginStart = gap } else LayoutParams(-2, -2).apply { marginStart = gap }
+    text(title, data.optString("title"), style.optJSONObject("title"), 16f, color("primary", theme), 24, "medium")
+    text(description, data.optString("description"), style.optJSONObject("description"), 14f, color("secondary", theme), 20, lines = 2)
+    text(status, data.optString("status"), style.optJSONObject("status"), 12f, color("secondary", theme), 16)
+    description.setOnClickListener(null)
+    val descriptionKey = data.optString("descriptionActionKey")
+    description.isClickable = descriptionKey.isNotEmpty()
+    if (descriptionKey.isNotEmpty()) description.setOnClickListener { onAction?.invoke(descriptionKey, description, "description", 0) }
+    for (view in listOf(description, status)) (view.layoutParams as LayoutParams).topMargin = if (style.has("lineGap")) px(style.optDouble("lineGap")) else 0
+    badges.forEach(titleLine::removeView); badges.clear()
+    val badgeData = data.optJSONArray("badges")
+    for (index in 0 until (badgeData?.length() ?: 0)) {
+      val descriptor = badgeData!!.getJSONObject(index)
+      val label = NativeListTextView(context)
+      val ink = color(descriptor.optString("tone"), theme)
+      text(label, descriptor.optString("text"), null, 12f, ink, 16, "medium")
+      label.setPadding(dp(4), 0, dp(4), 0)
+      label.background = GradientDrawable().apply { setColor((ink and 0x00ffffff) or 0x19000000); cornerRadius = dp(4).toFloat() }
+      titleLine.addView(label, LayoutParams(-2, -2).apply { marginStart = if (style.has("titleBadgeGap")) px(style.optDouble("titleBadgeGap")) else dp(4) })
+      badges.add(label)
+    }
+    val amountData = data.optJSONArray("amounts")
+    val count = amountData?.length() ?: 0
+    while (amountViews.size > count) { val child = amountViews.removeAt(amountViews.lastIndex); child.recycle(); amounts.removeView(child) }
+    while (amountViews.size < count) { val child = AmountView(); amountViews.add(child); amounts.addView(child) }
+    for (index in 0 until count) {
+      val descriptor = amountData!!.getJSONObject(index)
+      amountViews[index].bind(descriptor, "${item.key}:${descriptor.optString("key")}", style, theme, table)
+      amountViews[index].layoutParams = LayoutParams(-1, -2).apply { topMargin = if (index == 0) 0 else if (style.has("trailingGap")) px(style.optDouble("trailingGap")) else dp(2) }
+    }
+    val feeData = data.optJSONObject("fee")
+    fee.visibility = if (feeData == null) GONE else VISIBLE
+    fee.alpha = if (feeData?.optBoolean("hidden") == true) 0f else 1f
+    fee.layoutParams = LayoutParams(-2, -2).apply { marginStart = gap }
+    text(feeLabel, feeData?.optString("label") ?: "", style.optJSONObject("secondaryAmount"), 12f, color("secondary", theme), 16)
+    text(feePrimary, feeData?.optString("primary") ?: "", style.optJSONObject("secondaryAmount"), 14f, color("primary", theme), 20)
+    text(feeSecondary, feeData?.optString("secondary") ?: "", style.optJSONObject("secondaryAmount"), 12f, color("secondary", theme), 16)
+    (feeSecondary.layoutParams as LayoutParams).marginStart = dp(4)
+    applySegments(feePrimary, feeData?.optJSONArray("primaryTextSegments"), style.optJSONObject("secondaryAmount")?.optDouble("fontSize", 14.0) ?: 14.0)
+    applySegments(feeSecondary, feeData?.optJSONArray("secondaryTextSegments"), style.optJSONObject("secondaryAmount")?.optDouble("fontSize", 12.0) ?: 12.0)
+    actions.removeAllViews()
+    val actionData = data.optJSONArray("footerActions")
+    actions.visibility = if ((actionData?.length() ?: 0) == 0) GONE else VISIBLE
+    actions.layoutParams = LayoutParams(-1, -2).apply { marginStart = iw + gap; topMargin = dp(8) }
+    for (index in 0 until (actionData?.length() ?: 0)) {
+      val descriptor = actionData!!.getJSONObject(index)
+      val button = NativeListTextView(context)
+      text(button, descriptor.optString("label"), null, 14f, color(descriptor.optString("tone"), theme), 20, "medium")
+      button.setPadding(dp(8), dp(4), dp(8), dp(4))
+      button.background = GradientDrawable().apply { setColor(parseNativeListColor(theme?.optString("strongBackground", "#F0F0F0") ?: "#F0F0F0")); cornerRadius = dp(8).toFloat() }
+      button.isEnabled = !data.optBoolean("disabled") && !descriptor.optBoolean("disabled")
+      button.setOnClickListener { onAction?.invoke(descriptor.optString("key"), button, "footerAction", index) }
+      actions.addView(button, LayoutParams(-2, -2).apply { marginEnd = dp(8) })
+    }
+  }
+  private fun applySegments(label: NativeListTextView, segments: org.json.JSONArray?, fontSize: Double) {
+    if (segments == null || segments.length() == 0) return
+    val fullText = (0 until segments.length()).joinToString("") { segments.getJSONObject(it).optString("text") }
+    val styled = if (label.text.toString() == fullText) SpannableStringBuilder(label.text) else SpannableStringBuilder(fullText)
+    var start = 0
+    for (index in 0 until segments.length()) {
+      val segment = segments.getJSONObject(index)
+      val end = start + segment.optString("text").length
+      if (segment.optString("style") == "subscript") {
+        // Match NumberSizeableText: shrink the zero count without moving its baseline.
+        val size = kotlin.math.ceil(fontSize * 0.6) * label.textSize / fontSize
+        styled.setSpan(AbsoluteSizeSpan(size.roundToInt()), start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+      }
+      start = end
+    }
+    label.text = styled
+  }
+  fun recycle() { visual.recycle(); amountViews.forEach { it.recycle() }; description.setOnClickListener(null); actions.removeAllViews() }
+  fun dispose() { recycle(); visual.dispose(); amountViews.forEach { it.dispose() } }
+
+  private inner class AmountView : LinearLayout(context) {
+    private val leading = NativeListLeadingVisual(reactContext)
+    private val labels = LinearLayout(context).apply { orientation = VERTICAL }
+    private val primary = NativeListTextView(context)
+    private val secondary = NativeListTextView(context)
+    init {
+      orientation = HORIZONTAL; gravity = Gravity.CENTER_VERTICAL
+      labels.addView(primary); labels.addView(secondary)
+      addView(leading); addView(labels, LayoutParams(0, -2, 1f))
+    }
+    fun bind(data: JSONObject, key: String, style: JSONObject, theme: JSONObject?, table: Boolean) {
+      val visualData = data.optJSONObject("leading")
+      leading.visibility = if (visualData == null) GONE else VISIBLE
+      leading.layoutParams = LayoutParams(dp(20), dp(20)).apply { marginEnd = dp(6) }
+      if (visualData != null) leading.bind(visualData, JSONObject().put("width", 20).put("height", 20), key, theme, false, sourceScale) else leading.recycle()
+      val primaryStyle = JSONObject(style.optJSONObject("primaryAmount")?.toString() ?: "{}")
+      if (!primaryStyle.has("alignment")) primaryStyle.put("alignment", if (table) "start" else "end")
+      text(primary, data.optString("text"), primaryStyle, 16f, color(data.optString("tone"), theme), 24, "medium")
+      applySegments(primary, data.optJSONArray("textSegments"), primaryStyle.optDouble("fontSize", 16.0))
+      val secondaryStyle = JSONObject(style.optJSONObject("secondaryAmount")?.toString() ?: "{}")
+      if (!secondaryStyle.has("alignment")) secondaryStyle.put("alignment", if (table) "start" else "end")
+      text(secondary, data.optString("secondaryText"), secondaryStyle, 14f, color("secondary", theme), 20)
+      applySegments(secondary, data.optJSONArray("secondaryTextSegments"), secondaryStyle.optDouble("fontSize", 14.0))
+    }
+    fun recycle() { leading.recycle() }
+    fun dispose() { leading.dispose() }
+  }
+}

package/android/src/main/java/com/onekey/nativelist/NativeListActivityRenderer.kt

@@ -9,6 +9,7 @@ import org.json.JSONObject
 
 internal class NativeListActivityRowView(context: ThemedReactContext) :
   NativeListRendererRowView(context) {
+  private val details = NativeListActivityDetailsView(context)
   private val content =
     LinearLayout(context).apply {
       orientation = HORIZONTAL
@@ -33,7 +34,7 @@ internal class NativeListActivityRowView(context: ThemedReactContext) :
   private val values = List(2) { NativeListTextView(context) }
   private val actions = LinearLayout(context).apply { orientation = HORIZONTAL }
   private val buttons = List(3) { NativeListTextView(context) }
-  override val assetFields = listOf("leading", "secondaryLeading")
+  override val assetFields = listOf("leading", "secondaryLeading", "amounts")
 
   init {
     titleLine.addView(title, LayoutParams(0, LayoutParams.WRAP_CONTENT, 1f))
@@ -48,10 +49,13 @@ internal class NativeListActivityRowView(context: ThemedReactContext) :
     content.addView(amounts)
     addView(content, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT))
     addView(actions)
+    addView(details, LayoutParams(-1, -2))
+    details.visibility = GONE
+    details.onAction = { key, view, source, slot -> emitAction(key, view, source, slot) }
   }
 
   override fun defaultHeight(item: NativeListItem, layout: String) =
-    if ((item.json.optJSONArray("footerActions")?.length() ?: 0) > 0) 104 else 60
+    if (item.json.has("amounts")) 0 else if ((item.json.optJSONArray("footerActions")?.length() ?: 0) > 0) 104 else 60
 
   override fun bindContent(
     item: NativeListItem,
@@ -60,6 +64,21 @@ internal class NativeListActivityRowView(context: ThemedReactContext) :
     checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String,
   ) {
     val data = item.json
+    val rich = data.has("amounts")
+    details.visibility = if (rich) VISIBLE else GONE
+    content.visibility = if (rich) GONE else VISIBLE
+    actions.visibility = if (rich) GONE else VISIBLE
+    if (rich) {
+      orientation = VERTICAL
+      val style = data.optJSONObject("style") ?: JSONObject()
+      val hp = if (style.has("horizontalPadding")) stylePx(style.optDouble("horizontalPadding")) else dp(if (data.optString("presentation") == "table") 16 else 12)
+      val vp = if (style.has("verticalPadding")) stylePx(style.optDouble("verticalPadding")) else dp(8)
+      setPadding(hp, vp, hp, vp)
+      visual.recycle()
+      details.bind(item, theme, sourceScale)
+      return
+    }
+    details.recycle()
     val style = data.optJSONObject("style") ?: JSONObject()
     val image = style.optJSONObject("image") ?: JSONObject()
     fun color(name: String, fallback: String) =
@@ -233,11 +252,13 @@ internal class NativeListActivityRowView(context: ThemedReactContext) :
 
   override fun recycleContent() {
     visual.recycle()
+    details.recycle()
     buttons.forEach { it.setOnClickListener(null) }
   }
 
   override fun disposeContent() {
     visual.dispose()
+    details.dispose()
     buttons.forEach { it.setOnClickListener(null) }
   }
 }

package/android/src/main/java/com/onekey/nativelist/NativeListContainerSlotAdapter.kt

@@ -0,0 +1,53 @@
+package com.margelo.nitro.nativelist
+
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.recyclerview.widget.RecyclerView
+
+/** A persistent React container slot; never a template row or a selectable item. */
+internal class NativeListContainerSlotAdapter : RecyclerView.Adapter<NativeListContainerSlotAdapter.Holder>() {
+  class Holder(val container: FrameLayout) : RecyclerView.ViewHolder(container)
+  private var content: View? = null
+  private var height = 0
+  private var enabled = true
+
+  fun update(view: View?, heightPx: Int, visible: Boolean) {
+    val previousCount = itemCount
+    val changed = content !== view || height != heightPx || enabled != visible
+    content = view
+    height = heightPx.coerceAtLeast(0)
+    enabled = visible
+    val nextCount = itemCount
+    if (previousCount == 0 && nextCount == 1) notifyItemInserted(0)
+    else if (previousCount == 1 && nextCount == 0) notifyItemRemoved(0)
+    else if (nextCount == 1 && changed) notifyItemChanged(0)
+  }
+
+  override fun getItemCount(): Int = if (enabled && content != null && height > 0) 1 else 0
+
+  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): Holder {
+    val container = object : FrameLayout(parent.context) {
+      override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+        for (index in 0 until childCount) {
+          getChildAt(index).layout(0, 0, right - left, bottom - top)
+        }
+      }
+    }
+    container.layoutParams = RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, height)
+    return Holder(container)
+  }
+
+  override fun onBindViewHolder(holder: Holder, position: Int) {
+    holder.container.layoutParams = RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, height)
+    holder.container.removeAllViews()
+    content?.let { view ->
+      (view.parent as? ViewGroup)?.removeView(view)
+      holder.container.addView(view, FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, height))
+    }
+  }
+
+  override fun onViewRecycled(holder: Holder) {
+    holder.container.removeAllViews()
+  }
+}

package/android/src/main/java/com/onekey/nativelist/NativeListEndAlignment.kt

@@ -0,0 +1,5 @@
+package com.margelo.nitro.nativelist
+
+// Negative offsets are required when a container slot is taller than the viewport.
+internal fun nativeListEndAlignmentOffset(viewportEnd: Int, contentEnd: Int): Int =
+  viewportEnd - contentEnd

package/android/src/main/java/com/onekey/nativelist/NativeListMediaPreviewSlot.kt

@@ -0,0 +1,215 @@
+package com.margelo.nitro.nativelist
+
+import android.graphics.Rect
+import android.view.ViewTreeObserver
+import android.view.Gravity
+import android.view.TextureView
+import android.view.View
+import android.widget.FrameLayout
+import androidx.annotation.OptIn
+import androidx.media3.common.MediaItem
+import androidx.media3.common.PlaybackException
+import androidx.media3.common.Player
+import androidx.media3.common.VideoSize
+import androidx.media3.common.util.UnstableApi
+import androidx.media3.common.util.Util
+import androidx.media3.datasource.DefaultDataSource
+import androidx.media3.datasource.okhttp.OkHttpDataSource
+import androidx.media3.exoplayer.ExoPlayer
+import androidx.media3.exoplayer.DefaultLoadControl
+import androidx.media3.exoplayer.source.DefaultMediaSourceFactory
+import androidx.media3.ui.AspectRatioFrameLayout
+import com.facebook.react.modules.network.ForwardingCookieHandler
+import com.facebook.react.modules.network.OkHttpClientProvider
+import com.facebook.react.uimanager.ThemedReactContext
+import okhttp3.JavaNetCookieJar
+import org.json.JSONObject
+
+/** Uses Media3 like native Video, but never starts playback or requests audio focus. */
+@OptIn(UnstableApi::class)
+internal class NativeListMediaPreviewSlot(private val context: ThemedReactContext) {
+  val view: FrameLayout = object : FrameLayout(context) {
+    override fun onAttachedToWindow() { super.onAttachedToWindow(); observeViewport(); updateVisibility() }
+    override fun onDetachedFromWindow() { stopObservingViewport(); releasePlayer(); super.onDetachedFromWindow() }
+    override fun onWindowVisibilityChanged(visibility: Int) { super.onWindowVisibilityChanged(visibility); updateVisibility() }
+    override fun onVisibilityAggregated(isVisible: Boolean) { super.onVisibilityAggregated(isVisible); if (isVisible) updateVisibility() else releasePlayer() }
+  }
+  private val image = NativeListImageSlot(context)
+  private val video = AspectRatioFrameLayout(context)
+  private val texture = TextureView(context)
+  private var identity: String? = null
+  private var epoch = 0
+  private var candidateGeneration = 0
+  private var playerGeneration = 0
+  private var result: Boolean? = null
+  private var completion: ((Boolean) -> Unit)? = null
+  private var pendingCompletion: Runnable? = null
+  private var player: ExoPlayer? = null
+  private var resumeVideo: (() -> Unit)? = null
+  private var viewportObserver: ViewTreeObserver? = null
+  private val visibleRect = Rect()
+  private val scrollListener = ViewTreeObserver.OnScrollChangedListener { updateVisibility() }
+  private val layoutListener = ViewTreeObserver.OnGlobalLayoutListener { updateVisibility() }
+  // Native property animations can move a retained pager page without a layout pass.
+  private val drawListener = ViewTreeObserver.OnPreDrawListener { updateVisibility(); true }
+
+  init {
+    view.isClickable = false
+    view.isFocusable = false
+    view.descendantFocusability = android.view.ViewGroup.FOCUS_BLOCK_DESCENDANTS
+    video.addView(texture, FrameLayout.LayoutParams(-1, -1))
+    view.addView(image.view, FrameLayout.LayoutParams(-1, -1))
+    view.addView(video, FrameLayout.LayoutParams(-1, -1, Gravity.CENTER))
+    video.visibility = View.GONE
+    video.setBackgroundColor(android.graphics.Color.BLACK)
+    texture.isOpaque = false
+  }
+
+  fun bind(source: JSONObject, key: String, fit: String? = null,
+           placeholder: String = "#0000000F", probeOrder: List<String> = listOf("image"),
+           completion: ((Boolean) -> Unit)? = null) {
+    val next = nativeListCanonical(JSONObject().put("source", source).put("key", key)
+      .put("fit", fit ?: "").put("order", org.json.JSONArray(probeOrder)).put("placeholder", placeholder))
+    this.completion = completion
+    if (identity == next) {
+      result?.let { completion?.invoke(it) }
+      updateVisibility()
+      return
+    }
+    recycle()
+    identity = next
+    this.completion = completion
+    video.resizeMode = if ((fit ?: source.optString("contentFit")) == "cover") AspectRatioFrameLayout.RESIZE_MODE_ZOOM else AspectRatioFrameLayout.RESIZE_MODE_FIT
+    probe(source, key, fit, placeholder, probeOrder, 0, epoch)
+  }
+
+  private fun probe(source: JSONObject, key: String, fit: String?, placeholder: String,
+                    order: List<String>, attempt: Int, token: Int) {
+    if (token != epoch) return
+    candidateGeneration++
+    val candidate = candidateGeneration
+    resumeVideo = null
+    stopObservingViewport()
+    releasePlayer()
+    if (attempt >= order.size) {
+      result = false
+      completion?.invoke(false)
+      return
+    }
+    fun finished(loaded: Boolean, expectedPlayerGeneration: Int? = null) {
+      if (epoch != token || candidateGeneration != candidate) return
+      pendingCompletion?.let(view::removeCallbacks)
+      // Glide forbids clearing/rebinding a request from either terminal callback.
+      // Media3 callbacks also defer release so the emitting player is not reentered.
+      val task = Runnable {
+        pendingCompletion = null
+        if (epoch != token || candidateGeneration != candidate ||
+            (expectedPlayerGeneration != null && playerGeneration != expectedPlayerGeneration)) return@Runnable
+        if (loaded) {
+          if (result != true) { result = true; completion?.invoke(true) }
+        } else probe(source, key, fit, placeholder, order, attempt + 1, token)
+      }
+      pendingCompletion = task
+      view.post(task)
+    }
+    if (order[attempt] == "image") {
+      video.visibility = View.GONE
+      image.view.visibility = View.VISIBLE
+      image.bind(source, key, fit = fit, placeholder = placeholder, completion = { loaded -> finished(loaded) })
+      return
+    }
+    image.recycle()
+    image.view.visibility = View.GONE
+    video.visibility = View.VISIBLE
+    val uri = source.optString("uri")
+    if (uri.isBlank()) { finished(false); return }
+    val headers = source.optJSONObject("headers")?.let { values -> values.keys().asSequence().associateWith { values.optString(it) } } ?: emptyMap()
+    resumeVideo = start@{
+      if (epoch != token || candidateGeneration != candidate || player != null) return@start
+      playerGeneration++
+      val generation = playerGeneration
+      try {
+        val client = OkHttpClientProvider.getOkHttpClient().newBuilder()
+          .cookieJar(JavaNetCookieJar(ForwardingCookieHandler(context))).build()
+        val http = OkHttpDataSource.Factory(client).setDefaultRequestProperties(headers)
+        if (headers.keys.none { it.equals("User-Agent", ignoreCase = true) }) http.setUserAgent(Util.getUserAgent(context, context.packageName))
+        val sources = DefaultMediaSourceFactory(DefaultDataSource.Factory(context, http))
+        val buffers = DefaultLoadControl.Builder()
+          .setBufferDurationsMs(250, 1000, 250, 250)
+          .setTargetBufferBytes(2 * 1024 * 1024)
+          .setPrioritizeTimeOverSizeThresholds(false)
+          .setBackBuffer(0, false).build()
+        val next = ExoPlayer.Builder(context.applicationContext)
+          .setMediaSourceFactory(sources).setLoadControl(buffers).build()
+        player = next
+        next.volume = 0f
+        next.playWhenReady = false
+        next.setAudioAttributes(androidx.media3.common.AudioAttributes.DEFAULT, false)
+        next.setVideoTextureView(texture)
+        next.addListener(object : Player.Listener {
+          override fun onRenderedFirstFrame() { if (playerGeneration == generation) finished(true, generation) }
+          override fun onPlayerError(error: PlaybackException) { if (playerGeneration == generation) finished(false, generation) }
+          override fun onVideoSizeChanged(size: VideoSize) {
+            if (playerGeneration == generation && size.height > 0) video.setAspectRatio(size.width * size.pixelWidthHeightRatio / size.height)
+          }
+        })
+        next.setMediaItem(MediaItem.fromUri(uri))
+        next.prepare()
+        next.pause()
+      } catch (_: Exception) {
+        releasePlayer()
+        finished(false)
+      }
+    }
+    observeViewport()
+    updateVisibility()
+  }
+
+  private fun observeViewport() {
+    if (viewportObserver != null || resumeVideo == null || !view.isAttachedToWindow) return
+    view.viewTreeObserver.takeIf { it.isAlive }?.let {
+      it.addOnScrollChangedListener(scrollListener)
+      it.addOnGlobalLayoutListener(layoutListener)
+      it.addOnPreDrawListener(drawListener)
+      viewportObserver = it
+    }
+  }
+  private fun stopObservingViewport() {
+    viewportObserver?.takeIf { it.isAlive }?.let {
+      it.removeOnScrollChangedListener(scrollListener)
+      it.removeOnGlobalLayoutListener(layoutListener)
+      it.removeOnPreDrawListener(drawListener)
+    }
+    viewportObserver = null
+  }
+  private fun updateVisibility() {
+    var ancestor: View? = view
+    var opaque = true
+    while (ancestor != null) {
+      if (ancestor.alpha <= 0.01f) { opaque = false; break }
+      ancestor = ancestor.parent as? View
+    }
+    if (opaque && view.isAttachedToWindow && view.windowVisibility == View.VISIBLE && view.isShown &&
+        view.getGlobalVisibleRect(visibleRect) && !visibleRect.isEmpty) resumeVideo?.invoke()
+    else releasePlayer()
+  }
+  private fun releasePlayer() {
+    playerGeneration++
+    player?.let { it.pause(); it.clearVideoTextureView(texture); it.release() }
+    player = null
+  }
+  fun recycle() {
+    epoch++; candidateGeneration++
+    pendingCompletion?.let(view::removeCallbacks)
+    pendingCompletion = null
+    resumeVideo = null
+    stopObservingViewport()
+    releasePlayer()
+    image.recycle()
+    image.view.visibility = View.VISIBLE
+    video.visibility = View.GONE
+    video.setAspectRatio(0f)
+    identity = null; result = null; completion = null
+  }
+  fun dispose() { recycle(); image.dispose() }
+}

package/android/src/main/java/com/onekey/nativelist/NativeListMediaTileRenderer.kt

@@ -14,7 +14,7 @@ import org.json.JSONObject
 internal class NativeListMediaTileRowView(context: ThemedReactContext) :
     NativeListRendererRowView(context) {
     private val picture = FrameLayout(context)
-    private val image = NativeListImageSlot(context)
+    private val image = NativeListMediaPreviewSlot(context)
     private val network = NativeListImageSlot(context)
     private val errorIcon = OneKeyIconView(context)
     private val title = NativeListTextView(context)
@@ -32,7 +32,7 @@ internal class NativeListMediaTileRowView(context: ThemedReactContext) :
     override val defaultCornerRadius = 16
     override val showsSelection = false
     override val pressChangesBackground = false
-    override val assetFields = listOf("image", "networkImage")
+    override val assetFields = listOf("image", "media", "networkImage")
 
     override fun horizontalWidth(item: NativeListItem) = dp(200)
 
@@ -141,15 +141,24 @@ internal class NativeListMediaTileRowView(context: ThemedReactContext) :
         errorIcon.tintColor = parseNativeListColor("#00000044")
         errorIcon.useSourceScale = sourceScale
         errorIcon.layoutParams = FrameLayout.LayoutParams(dp(24), dp(24), Gravity.CENTER)
-        if (state != "empty" && state != "error" && item.json.has("image"))
+        val media = item.json.optJSONObject("media")
+        val source = media?.optJSONObject("source") ?: item.json.optJSONObject("image")
+        val order = media?.optJSONArray("probeOrder")?.let { values ->
+            (0 until values.length()).map { values.optString(it) }
+        } ?: listOf("image")
+        if (state != "empty" && state != "error" && source != null)
             image.bind(
-                item.json.getJSONObject("image"),
+                source,
                 "${item.key}:media",
                 fit = imageStyle.optString("contentFit").takeIf { it.isNotEmpty() },
                 placeholder =
                     theme?.optString("strongBackground", "#0000000F")?.takeIf(String::isNotEmpty)
                         ?: "#0000000F",
-            )
+                probeOrder = order,
+            ) { loaded ->
+                errorIcon.visibility = if (loaded) GONE else VISIBLE
+                if (!loaded) image.view.setBackgroundColor(tint("strongBackground", "#0000000F"))
+            }
         else image.recycle()
         // Legacy: only the empty/error states paint a slot fill; loaded images show
         // their own placeholder without a white backing.
@@ -157,7 +166,7 @@ internal class NativeListMediaTileRowView(context: ThemedReactContext) :
             when (state) {
                 "error" -> GradientDrawable().apply { setColor(tint("strongBackground", "#0000000F")) }
                 "empty" -> GradientDrawable().apply { setColor(Color.WHITE) }
-                else -> null
+                else -> if (errorIcon.visibility == VISIBLE) GradientDrawable().apply { setColor(tint("strongBackground", "#0000000F")) } else null
             }
         image.view.outlineProvider =
             object : ViewOutlineProvider() {

package/android/src/main/java/com/onekey/nativelist/NativeListModels.kt

@@ -156,6 +156,7 @@ internal data class NativeListConfig(
   val selectedKeys: LinkedHashSet<String>,
   val reorderable: Boolean,
   val pullToRefresh: Boolean,
+  val refreshTriggerDistance: Double? = null,
   val refreshing: Boolean,
   val loadMore: Boolean,
   val endReachedThreshold: Double,
@@ -194,7 +195,7 @@ internal data class NativeListConfig(
         generation = root.getInt("generation"),
         layout = layout.getString("kind"),
         orientation = layout.optString("orientation", "vertical"),
-        gridColumns = layout.optInt("gridColumns", 1).coerceIn(1, 4),
+        gridColumns = layout.optInt("gridColumns", 1).coerceIn(1, 7),
         stickyHeaders = layout.optBoolean("stickyHeaders", false),
         contentPadding = layout.optInt("contentPadding", 0).coerceAtLeast(0),
         contentPaddingHorizontal = layout.optionalNonNegativeInt("contentPaddingHorizontal"),
@@ -206,6 +207,7 @@ internal data class NativeListConfig(
         selectedKeys = selectedKeys,
         reorderable = capabilities?.optBoolean("reorderable", false) ?: false,
         pullToRefresh = capabilities?.optBoolean("pullToRefresh", false) ?: false,
+        refreshTriggerDistance = capabilities?.optDouble("refreshTriggerDistance")?.takeIf { it.isFinite() && it > 0 },
         refreshing = capabilities?.optBoolean("refreshing", false) ?: false,
         loadMore = capabilities?.optBoolean("loadMore", false) ?: false,
         endReachedThreshold = capabilities?.optDouble("endReachedThreshold", 0.2) ?: 0.2,