react-native-photo-video-editor 0.1.0

package/android/src/main/java/com/photovideoeditor/video/export/VideoExporter.kt

@@ -0,0 +1,319 @@
+package com.photovideoeditor.video.export
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
+import android.media.MediaMetadataRetriever
+import android.net.Uri
+import android.os.Handler
+import android.os.Looper
+import androidx.media3.common.Effect
+import androidx.media3.common.MediaItem
+import androidx.media3.common.MimeTypes
+import androidx.media3.common.util.Size
+import androidx.media3.effect.BitmapOverlay
+import androidx.media3.effect.Brightness
+import androidx.media3.effect.Contrast
+import androidx.media3.effect.HslAdjustment
+import androidx.media3.effect.OverlayEffect
+import androidx.media3.effect.Presentation
+import androidx.media3.effect.ScaleAndRotateTransformation
+import androidx.media3.effect.TextureOverlay
+import androidx.media3.transformer.Composition
+import androidx.media3.transformer.EditedMediaItem
+import androidx.media3.transformer.EditedMediaItemSequence
+import androidx.media3.transformer.Effects
+import androidx.media3.transformer.ExportException
+import androidx.media3.transformer.ExportResult
+import androidx.media3.transformer.ProgressHolder
+import androidx.media3.transformer.Transformer
+import com.photovideoeditor.files.SourceResolver
+import com.photovideoeditor.photo.render.PhotoLayer
+import com.photovideoeditor.photo.render.PhotoLayerRenderer
+import com.photovideoeditor.video.render.VideoClip
+import com.photovideoeditor.video.render.VideoTransformState
+import org.json.JSONObject
+import java.io.File
+import java.util.UUID
+import java.util.concurrent.ConcurrentHashMap
+
+data class VideoExportResult(
+  val uri: String,
+  val width: Int,
+  val height: Int,
+  val durationMs: Long,
+  val fileSize: Long,
+  val mimeType: String
+)
+
+class VideoExportException(val code: String, message: String) : Exception(message)
+
+/**
+ * Wraps Media3 Transformer to apply trim/rotate/aspect-ratio/overlays
+ * to the full-resolution source video and mux an H.264/AAC MP4. The source
+ * file is never modified. Must be constructed and used from a thread with a
+ * Looper (Transformer requirement) — the main thread satisfies this.
+ *
+ * Milestone 7 (multi-clip timeline): each [VideoClip] becomes its own
+ * [EditedMediaItem] (own trim, same global rotate/aspect/filter effects),
+ * concatenated gapless via a single [EditedMediaItemSequence] passed to
+ * [Composition] — verified against the actual Media3 1.4.1 bytecode (`javap`)
+ * before writing this: `EditedMediaItemSequence(List<EditedMediaItem>)`,
+ * `Composition.Builder(EditedMediaItemSequence, EditedMediaItemSequence...)`,
+ * and `Transformer.start(Composition, String)` all exist in this version.
+ * Overlay timing is authored against the *global* composed timeline (matching
+ * `VideoEditSession.globalPositionMs()`), so each clip's overlay callback
+ * offsets its own (per-item, zero-based) `presentationTimeUs` by the summed
+ * trimmed duration of the clips before it to recover the global position.
+ *
+ * `state.speed` is intentionally NOT applied here. Media3 1.4.1 (the version
+ * this module is pinned to, verified via a live Gradle dependency resolution)
+ * does not expose `SpeedProvider`/`TimestampAdjustment(SpeedProvider)` — that
+ * landed in a later release. Bumping to a newer Media3 version to get it broke
+ * other already-verified APIs used elsewhere in this file (`Transformer.Builder
+ * .setTransformationRequest`, `OverlayEffect`'s list parameter type), so rather
+ * than chase version bumps mid-session and risk destabilizing the working
+ * export pipeline, this is a deliberate, documented scope cut — see
+ * docs/video-editor.md. Preview still honors speed via `ExoPlayer.setPlaybackSpeed`.
+ */
+class VideoExporter(private val context: Context) {
+  private var transformer: Transformer? = null
+  private var outputFile: File? = null
+  private var polling = false
+  private val handler = Handler(Looper.getMainLooper())
+  private val overlayBitmaps = ConcurrentHashMap.newKeySet<Bitmap>()
+
+  fun export(
+    clips: List<VideoClip>,
+    state: VideoTransformState,
+    layers: List<PhotoLayer>,
+    exportOptions: JSONObject?,
+    onProgress: (Float) -> Unit,
+    onComplete: (VideoExportResult) -> Unit,
+    onError: (VideoExportException) -> Unit
+  ) {
+    releaseOverlayBitmaps()
+    if (clips.isEmpty()) {
+      onError(VideoExportException("E_SOURCE_NOT_FOUND", "There are no clips to export."))
+      return
+    }
+    val totalDurationMs = clips.sumOf { it.trimmedDurationMs() }
+
+    val outputDir = File(context.cacheDir, "photovideoeditor").apply { mkdirs() }
+    val output = File(outputDir, "${UUID.randomUUID()}.mp4")
+    outputFile = output
+
+    val (sourceWidth, sourceHeight) = readUprightVideoSize(mediaUri(clips.first().sourceUri))
+
+    val editedItems = mutableListOf<EditedMediaItem>()
+    var precedingDurationMs = 0L
+    for (clip in clips) {
+      val effects = mutableListOf<Effect>()
+      if (state.rotationDegrees != 0) {
+        effects.add(
+          ScaleAndRotateTransformation.Builder()
+            .setRotationDegrees(state.rotationDegrees.toFloat())
+            .build()
+        )
+      }
+      state.aspectRatio?.let { ratio ->
+        effects.add(Presentation.createForAspectRatio(ratio, Presentation.LAYOUT_SCALE_TO_FIT_WITH_CROP))
+      }
+
+      // Video-level filters: export-only for now, no live preview — see docs/video-editor.md.
+      if (state.brightness != 0f) effects.add(Brightness(state.brightness / 100f))
+      if (state.contrast != 0f) effects.add(Contrast(state.contrast / 100f))
+      if (state.saturation != 0f) {
+        effects.add(HslAdjustment.Builder().adjustSaturation(state.saturation / 100f).build())
+      }
+
+      // Each overlay has its own [PhotoLayer.startMs]/[endMs] on the *global* composed timeline, so the
+      // composited bitmap is genuinely time-varying across clip boundaries. Re-rendering on every decoded
+      // frame would be wasteful since the active-layer set only actually changes at a handful of
+      // timestamps (each overlay's start/end), so the rendered result is cached and only recomputed when
+      // the active-layer signature changes between frames.
+      //
+      // Timestamp caveat (unverified — no device available to confirm): this item's own `getBitmap`
+      // presentationTimeUs is assumed to be zero-based at this clip's own trimmed start (matching
+      // Transformer's typical per-item effect-pipeline behavior), so the summed duration of preceding
+      // clips is added to recover the global timeline position that the overlay's startMs/endMs are
+      // authored against.
+      if (layers.isNotEmpty()) {
+        val clipOffsetMs = precedingDurationMs
+        var cachedSignature: List<String>? = null
+        var cachedBitmap: Bitmap? = null
+        effects.add(
+          OverlayEffect(
+            listOf<TextureOverlay>(
+              object : BitmapOverlay() {
+                @Volatile private var outputWidth = sourceWidth.coerceAtLeast(2)
+                @Volatile private var outputHeight = sourceHeight.coerceAtLeast(2)
+
+                override fun configure(videoSize: Size) {
+                  super.configure(videoSize)
+                  // Media3 maps a same-aspect overlay texture onto the complete background
+                  // frame. Bound the longest edge to avoid allocating a huge ARGB bitmap for
+                  // extreme (4K/8K) outputs, while preserving exact normalized geometry. The
+                  // cap is set to cover common Full HD exports (1920px long edge) natively —
+                  // a lower cap visibly softens overlay text/sticker edges vs. the preview,
+                  // since it downscales the overlay before compositing.
+                  val scale = minOf(1f, MAX_OVERLAY_EDGE_PX / maxOf(videoSize.width, videoSize.height).coerceAtLeast(1))
+                  outputWidth = (videoSize.width * scale).toInt().coerceAtLeast(2)
+                  outputHeight = (videoSize.height * scale).toInt().coerceAtLeast(2)
+                }
+
+                override fun getBitmap(presentationTimeUs: Long): Bitmap {
+                  val positionMs = presentationTimeUs / 1000 + clipOffsetMs
+                  val activeLayers = layers.filter { it.isActiveAt(positionMs, totalDurationMs) }
+                  val signature = activeLayers.map { it.id }
+                  if (signature != cachedSignature || cachedBitmap == null) {
+                    val input = Bitmap.createBitmap(outputWidth, outputHeight, Bitmap.Config.ARGB_8888)
+                    cachedBitmap = PhotoLayerRenderer.render(input, activeLayers) { uri -> resolveImageUri(context, uri) }
+                    if (cachedBitmap !== input && !input.isRecycled) input.recycle()
+                    // BitmapOverlay may retain the returned frame in the GL
+                    // pipeline. Keep it alive until Transformer terminates.
+                    cachedBitmap?.let { overlayBitmaps.add(it) }
+                    cachedSignature = signature
+                  }
+                  return cachedBitmap!!
+                }
+              }
+            )
+          )
+        )
+      }
+
+      val mediaItem = MediaItem.Builder()
+        .setUri(mediaUri(clip.sourceUri))
+        .setClippingConfiguration(
+          MediaItem.ClippingConfiguration.Builder()
+            .setStartPositionMs(clip.trimStartMs)
+            .setEndPositionMs(clip.effectiveTrimEndMs())
+            .build()
+        )
+        .build()
+
+      // `state.speed` is intentionally not applied here — see the class doc comment above.
+      editedItems.add(
+        EditedMediaItem.Builder(mediaItem)
+          .setEffects(Effects(emptyList(), effects))
+          .build()
+      )
+      precedingDurationMs += clip.trimmedDurationMs()
+    }
+
+    val composition = Composition.Builder(EditedMediaItemSequence(editedItems)).build()
+
+    val transformerBuilder = Transformer.Builder(context)
+      .setVideoMimeType(MimeTypes.VIDEO_H264)
+      .setAudioMimeType(MimeTypes.AUDIO_AAC)
+
+    val builtTransformer = transformerBuilder
+      .addListener(object : Transformer.Listener {
+        override fun onCompleted(composition: Composition, exportResult: ExportResult) {
+          polling = false
+          transformer = null
+          // The completed file now belongs to the caller. cancel()/destroy must
+          // never delete it after the editor activity finishes.
+          outputFile = null
+          onComplete(
+            VideoExportResult(
+              uri = Uri.fromFile(output).toString(),
+              width = exportResult.width.coerceAtLeast(0),
+              height = exportResult.height.coerceAtLeast(0),
+              durationMs = if (exportResult.durationMs > 0) exportResult.durationMs else totalDurationMs,
+              fileSize = output.length(),
+              mimeType = "video/mp4"
+            )
+          )
+          releaseOverlayBitmaps()
+        }
+
+        override fun onError(composition: Composition, exportResult: ExportResult, exportException: ExportException) {
+          polling = false
+          transformer = null
+          output.delete()
+          releaseOverlayBitmaps()
+          onError(VideoExportException("E_EXPORT_FAILED", exportException.message ?: "Unable to export the video."))
+        }
+      })
+      .build()
+    transformer = builtTransformer
+    try {
+      builtTransformer.start(composition, output.absolutePath)
+      startPolling(onProgress)
+    } catch (error: Exception) {
+      polling = false
+      transformer = null
+      output.delete()
+      releaseOverlayBitmaps()
+      onError(VideoExportException("E_EXPORT_FAILED", error.message ?: "Unable to start video export."))
+    }
+  }
+
+  private fun resolveImageUri(context: Context, uri: String): Bitmap? {
+    val path = SourceResolver.resolvePath(context, uri, "pve_video_layer_image_export") ?: return null
+    return BitmapFactory.decodeFile(path)
+  }
+
+  /** The video's decoded frame size after its own rotation metadata is applied (i.e. as it will actually be displayed/exported before any additional user rotation/crop). */
+  private fun readUprightVideoSize(uri: Uri): Pair<Int, Int> {
+    val retriever = MediaMetadataRetriever()
+    return try {
+      retriever.setDataSource(context, uri)
+      val width = retriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_VIDEO_WIDTH)?.toIntOrNull() ?: 1280
+      val height = retriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_VIDEO_HEIGHT)?.toIntOrNull() ?: 720
+      val rotation = retriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_VIDEO_ROTATION)?.toIntOrNull() ?: 0
+      if (rotation == 90 || rotation == 270) height to width else width to height
+    } catch (_: Exception) {
+      1280 to 720
+    } finally {
+      retriever.release()
+    }
+  }
+
+  private fun mediaUri(value: String): Uri {
+    val parsed = Uri.parse(value)
+    return if (parsed.scheme == null) Uri.fromFile(File(value)) else parsed
+  }
+
+  private fun startPolling(onProgress: (Float) -> Unit) {
+    polling = true
+    val holder = ProgressHolder()
+    val runnable = object : Runnable {
+      override fun run() {
+        val current = transformer
+        if (current == null || !polling) return
+        try {
+          current.getProgress(holder)
+          onProgress((holder.progress.coerceIn(0, 100)) / 100f)
+          if (polling) handler.postDelayed(this, 300)
+        } catch (_: IllegalStateException) {
+          // Transformer completed/cancelled between the null check and poll.
+        }
+      }
+    }
+    handler.postDelayed(runnable, 300)
+  }
+
+  /** Cancels an in-progress export and deletes the partial output file. */
+  fun cancel() {
+    polling = false
+    handler.removeCallbacksAndMessages(null)
+    transformer?.cancel()
+    transformer = null
+    outputFile?.delete()
+    outputFile = null
+    releaseOverlayBitmaps()
+  }
+
+  private fun releaseOverlayBitmaps() {
+    overlayBitmaps.forEach { if (!it.isRecycled) it.recycle() }
+    overlayBitmaps.clear()
+  }
+
+  private companion object {
+    /** Overlay-compositing bitmap longest-edge cap; see the comment at its call site. */
+    const val MAX_OVERLAY_EDGE_PX = 1920f
+  }
+}

