bitmovin-player-react-native 0.1.0

package/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerView.kt

@@ -0,0 +1,264 @@
+package com.bitmovin.player.reactnative
+
+import android.annotation.SuppressLint
+import android.view.ViewGroup
+import android.widget.LinearLayout
+import com.bitmovin.player.PlayerView
+import com.bitmovin.player.api.Player
+import com.bitmovin.player.api.event.Event
+import com.bitmovin.player.api.event.PlayerEvent
+import com.bitmovin.player.api.event.SourceEvent
+import com.bitmovin.player.api.event.on
+import com.bitmovin.player.reactnative.converter.JsonConverter
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.events.RCTEventEmitter
+
+/**
+ * Native view wrapper for component instances. It both serves as the main view
+ * handled by RN (the actual player view is handled by the RNPlayerViewManager) and
+ * exposes player events as bubbling events.
+ */
+@SuppressLint("ViewConstructor")
+class RNPlayerView(context: ReactApplicationContext) : LinearLayout(context) {
+    /**
+     * Reference to the shared player view set as child.
+     */
+    var playerView: PlayerView? = null
+
+    /**
+     * Handy property accessor for `playerView`'s player instance.
+     */
+    var player: Player?
+        get() = playerView?.player
+        set(value) {
+            playerView?.player = value
+        }
+
+    /**
+     * Set the given `playerView` as child and start bubbling events.
+     * @param playerView Shared player view instance.
+     */
+    fun addPlayerView(playerView: PlayerView) {
+        this.playerView = playerView
+        if (playerView.parent != this) {
+            (playerView.parent as ViewGroup?)?.removeView(playerView)
+            addView(playerView)
+        }
+    }
+
+    /**
+     * Try to measure and update this view layout as much as possible to
+     * avoid layout problems related to React or old layout values present
+     * in `playerView` due to being previously attached to a different parent.
+     */
+    override fun requestLayout() {
+        super.requestLayout()
+        post {
+            measure(
+                MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+                MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY))
+            layout(left, top, right, bottom)
+        }
+    }
+
+    /**
+     * `onEvent` event callback.
+     */
+    private val onEvent: (PlayerEvent) -> Unit = {
+        emitEvent("event", it)
+    }
+
+    /**
+     * `onPlayerError` event callback.
+     */
+    private val onPlayerError: (PlayerEvent.Error) -> Unit = {
+        emitEvent("playerError", it)
+    }
+
+    /**
+     * `onPlayerWarning` event callback.
+     */
+    private val onPlayerWarning: (PlayerEvent.Warning) -> Unit = {
+        emitEvent("playerWarning", it)
+    }
+
+    /**
+     * `onDestroy` event callback.
+     */
+    private val onDestroy: (PlayerEvent.Destroy) -> Unit = {
+        emitEvent("destroy", it)
+    }
+
+    /**
+     * `onMuted` event callback.
+     */
+    private val onMuted: (PlayerEvent.Muted) -> Unit = {
+        emitEvent("muted", it)
+    }
+
+    /**
+     * `onUnmuted` event callback.
+     */
+    private val onUnmuted: (PlayerEvent.Unmuted) -> Unit = {
+        emitEvent("unmuted", it)
+    }
+
+    /**
+     * `onReady` event callback.
+     */
+    private val onReady: (PlayerEvent.Ready) -> Unit = {
+        emitEvent("ready", it)
+    }
+
+    /**
+     * `onPaused` event callback.
+     */
+    private val onPaused: (PlayerEvent.Paused) -> Unit = {
+        emitEvent("paused", it)
+    }
+
+    /**
+     * `onPlay` event callback.
+     */
+    private val onPlay: (PlayerEvent.Play) -> Unit = {
+        emitEvent("play", it)
+    }
+
+    /**
+     * `onPlaying` event callback.
+     */
+    private val onPlaying: (PlayerEvent.Playing) -> Unit = {
+        emitEvent("playing", it)
+    }
+
+    /**
+     * `onPlaybackFinished` event callback.
+     */
+    private val onPlaybackFinished: (PlayerEvent.PlaybackFinished) -> Unit = {
+        emitEvent("playbackFinished", it)
+    }
+
+    /**
+     * `onSeek` event callback.
+     */
+    private val onSeek: (PlayerEvent.Seek) -> Unit = {
+        emitEvent("seek", it)
+    }
+
+    /**
+     * `onSeeked` event callback.
+     */
+    private val onSeeked: (PlayerEvent.Seeked) -> Unit = {
+        emitEvent("seeked", it)
+    }
+
+    /**
+     * `onTimeChanged` event callback.
+     */
+    private val onTimeChanged: (PlayerEvent.TimeChanged) -> Unit = {
+        emitEvent("timeChanged", it)
+    }
+
+    /**
+     * `onSourceLoad` event callback.
+     */
+    private val onSourceLoad: (SourceEvent.Load) -> Unit = {
+        emitEvent("sourceLoad", it)
+    }
+
+    /**
+     * `onSourceLoaded` event callback.
+     */
+    private val onSourceLoaded: (SourceEvent.Loaded) -> Unit = {
+        emitEvent("sourceLoaded", it)
+    }
+
+    /**
+     * `onSourceUnloaded` event callback.
+     */
+    private val onSourceUnloaded: (SourceEvent.Unloaded) -> Unit = {
+        emitEvent("sourceUnloaded", it)
+    }
+
+    /**
+     * `onSourceError` event callback.
+     */
+    private val onSourceError: (SourceEvent.Error) -> Unit = {
+        emitEvent("sourceError", it)
+    }
+
+    /**
+     * `onSourceWarning` event callback.
+     */
+    private val onSourceWarning: (SourceEvent.Warning) -> Unit = {
+        emitEvent("sourceWarning", it)
+    }
+
+    /**
+     * Start listening and emitting player events as bubbling events to the js side.
+     */
+    fun startBubblingEvents() {
+        player?.on(onEvent)
+        player?.on(onPlayerError)
+        player?.on(onPlayerWarning)
+        player?.on(onDestroy)
+        player?.on(onMuted)
+        player?.on(onUnmuted)
+        player?.on(onReady)
+        player?.on(onPaused)
+        player?.on(onPlay)
+        player?.on(onPlaying)
+        player?.on(onPlaybackFinished)
+        player?.on(onSeek)
+        player?.on(onSeeked)
+        player?.on(onTimeChanged)
+        player?.on(onSourceLoad)
+        player?.on(onSourceLoaded)
+        player?.on(onSourceUnloaded)
+        player?.on(onSourceError)
+        player?.on(onSourceWarning)
+    }
+
+    /**
+     * Stop listening for player events and cease to emit bubbling events.
+     */
+    fun stopBubblingEvents() {
+        player?.off(onEvent)
+        player?.off(onPlayerError)
+        player?.off(onPlayerWarning)
+        player?.off(onDestroy)
+        player?.off(onMuted)
+        player?.off(onUnmuted)
+        player?.off(onReady)
+        player?.off(onPaused)
+        player?.off(onPlay)
+        player?.off(onPlaying)
+        player?.off(onPlaybackFinished)
+        player?.off(onSeek)
+        player?.off(onSeeked)
+        player?.off(onTimeChanged)
+        player?.off(onSourceLoad)
+        player?.off(onSourceLoaded)
+        player?.off(onSourceUnloaded)
+        player?.off(onSourceError)
+        player?.off(onSourceWarning)
+    }
+
+    /**
+     * Emits a bubbling event with payload to js.
+     * @param event Native event name.
+     * @param json Optional js object to be sent as payload.
+     */
+    private inline fun <reified E : Event> emitEvent(name: String, event: E) {
+        val payload = if (event is PlayerEvent) {
+            JsonConverter.fromPlayerEvent(event)
+        } else {
+            JsonConverter.fromSourceEvent(event as SourceEvent)
+        }
+        val reactContext = context as ReactContext
+        reactContext
+            .getJSModule(RCTEventEmitter::class.java)
+            .receiveEvent(id, name, payload)
+    }
+}

