react-native-video-trim 1.0.23 → 2.0.0

package/android/src/main/java/com/videotrim/widgets/VideoTrimmerView.java

@@ -1,9 +1,9 @@
 package com.videotrim.widgets;
 
+import static com.facebook.react.bridge.UiThreadUtil.runOnUiThread;
 import static com.videotrim.utils.VideoTrimmerUtil.RECYCLER_VIEW_PADDING;
 import static com.videotrim.utils.VideoTrimmerUtil.VIDEO_FRAMES_WIDTH;
 
-import android.animation.ValueAnimator;
 import android.content.Context;
 import android.content.pm.ActivityInfo;
 import android.content.res.Configuration;
@@ -11,80 +11,77 @@ import android.graphics.Bitmap;
 import android.media.MediaMetadataRetriever;
 import android.media.MediaPlayer;
 import android.net.Uri;
+import android.os.Build;
 import android.os.Handler;
+import android.os.VibrationEffect;
+import android.os.Vibrator;
 import android.util.AttributeSet;
+import android.util.Log;
 import android.view.LayoutInflater;
 import android.view.MotionEvent;
 import android.view.View;
-import android.view.ViewGroup;
-import android.view.animation.LinearInterpolator;
 import android.widget.FrameLayout;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.RelativeLayout;
 import android.widget.TextView;
-import android.widget.Toast;
-
-import androidx.annotation.NonNull;
-import androidx.recyclerview.widget.LinearLayoutManager;
-import androidx.recyclerview.widget.RecyclerView;
+import android.widget.VideoView;
 
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReadableMap;
 import com.videotrim.R;
-import com.videotrim.adapters.VideoTrimmerAdapter;
 import com.videotrim.interfaces.IVideoTrimmerView;
 import com.videotrim.interfaces.VideoTrimListener;
 import com.videotrim.utils.StorageUtil;
 import com.videotrim.utils.VideoTrimmerUtil;
 
+import java.util.Locale;
+
 import iknow.android.utils.DeviceUtil;
 import iknow.android.utils.thread.BackgroundExecutor;
 import iknow.android.utils.thread.UiThreadExecutor;
 
