@movementinfra/expo-twostep-video 0.1.11 → 0.1.13

package/ios/ExpoTwoStepVideoView.swift

@@ -9,6 +9,7 @@ class ExpoTwoStepVideoView: ExpoView {
 
     private var player: AVPlayer?
     private var playerLayer: AVPlayerLayer?
+    private var playerContainerView: UIView!
     private var timeObserver: Any?
     private var isObservingStatus: Bool = false
     private var isAudioSessionConfigured: Bool = false
@@ -29,26 +30,16 @@ class ExpoTwoStepVideoView: ExpoView {
 
     // MARK: - Pan/Zoom Properties
 
-    /// Current zoom level (1.0 = no zoom, 2.0 = 2x zoom, etc.)
-    private var currentZoom: CGFloat = 1.0
+    /// Current transform applied to the container view
+    private var currentTransform: CGAffineTransform = .identity
 
-    /// Current horizontal pan (-1.0 to 1.0, 0 = center)
-    private var currentPanX: CGFloat = 0.0
+    /// Transform at gesture start (for incremental changes)
+    private var gestureStartTransform: CGAffineTransform = .identity
 
-    /// Current vertical pan (-1.0 to 1.0, 0 = center)
-    private var currentPanY: CGFloat = 0.0
-
-    /// Last pinch scale for incremental zoom calculation
-    private var lastPinchScale: CGFloat = 1.0
-
-    /// Starting pan position when gesture begins
-    private var panStartX: CGFloat = 0.0
-    private var panStartY: CGFloat = 0.0
-
-    /// Minimum zoom level (configurable)
+    /// Minimum zoom level
     var minZoom: CGFloat = 1.0
 
-    /// Maximum zoom level (configurable)
+    /// Maximum zoom level
     var maxZoom: CGFloat = 5.0
 
     /// Gesture recognizers
@@ -61,34 +52,34 @@ class ExpoTwoStepVideoView: ExpoView {
         super.init(appContext: appContext)
         clipsToBounds = true
         backgroundColor = .black
-        setupPlayerLayer()
+        setupPlayerContainerView()
         setupAudioSession()
         setupAudioSessionObservers()
         setupGestureRecognizers()
     }
 
-    private func setupPlayerLayer() {
+    private func setupPlayerContainerView() {
+        // Create container view that will receive transforms
+        playerContainerView = UIView()
+        playerContainerView.backgroundColor = .black
+        addSubview(playerContainerView)
+
+        // Create player layer inside container
         playerLayer = AVPlayerLayer()
         playerLayer?.videoGravity = .resizeAspect
         playerLayer?.backgroundColor = UIColor.black.cgColor
-        if let playerLayer = playerLayer {
-            layer.addSublayer(playerLayer)
-        }
+        playerContainerView.layer.addSublayer(playerLayer!)
     }
 
     /// Configure audio session for video playback
-    /// Uses .playback category to ensure audio plays even when silent switch is on
     private func setupAudioSession() {
         do {
             let audioSession = AVAudioSession.sharedInstance()
-            // .playback category: audio plays even with silent switch, stops other audio
-            // .defaultToSpeaker: routes audio to speaker by default (not earpiece)
             try audioSession.setCategory(.playback, mode: .moviePlayback, options: [.defaultToSpeaker])
             try audioSession.setActive(true, options: [.notifyOthersOnDeactivation])
             isAudioSessionConfigured = true
         } catch {
             print("ExpoTwoStepVideoView: Failed to configure audio session: \(error)")
-            // Try a simpler configuration as fallback
             do {
                 try AVAudioSession.sharedInstance().setCategory(.playback)
                 try AVAudioSession.sharedInstance().setActive(true)
@@ -99,7 +90,7 @@ class ExpoTwoStepVideoView: ExpoView {
         }
     }
 
-    /// Listen for audio session interruptions (phone calls, other apps)
+    /// Listen for audio session interruptions
     private func setupAudioSessionObservers() {
         NotificationCenter.default.addObserver(
             self,
@@ -125,15 +116,12 @@ class ExpoTwoStepVideoView: ExpoView {
 
         switch type {
         case .began:
-            // Interruption began - pause playback
             player?.pause()
             onPlaybackStatusChange(["status": "interrupted"])
         case .ended:
-            // Interruption ended - check if we should resume
             guard let optionsValue = userInfo[AVAudioSessionInterruptionOptionKey] as? UInt else { return }
             let options = AVAudioSession.InterruptionOptions(rawValue: optionsValue)
             if options.contains(.shouldResume) {
-                // Re-activate audio session and resume
                 setupAudioSession()
                 player?.play()
                 onPlaybackStatusChange(["status": "playing"])
@@ -150,7 +138,6 @@ class ExpoTwoStepVideoView: ExpoView {
             return
         }
 
-        // Pause when headphones are unplugged
         if reason == .oldDeviceUnavailable {
             player?.pause()
             onPlaybackStatusChange(["status": "paused"])
@@ -166,122 +153,190 @@ class ExpoTwoStepVideoView: ExpoView {
         addGestureRecognizer(pinch)
         pinchGesture = pinch
 
-        // Pan with 2 fingers (to avoid conflict with single-finger scrubbing)
+        // Single finger pan (only works when zoomed, controlled by delegate)
         let pan = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:)))
-        pan.minimumNumberOfTouches = 2
-        pan.maximumNumberOfTouches = 2
         pan.delegate = self
         addGestureRecognizer(pan)
         panGesture = pan
 
-        // Enable user interaction
         isUserInteractionEnabled = true
     }
 
+    // MARK: - Video Content Rect Calculation
+
+    /// Calculate the rect where the actual video content is displayed within the player layer.
+    /// This accounts for letterboxing/pillarboxing when using .resizeAspect video gravity.
+    private func videoContentRect() -> CGRect {
+        guard let playerLayer = playerLayer,
+              let playerItem = player?.currentItem else {
+            return playerContainerView.bounds
+        }
+
+        // Get the natural size of the video
+        let videoSize = playerItem.presentationSize
+        guard videoSize.width > 0 && videoSize.height > 0 else {
+            return playerContainerView.bounds
+        }
+
+        // Use AVFoundation's utility to calculate the rect
+        let layerBounds = playerLayer.bounds
+        return AVMakeRect(aspectRatio: videoSize, insideRect: layerBounds)
+    }
+
+    /// Adjust an anchor point to be relative to the video content rect.
+    /// Clamps points outside the video area to the nearest edge.
+    private func adjustedAnchorPoint(for point: CGPoint) -> CGPoint {
+        let contentRect = videoContentRect()
+
+        // Clamp the point to the video content rect
+        let clampedX = min(max(point.x, contentRect.minX), contentRect.maxX)
+        let clampedY = min(max(point.y, contentRect.minY), contentRect.maxY)
+
+        return CGPoint(x: clampedX, y: clampedY)
+    }
+
+    // MARK: - Gesture Handlers
+
+    /// Get the current visual transform, reading from the presentation layer if an animation is in progress
+    private func captureVisualTransform() -> CGAffineTransform {
+        if let presentationLayer = playerContainerView.layer.presentation() {
+            return CGAffineTransform(
+                a: presentationLayer.transform.m11,
+                b: presentationLayer.transform.m12,
+                c: presentationLayer.transform.m21,
+                d: presentationLayer.transform.m22,
+                tx: presentationLayer.transform.m41,
+                ty: presentationLayer.transform.m42
+            )
+        }
+        return playerContainerView.transform
+    }
+
+    /// Prepare for a new gesture by capturing current visual state and cancelling animations
+    private func beginGesture() {
+        let visualTransform = captureVisualTransform()
+        playerContainerView.layer.removeAllAnimations()
+        playerContainerView.transform = visualTransform
+        gestureStartTransform = visualTransform
+        currentTransform = visualTransform
+    }
+
     @objc private func handlePinchGesture(_ gesture: UIPinchGestureRecognizer) {
         switch gesture.state {
         case .began:
-            lastPinchScale = 1.0
-        case .changed:
-            // Calculate incremental scale change
-            let scaleChange = gesture.scale / lastPinchScale
-            lastPinchScale = gesture.scale
-
-            // Apply to current zoom
-            let newZoom = currentZoom * scaleChange
-            currentZoom = min(max(newZoom, minZoom), maxZoom)
+            beginGesture()
 
-            // Constrain pan when zoom changes
-            constrainPan()
+        case .changed:
+            let rawAnchor = gesture.location(in: self)
+            // Adjust anchor to account for letterboxing/pillarboxing
+            let anchor = adjustedAnchorPoint(for: rawAnchor)
+            let scale = gesture.scale
+            let scaleTransform = CGAffineTransform.anchoredScale(scale: scale, anchor: anchor)
+            let newTransform = gestureStartTransform.concatenating(scaleTransform)
+            currentTransform = newTransform
+            playerContainerView.transform = newTransform
 
-            updateLayerTransform()
-            emitPanZoomChange()
         case .ended, .cancelled:
-            lastPinchScale = 1.0
+            onGestureEnded()
+
         default:
             break
         }
     }
 
     @objc private func handlePanGesture(_ gesture: UIPanGestureRecognizer) {
-        // Only allow panning when zoomed in
-        guard currentZoom > 1.0 else { return }
-
         switch gesture.state {
         case .began:
-            panStartX = currentPanX
-            panStartY = currentPanY
+            beginGesture()
+
         case .changed:
             let translation = gesture.translation(in: self)
+            let scale = max(gestureStartTransform.scaleX, 1.0)
 
-            // Convert translation to normalized pan values
-            // When zoomed in 2x, a full-width drag should change pan by the available pan range
-            let availablePanX = (currentZoom - 1.0) / currentZoom
-            let availablePanY = (currentZoom - 1.0) / currentZoom
+            // Translate in the scaled coordinate space
+            let newTransform = gestureStartTransform.translatedBy(
+                x: translation.x / scale,
+                y: translation.y / scale
+            )
+            currentTransform = newTransform
+            playerContainerView.transform = newTransform
 
-            // Normalize translation to view size
-            let normalizedDeltaX = translation.x / bounds.width
-            let normalizedDeltaY = translation.y / bounds.height
-
-            // Scale by available pan range and apply
-            currentPanX = panStartX - normalizedDeltaX * 2 * availablePanX
-            currentPanY = panStartY - normalizedDeltaY * 2 * availablePanY
-
-            // Constrain pan
-            constrainPan()
-
-            updateLayerTransform()
-            emitPanZoomChange()
         case .ended, .cancelled:
-            break
+            onGestureEnded()
+
         default:
             break
         }
     }
 
-    /// Constrain pan values so content stays visible
-    private func constrainPan() {
-        // When zoomed, limit how far we can pan
-        // At zoom level 2x, we can pan at most to show the edge (normalized to -1...1)
-        let maxPanAmount = (currentZoom - 1.0) / currentZoom
+    // MARK: - Transform Helpers
+
+    /// Called when a gesture ends - applies bounds limiting with spring animation
+    private func onGestureEnded() {
+        let limitedTransform = limitTransform(currentTransform)
+
+        // Update state immediately so new gestures start from correct position
+        currentTransform = limitedTransform
+        gestureStartTransform = limitedTransform
+
+        UIView.animate(
+            withDuration: 0.3,
+            delay: 0,
+            usingSpringWithDamping: 0.8,
+            initialSpringVelocity: 0,
+            options: [.allowUserInteraction],
+            animations: {
+                self.playerContainerView.transform = limitedTransform
+            },
+            completion: { _ in
+                self.emitPanZoomChange()
+            }
+        )
+    }
 
-        currentPanX = min(max(currentPanX, -maxPanAmount), maxPanAmount)
-        currentPanY = min(max(currentPanY, -maxPanAmount), maxPanAmount)
+    /// Limit transform to valid bounds (min/max zoom, pan within content)
+    private func limitTransform(_ transform: CGAffineTransform) -> CGAffineTransform {
+        let scaleX = transform.scaleX
+        let scaleY = transform.scaleY
 
-        // If not zoomed in, reset pan to center
-        if currentZoom <= 1.0 {
-            currentPanX = 0
-            currentPanY = 0
+        // If zoomed out too far, reset to identity
+        if scaleX < minZoom || scaleY < minZoom {
+            return .identity
         }
-    }
 
-    /// Apply the current pan/zoom transform to the player layer
-    private func updateLayerTransform() {
-        guard let layer = playerLayer else { return }
+        var capped = transform
 
-        var transform = CATransform3DIdentity
+        // Cap maximum zoom
+        let currentScale = max(scaleX, scaleY)
+        if currentScale > maxZoom {
+            let factor = maxZoom / currentScale
+            let center = CGPoint(x: bounds.width / 2, y: bounds.height / 2)
+            let capTransform = CGAffineTransform.anchoredScale(scale: factor, anchor: center)
+            capped = capped.concatenating(capTransform)
+        }
 
-        // Apply zoom (scale)
-        transform = CATransform3DScale(transform, currentZoom, currentZoom, 1.0)
+        // Constrain pan to keep content visible
+        let contentSize = bounds.size
+        let maxX = contentSize.width * (capped.scaleX - 1)
+        let maxY = contentSize.height * (capped.scaleY - 1)
 
-        // Apply pan (translation) - scale the translation by zoom to account for scaled coordinate space
-        let translateX = -currentPanX * bounds.width * (currentZoom - 1.0) / (2.0 * currentZoom)
-        let translateY = -currentPanY * bounds.height * (currentZoom - 1.0) / (2.0 * currentZoom)
-        transform = CATransform3DTranslate(transform, translateX, translateY, 0)
+        // tx/ty constraints: can't pan past edges
+        capped.tx = min(max(capped.tx, -maxX), 0)
+        capped.ty = min(max(capped.ty, -maxY), 0)
 
-        // Apply transform with animation for smoothness
-        CATransaction.begin()
-        CATransaction.setDisableActions(true) // Disable implicit animations for responsiveness
-        layer.transform = transform
-        CATransaction.commit()
+        return capped
     }
 
     /// Emit the current pan/zoom state to JavaScript
     private func emitPanZoomChange() {
+        let scale = currentTransform.scaleX
+        let panX = scale > 1.0 ? currentTransform.tx / (bounds.width * (scale - 1)) : 0
+        let panY = scale > 1.0 ? currentTransform.ty / (bounds.height * (scale - 1)) : 0
+
         onPanZoomChange([
-            "panX": currentPanX,
-            "panY": currentPanY,
-            "zoomLevel": currentZoom
+            "panX": -panX,  // Normalize to -1 to 0 range
+            "panY": -panY,
+            "zoomLevel": scale
         ])
     }
 
@@ -289,61 +344,86 @@ class ExpoTwoStepVideoView: ExpoView {
 
     /// Get the current pan/zoom state
     func getPanZoomState() -> [String: CGFloat] {
+        let scale = currentTransform.scaleX
+        let panX = scale > 1.0 ? currentTransform.tx / (bounds.width * (scale - 1)) : 0
+        let panY = scale > 1.0 ? currentTransform.ty / (bounds.height * (scale - 1)) : 0
+
         return [
-            "panX": currentPanX,
-            "panY": currentPanY,
-            "zoomLevel": currentZoom
+            "panX": -panX,
+            "panY": -panY,
+            "zoomLevel": scale
         ]
     }
 
     /// Set the pan/zoom state programmatically
     func setPanZoomState(panX: CGFloat?, panY: CGFloat?, zoomLevel: CGFloat?) {
+        var newTransform = currentTransform
+
         if let zoom = zoomLevel {
-            currentZoom = min(max(zoom, minZoom), maxZoom)
+            let clampedZoom = min(max(zoom, minZoom), maxZoom)
+            let currentScale = currentTransform.scaleX
+            let scaleFactor = clampedZoom / currentScale
+            let center = CGPoint(x: bounds.width / 2, y: bounds.height / 2)
+            newTransform = newTransform.concatenating(
+                CGAffineTransform.anchoredScale(scale: scaleFactor, anchor: center)
+            )
         }
-        if let x = panX {
-            currentPanX = x
-        }
-        if let y = panY {
-            currentPanY = y
+
+        if let x = panX, let y = panY {
+            let scale = newTransform.scaleX
+            if scale > 1.0 {
+                newTransform.tx = -x * bounds.width * (scale - 1)
+                newTransform.ty = -y * bounds.height * (scale - 1)
+            }
         }
 
-        constrainPan()
-        updateLayerTransform()
+        currentTransform = limitTransform(newTransform)
+        gestureStartTransform = currentTransform
+        playerContainerView.transform = currentTransform
         emitPanZoomChange()
     }
 
-    /// Reset pan/zoom to default state
+    /// Reset pan/zoom to default state with animation
     func resetPanZoom() {
-        currentZoom = 1.0
-        currentPanX = 0.0
-        currentPanY = 0.0
-        updateLayerTransform()
-        emitPanZoomChange()
+        UIView.animate(
+            withDuration: 0.2,
+            delay: 0,
+            options: [.allowUserInteraction],
+            animations: {
+                self.playerContainerView.transform = .identity
+            },
+            completion: { _ in
+                self.currentTransform = .identity
+                self.gestureStartTransform = .identity
+                self.emitPanZoomChange()
+            }
+        )
     }
 
     override func layoutSubviews() {
         super.layoutSubviews()
-        playerLayer?.frame = bounds
-        // Reapply transform after frame changes
-        if currentZoom != 1.0 || currentPanX != 0 || currentPanY != 0 {
-            updateLayerTransform()
-        }
+
+        // Important: When a view has a non-identity transform, setting `frame` is undefined behavior.
+        // We must temporarily reset the transform, update bounds/center, then restore it.
+        let savedTransform = playerContainerView.transform
+        playerContainerView.transform = .identity
+
+        playerContainerView.frame = bounds
+        playerLayer?.frame = playerContainerView.bounds
+
+        // Restore the transform
+        playerContainerView.transform = savedTransform
     }
 
     // MARK: - Public Methods (called from module)
 
     func loadComposition(compositionId: String, composition: AVMutableComposition, videoComposition: AVMutableVideoComposition?) {
-        // Clean up previous player
         cleanup()
 
         currentCompositionId = compositionId
         currentAssetId = nil
 
-        // Create player item from composition
         let playerItem = AVPlayerItem(asset: composition)
-
-        // Apply video composition for transforms (mirror, etc.)
         if let videoComposition = videoComposition {
             playerItem.videoComposition = videoComposition
         }
@@ -352,7 +432,6 @@ class ExpoTwoStepVideoView: ExpoView {
     }
 
     func loadAsset(assetId: String, asset: AVAsset) {
-        // Clean up previous player
         cleanup()
 
         currentAssetId = assetId
@@ -363,15 +442,12 @@ class ExpoTwoStepVideoView: ExpoView {
     }
 
     private func setupPlayer(with playerItem: AVPlayerItem) {
-        // Create player
         player = AVPlayer(playerItem: playerItem)
         playerLayer?.player = player
 
-        // Observe playback status (track that we added this observer)
         playerItem.addObserver(self, forKeyPath: "status", options: [.new, .initial], context: nil)
         isObservingStatus = true
 
-        // Observe when playback ends
         NotificationCenter.default.addObserver(
             self,
             selector: #selector(playerDidFinishPlaying),
@@ -379,7 +455,6 @@ class ExpoTwoStepVideoView: ExpoView {
             object: playerItem
         )
 
-        // Add periodic time observer for progress (0.25s interval is sufficient and reduces overhead)
         let interval = CMTime(seconds: 0.25, preferredTimescale: CMTimeScale(NSEC_PER_SEC))
         timeObserver = player?.addPeriodicTimeObserver(forInterval: interval, queue: .main) { [weak self] time in
             guard let self = self,
@@ -400,17 +475,13 @@ class ExpoTwoStepVideoView: ExpoView {
     }
 
     func play() {
-        // Ensure audio session is properly configured before playing
-        // This handles cases where another component may have changed the audio session
         if !isAudioSessionConfigured {
             setupAudioSession()
         } else {
-            // Re-activate in case it was deactivated
             do {
                 try AVAudioSession.sharedInstance().setActive(true, options: [.notifyOthersOnDeactivation])
             } catch {
                 print("ExpoTwoStepVideoView: Failed to activate audio session: \(error)")
-                // Try full reconfiguration
                 setupAudioSession()
             }
         }
@@ -472,7 +543,6 @@ class ExpoTwoStepVideoView: ExpoView {
 
     @objc private func playerDidFinishPlaying() {
         if shouldLoop {
-            // Seek back to start and play again
             player?.seek(to: .zero) { [weak self] _ in
                 self?.player?.play()
             }
@@ -485,24 +555,20 @@ class ExpoTwoStepVideoView: ExpoView {
     // MARK: - Cleanup
 
     private func cleanup() {
-        // Remove time observer first
         if let observer = timeObserver, let player = player {
             player.removeTimeObserver(observer)
         }
         timeObserver = nil
 
-        // Remove KVO observer only if we added it
         if isObservingStatus, let playerItem = player?.currentItem {
             playerItem.removeObserver(self, forKeyPath: "status")
             isObservingStatus = false
         }
 
-        // Remove notification observer
         if let playerItem = player?.currentItem {
             NotificationCenter.default.removeObserver(self, name: .AVPlayerItemDidPlayToEndTime, object: playerItem)
         }
 
-        // Stop and clear player
         player?.pause()
         player?.replaceCurrentItem(with: nil)
         player = nil
@@ -514,10 +580,8 @@ class ExpoTwoStepVideoView: ExpoView {
 
     deinit {
         cleanup()
-        // Remove audio session observers
         NotificationCenter.default.removeObserver(self, name: AVAudioSession.interruptionNotification, object: nil)
         NotificationCenter.default.removeObserver(self, name: AVAudioSession.routeChangeNotification, object: nil)
-        // Also remove the layer to break any potential retain cycles
         playerLayer?.removeFromSuperlayer()
         playerLayer = nil
     }
@@ -528,11 +592,58 @@ class ExpoTwoStepVideoView: ExpoView {
 extension ExpoTwoStepVideoView: UIGestureRecognizerDelegate {
     /// Allow pinch and pan gestures to work simultaneously
     func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
-        // Allow pinch and pan to work together
+        // Allow our pinch and pan to work together
         if (gestureRecognizer == pinchGesture && otherGestureRecognizer == panGesture) ||
            (gestureRecognizer == panGesture && otherGestureRecognizer == pinchGesture) {
             return true
         }
+        // Allow pinch to work simultaneously with external gestures (like ScrollView)
+        if gestureRecognizer == pinchGesture {
+            return true
+        }
+        return false
+    }
+
+    /// Only allow pan gesture when zoomed in
+    override func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
+        if gestureRecognizer == panGesture {
+            // Read from actual view transform to be accurate
+            return playerContainerView.transform.scaleX > 1.01
+        }
+        return true
+    }
+
+    /// Our pinch gesture should take priority over parent scroll view gestures
+    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldBeRequiredToFailBy otherGestureRecognizer: UIGestureRecognizer) -> Bool {
+        // If this is our pinch gesture, don't require it to fail for other gestures
+        if gestureRecognizer == pinchGesture {
+            return false
+        }
+        // If this is our pan gesture and we're zoomed in, don't require it to fail
+        if gestureRecognizer == panGesture && playerContainerView.transform.scaleX > 1.01 {
+            return false
+        }
         return false
     }
 }
+
+// MARK: - CGAffineTransform Extension
+
+extension CGAffineTransform {
+    /// Create a scale transform anchored at a specific point
+    static func anchoredScale(scale: CGFloat, anchor: CGPoint) -> CGAffineTransform {
+        return CGAffineTransform(translationX: anchor.x, y: anchor.y)
+            .scaledBy(x: scale, y: scale)
+            .translatedBy(x: -anchor.x, y: -anchor.y)
+    }
+
+    /// Get the X scale factor from the transform
+    var scaleX: CGFloat {
+        return sqrt(a * a + c * c)
+    }
+
+    /// Get the Y scale factor from the transform
+    var scaleY: CGFloat {
+        return sqrt(b * b + d * d)
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movementinfra/expo-twostep-video",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Minimal video editing for React Native using AVFoundation",
   "main": "build/index.js",
   "types": "build/index.d.ts",