react-native-video-trim 6.2.3 → 7.0.0

package/README.md

@@ -14,7 +14,8 @@
 - [Advanced Features](#advanced-features)
   * [Audio Trimming](#audio-trimming)
   * [Remote Files (HTTPS)](#remote-files-https)
-  * [Video Rotation](#video-rotation)
+  * [Video Transforms (Flip, Rotate, Crop)](#video-transforms-flip-rotate-crop)
+  * [Precise Frame Trimming](#precise-frame-trimming)
 - [Examples](#examples)
 - [Troubleshooting](#troubleshooting)
 
@@ -40,6 +41,8 @@ A powerful, easy-to-use video and audio trimming library for React Native applic
 ### ✨ Key Features
 
 - **📹 Video & Audio Support** - Trim both video and audio files
+- **🔄 Flip, Rotate & Crop** - Built-in video transforms with undo/redo support
+- **🎯 Precise Trimming** - Optional frame-accurate cuts via hardware-accelerated re-encoding
 - **🌐 Local & Remote Files** - Support for local storage and HTTPS URLs
 - **💾 Multiple Save Options** - Photos, Documents, or Share to other apps
 - **✅ File Validation** - Built-in validation for media files
@@ -50,7 +53,9 @@ A powerful, easy-to-use video and audio trimming library for React Native applic
 
 | Feature | Description |
 |---------|-------------|
-| **Trimming** | Precise video/audio trimming with visual controls |
+| **Trimming** | Video/audio trimming with visual timeline controls |
+| **Transforms** | Horizontal flip, 90° rotation, and freeform crop with undo/redo |
+| **Precise Trimming** | Frame-accurate cuts using hardware re-encoding (opt-in) |
 | **Validation** | Check if files are valid video/audio before processing |
 | **Save Options** | Photos, Documents, Share sheet integration |
 | **File Management** | Complete file lifecycle management |
@@ -344,8 +349,7 @@ All configuration options are optional. Here are the most commonly used ones:
 |--------|------|---------|-------------|
 | `enableHapticFeedback` | `boolean` | `true` | Enable haptic feedback |
 | `closeWhenFinish` | `boolean` | `true` | Close editor when done |
-| `enableRotation` | `boolean` | `false` | Enable video rotation |
-| `rotationAngle` | `number` | `0` | Rotation angle in degrees |
+| `enablePreciseTrimming` | `boolean` | `false` | Re-encode for frame-accurate cuts (slower, see [Precise Frame Trimming](#precise-frame-trimming)) |
 | `changeStatusBarColorOnOpen` | `boolean` | `false` | Change status bar color (Android only) |
 | `zoomOnWaitingDuration` | `number` | `5000` | Duration for zoom-on-waiting feature in milliseconds (default: 5000) |
 
@@ -438,18 +442,39 @@ showEditor('https://example.com/video.mp4', {
 });
 ```
 
-### Video Rotation
+### Video Transforms (Flip, Rotate, Crop)
 
-Rotate videos during trimming using metadata (doesn't re-encode):
+The editor includes built-in transform controls — horizontal flip, 90° left rotation, and freeform crop — with full undo/redo support. These appear as toolbar buttons in the editor UI on both iOS and Android.
+
+When any transform is applied, FFmpeg automatically re-encodes the video using the platform's hardware encoder (`h264_videotoolbox` on iOS, `h264_mediacodec` on Android) at the source bitrate to preserve quality. No additional configuration is needed.
+
+### Precise Frame Trimming
+
+By default, trimming uses FFmpeg's stream copy (`-c copy`), which is very fast but can only cut at keyframes. The actual start/end points may drift by several seconds from what the user selected.
+
+Enable `enablePreciseTrimming` for frame-accurate cuts:
 
 ```javascript
+// Editor mode
 showEditor(videoUrl, {
-  enableRotation: true,
-  rotationAngle: 90,    // 90, 180, 270 degrees
+  enablePreciseTrimming: true,
+});
+
+// Headless mode
+const result = await trim(videoUrl, {
+  startTime: 5000,
+  endTime: 15000,
+  enablePreciseTrimming: true,
 });
 ```
 
-**Note:** Uses `display_rotation` metadata - playback may vary by platform/player.
+| | `enablePreciseTrimming: false` (default) | `enablePreciseTrimming: true` |
+|---|---|---|
+| **Speed** | Very fast (stream copy) | Slower (hardware re-encode) |
+| **Accuracy** | Keyframe-aligned (may drift 1-5s) | Frame-accurate |
+| **Quality** | Lossless (original bitstream) | Near-lossless (matched bitrate) |
+
+**Note:** When transforms (flip/rotate/crop) are applied, re-encoding already happens regardless of this flag, so precise trimming comes for free in that case.
 
 ### Trimming Progress & Cancellation
 

package/android/src/main/java/com/videotrim/BaseVideoTrimModule.kt

@@ -11,6 +11,8 @@ import android.content.Intent
 import android.content.pm.PackageManager
 import android.content.res.ColorStateList
 import android.graphics.Color
+import android.media.MediaMetadataRetriever
+import android.net.Uri
 import android.os.Build
 import android.util.Log
 import android.util.TypedValue
@@ -581,10 +583,6 @@ open class BaseVideoTrimModule internal constructor(
       "${endTime}ms",
     )
 
-    if (options?.getBoolean("enableRotation") == true) {
-      cmds += arrayOf("-display_rotation", "${options.getDouble("rotationAngle")}")
-    }
-
     val outputFile = StorageUtil.getOutputPath(reactApplicationContext, options?.getString("outputExt") ?: "mp4")
 
     val resolvedOutputFile = outputFile ?: run {
@@ -592,15 +590,42 @@ open class BaseVideoTrimModule internal constructor(
       return
     }
 
-    cmds += arrayOf(
-      "-i",
-      url,
-      "-c",
-      "copy",
-      "-metadata",
-      "creation_time=$formattedDateTime",
-      resolvedOutputFile
-    )
+    // Headless trim: no editor UI, so no transforms (flip/rotate/crop) are possible.
+    // The only reason to re-encode here is enablePreciseTrimming for frame-accurate cuts.
+    val enablePrecise = options?.hasKey("enablePreciseTrimming") == true &&
+      options.getBoolean("enablePreciseTrimming")
+
+    if (enablePrecise) {
+      // Match source bitrate to preserve quality; fall back to 10 Mbps.
+      var bitrateStr = "10M"
+      try {
+        val retriever = MediaMetadataRetriever()
+        retriever.setDataSource(reactApplicationContext, Uri.parse(url))
+        val bitrate = retriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_BITRATE)
+          ?.toLongOrNull() ?: 0L
+        if (bitrate > 0) bitrateStr = "$bitrate"
+        retriever.release()
+      } catch (_: Exception) {}
+
+      // h264_mediacodec: Android's hardware H.264 encoder.
+      // No -noautorotate needed — FFmpegKit on Android auto-rotates correctly.
+      cmds += arrayOf(
+        "-i", url,
+        "-c:v", "h264_mediacodec",
+        "-b:v", bitrateStr,
+        "-c:a", "copy",
+        "-metadata", "creation_time=$formattedDateTime",
+        resolvedOutputFile
+      )
+    } else {
+      // Stream copy: no re-encoding, extremely fast but only cuts at keyframes.
+      cmds += arrayOf(
+        "-i", url,
+        "-c", "copy",
+        "-metadata", "creation_time=$formattedDateTime",
+        resolvedOutputFile
+      )
+    }
 
     Log.d(TAG, "Command: ${cmds.joinToString(",")}")
 

package/android/src/main/java/com/videotrim/utils/VideoTrimmerUtil.kt

@@ -2,6 +2,7 @@ package com.videotrim.utils
 
 import android.annotation.SuppressLint
 import android.graphics.Bitmap
+import android.graphics.RectF
 import android.media.MediaMetadataRetriever
 import android.util.Log
 import com.arthenica.ffmpegkit.FFmpegKit
@@ -18,6 +19,7 @@ import iknow.android.utils.thread.BackgroundExecutor
 import java.text.SimpleDateFormat
 import java.util.Date
 import java.util.TimeZone
+import kotlin.math.roundToInt
 
 object VideoTrimmerUtil {
 
@@ -42,8 +44,13 @@ object VideoTrimmerUtil {
     videoDuration: Int,
     startMs: Long,
     endMs: Long,
-    enableRotation: Boolean,
-    rotationAngle: Double,
+    userRotationCount: Int,
+    userIsFlipped: Boolean,
+    cropNormalized: RectF?,
+    videoWidth: Int,
+    videoHeight: Int,
+    videoBitrate: Long,
+    enablePreciseTrimming: Boolean,
     callback: VideoTrimListener
   ): FFmpegSession {
     val currentDate = Date()
@@ -58,18 +65,75 @@ object VideoTrimmerUtil {
     cmds.add("-to")
     cmds.add("${endMs}ms")
 
-    if (enableRotation) {
-      cmds.add("-display_rotation")
-      cmds.add(rotationAngle.toString())
-    }
+    val hasUserTransform = userRotationCount != 0 || userIsFlipped
+    // Re-encode is required when: (1) user applied flip/rotate, (2) user cropped, or
+    // (3) enablePreciseTrimming is on. In all three cases, -c copy won't work because
+    // either we need video filters or we need frame-accurate cut points.
+    val needsReEncode = hasUserTransform || cropNormalized != null || enablePreciseTrimming
+
+    if (needsReEncode) {
+      val videoFilters = mutableListOf<String>()
+
+      when (userRotationCount) {
+        1 -> videoFilters.add("transpose=2")
+        2 -> { videoFilters.add("transpose=2"); videoFilters.add("transpose=2") }
+        3 -> videoFilters.add("transpose=1")
+      }
+      if (userIsFlipped) {
+        videoFilters.add("hflip")
+      }
+
+      // Convert normalized crop rect [0..1] to pixel coordinates in the post-rotation frame.
+      if (cropNormalized != null && videoWidth > 0 && videoHeight > 0) {
+        val postW: Int
+        val postH: Int
+        // After 90°/270° rotation the width and height are swapped.
+        if (userRotationCount % 2 != 0) {
+          postW = videoHeight; postH = videoWidth
+        } else {
+          postW = videoWidth; postH = videoHeight
+        }
+        val cx = (cropNormalized.left * postW).roundToInt()
+        val cy = (cropNormalized.top * postH).roundToInt()
+        var cw = (cropNormalized.width() * postW).roundToInt()
+        var ch = (cropNormalized.height() * postH).roundToInt()
+        // H.264 requires even dimensions; round down to nearest even number.
+        cw = cw and 1.inv()
+        ch = ch and 1.inv()
+        if (cw > 0 && ch > 0) {
+          videoFilters.add("crop=$cw:$ch:$cx:$cy")
+        }
+      }
 
-    cmds.add("-i")
-    cmds.add(inputFile)
-    cmds.add("-c")
-    cmds.add("copy")
-    cmds.add("-metadata")
-    cmds.add("creation_time=$formattedDateTime")
-    cmds.add(outputFile)
+      val filterString = videoFilters.joinToString(",")
+      // Preserve source quality by matching the original bitrate. Falls back to 10 Mbps.
+      val bitrateStr = if (videoBitrate > 0) "$videoBitrate" else "10M"
+
+      cmds.addAll(listOf("-i", inputFile))
+      // When enablePreciseTrimming is the only reason for re-encode (no transforms),
+      // videoFilters is empty — skip -vf entirely to avoid FFmpeg error on empty filter.
+      if (filterString.isNotEmpty()) {
+        cmds.addAll(listOf("-vf", filterString))
+      }
+      // h264_mediacodec: Android's hardware H.264 encoder — fast and energy-efficient.
+      // Note: Android FFmpegKit auto-rotates by default, so no -noautorotate is needed.
+      // The transpose filters above only handle user-initiated rotation, not source metadata.
+      cmds.addAll(listOf(
+        "-c:v", "h264_mediacodec",
+        "-b:v", bitrateStr,
+        "-c:a", "copy",
+        "-metadata", "creation_time=$formattedDateTime",
+        outputFile
+      ))
+    } else {
+      // Stream copy: no re-encoding, extremely fast but only cuts at keyframes.
+      cmds.addAll(listOf(
+        "-i", inputFile,
+        "-c", "copy",
+        "-metadata", "creation_time=$formattedDateTime",
+        outputFile
+      ))
+    }
 
     val command = cmds.toTypedArray()
     val cmdStr = "Command: ${command.joinToString(" ")}"

package/android/src/main/java/com/videotrim/widgets/CropOverlayView.kt

@@ -0,0 +1,293 @@
+package com.videotrim.widgets
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.RectF
+import android.graphics.Region
+import android.os.Build
+import android.util.AttributeSet
+import android.util.TypedValue
+import android.view.MotionEvent
+import android.view.ScaleGestureDetector
+import android.view.View
+import kotlin.math.abs
+import kotlin.math.max
+import kotlin.math.min
+
+class CropOverlayView @JvmOverloads constructor(
+  context: Context,
+  attrs: AttributeSet? = null,
+  defStyleAttr: Int = 0
+) : View(context, attrs, defStyleAttr) {
+
+  var cropRect = RectF()
+    set(value) {
+      field.set(value)
+      invalidate()
+    }
+
+  var allowedRect = RectF()
+    set(value) {
+      field.set(value)
+      if (cropRect.isEmpty) {
+        cropRect = RectF(value)
+      } else {
+        val clamped = RectF()
+        if (!clamped.setIntersect(cropRect, value) || clamped.width() < minCropSize || clamped.height() < minCropSize) {
+          cropRect = RectF(value)
+        }
+      }
+    }
+
+  var onCropChanged: (() -> Unit)? = null
+  var onCropBegan: (() -> Unit)? = null
+  var onCropEnded: (() -> Unit)? = null
+
+  private val minCropSize = dpToPx(60f)
+  private val borderWidth = dpToPx(1f)
+  private val cornerLength = dpToPx(20f)
+  private val cornerWidth = dpToPx(4f)
+  private val gridLineWidth = 1f / resources.displayMetrics.density
+  private val edgeHitZone = dpToPx(30f)
+
+  private val borderPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+    style = Paint.Style.STROKE
+    color = Color.argb(153, 255, 255, 255)
+    strokeWidth = borderWidth
+  }
+  private val gridPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+    style = Paint.Style.STROKE
+    color = Color.WHITE
+    strokeWidth = gridLineWidth
+  }
+  private val cornerPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+    style = Paint.Style.STROKE
+    color = Color.WHITE
+    strokeWidth = cornerWidth
+    strokeCap = Paint.Cap.ROUND
+  }
+  private val dimmingPaint = Paint().apply {
+    color = Color.argb(140, 0, 0, 0)
+    style = Paint.Style.FILL
+  }
+
+  private enum class DragEdge {
+    TOP, BOTTOM, LEFT, RIGHT,
+    TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,
+    MOVE
+  }
+
+  private var activeEdge: DragEdge? = null
+  private var dragStartX = 0f
+  private var dragStartY = 0f
+  private var dragStartRect = RectF()
+  private var gestureStarted = false
+
+  private val scaleDetector = ScaleGestureDetector(context, object : ScaleGestureDetector.SimpleOnScaleGestureListener() {
+    private var pinchStartRect = RectF()
+
+    override fun onScaleBegin(detector: ScaleGestureDetector): Boolean {
+      pinchStartRect.set(cropRect)
+      if (!gestureStarted) {
+        gestureStarted = true
+        onCropBegan?.invoke()
+      }
+      return true
+    }
+
+    override fun onScale(detector: ScaleGestureDetector): Boolean {
+      val scale = detector.scaleFactor
+      val cx = pinchStartRect.centerX()
+      val cy = pinchStartRect.centerY()
+      var newW = max(pinchStartRect.width() * scale, minCropSize)
+      var newH = max(pinchStartRect.height() * scale, minCropSize)
+      newW = min(newW, allowedRect.width())
+      newH = min(newH, allowedRect.height())
+      val r = RectF(cx - newW / 2, cy - newH / 2, cx + newW / 2, cy + newH / 2)
+      clamp(r, isMove = true)
+      cropRect = r
+      onCropChanged?.invoke()
+      return true
+    }
+
+    override fun onScaleEnd(detector: ScaleGestureDetector) {
+      if (gestureStarted) {
+        gestureStarted = false
+        onCropEnded?.invoke()
+      }
+    }
+  })
+
+  override fun onDraw(canvas: Canvas) {
+    super.onDraw(canvas)
+    if (cropRect.isEmpty) return
+    val cr = cropRect
+
+    drawDimming(canvas, cr)
+
+    canvas.drawRect(cr, borderPaint)
+
+    for (i in 1..2) {
+      val x = cr.left + cr.width() * i / 3f
+      canvas.drawLine(x, cr.top, x, cr.bottom, gridPaint)
+    }
+    for (i in 1..2) {
+      val y = cr.top + cr.height() * i / 3f
+      canvas.drawLine(cr.left, y, cr.right, y, gridPaint)
+    }
+
+    val cl = cornerLength
+    val path = Path()
+    fun addCorner(sx: Float, sy: Float, cx: Float, cy: Float, ex: Float, ey: Float) {
+      path.moveTo(sx, sy); path.lineTo(cx, cy); path.lineTo(ex, ey)
+    }
+    addCorner(cr.left, cr.top + cl, cr.left, cr.top, cr.left + cl, cr.top)
+    addCorner(cr.right - cl, cr.top, cr.right, cr.top, cr.right, cr.top + cl)
+    addCorner(cr.left, cr.bottom - cl, cr.left, cr.bottom, cr.left + cl, cr.bottom)
+    addCorner(cr.right - cl, cr.bottom, cr.right, cr.bottom, cr.right, cr.bottom - cl)
+    canvas.drawPath(path, cornerPaint)
+  }
+
+  private fun drawDimming(canvas: Canvas, cr: RectF) {
+    canvas.save()
+    val fullPath = Path()
+    fullPath.addRect(0f, 0f, width.toFloat(), height.toFloat(), Path.Direction.CW)
+    val cropPath = Path()
+    cropPath.addRect(cr, Path.Direction.CW)
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+      fullPath.op(cropPath, Path.Op.DIFFERENCE)
+      canvas.drawPath(fullPath, dimmingPaint)
+    } else {
+      @Suppress("DEPRECATION")
+      canvas.clipPath(cropPath, Region.Op.DIFFERENCE)
+      canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), dimmingPaint)
+    }
+    canvas.restore()
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    if (event.pointerCount > 1) {
+      scaleDetector.onTouchEvent(event)
+      return true
+    }
+
+    val x = event.x
+    val y = event.y
+
+    when (event.actionMasked) {
+      MotionEvent.ACTION_DOWN -> {
+        activeEdge = detectEdge(x, y) ?: return false
+        dragStartX = x
+        dragStartY = y
+        dragStartRect.set(cropRect)
+        gestureStarted = true
+        onCropBegan?.invoke()
+        return true
+      }
+      MotionEvent.ACTION_MOVE -> {
+        val edge = activeEdge ?: return false
+        val dx = x - dragStartX
+        val dy = y - dragStartY
+        cropRect = computeNewRect(edge, dx, dy)
+        onCropChanged?.invoke()
+        return true
+      }
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        activeEdge = null
+        if (gestureStarted) {
+          gestureStarted = false
+          onCropEnded?.invoke()
+        }
+        return true
+      }
+    }
+    return false
+  }
+
+  private fun detectEdge(px: Float, py: Float): DragEdge? {
+    val r = cropRect
+    val z = edgeHitZone
+
+    val nearT = abs(py - r.top) < z
+    val nearB = abs(py - r.bottom) < z
+    val nearL = abs(px - r.left) < z
+    val nearR = abs(px - r.right) < z
+    val inH = px > r.left - z && px < r.right + z
+    val inV = py > r.top - z && py < r.bottom + z
+
+    if (nearT && nearL) return DragEdge.TOP_LEFT
+    if (nearT && nearR) return DragEdge.TOP_RIGHT
+    if (nearB && nearL) return DragEdge.BOTTOM_LEFT
+    if (nearB && nearR) return DragEdge.BOTTOM_RIGHT
+    if (nearT && inH) return DragEdge.TOP
+    if (nearB && inH) return DragEdge.BOTTOM
+    if (nearL && inV) return DragEdge.LEFT
+    if (nearR && inV) return DragEdge.RIGHT
+    if (r.contains(px, py)) return DragEdge.MOVE
+    return null
+  }
+
+  private fun computeNewRect(edge: DragEdge, dx: Float, dy: Float): RectF {
+    val r = RectF(dragStartRect)
+
+    when (edge) {
+      DragEdge.TOP_LEFT -> { r.left += dx; r.top += dy }
+      DragEdge.TOP_RIGHT -> { r.right += dx; r.top += dy }
+      DragEdge.BOTTOM_LEFT -> { r.left += dx; r.bottom += dy }
+      DragEdge.BOTTOM_RIGHT -> { r.right += dx; r.bottom += dy }
+      DragEdge.TOP -> r.top += dy
+      DragEdge.BOTTOM -> r.bottom += dy
+      DragEdge.LEFT -> r.left += dx
+      DragEdge.RIGHT -> r.right += dx
+      DragEdge.MOVE -> {
+        r.offset(dx, dy)
+        clamp(r, isMove = true)
+        return r
+      }
+    }
+
+    if (r.width() < minCropSize) {
+      val anchorsRight = edge == DragEdge.LEFT || edge == DragEdge.TOP_LEFT || edge == DragEdge.BOTTOM_LEFT
+      if (anchorsRight) r.left = r.right - minCropSize else r.right = r.left + minCropSize
+    }
+    if (r.height() < minCropSize) {
+      val anchorsBottom = edge == DragEdge.TOP || edge == DragEdge.TOP_LEFT || edge == DragEdge.TOP_RIGHT
+      if (anchorsBottom) r.top = r.bottom - minCropSize else r.bottom = r.top + minCropSize
+    }
+
+    clamp(r, isMove = false)
+    return r
+  }
+
+  private fun clamp(r: RectF, isMove: Boolean) {
+    val a = allowedRect
+    if (a.isEmpty) return
+
+    if (isMove) {
+      val w = min(r.width(), a.width())
+      val h = min(r.height(), a.height())
+      r.right = r.left + w
+      r.bottom = r.top + h
+      if (r.left < a.left) r.offset(a.left - r.left, 0f)
+      if (r.top < a.top) r.offset(0f, a.top - r.top)
+      if (r.right > a.right) r.offset(a.right - r.right, 0f)
+      if (r.bottom > a.bottom) r.offset(0f, a.bottom - r.bottom)
+    } else {
+      r.left = max(r.left, a.left)
+      r.top = max(r.top, a.top)
+      if (r.right > a.right) r.right = a.right
+      if (r.bottom > a.bottom) r.bottom = a.bottom
+    }
+  }
+
+  fun resetCrop() {
+    cropRect = RectF(allowedRect)
+  }
+
+  private fun dpToPx(dp: Float): Float {
+    return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, resources.displayMetrics)
+  }
+}