feat: KSPlayer as an option for iOS + other improvements (#1266)

modules/mpv-player/android/build.gradle

@@ -0,0 +1,43 @@
+apply plugin: 'com.android.library'
+
+group = 'expo.modules.mpvplayer'
+version = '0.7.6'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useCoreDependencies()
+useExpoPublishing()
+
+// If you want to use the managed Android SDK versions from expo-modules-core, set this to true.
+// The Android SDK versions will be bumped from time to time in SDK releases and may introduce breaking changes in your module code.
+// Most of the time, you may like to manage the Android SDK versions yourself.
+def useManagedAndroidSdkVersions = false
+if (useManagedAndroidSdkVersions) {
+  useDefaultAndroidSdkVersions()
+} else {
+  buildscript {
+    // Simple helper that allows the root project to override versions declared by this library.
+    ext.safeExtGet = { prop, fallback ->
+      rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+  }
+  project.android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 36)
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 24)
+      targetSdkVersion safeExtGet("targetSdkVersion", 36)
+    }
+  }
+}
+
+android {
+  namespace "expo.modules.mpvplayer"
+  defaultConfig {
+    versionCode 1
+    versionName "0.7.6"
+  }
+  lintOptions {
+    abortOnError false
+  }
+}

modules/mpv-player/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MpvPlayerModule.kt

@@ -0,0 +1,50 @@
+package expo.modules.mpvplayer
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+import java.net.URL
+
+class MpvPlayerModule : Module() {
+  // Each module class must implement the definition function. The definition consists of components
+  // that describes the module's functionality and behavior.
+  // See https://docs.expo.dev/modules/module-api for more details about available components.
+  override fun definition() = ModuleDefinition {
+    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
+    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
+    // The module will be accessible from `requireNativeModule('MpvPlayer')` in JavaScript.
+    Name("MpvPlayer")
+
+    // Defines constant property on the module.
+    Constant("PI") {
+      Math.PI
+    }
+
+    // Defines event names that the module can send to JavaScript.
+    Events("onChange")
+
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      "Hello world! 👋"
+    }
+
+    // Defines a JavaScript function that always returns a Promise and whose native code
+    // is by default dispatched on the different thread than the JavaScript runtime runs on.
+    AsyncFunction("setValueAsync") { value: String ->
+      // Send an event to JavaScript.
+      sendEvent("onChange", mapOf(
+        "value" to value
+      ))
+    }
+
+    // Enables the module to be used as a native view. Definition components that are accepted as part of
+    // the view definition: Prop, Events.
+    View(MpvPlayerView::class) {
+      // Defines a setter for the `url` prop.
+      Prop("url") { view: MpvPlayerView, url: URL ->
+        view.webView.loadUrl(url.toString())
+      }
+      // Defines an event that the view can send to JavaScript.
+      Events("onLoad")
+    }
+  }
+}

modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MpvPlayerView.kt

@@ -0,0 +1,30 @@
+package expo.modules.mpvplayer
+
+import android.content.Context
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  // Creates and initializes an event dispatcher for the `onLoad` event.
+  // The name of the event is inferred from the value and needs to match the event name defined in the module.
+  private val onLoad by EventDispatcher()
+
+  // Defines a WebView that will be used as the root subview.
+  internal val webView = WebView(context).apply {
+    layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+    webViewClient = object : WebViewClient() {
+      override fun onPageFinished(view: WebView, url: String) {
+        // Sends an event to JavaScript. Triggers a callback defined on the view component in JavaScript.
+        onLoad(mapOf("url" to url))
+      }
+    }
+  }
+
+  init {
+    // Adds the WebView to the view hierarchy.
+    addView(webView)
+  }
+}

modules/mpv-player/expo-module.config.json

@@ -0,0 +1,6 @@
+{
+  "platforms": ["android", "web"],
+  "android": {
+    "modules": ["expo.modules.mpvplayer.MpvPlayerModule"]
+  }
+}

modules/mpv-player/index.ts

@@ -0,0 +1,6 @@
+// Reexport the native module. On web, it will be resolved to MpvPlayerModule.web.ts
+// and on native platforms to MpvPlayerModule.ts
+
+export * from "./src/MpvPlayer.types";
+export { default } from "./src/MpvPlayerModule";
+export { default as MpvPlayerView } from "./src/MpvPlayerView";

modules/mpv-player/ios/Logger.swift