package/android/src/main/java/com/photovideoeditor/video/render/VideoClip.kt

@@ -0,0 +1,20 @@
+package com.photovideoeditor.video.render
+
+import java.util.UUID
+
+/**
+ * One segment in the multi-clip timeline. Every clip in this milestone shares
+ * the same source file (created via Split/Duplicate of one input) — importing
+ * separate additional source files from a system picker is a follow-up, not
+ * attempted here.
+ */
+data class VideoClip(
+  val id: String = UUID.randomUUID().toString(),
+  val sourceUri: String,
+  val originalDurationMs: Long,
+  var trimStartMs: Long = 0L,
+  var trimEndMs: Long = 0L
+) {
+  fun effectiveTrimEndMs(): Long = if (trimEndMs in 1..originalDurationMs) trimEndMs else originalDurationMs
+  fun trimmedDurationMs(): Long = (effectiveTrimEndMs() - trimStartMs).coerceAtLeast(0L)
+}

package/android/src/main/java/com/photovideoeditor/video/render/VideoEditSession.kt

@@ -0,0 +1,136 @@
+package com.photovideoeditor.video.render
+
+import android.content.Context
+import android.net.Uri
+import androidx.media3.common.MediaItem
+import androidx.media3.common.PlaybackException
+import androidx.media3.common.Player
+import androidx.media3.exoplayer.ExoPlayer
+import com.photovideoeditor.photo.render.PhotoLayerStack
+import java.io.File
+
+/**
+ * Owns the ExoPlayer preview instance, the ordered [VideoClip] list (the
+ * multi-clip timeline, Milestone 7), and the [VideoTransformState] that
+ * applies globally across the whole composed sequence. The source is never
+ * modified — [com.photovideoeditor.video.export.VideoExporter] reads the
+ * clip list again to produce the exported file.
+ */
+class VideoEditSession(context: Context, val sourceUri: String) {
+  val player: ExoPlayer = ExoPlayer.Builder(context).build()
+
+  /** Text/sticker/shape overlays. Reuses the photo layer model/stack — see `PhotoLayer.startMs`/`endMs` for timing. */
+  val layerStack = PhotoLayerStack()
+
+  var clips: List<VideoClip> = emptyList()
+    private set
+
+  var state: VideoTransformState = VideoTransformState()
+    private set
+
+  /** Fires once the source is probed and the initial single-clip timeline is ready. */
+  var onClipsReady: (() -> Unit)? = null
+    set(value) {
+      field = value
+      // Activity view construction may finish after a very fast local source
+      // reaches STATE_READY. Never lose that one-shot notification.
+      if (value != null && clips.isNotEmpty()) value.invoke()
+    }
+
+  /** Reports decoder/source failures instead of leaving a blank player forever. */
+  var onPlaybackError: ((String) -> Unit)? = null
+    set(value) {
+      field = value
+      pendingPlaybackError?.let { error -> value?.invoke(error) }
+    }
+
+  private var pendingPlaybackError: String? = null
+  private var initialTimelineCreated = false
+
+  init {
+    player.addListener(object : Player.Listener {
+      override fun onPlaybackStateChanged(playbackState: Int) {
+        if (playbackState == Player.STATE_READY && !initialTimelineCreated && player.duration > 0) {
+          initialTimelineCreated = true
+          clips = listOf(VideoClip(sourceUri = sourceUri, originalDurationMs = player.duration))
+          rebuildPlayerTimeline(preserveIndex = 0)
+          onClipsReady?.invoke()
+        }
+      }
+
+      override fun onPlayerError(error: PlaybackException) {
+        val message = error.message ?: "The selected video could not be played."
+        pendingPlaybackError = message
+        onPlaybackError?.invoke(message)
+      }
+    })
+    player.setMediaItem(MediaItem.fromUri(playbackUri(sourceUri)))
+    player.prepare()
+  }
+
+  /** Sum of every clip's trimmed duration — the length of the composed timeline. */
+  val durationMs: Long get() = clips.sumOf { it.trimmedDurationMs() }
+
+  fun update(transform: (VideoTransformState) -> VideoTransformState) {
+    state = transform(state)
+  }
+
+  /** Applies [transform] to the clip list and rebuilds the player's playlist to match. */
+  fun updateClips(transform: (List<VideoClip>) -> List<VideoClip>) {
+    val previousIndex = player.currentMediaItemIndex
+    clips = transform(clips)
+    rebuildPlayerTimeline(preserveIndex = previousIndex)
+  }
+
+  private fun rebuildPlayerTimeline(preserveIndex: Int) {
+    if (clips.isEmpty()) return
+    val items = clips.map { clip ->
+      MediaItem.Builder()
+        .setUri(Uri.parse(clip.sourceUri))
+        .setClippingConfiguration(
+          MediaItem.ClippingConfiguration.Builder()
+            .setStartPositionMs(clip.trimStartMs)
+            .setEndPositionMs(clip.effectiveTrimEndMs())
+            .build()
+        )
+        .build()
+    }
+    player.setMediaItems(items)
+    player.prepare()
+    val safeIndex = preserveIndex.coerceIn(0, clips.size - 1)
+    player.seekTo(safeIndex, 0)
+  }
+
+  /** Position within the whole multi-clip timeline: preceding clips' trimmed durations + position in the current clip. */
+  fun globalPositionMs(): Long {
+    if (clips.isEmpty()) return 0
+    val index = player.currentMediaItemIndex.coerceIn(0, clips.size - 1)
+    val preceding = clips.take(index).sumOf { it.trimmedDurationMs() }
+    return preceding + player.currentPosition.coerceAtLeast(0)
+  }
+
+  /** Seeks the player to a position expressed in the composed (global) timeline. */
+  fun seekToGlobalMs(targetMs: Long) {
+    if (clips.isEmpty()) return
+    var remaining = targetMs.coerceIn(0, durationMs)
+    for ((index, clip) in clips.withIndex()) {
+      val clipDuration = clip.trimmedDurationMs()
+      if (remaining <= clipDuration || index == clips.size - 1) {
+        player.seekTo(index, remaining.coerceIn(0, clipDuration))
+        return
+      }
+      remaining -= clipDuration
+    }
+  }
+
+  fun release() {
+    onClipsReady = null
+    onPlaybackError = null
+    player.release()
+  }
+
+  private fun playbackUri(value: String): Uri {
+    val parsed = Uri.parse(value)
+    return if (parsed.scheme == null) Uri.fromFile(File(value)) else parsed
+  }
+}

