@movementinfra/expo-twostep-video 0.1.9 → 0.1.11

package/ios/ExpoTwoStepVideoView.swift

@@ -11,12 +11,14 @@ class ExpoTwoStepVideoView: ExpoView {
     private var playerLayer: AVPlayerLayer?
     private var timeObserver: Any?
     private var isObservingStatus: Bool = false
+    private var isAudioSessionConfigured: Bool = false
 
     /// Event dispatchers
     let onPlaybackStatusChange = EventDispatcher()
     let onProgress = EventDispatcher()
     let onEnd = EventDispatcher()
     let onError = EventDispatcher()
+    let onPanZoomChange = EventDispatcher()
 
     /// Current composition ID being played
     private var currentCompositionId: String?
@@ -25,6 +27,34 @@ class ExpoTwoStepVideoView: ExpoView {
     /// Whether to loop playback continuously
     var shouldLoop: Bool = false
 
+    // MARK: - Pan/Zoom Properties
+
+    /// Current zoom level (1.0 = no zoom, 2.0 = 2x zoom, etc.)
+    private var currentZoom: CGFloat = 1.0
+
+    /// Current horizontal pan (-1.0 to 1.0, 0 = center)
+    private var currentPanX: CGFloat = 0.0
+
+    /// 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)
+    var minZoom: CGFloat = 1.0
+
+    /// Maximum zoom level (configurable)
+    var maxZoom: CGFloat = 5.0
+
+    /// Gesture recognizers
+    private var pinchGesture: UIPinchGestureRecognizer?
+    private var panGesture: UIPanGestureRecognizer?
+
     // MARK: - Initialization
 
     required init(appContext: AppContext? = nil) {
@@ -32,6 +62,9 @@ class ExpoTwoStepVideoView: ExpoView {
         clipsToBounds = true
         backgroundColor = .black
         setupPlayerLayer()
+        setupAudioSession()
+        setupAudioSessionObservers()
+        setupGestureRecognizers()
     }
 
     private func setupPlayerLayer() {
@@ -43,9 +76,259 @@ class ExpoTwoStepVideoView: ExpoView {
         }
     }
 
+    /// 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)
+                isAudioSessionConfigured = true
+            } catch {
+                print("ExpoTwoStepVideoView: Fallback audio session also failed: \(error)")
+            }
+        }
+    }
+
+    /// Listen for audio session interruptions (phone calls, other apps)
+    private func setupAudioSessionObservers() {
+        NotificationCenter.default.addObserver(
+            self,
+            selector: #selector(handleAudioSessionInterruption),
+            name: AVAudioSession.interruptionNotification,
+            object: AVAudioSession.sharedInstance()
+        )
+
+        NotificationCenter.default.addObserver(
+            self,
+            selector: #selector(handleAudioSessionRouteChange),
+            name: AVAudioSession.routeChangeNotification,
+            object: AVAudioSession.sharedInstance()
+        )
+    }
+
+    @objc private func handleAudioSessionInterruption(notification: Notification) {
+        guard let userInfo = notification.userInfo,
+              let typeValue = userInfo[AVAudioSessionInterruptionTypeKey] as? UInt,
+              let type = AVAudioSession.InterruptionType(rawValue: typeValue) else {
+            return
+        }
+
+        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"])
+            }
+        @unknown default:
+            break
+        }
+    }
+
+    @objc private func handleAudioSessionRouteChange(notification: Notification) {
+        guard let userInfo = notification.userInfo,
+              let reasonValue = userInfo[AVAudioSessionRouteChangeReasonKey] as? UInt,
+              let reason = AVAudioSession.RouteChangeReason(rawValue: reasonValue) else {
+            return
+        }
+
+        // Pause when headphones are unplugged
+        if reason == .oldDeviceUnavailable {
+            player?.pause()
+            onPlaybackStatusChange(["status": "paused"])
+        }
+    }
+
+    // MARK: - Gesture Setup
+
+    private func setupGestureRecognizers() {
+        // Pinch to zoom
+        let pinch = UIPinchGestureRecognizer(target: self, action: #selector(handlePinchGesture(_:)))
+        pinch.delegate = self
+        addGestureRecognizer(pinch)
+        pinchGesture = pinch
+
+        // Pan with 2 fingers (to avoid conflict with single-finger scrubbing)
+        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
+    }
+
+    @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)
+
+            // Constrain pan when zoom changes
+            constrainPan()
+
+            updateLayerTransform()
+            emitPanZoomChange()
+        case .ended, .cancelled:
+            lastPinchScale = 1.0
+        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
+        case .changed:
+            let translation = gesture.translation(in: self)
+
+            // 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
+
+            // 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
+        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
+
+        currentPanX = min(max(currentPanX, -maxPanAmount), maxPanAmount)
+        currentPanY = min(max(currentPanY, -maxPanAmount), maxPanAmount)
+
+        // If not zoomed in, reset pan to center
+        if currentZoom <= 1.0 {
+            currentPanX = 0
+            currentPanY = 0
+        }
+    }
+
+    /// Apply the current pan/zoom transform to the player layer
+    private func updateLayerTransform() {
+        guard let layer = playerLayer else { return }
+
+        var transform = CATransform3DIdentity
+
+        // Apply zoom (scale)
+        transform = CATransform3DScale(transform, currentZoom, currentZoom, 1.0)
+
+        // 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)
+
+        // Apply transform with animation for smoothness
+        CATransaction.begin()
+        CATransaction.setDisableActions(true) // Disable implicit animations for responsiveness
+        layer.transform = transform
+        CATransaction.commit()
+    }
+
+    /// Emit the current pan/zoom state to JavaScript
+    private func emitPanZoomChange() {
+        onPanZoomChange([
+            "panX": currentPanX,
+            "panY": currentPanY,
+            "zoomLevel": currentZoom
+        ])
+    }
+
+    // MARK: - Public Pan/Zoom Methods
+
+    /// Get the current pan/zoom state
+    func getPanZoomState() -> [String: CGFloat] {
+        return [
+            "panX": currentPanX,
+            "panY": currentPanY,
+            "zoomLevel": currentZoom
+        ]
+    }
+
+    /// Set the pan/zoom state programmatically
+    func setPanZoomState(panX: CGFloat?, panY: CGFloat?, zoomLevel: CGFloat?) {
+        if let zoom = zoomLevel {
+            currentZoom = min(max(zoom, minZoom), maxZoom)
+        }
+        if let x = panX {
+            currentPanX = x
+        }
+        if let y = panY {
+            currentPanY = y
+        }
+
+        constrainPan()
+        updateLayerTransform()
+        emitPanZoomChange()
+    }
+
+    /// Reset pan/zoom to default state
+    func resetPanZoom() {
+        currentZoom = 1.0
+        currentPanX = 0.0
+        currentPanY = 0.0
+        updateLayerTransform()
+        emitPanZoomChange()
+    }
+
     override func layoutSubviews() {
         super.layoutSubviews()
         playerLayer?.frame = bounds
+        // Reapply transform after frame changes
+        if currentZoom != 1.0 || currentPanX != 0 || currentPanY != 0 {
+            updateLayerTransform()
+        }
     }
 
     // MARK: - Public Methods (called from module)