@@ -0,0 +1,154 @@
+import Foundation
+
+class Logger {
+    static let shared = Logger()
+    
+    struct LogEntry {
+        let message: String
+        let type: String
+        let timestamp: Date
+    }
+    
+    private let queue = DispatchQueue(label: "mpvkit.logger", attributes: .concurrent)
+    private var logs: [LogEntry] = []
+    private let logFileURL: URL
+    
+    private let maxFileSize = 1024 * 512
+    private let maxLogEntries = 1000
+    
+    private init() {
+        let tmpDir = URL(fileURLWithPath: NSTemporaryDirectory(), isDirectory: true)
+        logFileURL = tmpDir.appendingPathComponent("logs.txt")
+    }
+    
+    func log(_ message: String, type: String = "General") {
+        let entry = LogEntry(message: message, type: type, timestamp: Date())
+        
+        queue.async(flags: .barrier) {
+            self.logs.append(entry)
+            
+            if self.logs.count > self.maxLogEntries {
+                self.logs.removeFirst(self.logs.count - self.maxLogEntries)
+            }
+            
+            self.saveLogToFile(entry)
+            self.debugLog(entry)
+            
+            DispatchQueue.main.async {
+                NotificationCenter.default.post(name: NSNotification.Name("LoggerNotification"), object: nil,
+                                                userInfo: [
+                                                    "message": message,
+                                                    "type": type,
+                                                    "timestamp": entry.timestamp
+                                                ]
+                )
+            }
+        }
+    }
+    
+    func getLogs() -> String {
+        var result = ""
+        queue.sync {
+            let dateFormatter = DateFormatter()
+            dateFormatter.dateFormat = "dd-MM HH:mm:ss"
+            result = logs.map { "[\(dateFormatter.string(from: $0.timestamp))] [\($0.type)] \($0.message)" }
+                .joined(separator: "\n----\n")
+        }
+        return result
+    }
+    
+    func getLogsAsync() async -> String {
+        return await withCheckedContinuation { continuation in
+            queue.async {
+                let dateFormatter = DateFormatter()
+                dateFormatter.dateFormat = "dd-MM HH:mm:ss"
+                let result = self.logs.map { "[\(dateFormatter.string(from: $0.timestamp))] [\($0.type)] \($0.message)" }
+                    .joined(separator: "\n----\n")
+                continuation.resume(returning: result)
+            }
+        }
+    }
+    
+    func clearLogs() {
+        queue.async(flags: .barrier) {
+            self.logs.removeAll()
+            try? FileManager.default.removeItem(at: self.logFileURL)
+        }
+    }
+    
+    func clearLogsAsync() async {
+        await withCheckedContinuation { continuation in
+            queue.async(flags: .barrier) {
+                self.logs.removeAll()
+                try? FileManager.default.removeItem(at: self.logFileURL)
+                continuation.resume()
+            }
+        }
+    }
+    
+    private func saveLogToFile(_ log: LogEntry) {
+        let dateFormatter = DateFormatter()
+        dateFormatter.dateFormat = "dd-MM HH:mm:ss"
+        
+        let logString = "[\(dateFormatter.string(from: log.timestamp))] [\(log.type)] \(log.message)\n---\n"
+        
+        guard let data = logString.data(using: .utf8) else {
+            print("Failed to encode log string to UTF-8")
+            return
+        }
+        
+        do {
+            if FileManager.default.fileExists(atPath: logFileURL.path) {
+                let attributes = try FileManager.default.attributesOfItem(atPath: logFileURL.path)
+                let fileSize = attributes[.size] as? UInt64 ?? 0
+                
+                if fileSize + UInt64(data.count) > maxFileSize {
+                    self.truncateLogFile()
+                }
+                
+                if let handle = try? FileHandle(forWritingTo: logFileURL) {
+                    handle.seekToEndOfFile()
+                    handle.write(data)
+                    handle.closeFile()
+                }
+            } else {
+                try data.write(to: logFileURL)
+            }
+        } catch {
+            print("Error managing log file: \(error)")
+            try? data.write(to: logFileURL)
+        }
+    }
+    
+    private func truncateLogFile() {
+        do {
+            guard let content = try? String(contentsOf: logFileURL, encoding: .utf8),
+                  !content.isEmpty else {
+                return
+            }
+            
+            let entries = content.components(separatedBy: "\n---\n")
+            guard entries.count > 10 else { return }
+            
+            let keepCount = entries.count / 2
+            let truncatedEntries = Array(entries.suffix(keepCount))
+            let truncatedContent = truncatedEntries.joined(separator: "\n---\n")
+            
+            if let truncatedData = truncatedContent.data(using: .utf8) {
+                try truncatedData.write(to: logFileURL)
+            }
+        } catch {
+            print("Error truncating log file: \(error)")
+            try? FileManager.default.removeItem(at: logFileURL)
+        }
+    }
+    
+    private func debugLog(_ entry: LogEntry) {
+#if DEBUG
+        let dateFormatter = DateFormatter()
+        dateFormatter.dateFormat = "dd-MM HH:mm:ss"
+        let formattedMessage = "[\(dateFormatter.string(from: entry.timestamp))] [\(entry.type)] \(entry.message)"
+        print(formattedMessage)
+#endif
+    }
+}

modules/mpv-player/ios/MpvPlayer.podspec

