@mux/mux-react-native-player 0.1.0

package/MuxReactNativePlayer.podspec

@@ -0,0 +1,37 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'MuxReactNativePlayer'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.description    = 'React Native bindings for Mux Player Swift and Mux Player Android.'
+  s.license        = package['license']
+  s.author         = 'Mux, Inc.'
+  s.homepage       = 'https://github.com/muxinc/mux-react-native-player'
+  s.source         = { :git => 'https://github.com/muxinc/mux-react-native-player.git', :tag => "#{s.version}" }
+  s.platforms      = { :ios => '15.0' }
+  s.swift_version  = '5.9'
+  s.static_framework = true
+
+  s.source_files = 'ios/*.{h,m,mm,swift}'
+  s.dependency 'ExpoModulesCore'
+
+  if respond_to?(:spm_dependency, true)
+    spm_dependency(
+      s,
+      url: 'https://github.com/muxinc/mux-player-swift.git',
+      requirement: {
+        kind: 'upToNextMajorVersion',
+        minimumVersion: '1.5.0'
+      },
+      products: ['MuxPlayerSwift']
+    )
+  else
+    raise <<~MSG
+      MuxReactNativePlayer requires React Native's spm_dependency Podfile helper to consume MuxPlayerSwift.
+      Upgrade React Native to 0.75 or newer, or add MuxPlayerSwift to the app target manually and patch this podspec.
+    MSG
+  end
+end

package/README.md

