react-native-video-trim 1.0.23 → 2.0.0

package/android/src/main/res/drawable/chevron_compact_left.xml

@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="14.531dp"
+    android:height="53.086dp"
+    android:viewportWidth="14.531"
+    android:viewportHeight="53.086">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M0,0h14.531v53.086h-14.531z"
+      android:strokeAlpha="0"
+      android:fillAlpha="0"/>
+  <path
+      android:pathData="M9.398,51.328C9.797,52.336 10.664,52.945 11.578,52.945C13.055,52.945 14.18,51.844 14.18,50.367C14.18,49.594 13.758,48.609 13.523,47.953L4.289,24.703L4.289,28.219L13.523,4.969C13.758,4.313 14.18,3.305 14.18,2.578C14.18,1.102 13.055,0 11.578,0C10.664,0 9.797,0.609 9.398,1.594L1.008,22.758C0.539,23.906 0,25.359 0,26.461C0,27.586 0.539,28.992 1.008,30.164Z"
+      android:fillColor="#ffffff"
+      android:fillAlpha="0.85"/>
+</vector>

package/android/src/main/res/drawable/chevron_compact_right.xml

@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="14.531dp"
+    android:height="53.086dp"
+    android:viewportWidth="14.531"
+    android:viewportHeight="53.086">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M0,0h14.531v53.086h-14.531z"
+      android:strokeAlpha="0"
+      android:fillAlpha="0"/>
+  <path
+      android:pathData="M4.781,51.328L13.172,30.164C13.641,28.992 14.18,27.586 14.18,26.461C14.18,25.359 13.641,23.906 13.172,22.758L4.781,1.594C4.383,0.609 3.516,0 2.602,0C1.125,0 0,1.102 0,2.578C0,3.305 0.398,4.313 0.656,4.969L9.867,28.219L9.867,24.703L0.656,47.953C0.398,48.609 0,49.594 0,50.367C0,51.844 1.125,52.945 2.602,52.945C3.516,52.945 4.383,52.336 4.781,51.328Z"
+      android:fillColor="#ffffff"
+      android:fillAlpha="0.85"/>
+</vector>

package/android/src/main/res/drawable/chevron_right_with_bg.xml

@@ -0,0 +1,13 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:drawable="@drawable/rounded_yellow_right_background"/>
+  <item>
+    <inset
+      android:insetLeft="8dp"
+      android:insetTop="8dp"
+      android:insetRight="8dp"
+      android:insetBottom="8dp"
+      android:drawable="@drawable/chevron_compact_right">
+    </inset>
+  </item>
+</layer-list>
+

package/android/src/main/res/drawable/pause_fill.xml

@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="35.953dp"
+    android:height="48.586dp"
+    android:viewportWidth="35.953"
+    android:viewportHeight="48.586">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M0,0h35.953v48.586h-35.953z"
+      android:strokeAlpha="0"
+      android:fillAlpha="0"/>
+  <path
+      android:pathData="M3.75,48.563L10.5,48.563C13.008,48.563 14.25,47.32 14.25,44.813L14.25,3.75C14.25,1.172 13.008,0 10.5,0L3.75,0C1.242,0 0,1.266 0,3.75L0,44.813C0,47.32 1.242,48.563 3.75,48.563ZM25.102,48.563L31.852,48.563C34.359,48.563 35.602,47.32 35.602,44.813L35.602,3.75C35.602,1.172 34.359,0 31.852,0L25.102,0C22.594,0 21.352,1.266 21.352,3.75L21.352,44.813C21.352,47.32 22.594,48.563 25.102,48.563Z"
+      android:fillColor="#ffffff"
+      android:fillAlpha="1"/>
+</vector>

package/android/src/main/res/drawable/play_fill.xml

@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="51.82dp"
+    android:height="50.977dp"
+    android:viewportWidth="51.82"
+    android:viewportHeight="50.977">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M0,0h51.82v50.977h-51.82z"
+      android:strokeAlpha="0"
+      android:fillAlpha="0"/>
+  <path
+      android:pathData="M9.867,50.977C10.969,50.977 11.859,50.602 12.984,49.945L48.773,29.133C51,27.867 51.82,26.977 51.82,25.5C51.82,24.047 51,23.156 48.773,21.867L12.984,1.078C11.859,0.422 10.969,0.023 9.867,0.023C7.852,0.023 6.586,1.547 6.586,3.961L6.586,47.063C6.586,49.453 7.852,50.977 9.867,50.977Z"
+      android:fillColor="#ffffff"
+      android:fillAlpha="1"/>
+</vector>