package/android/src/main/java/com/photovideoeditor/video/render/VideoThumbnailGenerator.kt

@@ -0,0 +1,31 @@
+package com.photovideoeditor.video.render
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.media.MediaMetadataRetriever
+import android.net.Uri
+import java.io.File
+
+/**
+ * Extracts a fixed number of evenly spaced thumbnails for the trim strip.
+ * Must be called from a background thread — decoding is not cheap.
+ */
+object VideoThumbnailGenerator {
+  fun generate(context: Context, sourceUri: String, durationMs: Long, count: Int = 12): List<Bitmap> {
+    if (durationMs <= 0) return emptyList()
+    val retriever = MediaMetadataRetriever()
+    return try {
+      val parsed = Uri.parse(sourceUri)
+      retriever.setDataSource(context, if (parsed.scheme == null) Uri.fromFile(File(sourceUri)) else parsed)
+      val step = durationMs / count
+      (0 until count).mapNotNull { index ->
+        val timeUs = (index * step + step / 2) * 1000
+        retriever.getFrameAtTime(timeUs, MediaMetadataRetriever.OPTION_CLOSEST_SYNC)
+      }
+    } catch (_: Exception) {
+      emptyList()
+    } finally {
+      retriever.release()
+    }
+  }
+}

package/android/src/main/java/com/photovideoeditor/video/render/VideoTransformState.kt

