react-native-video-trim 1.0.20 → 1.0.22

package/ios/VideoTrimmerViewController.swift

@@ -1,41 +1,23 @@
-//
-//  VideoTrimmerViewController.swift
-//  react-native-video-trim
-//
-//  Created by Duc Trung Mai on 17/1/24.
-//
-
 import UIKit
 import AVKit
 
 extension CMTime {
     var displayString: String {
         let offset = TimeInterval(seconds)
-        let numberOfNanosecondsFloat = (offset - TimeInterval(Int(offset))) * 1000.0
+        let numberOfNanosecondsFloat = (offset - TimeInterval(Int(offset))) * 100.0
         let nanoseconds = Int(numberOfNanosecondsFloat)
+        
+        let formatter = CMTime.dateFormatter
+        return String(format: "%@.%02d", formatter.string(from: offset) ?? "00:00", nanoseconds)
+    }
+    
+    private static var dateFormatter: DateComponentsFormatter = {
         let formatter = DateComponentsFormatter()
         formatter.unitsStyle = .positional
         formatter.zeroFormattingBehavior = .pad
         formatter.allowedUnits = [.minute, .second]
-        return String(format: "%@.%03d", formatter.string(from: offset) ?? "00:00", nanoseconds)
-    }
-}
-
-extension AVAsset {
-    var fullRange: CMTimeRange {
-        return CMTimeRange(start: .zero, duration: duration)
-    }
-    func trimmedComposition(_ range: CMTimeRange) -> AVAsset {
-        guard CMTimeRangeEqual(fullRange, range) == false else {return self}
-        
-        let composition = AVMutableComposition()
-        try? composition.insertTimeRange(range, of: self, at: .zero)
-        
-        if let videoTrack = tracks(withMediaType: .video).first {
-            composition.tracks.forEach {$0.preferredTransform = videoTrack.preferredTransform}
-        }
-        return composition
-    }
+        return formatter
+    }()
 }
 
 @available(iOS 13.0, *)