@@ -0,0 +1,28 @@
+Pod::Spec.new do |s|
+  s.name           = 'MpvPlayer'
+  s.version        = '1.0.0'
+  s.summary        = 'MPVKit for Expo'
+  s.description    = 'MPVKit for Expo'
+  s.author         = 'mpvkit'
+  s.homepage       = 'https://github.com/mpvkit/MPVKit'
+  s.platforms      = {
+    :ios => '15.1',
+    :tvos => '15.1'
+  }
+  s.source         = { git: 'https://github.com/mpvkit/MPVKit.git' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+  s.dependency 'MPVKit', '~> 0.40.0'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    # Strip debug symbols to avoid DWARF errors from MPVKit
+    'DEBUG_INFORMATION_FORMAT' => 'dwarf',
+    'STRIP_INSTALLED_PRODUCT' => 'YES',
+    'DEPLOYMENT_POSTPROCESSING' => 'YES',
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

modules/mpv-player/ios/MpvPlayerModule.swift

@@ -0,0 +1,171 @@
+import ExpoModulesCore
+
+public class MpvPlayerModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("MpvPlayer")
+
+    // Defines event names that the module can send to JavaScript.
+    Events("onChange")
+
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      return "Hello from MPV Player! 👋"
+    }
+
+    // Defines a JavaScript function that always returns a Promise and whose native code
+    // is by default dispatched on the different thread than the JavaScript runtime runs on.
+    AsyncFunction("setValueAsync") { (value: String) in
+      // Send an event to JavaScript.
+      self.sendEvent("onChange", [
+        "value": value
+      ])
+    }
+
+    // Enables the module to be used as a native view. Definition components that are accepted as part of the
+    // view definition: Prop, Events.
+    View(MpvPlayerView.self) {
+      // All video load options are passed via a single "source" prop
+      Prop("source") { (view: MpvPlayerView, source: [String: Any]?) in
+        guard let source = source,
+              let urlString = source["url"] as? String,
+              let videoURL = URL(string: urlString) else { return }
+        
+        let config = VideoLoadConfig(
+          url: videoURL,
+          headers: source["headers"] as? [String: String],
+          externalSubtitles: source["externalSubtitles"] as? [String],
+          startPosition: source["startPosition"] as? Double,
+          autoplay: (source["autoplay"] as? Bool) ?? true,
+          initialSubtitleId: source["initialSubtitleId"] as? Int,
+          initialAudioId: source["initialAudioId"] as? Int
+        )
+        
+        view.loadVideo(config: config)
+      }
+
+      // Async function to play video
+      AsyncFunction("play") { (view: MpvPlayerView) in
+        view.play()
+      }
+      
+      // Async function to pause video
+      AsyncFunction("pause") { (view: MpvPlayerView) in
+        view.pause()
+      }
+      
+      // Async function to seek to position
+      AsyncFunction("seekTo") { (view: MpvPlayerView, position: Double) in
+        view.seekTo(position: position)
+      }
+      
+      // Async function to seek by offset
+      AsyncFunction("seekBy") { (view: MpvPlayerView, offset: Double) in
+        view.seekBy(offset: offset)
+      }
+      
+      // Async function to set playback speed
+      AsyncFunction("setSpeed") { (view: MpvPlayerView, speed: Double) in
+        view.setSpeed(speed: speed)
+      }
+      
+      // Function to get current speed
+      AsyncFunction("getSpeed") { (view: MpvPlayerView) -> Double in
+        return view.getSpeed()
+      }
+      
+      // Function to check if paused
+      AsyncFunction("isPaused") { (view: MpvPlayerView) -> Bool in
+        return view.isPaused()
+      }
+      
+      // Function to get current position
+      AsyncFunction("getCurrentPosition") { (view: MpvPlayerView) -> Double in
+        return view.getCurrentPosition()
+      }
+      
+      // Function to get duration
+      AsyncFunction("getDuration") { (view: MpvPlayerView) -> Double in
+        return view.getDuration()
+      }
+
+      // Picture in Picture functions
+      AsyncFunction("startPictureInPicture") { (view: MpvPlayerView) in
+        view.startPictureInPicture()
+      }
+      
+      AsyncFunction("stopPictureInPicture") { (view: MpvPlayerView) in
+        view.stopPictureInPicture()
+      }
+      
+      AsyncFunction("isPictureInPictureSupported") { (view: MpvPlayerView) -> Bool in
+        return view.isPictureInPictureSupported()
+      }
+      
+      AsyncFunction("isPictureInPictureActive") { (view: MpvPlayerView) -> Bool in
+        return view.isPictureInPictureActive()
+      }
+      
+      // Subtitle functions
+      AsyncFunction("getSubtitleTracks") { (view: MpvPlayerView) -> [[String: Any]] in
+        return view.getSubtitleTracks()
+      }
+      
+      AsyncFunction("setSubtitleTrack") { (view: MpvPlayerView, trackId: Int) in
+        view.setSubtitleTrack(trackId)
+      }
+      
+      AsyncFunction("disableSubtitles") { (view: MpvPlayerView) in
+        view.disableSubtitles()
+      }
+      
+      AsyncFunction("getCurrentSubtitleTrack") { (view: MpvPlayerView) -> Int in
+        return view.getCurrentSubtitleTrack()
+      }
+      
+      AsyncFunction("addSubtitleFile") { (view: MpvPlayerView, url: String, select: Bool) in
+        view.addSubtitleFile(url: url, select: select)
+      }
+      
+      // Subtitle positioning functions
+      AsyncFunction("setSubtitlePosition") { (view: MpvPlayerView, position: Int) in
+        view.setSubtitlePosition(position)
+      }
+      
+      AsyncFunction("setSubtitleScale") { (view: MpvPlayerView, scale: Double) in
+        view.setSubtitleScale(scale)
+      }
+      
+      AsyncFunction("setSubtitleMarginY") { (view: MpvPlayerView, margin: Int) in
+        view.setSubtitleMarginY(margin)
+      }
+      
+      AsyncFunction("setSubtitleAlignX") { (view: MpvPlayerView, alignment: String) in
+        view.setSubtitleAlignX(alignment)
+      }
+      
+      AsyncFunction("setSubtitleAlignY") { (view: MpvPlayerView, alignment: String) in
+        view.setSubtitleAlignY(alignment)
+      }
+      
+      AsyncFunction("setSubtitleFontSize") { (view: MpvPlayerView, size: Int) in
+        view.setSubtitleFontSize(size)
+      }
+      
+      // Audio track functions
+      AsyncFunction("getAudioTracks") { (view: MpvPlayerView) -> [[String: Any]] in
+        return view.getAudioTracks()
+      }
+      
+      AsyncFunction("setAudioTrack") { (view: MpvPlayerView, trackId: Int) in
+        view.setAudioTrack(trackId)
+      }
+      
+      AsyncFunction("getCurrentAudioTrack") { (view: MpvPlayerView) -> Int in
+        return view.getCurrentAudioTrack()
+      }
+
+      // Defines events that the view can send to JavaScript
+      Events("onLoad", "onPlaybackStateChange", "onProgress", "onError", "onTracksReady")
+    }
+  }
+}

modules/mpv-player/ios/MpvPlayerView.swift

