@technotoil/image-video-editor 0.1.0 → 0.1.2

package/README.md

@@ -6,9 +6,9 @@ A high-performance, feature-rich React Native image and video editor. This libra
 * 📹 **Native Camera View**: High-performance thread-safe AVCaptureSession wrapper for iOS and custom camera on Android.
 * ✂️ **Video Trimming**: Seamless interactive trimming of video files.
 * 🖼️ **Custom Photo Frames**: Layer beautiful custom frames on top of images.
-* 🎵 **Audio Mixing**: Select and mix audio tracks onto video exports.
-* 🎨 **Real-time Filters**: High-performance shaders/filters for photo and video formats.
+* 🎵 **Audio Mixing & Carousel Sync**: Add background music tracks to your videos. Applies custom audio seamlessly across all videos in a multi-item carousel, automatically pausing original video sound.
 * 📦 **Modular Export**: Triggers callbacks with local filesystem URIs suitable for server uploads.
+* 📱 **Multi-Select & Swiping**: Select up to 5 items simultaneously and edit them smoothly via horizontal swiping. UI state and trimming configurations perfectly sync across items.
 
 ---
 
@@ -44,11 +44,17 @@ Ensure the following keys are added to your `Info.plist`:
 <string>We need access to your microphone to record audio for videos.</string>
 <key>NSPhotoLibraryUsageDescription</key>
 <string>We need access to your photo library to pick and save media files.</string>
+<key>UIAppFonts</key>
+<array>
+  <string>Ionicons.ttf</string>
+</array>
 ```
 
 #### Android Installation
-Make sure to add the FFmpeg kit dependency in your app's `android/app/build.gradle`:
+Make sure to add the FFmpeg kit dependency in your app's `android/app/build.gradle`. You will also need to link the fonts from `react-native-vector-icons`:
 ```groovy
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+
 dependencies {
     implementation("io.github.maitrungduc1410:ffmpeg-kit-min:6.0.1")
 }