@@ -48,69 +30,61 @@ class VideoTrimmerViewController: UIViewController {
     var cancelBtnClicked: (() -> Void)?
     var saveBtnClicked: ((CMTimeRange) -> Void)?
     
-    let playerController = AVPlayerViewController()
-    var trimmer: VideoTrimmer!
-    var timingStackView: UIStackView!
-    var leadingTrimLabel: UILabel!
-    var currentTimeLabel: UILabel!
-    var trailingTrimLabel: UILabel!
-    
+    private let playerController = AVPlayerViewController()
+    private var trimmer: VideoTrimmer!
+    private var timingStackView: UIStackView!
+    private var leadingTrimLabel: UILabel!
+    private var currentTimeLabel: UILabel!
+    private var trailingTrimLabel: UILabel!
     private var btnStackView: UIStackView!
     private var cancelBtn: UIButton!
     private var playBtn: UIButton!
     private var saveBtn: UIButton!
     private let playIcon = UIImage(systemName: "play.fill")
     private let pauseIcon = UIImage(systemName: "pause.fill")
-    
-    private var wasPlaying = false
-    private var player: AVPlayer! {playerController.player}
+    private var player: AVPlayer! { playerController.player }
     private var timeObserverToken: Any?
     
+    var isSeekInProgress: Bool = false  // Marker
+    private var chaseTime = CMTime.zero
+    private var preferredFrameRate: Float = 23.98
+
     
     // MARK: - Input
-    @objc private func didBeginTrimming(_ sender: VideoTrimmer) {
-        updateLabels()
-        
-        wasPlaying = (player.timeControlStatus != .paused)
-        player.pause()
-        
-        updatePlayerAsset()
+    @objc private func didBeginTrimmingFromStart(_ sender: VideoTrimmer) {
+        handleBeforeProgressChange()
     }
     
-    @objc private func didEndTrimming(_ sender: VideoTrimmer) {
-        updateLabels()
-        
-        if wasPlaying == true {
-            player.play()
-        }
-        
-        updatePlayerAsset()
+    @objc private func leadingGrabberChanged(_ sender: VideoTrimmer) {
+        handleProgressChanged(time: trimmer.selectedRange.start)
     }
     
-    @objc private func selectedRangeDidChanged(_ sender: VideoTrimmer) {
-        updateLabels()
+    @objc private func didEndTrimmingFromStart(_ sender: VideoTrimmer) {
+        handleTrimmingEnd(true)
+    }
+    
+    @objc private func didBeginTrimmingFromEnd(_ sender: VideoTrimmer) {
+        handleBeforeProgressChange()
+    }
+    
+    @objc private func trailingGrabberChanged(_ sender: VideoTrimmer) {
+        handleProgressChanged(time: trimmer.selectedRange.end)
+    }
+    
+    @objc private func didEndTrimmingFromEnd(_ sender: VideoTrimmer) {
+        handleTrimmingEnd(false)
     }
     
     @objc private func didBeginScrubbing(_ sender: VideoTrimmer) {
-        updateLabels()
-        
-        wasPlaying = (player.timeControlStatus != .paused)
-        player.pause()
+        handleBeforeProgressChange()
     }
     
     @objc private func didEndScrubbing(_ sender: VideoTrimmer) {
         updateLabels()
-        
-        if wasPlaying == true {
-            player.play()
-        }
     }
     
     @objc private func progressDidChanged(_ sender: VideoTrimmer) {
-        updateLabels()
-        
-        let time = CMTimeSubtract(trimmer.progress, trimmer.selectedRange.start)
-        player.seek(to: time, toleranceBefore: .zero, toleranceAfter: .zero)
+        handleProgressChanged(time: trimmer.progress)
     }
     
     // MARK: - Private
@@ -120,38 +94,81 @@ class VideoTrimmerViewController: UIViewController {
         trailingTrimLabel.text = trimmer.selectedRange.end.displayString
     }
     
-    private func updatePlayerAsset() {
-        let outputRange = trimmer.trimmingState == .none ? trimmer.selectedRange : asset.fullRange
-        let trimmedAsset = asset.trimmedComposition(outputRange)
-        if trimmedAsset != player.currentItem?.asset {
-            player.replaceCurrentItem(with: AVPlayerItem(asset: trimmedAsset))
-        }
+    private func handleBeforeProgressChange() {
+        updateLabels()
+        player.pause()
+        setPlayBtnIcon()
+    }
+    
+    private func handleProgressChanged(time: CMTime) {
+        updateLabels()
+        seek(to: time)
+    }
+    
+    private func handleTrimmingEnd(_ start: Bool) {
+        self.trimmer.progress = start ? trimmer.selectedRange.start : trimmer.selectedRange.end
+        updateLabels()
+        player.seek(to: trimmer.progress, toleranceBefore: .zero, toleranceAfter: .zero)
     }
     
     // MARK: - UIViewController
     override func viewDidLoad() {
         super.viewDidLoad()
         
-        view.backgroundColor = .black
-        
-        // bottom action buttons
-        cancelBtn = UIButton(type: .system)
-        cancelBtn.setTitle(cancelBtnText, for: .normal)
-        cancelBtn.titleLabel?.font = .systemFont(ofSize: 18)
-        cancelBtn.setTitleColor(.white, for: .normal)
-        cancelBtn.addTarget(self, action: #selector(onCancelBtnClicked), for: .touchUpInside)
+        setupView()
+        setupButtons()
+        setupTimeLabels()
+        setupVideoTrimmer()
+        setupPlayerController()
+        setupTimeObserver()
         
+        updateLabels()
+    }
+    
+    override func viewWillDisappear(_ animated: Bool) {
+        super.viewWillDisappear(animated)
         
-        playBtn = UIButton(type: .system)
-        playBtn.setImage(playIcon, for: .normal)
-        playBtn.tintColor = .systemBlue
-        playBtn.addTarget(self, action: #selector(togglePlay(sender:)), for: .touchUpInside)
+        player.pause()
+        if let token = timeObserverToken {
+            player.removeTimeObserver(token)
+            timeObserverToken = nil
+        }
+        playerController.player = nil
+        playerController.dismiss(animated: false, completion: nil)
+    }
+    
+    @objc private func togglePlay(sender: UIButton) {
+        if player.timeControlStatus == .playing {
+            player.pause()
+        } else {
+            if CMTimeCompare(trimmer.progress, trimmer.selectedRange.end) != -1 {
+                trimmer.progress = trimmer.selectedRange.start
+                player.seek(to: trimmer.progress, toleranceBefore: .zero, toleranceAfter: .zero)
+            }
+            
+            player.play()
+        }
         
-        saveBtn = UIButton(type: .system)
-        saveBtn.setTitle(saveButtonText, for: .normal)
-        saveBtn.titleLabel?.font = .systemFont(ofSize: 18)
-        saveBtn.setTitleColor(.systemBlue, for: .normal)
-        saveBtn.addTarget(self, action: #selector(onSaveBtnClicked), for: .touchUpInside)
+        setPlayBtnIcon()
+    }
+    
+    @objc private func onSaveBtnClicked() {
+        saveBtnClicked?(trimmer.selectedRange)
+    }
+    
+    @objc private func onCancelBtnClicked() {
+        cancelBtnClicked?()
+    }
+    
+    // MARK: - Setup Methods
+    private func setupView() {
+        view.backgroundColor = .black
+    }
+    
+    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:)))
+        saveBtn = UIButton.createButton(title: saveButtonText, font: .systemFont(ofSize: 18), titleColor: .systemBlue, target: self, action: #selector(onSaveBtnClicked))
         
         btnStackView = UIStackView(arrangedSubviews: [cancelBtn, playBtn, saveBtn])
         btnStackView.axis = .horizontal
@@ -163,24 +180,14 @@ class VideoTrimmerViewController: UIViewController {
         NSLayoutConstraint.activate([
             btnStackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 16),
             btnStackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -16),
-            btnStackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -16),
+            btnStackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -16)
         ])
-        
-        // time labels
-        leadingTrimLabel = UILabel()
-        leadingTrimLabel.font = UIFont.preferredFont(forTextStyle: .caption1)
-        leadingTrimLabel.textAlignment = .left
-        leadingTrimLabel.textColor = .white
-        
-        currentTimeLabel = UILabel()
-        currentTimeLabel.font = UIFont.preferredFont(forTextStyle: .caption1)
-        currentTimeLabel.textAlignment = .center
-        currentTimeLabel.textColor = .white
-        
-        trailingTrimLabel = UILabel()
-        trailingTrimLabel.font = UIFont.preferredFont(forTextStyle: .caption1)
-        trailingTrimLabel.textAlignment = .right
-        trailingTrimLabel.textColor = .white
+    }
+    
+    private func setupTimeLabels() {
+        leadingTrimLabel = UILabel.createLabel(textAlignment: .left, textColor: .white)
+        currentTimeLabel = UILabel.createLabel(textAlignment: .center, textColor: .white)
+        trailingTrimLabel = UILabel.createLabel(textAlignment: .right, textColor: .white)
         
         timingStackView = UIStackView(arrangedSubviews: [leadingTrimLabel, currentTimeLabel, trailingTrimLabel])
         timingStackView.axis = .horizontal
@@ -192,50 +199,57 @@ class VideoTrimmerViewController: UIViewController {
         NSLayoutConstraint.activate([
             timingStackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 16),
             timingStackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -16),
-            timingStackView.bottomAnchor.constraint(equalTo: btnStackView.topAnchor, constant: -8),
+            timingStackView.bottomAnchor.constraint(equalTo: btnStackView.topAnchor, constant: -8)
         ])
-        
-        // THIS IS WHERE WE SETUP THE VIDEOTRIMMER:
+    }
+    
+    private func setupVideoTrimmer() {
         trimmer = VideoTrimmer()
-        trimmer.asset = asset // this should happen before trimmer.selectedRange below otherwise its didSet will override
+        trimmer.asset = asset
         trimmer.minimumDuration = CMTime(seconds: 1, preferredTimescale: 600)
         
-        if maximumDuration != nil {
-            trimmer.maximumDuration = CMTime(seconds: max(1, Double(maximumDuration!)), preferredTimescale: 600) // minimum 1 second
-            
-            // guard check to make sure max duration can only <= asset.duration
-            if CMTimeCompare(trimmer.maximumDuration, asset.duration) == 1 {
+        if let maxDuration = maximumDuration {
+            trimmer.maximumDuration = CMTime(seconds: max(1, Double(maxDuration)), preferredTimescale: 600)
+            if trimmer.maximumDuration > asset.duration {
                 trimmer.maximumDuration = asset.duration
             }
-            
             trimmer.selectedRange = CMTimeRange(start: .zero, end: trimmer.maximumDuration)
         }
-
-        if minimumDuration != nil {
-            trimmer.minimumDuration = CMTime(seconds: max(1, Double(minimumDuration!)), preferredTimescale: 600) // minimum 1 second
+        
+        if let minDuration = minimumDuration {
+            trimmer.minimumDuration = CMTime(seconds: max(1, Double(minDuration)), preferredTimescale: 600)
         }
         
-        trimmer.addTarget(self, action: #selector(didBeginTrimming(_:)), for: VideoTrimmer.didBeginTrimming)
-        trimmer.addTarget(self, action: #selector(didEndTrimming(_:)), for: VideoTrimmer.didEndTrimming)
-        trimmer.addTarget(self, action: #selector(selectedRangeDidChanged(_:)), for: VideoTrimmer.selectedRangeChanged)
         trimmer.addTarget(self, action: #selector(didBeginScrubbing(_:)), for: VideoTrimmer.didBeginScrubbing)
         trimmer.addTarget(self, action: #selector(didEndScrubbing(_:)), for: VideoTrimmer.didEndScrubbing)
         trimmer.addTarget(self, action: #selector(progressDidChanged(_:)), for: VideoTrimmer.progressChanged)
+        
+        trimmer.addTarget(self, action: #selector(didBeginTrimmingFromStart(_:)), for: VideoTrimmer.didBeginTrimmingFromStart)
+        trimmer.addTarget(self, action: #selector(leadingGrabberChanged(_:)), for: VideoTrimmer.leadingGrabberChanged)
+        trimmer.addTarget(self, action: #selector(didEndTrimmingFromStart(_:)), for: VideoTrimmer.didEndTrimmingFromStart)
+        
+        trimmer.addTarget(self, action: #selector(didBeginTrimmingFromEnd(_:)), for: VideoTrimmer.didBeginTrimmingFromEnd)
+        trimmer.addTarget(self, action: #selector(trailingGrabberChanged(_:)), for: VideoTrimmer.trailingGrabberChanged)
+        trimmer.addTarget(self, action: #selector(didEndTrimmingFromEnd(_:)), for: VideoTrimmer.didEndTrimmingFromEnd)
         view.addSubview(trimmer)
         trimmer.translatesAutoresizingMaskIntoConstraints = false
         NSLayoutConstraint.activate([
             trimmer.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
             trimmer.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
             trimmer.bottomAnchor.constraint(equalTo: timingStackView.topAnchor, constant: -16),
-            trimmer.heightAnchor.constraint(equalToConstant: 50),
+            trimmer.heightAnchor.constraint(equalToConstant: 50)
         ])
-        
-        playerController.showsPlaybackControls = false // hide control buttons
+    }
+    
+    private func setupPlayerController() {
+        playerController.showsPlaybackControls = false
         if #available(iOS 16.0, *) {
-            playerController.allowsVideoFrameAnalysis = false // hide live text
+            playerController.allowsVideoFrameAnalysis = false
         }
         playerController.player = AVPlayer()
-        try? AVAudioSession.sharedInstance().setCategory(.playback, mode: .default, options: []) // this is to play audio even when device is in silent mode
+        player.replaceCurrentItem(with: AVPlayerItem(asset: asset))
+        
+        try? AVAudioSession.sharedInstance().setCategory(.playback, mode: .default, options: [])
         addChild(playerController)
         view.addSubview(playerController.view)
         playerController.view.translatesAutoresizingMaskIntoConstraints = false
@@ -245,56 +259,100 @@ class VideoTrimmerViewController: UIViewController {
             playerController.view.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
             playerController.view.bottomAnchor.constraint(equalTo: trimmer.topAnchor, constant: -16)
         ])
-        
-        updatePlayerAsset()
-        
+    }
+    
+    private func setupTimeObserver() {
         timeObserverToken = player.addPeriodicTimeObserver(forInterval: CMTime(value: 1, timescale: 30), queue: .main) { [weak self] time in
-            guard let self = self else {return}
-
-            currentTimeLabel.text = player.currentTime().displayString
+            guard let self = self else { return }
             
-            // when we're not trimming, the players starting point is actual later than the trimmer,
-            // (because the vidoe has been trimmed), so we need to account for that.
-            // When we're trimming, we always show the full video
-            let finalTime = self.trimmer.trimmingState == .none ? CMTimeAdd(time, self.trimmer.selectedRange.start) : time
-            self.trimmer.progress = finalTime
+            if self.player.timeControlStatus != .playing {
+                return
+            }
             
-            if self.player.timeControlStatus == .playing {
-                self.playBtn.setImage(self.pauseIcon, for: .normal)
-            } else {
-                self.playBtn.setImage(self.playIcon, for: .normal)
+            self.trimmer.progress = time
+            
+            // pause if reach end of selected range
+            if CMTimeCompare(self.trimmer.progress, trimmer.selectedRange.end) == 1 {
+                player.pause()
+                self.trimmer.progress = trimmer.selectedRange.end
+                player.seek(to: trimmer.selectedRange.end, toleranceBefore: .zero, toleranceAfter: .zero)
             }
+            
+            currentTimeLabel.text = trimmer.progress.displayString
+            
+            self.setPlayBtnIcon()
         }
-        
-        updateLabels()
     }
     
-    override func viewWillDisappear(_ animated: Bool) {
-        super.viewWillDisappear(animated)
-        
-        player.pause()
-        if timeObserverToken != nil {
-            player.removeTimeObserver(timeObserverToken as Any)
-            timeObserverToken = nil
-        }
-        playerController.player  = nil
-        playerController.dismiss(animated: false, completion: nil)
+    private func setPlayBtnIcon() {
+        self.playBtn.setImage(self.player.timeControlStatus == .playing ? self.pauseIcon : self.playIcon, for: .normal)
     }
     
-    @objc private func togglePlay(sender: UIButton) {
-        if player.timeControlStatus == .playing {
-            player.pause()
-        } else {
-            player.play()
+    // ====Smoother seek
+    public func seek(to time: CMTime) {
+        seekSmoothlyToTime(newChaseTime: time)
+    }
+
+    private func seekSmoothlyToTime(newChaseTime: CMTime) {
+        if CMTimeCompare(newChaseTime, chaseTime) != 0 {
+            chaseTime = newChaseTime
+
+            if !isSeekInProgress {
+                trySeekToChaseTime()
+            }
         }
-        
     }
-    
-    @objc func onSaveBtnClicked() {
-        saveBtnClicked?(trimmer.selectedRange)
+
+    private func trySeekToChaseTime() {
+        guard player?.status == .readyToPlay else { return }
+        actuallySeekToTime()
     }
-    
-    @objc func onCancelBtnClicked() {
-        cancelBtnClicked?()
+
+    private func actuallySeekToTime() {
+        isSeekInProgress = true
+        let seekTimeInProgress = chaseTime
+
+        player?.seek(to: seekTimeInProgress, toleranceBefore: .zero, toleranceAfter: .zero) { [weak self] _ in
+            guard let `self` = self else { return }
+
+            if CMTimeCompare(seekTimeInProgress, self.chaseTime) == 0 {
+                self.isSeekInProgress = false
+            } else {
+                self.trySeekToChaseTime()
+            }
+        }
+    }
+}
+
+private extension UIButton {
+    static func createButton(title: String? = nil, image: UIImage? = nil, font: UIFont? = nil, titleColor: UIColor? = nil, tintColor: UIColor? = nil, target: Any?, action: Selector) -> UIButton {
+        let button = UIButton(type: .system)
+        if let title = title {
+            button.setTitle(title, for: .normal)
+        }
+        if let image = image {
+            button.setImage(image, for: .normal)
+        }
+        if let font = font {
+            button.titleLabel?.font = font
+        }
+        if let titleColor = titleColor {
+            button.setTitleColor(titleColor, for: .normal)
+        }
+        if let tintColor = tintColor {
+            button.tintColor = tintColor
+        }
+        button.addTarget(target, action: action, for: .touchUpInside)
+        return button
+    }
+}
+
+private extension UILabel {
+    static func createLabel(textAlignment: NSTextAlignment, textColor: UIColor) -> UILabel {
+        let label = UILabel()
+        label.font = UIFont.preferredFont(forTextStyle: .caption1)
+        label.textAlignment = textAlignment
+        label.textColor = textColor
+        return label
     }
 }

package/package.json

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