-/**
- * Author：J.Chou
- * Date：  2016.08.01 2:23 PM
- * Email： who_know_me@163.com
- * Describe:
- */
 public class VideoTrimmerView extends FrameLayout implements IVideoTrimmerView {
 
   private static final String TAG = VideoTrimmerView.class.getSimpleName();
 
-  private final int mMaxWidth = VIDEO_FRAMES_WIDTH;
   private ReactApplicationContext mContext;
-  private RelativeLayout mLinearVideo;
-  private ZVideoView mVideoView;
+  private VideoView mVideoView;
   private ImageView mPlayView;
-  private RecyclerView mVideoThumbRecyclerView;
-  private RangeSeekBarView mRangeSeekBarView;
-  private LinearLayout mSeekBarLayout;
-  private ImageView mRedProgressIcon;
-  private float mAverageMsPx;//每毫秒所占的px
-  private float averagePxMs;//每px所占用的ms毫秒
+  private LinearLayout mThumbnailContainer;
   private Uri mSourceUri;
   private VideoTrimListener mOnTrimVideoListener;
   private int mDuration = 0;
-  private VideoTrimmerAdapter mVideoThumbAdapter;
-  private boolean isFromRestore = false;
-  //new
-  private long mLeftProgressPos, mRightProgressPos;
-  private long mRedProgressBarPos = 0;
-  private long scrollPos = 0;
-  private int mScaledTouchSlop;
-  private int lastScrollX;
-  private int mThumbsTotalCount;
-  private ValueAnimator mRedProgressAnimator;
-  private final Handler mAnimationHandler = new Handler();
   private Boolean mIsPrepared = false;
-  private long mMaxDuration = VideoTrimmerUtil.MAX_SHOOT_DURATION;
+  private long mMaxDuration = (long) Double.POSITIVE_INFINITY;
   private long mMinDuration = VideoTrimmerUtil.MIN_SHOOT_DURATION;
 
+  private final Handler mTimingHandler = new Handler();
+  private Runnable mTimingRunnable;
+  private static final long TIMING_UPDATE_INTERVAL = 30; // Update every 30 milliseconds
+  private TextView currentTimeText;
+  private TextView startTimeText;
+  private TextView endTimeText;
+  private View progressIndicator;
+  private View trimmerContainer;
+  // background of the trimmer container, its width never changes
+  // this is to make sure when we calculate position of the progress indicator, we don't need to consider the width of the trimmer container
+  private View trimmerContainerBg;
+  private FrameLayout leadingHandle;
+  private View trailingHandle;
+  private View leadingOverlay;
+  private View trailingOverlay;
+  private RelativeLayout trimmerContainerWrapper;
+
+  private long startTime = 0, endTime = 0;
+  private Vibrator vibrator;
+  private boolean didClampWhilePanning = false;
+
+  // zoom
+  private boolean isZoomedIn = false;
+  private final Handler zoomWaitTimer = new Handler();
+  private Runnable zoomRunnable;
 
-  public VideoTrimmerView(ReactApplicationContext context, AttributeSet attrs) {
-    this(context, attrs, 0, null);
-  }
   public VideoTrimmerView(ReactApplicationContext context, ReadableMap config, AttributeSet attrs) {
     this(context, attrs, 0, config);
   }
@@ -97,56 +94,33 @@ public class VideoTrimmerView extends FrameLayout implements IVideoTrimmerView {
   private void init(ReactApplicationContext context, ReadableMap config) {
     this.mContext = context;
 
-    // listen to onConfigurationChanged doesn't work for this, it runs too soon
     context.getCurrentActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
     LayoutInflater.from(context).inflate(R.layout.video_trimmer_view, this, true);
+    vibrator = (Vibrator) context.getSystemService(Context.VIBRATOR_SERVICE);
 
-    mLinearVideo = findViewById(R.id.layout_surface_view);
-    mVideoView = findViewById(R.id.video_loader);
-    mPlayView = findViewById(R.id.icon_video_play);
-    mSeekBarLayout = findViewById(R.id.seekBarLayout);
-    mRedProgressIcon = findViewById(R.id.positionIcon);
-    mVideoThumbRecyclerView = findViewById(R.id.video_frames_recyclerView);
-    mVideoThumbRecyclerView.setLayoutManager(new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false));
-    mVideoThumbAdapter = new VideoTrimmerAdapter(mContext);
-    mVideoThumbRecyclerView.setAdapter(mVideoThumbAdapter);
-    mVideoThumbRecyclerView.addOnScrollListener(mOnScrollListener);
-
+    initializeViews();
     configure(config);
     setUpListeners();
+    setProgressIndicatorTouchListener();
   }
 
-  private void initRangeSeekBarView() {
-    if(mRangeSeekBarView != null) return;
-    mLeftProgressPos = 0;
-
-    VideoTrimmerUtil.SCREEN_WIDTH_FULL = this.getScreenWidthInPortraitMode();
-    VideoTrimmerUtil.VIDEO_FRAMES_WIDTH = VideoTrimmerUtil.SCREEN_WIDTH_FULL - RECYCLER_VIEW_PADDING * 2;
-    VideoTrimmerUtil.MAX_COUNT_RANGE = Math.max(((int) VIDEO_FRAMES_WIDTH / VideoTrimmerUtil.mThumbWidth),  VideoTrimmerUtil.MAX_COUNT_RANGE);
-
-    if (mDuration <= mMaxDuration) {
-      mThumbsTotalCount = VideoTrimmerUtil.MAX_COUNT_RANGE;
-      mRightProgressPos = mDuration;
-    } else {
-      mThumbsTotalCount = (int) (mDuration * 1.0f / (mMaxDuration * 1.0f) * VideoTrimmerUtil.MAX_COUNT_RANGE);
-      mRightProgressPos = mMaxDuration;
-    }
-
-    mVideoThumbRecyclerView.addItemDecoration(new SpacesItemDecoration2(RECYCLER_VIEW_PADDING, mThumbsTotalCount));
-    mRangeSeekBarView = new RangeSeekBarView(mContext, mLeftProgressPos, mRightProgressPos);
-    mRangeSeekBarView.setSelectedMinValue(mLeftProgressPos);
-    mRangeSeekBarView.setSelectedMaxValue(mRightProgressPos);
-    mRangeSeekBarView.setStartEndTime(mLeftProgressPos, mRightProgressPos);
-    mRangeSeekBarView.setMinShootTime(mMinDuration);
-    mRangeSeekBarView.setNotifyWhileDragging(true);
-    mRangeSeekBarView.setOnRangeSeekBarChangeListener(mOnRangeSeekBarChangeListener);
-    mSeekBarLayout.addView(mRangeSeekBarView);
-    if(mThumbsTotalCount - VideoTrimmerUtil.MAX_COUNT_RANGE > 0) {
-      mAverageMsPx = (mDuration - mMaxDuration) / (float) (mThumbsTotalCount - VideoTrimmerUtil.MAX_COUNT_RANGE);
-    } else {
-      mAverageMsPx = 0f;
-    }
-    averagePxMs = (mMaxWidth * 1.0f / (mRightProgressPos - mLeftProgressPos));
+  private void initializeViews() {
+    mThumbnailContainer = findViewById(R.id.thumbnailContainer);
+    mVideoView = findViewById(R.id.video_loader);
+    mPlayView = findViewById(R.id.icon_video_play);
+    startTimeText = findViewById(R.id.startTime);
+    currentTimeText = findViewById(R.id.currentTime);
+    endTimeText = findViewById(R.id.endTime);
+    progressIndicator = findViewById(R.id.progressIndicator);
+    trimmerContainer = findViewById(R.id.trimmerContainer);
+    trimmerContainerBg = findViewById(R.id.trimmerContainerBg);
+    leadingHandle = findViewById(R.id.leadingHandle);
+    trailingHandle = findViewById(R.id.trailingHandle);
+    leadingOverlay = findViewById(R.id.leadingOverlay);
+    trailingOverlay = findViewById(R.id.trailingOverlay);
+    trimmerContainerWrapper = findViewById(R.id.trimmerContainerWrapper);
+    trimmerContainerWrapper.setVisibility(View.INVISIBLE);
+    trimmerContainerWrapper.setAlpha(0f);
   }
 
   public void initVideoByURI(final Uri videoURI) {
@@ -156,32 +130,24 @@ public class VideoTrimmerView extends FrameLayout implements IVideoTrimmerView {
   }
 
   private void startShootVideoThumbs(final Context context, final Uri videoUri, int totalThumbsCount, long startPosition, long endPosition) {
+    mThumbnailContainer.removeAllViews();
     VideoTrimmerUtil.shootVideoThumbInBackground(context, videoUri, totalThumbsCount, startPosition, endPosition,
       (bitmap, interval) -> {
         if (bitmap != null) {
-          UiThreadExecutor.runTask("", () -> mVideoThumbAdapter.addBitmaps(bitmap), 0L);
+          runOnUiThread(() -> {
+            ImageView thumbImageView = new ImageView(context);
+            thumbImageView.setImageBitmap(bitmap);
+            thumbImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
+            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(100, LayoutParams.MATCH_PARENT);
+            layoutParams.width = VideoTrimmerUtil.VIDEO_FRAMES_WIDTH / VideoTrimmerUtil.MAX_COUNT_RANGE;
+            thumbImageView.setLayoutParams(layoutParams);
+            mThumbnailContainer.addView(thumbImageView);
+          });
         }
       });
   }
 
   private void videoPrepared(MediaPlayer mp) {
-    ViewGroup.LayoutParams lp = mVideoView.getLayoutParams();
-    int videoWidth = mp.getVideoWidth();
-    int videoHeight = mp.getVideoHeight();
-
-    int screenWidth = mLinearVideo.getWidth();
-    int screenHeight = mLinearVideo.getHeight();
-
-    if (videoHeight > videoWidth) {
-      lp.height = screenHeight;
-      float r = videoWidth / (float) videoHeight;
-      lp.width = (int) (lp.height * r);
-    } else {
-      lp.width = screenWidth;
-      float r = videoHeight / (float) videoWidth;
-      lp.height = (int) (lp.width * r);
-    }
-    mVideoView.setLayoutParams(lp);
     mDuration = mVideoView.getDuration();
 
     mMaxDuration = Math.min(mMaxDuration, mDuration);
@@ -190,46 +156,74 @@ public class VideoTrimmerView extends FrameLayout implements IVideoTrimmerView {
     mediaMetadataRetriever.setDataSource(mContext, mSourceUri);
     // take first frame
     Bitmap bitmap = mediaMetadataRetriever.getFrameAtTime(0, MediaMetadataRetriever.OPTION_CLOSEST_SYNC);
-    VideoTrimmerUtil.mThumbWidth = VideoTrimmerUtil.THUMB_HEIGHT * bitmap.getWidth() / bitmap.getHeight();
 
-    if (!getRestoreState()) {
-      seekTo((int) mRedProgressBarPos);
-    } else {
-      setRestoreState(false);
-      seekTo((int) mRedProgressBarPos);
+    if (bitmap != null) {
+      VideoTrimmerUtil.mThumbWidth = VideoTrimmerUtil.THUMB_HEIGHT * bitmap.getWidth() / bitmap.getHeight();
     }
-    initRangeSeekBarView();
+
+    VideoTrimmerUtil.SCREEN_WIDTH_FULL = this.getScreenWidthInPortraitMode();
+    VideoTrimmerUtil.VIDEO_FRAMES_WIDTH = VideoTrimmerUtil.SCREEN_WIDTH_FULL - RECYCLER_VIEW_PADDING * 2;
+    VideoTrimmerUtil.MAX_COUNT_RANGE = Math.max((VIDEO_FRAMES_WIDTH / VideoTrimmerUtil.mThumbWidth), VideoTrimmerUtil.MAX_COUNT_RANGE);
+
+    int mThumbsTotalCount;
+    mThumbsTotalCount = (int) (mDuration * 1.0f / (mMaxDuration * 1.0f) * VideoTrimmerUtil.MAX_COUNT_RANGE);
     startShootVideoThumbs(mContext, mSourceUri, mThumbsTotalCount, 0, mDuration);
+
+    // Set initial handle positions if mMaxDuration < video duration
+    if (mMaxDuration < mDuration) {
+      endTime = mMaxDuration;
+    } else {
+      endTime = mDuration;
+    }
+    updateHandlePositions();
   }
 
-  private void videoCompleted() {
-    seekTo(mLeftProgressPos);
-    setPlayPauseViewIcon(false);
+  private void updateHandlePositions() {
+    float startPercent = (float) startTime / mVideoView.getDuration();
+    float endPercent = (float) endTime / mVideoView.getDuration();
+
+    float containerWidth = trimmerContainerBg.getWidth();
+    float leadingHandleX = startPercent * containerWidth;
+    float trailingHandleX = endPercent * containerWidth;
+
+    leadingHandle.setX(leadingHandleX);
+    trailingHandle.setX(trailingHandleX + trailingHandle.getWidth());
+
+    updateTrimmerContainerWidth();
+    updateCurrentTime(false);
+
+    trimmerContainerWrapper.setVisibility(View.VISIBLE);
+    trimmerContainerWrapper.animate().alpha(1f).setDuration(250).start();
+
+    // because on load video will not start and just display black screen
+    // here we'll seek to first frame to make it more friendly
+    mVideoView.seekTo(1);
   }
 
-  private void onVideoReset() {
-    mVideoView.pause();
+  private void videoCompleted() {
     setPlayPauseViewIcon(false);
+    mTimingHandler.removeCallbacks(mTimingRunnable);
   }
 
-  private void playVideoOrPause() {
-    mRedProgressBarPos = mVideoView.getCurrentPosition();
+  private void playOrPause() {
     if (mVideoView.isPlaying()) {
-      mVideoView.pause();
-      pauseRedProgressAnimation();
+      onVideoPause();
     } else {
+      // if current video time >= end time, seek to start time
+      if (mVideoView.getCurrentPosition() >= endTime) {
+        seekTo(startTime, true);
+      }
       mVideoView.start();
-      playingRedProgressAnimation();
+      startTimingRunnable();
     }
     setPlayPauseViewIcon(mVideoView.isPlaying());
   }
 
   public void onVideoPause() {
     if (mVideoView.isPlaying()) {
-      seekTo(mLeftProgressPos);//复位
+      mTimingHandler.removeCallbacks(mTimingRunnable);
       mVideoView.pause();
       setPlayPauseViewIcon(false);
-      mRedProgressIcon.setVisibility(GONE);
     }
   }
 
@@ -238,237 +232,354 @@ public class VideoTrimmerView extends FrameLayout implements IVideoTrimmerView {
   }
 
   private void setUpListeners() {
-    findViewById(R.id.cancelBtn).setOnClickListener(view -> {
-      mOnTrimVideoListener.onCancel();
-    });
-
-    findViewById(R.id.saveBtn).setOnClickListener(view ->  {
-      mOnTrimVideoListener.onSave();
-    });
+    findViewById(R.id.cancelBtn).setOnClickListener(view -> mOnTrimVideoListener.onCancel());
+    findViewById(R.id.saveBtn).setOnClickListener(view -> mOnTrimVideoListener.onSave());
 
     mVideoView.setOnPreparedListener(mp -> {
-      // this is called everytime activity goes active, and can fire multiple times
-      // so that we create a flag to not run below code more than once
-      if (mIsPrepared) {
-        return;
+      if (!mIsPrepared) {
+        mp.setVideoScalingMode(MediaPlayer.VIDEO_SCALING_MODE_SCALE_TO_FIT);
+        videoPrepared(mp);
+        mIsPrepared = true;
       }
-      mp.setVideoScalingMode(MediaPlayer.VIDEO_SCALING_MODE_SCALE_TO_FIT);
-      videoPrepared(mp);
-      mIsPrepared = true;
-    });
-    mVideoView.setOnCompletionListener(mp -> {
-      videoCompleted();
-    });
-    mPlayView.setOnClickListener(view -> {
-      playVideoOrPause();
     });
+
+    mVideoView.setOnCompletionListener(mp -> videoCompleted());
+    mPlayView.setOnClickListener(view -> playOrPause());
+    setHandleTouchListener(leadingHandle, true);
+    setHandleTouchListener(trailingHandle, false);
   }
 
   public void onSaveClicked() {
-    if (mRightProgressPos - mLeftProgressPos < mMinDuration) {
-      Toast.makeText(mContext, "Video is too short, can't proceed", Toast.LENGTH_SHORT).show();
-    } else {
-      mVideoView.pause();
-      VideoTrimmerUtil.trim(
-        mSourceUri.getPath(),
-        StorageUtil.getOutputPath(mContext),
-        mDuration,
-        mLeftProgressPos,
-        mRightProgressPos,
-        mOnTrimVideoListener);
-    }
+    onVideoPause();
+    VideoTrimmerUtil.trim(
+      mSourceUri.getPath(),
+      StorageUtil.getOutputPath(mContext),
+      mDuration,
+      startTime,
+      endTime,
+      mOnTrimVideoListener);
   }
 
-  private void seekTo(long msec) {
+  private void seekTo(long msec, boolean needUpdateProgress) {
     mVideoView.seekTo((int) msec);
+    updateCurrentTime(needUpdateProgress);
   }
 
-  private boolean getRestoreState() {
-    return isFromRestore;
+  private void setPlayPauseViewIcon(boolean isPlaying) {
+    // note: icons imported from SF symbols have 0.85 opacity we should change to 1 here
+    mPlayView.setImageResource(isPlaying ? R.drawable.pause_fill : R.drawable.play_fill);
   }
 
-  public void setRestoreState(boolean fromRestore) {
-    isFromRestore = fromRestore;
+  @Override
+  protected void onDetachedFromWindow() {
+    super.onDetachedFromWindow();
+    mContext.getCurrentActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
   }
 
-  private void setPlayPauseViewIcon(boolean isPlaying) {
-    mPlayView.setImageResource(isPlaying ? R.drawable.ic_video_pause_black : R.drawable.ic_video_play_black);
+  @Override
+  public void onDestroy() {
+    BackgroundExecutor.cancelAll("", true);
+    UiThreadExecutor.cancelAll("");
+    mContext.getCurrentActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
+    mTimingHandler.removeCallbacks(mTimingRunnable);
+    zoomWaitTimer.removeCallbacks(zoomRunnable);
+  }
+
+  private int getScreenWidthInPortraitMode() {
+    int screenWidth = DeviceUtil.getDeviceWidth();
+    int screenHeight = DeviceUtil.getDeviceHeight();
+    int currentOrientation = getResources().getConfiguration().orientation;
+    if (currentOrientation == Configuration.ORIENTATION_LANDSCAPE) {
+      return screenHeight;
+    }
+    return screenWidth;
+  }
+
+  private void configure(ReadableMap config) {
+    if (config.hasKey("maxDuration")) {
+      mMaxDuration = Math.max(0, config.getInt("maxDuration") * 1000L);
+    }
+    if (config.hasKey("minDuration")) {
+      mMinDuration = Math.max(1000L, config.getInt("minDuration") * 1000L);
+    }
+    if (config.hasKey("cancelButtonText")) {
+      TextView tv = findViewById(R.id.cancelBtn);
+      tv.setText(config.getString("cancelButtonText"));
+    }
+    if (config.hasKey("saveButtonText")) {
+      TextView tv = findViewById(R.id.saveBtn);
+      tv.setText(config.getString("saveButtonText"));
+    }
+  }
+
+  private void startTimingRunnable() {
+    mTimingRunnable = new Runnable() {
+      @Override
+      public void run() {
+        int currentPosition = mVideoView.getCurrentPosition();
+
+        if (currentPosition >= endTime) {
+          onVideoPause();
+          seekTo(endTime, true); // Ensure exact end time display
+        } else {
+          updateCurrentTime(true);
+          mTimingHandler.postDelayed(this, TIMING_UPDATE_INTERVAL);
+        }
+      }
+    };
+    mTimingHandler.postDelayed(mTimingRunnable, TIMING_UPDATE_INTERVAL);
+  }
+
+  private void updateCurrentTime(boolean needUpdateProgress) {
+    // TODO: check the case after drag the progress indicator and hit play, it'll play a little bit earlier than the progress indicator
+    int currentPosition = mVideoView.getCurrentPosition();
+    int duration = mVideoView.getDuration();
+
+    if (currentPosition >= duration - 100) {
+      currentPosition = duration;
+    } else if (currentPosition >= endTime - 100) {
+      currentPosition = (int) endTime;
+    }
+
+    String currentTime = formatTime(currentPosition);
+    currentTimeText.setText(currentTime);
+
+    String startTime = formatTime((int) this.startTime);
+    startTimeText.setText(startTime);
+
+    String endTime = formatTime((int) this.endTime);
+    endTimeText.setText(endTime);
+
+    if (needUpdateProgress) {
+      // Update progressIndicator position
+      float indicatorPosition = (float) currentPosition / duration * (trimmerContainerBg.getWidth() - progressIndicator.getWidth()) + leadingHandle.getWidth();
+
+      float rightBoundary = trimmerContainer.getX() + trimmerContainer.getWidth() - progressIndicator.getWidth();
+
+      progressIndicator.setX(Math.min(rightBoundary, indicatorPosition));
+    }
   }
 
-  private final RangeSeekBarView.OnRangeSeekBarChangeListener mOnRangeSeekBarChangeListener = new RangeSeekBarView.OnRangeSeekBarChangeListener() {
-    @Override public void onRangeSeekBarValuesChanged(RangeSeekBarView bar, long minValue, long maxValue, int action, boolean isMin,
-                                                      RangeSeekBarView.Thumb pressedThumb) {
-      mLeftProgressPos = minValue + scrollPos;
-      mRedProgressBarPos = mLeftProgressPos;
+  private String formatTime(int milliseconds) {
+    int totalSeconds = milliseconds / 1000;
+    int minutes = totalSeconds / 60;
+    int seconds = totalSeconds % 60;
+    int millis = milliseconds % 1000;
+    return String.format(Locale.getDefault(), "%d:%02d.%03d", minutes, seconds, millis);
+  }
 
-      // when dragging the highlighted section mRightProgressPos in some cases can bigger than mDuration
-      // Eg: mDuration=62006, then mRightProgressPos can be 63000
-      mRightProgressPos = Math.min(maxValue + scrollPos, mDuration);
-      switch (action) {
+  private void setProgressIndicatorTouchListener() {
+    trimmerContainerBg.setOnTouchListener((view, event) -> {
+      switch (event.getAction()) {
         case MotionEvent.ACTION_DOWN:
+          didClampWhilePanning = false;
+          onVideoPause();
+          onTrimmerContainerPanned(event);
+          playHapticFeedback(true);
           break;
         case MotionEvent.ACTION_MOVE:
-          seekTo((int) (pressedThumb == RangeSeekBarView.Thumb.MIN ? mLeftProgressPos : mRightProgressPos));
+          onTrimmerContainerPanned(event);
           break;
         case MotionEvent.ACTION_UP:
-          seekTo((int) mLeftProgressPos);
+          view.performClick();
           break;
         default:
-          break;
+          return false;
       }
+      return true;
+    });
+  }
 
-
-      mRangeSeekBarView.setStartEndTime(mLeftProgressPos, mRightProgressPos);
+  private void onTrimmerContainerPanned(MotionEvent event) {
+    float newX = event.getRawX();
+    boolean didClamp = false;
+    // Ensure newX is within valid range
+    float leftBoundary = trimmerContainer.getX();
+    float rightBoundary = trimmerContainer.getX() + trimmerContainer.getWidth() - progressIndicator.getWidth();
+    newX = Math.max(leftBoundary, newX);
+    newX = Math.min(rightBoundary, newX);
+
+    // check play haptic feedback
+    if (newX <= leftBoundary) {
+      didClamp = true;
     }
-  };
-
-  private final RecyclerView.OnScrollListener mOnScrollListener = new RecyclerView.OnScrollListener() {
-    @Override
-    public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
-      super.onScrollStateChanged(recyclerView, newState);
+    else if (newX >= rightBoundary) {
+      didClamp = true;
     }
 
-    @Override
-    public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
-      super.onScrolled(recyclerView, dx, dy);
-      int scrollX = calcScrollXDistance();
-
-      if (Math.abs(lastScrollX - scrollX) < mScaledTouchSlop) {
-        return;
-      }
-      //初始状态,why ? 因为默认的时候有35dp的空白！
-      if (scrollX == -RECYCLER_VIEW_PADDING) {
-        scrollPos = 0;
-        mLeftProgressPos = mRangeSeekBarView.getSelectedMinValue() + scrollPos;
-
-        // when scrolling the highlighted section mRightProgressPos in some cases can bigger than mDuration
-        // Eg: mDuration=62006, then mRightProgressPos can be 63000
-        mRightProgressPos = Math.min(mRangeSeekBarView.getSelectedMaxValue() + scrollPos, mDuration);
-        mRedProgressBarPos = mLeftProgressPos;
-      } else {
-        scrollPos = (long) (mAverageMsPx * (RECYCLER_VIEW_PADDING + scrollX) / VideoTrimmerUtil.mThumbWidth);
-        mLeftProgressPos = mRangeSeekBarView.getSelectedMinValue() + scrollPos;
-
-        // when scrolling the highlighted section mRightProgressPos in some cases can bigger than mDuration
-        // Eg: mDuration=62006, then mRightProgressPos can be 63000
-        mRightProgressPos = Math.min(mRangeSeekBarView.getSelectedMaxValue() + scrollPos, mDuration);
-        mRedProgressBarPos = mLeftProgressPos;
-        if (mVideoView.isPlaying()) {
-          mVideoView.pause();
-          setPlayPauseViewIcon(false);
-        }
-        mRedProgressIcon.setVisibility(GONE);
-        seekTo(mLeftProgressPos);
+    if (didClamp && !didClampWhilePanning) {
+      playHapticFeedback(false);
+    }
+    didClampWhilePanning = didClamp;
 
-        mRangeSeekBarView.setStartEndTime(mLeftProgressPos, mRightProgressPos);
-        mRangeSeekBarView.invalidate();
-      }
+    progressIndicator.setX(newX);
 
-      lastScrollX = scrollX;
-    }
-  };
+    float indicatorPosition = newX - (trimmerContainerBg.getX());
 
-  /**
-   * 水平滑动了多少px
-   */
-  private int calcScrollXDistance() {
-    LinearLayoutManager layoutManager = (LinearLayoutManager) mVideoThumbRecyclerView.getLayoutManager();
-    int position = layoutManager.findFirstVisibleItemPosition();
-    View firstVisibleChildView = layoutManager.findViewByPosition(position);
-    int itemWidth = firstVisibleChildView.getWidth();
-    return (position) * itemWidth - firstVisibleChildView.getLeft();
-  }
+    // TODO: check this
+    float indicatorPositionPercent = indicatorPosition / (trimmerContainerBg.getWidth() - progressIndicator.getWidth());
+    long newVideoPosition = (long) (indicatorPositionPercent * mVideoView.getDuration());
 
-  private void playingRedProgressAnimation() {
-    pauseRedProgressAnimation();
-    playingAnimation();
-    mAnimationHandler.post(mAnimationRunnable);
+    seekTo(newVideoPosition, false);
   }
-
-  private void playingAnimation() {
-    if (mRedProgressIcon.getVisibility() == View.GONE) {
-      mRedProgressIcon.setVisibility(View.VISIBLE);
-    }
-    final LayoutParams params = (LayoutParams) mRedProgressIcon.getLayoutParams();
-    int start = (int) (RECYCLER_VIEW_PADDING + (mRedProgressBarPos - scrollPos) * averagePxMs);
-    int end = (int) (RECYCLER_VIEW_PADDING + (mRightProgressPos - scrollPos) * averagePxMs);
-    mRedProgressAnimator = ValueAnimator.ofInt(start, end).setDuration((mRightProgressPos - scrollPos) - (mRedProgressBarPos - scrollPos));
-    mRedProgressAnimator.setInterpolator(new LinearInterpolator());
-    mRedProgressAnimator.addUpdateListener(animation -> {
-      params.leftMargin = (int) animation.getAnimatedValue();
-      mRedProgressIcon.setLayoutParams(params);
+  private void setHandleTouchListener(View handle, boolean isLeading) {
+    handle.setOnTouchListener((view, event) -> {
+      switch (event.getAction()) {
+        case MotionEvent.ACTION_DOWN:
+          didClampWhilePanning = false;
+          onVideoPause();
+          fadeOutProgressIndicator();
+          seekTo(isLeading ? startTime : endTime, true);
+          playHapticFeedback(true);
+          break;
+        case MotionEvent.ACTION_MOVE:
+          boolean didClamp = false;
+          float newX = event.getRawX() - ((float) view.getWidth() / 2);
+          if (isLeading) {
+            newX = Math.max(0, Math.min(newX, trailingHandle.getX() - view.getWidth()));
+          } else {
+            newX = Math.min(trimmerContainerBg.getWidth() + view.getWidth(), Math.max(newX, leadingHandle.getX() + view.getWidth()));
+          }
+
+          view.setX(newX);
+
+          // Calculate new startTime or endTime
+          if (isLeading) {
+            // Calculate the new startTime based on the handle's new position
+            long newStartTime = (long) ((newX / trimmerContainerBg.getWidth()) * mVideoView.getDuration());
+            // Calculate the duration between the new startTime and the current endTime
+            long duration = endTime - newStartTime;
+            if (duration >= mMinDuration && duration <= mMaxDuration) {
+              // If the duration is within the allowed range, update startTime and move the progress indicator
+              startTime = newStartTime;
+              progressIndicator.setX(newX + view.getWidth());
+            } else if (duration < mMinDuration) {
+              didClamp = true;
+              // If the duration is less than the minimum, set startTime to the maximum possible to maintain the minimum duration
+              startTime = endTime - mMinDuration;
+              // Adjust the handle position accordingly
+              view.setX((float) startTime / mVideoView.getDuration() * trimmerContainerBg.getWidth());
+              progressIndicator.setX(view.getX() + view.getWidth());
+            } else {
+              didClamp = true;
+              // If the duration is greater than the maximum, set startTime to the minimum possible to maintain the maximum duration
+              startTime = endTime - mMaxDuration;
+              // Adjust the handle position accordingly
+              view.setX((float) startTime / mVideoView.getDuration() * trimmerContainerBg.getWidth());
+              progressIndicator.setX(view.getX() + view.getWidth());
+            }
+          } else {
+            // Calculate the new endTime based on the handle's new position
+            long newEndTime = (long) (((newX - view.getWidth()) / trimmerContainerBg.getWidth()) * mVideoView.getDuration());
+            // Calculate the duration between the new endTime and the current startTime
+            long duration = newEndTime - startTime;
+            if (duration >= mMinDuration && duration <= mMaxDuration) {
+              // If the duration is within the allowed range, update endTime and move the progress indicator
+              endTime = newEndTime;
+              progressIndicator.setX(newX - progressIndicator.getWidth());
+            } else if (duration < mMinDuration) {
+              didClamp = true;
+              // If the duration is less than the minimum, set endTime to the minimum possible to maintain the minimum duration
+              endTime = startTime + mMinDuration;
+              // Adjust the handle position accordingly
+              view.setX((float) endTime / mVideoView.getDuration() * trimmerContainerBg.getWidth() + view.getWidth());
+              progressIndicator.setX(view.getX() - progressIndicator.getWidth());
+            } else {
+              didClamp = true;
+              // If the duration is greater than the maximum, set endTime to the maximum possible to maintain the maximum duration
+              endTime = startTime + mMaxDuration;
+              // Adjust the handle position accordingly
+              view.setX((float) endTime / mVideoView.getDuration() * trimmerContainerBg.getWidth() + view.getWidth());
+              progressIndicator.setX(view.getX() - progressIndicator.getWidth());
+            }
+          }
+
+          if (didClamp && !didClampWhilePanning) {
+            playHapticFeedback(false);
+          }
+          didClampWhilePanning = didClamp;
+
+          updateTrimmerContainerWidth();
+          seekTo(isLeading ? startTime : endTime, false);
+
+          // TODO: create zoom feature like iOS
+//          startZoomWaitTimer();
+          break;
+        case MotionEvent.ACTION_UP:
+//          stopZoomIfNeeded();
+          fadeInProgressIndicator();
+          view.performClick();
+          break;
+        default:
+          return false;
+      }
+      return true;
     });
-    mRedProgressAnimator.start();
   }
 
-  private void pauseRedProgressAnimation() {
-    mRedProgressIcon.clearAnimation();
-    if (mRedProgressAnimator != null && mRedProgressAnimator.isRunning()) {
-      mAnimationHandler.removeCallbacks(mAnimationRunnable);
-      mRedProgressAnimator.cancel();
-    }
+  private void fadeOutProgressIndicator() {
+    progressIndicator.animate().alpha(0f).setDuration(250).withEndAction(() -> progressIndicator.setVisibility(View.INVISIBLE)).start();
   }
 
-  private final Runnable mAnimationRunnable = () -> updateVideoProgress();
-
-  private void updateVideoProgress() {
-    long currentPosition = mVideoView.getCurrentPosition();
-    if (currentPosition >= (mRightProgressPos)) {
-      mRedProgressBarPos = mLeftProgressPos;
-      pauseRedProgressAnimation();
-      onVideoPause();
-    } else {
-      mAnimationHandler.post(mAnimationRunnable);
-    }
+  private void fadeInProgressIndicator() {
+    progressIndicator.setVisibility(View.VISIBLE);
+    progressIndicator.animate().alpha(1f).setDuration(250).start();
   }
 
-  @Override
-  protected void onDetachedFromWindow() {
-    super.onDetachedFromWindow();
-    mContext.getCurrentActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
+  private void updateTrimmerContainerWidth() {
+    int left = (int) leadingHandle.getX() + leadingHandle.getWidth();
+    int right = trimmerContainerBg.getWidth() - (int) trailingHandle.getX() + 2 * trailingHandle.getWidth();
+
+    RelativeLayout.LayoutParams leadingOverlayParams = (RelativeLayout.LayoutParams) leadingOverlay.getLayoutParams();
+    leadingOverlayParams.width = left;
+    leadingOverlayParams.height = RelativeLayout.LayoutParams.MATCH_PARENT;
+    leadingOverlayParams.addRule(RelativeLayout.ALIGN_PARENT_START);
+    leadingOverlay.setLayoutParams(leadingOverlayParams);
+
+    RelativeLayout.LayoutParams trailingOverlayParams = (RelativeLayout.LayoutParams) trailingOverlay.getLayoutParams();
+    trailingOverlayParams.width = right;
+    trailingOverlayParams.height = RelativeLayout.LayoutParams.MATCH_PARENT;
+    trailingOverlayParams.addRule(RelativeLayout.ALIGN_PARENT_END);
+    trailingOverlay.setLayoutParams(trailingOverlayParams);
   }
 
-  /**
-   * Cancel trim thread execute action when finish
-   */
-  @Override public void onDestroy() {
-    BackgroundExecutor.cancelAll("", true);
-    UiThreadExecutor.cancelAll("");
-    mContext.getCurrentActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
+  private void playHapticFeedback(boolean isLight) {
+    if (vibrator != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+      vibrator.vibrate(VibrationEffect.createOneShot(isLight ? 10 : 25, VibrationEffect.DEFAULT_AMPLITUDE)); // Light vibration
+    }
   }
 
-  private int getScreenWidthInPortraitMode() {
-    int screenWidth = DeviceUtil.getDeviceWidth();
-    int screenHeight = DeviceUtil.getDeviceHeight();
+  private void startZoomWaitTimer() {
+    stopZoomWaitTimer();
+    if (isZoomedIn) {
+      return;
+    }
 
-    // Check the current orientation
-    int currentOrientation = getResources().getConfiguration().orientation;
+    zoomRunnable = () -> {
+      Log.i("tag","A Kiss after 500ms");
+      stopZoomWaitTimer();
+      zoomIfNeeded();
+    };
 
-    // Swap width and height if the current orientation is landscape
-    if (currentOrientation == Configuration.ORIENTATION_LANDSCAPE) {
-      return screenHeight;
-    }
+    zoomWaitTimer.postDelayed(zoomRunnable, 500);
+  }
 
-    return screenWidth;
+  private void stopZoomWaitTimer() {
+    zoomWaitTimer.removeCallbacks(zoomRunnable);
   }
 
-  private void configure(ReadableMap config) {
-    if (config.hasKey("maxDuration")) {
-      this.mMaxDuration = Math.max(0, config.getInt("maxDuration") * 1000L);
-    }
+  private void stopZoomIfNeeded() {
+    stopZoomWaitTimer();
+    isZoomedIn = false;
+  }
 
-    if (config.hasKey("minDuration")) {
-      this.mMinDuration = Math.max(1000L, config.getInt("minDuration") * 1000L);
+  private void zoomIfNeeded() {
+    if (isZoomedIn) {
+      return;
     }
 
-    if (config.hasKey("cancelButtonText")) {
-      TextView tv = findViewById(R.id.cancelBtn);
-      tv.setText(config.getString("cancelButtonText"));
-    }
+    startShootVideoThumbs(mContext, mSourceUri, 10, 5000, 10000);
 
-    if (config.hasKey("saveButtonText")) {
-      TextView tv = findViewById(R.id.saveBtn);
-      tv.setText(config.getString("saveButtonText"));
-    }
+    isZoomedIn = true;
   }
 }