@@ -117,6 +400,21 @@ 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()
+            }
+        }
+
         player?.play()
         onPlaybackStatusChange(["status": "playing"])
     }
@@ -216,8 +514,25 @@ 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
     }
 }
+
+// MARK: - UIGestureRecognizerDelegate
+
+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
+        if (gestureRecognizer == pinchGesture && otherGestureRecognizer == panGesture) ||
+           (gestureRecognizer == panGesture && otherGestureRecognizer == pinchGesture) {
+            return true
+        }
+        return false
+    }
+}

package/ios/TwoStepVideo/Core/VideoTransformer.swift

@@ -333,8 +333,175 @@ public class VideoTransformer {
         }
     }
 
+    // MARK: - Pan and Zoom
+
+    /// Create a composition with pan and zoom applied
+    /// - Parameters:
+    ///   - asset: The video asset to transform
+    ///   - panX: Horizontal pan (-1.0 to 1.0, 0 = center)
+    ///   - panY: Vertical pan (-1.0 to 1.0, 0 = center)
+    ///   - zoomLevel: Zoom level (1.0 = 100%, 2.0 = 200%, etc.)
+    ///   - timeRange: Optional time range to apply (nil = full video)
+    /// - Returns: A tuple of (composition, videoComposition) for export
+    /// - Throws: VideoEditingError if pan/zoom fails
+    public func panZoom(
+        asset: VideoAsset,
+        panX: CGFloat,
+        panY: CGFloat,
+        zoomLevel: CGFloat,
+        timeRange: TimeRange? = nil
+    ) async throws -> (AVMutableComposition, AVMutableVideoComposition) {
+        // Validate zoom level
+        guard zoomLevel >= 1.0 && zoomLevel <= 5.0 else {
+            throw VideoEditingError.invalidConfiguration(
+                reason: "Zoom level must be between 1.0 and 5.0"
+            )
+        }
+
+        // Validate pan values
+        guard panX >= -1.0 && panX <= 1.0 && panY >= -1.0 && panY <= 1.0 else {
+            throw VideoEditingError.invalidConfiguration(
+                reason: "Pan values must be between -1.0 and 1.0"
+            )
+        }
+
+        let videoTracks = try await asset.avAsset.loadTracks(withMediaType: .video)
+        guard let sourceVideoTrack = videoTracks.first else {
+            throw VideoEditingError.noVideoTrack
+        }
+
+        let composition = AVMutableComposition()
+
+        // Determine time range
+        let effectiveRange: CMTimeRange
+        if let timeRange = timeRange {
+            try timeRange.validate(against: asset)
+            effectiveRange = timeRange.cmTimeRange
+        } else {
+            effectiveRange = CMTimeRange(start: .zero, duration: asset.duration)
+        }
+
+        // Add video track
+        guard let compositionVideoTrack = composition.addMutableTrack(
+            withMediaType: .video,
+            preferredTrackID: kCMPersistentTrackID_Invalid
+        ) else {
+            throw VideoEditingError.compositionFailed(
+                reason: "Failed to add video track to composition"
+            )
+        }
+
+        do {
+            try compositionVideoTrack.insertTimeRange(
+                effectiveRange,
+                of: sourceVideoTrack,
+                at: .zero
+            )
+        } catch {
+            throw VideoEditingError.compositionFailed(
+                reason: "Failed to insert video track: \(error.localizedDescription)"
+            )
+        }
+
+        // Add audio track if present
+        let audioTracks = try? await asset.avAsset.loadTracks(withMediaType: .audio)
+        if let sourceAudioTrack = audioTracks?.first {
+            if let compositionAudioTrack = composition.addMutableTrack(
+                withMediaType: .audio,
+                preferredTrackID: kCMPersistentTrackID_Invalid
+            ) {
+                try? compositionAudioTrack.insertTimeRange(
+                    effectiveRange,
+                    of: sourceAudioTrack,
+                    at: .zero
+                )
+            }
+        }
+
+        // Get video properties
+        let preferredTransform = try await sourceVideoTrack.load(.preferredTransform)
+        let naturalSize = try await sourceVideoTrack.load(.naturalSize)
+
+        // Calculate the actual render size accounting for the transform
+        let transformedSize = naturalSize.applying(preferredTransform)
+        let renderSize = CGSize(
+            width: abs(transformedSize.width),
+            height: abs(transformedSize.height)
+        )
+
+        // Create video composition for pan/zoom
+        let videoComposition = AVMutableVideoComposition()
+        videoComposition.renderSize = renderSize
+
+        // Get frame rate
+        let frameRate = try await sourceVideoTrack.load(.nominalFrameRate)
+        videoComposition.frameDuration = CMTime(value: 1, timescale: CMTimeScale(frameRate > 0 ? frameRate : 30))
+
+        // Create instruction
+        let instruction = AVMutableVideoCompositionInstruction()
+        instruction.timeRange = CMTimeRange(start: .zero, duration: composition.duration)
+
+        // Create layer instruction with pan/zoom transform
+        let layerInstruction = AVMutableVideoCompositionLayerInstruction(assetTrack: compositionVideoTrack)
+
+        let panZoomTransform = createPanZoomTransform(
+            panX: panX,
+            panY: panY,
+            zoomLevel: zoomLevel,
+            size: renderSize,
+            originalTransform: preferredTransform
+        )
+
+        layerInstruction.setTransform(panZoomTransform, at: .zero)
+
+        instruction.layerInstructions = [layerInstruction]
+        videoComposition.instructions = [instruction]
+
+        return (composition, videoComposition)
+    }
+
     // MARK: - Private Helpers
 