@@ -0,0 +1,397 @@
+import AVFoundation
+import CoreMedia
+import ExpoModulesCore
+import UIKit
+
+/// Configuration for loading a video
+struct VideoLoadConfig {
+	let url: URL
+	var headers: [String: String]?
+	var externalSubtitles: [String]?
+	var startPosition: Double?
+	var autoplay: Bool
+	/// MPV subtitle track ID to select on start (1-based, -1 to disable, nil to use default)
+	var initialSubtitleId: Int?
+	/// MPV audio track ID to select on start (1-based, nil to use default)
+	var initialAudioId: Int?
+	
+	init(
+		url: URL,
+		headers: [String: String]? = nil,
+		externalSubtitles: [String]? = nil,
+		startPosition: Double? = nil,
+		autoplay: Bool = true,
+		initialSubtitleId: Int? = nil,
+		initialAudioId: Int? = nil
+	) {
+		self.url = url
+		self.headers = headers
+		self.externalSubtitles = externalSubtitles
+		self.startPosition = startPosition
+		self.autoplay = autoplay
+		self.initialSubtitleId = initialSubtitleId
+		self.initialAudioId = initialAudioId
+	}
+}
+
+// This view will be used as a native component. Make sure to inherit from `ExpoView`
+// to apply the proper styling (e.g. border radius and shadows).
+class MpvPlayerView: ExpoView {
+	private let displayLayer = AVSampleBufferDisplayLayer()
+	private var renderer: MPVSoftwareRenderer?
+	private var videoContainer: UIView!
+	private var pipController: PiPController?
+
+	let onLoad = EventDispatcher()
+	let onPlaybackStateChange = EventDispatcher()
+	let onProgress = EventDispatcher()
+	let onError = EventDispatcher()
+	let onTracksReady = EventDispatcher()
+
+	private var currentURL: URL?
+	private var cachedPosition: Double = 0
+	private var cachedDuration: Double = 0
+	private var intendedPlayState: Bool = false  // For PiP - ignores transient states during seek
+
+	required init(appContext: AppContext? = nil) {
+		super.init(appContext: appContext)
+		setupView()
+	}
+
+	private func setupView() {
+		clipsToBounds = true
+		backgroundColor = .black
+
+		videoContainer = UIView()
+		videoContainer.translatesAutoresizingMaskIntoConstraints = false
+		videoContainer.backgroundColor = .black
+		videoContainer.clipsToBounds = true
+		addSubview(videoContainer)
+
+		displayLayer.frame = bounds
+		displayLayer.videoGravity = .resizeAspect
+		if #available(iOS 17.0, *) {
+			displayLayer.wantsExtendedDynamicRangeContent = true
+		}
+		displayLayer.backgroundColor = UIColor.black.cgColor
+		videoContainer.layer.addSublayer(displayLayer)
+
+		NSLayoutConstraint.activate([
+			videoContainer.topAnchor.constraint(equalTo: topAnchor),
+			videoContainer.leadingAnchor.constraint(equalTo: leadingAnchor),
+			videoContainer.trailingAnchor.constraint(equalTo: trailingAnchor),
+			videoContainer.bottomAnchor.constraint(equalTo: bottomAnchor)
+		])
+
+		renderer = MPVSoftwareRenderer(displayLayer: displayLayer)
+		renderer?.delegate = self
+
+		// Setup PiP
+		pipController = PiPController(sampleBufferDisplayLayer: displayLayer)
+		pipController?.delegate = self
+
+		do {
+			try renderer?.start()
+		} catch {
+			onError(["error": "Failed to start renderer: \(error.localizedDescription)"])
+		}
+	}
+
+	override func layoutSubviews() {
+		super.layoutSubviews()
+		CATransaction.begin()
+		CATransaction.setDisableActions(true)
+		displayLayer.frame = videoContainer.bounds
+		displayLayer.isHidden = false
+		displayLayer.opacity = 1.0
+		CATransaction.commit()
+	}
+
+	func loadVideo(config: VideoLoadConfig) {
+		// Skip reload if same URL is already playing
+		if currentURL == config.url {
+			return
+		}
+		currentURL = config.url
+
+		let preset = PlayerPreset(
+			id: .sdrRec709,
+			title: "Default",
+			summary: "Default playback preset",
+			stream: nil,
+			commands: []
+		)
+
+		// Pass everything to the renderer - it handles start position and external subs
+		renderer?.load(
+			url: config.url,
+			with: preset,
+			headers: config.headers,
+			startPosition: config.startPosition,
+			externalSubtitles: config.externalSubtitles,
+			initialSubtitleId: config.initialSubtitleId,
+			initialAudioId: config.initialAudioId
+		)
+		
+		if config.autoplay {
+			play()
+		}
+		
+		onLoad(["url": config.url.absoluteString])
+	}
+	
+	// Convenience method for simple loads
+	func loadVideo(url: URL, headers: [String: String]? = nil) {
+		loadVideo(config: VideoLoadConfig(url: url, headers: headers))
+	}
+
+	func play() {
+		intendedPlayState = true
+		renderer?.play()
+		pipController?.updatePlaybackState()
+	}
+
+	func pause() {
+		intendedPlayState = false
+		renderer?.pausePlayback()
+		pipController?.updatePlaybackState()
+	}
+
+	func seekTo(position: Double) {
+		renderer?.seek(to: position)
+	}
+
+	func seekBy(offset: Double) {
+		renderer?.seek(by: offset)
+	}
+
+	func setSpeed(speed: Double) {
+		renderer?.setSpeed(speed)
+	}
+
+	func getSpeed() -> Double {
+		return renderer?.getSpeed() ?? 1.0
+	}
+
+	func isPaused() -> Bool {
+		return renderer?.isPausedState ?? true
+	}
+
+	func getCurrentPosition() -> Double {
+		return cachedPosition
+	}
+
+	func getDuration() -> Double {
+		return cachedDuration
+	}
+
+	// MARK: - Picture in Picture
+
+	func startPictureInPicture() {
+		print("🎬 MpvPlayerView: startPictureInPicture called")
+		print("🎬 Duration: \(getDuration()), IsPlaying: \(!isPaused())")
+		pipController?.startPictureInPicture()
+	}
+
+	func stopPictureInPicture() {
+		pipController?.stopPictureInPicture()
+	}
+
+	func isPictureInPictureSupported() -> Bool {
+		return pipController?.isPictureInPictureSupported ?? false
+	}
+
+	func isPictureInPictureActive() -> Bool {
+		return pipController?.isPictureInPictureActive ?? false
+	}
+	
+	// MARK: - Subtitle Controls
+	
+	func getSubtitleTracks() -> [[String: Any]] {
+		return renderer?.getSubtitleTracks() ?? []
+	}
+	
+	func setSubtitleTrack(_ trackId: Int) {
+		renderer?.setSubtitleTrack(trackId)
+	}
+	
+	func disableSubtitles() {
+		renderer?.disableSubtitles()
+	}
+	
+	func getCurrentSubtitleTrack() -> Int {
+		return renderer?.getCurrentSubtitleTrack() ?? 0
+	}
+	
+	func addSubtitleFile(url: String, select: Bool = true) {
+		renderer?.addSubtitleFile(url: url, select: select)
+	}
+	
+	// MARK: - Audio Track Controls
+	
+	func getAudioTracks() -> [[String: Any]] {
+		return renderer?.getAudioTracks() ?? []
+	}
+	
+	func setAudioTrack(_ trackId: Int) {
+		renderer?.setAudioTrack(trackId)
+	}
+	
+	func getCurrentAudioTrack() -> Int {
+		return renderer?.getCurrentAudioTrack() ?? 0
+	}
+	
+	// MARK: - Subtitle Positioning
+	
+	func setSubtitlePosition(_ position: Int) {
+		renderer?.setSubtitlePosition(position)
+	}
+	
+	func setSubtitleScale(_ scale: Double) {
+		renderer?.setSubtitleScale(scale)
+	}
+	
+	func setSubtitleMarginY(_ margin: Int) {
+		renderer?.setSubtitleMarginY(margin)
+	}
+	
+	func setSubtitleAlignX(_ alignment: String) {
+		renderer?.setSubtitleAlignX(alignment)
+	}
+	
+	func setSubtitleAlignY(_ alignment: String) {
+		renderer?.setSubtitleAlignY(alignment)
+	}
+	
+	func setSubtitleFontSize(_ size: Int) {
+		renderer?.setSubtitleFontSize(size)
+	}
+
+	deinit {
+		pipController?.stopPictureInPicture()
+		renderer?.stop()
+		displayLayer.removeFromSuperlayer()
+	}
+}
+
+// MARK: - MPVSoftwareRendererDelegate
+
+extension MpvPlayerView: MPVSoftwareRendererDelegate {
+	func renderer(_: MPVSoftwareRenderer, didUpdatePosition position: Double, duration: Double) {
+		cachedPosition = position
+		cachedDuration = duration
+		
+		DispatchQueue.main.async { [weak self] in
+			guard let self else { return }
+			// Only update PiP state when PiP is active
+			if self.pipController?.isPictureInPictureActive == true {
+				self.pipController?.updatePlaybackState()
+			}
+			
+			self.onProgress([
+				"position": position,
+				"duration": duration,
+				"progress": duration > 0 ? position / duration : 0,
+			])
+		}
+	}
+
+	func renderer(_: MPVSoftwareRenderer, didChangePause isPaused: Bool) {
+		DispatchQueue.main.async { [weak self] in
+			guard let self else { return }
+			// Don't update intendedPlayState here - it's only set by user actions (play/pause)
+			// This prevents PiP UI flicker during seeking
+			self.onPlaybackStateChange([
+				"isPaused": isPaused,
+				"isPlaying": !isPaused,
+			])
+			// Note: Don't call updatePlaybackState() here to avoid flicker
+			// PiP queries pipControllerIsPlaying when it needs the state
+		}
+	}
+
+	func renderer(_: MPVSoftwareRenderer, didChangeLoading isLoading: Bool) {
+		DispatchQueue.main.async { [weak self] in
+			guard let self else { return }
+			self.onPlaybackStateChange([
+				"isLoading": isLoading,
+			])
+		}
+	}
+
+	func renderer(_: MPVSoftwareRenderer, didBecomeReadyToSeek: Bool) {
+		DispatchQueue.main.async { [weak self] in
+			guard let self else { return }
+			self.onPlaybackStateChange([
+				"isReadyToSeek": didBecomeReadyToSeek,
+			])
+		}
+	}
+	
+	func renderer(_: MPVSoftwareRenderer, didBecomeTracksReady: Bool) {
+		DispatchQueue.main.async { [weak self] in
+			guard let self else { return }
+			self.onTracksReady([:])
+		}
+	}
+}
+
+// MARK: - PiPControllerDelegate
+
+extension MpvPlayerView: PiPControllerDelegate {
+	func pipController(_ controller: PiPController, willStartPictureInPicture: Bool) {
+		print("PiP will start")
+		// Sync timebase before PiP starts for smooth transition
+		renderer?.syncTimebase()
+		pipController?.updatePlaybackState()
+	}
+	
+	func pipController(_ controller: PiPController, didStartPictureInPicture: Bool) {
+		print("PiP did start: \(didStartPictureInPicture)")
+		pipController?.updatePlaybackState()
+	}
+	
+	func pipController(_ controller: PiPController, willStopPictureInPicture: Bool) {
+		print("PiP will stop")
+		// Sync timebase before returning from PiP
+		renderer?.syncTimebase()
+	}
+	
+	func pipController(_ controller: PiPController, didStopPictureInPicture: Bool) {
+		print("PiP did stop")
+		// Ensure timebase is synced after PiP ends
+		renderer?.syncTimebase()
+		pipController?.updatePlaybackState()
+	}
+	
+	func pipController(_ controller: PiPController, restoreUserInterfaceForPictureInPictureStop completionHandler: @escaping (Bool) -> Void) {
+		print("PiP restore user interface")
+		completionHandler(true)
+	}
+	
+	func pipControllerPlay(_ controller: PiPController) {
+		print("PiP play requested")
+		play()
+	}
+	
+	func pipControllerPause(_ controller: PiPController) {
+		print("PiP pause requested")
+		pause()
+	}
+	
+	func pipController(_ controller: PiPController, skipByInterval interval: CMTime) {
+		let seconds = CMTimeGetSeconds(interval)
+		print("PiP skip by interval: \(seconds)")
+		let target = max(0, cachedPosition + seconds)
+		seekTo(position: target)
+	}
+	
+	func pipControllerIsPlaying(_ controller: PiPController) -> Bool {
+		// Use intended state to ignore transient pauses during seeking
+		return intendedPlayState
+	}
+	
+	func pipControllerDuration(_ controller: PiPController) -> Double {
+		return getDuration()
+	}
+}