@@ -0,0 +1,48 @@
+package com.photovideoeditor.video.render
+
+/**
+ * Non-destructive video edit state that applies globally across the whole
+ * multi-clip timeline (Milestone 7) — trim now lives per clip on [VideoClip]
+ * instead of here. `coverFrameMs` is a position in the composed timeline
+ * (sum of preceding clips' trimmed durations + offset into the current one),
+ * not a position within any single clip's own source file.
+ */
+data class VideoTransformState(
+  val rotationDegrees: Int = 0,
+  val aspectRatio: Float? = null,
+  val coverFrameMs: Long = 0L,
+  /** Preview-only for now: cycled via the Speed tool. Export does not yet honor this — see docs/video-editor.md. */
+  val speed: Float = 1f,
+  /** -100..100. Export-only for now — no live preview. See docs/video-editor.md. */
+  val brightness: Float = 0f,
+  /** -100..100. Export-only for now — no live preview. */
+  val contrast: Float = 0f,
+  /** -100..100. Export-only for now — no live preview. */
+  val saturation: Float = 0f
+) {
+  fun rotatedRight(): VideoTransformState = copy(rotationDegrees = (rotationDegrees + 90) % 360)
+  fun withAspectRatio(ratio: Float?): VideoTransformState = copy(aspectRatio = ratio)
+  fun withCoverFrame(atMs: Long): VideoTransformState = copy(coverFrameMs = atMs)
+
+  fun filterValue(key: String): Float = when (key) {
+    "brightness" -> brightness
+    "contrast" -> contrast
+    "saturation" -> saturation
+    else -> 0f
+  }
+
+  fun withFilter(key: String, value: Float): VideoTransformState = when (key) {
+    "brightness" -> copy(brightness = value)
+    "contrast" -> copy(contrast = value)
+    "saturation" -> copy(saturation = value)
+    else -> this
+  }
+
+  fun withFiltersReset(): VideoTransformState = copy(brightness = 0f, contrast = 0f, saturation = 0f)
+
+  private val speedSteps = listOf(0.5f, 1f, 1.5f, 2f)
+  fun cycledSpeed(): VideoTransformState {
+    val currentIndex = speedSteps.indexOf(speed).takeIf { it >= 0 } ?: 1
+    return copy(speed = speedSteps[(currentIndex + 1) % speedSteps.size])
+  }
+}