package/android/src/main/res/drawable/rounded_progress_indicator.xml

@@ -0,0 +1,16 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <!-- Shadow -->
+  <item>
+    <shape android:shape="rectangle">
+      <corners android:radius="5dp"/>
+      <solid android:color="#80000000"/> <!-- semi-transparent black for shadow -->
+    </shape>
+  </item>
+  <!-- Rounded corners -->
+  <item android:right="2dp" android:left="2dp" android:top="2dp" android:bottom="2dp">
+    <shape android:shape="rectangle">
+      <corners android:radius="5dp"/>
+      <solid android:color="@android:color/white"/>
+    </shape>
+  </item>
+</layer-list>

package/android/src/main/res/drawable/rounded_yellow_left_background.xml

@@ -0,0 +1,8 @@
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+  <solid android:color="@color/trim_color" />
+  <corners
+    android:topLeftRadius="6dp"
+    android:bottomLeftRadius="6dp"
+    android:topRightRadius="0dp"
+    android:bottomRightRadius="0dp" />
+</shape>

package/android/src/main/res/drawable/rounded_yellow_right_background.xml

@@ -0,0 +1,8 @@
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+  <solid android:color="@color/trim_color" />
+  <corners
+    android:topLeftRadius="0dp"
+    android:bottomLeftRadius="0dp"
+    android:topRightRadius="6dp"
+    android:bottomRightRadius="6dp" />
+</shape>

package/android/src/main/res/drawable/yellow_border.xml

@@ -0,0 +1,9 @@
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+  android:insetLeft="-4dp"  android:insetRight="-4dp" >
+  <shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@android:color/transparent" />
+    <stroke
+      android:width="4dp"
+      android:color="@color/trim_color" />
+  </shape>
+</inset>

package/android/src/main/res/layout/video_trimmer_view.xml

@@ -1,26 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout
-  xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:tools="http://schemas.android.com/tools"
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
-  android:orientation="vertical"
-  >
+  android:orientation="vertical">
 
   <RelativeLayout
-    android:id="@+id/layout_surface_view"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_above="@+id/layout"
     android:background="@android:color/black"
-    android:gravity="center"
-    >
+    android:gravity="center">
 
-    <com.videotrim.widgets.ZVideoView
+    <VideoView
       android:id="@+id/video_loader"
       android:layout_width="match_parent"
-      android:layout_height="match_parent"
-      android:layout_centerInParent="true" />
+      android:layout_height="match_parent" />
 
   </RelativeLayout>
 
@@ -29,87 +23,165 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
-    android:background="@android:color/black"
-    >
-
-<!--    <TextView-->
-<!--      android:id="@+id/video_shoot_tip"-->
-<!--      android:layout_width="match_parent"-->
-<!--      android:layout_height="30dp"-->
-<!--      android:layout_alignParentLeft="true"-->
-<!--      android:layout_alignParentStart="true"-->
-<!--      android:layout_alignParentTop="true"-->
-<!--      android:gravity="center"-->
-<!--      android:textColor="@android:color/white"-->
-<!--      android:textSize="12dp"-->
-<!--      tools:text="拖动选择你要发表的10秒以内片段"-->
-<!--      />-->
-    <FrameLayout
-      android:id="@+id/video_frames_layout"
-      android:layout_width="match_parent"
-      android:layout_height="60dp"
-      >
+    android:background="@android:color/black">
 
-      <androidx.recyclerview.widget.RecyclerView
-        android:id="@+id/video_frames_recyclerView"
-        android:layout_width="match_parent"
-        android:layout_height="50dp"
-        android:layout_gravity="bottom"
-        tools:background="@android:color/holo_green_light"
-        />
 
-      <ImageView
-        android:id="@+id/positionIcon"
-        android:layout_width="wrap_content"
-        android:layout_height="50dp"
-        android:layout_gravity="bottom"
-        android:layout_marginLeft="35dp"
-        android:contentDescription="@null"
-        android:src="@drawable/icon_seek_bar"
-        />
+    <RelativeLayout
+      android:id="@+id/trimmerView"
+      android:layout_width="match_parent"
+      android:layout_height="50dp"
+      android:layout_margin="8dp">
 
       <LinearLayout
+        android:id="@+id/thumbnailContainer"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_gravity="bottom"
+        android:layout_height="match_parent"
+        android:layout_marginHorizontal="20dp"
         android:orientation="horizontal"