modules/mpv-player/ios/PiPController.swift

@@ -0,0 +1,172 @@
+import AVKit
+import AVFoundation
+
+protocol PiPControllerDelegate: AnyObject {
+    func pipController(_ controller: PiPController, willStartPictureInPicture: Bool)
+    func pipController(_ controller: PiPController, didStartPictureInPicture: Bool)
+    func pipController(_ controller: PiPController, willStopPictureInPicture: Bool)
+    func pipController(_ controller: PiPController, didStopPictureInPicture: Bool)
+    func pipController(_ controller: PiPController, restoreUserInterfaceForPictureInPictureStop completionHandler: @escaping (Bool) -> Void)
+    func pipControllerPlay(_ controller: PiPController)
+    func pipControllerPause(_ controller: PiPController)
+    func pipController(_ controller: PiPController, skipByInterval interval: CMTime)
+    func pipControllerIsPlaying(_ controller: PiPController) -> Bool
+    func pipControllerDuration(_ controller: PiPController) -> Double
+}
+
+final class PiPController: NSObject {
+    private var pipController: AVPictureInPictureController?
+    private weak var sampleBufferDisplayLayer: AVSampleBufferDisplayLayer?
+    
+    weak var delegate: PiPControllerDelegate?
+    
+    var isPictureInPictureSupported: Bool {
+        return AVPictureInPictureController.isPictureInPictureSupported()
+    }
+    
+    var isPictureInPictureActive: Bool {
+        return pipController?.isPictureInPictureActive ?? false
+    }
+    
+    var isPictureInPicturePossible: Bool {
+        return pipController?.isPictureInPicturePossible ?? false
+    }
+    
+    init(sampleBufferDisplayLayer: AVSampleBufferDisplayLayer) {
+        self.sampleBufferDisplayLayer = sampleBufferDisplayLayer
+        super.init()
+        setupPictureInPicture()
+    }
+    
+    private func setupPictureInPicture() {
+        guard isPictureInPictureSupported,
+              let displayLayer = sampleBufferDisplayLayer else {
+            return
+        }
+        
+        let contentSource = AVPictureInPictureController.ContentSource(
+            sampleBufferDisplayLayer: displayLayer,
+            playbackDelegate: self
+        )
+        
+        pipController = AVPictureInPictureController(contentSource: contentSource)
+        pipController?.delegate = self
+        pipController?.requiresLinearPlayback = false
+        #if !os(tvOS)
+        pipController?.canStartPictureInPictureAutomaticallyFromInline = true
+        #endif
+    }
+    
+    func startPictureInPicture() {
+        guard let pipController = pipController,
+              pipController.isPictureInPicturePossible else {
+            return
+        }
+        
+        pipController.startPictureInPicture()
+    }
+    
+    func stopPictureInPicture() {
+        pipController?.stopPictureInPicture()
+    }
+    
+    func invalidate() {
+        if Thread.isMainThread {
+            pipController?.invalidatePlaybackState()
+        } else {
+            DispatchQueue.main.async { [weak self] in
+                self?.pipController?.invalidatePlaybackState()
+            }
+        }
+    }
+    
+    func updatePlaybackState() {
+        if Thread.isMainThread {
+            pipController?.invalidatePlaybackState()
+        } else {
+            DispatchQueue.main.async { [weak self] in
+                self?.pipController?.invalidatePlaybackState()
+            }
+        }
+    }
+}
+
+// MARK: - AVPictureInPictureControllerDelegate
+
+extension PiPController: AVPictureInPictureControllerDelegate {
+    func pictureInPictureControllerWillStartPictureInPicture(_ pictureInPictureController: AVPictureInPictureController) {
+        delegate?.pipController(self, willStartPictureInPicture: true)
+    }
+    
+    func pictureInPictureControllerDidStartPictureInPicture(_ pictureInPictureController: AVPictureInPictureController) {
+        delegate?.pipController(self, didStartPictureInPicture: true)
+    }
+    
+    func pictureInPictureController(_ pictureInPictureController: AVPictureInPictureController, failedToStartPictureInPictureWithError error: Error) {
+        print("Failed to start PiP: \(error)")
+        delegate?.pipController(self, didStartPictureInPicture: false)
+    }
+    
+    func pictureInPictureControllerWillStopPictureInPicture(_ pictureInPictureController: AVPictureInPictureController) {
+        delegate?.pipController(self, willStopPictureInPicture: true)
+    }
+    
+    func pictureInPictureControllerDidStopPictureInPicture(_ pictureInPictureController: AVPictureInPictureController) {
+        delegate?.pipController(self, didStopPictureInPicture: true)
+    }
+    
+    func pictureInPictureController(_ pictureInPictureController: AVPictureInPictureController, restoreUserInterfaceForPictureInPictureStopWithCompletionHandler completionHandler: @escaping (Bool) -> Void) {
+        delegate?.pipController(self, restoreUserInterfaceForPictureInPictureStop: completionHandler)
+    }
+}
+
+// MARK: - AVPictureInPictureSampleBufferPlaybackDelegate
+
+extension PiPController: AVPictureInPictureSampleBufferPlaybackDelegate {
+    
+    func pictureInPictureController(_ pictureInPictureController: AVPictureInPictureController, setPlaying playing: Bool) {
+        if playing {
+            delegate?.pipControllerPlay(self)
+        } else {
+            delegate?.pipControllerPause(self)
+        }
+    }
+    
+    func pictureInPictureController(_ pictureInPictureController: AVPictureInPictureController, didTransitionToRenderSize newRenderSize: CMVideoDimensions) {
+    }
+    
+    func pictureInPictureController(_ pictureInPictureController: AVPictureInPictureController, skipByInterval skipInterval: CMTime, completion completionHandler: @escaping () -> Void) {
+        delegate?.pipController(self, skipByInterval: skipInterval)
+        completionHandler()
+    }
+    
+    var isPlaying: Bool {
+        return delegate?.pipControllerIsPlaying(self) ?? false
+    }
+    
+    var timeRangeForPlayback: CMTimeRange {
+        let duration = delegate?.pipControllerDuration(self) ?? 0
+        if duration > 0 {
+            let cmDuration = CMTime(seconds: duration, preferredTimescale: 1000)
+            return CMTimeRange(start: .zero, duration: cmDuration)
+        }
+        return CMTimeRange(start: .zero, duration: .positiveInfinity)
+    }
+    
+    func pictureInPictureControllerTimeRangeForPlayback(_ pictureInPictureController: AVPictureInPictureController) -> CMTimeRange {
+        return timeRangeForPlayback
+    }
+    
+    func pictureInPictureControllerIsPlaybackPaused(_ pictureInPictureController: AVPictureInPictureController) -> Bool {
+        return !isPlaying
+    }
+    
+    func pictureInPictureController(_ pictureInPictureController: AVPictureInPictureController, setPlaying playing: Bool, completion: @escaping () -> Void) {
+        if playing {
+            delegate?.pipControllerPlay(self)
+        } else {
+            delegate?.pipControllerPause(self)
+        }
+        completion()
+    }
+}