package/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt

@@ -0,0 +1,139 @@
+package com.bitmovin.player.reactnative
+
+import android.view.ViewGroup.LayoutParams
+import com.bitmovin.player.PlayerView
+import com.facebook.react.bridge.*
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerModule
+
+class RNPlayerViewManager(private val context: ReactApplicationContext) : SimpleViewManager<RNPlayerView>() {
+    /**
+     * Native component functions.
+     */
+    enum class Commands {
+        ATTACH_PLAYER,
+        DETACH_PLAYER,
+    }
+
+    /**
+     * Exported module name to JS.
+     */
+    override fun getName() = "NativePlayerView"
+
+    /**
+     * The component's native view factory. RN calls this method multiple times
+     * for each component instance.
+     */
+    override fun createViewInstance(reactContext: ThemedReactContext) = RNPlayerView(context)
+
+    /**
+     * A mapping between a event native identifier and its bubbled version that will
+     * be accessed from React.
+     */
+    private val bubblingEventsMapping: Map<String, String> = mapOf(
+        "event" to "onEvent",
+        "playerError" to "onPlayerError",
+        "playerWarning" to "onPlayerWarning",
+        "destroy" to "onDestroy",
+        "muted" to "onMuted",
+        "unmuted" to "onUnmuted",
+        "ready" to "onReady",
+        "paused" to "onPaused",
+        "play" to "onPlay",
+        "playing" to "onPlaying",
+        "playbackFinished" to "onPlaybackFinished",
+        "seek" to "onSeek",
+        "seeked" to "onSeeked",
+        "timeChanged" to "onTimeChanged",
+        "sourceLoad" to "onSourceLoad",
+        "sourceLoaded" to "onSourceLoaded",
+        "sourceUnloaded" to "onSourceUnloaded",
+        "sourceError" to "onSourceError",
+        "sourceWarning" to "onSourceWarning",
+    )
+
+    /**
+     * Component's event registry. Bubbling events are directly mapped to react props. No
+     * need to use proxy functions or `NativeEventEmitter`.
+     * @return map between event names (sent from native code) to js props.
+     */
+    override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any> =
+        bubblingEventsMapping.entries.associate {
+            it.key to mapOf(
+                "phasedRegistrationNames" to mapOf("bubbled" to it.value)
+            )
+        }.toMutableMap()
+
+    /**
+     * Component's command registry. They enable granular control over
+     * instances of a certain native component from js and give the ability
+     * to call 'functions' on them.
+     * @return map between names (used in js) and command ids (used in native code).
+     */
+    override fun getCommandsMap(): MutableMap<String, Int> = mutableMapOf(
+        "attachPlayer" to Commands.ATTACH_PLAYER.ordinal,
+        "detachPlayer" to Commands.DETACH_PLAYER.ordinal,
+    )
+
+    /**
+     * Callback triggered in response to command dispatches from the js side.
+     * @param root Root native view of the targeted component.
+     * @param commandId Command number identifier. It's a number even though RN sends it as a string.
+     * @param args Arguments list sent from the js side.
+     */
+    override fun receiveCommand(view: RNPlayerView, commandId: String?, args: ReadableArray?) {
+        super.receiveCommand(view, commandId, args)
+        commandId?.toInt()?.let {
+            when (it) {
+                Commands.ATTACH_PLAYER.ordinal -> attachPlayer(view, args?.getString(1))
+                Commands.DETACH_PLAYER.ordinal -> detachPlayer(view, args?.getString(1))
+                else -> {}
+            }
+        }
+    }
+
+    /**
+     * Set the `Player` instance for the target view using `playerId`.
+     * @param view Target `RNPlayerView`.
+     * @param playerId `Player` instance id inside `PlayerModule`'s registry.
+     */
+    private fun attachPlayer(view: RNPlayerView, playerId: String?) {
+        uiManager()?.addUIBlock {
+            val player = getPlayerModule()?.getPlayer(playerId)
+            if (view.playerView != null) {
+                view.player = player
+            } else {
+                val playerView = PlayerView(context, player)
+                playerView.layoutParams = LayoutParams(
+                    LayoutParams.MATCH_PARENT,
+                    LayoutParams.MATCH_PARENT)
+                view.addPlayerView(playerView)
+            }
+            view.startBubblingEvents()
+        }
+    }
+
+    /**
+     * Stop sending `Player` bubbling events from `PlayerView`.
+     * @param view Target `RNPlayerView`.
+     * @param playerId `Player` instance id inside `PlayerModule`'s registry.
+     */
+    private fun detachPlayer(view: RNPlayerView, playerId: String?) {
+        uiManager()?.addUIBlock {
+            view.stopBubblingEvents()
+        }
+    }
+
+    /**
+     * Helper function that gets the instantiated `PlayerModule` from modules registry.
+     */
+    private fun getPlayerModule(): PlayerModule? =
+        context.getNativeModule(PlayerModule::class.java)
+
+    /**
+     * Helper function that returns the initialized `UIManager` instance.
+     */
+    private fun uiManager(): UIManagerModule? =
+        context.getNativeModule(UIManagerModule::class.java)
+}