@@ -0,0 +1,134 @@
+# Mux React Native Player
+
+<p align="center">
+  <img src="assets/player_screenshot.png" alt="Mux React Native Player" width="320" />
+</p>
+
+A React native video player with built-in Mux Data and Mux Robots integrations. Native playback is delegated to:
+
+- iOS: [`muxinc/mux-player-swift`](https://github.com/muxinc/mux-player-swift)
+- Android: [`muxinc/mux-player-android`](https://github.com/muxinc/mux-player-android)
+
+## Requirements
+
+- React Native 0.75+ with Expo Modules
+- iOS 15+, Android minSdk 23+
+
+## Install
+
+```sh
+npm install @mux/mux-react-native-player
+```
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "@mux/mux-react-native-player/plugin",
+        { "enablePictureInPicture": true }
+      ]
+    ]
+  }
+}
+```
+
+```sh
+npx expo prebuild
+npx expo run:ios
+npx expo run:android
+```
+
+## Usage
+
+```tsx
+import { MuxVideoView, useMuxVideoPlayer } from "@mux/mux-react-native-player";
+
+export default function Player() {
+  const player = useMuxVideoPlayer({
+    playbackId: "qxb01i6T202018GFS02vp9RIe01icTcDCjVzQpmaB00CUisJ4",
+    metadata: {
+      envKey: "YOUR_MUX_DATA_ENV_KEY",
+      playerName: "MuxReactNativePlayerExample",
+      videoTitle: "Mux playback in React Native",
+      viewerUserId: "user-123",
+    },
+  });
+
+  return (
+    <MuxVideoView
+      player={player}
+      controls="custom"
+      contentFit="contain"
+      style={{ width: "100%", aspectRatio: 16 / 9, backgroundColor: "black" }}
+    />
+  );
+}
+```
+
+`controls`: `"native"` for platform controls, `"custom"` for the shared cross-platform JS controls, `"none"` for the bare video surface.
+
+## Source Options
+
+```ts
+type MuxVideoSource = {
+  playbackId: string;
+  assetId?: string;
+  playbackToken?: string;
+  drmToken?: string;
+  customDomain?: string;
+  minResolution?: "480p" | "540p" | "720p" | "1080p" | "1440p" | "2160p";
+  maxResolution?: "720p" | "1080p" | "1440p" | "2160p";
+  renditionOrder?: "default" | "desc";
+  clipping?: { assetStartTime?: number; assetEndTime?: number };
+  metadata?: {
+    envKey?: string;
+    playerName?: string;
+    videoTitle?: string;
+    videoId?: string;
+    viewerUserId?: string;
+    customData?: Record<string, string>;
+  };
+};
+```
+
+- `metadata.envKey` enables Mux Data.
+- `drmToken` requires `playbackToken`.
+- The source is mutable — pass it from state and the player will reload when it changes.
+
+## Player Commands
+
+```ts
+await player.play();
+await player.pause();
+await player.seekTo(12);
+await player.seekBy(10);
+await player.replay();
+await player.setMuted(true);
+await player.setVolume(0.5);
+await player.setLoop(true);
+await player.setPlaybackRate(1.25);
+player.replace({ playbackId: "NEW_PLAYBACK_ID" });
+await player.release();
+```
+
+## Mux Robots UI
+
+When using `controls="custom"`, you can add Mux Robots buttons (summary, chapters, key moments). Keep `MUX_TOKEN_ID` / `MUX_TOKEN_SECRET` on a backend and pass callbacks:
+
+```tsx
+<MuxVideoView
+  player={player}
+  controls="custom"
+  robots={{
+    onSummarize: ({ assetId }) =>
+      fetchJson("/mux/robots/summarize", { assetId }),
+    onGenerateChapters: ({ assetId }) =>
+      fetchJson("/mux/robots/chapters", { assetId }),
+    onFindKeyMoments: ({ assetId }) =>
+      fetchJson("/mux/robots/key-moments", { assetId }),
+  }}
+/>
+```
+
+Buttons appear only for actions with a callback. Chapters render as timeline markers; key moments render as highlighted ranges. Selecting either seeks to its start time.

package/android/build.gradle

@@ -0,0 +1,33 @@
+apply plugin: 'com.android.library'
+apply plugin: 'org.jetbrains.kotlin.android'
+apply plugin: 'expo-module-gradle-plugin'
+
+group = 'com.mux.reactnativeplayer'
+version = '0.1.0'
+
+def safeExtGet(prop, fallback) {
+  rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
+
+android {
+  namespace 'com.mux.reactnativeplayer'
+  compileSdkVersion safeExtGet('compileSdkVersion', 36)
+
+  defaultConfig {
+    minSdkVersion safeExtGet('minSdkVersion', 23)
+    targetSdkVersion safeExtGet('targetSdkVersion', 36)
+    versionCode 1
+    versionName "0.1.0"
+  }
+}
+
+repositories {
+  google()
+  mavenCentral()
+  maven { url = uri("https://muxinc.jfrog.io/artifactory/default-maven-release-local") }
+}
+
+dependencies {
+  implementation project(':expo-modules-core')
+  implementation "com.mux.player:android:1.5.4"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" />

package/android/src/main/java/com/mux/reactnativeplayer/MuxReactNativePlayerModule.kt

@@ -0,0 +1,135 @@
+package com.mux.reactnativeplayer
+
+import android.app.Activity
+import android.content.pm.ActivityInfo
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class MuxReactNativePlayerModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("MuxReactNativePlayer")
+
+    AsyncFunction("lockFullscreenLandscape") {
+      runOnActivity { activity ->
+        activity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE
+      }
+    }
+
+    AsyncFunction("unlockFullscreenOrientation") {
+      runOnActivity { activity ->
+        activity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED
+      }
+    }
+
+    View(MuxVideoView::class) {
+      OnViewDestroys { view: MuxVideoView ->
+        view.release()
+      }
+
+      Events(
+        "onStatusChange",
+        "onPlayingChange",
+        "onTimeUpdate",
+        "onSourceLoad",
+        "onSourceError"
+      )
+
+      Prop("source") { view: MuxVideoView, source: MuxVideoSourceRecord? ->
+        view.setSource(source)
+      }
+
+      Prop("nativeControls", true) { view: MuxVideoView, enabled: Boolean ->
+        view.setNativeControls(enabled)
+      }
+
+      Prop("contentFit", "contain") { view: MuxVideoView, contentFit: String ->
+        view.setContentFit(contentFit)
+      }
+
+      Prop("allowsFullscreen", true) { _: MuxVideoView, _: Boolean ->
+        // Android Media3 PlayerView exposes fullscreen through app UI; accepted for API parity.
+      }
+
+      Prop("allowsPictureInPicture", false) { _: MuxVideoView, _: Boolean ->
+        // PiP requires host Activity integration and is intentionally left to a future pass.
+      }
+
+      Prop("timeUpdateEventInterval", 0.5) { view: MuxVideoView, interval: Double ->
+        view.setTimeUpdateEventInterval(interval)
+      }
+
+      Prop("startupBufferDuration", 0.0) { view: MuxVideoView, duration: Double ->
+        view.setStartupBufferDuration(duration)
+      }
+
+      Prop("playWhenReady", false) { view: MuxVideoView, playWhenReady: Boolean ->
+        view.setPlayWhenReady(playWhenReady)
+      }
+
+      Prop("muted", false) { view: MuxVideoView, muted: Boolean ->
+        view.setMuted(muted)
+      }
+
+      Prop("volume", 1.0) { view: MuxVideoView, volume: Double ->
+        view.setVolume(volume)
+      }
+
+      Prop("loop", false) { view: MuxVideoView, loop: Boolean ->
+        view.setLoop(loop)
+      }
+
+      Prop("playbackRate", 1.0) { view: MuxVideoView, rate: Double ->
+        view.setPlaybackRate(rate)
+      }
+
+      AsyncFunction("play") { view: MuxVideoView ->
+        view.play()
+      }
+
+      AsyncFunction("pause") { view: MuxVideoView ->
+        view.pause()
+      }
+
+      AsyncFunction("replay") { view: MuxVideoView ->
+        view.replay()
+      }
+
+      AsyncFunction("seekBy") { view: MuxVideoView, seconds: Double ->
+        view.seekBy(seconds)
+      }
+
+      AsyncFunction("seekTo") { view: MuxVideoView, seconds: Double ->
+        view.seekTo(seconds)
+      }
+
+      AsyncFunction("setMuted") { view: MuxVideoView, muted: Boolean ->
+        view.setMuted(muted)
+      }
+
+      AsyncFunction("setVolume") { view: MuxVideoView, volume: Double ->
+        view.setVolume(volume)
+      }
+
+      AsyncFunction("setLoop") { view: MuxVideoView, loop: Boolean ->
+        view.setLoop(loop)
+      }
+
+      AsyncFunction("setPlaybackRate") { view: MuxVideoView, rate: Double ->
+        view.setPlaybackRate(rate)
+      }
+
+      AsyncFunction("setCaptionTrack") { view: MuxVideoView, trackId: String? ->
+        view.setCaptionTrack(trackId)
+      }
+
+      AsyncFunction("release") { view: MuxVideoView ->
+        view.release()
+      }
+    }
+  }
+
+  private fun runOnActivity(block: (Activity) -> Unit) {
+    val activity = appContext.activityProvider?.currentActivity ?: return
+    activity.runOnUiThread { block(activity) }
+  }
+}

package/android/src/main/java/com/mux/reactnativeplayer/MuxVideoRecords.kt

@@ -0,0 +1,174 @@
+package com.mux.reactnativeplayer
+
+import androidx.media3.common.MediaItem
+import androidx.media3.common.MediaMetadata
+import com.mux.player.media.MediaItems
+import com.mux.player.media.PlaybackResolution
+import com.mux.player.media.RenditionOrder
+import com.mux.stats.sdk.core.model.CustomData
+import com.mux.stats.sdk.core.model.CustomerData
+import com.mux.stats.sdk.core.model.CustomerPlayerData
+import com.mux.stats.sdk.core.model.CustomerVideoData
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+
+class MuxVideoClippingRecord : Record {
+  @Field
+  var assetStartTime: Double? = null
+
+  @Field
+  var assetEndTime: Double? = null
+}
+
+class MuxVideoMetadataRecord : Record {
+  @Field
+  var envKey: String? = null
+
+  @Field
+  var playerName: String? = null
+
+  @Field
+  var playerVersion: String? = null
+
+  @Field
+  var videoTitle: String? = null
+
+  @Field
+  var videoId: String? = null
+
+  @Field
+  var videoSeries: String? = null
+
+  @Field
+  var viewerUserId: String? = null
+
+  @Field
+  var customData: Map<String, String>? = null
+}
+
+class MuxVideoSourceRecord : Record {
+  @Field
+  var playbackId: String = ""
+
+  @Field
+  var playbackToken: String? = null
+
+  @Field
+  var drmToken: String? = null
+
+  @Field
+  var customDomain: String? = null
+
+  @Field
+  var minResolution: String? = null
+
+  @Field
+  var maxResolution: String? = null
+
+  @Field
+  var renditionOrder: String = "default"
+
+  @Field
+  var clipping: MuxVideoClippingRecord? = null
+
+  @Field
+  var metadata: MuxVideoMetadataRecord? = null
+
+  val fingerprint: String
+    get() = listOf(
+      playbackId,
+      playbackToken.orEmpty(),
+      drmToken.orEmpty(),
+      customDomain.orEmpty(),
+      minResolution.orEmpty(),
+      maxResolution.orEmpty(),
+      renditionOrder,
+      clipping?.assetStartTime?.toString().orEmpty(),
+      clipping?.assetEndTime?.toString().orEmpty(),
+      metadata?.envKey.orEmpty(),
+      metadata?.playerName.orEmpty(),
+      metadata?.playerVersion.orEmpty(),
+      metadata?.videoTitle.orEmpty(),
+      metadata?.videoId.orEmpty(),
+      metadata?.videoSeries.orEmpty(),
+      metadata?.viewerUserId.orEmpty(),
+      metadata?.customData?.toSortedMap()?.entries?.joinToString { "${it.key}:${it.value}" }.orEmpty(),
+    ).joinToString("|")
+
+  fun toMediaItem(): MediaItem {
+    val builder = MediaItems.builderFromMuxPlaybackId(
+      playbackId = playbackId,
+      maxResolution = maxResolution.toPlaybackResolution(),
+      minResolution = minResolution.toPlaybackResolution(),
+      renditionOrder = renditionOrder.toRenditionOrder(),
+      assetStartTime = clipping?.assetStartTime,
+      assetEndTime = clipping?.assetEndTime,
+      domain = customDomain,
+      playbackToken = playbackToken,
+      drmToken = drmToken,
+    )
+
+    metadata?.videoTitle?.let { title ->
+      builder.setMediaMetadata(
+        MediaMetadata.Builder()
+          .setTitle(title)
+          .build()
+      )
+    }
+
+    return builder.build()
+  }
+
+  fun toCustomerData(): CustomerData {
+    val metadata = metadata
+    return CustomerData().apply {
+      customerPlayerData = CustomerPlayerData().apply {
+        environmentKey = metadata?.envKey
+        playerName = metadata?.playerName ?: "MuxReactNativePlayer"
+        playerVersion = metadata?.playerVersion
+        viewerUserId = metadata?.viewerUserId
+      }
+      customerVideoData = CustomerVideoData().apply {
+        videoTitle = metadata?.videoTitle
+        videoId = metadata?.videoId
+        videoSeries = metadata?.videoSeries
+      }
+      customData = CustomData().apply {
+        applyCustomData(metadata?.customData)
+      }
+    }
+  }
+}
+
+private fun String?.toPlaybackResolution(): PlaybackResolution? {
+  return when (this) {
+    "480p" -> PlaybackResolution.LD_480
+    "540p" -> PlaybackResolution.LD_540
+    "720p" -> PlaybackResolution.HD_720
+    "1080p" -> PlaybackResolution.FHD_1080
+    "1440p" -> PlaybackResolution.QHD_1440
+    "2160p" -> PlaybackResolution.FOUR_K_2160
+    else -> null
+  }
+}
+
+private fun String?.toRenditionOrder(): RenditionOrder? {
+  return when (this) {
+    "desc" -> RenditionOrder.Descending
+    "default" -> RenditionOrder.Default
+    else -> null
+  }
+}
+
+private fun CustomData.applyCustomData(values: Map<String, String>?) {
+  customData1 = values?.get("customData1")
+  customData2 = values?.get("customData2")
+  customData3 = values?.get("customData3")
+  customData4 = values?.get("customData4")
+  customData5 = values?.get("customData5")
+  customData6 = values?.get("customData6")
+  customData7 = values?.get("customData7")
+  customData8 = values?.get("customData8")
+  customData9 = values?.get("customData9")
+  customData10 = values?.get("customData10")
+}