modules/mpv-player/ios/PlayerPreset.swift

@@ -0,0 +1,40 @@
+import Foundation
+
+struct PlayerPreset: Identifiable, Hashable {
+    enum Identifier: String, CaseIterable {
+        case sdrRec709
+        case hdr10
+        case dolbyVisionP5
+        case dolbyVisionP8
+    }
+    
+    struct Stream: Hashable {
+        enum Source: Hashable {
+            case remote(URL)
+            case bundled(resource: String, withExtension: String)
+        }
+        
+        let source: Source
+        let note: String
+        
+        func resolveURL() -> URL? {
+            switch source {
+            case .remote(let url):
+                return url
+            case .bundled(let resource, let ext):
+                return Bundle.main.url(forResource: resource, withExtension: ext)
+            }
+        }
+    }
+    
+    let id: Identifier
+    let title: String
+    let summary: String
+    let stream: Stream?
+    let commands: [[String]]
+    
+    static var presets: [PlayerPreset] {
+        let list: [PlayerPreset] = []
+        return list
+    }
+}

modules/mpv-player/ios/SampleBufferDisplayView.swift

@@ -0,0 +1,72 @@
+import UIKit
+import AVFoundation
+
+final class SampleBufferDisplayView: UIView {
+    override class var layerClass: AnyClass { AVSampleBufferDisplayLayer.self }
+    
+    var displayLayer: AVSampleBufferDisplayLayer {
+        return layer as! AVSampleBufferDisplayLayer
+    }
+    
+    private(set) var pipController: PiPController?
+    
+    weak var pipDelegate: PiPControllerDelegate? {
+        didSet {
+            pipController?.delegate = pipDelegate
+        }
+    }
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        commonInit()
+    }
+    
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        commonInit()
+    }
+    
+    private func commonInit() {
+        backgroundColor = .black
+        displayLayer.videoGravity = .resizeAspect
+        #if !os(tvOS)
+        #if compiler(>=6.0)
+            if #available(iOS 26.0, *) {
+                displayLayer.preferredDynamicRange = .automatic
+            } else if #available(iOS 17.0, *) {
+                displayLayer.wantsExtendedDynamicRangeContent = true
+            }
+        #endif
+            if #available(iOS 17.0, *) {
+                displayLayer.wantsExtendedDynamicRangeContent = true
+            }
+        #endif
+        setupPictureInPicture()
+    }
+    
+    private func setupPictureInPicture() {
+        pipController = PiPController(sampleBufferDisplayLayer: displayLayer)
+    }
+    
+    // MARK: - PiP Control Methods
+    
+    func startPictureInPicture() {
+        pipController?.startPictureInPicture()
+    }
+    
+    func stopPictureInPicture() {
+        pipController?.stopPictureInPicture()
+    }
+    
+    var isPictureInPictureSupported: Bool {
+        return pipController?.isPictureInPictureSupported ?? false
+    }
+    
+    var isPictureInPictureActive: Bool {
+        return pipController?.isPictureInPictureActive ?? false
+    }
+    
+    var isPictureInPicturePossible: Bool {
+        return pipController?.isPictureInPicturePossible ?? false
+    }
+}

