react-native-video-trim 0.0.1 → 1.0.1

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2023 Mai Trung Duc
+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
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,206 @@
+# react-native-video-trim
+<div align="center">
+<h2>Video trimmer for your React Native app</h2>
+
+<img src="images/android.gif" width="300" />
+<img src="images/ios.gif" width="300" />
+</div>
+
+## Installation
+
+```sh
+npm install react-native-video-trim
+
+# or with yarn
+
+yarn add react-native-video-trim
+```
+
+Next install CocoaPods deps:
+
+```
+cd ios & pod install
+```
+
+## Usage
+
+```js
+import { showEditor } from 'react-native-video-trim';
+
+// ...
+
+showEditor(videoUrl);
+
+// or with output length limit
+
+showEditor(videoUrl, {
+  maxDuration: 20,
+});
+```
+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
+import * as React from 'react';
+
+import {
+  StyleSheet,
+  View,
+  Text,
+  TouchableOpacity,
+  NativeEventEmitter,
+  NativeModules,
+} from 'react-native';
+import { isValidVideo, showEditor } from 'react-native-video-trim';
+import { launchImageLibrary } from 'react-native-image-picker';
+import { useEffect } from 'react';
+
+export default function App() {
+  useEffect(() => {
+    const eventEmitter = new NativeEventEmitter(NativeModules.VideoTrim);
+    const subscription = eventEmitter.addListener('VideoTrim', (event) => {
+      switch (event.name) {
+        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 'onError': {
+          console.log('onError', event);
+          break;
+        }
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        onPress={async () => {
+          const result = await launchImageLibrary({
+            mediaType: 'video',
+          });
+
+          isValidVideo(result.assets![0]?.uri || '').then((res) =>
+            console.log(res)
+          );
+
+          showEditor(result.assets![0]?.uri || '', {
+            maxDuration: 20,
+          });
+        }}
+        style={{ padding: 10, backgroundColor: 'red' }}
+      >
+        <Text>Launch Library</Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        onPress={() => {
+          isValidVideo('invalid file path').then((res) => console.log(res));
+        }}
+        style={{
+          padding: 10,
+          backgroundColor: 'blue',
+          marginTop: 20,
+        }}
+      >
+        <Text>Check Video Valid</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+```
+
+# Methods
+
+## showEditor(videoPath: string, config?: EditorConfig)
+Main method to show Video Editor UI.
+
+*Params*:
+- `videoPath`: Path to video file, if this is an invalid path, `onError` event will be fired
+- `config` (optional): 
+
+  - `saveToPhoto` (optional, `default = true`): whether to save video to photo/gallery after editing
+  - `maxDuration` (optional): maximum duration for the trimmed video
+
+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
+- For iOS: you need `NSPhotoLibraryUsageDescription` in Info.plist
+
+## isValidVideo (videoPath: string)
+
+This method is to check if a path is a actual video. It returns `Promise<boolean>`
+
+# Events
+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 'onShow': {
+        // on Dialog show
+        console.log('onShowListener', event);
+        break;
+      }
+      case 'onHide': {
+        // on Dialog hide
+        console.log('onHide', event);
+        break;
+      }
+      case 'onStartTrimming': {
+        // Android only: on start trimming
+        console.log('onStartTrimming', event);
+        break;
+      }
+      case 'onFinishTrimming': {
+        // on trimming is done
+        console.log('onFinishTrimming', event);
+        break;
+      }
+      case 'onCancelTrimming': {
+        // when user clicks Cancel button
+        console.log('onCancelTrimming', event);
+        break;
+      }
+      case 'onError': {
+        // any error occured: invalid file, lack of permissions to write to photo/gallery, unexpected error...
+        console.log('onError', event);
+        break;
+      }
+    }
+  });
+
+  return () => {
+    subscription.remove();
+  };
+}, []);
+```
+
+# Thanks
+Android part is created by modified + fix bugs from  [original project](Android-Video-Trimmer)

package/android/build.gradle

@@ -0,0 +1,105 @@
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:7.2.1"
+  }
+}
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+
+
+def appProject = rootProject.allprojects.find { it.plugins.hasPlugin('com.android.application') }
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["VideoTrim_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["VideoTrim_" + name]).toInteger()
+}
+
+def supportsNamespace() {
+  def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+  def major = parsed[0].toInteger()
+  def minor = parsed[1].toInteger()
+
+  // Namespace support was added in 7.3.0
+  if (major == 7 && minor >= 3) {
+    return true
+  }
+
+  return major >= 8
+}
+
+android {
+  if (supportsNamespace()) {
+    namespace "com.videotrim"
+  } else {
+    sourceSets {
+      main {
+        manifest.srcFile "src/main/AndroidManifestDeprecated.xml"
+      }
+    }
+  }
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+  }
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+}
+
+repositories {
+  mavenCentral()
+  google()
+  jcenter()
+}
+
+
+dependencies {
+  // For < 0.71, this will be from the local maven repo
+  // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
+  //noinspection GradleDynamicVersion
+  implementation "com.facebook.react:react-native:+"
+  implementation 'com.github.iknow4:android-utils-sdk:1.1.2'
+  implementation 'androidx.recyclerview:recyclerview:1.1.0'
+  implementation 'com.guolindev.permissionx:permissionx:1.7.1'
+  implementation 'com.arthenica:ffmpeg-kit-full:5.1.LTS'
+}
+
+if (isNewArchitectureEnabled()) {
+  react {
+    jsRootDir = file("../src/")
+    libraryName = "VideoTrim"
+    codegenJavaPackageName = "com.videotrim"
+  }
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+VideoTrim_kotlinVersion=1.7.0
+VideoTrim_minSdkVersion=21
+VideoTrim_targetSdkVersion=31
+VideoTrim_compileSdkVersion=31
+VideoTrim_ndkversion=21.4.7075529

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/AndroidManifestDeprecated.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.videotrim">
+</manifest>

package/android/src/main/java/com/videotrim/VideoTrimModule.java

@@ -0,0 +1,315 @@
+package com.videotrim;
+
+import static com.facebook.react.bridge.UiThreadUtil.runOnUiThread;
+
+import android.Manifest;
+import android.app.Activity;
+import android.content.res.ColorStateList;
+import android.graphics.Color;
+import android.media.MediaMetadataRetriever;
+import android.net.Uri;
+import android.os.Build;
+import android.view.Gravity;
+import android.view.ViewGroup;
+import android.widget.LinearLayout;
+import android.widget.ProgressBar;
+import android.widget.TextView;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.appcompat.app.AlertDialog;
+import androidx.fragment.app.FragmentActivity;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.LifecycleEventListener;
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.modules.core.DeviceEventManagerModule;
+import com.permissionx.guolindev.PermissionX;
+import com.videotrim.interfaces.VideoTrimListener;
+import com.videotrim.utils.StorageUtil;
+import com.videotrim.widgets.VideoTrimmerView;
+
+import java.io.File;
+import java.io.IOException;
+import iknow.android.utils.BaseUtils;
+
+@ReactModule(name = VideoTrimModule.NAME)
+public class VideoTrimModule extends ReactContextBaseJavaModule implements VideoTrimListener, LifecycleEventListener {
+  public static final String NAME = "VideoTrim";
+  private static Boolean isInit = false;
+  private VideoTrimmerView trimmerView;
+  private AlertDialog alertDialog;
+  private AlertDialog mProgressDialog;
+  private ProgressBar mProgressBar;
+  private Boolean mSaveToPhoto = true;
+  private int mMaxDuration = 0;
+  private int listenerCount = 0;
+
+  public VideoTrimModule(ReactApplicationContext reactContext) {
+    super(reactContext);
+  }
+
+  @Override
+  @NonNull
+  public String getName() {
+    return NAME;
+  }
+
+
+  @ReactMethod
+  public void showEditor(String videoPath, ReadableMap config) {
+    if (trimmerView != null || alertDialog != null) {
+      return;
+    }
+
+    if (config.hasKey("saveToPhoto")) {
+      this.mSaveToPhoto = config.getBoolean("saveToPhoto");
+    }
+    if (config.hasKey("maxDuration")) {
+      this.mMaxDuration = config.getInt("maxDuration");
+    }
+
+    if (!_isValidVideo(videoPath)) {
+      WritableMap map = Arguments.createMap();
+      map.putString("message", "File is not a valid video");
+      sendEvent(getReactApplicationContext(), "onError", map);
+      return;
+    }
+
+    Activity activity = getReactApplicationContext().getCurrentActivity();
+
+    if (!isInit) {
+      init(activity);
+      isInit = true;
+    }
+
+    // here is NOT main thread, we need to create VideoTrimmerView on UI thread, so that later we can update it using same thread
+
+    runOnUiThread(() -> {
+      trimmerView = new VideoTrimmerView(getReactApplicationContext(), mMaxDuration, null);
+      trimmerView.setOnTrimVideoListener(this);
+      trimmerView.initVideoByURI(Uri.parse(videoPath));
+
+      AlertDialog.Builder builder = new AlertDialog.Builder(activity, android.R.style.Theme_Black_NoTitleBar_Fullscreen);
+      builder.setCancelable(false);
+      alertDialog = builder.create();
+      alertDialog.setView(trimmerView);
+      alertDialog.show();
+
+
+      if (this.mSaveToPhoto) {
+        // some how this is not fired when user first install app and tap Allow
+        // so that we just request permission first, and later it'll be able to save to Gallery immediately
+        PermissionX.init((FragmentActivity) getReactApplicationContext().getCurrentActivity())
+          .permissions(Manifest.permission.WRITE_EXTERNAL_STORAGE)
+          .request((allGranted, grantedList, deniedList) -> {
+
+          });
+      }
+
+      // this is to ensure to release resource if dialog is dismissed in unexpected way (Eg. open control/notification center by dragging from top of screen)
+      alertDialog.setOnDismissListener(dialog -> {
+        // This is called in same thread as the trimmer view -> UI thread
+        if (trimmerView != null) {
+          trimmerView.onDestroy();
+          trimmerView = null;
+        }
+        hideDialog();
+        sendEvent(getReactApplicationContext(), "onHide", null);
+      });
+      sendEvent(getReactApplicationContext(), "onShow", null);
+    });
+  }
+
+  private void init(Activity activity) {
+    isInit = true;
+    // we have to init this before create videoTrimmerView
+    BaseUtils.init(getReactApplicationContext());
+  }
+
+  @Override
+  public void onHostResume() {
+
+  }
+
+  @Override
+  public void onHostPause() {
+    if (trimmerView != null) {
+      trimmerView.onVideoPause();
+      trimmerView.setRestoreState(true);
+    }
+  }
+
+  @Override
+  public void onHostDestroy() {
+    hideDialog();
+  }
+
+  @Override public void onStartTrim() {
+    sendEvent(getReactApplicationContext(), "onStartTrimming", null);
+    runOnUiThread(() -> {
+      buildDialog();
+    });
+  }
+
+  @Override public void onTrimmingProgress(int percentage) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
+      mProgressBar.setProgress(percentage, true);
+    } else {
+      mProgressBar.setProgress(percentage);
+    }
+  }
+
+
+  @Override public void onFinishTrim(String in) {
+    runOnUiThread(() -> {
+      if (mSaveToPhoto) {
+        PermissionX.init((FragmentActivity) getReactApplicationContext().getCurrentActivity())
+          .permissions(Manifest.permission.WRITE_EXTERNAL_STORAGE)
+          .request((allGranted, grantedList, deniedList) -> {
+            // some how this is not fired when user first tap Allow
+            if (allGranted) {
+              try {
+                StorageUtil.saveVideoToGallery(getReactApplicationContext(), in);
+                WritableMap map = Arguments.createMap();
+                map.putString("outputPath", in);
+                sendEvent(getReactApplicationContext(), "onFinishTrimming", map);
+              } catch (IOException e) {
+                e.printStackTrace();
+                WritableMap mapE = Arguments.createMap();
+                mapE.putString("message", "Fail while copying file to Gallery");
+                sendEvent(getReactApplicationContext(), "onError", mapE);
+              }
+
+              this.hideDialog();
+            } else {
+              WritableMap mapE = Arguments.createMap();
+              mapE.putString("message", "Fail to save to Gallery. Please check if you have correct permission");
+              sendEvent(getReactApplicationContext(), "onError", mapE);
+            }
+          });
+      } else {
+        WritableMap map = Arguments.createMap();
+        map.putString("outputPath", in);
+        sendEvent(getReactApplicationContext(), "onFinishTrimming", map);
+      }
+    });
+  }
+
+  @Override public void onError() {
+    WritableMap map = Arguments.createMap();
+    map.putString("message", "Error when trimming, please try again");
+    sendEvent(getReactApplicationContext(), "onError", map);
+    this.hideDialog();
+  }
+
+  @Override public void onCancel() {
+    sendEvent(getReactApplicationContext(), "onCancelTrimming", null);
+    this.hideDialog();
+  }
+
+  private void hideDialog() {
+    if (mProgressDialog != null) {
+      if (mProgressDialog.isShowing()) mProgressDialog.dismiss();
+      mProgressBar = null;
+      mProgressDialog = null;
+    }
+
+    if (alertDialog != null) {
+      if(alertDialog.isShowing()) {
+        alertDialog.dismiss();
+      }
+      alertDialog = null;
+    }
+  }
+
+  private void buildDialog() {
+    Activity activity =  getReactApplicationContext().getCurrentActivity();
+    // Create the parent layout for the dialog
+    LinearLayout layout = new LinearLayout(activity);
+    layout.setLayoutParams(new ViewGroup.LayoutParams(
+      ViewGroup.LayoutParams.WRAP_CONTENT,
+      ViewGroup.LayoutParams.WRAP_CONTENT
+    ));
+    layout.setOrientation(LinearLayout.VERTICAL);
+    layout.setGravity(Gravity.CENTER_HORIZONTAL);
+    layout.setPadding(16, 32, 16, 32);
+
+    // Create and add the TextView
+    TextView textView = new TextView(activity);
+    textView.setLayoutParams(new ViewGroup.LayoutParams(
+      ViewGroup.LayoutParams.WRAP_CONTENT,
+      ViewGroup.LayoutParams.WRAP_CONTENT
+    ));
+    textView.setText(getReactApplicationContext().getResources().getString(R.string.trimming));
+    textView.setTextSize(18);
+    layout.addView(textView);
+
+    // Create and add the ProgressBar
+    mProgressBar = new ProgressBar(activity, null, android.R.attr.progressBarStyleHorizontal);
+    mProgressBar.setLayoutParams(new ViewGroup.LayoutParams(
+      ViewGroup.LayoutParams.MATCH_PARENT,
+      ViewGroup.LayoutParams.WRAP_CONTENT
+    ));
+    mProgressBar.setProgressTintList(ColorStateList.valueOf(Color.parseColor("#2196F3")));
+    layout.addView(mProgressBar);
+
+    // Create the AlertDialog
+    AlertDialog.Builder builder = new AlertDialog.Builder(activity);
+    builder.setCancelable(false);
+    builder.setView(layout);
+
+    // Show the dialog
+    mProgressDialog = builder.create();
+    mProgressDialog.show();
+  }
+
+  @ReactMethod
+  public void addListener(String eventName) {
+    // This method is required by React
+    listenerCount += 1;
+  }
+
+  @ReactMethod
+  public void removeListeners(Integer count) {
+    // This method is required by React
+    listenerCount -= count;
+  }
+
+  private void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
+    if (listenerCount > 0) {
+      WritableMap map = params != null ? params : Arguments.createMap();
+      map.putString("name", eventName);
+      reactContext
+        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+        .emit("VideoTrim", map);
+    }
+  }
+
+
+  public boolean _isValidVideo(String filePath) {
+    MediaMetadataRetriever retriever = new MediaMetadataRetriever();
+
+    try {
+      retriever.setDataSource(getReactApplicationContext(), Uri.parse(filePath));
+    } catch (Exception e){
+      e.printStackTrace();
+      return false;
+    }
+
+    String hasVideo = retriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_HAS_VIDEO);
+    return "yes".equals(hasVideo);
+  }
+
+  @ReactMethod
+  private void isValidVideo(String filePath, Promise promise) {
+    promise.resolve(_isValidVideo(filePath));
+  }
+}

package/android/src/main/java/com/videotrim/VideoTrimPackage.java

@@ -0,0 +1,28 @@
+package com.videotrim;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class VideoTrimPackage implements ReactPackage {
+  @NonNull
+  @Override
+  public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+    List<NativeModule> modules = new ArrayList<>();
+    modules.add(new VideoTrimModule(reactContext));
+    return modules;
+  }
+
+  @NonNull
+  @Override
+  public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+    return Collections.emptyList();
+  }
+}