react-native-video-trim 4.0.0 → 5.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Mai Trung Duc
+Copyright (c) 2025 Duc Trung Mai
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights

package/README.md

@@ -1,9 +1,11 @@
+# Table of contents
 - [Installation](#installation)
    * [For iOS (React Native CLI project)](#for-ios-react-native-cli-project)
    * [For Expo project](#for-expo-project)
    * [Usage](#usage)
 - [Methods](#methods)
-   * [showEditor(videoPath: string, config?: EditorConfig, onEvent?: (eventName: string, payload: Record<string, string>) => void)](#showeditorvideopath-string-config-editorconfig-onevent-eventname-string-payload-record--void)
+   * [showEditor(videoPath: string, config?: EditorConfig) => void)](#showeditorvideopath-string-config-editorconfig--void)
+   * [trim(url: string, options: TrimOptions): Promise<string>](#trimurl-string-options-trimoptions-promise)
    * [isValidFile(videoPath: string)](#isvalidfilevideopath-string)
    * [closeEditor()](#closeeditor)
    * [listFiles()](#listfiles)
@@ -12,15 +14,14 @@
 - [Callbacks (New arch)](#callbacks-new-arch)
    * [showEditor](#showeditor)
    * [closeEditor](#closeeditor-1)
-- [Events (Old arch)](#events-old-arch)
 - [Audio support](#audio-support)
 - [Cancel trimming](#cancel-trimming)
 - [Fail to load media](#fail-to-load-media)
+- [Rotation](#rotation)
+- [Use FFMPEG HTTPS version](#use-ffmpeg-https-version)
 - [Android: update SDK version](#android-update-sdk-version)
 - [Thanks](#thanks)
 
-<!-- TOC end -->
-
 # React Native Video Trim
 <div align="center">
 <h2>Video trimmer for your React Native app</h2>
@@ -31,7 +32,7 @@
 
 ## Features
 - ✅ Support video and audio
-- ✅ Support local files
+- ✅ Support local files and remote files (remote files need `https` version, see below)
 - ✅ Save to Photos, Documents and Share to other apps
 - ✅ Check if file is valid video/audio
 - ✅ File operations: list, clean up, delete specific file
@@ -46,7 +47,7 @@
 
 ```sh
 # new arch
-npm install react-native-video-trim react-native-nitro-modules
+npm install react-native-video-trim
 
 # old arch
 npm install react-native-video-trim@^3.0.0
@@ -54,14 +55,12 @@ npm install react-native-video-trim@^3.0.0
 # or with yarn
 
 # new arch
-yarn add react-native-video-trim react-native-nitro-modules
+yarn add react-native-video-trim
 
 # old arch
 yarn add react-native-video-trim@^3.0.0
 ```
 
-> `react-native-nitro-modules` is required in New Arch as this library relies on [Nitro Modules](https://nitro.margelo.com/).
-
 ## For iOS (React Native CLI project)
 Run the following command to setup for iOS:
 ```
@@ -71,9 +70,10 @@ npx pod-install ios
 You need to run `prebuild` in order for native code takes effect:
 ```
 npx expo prebuild
-
-npx pod-install ios
 ```
+Then you need to restart to make the changes take effect
+
+> Note that on iOS you'll need to run on real device, Expo Go may not work because of library linking
 
 ## Usage
 
@@ -92,7 +92,7 @@ showEditor(videoUrl, {
 ```
 Usually this library will be used along with other library to select video file, Eg. [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker). Below is real world example:
 
-```tsx
+```jsx
 import * as React from 'react';
 
 import {
@@ -102,11 +102,84 @@ import {
   TouchableOpacity,
   NativeEventEmitter,
   NativeModules,
+  type EventSubscription,
 } from 'react-native';
 import { isValidFile, showEditor } from 'react-native-video-trim';
 import { launchImageLibrary } from 'react-native-image-picker';
 
 export default function App() {
+  const listenerSubscription = useRef<Record<string, EventSubscription>>({});
+
+  useEffect(() => {
+    listenerSubscription.current.onLoad = NativeVideoTrim.onLoad(
+      ({ duration }) => console.log('onLoad', duration)
+    );
+
+    listenerSubscription.current.onStartTrimming =
+      NativeVideoTrim.onStartTrimming(() => console.log('onStartTrimming'));
+
+    listenerSubscription.current.onCancelTrimming =
+      NativeVideoTrim.onCancelTrimming(() => console.log('onCancelTrimming'));
+    listenerSubscription.current.onCancel = NativeVideoTrim.onCancel(() =>
+      console.log('onCancel')
+    );
+    listenerSubscription.current.onHide = NativeVideoTrim.onHide(() =>
+      console.log('onHide')
+    );
+    listenerSubscription.current.onShow = NativeVideoTrim.onShow(() =>
+      console.log('onShow')
+    );
+    listenerSubscription.current.onFinishTrimming =
+      NativeVideoTrim.onFinishTrimming(
+        ({ outputPath, startTime, endTime, duration }) =>
+          console.log(
+            'onFinishTrimming',
+            `outputPath: ${outputPath}, startTime: ${startTime}, endTime: ${endTime}, duration: ${duration}`
+          )
+      );
+    listenerSubscription.current.onLog = NativeVideoTrim.onLog(
+      ({ level, message, sessionId }) =>
+        console.log(
+          'onLog',
+          `level: ${level}, message: ${message}, sessionId: ${sessionId}`
+        )
+    );
+    listenerSubscription.current.onStatistics = NativeVideoTrim.onStatistics(
+      ({
+        sessionId,
+        videoFrameNumber,
+        videoFps,
+        videoQuality,
+        size,
+        time,
+        bitrate,
+        speed,
+      }) =>
+        console.log(
+          'onStatistics',
+          `sessionId: ${sessionId}, videoFrameNumber: ${videoFrameNumber}, videoFps: ${videoFps}, videoQuality: ${videoQuality}, size: ${size}, time: ${time}, bitrate: ${bitrate}, speed: ${speed}`
+        )
+    );
+    listenerSubscription.current.onError = NativeVideoTrim.onError(
+      ({ message, errorCode }) =>
+        console.log('onError', `message: ${message}, errorCode: ${errorCode}`)
+    );
+
+    return () => {
+      listenerSubscription.current.onLoad?.remove();
+      listenerSubscription.current.onStartTrimming?.remove();
+      listenerSubscription.current.onCancelTrimming?.remove();
+      listenerSubscription.current.onCancel?.remove();
+      listenerSubscription.current.onHide?.remove();
+      listenerSubscription.current.onShow?.remove();
+      listenerSubscription.current.onFinishTrimming?.remove();
+      listenerSubscription.current.onLog?.remove();
+      listenerSubscription.current.onStatistics?.remove();
+      listenerSubscription.current.onError?.remove();
+      listenerSubscription.current = {};
+    };
+  });
+
   return (
     <View style={styles.container}>
       <TouchableOpacity
@@ -122,11 +195,7 @@ export default function App() {
 
           showEditor(result.assets![0]?.uri || '', {
             maxDuration: 20,
-          }, 
-          (eventName, payload) => {
-            console.log('Event:', eventName, 'Payload:', payload);
-          }
-          );
+          });
         }}
         style={{ padding: 10, backgroundColor: 'red' }}
       >
@@ -159,7 +228,7 @@ const styles = StyleSheet.create({
 
 # Methods
 
-## showEditor(videoPath: string, config?: EditorConfig, onEvent?: (eventName: string, payload: Record<string, string>) => void)
+## showEditor(videoPath: string, config?: EditorConfig) => void)
 Main method to show Video Editor UI.
 
 *Params*:
@@ -211,6 +280,8 @@ Main method to show Video Editor UI.
   - `alertOnFailTitle` (`default = "Error"`)
   - `alertOnFailMessage` (`default = "Fail to load media. Possibly invalid file or no network connection"`)
   - `alertOnFailCloseText` (`default = "Close"`)
+  - `enableRotation` (`default = false`)
+  - `rotationAngle` (`default = 0`)
 
 If `saveToPhoto = true`, you must ensure that you have request permission to write to photo/gallery
 - For Android: you need to have `<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />` in AndroidManifest.xml
@@ -241,6 +312,10 @@ If you face issue when building Android app related to `file_paths`, then you ma
 </paths>
 ```
 
+## trim(url: string, options: TrimOptions): Promise<string>
+
+Directly trim a file without showing editor
+
 ## isValidFile(videoPath: string)
 
 This method is to check if a path is a valid video/audio
@@ -263,75 +338,15 @@ Delete a file in app storage. Return `true` if success
 ## showEditor
 
 ```ts
-showEditor('file', config, (eventName, payload) => {
-  console.log(eventName, payload)
-})
+showEditor('file', config)
 ```
 
 ## closeEditor
 
 ```ts
-closeEditor(() => {
-  console.log('Editor closed')
-})
+closeEditor()
 ```
 
-
-# Events (Old arch)
-To listen for events you interest, do the following:
-```js
-useEffect(() => {
-  const eventEmitter = new NativeEventEmitter(NativeModules.VideoTrim);
-  const subscription = eventEmitter.addListener('VideoTrim', (event) => {
-    switch (event.name) {
-      case 'onLoad': {
-        console.log('onLoadListener', event);
-        break;
-      }
-      case 'onShow': {
-        console.log('onShowListener', event);
-        break;
-      }
-      case 'onHide': {
-        console.log('onHide', event);
-        break;
-      }
-      case 'onStartTrimming': {
-        console.log('onStartTrimming', event);
-        break;
-      }
-      case 'onFinishTrimming': {
-        console.log('onFinishTrimming', event);
-        break;
-      }
-      case 'onCancelTrimming': {
-        console.log('onCancelTrimming', event);
-        break;
-      }
-      case 'onCancel': {
-        console.log('onCancel', event);
-        break;
-      }
-      case 'onError': {
-        console.log('onError', event);
-        break;
-      }
-      case 'onLog': {
-        console.log('onLog', event);
-        break;
-      }
-      case 'onStatistics': {
-        console.log('onStatistics', event);
-        break;
-      }
-    }
-  });
-
-  return () => {
-    subscription.remove();
-  };
-}, []);
-```
 # Audio support
 <div align="left">
 <img src="images/audio_android.jpg" width="200" />
@@ -363,14 +378,40 @@ If there's error while loading media, there'll be a prompt
 
 Related props: `alertOnFailToLoad, alertOnFailTitle, alertOnFailMessage, alertOnFailCloseText`
 
+# Rotation
+
+To trim & rotate video you can pass `enableRotation` and `rotationAngle` to `showEditor`/`trim`. But note that it doesn't re-encode the video, instead the lib uses `display_rotation` metadata from ffmpeg, and some players/platforms may show differently.
+
+# Use FFMPEG HTTPS version
+
+If you want to trim a remote file, you need to use `https` version (default is `min` which does not support remote file).
+
+Do the following:
+
+```
+// android/build.gradle
+buildscript {
+    ext {
+        VideoTrim_ffmpeg_package=https
+
+        // optional: VideoTrim_ffmpeg_version=6.0.1
+    }
+}
+
+// ios
+FFMPEGKIT_PACKAGE=https FFMPEG_KIT_PACKAGE_VERSION=6.0 pod install
+```
+
 # Android: update SDK version
 You can override sdk version to use any version in your `android/build.gradle` > `buildscript` > `ext`
 ```gradle
 buildscript {
     ext {
-        VideoTrim_compileSdkVersion = 34
-        VideoTrim_minSdkVersion = 26
-        VideoTrim_targetSdkVersion = 34
+        VideoTrim_kotlinVersion=2.0.21
+        VideoTrim_minSdkVersion=24
+        VideoTrim_targetSdkVersion=34
+        VideoTrim_compileSdkVersion=35
+        VideoTrim_ndkVersion=27.1.12297006
     }
 }
 ```

package/VideoTrim.podspec

@@ -13,12 +13,12 @@ Pod::Spec.new do |s|
   s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "https://github.com/maitrungduc1410/react-native-video-trim.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm,swift}"
+  s.source_files = "ios/**/*.{h,m,mm,cpp}"
+  s.private_header_files = "ios/**/*.h"
 
-  s.dependency 'ffmpeg-mobile-min', '~> 6.0'
+  s.dependency "ffmpeg-mobile-#{ENV['FFMPEGKIT_PACKAGE'] || 'min'}", ENV['FFMPEGKIT_PACKAGE_VERSION'] || '~> 6.0'
 
-  load 'nitrogen/generated/ios/VideoTrim+autolinking.rb'
-  add_nitrogen_files(s)
+  s.frameworks = 'AVFoundation', 'AVKit', 'UIKit', 'Photos'
 
  install_modules_dependencies(s)
 end

package/android/build.gradle

@@ -15,14 +15,9 @@ buildscript {
   }
 }
 
-def reactNativeArchitectures() {
-  def value = rootProject.getProperties().get("reactNativeArchitectures")
-  return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
-}
 
 apply plugin: "com.android.library"
 apply plugin: "kotlin-android"
-apply from: '../nitrogen/generated/android/videotrim+autolinking.gradle'
 
 apply plugin: "com.facebook.react"
 
@@ -30,63 +25,26 @@ def getExtOrIntegerDefault(name) {
   return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["VideoTrim_" + name]).toInteger()
 }
 
+def getPackageNameOrDefault() {
+  return rootProject.ext.has("VideoTrim_ffmpeg_package") ? rootProject.ext.get("VideoTrim_ffmpeg_package") : project.properties["VideoTrim_ffmpeg_package"]
+}
+
+def getPackageVersionOrDefault() {
+  return rootProject.ext.has("VideoTrim_ffmpeg_version") ? rootProject.ext.get("VideoTrim_ffmpeg_version") : project.properties["VideoTrim_ffmpeg_version"]
+}
+
 android {
-  namespace "com.margelo.nitro.videotrim"
+  namespace "com.videotrim"
 
   compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
 
   defaultConfig {
     minSdkVersion getExtOrIntegerDefault("minSdkVersion")
     targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
-
-    externalNativeBuild {
-      cmake {
-        cppFlags "-frtti -fexceptions -Wall -fstack-protector-all"
-        arguments "-DANDROID_STL=c++_shared"
-        abiFilters (*reactNativeArchitectures())
-
-        buildTypes {
-          debug {
-            cppFlags "-O1 -g"
-          }
-          release {
-            cppFlags "-O2"
-          }
-        }
-      }
-    }
-  }
-
-  externalNativeBuild {
-    cmake {
-      path "CMakeLists.txt"
-    }
-  }
-
-  packagingOptions {
-    excludes = [
-            "META-INF",
-            "META-INF/**",
-            "**/libc++_shared.so",
-            "**/libfbjni.so",
-            "**/libjsi.so",
-            "**/libfolly_json.so",
-            "**/libfolly_runtime.so",
-            "**/libglog.so",
-            "**/libhermes.so",
-            "**/libhermes-executor-debug.so",
-            "**/libhermes_executor.so",
-            "**/libreactnative.so",
-            "**/libreactnativejni.so",
-            "**/libturbomodulejsijni.so",
-            "**/libreact_nativemodule_core.so",
-            "**/libjscexecutor.so"
-    ]
   }
 
   buildFeatures {
     buildConfig true
-    prefab true
   }
 
   buildTypes {
@@ -124,8 +82,11 @@ def kotlin_version = getExtOrDefault("kotlinVersion")
 dependencies {
   implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation project(":react-native-nitro-modules")
-
-  implementation 'io.github.maitrungduc1410:ffmpeg-kit-min:6.0.0'
+  implementation 'io.github.maitrungduc1410:ffmpeg-kit-' + getPackageNameOrDefault() +':' + getPackageVersionOrDefault()
 }
 
+react {
+  jsRootDir = file("../src/")
+  libraryName = "VideoTrim"
+  codegenJavaPackageName = "com.videotrim"
+}

package/android/gradle.properties

@@ -3,3 +3,5 @@ VideoTrim_minSdkVersion=24
 VideoTrim_targetSdkVersion=34
 VideoTrim_compileSdkVersion=35
 VideoTrim_ndkVersion=27.1.12297006
+VideoTrim_ffmpeg_package=min
+VideoTrim_ffmpeg_version=6.0.1

package/android/src/main/AndroidManifest.xml

@@ -1,6 +1,6 @@
 <manifest
   xmlns:android="http://schemas.android.com/apk/res/android"
-  package="com.margelo.nitro.videotrim">
+  package="com.videotrim">
 
 <uses-permission android:name="android.permission.VIBRATE" />