react-native-video-trim 7.1.0 → 7.1.1

package/README.md

@@ -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
@@ -54,7 +54,7 @@ A powerful, easy-to-use video and audio trimming library for React Native applic
 
 | 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 |
@@ -295,6 +295,18 @@ All configuration options are optional. Here are the most commonly used ones:
 | `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>
@@ -433,11 +445,11 @@ The `headerTextColor` and `handleIconColor` options automatically adapt to the a
 ### 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, {
@@ -447,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)
+        }
+    }
+}