@@ -92,6 +98,9 @@ export default function App() {
           headerTitle="Create New Post"
           cameraModes={['POST', 'STORY', 'REEL']}
           defaultCameraMode="REEL"
+          mediaType="any"
+          mediaTabs={['GALLERY', 'PHOTO', 'VIDEO']}
+          maxVideoDurationMs={30000} // Force trim videos longer than 30s
           onCancelPress={() => setEditorVisible(false)}
           onFinishExport={(editedMedia, paths, editedArray, cameraMode) => {
             console.log('Export completed successfully!');
@@ -126,6 +135,11 @@ const styles = StyleSheet.create({
 | `cameraModes` | `Array<'POST' \| 'STORY' \| 'REEL'>` | `['POST', 'STORY', 'REEL']` | Active shooting modes allowed. |
 | `defaultCameraMode` | `'POST' \| 'STORY' \| 'REEL'` | `"REEL"` | Initial shooting mode when opening. |
 | `musicList` | `MusicTrack[]` | `[]` | List of audio tracks available to overlay on videos. |
+| `maxSelection` | `number` | `1` | Maximum number of media items user can select. Max allowed is 5. |
+| `aspectRatio` | `'1:1' \| '4:3' \| '4:5' \| '16:9' \| '9:16' \| 'free'` | `'free'` | Enforce a fixed aspect ratio for image/video preview. |
+| `mediaType` | `'photo' \| 'video' \| 'any'` | `'any'` | Filter the library to only show photos, videos, or both. |
+| `mediaTabs` | `Array<'GALLERY' \| 'PHOTO' \| 'VIDEO'>` | `['GALLERY', 'PHOTO', 'VIDEO']` | Control which selection tabs are visible at the bottom of the picker screen. Defaults to the first array item. |
+| `maxVideoDurationMs` | `number` | `undefined` | Maximum video duration allowed in milliseconds. If a video exceeds this, the trim editor will automatically force the user to trim. |
 | `onCancelPress` | `() => void` | `undefined` | Callback fired when user cancels or leaves the editor. |
 | `onFinishExport` | `(editedMedia: any, paths: string[], editedArray: any[], cameraMode: string) => void` | `undefined` | Fired when edits finish exporting. Fills `paths` with target video/image file URIs. |
 

package/android/src/main/java/com/technotoil/image_videoeditor/FrameGrabberModule.kt

@@ -34,15 +34,11 @@ class FrameGrabberModule(private val reactContext: ReactApplicationContext) :
       
       var bitmap: Bitmap? = null
       try {
-        bitmap = retriever.getFrameAtTime(timeUs, MediaMetadataRetriever.OPTION_CLOSEST)
+        bitmap = retriever.getFrameAtTime(timeUs, MediaMetadataRetriever.OPTION_CLOSEST_SYNC)
       } catch (e: Exception) {
-        // Fallback
-      }
-      
-      if (bitmap == null) {
         try {
           bitmap = retriever.getFrameAtTime(timeUs)
-        } catch (e: Exception) {
+        } catch (e2: Exception) {
           // Fallback
         }
       }

package/android/src/main/java/com/technotoil/image_videoeditor/MediaEditorModule.kt

@@ -38,11 +38,11 @@ class MediaEditorModule(private val reactContext: ReactApplicationContext) :
     return uri
   }
 
-  private fun downloadToCache(urlString: String): File {
+  private fun downloadToCache(urlString: String, prefix: String = "music_", ext: String = ".mp3"): File {
     val url = java.net.URL(urlString)
     val connection = url.openConnection()
     connection.connect()
-    val cacheFile = File.createTempFile("music_", ".mp3", reactContext.cacheDir)
+    val cacheFile = File.createTempFile(prefix, ext, reactContext.cacheDir)
     url.openStream().use { input ->
       FileOutputStream(cacheFile).use { output ->
         input.copyTo(output)
@@ -158,18 +158,27 @@ class MediaEditorModule(private val reactContext: ReactApplicationContext) :
       // Frame drawing
       if (hasFrame) {
         try {
-          val assetManager = reactContext.assets
-          val inputStream = assetManager.open("frames/$rawFrameKey.png")
-          val frameBitmap = BitmapFactory.decodeStream(inputStream)
-          inputStream.close()
+          val frameUriString = if (options.hasKey("frameUri")) options.getString("frameUri") else null
+          var frameFile: File? = null
+          if (!frameUriString.isNullOrEmpty()) {
+            frameFile = if (frameUriString.startsWith("http://") || frameUriString.startsWith("https://")) {
+              downloadToCache(frameUriString, "frame_", ".png")
+            } else {
+              MediaFileUtils.copyToCache(reactContext, Uri.parse(frameUriString), "frame_")
+            }
+          }
           
-          if (frameBitmap != null) {
-            android.util.Log.d("RNMediaEditor", "Frame loaded: $rawFrameKey  ${frameBitmap.width}x${frameBitmap.height}")
-            val destRect = Rect(0, 0, baseImage.width, baseImage.height)
-            baseCanvas.drawBitmap(frameBitmap, null, destRect, null)
-            frameBitmap.recycle()
-          } else {
-            android.util.Log.w("RNMediaEditor", "Frame bitmap decode returned null for: $rawFrameKey")
+          if (frameFile != null) {
+            val frameBitmap = BitmapFactory.decodeFile(frameFile.absolutePath)
+            if (frameBitmap != null) {
+              android.util.Log.d("RNMediaEditor", "Frame loaded: $rawFrameKey  ${frameBitmap.width}x${frameBitmap.height}")
+              val destRect = Rect(0, 0, baseImage.width, baseImage.height)
+              baseCanvas.drawBitmap(frameBitmap, null, destRect, null)
+              frameBitmap.recycle()
+            } else {
+              android.util.Log.w("RNMediaEditor", "Frame bitmap decode returned null for: $rawFrameKey")
+            }
+            try { if (frameFile.exists()) frameFile.delete() } catch (_: Exception) {}
           }
         } catch (e: Exception) {
           android.util.Log.e("RNMediaEditor", "Frame load FAILED for: $rawFrameKey — ${e.message}", e)
@@ -322,14 +331,18 @@ class MediaEditorModule(private val reactContext: ReactApplicationContext) :
       if (!editedDir.exists()) editedDir.mkdirs()
       val outFile = File.createTempFile("edited_video_", ".mp4", editedDir)
 
-      // Copy frame png from assets into a real file for ffmpeg input
+      // Download/copy frame png from uri
       var frameFile: File? = null
-      if (hasFrame) {
-        frameFile = File(reactContext.cacheDir, "frame_${frameKey}_${System.currentTimeMillis()}.png")
-        reactContext.assets.open("frames/${frameKey}.png").use { input ->
-          FileOutputStream(frameFile).use { output ->
-            input.copyTo(output)
+      val frameUriString = if (options.hasKey("frameUri")) options.getString("frameUri") else null
+      if (hasFrame && !frameUriString.isNullOrEmpty()) {
+        try {
+          frameFile = if (frameUriString!!.startsWith("http://") || frameUriString.startsWith("https://")) {
+            downloadToCache(frameUriString, "frame_", ".png")
+          } else {
+            MediaFileUtils.copyToCache(reactContext, Uri.parse(frameUriString), "frame_")
           }
+        } catch (e: Exception) {
+          android.util.Log.e("RNMediaEditor", "Failed to get frame file: ${e.message}")
         }
       }
 
@@ -338,7 +351,7 @@ class MediaEditorModule(private val reactContext: ReactApplicationContext) :
       if (hasMusic) {
         try {
           musicFile = if (musicUri!!.startsWith("http://") || musicUri.startsWith("https://")) {
-            downloadToCache(musicUri)
+            downloadToCache(musicUri, "music_", ".mp3")
           } else {
             MediaFileUtils.copyToCache(reactContext, Uri.parse(musicUri), "music")
           }
@@ -429,10 +442,14 @@ class MediaEditorModule(private val reactContext: ReactApplicationContext) :
         }
       }
 
+      val hasVisualFilters = filterSteps.isNotEmpty() || isImage
+
       // Final output label assignment - ensure even dimensions for the encoder
-      if (currentLabel != "[vout]") {
-        filterSteps.add("${currentLabel}scale=trunc(iw/2)*2:trunc(ih/2)*2[vout]")
-        currentLabel = "[vout]"
+      if (hasVisualFilters) {
+        if (currentLabel != "[vout]") {
+          filterSteps.add("${currentLabel}scale=trunc(iw/2)*2:trunc(ih/2)*2[vout]")
+          currentLabel = "[vout]"
+        }
       }
 
       // Audio configuration
@@ -451,6 +468,8 @@ class MediaEditorModule(private val reactContext: ReactApplicationContext) :
 
       val musicInputIndex = if (hasFrame) 2 else 1
 
+      val musicOffsetMs = if (options.hasKey("musicOffsetMs")) options.getDouble("musicOffsetMs") else 0.0
+
       val audioArgsList = if (hasMusic && musicFile != null) {
         if (hasVideoAudio && !mute) {
           // Mix audio tracks: [0:a] and [$musicInputIndex:a]
@@ -501,24 +520,45 @@ class MediaEditorModule(private val reactContext: ReactApplicationContext) :
       }
 
       if (hasMusic && musicFile != null) {
+        if (musicOffsetMs > 0) {
+          cmdList.add("-ss")
+          cmdList.add(f(musicOffsetMs / 1000.0))
+        }
         cmdList.add("-i")
         cmdList.add(musicFile.absolutePath)
       }
 
-      cmdList.add("-filter_complex")
-      cmdList.add(filterComplex)
-      cmdList.add("-map")
-      cmdList.add("[vout]")
+      if (filterComplex.isNotEmpty()) {
+        cmdList.add("-filter_complex")
+        cmdList.add(filterComplex)
+      }
+
+      if (hasVisualFilters) {
+        cmdList.add("-map")
+        cmdList.add("[vout]")
+      } else {
+        cmdList.add("-map")
+        cmdList.add("0:v")
+      }
+      
       cmdList.addAll(audioArgsList)
       
-      // Use h264_mediacodec for hardware acceleration on Android.
-      // This is efficient and works well with minimal builds.
-      cmdList.add("-c:v")
-      cmdList.add("h264_mediacodec")
-      cmdList.add("-b:v")
-      cmdList.add("5M")
-      cmdList.add("-pix_fmt")
-      cmdList.add("yuv420p") // Wide compatibility
+      // Force the output duration to match the intended trim duration exactly
+      cmdList.add("-t")
+      cmdList.add(ttString)
+      
+      if (hasVisualFilters) {
+        cmdList.add("-c:v")
+        cmdList.add("h264_mediacodec")
+        cmdList.add("-b:v")
+        cmdList.add("5M")
+        cmdList.add("-pix_fmt")
+        cmdList.add("yuv420p")
+      } else {
+        cmdList.add("-c:v")
+        cmdList.add("copy")
+      }
+      
       cmdList.add(outFile.absolutePath)
 
       val cmdArray = cmdList.toTypedArray()

package/android/src/main/java/com/technotoil/image_videoeditor/MediaLibraryModule.kt

@@ -26,11 +26,6 @@ class MediaLibraryModule(private val reactContext: ReactApplicationContext) :
 
   @ReactMethod
   fun requestAccess(promise: Promise) {
-    val activity = getCurrentActivity()
-    if (activity == null) {
-      promise.resolve(false)
-      return
-    }
     val permissions = if (android.os.Build.VERSION.SDK_INT >= 33) {
       arrayOf(Manifest.permission.READ_MEDIA_IMAGES, Manifest.permission.READ_MEDIA_VIDEO)
     } else {
@@ -43,6 +38,13 @@ class MediaLibraryModule(private val reactContext: ReactApplicationContext) :
       promise.resolve(true)
       return
     }
+
+    val activity = getCurrentActivity()
+    if (activity == null) {
+      promise.resolve(false)
+      return
+    }
+
     if (activity is com.facebook.react.modules.core.PermissionAwareActivity) {
       activity.requestPermissions(permissions, 4422,
         com.facebook.react.modules.core.PermissionListener { _: Int, _: Array<String>, grantResults: IntArray ->
@@ -82,7 +84,7 @@ class MediaLibraryModule(private val reactContext: ReactApplicationContext) :
         while (cursor.moveToNext()) {
           val id = cursor.getString(idCol)
           val name = cursor.getString(nameCol) ?: "Unknown"
-          if (!seenIds.contains(id)) {
+          if (id != null && !seenIds.contains(id)) {
             val map = Arguments.createMap()
             map.putString("id", id)
             map.putString("title", name)
@@ -143,7 +145,7 @@ class MediaLibraryModule(private val reactContext: ReactApplicationContext) :
           }
           val id = cursor.getLong(idCol)
           val mediaType = cursor.getInt(typeCol)
-          val duration = cursor.getLong(durationCol)
+          var duration = cursor.getLong(durationCol)
 
           val uri = if (mediaType == MediaStore.Files.FileColumns.MEDIA_TYPE_VIDEO) {
             ContentUris.withAppendedId(MediaStore.Video.Media.EXTERNAL_CONTENT_URI, id)
@@ -151,6 +153,18 @@ class MediaLibraryModule(private val reactContext: ReactApplicationContext) :
             ContentUris.withAppendedId(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, id)
           }
 
+          if (mediaType == MediaStore.Files.FileColumns.MEDIA_TYPE_VIDEO && duration <= 0) {
+            try {
+              val retriever = android.media.MediaMetadataRetriever()
+              retriever.setDataSource(reactContext, uri)
+              val durStr = retriever.extractMetadata(android.media.MediaMetadataRetriever.METADATA_KEY_DURATION)
+              if (durStr != null) {
+                duration = durStr.toLong()
+              }
+              retriever.release()
+            } catch (e: Exception) {}
+          }
+
           val thumbUri = if (mediaType == MediaStore.Files.FileColumns.MEDIA_TYPE_VIDEO) {
             createVideoThumbnail(uri, id)
           } else {
@@ -202,42 +216,44 @@ class MediaLibraryModule(private val reactContext: ReactApplicationContext) :
 
   @ReactMethod
   fun exportAsset(localId: String, promise: Promise) {
-    try {
-      val id = localId.toLong()
-      val resolver = reactContext.contentResolver
-      var uri: Uri? = null
-
-      // Check if it is a video first
-      val videoUri = ContentUris.withAppendedId(MediaStore.Video.Media.EXTERNAL_CONTENT_URI, id)
-      var cursor = resolver.query(videoUri, arrayOf(MediaStore.Video.Media._ID), null, null, null)
-      if (cursor != null) {
-        if (cursor.moveToFirst()) {
-          uri = videoUri
-        }
-        cursor.close()
-      }
+    Thread {
+      try {
+        val id = localId.toLong()
+        val resolver = reactContext.contentResolver
+        var uri: Uri? = null
 
-      // If not a video, check if it's an image
-      if (uri == null) {
-        val imageUri = ContentUris.withAppendedId(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, id)
-        cursor = resolver.query(imageUri, arrayOf(MediaStore.Images.Media._ID), null, null, null)
+        // Check if it is a video first
+        val videoUri = ContentUris.withAppendedId(MediaStore.Video.Media.EXTERNAL_CONTENT_URI, id)
+        var cursor = resolver.query(videoUri, arrayOf(MediaStore.Video.Media._ID), null, null, null)
         if (cursor != null) {
           if (cursor.moveToFirst()) {
-            uri = imageUri
+            uri = videoUri
           }
           cursor.close()
         }
-      }
 
-      if (uri != null) {
-        val cacheFile = MediaFileUtils.copyToCache(reactContext, uri, "export")
-        promise.resolve(Uri.fromFile(cacheFile).toString())
-      } else {
-        promise.reject("not_found", "Asset not found in Video or Image MediaStore")
+        // If not a video, check if it's an image
+        if (uri == null) {
+          val imageUri = ContentUris.withAppendedId(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, id)
+          cursor = resolver.query(imageUri, arrayOf(MediaStore.Images.Media._ID), null, null, null)
+          if (cursor != null) {
+            if (cursor.moveToFirst()) {
+              uri = imageUri
+            }
+            cursor.close()
+          }
+        }
+
+        if (uri != null) {
+          val cacheFile = MediaFileUtils.copyToCache(reactContext, uri, "export")
+          promise.resolve(Uri.fromFile(cacheFile).toString())
+        } else {
+          promise.reject("not_found", "Asset not found in Video or Image MediaStore")
+        }
+      } catch (e: Exception) {
+        promise.reject("export_failed", e.message, e)
       }
-    } catch (e: Exception) {
-      promise.reject("export_failed", e.message, e)
-    }
+    }.start()
   }
 
   @ReactMethod