react-native-video-trim 7.0.1 → 7.1.1

package/README.md

@@ -12,6 +12,7 @@
   * [Behavior Options](#behavior-options)
 - [Platform Setup](#platform-setup)
 - [Advanced Features](#advanced-features)
+  * [Theming](#theming)
   * [Audio Trimming](#audio-trimming)
   * [Remote Files (HTTPS)](#remote-files-https)
   * [Video Transforms (Flip, Rotate, Crop)](#video-transforms-flip-rotate-crop)
@@ -24,8 +25,7 @@
 <div align="center">
   <h2>📱 Professional video trimmer for React Native apps</h2>
   
-  <img src="images/android.gif" width="300" />
-  <img src="images/ios.gif" width="300" />
+  <img src="images/ios.png" width="300" />
   
   <p>
     <strong>✅ iOS & Android</strong> • 
@@ -40,7 +40,7 @@ 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
+- **📹 Video & Audio Support** - Trim both video and audio files with waveform visualization
 - **🔄 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
@@ -48,18 +48,20 @@ A powerful, easy-to-use video and audio trimming library for React Native applic
 - **✅ File Validation** - Built-in validation for media files
 - **🗂️ File Management** - List, clean up, and delete specific files
 - **🔄 Universal Architecture** - Works with both New and Old React Native architectures
+- **🎨 Dark & Light Theme** - Built-in dark and light theme support
 
 ### 🎛️ Core Capabilities
 
 | Feature | Description |
 |---------|-------------|
-| **Trimming** | Video/audio trimming with visual timeline controls |
+| **Trimming** | Video/audio trimming with visual timeline controls and audio waveform |
 | **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 |
 | **Customization** | Extensive UI and behavior customization |
+| **Theming** | Dark and light theme with automatic color adaptation |
 
 <div align="center">
   <img src="images/document_picker.png" width="250" />
@@ -282,16 +284,29 @@ All configuration options are optional. Here are the most commonly used ones:
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
+| `theme` | `'dark' \| 'light'` | `'dark'` | Editor color theme (see [Theming](#theming)) |
 | `cancelButtonText` | `string` | `"Cancel"` | Cancel button text |
 | `saveButtonText` | `string` | `"Save"` | Save button text |
 | `trimmingText` | `string` | `"Trimming video..."` | Progress dialog text |
 | `headerText` | `string` | - | Header text |
 | `headerTextSize` | `number` | `16` | Header text size |
-| `headerTextColor` | `string` | - | Header text color |
+| `headerTextColor` | `string` | - | Header text color (defaults to black in light theme, white in dark theme) |
 | `trimmerColor` | `string` | - | Trimmer bar color |
-| `handleIconColor` | `string` | - | Trimmer left/right handles color |
+| `handleIconColor` | `string` | - | Trimmer left/right handles color (defaults to black in light theme, white in dark theme) |
 | `fullScreenModalIOS` | `boolean` | `false` | Use fullscreen modal on iOS |
 
+### Audio Waveform Options
+
+These options only apply when `type: 'audio'`. The waveform replaces the thumbnail track with a bar visualization of the audio amplitude.
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `waveformColor` | `string` | `"white"` | Fill color of the waveform bars |
+| `waveformBackgroundColor` | `string` | `"#3478F6"` | Background color behind the bars |
+| `waveformBarWidth` | `number` | `3` | Width of each bar in dp/pt |
+| `waveformBarGap` | `number` | `2` | Gap between bars in dp/pt |
+| `waveformBarCornerRadius` | `number` | `1.5` | Corner radius of each bar in dp/pt |
+
 ### Dialog Options
 
 <details>
@@ -367,6 +382,7 @@ showEditor(videoPath, {
   removeAfterSavedToPhoto: true,
   
   // UI customization
+  theme: 'light',
   headerText: "Trim Your Video",
   cancelButtonText: "Back",
   saveButtonText: "Done",
@@ -398,14 +414,42 @@ buildscript {
 
 ## Advanced Features
 
+### Theming
+
+The editor supports dark and light themes. Set the `theme` option to switch between them:
+
+```javascript
+// Light theme
+showEditor(videoUrl, {
+  theme: 'light',
+});
+
+// Dark theme (default)
+showEditor(videoUrl, {
+  theme: 'dark',
+});
+```
+
+| | Dark (default) | Light |
+|---|---|---|
+| **Background** | Black | White |
+| **Icons & text** | White | Black |
+| **Cancel/Save text** | White | Black |
+| **Crop brackets & grid** | White | Black |
+| **Progress indicator** | White | White |
+| **Trimmer handle chevrons** | White | White |
+| **Dialogs** | Dark style | Light style |
+
+The `headerTextColor` and `handleIconColor` options automatically adapt to the active theme but can still be overridden explicitly.
+
 ### Audio Trimming
 
 <div align="center">
-  <img src="images/audio_android.jpg" width="200" />
-  <img src="images/audio_ios.jpg" width="200" />
+  <img src="images/audio_android.png" width="200" />
+  <img src="images/audio_ios.png" width="200" />
 </div>
 
-For audio-only trimming, specify the media type and output format:
+For audio-only trimming, specify the media type and output format. The editor automatically displays an audio waveform visualization in place of the thumbnail track. The waveform updates on zoom for higher resolution.
 
 ```javascript
 showEditor(audioUrl, {
@@ -415,6 +459,20 @@ showEditor(audioUrl, {
 });
 ```
 
+Customize the waveform appearance:
+
+```javascript
+showEditor(audioUrl, {
+  type: 'audio',
+  outputExt: 'mp3',
+  waveformColor: '#FFFFFF',
+  waveformBackgroundColor: '#3478F6',
+  waveformBarWidth: 3,
+  waveformBarGap: 2,
+  waveformBarCornerRadius: 1.5,
+});
+```
+
 ### Remote Files (HTTPS)
 
 To trim remote files, you need the HTTPS-enabled version of FFmpeg:

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

@@ -204,7 +204,7 @@ object VideoTrimmerUtil {
     endPosition: Long,
     callback: SingleCallback<Bitmap, Int>
   ) {
-    BackgroundExecutor.execute(object : BackgroundExecutor.Task("", 0L, "") {
+    BackgroundExecutor.execute(object : BackgroundExecutor.Task("initial_thumbs", 0L, "") {
       override fun execute() {
         try {
           val interval = (endPosition - startPosition) / (totalThumbsCount - 1)

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

@@ -0,0 +1,92 @@
+package com.videotrim.widgets
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.RectF
+import android.util.AttributeSet
+import android.view.View
+
+/**
+ * Custom View that draws an audio waveform as a row of vertical rounded-rect bars.
+ *
+ * Each bar's height is driven by a normalized amplitude value in [0, 1].
+ * The view recalculates bar count from its own width and maps the amplitudes
+ * array proportionally, so it works correctly regardless of whether the
+ * amplitudes array has more or fewer entries than the visible bar count.
+ *
+ * The background color (set via [View.setBackgroundColor]) provides the
+ * waveform track color; the bars are drawn on top with [barColor].
+ */
+class AudioWaveformView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : View(context, attrs, defStyleAttr) {
+
+    var amplitudes: FloatArray = FloatArray(0)
+        private set
+    private val barPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+        color = Color.WHITE
+        style = Paint.Style.FILL
+    }
+    private val barRect = RectF()
+
+    var barColor: Int
+        get() = barPaint.color
+        set(value) {
+            barPaint.color = value
+            invalidate()
+        }
+
+    var barWidthPx: Float = 0f
+        set(value) {
+            field = value
+            invalidate()
+        }
+
+    var barGapPx: Float = 0f
+        set(value) {
+            field = value
+            invalidate()
+        }
+
+    var barCornerRadiusPx: Float = 0f
+        set(value) {
+            field = value
+            invalidate()
+        }
+
+    fun setAmplitudes(data: FloatArray) {
+        amplitudes = data
+        invalidate()
+    }
+
+    override fun onDraw(canvas: Canvas) {
+        super.onDraw(canvas)
+        if (amplitudes.isEmpty()) return
+
+        val totalHeight = height.toFloat()
+        val step = barWidthPx + barGapPx
+        if (step <= 0f) return
+        val barCount = (width.toFloat() / step).toInt()
+        if (barCount <= 0) return
+
+        // Keep bars from touching the container edges
+        val verticalPadding = barWidthPx * 1.5f
+        val drawableHeight = totalHeight - verticalPadding * 2f
+        if (drawableHeight <= 0f) return
+        val minBarHeight = barWidthPx
+
+        for (i in 0 until barCount) {
+            val ampIndex = (i * amplitudes.size / barCount).coerceIn(0, amplitudes.size - 1)
+            val amp = amplitudes[ampIndex]
+            val barHeight = (amp * drawableHeight).coerceAtLeast(minBarHeight)
+            val x = i * step
+            val y = verticalPadding + (drawableHeight - barHeight) / 2f
+            barRect.set(x, y, x + barWidthPx, y + barHeight)
+            canvas.drawRoundRect(barRect, barCornerRadiusPx, barCornerRadiusPx, barPaint)
+        }
+    }
+}

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

@@ -6,8 +6,6 @@ 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
@@ -46,6 +44,16 @@ class CropOverlayView @JvmOverloads constructor(
   var onCropBegan: (() -> Unit)? = null
   var onCropEnded: (() -> Unit)? = null
 
+  var isLightTheme = false
+    set(value) {
+      field = value
+      val c = if (value) Color.BLACK else Color.WHITE
+      borderPaint.color = c
+      gridPaint.color = c
+      cornerPaint.color = c
+      invalidate()
+    }
+
   private val minCropSize = dpToPx(60f)
   private val borderWidth = dpToPx(1f)
   private val cornerLength = dpToPx(20f)
@@ -71,10 +79,6 @@ class CropOverlayView @JvmOverloads constructor(
     strokeCap = Paint.Cap.ROUND
     strokeJoin = Paint.Join.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,
@@ -128,8 +132,6 @@ class CropOverlayView @JvmOverloads constructor(
     if (cropRect.isEmpty) return
     val cr = cropRect
 
-    drawDimming(canvas, cr)
-
     canvas.drawRect(cr, borderPaint)
 
     for (i in 1..2) {
@@ -163,22 +165,6 @@ class CropOverlayView @JvmOverloads constructor(
     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) {