-        >
+        android:padding="4dp" />
 
-        <View
-          android:layout_width="35dp"
-          android:layout_height="50dp"
-          android:layout_gravity="bottom"
-          android:background="@color/shadow_color"
-          />
-
-        <LinearLayout
-          android:id="@+id/seekBarLayout"
-          android:layout_width="0dp"
-          android:layout_height="60dp"
-          android:layout_gravity="bottom"
-          android:layout_weight="1"
-          android:gravity="bottom"
-          android:orientation="vertical"
-          />
+      <RelativeLayout
+        android:id="@+id/trimmerContainerWrapper"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
 
         <View
-          android:layout_width="35dp"
+          android:id="@+id/trimmerContainerBg"
+          android:layout_width="match_parent"
+          android:layout_height="match_parent"
+          android:layout_toStartOf="@id/trailingHandle"
+          android:layout_toEndOf="@id/leadingHandle" />
+
+        <RelativeLayout
+          android:layout_width="match_parent"
+          android:layout_height="match_parent">
+
+          <View
+            android:id="@+id/leadingOverlay"
+            android:layout_width="20dp"
+            android:layout_height="match_parent"
+            android:layout_alignParentStart="true"
+            android:background="@color/shadow_color" />
+
+          <View
+            android:id="@+id/trimmerContainer"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_toStartOf="@id/trailingOverlay"
+            android:layout_toEndOf="@id/leadingOverlay"
+            android:background="@drawable/yellow_border" />
+
+          <View
+            android:id="@+id/progressIndicator"
+            android:layout_width="10dp"
+            android:layout_height="match_parent"
+            android:layout_marginHorizontal="20dp"
+            android:background="@drawable/rounded_progress_indicator" />
+
+          <View
+            android:id="@+id/trailingOverlay"
+            android:layout_width="20dp"
+            android:layout_height="match_parent"
+            android:layout_alignParentEnd="true"
+            android:background="@color/shadow_color" />
+        </RelativeLayout>
+
+        <FrameLayout
+          android:id="@+id/leadingHandle"
+          android:layout_width="20dp"
           android:layout_height="match_parent"
-          android:layout_gravity="bottom"
-          android:background="@color/shadow_color"
-          />
-      </LinearLayout>
+          android:layout_alignParentStart="true"
+          android:layout_centerVertical="true"
+          android:background="@drawable/rounded_yellow_left_background"
+          android:paddingVertical="10dp">
+
+          <ImageView
+            android:layout_width="20dp"
+            android:layout_height="match_parent"
+            android:contentDescription="LeadingHandle"
+            android:src="@drawable/chevron_compact_left"
+            android:tint="@color/black" />
+        </FrameLayout>
+
+        <FrameLayout
+          android:id="@+id/trailingHandle"
+          android:layout_width="20dp"
+          android:layout_height="match_parent"
+          android:layout_alignParentEnd="true"
+          android:layout_centerVertical="true"
+          android:background="@drawable/rounded_yellow_right_background"
+          android:paddingVertical="10dp">
+
+          <ImageView
+            android:layout_width="20dp"
+            android:layout_height="match_parent"
+            android:contentDescription="TrailingHandle"
+            android:src="@drawable/chevron_compact_right"
+            android:tint="@color/black" />
+        </FrameLayout>
+
+      </RelativeLayout>
+
+    </RelativeLayout>
+
+    <FrameLayout
+      android:id="@+id/timingStackView"
+      android:layout_width="match_parent"
+      android:layout_height="50dp"
+      android:layout_below="@+id/trimmerView"
+      android:layout_marginHorizontal="16dp"
+      android:orientation="horizontal"
+      android:visibility="visible">
+
+      <TextView
+        android:id="@+id/startTime"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:layout_gravity="left"
+        android:clickable="true"
+        android:focusable="true"
+        android:gravity="center"
+        android:padding="10dp"
+        android:text="00:00.00"
+        android:textColor="@android:color/white"
+        android:textSize="16sp" />
+
+      <TextView
+        android:id="@+id/currentTime"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:layout_gravity="center"
+        android:clickable="true"
+        android:focusable="true"
+        android:gravity="center"
+        android:padding="10dp"
+        android:text="00:00.00"
+        android:textColor="@android:color/white"
+        android:textSize="16sp" />
+
+      <TextView
+        android:id="@+id/endTime"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:layout_gravity="right"
+        android:clickable="true"
+        android:focusable="true"
+        android:gravity="center"
+        android:padding="10dp"
+        android:text="00:00.00"
+        android:textColor="@android:color/white"
+        android:textSize="16sp" />
+
     </FrameLayout>
 
     <FrameLayout
       android:layout_width="match_parent"
       android:layout_height="50dp"