+    /// Create the transform matrix for pan and zoom
+    /// Scales around the center and then applies pan translation
+    private func createPanZoomTransform(
+        panX: CGFloat,
+        panY: CGFloat,
+        zoomLevel: CGFloat,
+        size: CGSize,
+        originalTransform: CGAffineTransform
+    ) -> CGAffineTransform {
+        // Start with the original transform (handles rotation/orientation)
+        var transform = originalTransform
+
+        // Calculate the center of the video
+        let centerX = size.width / 2
+        let centerY = size.height / 2
+
+        // Step 1: Translate so the center is at the origin
+        transform = transform.concatenating(CGAffineTransform(translationX: -centerX, y: -centerY))
+
+        // Step 2: Apply zoom (scale)
+        transform = transform.concatenating(CGAffineTransform(scaleX: zoomLevel, y: zoomLevel))
+
+        // Step 3: Translate back to original position
+        transform = transform.concatenating(CGAffineTransform(translationX: centerX, y: centerY))
+
+        // Step 4: Apply pan translation
+        // Pan range is normalized to how much we can pan while keeping content visible
+        // When zoomed in 2x, we can pan up to half the width/height in each direction
+        let maxPanX = (size.width * zoomLevel - size.width) / 2
+        let maxPanY = (size.height * zoomLevel - size.height) / 2
+
+        // Negative because moving the content right means translating left
+        let translateX = -panX * maxPanX
+        let translateY = -panY * maxPanY
+
+        transform = transform.concatenating(CGAffineTransform(translationX: translateX, y: translateY))
+
+        return transform
+    }
+
     /// Create the transform matrix for mirroring
     private func createMirrorTransform(
         axis: MirrorAxis,

package/package.json

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