package/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewPackage.kt

@@ -0,0 +1,33 @@
+package com.bitmovin.player.reactnative
+
+import android.view.View
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ReactShadowNode
+import com.facebook.react.uimanager.ViewManager
+
+/**
+ * React package registry.
+ */
+class RNPlayerViewPackage : ReactPackage {
+    /**
+     * Register `RNPlayerViewManager` as a base react native module. This allows
+     * accessing methods on `NativePlayerView` on the js side.
+     */
+    override fun createNativeModules(reactContext: ReactApplicationContext): MutableList<NativeModule> {
+        return mutableListOf(
+            PlayerModule(reactContext),
+            RNPlayerViewManager(reactContext),
+        )
+    }
+
+    /**
+     * Register `RNPlayerViewManager` as a view manager. This allows creating
+     * native component instances with `<NativePlayerView {...} />` on the js
+     * side.
+     */
+    override fun createViewManagers(reactContext: ReactApplicationContext): MutableList<ViewManager<out View, out ReactShadowNode<*>>> {
+        return mutableListOf(RNPlayerViewManager(reactContext))
+    }
+}

package/android/src/main/java/com/bitmovin/player/reactnative/converter/JsonConverter.kt

@@ -0,0 +1,162 @@
+package com.bitmovin.player.reactnative.converter
+
+import com.bitmovin.player.api.PlayerConfig
+import com.bitmovin.player.api.event.PlayerEvent
+import com.bitmovin.player.api.event.SourceEvent
+import com.bitmovin.player.api.event.data.SeekPosition
+import com.bitmovin.player.api.source.Source
+import com.bitmovin.player.api.source.SourceConfig
+import com.bitmovin.player.api.source.SourceType
+import com.bitmovin.player.reactnative.extensions.getName
+import com.facebook.react.bridge.*
+
+/**
+ * Helper class to gather all conversion methods between JS -> Native objects.
+ */
+class JsonConverter {
+    companion object {
+        /**
+         * Converts an arbitrary `json` to `PlayerConfig`.
+         * @param json JS object representing the `PlayerConfig`.
+         * @return The generated `PlayerConfig` if successful, `null` otherwise.
+         */
+        @JvmStatic
+        fun toPlayerConfig(json: ReadableMap?): PlayerConfig? {
+            if (json != null && json.hasKey("licenseKey")) {
+                return PlayerConfig(key = json.getString("licenseKey"))
+            }
+            return PlayerConfig()
+        }
+
+        /**
+         * Converts an arbitrary `json` to `SourceConfig`.
+         * @param json JS object representing the `SourceConfig`.
+         * @return The generated `SourceConfig` if successful, `null` otherwise.
+         */
+        @JvmStatic
+        fun toSourceConfig(json: ReadableMap?): SourceConfig? {
+            val url = json?.getString("url")
+            val type = json?.getString("type")
+            if (json == null || url == null || type == null) {
+                return null
+            }
+            val config = SourceConfig(url, toSourceType(type))
+            config.title = json.getString("title")
+            config.posterSource = json.getString("poster")
+            if (json.hasKey("isPosterPersistent")) {
+                config.isPosterPersistent = json.getBoolean("isPosterPersistent")
+            }
+            return config
+        }
+
+        /**
+         * Converts an arbitrary `json` to `SourceType`.
+         * @param json JS string representing the `SourceType`.
+         * @return The generated `SourceType` if successful or `SourceType.Dash` otherwise.
+         */
+        @JvmStatic
+        fun toSourceType(json: String?): SourceType = when (json) {
+            "dash" -> SourceType.Dash
+            "hls" -> SourceType.Hls
+            "smooth" -> SourceType.Smooth
+            "progressive" -> SourceType.Progressive
+            else -> SourceType.Dash
+        }
+
+        /**
+         * Converts any given `Source` object into its `json` representation.
+         * @param source `Source` object to be converted.
+         * @return The `json` representation of the given `Source`.
+         */
+        @JvmStatic
+        fun fromSource(source: Source?): WritableMap? {
+            if (source == null) {
+                return null
+            }
+            val json = Arguments.createMap()
+            json.putDouble("duration", source.duration)
+            json.putBoolean("isActive", source.isActive)
+            json.putBoolean("isAttachedToPlayer", source.isAttachedToPlayer)
+            json.putInt("loadingState", source.loadingState.ordinal)
+            json.putNull("metadata")
+            return json
+        }
+
+        /**
+         * Converts any given `SeekPosition` object into its `json` representation.
+         * @param seekPosition `SeekPosition` object to be converted.
+         * @return The `json` representation of the given `SeekPosition`.
+         */
+        @JvmStatic
+        fun fromSeekPosition(seekPosition: SeekPosition): WritableMap? {
+            val json = Arguments.createMap()
+            json.putDouble("time", seekPosition.time)
+            json.putMap("source", fromSource(seekPosition.source))
+            return json
+        }
+
+        /**
+         * Converts any given `SourceEvent` object into its `json` representation.
+         * @param event `SourceEvent` object to be converted.
+         * @return The `json` representation of the given `SourceEvent`.
+         */
+        @JvmStatic
+        fun fromSourceEvent(event: SourceEvent): WritableMap? {
+            val json = Arguments.createMap()
+            json.putString("name", event.getName())
+            json.putDouble("timestamp", event.timestamp.toDouble())
+            if (event is SourceEvent.Load) {
+                json.putMap("source", fromSource(event.source))
+            }
+            if (event is SourceEvent.Loaded) {
+                json.putMap("source", fromSource(event.source))
+            }
+            if (event is SourceEvent.Error) {
+                json.putInt("code", event.code.value)
+                json.putString("message", event.message)
+            }
+            if (event is SourceEvent.Warning) {
+                json.putInt("code", event.code.value)
+                json.putString("message", event.message)
+            }
+            return json
+        }
+
+        /**
+         * Converts any given `PlayerEvent` object into its `json` representation.
+         * @param event `PlayerEvent` object to be converted.
+         * @return The `json` representation of given `PlayerEvent`.
+         */
+        @JvmStatic
+        fun fromPlayerEvent(event: PlayerEvent): WritableMap? {
+            val json = Arguments.createMap()
+            json.putString("name", event.getName())
+            json.putDouble("timestamp", event.timestamp.toDouble())
+            if (event is PlayerEvent.Error) {
+                json.putInt("code", event.code.value)
+                json.putString("message", event.message)
+            }
+            if (event is PlayerEvent.Warning) {
+                json.putInt("code", event.code.value)
+                json.putString("message", event.message)
+            }
+            if (event is PlayerEvent.Play) {
+                json.putDouble("time", event.time)
+            }
+            if (event is PlayerEvent.Playing) {
+                json.putDouble("time", event.time)
+            }
+            if (event is PlayerEvent.Paused) {
+                json.putDouble("time", event.time)
+            }
+            if (event is PlayerEvent.TimeChanged) {
+                json.putDouble("currentTime", event.time)
+            }
+            if (event is PlayerEvent.Seek) {
+                json.putMap("from", fromSeekPosition(event.from))
+                json.putMap("to", fromSeekPosition(event.to))
+            }
+            return json
+        }
+    }
+}

package/android/src/main/java/com/bitmovin/player/reactnative/extensions/Events.kt

@@ -0,0 +1,15 @@
+package com.bitmovin.player.reactnative.extensions
+
+import com.bitmovin.player.api.event.PlayerEvent
+import com.bitmovin.player.api.event.SourceEvent
+
+fun PlayerEvent.getName(): String {
+    if (this is PlayerEvent.Error || this is PlayerEvent.Warning) {
+        return "onPlayer${this.javaClass.simpleName}"
+    }
+    return "on${this.javaClass.simpleName}"
+}
+
+fun SourceEvent.getName(): String {
+    return "onSource${this.javaClass.simpleName}"
+}