-      android:layout_below="@+id/video_frames_layout"
+      android:layout_below="@+id/timingStackView"
       android:layout_marginLeft="10dp"
       android:layout_marginRight="10dp"
       android:orientation="horizontal"
-      android:visibility="visible"
-      >
+      android:visibility="visible">
 
       <TextView
         android:id="@+id/cancelBtn"
@@ -128,8 +200,8 @@
         android:layout_height="match_parent"
         android:layout_gravity="center"
         android:padding="12dp"
-        android:src="@drawable/ic_video_play_black"
-        />
+        android:src="@drawable/play_fill"
+        android:tint="@color/white"/>
 
       <TextView
         android:id="@+id/saveBtn"

package/android/src/main/res/values/colors.xml

@@ -1,17 +1,19 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="colorPrimary">#3F51B5</color>
-    <color name="colorPrimaryDark">#303F9F</color>
-    <color name="colorAccent">#FF4081</color>
+  <color name="colorPrimary">#3F51B5</color>
+  <color name="colorPrimaryDark">#303F9F</color>
+  <color name="colorAccent">#FF4081</color>
 
-    <color name="white">#ffffffff</color>
-    <color name="red">#aacc0000</color>
-    <color name="background_video_color">#2f3031</color>
-    <color name="background_progress_color">#6C6D6D</color>
-    <color name="progress_color">#aacc0000</color>
-    <color name="line_color">#FF15FF00</color>
-    <color name="shadow_color">#7F000000</color>
-    <color name="line_button">#565758</color>
-    <color name="black_translucent">#50000000</color>
-    <color name="top_bottom">#42BAF8</color>
+  <color name="white">#ffffffff</color>
+  <color name="red">#aacc0000</color>
+  <color name="background_video_color">#2f3031</color>
+  <color name="background_progress_color">#6C6D6D</color>
+  <color name="progress_color">#aacc0000</color>
+  <color name="line_color">#FF15FF00</color>
+  <color name="shadow_color">#7F000000</color>
+  <color name="line_button">#565758</color>
+  <color name="black_translucent">#50000000</color>
+  <color name="top_bottom">#42BAF8</color>
+  <color name="trim_color">#f1d247</color>
+  <color name="black">#000000</color>
 </resources>

package/ios/VideoTrim.swift

@@ -281,8 +281,6 @@ class VideoTrim: RCTEventEmitter {
         formatter.timeZone = TimeZone(identifier: "UTC")
         let dateTime = formatter.string(from: Date())
         
-        let cmd = "-ss \(startTime * 1000)ms -to \(endTime * 1000)ms -i \(inputFile) -c copy -metadata creation_time=\(dateTime) \(outputFile)";
-                
         self.emitEventToJS("onStartTrimming", eventData: nil)
         
         // Create Alert
@@ -304,14 +302,28 @@ class VideoTrim: RCTEventEmitter {
             })
         }
         