package/android/src/main/java/com/photovideoeditor/video/ui/TrimRangeView.kt

@@ -0,0 +1,104 @@
+package com.photovideoeditor.video.ui
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.RectF
+import android.view.MotionEvent
+import android.view.View
+import kotlin.math.abs
+
+/**
+ * Dual-handle trim range selector drawn over a horizontal thumbnail strip.
+ * `startFraction`/`endFraction` are fractions (0..1) of the video's total
+ * duration; a minimum gap between them is enforced so a trim can never
+ * collapse to (or past) zero length.
+ */
+class TrimRangeView(context: Context) : View(context) {
+  var thumbnails: List<Bitmap> = emptyList()
+    set(value) {
+      field = value
+      invalidate()
+    }
+  var startFraction: Float = 0f
+    private set
+  var endFraction: Float = 1f
+    private set
+  var minDurationFraction: Float = 0.02f
+  var onRangeChanged: ((start: Float, end: Float) -> Unit)? = null
+
+  private val handleWidthPx = 28f
+  private var activeHandle = Handle.NONE
+
+  private enum class Handle { NONE, START, END }
+
+  private val dimPaint = Paint().apply { color = Color.argb(160, 0, 0, 0) }
+  private val handlePaint = Paint().apply { color = Color.WHITE }
+  private val borderPaint = Paint().apply { color = Color.WHITE; style = Paint.Style.STROKE; strokeWidth = 3f }
+  private val backgroundPaint = Paint().apply { color = Color.DKGRAY }
+
+  fun setRange(start: Float, end: Float) {
+    startFraction = start.coerceIn(0f, 1f)
+    endFraction = end.coerceIn(startFraction, 1f)
+    invalidate()
+  }
+
+  override fun onDraw(canvas: Canvas) {
+    super.onDraw(canvas)
+    val w = width.toFloat()
+    val h = height.toFloat()
+    if (w <= 0 || h <= 0) return
+    if (thumbnails.isNotEmpty()) {
+      val thumbWidth = w / thumbnails.size
+      thumbnails.forEachIndexed { index, bitmap ->
+        canvas.drawBitmap(bitmap, null, RectF(index * thumbWidth, 0f, (index + 1) * thumbWidth, h), null)
+      }
+    } else {
+      canvas.drawRect(0f, 0f, w, h, backgroundPaint)
+    }
+    val startX = startFraction * w
+    val endX = endFraction * w
+    canvas.drawRect(0f, 0f, startX, h, dimPaint)
+    canvas.drawRect(endX, 0f, w, h, dimPaint)
+    canvas.drawRect(startX, 0f, endX, h, borderPaint)
+    canvas.drawRect(startX - handleWidthPx / 2, 0f, startX + handleWidthPx / 2, h, handlePaint)
+    canvas.drawRect(endX - handleWidthPx / 2, 0f, endX + handleWidthPx / 2, h, handlePaint)
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    val w = width.toFloat()
+    if (w <= 0) return false
+    when (event.actionMasked) {
+      MotionEvent.ACTION_DOWN -> {
+        val startX = startFraction * w
+        val endX = endFraction * w
+        activeHandle = when {
+          abs(event.x - startX) < handleWidthPx -> Handle.START
+          abs(event.x - endX) < handleWidthPx -> Handle.END
+          else -> Handle.NONE
+        }
+        return activeHandle != Handle.NONE
+      }
+      MotionEvent.ACTION_MOVE -> {
+        if (activeHandle == Handle.NONE) return false
+        val fraction = (event.x / w).coerceIn(0f, 1f)
+        when (activeHandle) {
+          Handle.START -> startFraction = fraction.coerceAtMost(endFraction - minDurationFraction).coerceAtLeast(0f)
+          Handle.END -> endFraction = fraction.coerceAtLeast(startFraction + minDurationFraction).coerceAtMost(1f)
+          Handle.NONE -> return false
+        }
+        invalidate()
+        onRangeChanged?.invoke(startFraction, endFraction)
+        return true
+      }
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        val handled = activeHandle != Handle.NONE
+        activeHandle = Handle.NONE
+        return handled
+      }
+    }
+    return false
+  }
+}

package/android/src/main/res/drawable/ic_add.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+<group android:translateX="-0" android:translateY="960">
+  <path android:fillColor="#FFFFFF" android:pathData="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
+</group>
+</vector>

package/android/src/main/res/drawable/ic_arrow_back.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+<group android:translateX="-0" android:translateY="960">
+  <path android:fillColor="#FFFFFF" android:pathData="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/>
+</group>
+</vector>