modules/mpv-player/src/MpvPlayer.types.ts

@@ -0,0 +1,105 @@
+import type { StyleProp, ViewStyle } from "react-native";
+
+export type OnLoadEventPayload = {
+  url: string;
+};
+
+export type OnPlaybackStateChangePayload = {
+  isPaused?: boolean;
+  isPlaying?: boolean;
+  isLoading?: boolean;
+  isReadyToSeek?: boolean;
+};
+
+export type OnProgressEventPayload = {
+  position: number;
+  duration: number;
+  progress: number;
+};
+
+export type OnErrorEventPayload = {
+  error: string;
+};
+
+export type OnTracksReadyEventPayload = Record<string, never>;
+
+export type MpvPlayerModuleEvents = {
+  onChange: (params: ChangeEventPayload) => void;
+};
+
+export type ChangeEventPayload = {
+  value: string;
+};
+
+export type VideoSource = {
+  url: string;
+  headers?: Record<string, string>;
+  externalSubtitles?: string[];
+  startPosition?: number;
+  autoplay?: boolean;
+  /** MPV subtitle track ID to select on start (1-based, -1 to disable) */
+  initialSubtitleId?: number;
+  /** MPV audio track ID to select on start (1-based) */
+  initialAudioId?: number;
+};
+
+export type MpvPlayerViewProps = {
+  source?: VideoSource;
+  style?: StyleProp<ViewStyle>;
+  onLoad?: (event: { nativeEvent: OnLoadEventPayload }) => void;
+  onPlaybackStateChange?: (event: {
+    nativeEvent: OnPlaybackStateChangePayload;
+  }) => void;
+  onProgress?: (event: { nativeEvent: OnProgressEventPayload }) => void;
+  onError?: (event: { nativeEvent: OnErrorEventPayload }) => void;
+  onTracksReady?: (event: { nativeEvent: OnTracksReadyEventPayload }) => void;
+};
+
+export interface MpvPlayerViewRef {
+  play: () => Promise<void>;
+  pause: () => Promise<void>;
+  seekTo: (position: number) => Promise<void>;
+  seekBy: (offset: number) => Promise<void>;
+  setSpeed: (speed: number) => Promise<void>;
+  getSpeed: () => Promise<number>;
+  isPaused: () => Promise<boolean>;
+  getCurrentPosition: () => Promise<number>;
+  getDuration: () => Promise<number>;
+  startPictureInPicture: () => Promise<void>;
+  stopPictureInPicture: () => Promise<void>;
+  isPictureInPictureSupported: () => Promise<boolean>;
+  isPictureInPictureActive: () => Promise<boolean>;
+  // Subtitle controls
+  getSubtitleTracks: () => Promise<SubtitleTrack[]>;
+  setSubtitleTrack: (trackId: number) => Promise<void>;
+  disableSubtitles: () => Promise<void>;
+  getCurrentSubtitleTrack: () => Promise<number>;
+  addSubtitleFile: (url: string, select?: boolean) => Promise<void>;
+  // Subtitle positioning
+  setSubtitlePosition: (position: number) => Promise<void>;
+  setSubtitleScale: (scale: number) => Promise<void>;
+  setSubtitleMarginY: (margin: number) => Promise<void>;
+  setSubtitleAlignX: (alignment: "left" | "center" | "right") => Promise<void>;
+  setSubtitleAlignY: (alignment: "top" | "center" | "bottom") => Promise<void>;
+  setSubtitleFontSize: (size: number) => Promise<void>;
+  // Audio controls
+  getAudioTracks: () => Promise<AudioTrack[]>;
+  setAudioTrack: (trackId: number) => Promise<void>;
+  getCurrentAudioTrack: () => Promise<number>;
+}
+
+export type SubtitleTrack = {
+  id: number;
+  title?: string;
+  lang?: string;
+  selected?: boolean;
+};
+
+export type AudioTrack = {
+  id: number;
+  title?: string;
+  lang?: string;
+  codec?: string;
+  channels?: number;
+  selected?: boolean;
+};

