@movementinfra/expo-twostep-video 0.1.8 → 0.1.9

package/ios/ExpoTwoStepVideoModule.swift

@@ -622,12 +622,12 @@ public class ExpoTwoStepVideoModule: Module {
 
         // MARK: - Video Player View
 
-        View(ExpoTwostepVideoView.self) {
+        View(ExpoTwoStepVideoView.self) {
             // Events emitted by the view
             Events("onPlaybackStatusChange", "onProgress", "onEnd", "onError")
 
             // Prop to set composition ID - view will load it
-            Prop("compositionId") { (view: ExpoTwostepVideoView, compositionId: String?) in
+            Prop("compositionId") { (view: ExpoTwoStepVideoView, compositionId: String?) in
                 guard let compositionId = compositionId else { return }
                 guard let composition = self.activeCompositions[compositionId] else {
                     view.onError(["error": "Composition not found: \(compositionId)"])
@@ -638,7 +638,7 @@ public class ExpoTwoStepVideoModule: Module {
             }
 
             // Prop to set asset ID - view will load it for preview
-            Prop("assetId") { (view: ExpoTwostepVideoView, assetId: String?) in
+            Prop("assetId") { (view: ExpoTwoStepVideoView, assetId: String?) in
                 guard let assetId = assetId else { return }
                 guard let asset = self.activeAssets[assetId] else {
                     view.onError(["error": "Asset not found: \(assetId)"])
@@ -648,27 +648,91 @@ public class ExpoTwoStepVideoModule: Module {
             }
 
             // Prop to enable continuous looping
-            Prop("loop") { (view: ExpoTwostepVideoView, loop: Bool?) in
+            Prop("loop") { (view: ExpoTwoStepVideoView, loop: Bool?) in
                 view.shouldLoop = loop ?? false
             }
 
             // Playback control functions
-            AsyncFunction("play") { (view: ExpoTwostepVideoView) in
+            AsyncFunction("play") { (view: ExpoTwoStepVideoView) in
                 view.play()
             }
 
-            AsyncFunction("pause") { (view: ExpoTwostepVideoView) in
+            AsyncFunction("pause") { (view: ExpoTwoStepVideoView) in
                 view.pause()
             }
 
-            AsyncFunction("seek") { (view: ExpoTwostepVideoView, time: Double) in
+            AsyncFunction("seek") { (view: ExpoTwoStepVideoView, time: Double) in
                 view.seek(to: time)
             }
 
-            AsyncFunction("replay") { (view: ExpoTwostepVideoView) in
+            AsyncFunction("replay") { (view: ExpoTwoStepVideoView) in
                 view.replay()
             }
         }
+
+        // MARK: - Video Player Controller View (with native controls)
+
+        View(ExpoTwoStepPlayerControllerView.self) {
+            // Events emitted by the view
+            Events("onPlaybackStatusChange", "onProgress", "onEnd", "onError")
+
+            // Prop to set composition ID - view will load it
+            Prop("compositionId") { (view: ExpoTwoStepPlayerControllerView, compositionId: String?) in
+                guard let compositionId = compositionId else { return }
+                guard let composition = self.activeCompositions[compositionId] else {
+                    view.onError(["error": "Composition not found: \(compositionId)"])
+                    return
+                }
+                let videoComposition = self.activeVideoCompositions[compositionId]
+                view.loadComposition(compositionId: compositionId, composition: composition, videoComposition: videoComposition)
+            }
+
+            // Prop to set asset ID - view will load it for preview
+            Prop("assetId") { (view: ExpoTwoStepPlayerControllerView, assetId: String?) in
+                guard let assetId = assetId else { return }
+                guard let asset = self.activeAssets[assetId] else {
+                    view.onError(["error": "Asset not found: \(assetId)"])
+                    return
+                }
+                view.loadAsset(assetId: assetId, asset: asset.avAsset)
+            }
+
+            // Prop to enable continuous looping
+            Prop("loop") { (view: ExpoTwoStepPlayerControllerView, loop: Bool?) in
+                view.shouldLoop = loop ?? false
+            }
+
+            // Prop to show/hide native playback controls
+            Prop("showsPlaybackControls") { (view: ExpoTwoStepPlayerControllerView, show: Bool?) in
+                view.showsPlaybackControls = show ?? true
+            }
+
+            // Playback control functions
+            AsyncFunction("play") { (view: ExpoTwoStepPlayerControllerView) in
+                view.play()
+            }
+
+            AsyncFunction("pause") { (view: ExpoTwoStepPlayerControllerView) in
+                view.pause()
+            }
+
+            AsyncFunction("seek") { (view: ExpoTwoStepPlayerControllerView, time: Double) in
+                view.seek(to: time)
+            }
+
+            AsyncFunction("replay") { (view: ExpoTwoStepPlayerControllerView) in
+                view.replay()
+            }
+
+            // Fullscreen functions
+            AsyncFunction("enterFullscreen") { (view: ExpoTwoStepPlayerControllerView) in
+                view.enterFullscreen()
+            }
+
+            AsyncFunction("exitFullscreen") { (view: ExpoTwoStepPlayerControllerView) in
+                view.exitFullscreen()
+            }
+        }
     }
 
     // MARK: - Private Helper Methods

package/ios/ExpoTwoStepVideoView.swift

@@ -3,7 +3,7 @@ import AVFoundation
 import UIKit
 
 /// Native video player view that can play compositions directly
-class ExpoTwostepVideoView: ExpoView {
+class ExpoTwoStepVideoView: ExpoView {
 
     // MARK: - Properties
 

package/ios/ExpoTwostepPlayerControllerView.swift

@@ -0,0 +1,297 @@
+import ExpoModulesCore
+import AVFoundation
+import AVKit
+import UIKit
+
+/// Native video player view using AVPlayerViewController with built-in controls and fullscreen support
+class ExpoTwoStepPlayerControllerView: ExpoView {
+
+    // MARK: - Properties
+
+    private var playerViewController: AVPlayerViewController?
+    private var player: AVPlayer?
+    private var timeObserver: Any?
+    private var isObservingStatus: Bool = false
+    private var hostingViewController: UIViewController?
+
+    /// Event dispatchers
+    let onPlaybackStatusChange = EventDispatcher()
+    let onProgress = EventDispatcher()
+    let onEnd = EventDispatcher()
+    let onError = EventDispatcher()
+
+    /// Current composition/asset IDs being played
+    private var currentCompositionId: String?
+    private var currentAssetId: String?
+
+    /// Whether to loop playback continuously
+    var shouldLoop: Bool = false
+
+    /// Whether to show native playback controls
+    var showsPlaybackControls: Bool = true {
+        didSet {
+            playerViewController?.showsPlaybackControls = showsPlaybackControls
+        }
+    }
+
+    // MARK: - Initialization
+
+    required init(appContext: AppContext? = nil) {
+        super.init(appContext: appContext)
+        clipsToBounds = true
+        backgroundColor = .black
+        setupPlayerViewController()
+    }
+
+    private func setupPlayerViewController() {
+        let pvc = AVPlayerViewController()
+        pvc.showsPlaybackControls = showsPlaybackControls
+        pvc.videoGravity = .resizeAspect
+        playerViewController = pvc
+
+        // Add the view - defer view controller containment until we have a window
+        pvc.view.frame = bounds
+        pvc.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        addSubview(pvc.view)
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        playerViewController?.view.frame = bounds
+    }
+
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+
+        // When added to window, find hosting view controller for proper containment
+        if window != nil, hostingViewController == nil {
+            if let vc = findViewController() {
+                hostingViewController = vc
+                if let pvc = playerViewController {
+                    vc.addChild(pvc)
+                    pvc.didMove(toParent: vc)
+                }
+            }
+        }
+    }
+
+    private func findViewController() -> UIViewController? {
+        var responder: UIResponder? = self
+        while let next = responder?.next {
+            if let vc = next as? UIViewController {
+                return vc
+            }
+            responder = next
+        }
+        return nil
+    }
+
+    // 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
+        }
+
+        setupPlayer(with: playerItem)
+    }
+
+    func loadAsset(assetId: String, asset: AVAsset) {
+        // Clean up previous player
+        cleanup()
+
+        currentAssetId = assetId
+        currentCompositionId = nil
+
+        let playerItem = AVPlayerItem(asset: asset)
+        setupPlayer(with: playerItem)
+    }
+
+    private func setupPlayer(with playerItem: AVPlayerItem) {
+        // Create player
+        player = AVPlayer(playerItem: playerItem)
+        playerViewController?.player = player
+
+        // Observe playback status
+        playerItem.addObserver(self, forKeyPath: "status", options: [.new, .initial], context: nil)
+        isObservingStatus = true
+
+        // Observe when playback ends
+        NotificationCenter.default.addObserver(
+            self,
+            selector: #selector(playerDidFinishPlaying),
+            name: .AVPlayerItemDidPlayToEndTime,
+            object: playerItem
+        )
+
+        // Add periodic time observer for progress
+        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,
+                  let duration = self.player?.currentItem?.duration,
+                  duration.isNumeric && !duration.isIndefinite else { return }
+
+            let currentTime = CMTimeGetSeconds(time)
+            let totalDuration = CMTimeGetSeconds(duration)
+
+            self.onProgress([
+                "currentTime": currentTime,
+                "duration": totalDuration,
+                "progress": totalDuration > 0 ? currentTime / totalDuration : 0
+            ])
+        }
+
+        onPlaybackStatusChange(["status": "ready"])
+    }
+
+    func play() {
+        player?.play()
+        onPlaybackStatusChange(["status": "playing"])
+    }
+
+    func pause() {
+        player?.pause()
+        onPlaybackStatusChange(["status": "paused"])
+    }
+
+    func seek(to time: Double) {
+        let cmTime = CMTime(seconds: time, preferredTimescale: CMTimeScale(NSEC_PER_SEC))
+        player?.seek(to: cmTime, toleranceBefore: .zero, toleranceAfter: .zero) { [weak self] finished in
+            if finished {
+                self?.onPlaybackStatusChange(["status": "seeked", "time": time])
+            }
+        }
+    }
+
+    func replay() {
+        seek(to: 0)
+        play()
+    }
+
+    func enterFullscreen() {
+        // Present player view controller modally for fullscreen experience
+        guard let hostVC = hostingViewController ?? findViewController(),
+              let player = player else { return }
+
+        let fullscreenVC = AVPlayerViewController()
+        fullscreenVC.player = player
+        fullscreenVC.showsPlaybackControls = true
+        fullscreenVC.modalPresentationStyle = .fullScreen
+
+        // Track playback position and state before presenting
+        let currentTime = player.currentTime()
+        let wasPlaying = player.rate != 0
+
+        hostVC.present(fullscreenVC, animated: true) {
+            // Restore playback position and state
+            fullscreenVC.player?.seek(to: currentTime)
+            if wasPlaying {
+                fullscreenVC.player?.play()
+            }
+        }
+    }
+
+    func exitFullscreen() {
+        // The fullscreen presentation is dismissed by the user via the player controls
+        // or by swiping down. We can also dismiss programmatically if needed.
+        guard let hostVC = hostingViewController ?? findViewController(),
+              hostVC.presentedViewController is AVPlayerViewController else { return }
+
+        hostVC.dismiss(animated: true)
+    }
+
+    var isPlaying: Bool {
+        return player?.rate != 0 && player?.error == nil
+    }
+
+    var currentTime: Double {
+        guard let time = player?.currentTime() else { return 0 }
+        return CMTimeGetSeconds(time)
+    }
+
+    var duration: Double {
+        guard let duration = player?.currentItem?.duration,
+              duration.isNumeric && !duration.isIndefinite else { return 0 }
+        return CMTimeGetSeconds(duration)
+    }
+
+    // MARK: - Observers
+
+    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
+        if keyPath == "status" {
+            if let playerItem = object as? AVPlayerItem {
+                switch playerItem.status {
+                case .readyToPlay:
+                    onPlaybackStatusChange(["status": "ready"])
+                case .failed:
+                    onError(["error": playerItem.error?.localizedDescription ?? "Unknown error"])
+                default:
+                    break
+                }
+            }
+        }
+    }
+
+    @objc private func playerDidFinishPlaying() {
+        if shouldLoop {
+            player?.seek(to: .zero) { [weak self] _ in
+                self?.player?.play()
+            }
+        } else {
+            onEnd([:])
+            onPlaybackStatusChange(["status": "ended"])
+        }
+    }
+
+    // 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
+        playerViewController?.player = nil
+
+        currentCompositionId = nil
+        currentAssetId = nil
+    }
+
+    deinit {
+        cleanup()
+
+        // Remove from parent view controller
+        if let pvc = playerViewController {
+            pvc.willMove(toParent: nil)
+            pvc.view.removeFromSuperview()
+            pvc.removeFromParent()
+        }
+        playerViewController = nil
+    }
+}

package/package.json

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