-        FFmpegKit.executeAsync(cmd, withCompleteCallback: { session in
+        let cmds = [
+            "-ss",
+            "\(startTime * 1000)ms",
+            "-to",
+            "\(endTime * 1000)ms",
+            "-i",
+            "\(inputFile)",
+            "-c",
+            "copy",
+            "-metadata",
+            "creation_time=\(dateTime)",
+            outputFile
+        ]
+        
+        FFmpegKit.execute(withArgumentsAsync: cmds, withCompleteCallback: { session in
             let _ = self.deleteFile(url: inputFile) // remove the file we just copied to document directory
             
             let state = session?.getState()
             let returnCode = session?.getReturnCode()
             
             if ReturnCode.isSuccess(returnCode) {
-                let eventPayload: [String: Any] = ["outputPath": outputFile]
+                let eventPayload: [String: Any] = ["outputPath": outputFile, "startTime": startTime, "endTime": endTime, "duration": videoDuration]
                 self.emitEventToJS("onFinishTrimming", eventData: eventPayload)
                 
                 if (self.saveToPhoto) {
@@ -356,15 +368,39 @@ class VideoTrim: RCTEventEmitter {
                 })
             }
         }, withLogCallback: { log in
+            guard let log = log else { return }
+            
+            print("FFmpeg process started with log " + (log.getMessage()));
+            
+            let eventPayload: [String: Any] = [
+                "level": log.getLevel(),
+                "message": log.getMessage() ?? "",
+                "sessionId": log.getSessionId(),
+            ]
+            self.emitEventToJS("onLog", eventData: eventPayload)
             
         }, withStatisticsCallback: { statistics in
-            let timeInMilliseconds = statistics?.getTime() ?? 0;
+            guard let statistics = statistics else { return }
+
+            let timeInMilliseconds = statistics.getTime()
             if timeInMilliseconds > 0 {
                 let completePercentage = timeInMilliseconds / (videoDuration * 1000); // from 0 -> 1
                 DispatchQueue.main.async {
                     progressView.setProgress(Float(completePercentage), animated: true)
                 }
             }
+            
+            let eventPayload: [String: Any] = [
+                "sessionId": statistics.getSessionId(),
+                "videoFrameNumber": statistics.getVideoFrameNumber(),
+                "videoFps": statistics.getVideoFps(),
+                "videoQuality": statistics.getVideoQuality(),
+                "size": statistics.getSize(),
+                "time": statistics.getTime(),
+                "bitrate": statistics.getBitrate(),
+                "speed": statistics.getSpeed()
+            ]
+            self.emitEventToJS("onStatistics", eventData: eventPayload)
         })
     }
 }

package/ios/VideoTrimmerViewController.swift

@@ -169,7 +169,7 @@ class VideoTrimmerViewController: UIViewController {
     
     private func setupButtons() {
         cancelBtn = UIButton.createButton(title: cancelBtnText, font: .systemFont(ofSize: 18), titleColor: .white, target: self, action: #selector(onCancelBtnClicked))
-        playBtn = UIButton.createButton(image: playIcon, tintColor: .systemBlue, target: self, action: #selector(togglePlay(sender:)))
+        playBtn = UIButton.createButton(image: playIcon, tintColor: .white, target: self, action: #selector(togglePlay(sender:)))
         saveBtn = UIButton.createButton(title: saveButtonText, font: .systemFont(ofSize: 18), titleColor: .systemBlue, target: self, action: #selector(onSaveBtnClicked))
         
         btnStackView = UIStackView(arrangedSubviews: [cancelBtn, playBtn, saveBtn])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-video-trim",
-  "version": "1.0.23",
+  "version": "2.0.0",
   "description": "Video trimmer for your React Native app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/android/src/main/java/com/videotrim/adapters/VideoTrimmerAdapter.java

@@ -1,54 +0,0 @@
-package com.videotrim.adapters;
-
-import android.content.Context;
-import android.graphics.Bitmap;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.ViewGroup;
-import android.widget.ImageView;
-import android.widget.LinearLayout;
-import androidx.annotation.NonNull;
-import androidx.recyclerview.widget.RecyclerView;
-import com.videotrim.R;
-import com.videotrim.utils.VideoTrimmerUtil;
-import java.util.ArrayList;
-import java.util.List;
-
-public class VideoTrimmerAdapter extends RecyclerView.Adapter {
-  private final List<Bitmap> mBitmaps = new ArrayList<>();
-  private final LayoutInflater mInflater;
-
-  public VideoTrimmerAdapter(Context context) {
-    this.mInflater = LayoutInflater.from(context);
-  }
-
-  @NonNull @Override public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
-    return new TrimmerViewHolder(mInflater.inflate(R.layout.video_thumb_item_layout, parent, false));
-  }
-
-  @Override public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
-    ((TrimmerViewHolder) holder).thumbImageView.setImageBitmap(mBitmaps.get(position));
-  }
-
-  @Override public int getItemCount() {
-    return mBitmaps.size();
-  }
-
-  public void addBitmaps(Bitmap bitmap) {
-    mBitmaps.add(bitmap);
-    notifyItemInserted(mBitmaps.size() - 1);
-  }
-
-  private static final class TrimmerViewHolder extends RecyclerView.ViewHolder {
-    ImageView thumbImageView;
-
-    TrimmerViewHolder(View itemView) {
-      super(itemView);
-      thumbImageView = itemView.findViewById(R.id.thumb);
-      LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) thumbImageView.getLayoutParams();
-      layoutParams.width = VideoTrimmerUtil.VIDEO_FRAMES_WIDTH / VideoTrimmerUtil.MAX_COUNT_RANGE;
-      thumbImageView.setLayoutParams(layoutParams);
-    }
-  }
-}
-