modules/mpv-player/src/MpvPlayerModule.ts

@@ -0,0 +1,11 @@
+import { NativeModule, requireNativeModule } from "expo";
+
+import { MpvPlayerModuleEvents } from "./MpvPlayer.types";
+
+declare class MpvPlayerModule extends NativeModule<MpvPlayerModuleEvents> {
+  hello(): string;
+  setValueAsync(value: string): Promise<void>;
+}
+
+// This call loads the native module object from the JSI.
+export default requireNativeModule<MpvPlayerModule>("MpvPlayer");

modules/mpv-player/src/MpvPlayerModule.web.ts

@@ -0,0 +1,19 @@
+import { NativeModule, registerWebModule } from "expo";
+
+import { ChangeEventPayload } from "./MpvPlayer.types";
+
+type MpvPlayerModuleEvents = {
+  onChange: (params: ChangeEventPayload) => void;
+};
+
+class MpvPlayerModule extends NativeModule<MpvPlayerModuleEvents> {
+  PI = Math.PI;
+  async setValueAsync(value: string): Promise<void> {
+    this.emit("onChange", { value });
+  }
+  hello() {
+    return "Hello world! 👋";
+  }
+}
+
+export default registerWebModule(MpvPlayerModule, "MpvPlayerModule");

modules/mpv-player/src/MpvPlayerView.tsx

@@ -0,0 +1,101 @@
+import { requireNativeView } from "expo";
+import * as React from "react";
+import { useImperativeHandle, useRef } from "react";
+
+import { MpvPlayerViewProps, MpvPlayerViewRef } from "./MpvPlayer.types";
+
+const NativeView: React.ComponentType<MpvPlayerViewProps & { ref?: any }> =
+  requireNativeView("MpvPlayer");
+
+export default React.forwardRef<MpvPlayerViewRef, MpvPlayerViewProps>(
+  function MpvPlayerView(props, ref) {
+    const nativeRef = useRef<any>(null);
+
+    useImperativeHandle(ref, () => ({
+      play: async () => {
+        await nativeRef.current?.play();
+      },
+      pause: async () => {
+        await nativeRef.current?.pause();
+      },
+      seekTo: async (position: number) => {
+        await nativeRef.current?.seekTo(position);
+      },
+      seekBy: async (offset: number) => {
+        await nativeRef.current?.seekBy(offset);
+      },
+      setSpeed: async (speed: number) => {
+        await nativeRef.current?.setSpeed(speed);
+      },
+      getSpeed: async () => {
+        return await nativeRef.current?.getSpeed();
+      },
+      isPaused: async () => {
+        return await nativeRef.current?.isPaused();
+      },
+      getCurrentPosition: async () => {
+        return await nativeRef.current?.getCurrentPosition();
+      },
+      getDuration: async () => {
+        return await nativeRef.current?.getDuration();
+      },
+      startPictureInPicture: async () => {
+        await nativeRef.current?.startPictureInPicture();
+      },
+      stopPictureInPicture: async () => {
+        await nativeRef.current?.stopPictureInPicture();
+      },
+      isPictureInPictureSupported: async () => {
+        return await nativeRef.current?.isPictureInPictureSupported();
+      },
+      isPictureInPictureActive: async () => {
+        return await nativeRef.current?.isPictureInPictureActive();
+      },
+      getSubtitleTracks: async () => {
+        return await nativeRef.current?.getSubtitleTracks();
+      },
+      setSubtitleTrack: async (trackId: number) => {
+        await nativeRef.current?.setSubtitleTrack(trackId);
+      },
+      disableSubtitles: async () => {
+        await nativeRef.current?.disableSubtitles();
+      },
+      getCurrentSubtitleTrack: async () => {
+        return await nativeRef.current?.getCurrentSubtitleTrack();
+      },
+      addSubtitleFile: async (url: string, select = true) => {
+        await nativeRef.current?.addSubtitleFile(url, select);
+      },
+      setSubtitlePosition: async (position: number) => {
+        await nativeRef.current?.setSubtitlePosition(position);
+      },
+      setSubtitleScale: async (scale: number) => {
+        await nativeRef.current?.setSubtitleScale(scale);
+      },
+      setSubtitleMarginY: async (margin: number) => {
+        await nativeRef.current?.setSubtitleMarginY(margin);
+      },
+      setSubtitleAlignX: async (alignment: "left" | "center" | "right") => {
+        await nativeRef.current?.setSubtitleAlignX(alignment);
+      },
+      setSubtitleAlignY: async (alignment: "top" | "center" | "bottom") => {
+        await nativeRef.current?.setSubtitleAlignY(alignment);
+      },
+      setSubtitleFontSize: async (size: number) => {
+        await nativeRef.current?.setSubtitleFontSize(size);
+      },
+      // Audio controls
+      getAudioTracks: async () => {
+        return await nativeRef.current?.getAudioTracks();
+      },
+      setAudioTrack: async (trackId: number) => {
+        await nativeRef.current?.setAudioTrack(trackId);
+      },
+      getCurrentAudioTrack: async () => {
+        return await nativeRef.current?.getCurrentAudioTrack();
+      },
+    }));
+
+    return <NativeView ref={nativeRef} {...props} />;
+  },
+);

modules/mpv-player/src/MpvPlayerView.web.tsx

@@ -0,0 +1,15 @@
+import { MpvPlayerViewProps } from "./MpvPlayer.types";
+
+export default function MpvPlayerView(props: MpvPlayerViewProps) {
+  const url = props.source?.url;
+  return (
+    <div>
+      <iframe
+        title='MPV Player'
+        style={{ flex: 1 }}
+        src={url}
+        onLoad={() => props.onLoad?.({ nativeEvent: { url: url ?? "" } })}
+      />
+    </div>
+  );
+}

modules/mpv-player/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./MpvPlayer.types";
+export { default as MpvPlayerModule } from "./MpvPlayerModule";
+export { default as MpvPlayerView } from "./MpvPlayerView";