react-native-ensys-camera-x 1.0.7

package/android/src/main/java/com/customcamera/MediaAdapters.kt

@@ -0,0 +1,758 @@
+package com.customcamera
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.Typeface
+import android.graphics.drawable.GradientDrawable
+import android.os.Handler
+import android.os.Looper
+import android.view.Gravity
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.core.content.ContextCompat
+import androidx.recyclerview.widget.DiffUtil
+import androidx.recyclerview.widget.RecyclerView
+import com.customcamera.CameraAsset
+import com.customcamera.ThumbnailLoader
+import java.util.Date
+import kotlin.math.roundToInt
+
+// Helper extension functions
+fun android.content.Context.dp(value: Int): Int =
+  (value * resources.displayMetrics.density).roundToInt()
+
+private fun Long.formatDuration(): String {
+  val seconds = this / 1000
+  // Localization.format, not string concatenation: locales with their own
+  // numerals (Arabic-Indic, Bengali) render the digits themselves.
+  return Localization.format("%d:%02d", seconds / 60, seconds % 60)
+}
+
+class MediaStripAdapter(
+  private val thumbnailLoader: ThumbnailLoader,
+  private val onAssetPress: (CameraAsset) -> Unit,
+  private val onAssetLongPress: (CameraAsset) -> Unit = {}
+) : RecyclerView.Adapter<MediaAssetViewHolder>() {
+  private val assets = mutableListOf<CameraAsset>()
+  private val selectedIds = linkedSetOf<String>()
+  private var lastUpdateTime = 0L
+  private val updateDebounceMs = 100L
+  // The most recent list handed to submit() while inside the debounce window, plus the
+  // scheduled rebind that will apply it. Together they turn the debounce from "drop" into
+  // "coalesce" — see submit().
+  private var pendingAssets: List<CameraAsset>? = null
+  private var pendingFlush: Runnable? = null
+  private val handler = Handler(Looper.getMainLooper())
+
+  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MediaAssetViewHolder =
+    MediaAssetViewHolder(parent, thumbnailLoader, sizeDp = 68)
+
+  override fun onBindViewHolder(holder: MediaAssetViewHolder, position: Int) {
+    val asset = assets.getOrNull(position) ?: return
+    val order = selectedIds.indexOf(asset.id) + 1
+    holder.bind(asset, if (order > 0) order else 0)
+    holder.itemView.setOnClickListener {
+      onAssetPress(asset)
+    }
+    holder.itemView.setOnLongClickListener {
+      onAssetLongPress(asset)
+      true
+    }
+  }
+
+  override fun getItemCount(): Int = assets.size
+
+  override fun onViewRecycled(holder: MediaAssetViewHolder) {
+    super.onViewRecycled(holder)
+    holder.clear()
+  }
+
+  fun submit(next: List<CameraAsset>) {
+    // Coalesce rapid updates rather than DROPPING them. The previous implementation returned
+    // early inside the debounce window, so a page that arrived just after another (paging and a
+    // ContentObserver refresh routinely land together) was discarded outright and its assets
+    // never appeared in the strip until something else forced a rebind — one of the ways
+    // legitimately-discovered images went missing. Posting the newest list keeps the debounce's
+    // purpose (at most one rebind per window) without ever losing the data.
+    pendingAssets = next
+    if (pendingFlush != null) return
+
+    val elapsed = System.currentTimeMillis() - lastUpdateTime
+    if (elapsed >= updateDebounceMs) {
+      flushPending()
+      return
+    }
+
+    val flush = Runnable {
+      pendingFlush = null
+      flushPending()
+    }
+    pendingFlush = flush
+    handler.postDelayed(flush, updateDebounceMs - elapsed)
+  }
+
+  private fun flushPending() {
+    val next = pendingAssets ?: return
+    pendingAssets = null
+    lastUpdateTime = System.currentTimeMillis()
+    assets.clear()
+    assets.addAll(next)
+    notifyDataSetChanged()
+  }
+
+  fun prepend(asset: CameraAsset) {
+    // Apply any list still waiting in the debounce window FIRST, so the freshly-captured asset
+    // is prepended onto the newest data and cannot be wiped out moments later by a flush that
+    // predates it.
+    cancelPendingFlush()
+    flushPending()
+
+    val existingIndex = assets.indexOfFirst { it.id == asset.id || it.uri == asset.uri }
+    if (existingIndex >= 0) {
+      assets.removeAt(existingIndex)
+      notifyItemRemoved(existingIndex)
+    }
+    assets.add(0, asset)
+    notifyItemInserted(0)
+  }
+
+  private fun cancelPendingFlush() {
+    pendingFlush?.let { handler.removeCallbacks(it) }
+    pendingFlush = null
+  }
+
+  fun setSelected(nextSelectedIds: Set<String>) {
+    if (selectedIds == nextSelectedIds) return
+    selectedIds.clear()
+    selectedIds.addAll(nextSelectedIds)
+    notifyDataSetChanged()
+  }
+}
+
+class MediaGridAdapter(
+  private val thumbnailLoader: ThumbnailLoader,
+  private val onAssetPress: (CameraAsset) -> Unit,
+  private val onAssetLongPress: (CameraAsset) -> Unit = {},
+  private val onNearEnd: () -> Unit
+) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
+  private val rows = mutableListOf<Row>()
+  private val selectedIds = linkedSetOf<String>()
+  private var lastLoadTrigger = 0L
+
+  override fun getItemViewType(position: Int): Int =
+    when (rows.getOrNull(position)) {
+      is Row.Header -> VIEW_HEADER
+      is Row.Asset -> VIEW_ASSET
+      null -> VIEW_ASSET
+    }
+
+  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder =
+    if (viewType == VIEW_HEADER) {
+      DateHeaderViewHolder(parent)
+    } else {
+      MediaAssetViewHolder(parent, thumbnailLoader, sizeDp = null)
+    }
+
+  override fun onBindViewHolder(
+    holder: RecyclerView.ViewHolder,
+    position: Int,
+    payloads: MutableList<Any>
+  ) {
+    // Selection-only update (from setSelected): refresh just the badge/highlight without
+    // re-triggering the thumbnail load or reattaching click listeners. This is the cheap path
+    // that makes selecting/deselecting a tile instant instead of a full rebind of the row.
+    if (payloads.contains(PAYLOAD_SELECTION)) {
+      val row = rows.getOrNull(position)
+      if (row is Row.Asset && holder is MediaAssetViewHolder) {
+        val order = selectedIds.indexOf(row.asset.id) + 1
+        holder.updateSelection(if (order > 0) order else 0)
+        return
+      }
+    }
+    super.onBindViewHolder(holder, position, payloads)
+  }
+
+  override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
+    // Trigger load more when within 12 items of end, but debounce
+    if (position >= rows.size - 12) {
+      val now = System.currentTimeMillis()
+      if (now - lastLoadTrigger > 500L) {
+        lastLoadTrigger = now
+        onNearEnd()
+      }
+    }
+
+    val row = rows.getOrNull(position) ?: return
+    when (row) {
+      is Row.Header -> (holder as DateHeaderViewHolder).bind(row.label)
+      is Row.Asset -> {
+        val assetHolder = holder as MediaAssetViewHolder
+        val order = selectedIds.indexOf(row.asset.id) + 1
+        assetHolder.bind(row.asset, if (order > 0) order else 0)
+        assetHolder.itemView.setOnClickListener {
+          onAssetPress(row.asset)
+        }
+        assetHolder.itemView.setOnLongClickListener {
+          onAssetLongPress(row.asset)
+          true
+        }
+      }
+    }
+  }
+
+  override fun getItemCount(): Int = rows.size
+
+  override fun onViewRecycled(holder: RecyclerView.ViewHolder) {
+    super.onViewRecycled(holder)
+    if (holder is MediaAssetViewHolder) {
+      holder.clear()
+    }
+  }
+
+  fun submit(assets: List<CameraAsset>) {
+    val newRows = groupRows(assets)
+    // Compute the MINIMAL set of changes instead of blasting notifyDataSetChanged() on every
+    // paged append. The gallery calls submit() with the full accumulated list each time a new
+    // page loads (and on capture prepend); notifyDataSetChanged() rebinds every visible holder
+    // and defeats item reuse/animation, causing scroll jank on large libraries. DiffUtil emits
+    // only the actual insertions/moves/changes, so appending a page touches just the new rows.
+    // Row is a data class, so structural equality drives an accurate diff. The list is small
+    // per page and diffing is linear here, run on the main thread exactly where the old
+    // notifyDataSetChanged() ran — no threading/behaviour change, identical final contents.
+    val oldRows = ArrayList(rows)
+    val diff = DiffUtil.calculateDiff(object : DiffUtil.Callback() {
+      override fun getOldListSize(): Int = oldRows.size
+      override fun getNewListSize(): Int = newRows.size
+      override fun areItemsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
+        val o = oldRows[oldItemPosition]
+        val n = newRows[newItemPosition]
+        return when {
+          o is Row.Asset && n is Row.Asset -> o.asset.id == n.asset.id
+          o is Row.Header && n is Row.Header -> o.label == n.label
+          else -> false
+        }
+      }
+      override fun areContentsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean =
+        oldRows[oldItemPosition] == newRows[newItemPosition]
+    })
+    rows.clear()
+    rows.addAll(newRows)
+    diff.dispatchUpdatesTo(this)
+  }
+
+  fun setSelected(nextSelectedIds: Set<String>) {
+    if (selectedIds == nextSelectedIds) return
+    // Only the selection BADGE/highlight of affected rows changes, never the row set or its
+    // order. Rebind just the asset rows whose membership actually flipped (added or removed
+    // from the selection) via a lightweight payload, instead of notifyDataSetChanged() which
+    // rebinds and reloads every visible tile. Falls back to nothing when a row isn't visible
+    // (RecyclerView skips it) — the correct new state is applied on its next bind.
+    val changed = selectedIds.toMutableSet().apply {
+      // symmetric difference: ids that were selected xor are now selected
+      val union = selectedIds + nextSelectedIds
+      clear()
+      union.forEach { id ->
+        if ((id in selectedIds) != (id in nextSelectedIds)) add(id)
+      }
+    }
+    selectedIds.clear()
+    selectedIds.addAll(nextSelectedIds)
+    if (changed.isEmpty()) return
+    rows.forEachIndexed { index, row ->
+      if (row is Row.Asset && row.asset.id in changed) {
+        notifyItemChanged(index, PAYLOAD_SELECTION)
+      }
+    }
+  }
+
+  private fun groupRows(assets: List<CameraAsset>): List<Row> {
+    val formatter = Localization.dateFormatter()
+    val grouped = mutableListOf<Row>()
+    var currentLabel: String? = null
+    assets.forEach { asset ->
+      val label = asset.dateTaken?.let {
+        runCatching { formatter.format(Date(it)) }.getOrNull()
+      } ?: Localization.getString("unknownDate", "Unknown date")
+      if (label != currentLabel) {
+        currentLabel = label
+        grouped.add(Row.Header(label))
+      }
+      grouped.add(Row.Asset(asset))
+    }
+    return grouped
+  }
+
+  sealed class Row {
+    data class Header(val label: String) : Row()
+    data class Asset(val asset: CameraAsset) : Row()
+  }
+
+  companion object {
+    const val VIEW_HEADER = 1
+    const val VIEW_ASSET = 2
+    // Marker payload for a selection-only rebind (badge/highlight), so the thumbnail isn't
+    // reloaded when a tile is (de)selected. See onBindViewHolder(..., payloads).
+    private val PAYLOAD_SELECTION = Any()
+  }
+}
+
+class DateHeaderViewHolder(parent: ViewGroup) : RecyclerView.ViewHolder(
+  TextView(parent.context).apply {
+    val theme = CameraTheme.get(context)
+    setTextColor(theme.componentColor("mediaGrid", "headerText", Color.WHITE))
+    setTextSize(theme.componentValue("mediaGrid", "headerTextSize", 12f))
+    typeface = Typeface.DEFAULT_BOLD
+    setPadding(parent.context.dp(16), parent.context.dp(12), 0, parent.context.dp(6))
+    setBackgroundColor(theme.componentColor("mediaGrid", "headerBackground", 0x66000000))
+  }
+) {
+  private val textView = itemView as TextView
+
+  fun bind(label: String) {
+    textView.text = label
+  }
+}
+
+class MediaAssetViewHolder(
+  parent: ViewGroup,
+  private val thumbnailLoader: ThumbnailLoader,
+  sizeDp: Int?
+) : RecyclerView.ViewHolder(SquareFrameLayout(parent.context)) {
+  private val imageView = ImageView(parent.context)
+  private val playIconView = ImageView(parent.context)
+  private val durationView = TextView(parent.context)
+  // A GIF tile shows a static first frame, exactly like a still photo, so without a marker the
+  // two are indistinguishable in the grid. Mirrors the video duration badge's placement and
+  // styling — same corner, same treatment — so the tile reads as one consistent system.
+  private val gifBadgeView = TextView(parent.context)
+  // Centred selection checkmark, shown on any selected tile (strip + grid). The checkmark glyph
+  // comes from the theme's customizable `selectionCheck` icon so a host app can swap it out.
+  private val selectedView = ImageView(parent.context)
+  // Shown only for document/audio assets, which have no visual thumbnail: overlays the
+  // file name beneath a type icon so the tile is identifiable.
+  private val fileLabelView = TextView(parent.context)
+  private val theme = CameraTheme.get(parent.context)
+  private val fixedSizePx = sizeDp?.let { parent.context.dp(it) }
+  private val fallbackSizePx = fixedSizePx ?: (parent.resources.displayMetrics.widthPixels / 3)
+
+  init {
+    val root = itemView as FrameLayout
+    val itemWidth = fixedSizePx ?: ViewGroup.LayoutParams.MATCH_PARENT
+    val itemHeight = fixedSizePx ?: ViewGroup.LayoutParams.WRAP_CONTENT
+    root.layoutParams = RecyclerView.LayoutParams(itemWidth, itemHeight).apply {
+      setMargins(parent.context.dp(3), parent.context.dp(3), parent.context.dp(3), parent.context.dp(3))
+    }
+    imageView.scaleType = ImageView.ScaleType.CENTER_CROP
+    imageView.adjustViewBounds = false
+    imageView.cropToPadding = true
+    root.addView(
+      imageView,
+      FrameLayout.LayoutParams(
+        ViewGroup.LayoutParams.MATCH_PARENT,
+        ViewGroup.LayoutParams.MATCH_PARENT
+      )
+    )
+
+    playIconView.setImageDrawable(theme.config.iconDrawable(parent.context, "play", R.drawable.ic_play))
+    theme.config.iconTint("play")?.let { playIconView.setColorFilter(it) }
+    playIconView.scaleType = ImageView.ScaleType.FIT_CENTER
+    val playSize = parent.context.dp(theme.config.iconSizeDp("play") ?: 28)
+    root.addView(
+      playIconView,
+      FrameLayout.LayoutParams(
+        playSize,
+        playSize,
+        Gravity.CENTER
+      )
+    )
+
+    durationView.setTextColor(theme.componentColor("mediaGrid", "durationText", Color.WHITE))
+    durationView.textSize = theme.componentValue("mediaGrid", "durationTextSize", 11f)
+    durationView.typeface = Typeface.DEFAULT_BOLD
+    durationView.setBackgroundColor(theme.componentColor("mediaGrid", "durationBackground", 0x66000000))
+    durationView.setPadding(parent.context.dp(4), 0, parent.context.dp(4), 0)
+    root.addView(
+      durationView,
+      FrameLayout.LayoutParams(
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        parent.context.dp(20),
+        Gravity.BOTTOM or Gravity.END
+      )
+    )
+
+    gifBadgeView.text = Localization.getString("gifBadge", "GIF")
+    gifBadgeView.setTextColor(theme.componentColor("mediaGrid", "gifBadgeText", Color.WHITE))
+    gifBadgeView.textSize = theme.componentValue("mediaGrid", "gifBadgeTextSize", 11f)
+    gifBadgeView.typeface = Typeface.DEFAULT_BOLD
+    gifBadgeView.setBackgroundColor(theme.componentColor("mediaGrid", "gifBadgeBackground", 0x66000000))
+    gifBadgeView.setPadding(parent.context.dp(4), 0, parent.context.dp(4), 0)
+    gifBadgeView.visibility = View.GONE
+    root.addView(
+      gifBadgeView,
+      FrameLayout.LayoutParams(
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        parent.context.dp(20),
+        Gravity.BOTTOM or Gravity.END
+      )
+    )
+
+    // The selected-media checkmark stays centered on the thumbnail, but the circular backdrop is
+    // intentionally removed so the badge reads as a clean glyph instead of a colored disc.
+    selectedView.scaleType = ImageView.ScaleType.FIT_CENTER
+    selectedView.setBackgroundColor(Color.TRANSPARENT)
+    selectedView.setImageDrawable(theme.config.iconDrawable(parent.context, "selectionCheck", R.drawable.ic_check))
+    theme.config.iconTint("selectionCheck")?.let { selectedView.setColorFilter(it) }
+    selectedView.visibility = View.GONE
+    root.addView(
+      selectedView,
+      FrameLayout.LayoutParams(
+        parent.context.dp(26),
+        parent.context.dp(26),
+        Gravity.CENTER
+      )
+    )
+
+    fileLabelView.setTextColor(theme.componentColor("mediaGrid", "fileLabelText", Color.WHITE))
+    fileLabelView.textSize = theme.componentValue("mediaGrid", "fileLabelTextSize", 9f)
+    fileLabelView.gravity = Gravity.CENTER
+    fileLabelView.maxLines = 2
+    fileLabelView.ellipsize = android.text.TextUtils.TruncateAt.MIDDLE
+    fileLabelView.setBackgroundColor(theme.componentColor("mediaGrid", "fileLabelBackground", 0x66000000))
+    fileLabelView.setPadding(parent.context.dp(4), parent.context.dp(2), parent.context.dp(4), parent.context.dp(4))
+    fileLabelView.visibility = View.GONE
+    root.addView(
+      fileLabelView,
+      FrameLayout.LayoutParams(
+        ViewGroup.LayoutParams.MATCH_PARENT,
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        Gravity.BOTTOM
+      )
+    )
+  }
+
+  fun bind(asset: CameraAsset, selectionOrder: Int) {
+    val isVideo = asset.type == "video"
+    val isDocument = asset.type == "document"
+    val isAudio = asset.type == "audio"
+
+    if (isDocument || isAudio) {
+      // No pixel thumbnail exists for these — render a centered type icon plus the file name.
+      imageView.scaleType = ImageView.ScaleType.FIT_CENTER
+      val pad = itemView.context.dp(if (fixedSizePx != null) 14 else 22)
+      imageView.setPadding(pad, pad, pad, pad)
+      imageView.setBackgroundColor(theme.componentColor("mediaGrid", "fileTileBackground", 0xFF1A1A1A.toInt()))
+      val iconName = if (isAudio) "audio" else "document"
+      val builtin = if (isAudio) R.drawable.ic_audio else R.drawable.ic_document
+      val fileTileIcon = theme.config.iconDrawable(itemView.context, iconName, builtin)
+      imageView.setImageDrawable(fileTileIcon)
+      // Config tint wins; else a host SVG keeps its own colours (null → clear) and a
+      // built-in glyph gets the neutral file-tile tint.
+      theme.config.iconTintFor(
+        iconName,
+        fileTileIcon,
+        theme.componentColor("mediaGrid", "fileTileIconTint", 0xFFBFBFBF.toInt())
+      )?.let { imageView.setColorFilter(it) } ?: imageView.clearColorFilter()
+      fileLabelView.visibility = View.VISIBLE
+      fileLabelView.text = asset.fileName
+        ?: if (isAudio) Localization.getString("audio", "Audio")
+        else Localization.getString("document", "Document")
+    } else {
+      imageView.scaleType = ImageView.ScaleType.CENTER_CROP
+      imageView.setPadding(0, 0, 0, 0)
+      imageView.background = null
+      imageView.clearColorFilter()
+      fileLabelView.visibility = View.GONE
+      val loadSize = itemView.width.takeIf { it > 0 } ?: fallbackSizePx
+      thumbnailLoader.load(asset, imageView, loadSize)
+    }
+
+    durationView.visibility = if (isVideo) View.VISIBLE else View.GONE
+    durationView.text = asset.duration?.formatDuration()
+      ?: Localization.getString("durationZero", "0:00")
+    playIconView.visibility = if (isVideo) View.VISIBLE else View.GONE
+    // Only an image tile can be a GIF, and the badge shares the duration badge's corner, so it
+    // is mutually exclusive with the video treatment above.
+    gifBadgeView.visibility =
+      if (!isVideo && !isDocument && !isAudio && GifSupport.isGif(asset)) View.VISIBLE
+      else View.GONE
+    updateSelection(selectionOrder)
+  }
+
+  /**
+   * Update ONLY the selection badge + highlight for this tile. Split out of [bind] so a
+   * selection change can be applied via a payload rebind without reloading the thumbnail or
+   * re-running the (more expensive) media-type framing logic above.
+   */
+  fun updateSelection(selectionOrder: Int) {
+    // Every selected tile shows the SAME centred checkmark — the order is only used to decide
+    // selected vs. not, never displayed, so multi-selection never shows a number.
+    selectedView.visibility = if (selectionOrder > 0) View.VISIBLE else View.GONE
+    itemView.foreground =
+      if (selectionOrder > 0) {
+        GradientDrawable().apply {
+          setColor(theme.componentColor("mediaGrid", "selectionOverlay", 0x2200FF66))
+          setStroke(
+            itemView.context.dp(3),
+            theme.componentColor("mediaGrid", "selectionAccent", 0xFF25D366.toInt())
+          )
+        }
+      } else {
+        null
+      }
+  }
+
+  fun clear() {
+    // Clear image to release memory
+    imageView.setImageDrawable(null)
+    // Reset the document/audio tile styling so a recycled holder rebinding to an
+    // image/video shows a normal cropped thumbnail rather than a padded icon.
+    imageView.scaleType = ImageView.ScaleType.CENTER_CROP
+    imageView.setPadding(0, 0, 0, 0)
+    imageView.background = null
+    imageView.clearColorFilter()
+    fileLabelView.visibility = View.GONE
+    fileLabelView.text = ""
+    playIconView.visibility = View.GONE
+    durationView.text = ""
+    gifBadgeView.visibility = View.GONE
+    selectedView.visibility = View.GONE
+    itemView.foreground = null
+  }
+}
+
+private class SquareFrameLayout(context: Context) : FrameLayout(context) {
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    val width = View.MeasureSpec.getSize(widthMeasureSpec)
+    val squareSpec = View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY)
+    super.onMeasure(widthMeasureSpec, squareSpec)
+  }
+}
+
+class SendingModeThumbnailAdapter(
+  private val thumbnailLoader: ThumbnailLoader,
+  private val assets: List<CameraAsset>,
+  private var currentIndex: Int,
+  private val thumbnailSize: Int,
+  private val onAssetSelect: (Int) -> Unit,
+  private val onRemoveAsset: (Int) -> Unit
+) : RecyclerView.Adapter<SendingModeThumbnailViewHolder>() {
+
+  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): SendingModeThumbnailViewHolder =
+    SendingModeThumbnailViewHolder(parent, thumbnailLoader, thumbnailSize)
+
+  override fun onBindViewHolder(holder: SendingModeThumbnailViewHolder, position: Int) {
+    val asset = assets.getOrNull(position) ?: return
+    val isSelected = position == currentIndex
+    holder.bind(asset, isSelected, {
+      onAssetSelect(position)
+    }, {
+      onRemoveAsset(position)
+    })
+  }
+
+  override fun getItemCount(): Int = assets.size
+
+  fun getCurrentIndex(): Int = currentIndex
+
+  override fun onViewRecycled(holder: SendingModeThumbnailViewHolder) {
+    super.onViewRecycled(holder)
+    holder.clear()
+  }
+
+  fun updateCurrentIndex(index: Int) {
+    currentIndex = index
+    notifyDataSetChanged()
+  }
+}
+
+class SendingModeThumbnailViewHolder(
+  parent: ViewGroup,
+  private val thumbnailLoader: ThumbnailLoader,
+  private val thumbnailSize: Int
+) : RecyclerView.ViewHolder(FrameLayout(parent.context)) {
+  private val container = itemView as FrameLayout
+  private val theme = CameraTheme.get(parent.context)
+  private val cornerRadius = parent.context.dp(10)
+  private val thumbnail = ImageView(parent.context).apply {
+    scaleType = ImageView.ScaleType.CENTER_CROP
+    adjustViewBounds = false
+    cropToPadding = true
+    layoutParams = FrameLayout.LayoutParams(
+      thumbnailSize,
+      thumbnailSize
+    )
+  }
+  private val border = View(parent.context).apply {
+    layoutParams = FrameLayout.LayoutParams(
+      thumbnailSize,
+      thumbnailSize
+    )
+    background = thumbnailBorder(false)
+  }
+  private val playIconView = ImageView(parent.context).apply {
+    setImageDrawable(theme.config.iconDrawable(parent.context, "play", R.drawable.ic_play))
+    theme.config.iconTint("play")?.let { setColorFilter(it) }
+    scaleType = ImageView.ScaleType.FIT_CENTER
+  }
+  private val durationView = TextView(parent.context).apply {
+    setTextColor(theme.componentColor("sendingTray", "durationText", Color.WHITE))
+    textSize = theme.componentValue("sendingTray", "durationTextSize", 9f)
+    typeface = Typeface.DEFAULT_BOLD
+    setBackgroundColor(theme.componentColor("sendingTray", "durationBackground", 0x66000000))
+    setPadding(parent.context.dp(2), 0, parent.context.dp(2), 0)
+  }
+  // Marks an animated-capable tile in the sending tray, matching the grid/strip badge so a GIF
+  // stays identifiable right up to the moment it is sent.
+  private val gifBadgeView = TextView(parent.context).apply {
+    text = Localization.getString("gifBadge", "GIF")
+    setTextColor(theme.componentColor("sendingTray", "gifBadgeText", Color.WHITE))
+    textSize = theme.componentValue("sendingTray", "gifBadgeTextSize", 9f)
+    typeface = Typeface.DEFAULT_BOLD
+    setBackgroundColor(theme.componentColor("sendingTray", "gifBadgeBackground", 0x66000000))
+    setPadding(parent.context.dp(2), 0, parent.context.dp(2), 0)
+    visibility = View.GONE
+  }
+  private val removeBtn = ImageView(parent.context).apply {
+    // Dustbin icon to delete this media from the selection before sending. Shown
+    // CENTERED on EVERY thumbnail as a bare glyph — no dark circular backdrop. The
+    // tint toggles with the active index: red on the currently previewed thumbnail,
+    // white on the rest (see deleteTint / bind()).
+    setImageDrawable(theme.config.iconDrawable(parent.context, "delete", R.drawable.ic_delete))
+    setColorFilter(deleteTint(false))
+    scaleType = ImageView.ScaleType.CENTER_INSIDE
+    contentDescription = Localization.getString("delete", "Delete")
+    isClickable = true
+    isFocusable = true
+    visibility = View.GONE
+    setPadding(
+      parent.context.dp(6),
+      parent.context.dp(6),
+      parent.context.dp(6),
+      parent.context.dp(6)
+    )
+    layoutParams = FrameLayout.LayoutParams(
+      parent.context.dp(32),
+      parent.context.dp(32),
+      Gravity.CENTER
+    )
+  }
+
+  init {
+    container.layoutParams = RecyclerView.LayoutParams(
+      thumbnailSize,
+      thumbnailSize
+    ).apply {
+      marginEnd = parent.context.dp(8)
+    }
+    container.addView(thumbnail)
+    container.addView(border)
+
+    val playSize = parent.context.dp(16)
+    container.addView(
+      playIconView,
+      FrameLayout.LayoutParams(
+        playSize,
+        playSize,
+        Gravity.CENTER
+      )
+    )
+
+    container.addView(
+      durationView,
+      FrameLayout.LayoutParams(
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        parent.context.dp(14),
+        Gravity.BOTTOM or Gravity.END
+      ).apply {
+        bottomMargin = parent.context.dp(4)
+        marginEnd = parent.context.dp(4)
+      }
+    )
+
+    container.addView(
+      gifBadgeView,
+      FrameLayout.LayoutParams(
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        parent.context.dp(14),
+        Gravity.BOTTOM or Gravity.END
+      ).apply {
+        bottomMargin = parent.context.dp(4)
+        marginEnd = parent.context.dp(4)
+      }
+    )
+
+    container.addView(removeBtn)
+    removeBtn.bringToFront()
+  }
+
+  fun bind(asset: CameraAsset, isSelected: Boolean, onSelect: () -> Unit, onRemove: () -> Unit) {
+    // Always load the original unfiltered image for thumbnails
+    // Use a cache key that bypasses any filtered versions
+    thumbnailLoader.load(asset, thumbnail, thumbnailSize)
+    border.background = thumbnailBorder(isSelected)
+    // Clear any color filter to ensure thumbnail shows original image
+    thumbnail.clearColorFilter()
+    val isVideo = asset.type == "video"
+    // The trash glyph now sits centered on EVERY thumbnail, so the centered play
+    // glyph stays hidden in the sending tray — the duration badge alone marks videos.
+    playIconView.visibility = View.GONE
+    durationView.visibility = if (isVideo) View.VISIBLE else View.GONE
+    durationView.text = asset.duration?.formatDuration()
+      ?: Localization.getString("durationZero", "0:00")
+    gifBadgeView.visibility =
+      if (!isVideo && GifSupport.isGif(asset)) View.VISIBLE else View.GONE
+    container.setOnClickListener { onSelect() }
+    // Trash shows on ALL thumbnails; the tint toggles with selection — red on the
+    // active (currently previewed) thumbnail, white on the rest. Only the active
+    // tile's trash is tappable: on inactive tiles the tap falls through to the
+    // container and selects the thumbnail, exactly as before.
+    removeBtn.animate().cancel()
+    removeBtn.alpha = 1f
+    removeBtn.visibility = View.VISIBLE
+    removeBtn.setColorFilter(deleteTint(isSelected))
+    if (isSelected) {
+      removeBtn.isClickable = true
+      removeBtn.setOnClickListener { onRemove() }
+    } else {
+      removeBtn.isClickable = false
+      removeBtn.setOnClickListener(null)
+    }
+  }
+
+  fun clear() {
+    thumbnail.setImageDrawable(null)
+    playIconView.visibility = View.GONE
+    durationView.visibility = View.GONE
+    gifBadgeView.visibility = View.GONE
+    container.setOnClickListener(null)
+    removeBtn.animate().cancel()
+    removeBtn.visibility = View.GONE
+    removeBtn.setOnClickListener(null)
+  }
+
+  /**
+   * Tint for the centered dustbin glyph: red on the currently previewed (active)
+   * thumbnail, white on the others. Both sides are themeable via the sendingTray
+   * component colors; a config iconTint("delete") still overrides the inactive white
+   * so existing white-label configs keep their custom base tint.
+   */
+  private fun deleteTint(isSelected: Boolean): Int =
+    if (isSelected) theme.componentColor("sendingTray", "activeDeleteTint", 0xFFF44336.toInt())
+    else theme.componentColor("sendingTray", "inactiveDeleteTint", theme.config.iconTint("delete") ?: Color.WHITE)
+
+  private fun thumbnailBorder(isSelected: Boolean): GradientDrawable =
+    GradientDrawable().apply {
+      setColor(Color.TRANSPARENT)
+      cornerRadius = cornerRadius.toFloat()
+      // The selected highlight marks the currently previewed thumbnail; the rest keep a
+      // faint hairline so they still read as tappable tiles.
+      setStroke(
+        container.context.dp(if (isSelected) 3 else 1),
+        if (isSelected) theme.componentColor("sendingTray", "activeBorder", Color.WHITE)
+        else theme.componentColor("sendingTray", "inactiveBorder", 0x55FFFFFF)
+      )
+    }
+}