expo-libvlc-player 6.0.1 → 6.1.0

package/README.md

@@ -68,7 +68,8 @@ You can configure `expo-libvlc-player` using its built-in config plugin if you u
       [
         "expo-libvlc-player",
         {
-          "localNetworkPermission": "Allow $(PRODUCT_NAME) to access your local network"
+          "localNetworkPermission": "Allow $(PRODUCT_NAME) to access your local network",
+          "supportsPictureInPicture": true
         }
       ]
     ]
@@ -78,9 +79,10 @@ You can configure `expo-libvlc-player` using its built-in config plugin if you u
 
 #### Configurable properties
 
-| Name                     | Description                                                                    | Default                                                |
-| ------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------ |
-| `localNetworkPermission` | A string to set the `NSLocalNetworkUsageDescription` permission message on iOS | `"Allow $(PRODUCT_NAME) to access your local network"` |
+| Name                       | Description                                                                                                                                                                                                                                                                                                                                                     | Default                                                |
+| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| `localNetworkPermission`   | A string to set the `NSLocalNetworkUsageDescription` permission message on iOS                                                                                                                                                                                                                                                                                  | `"Allow $(PRODUCT_NAME) to access your local network"` |
+| `supportsPictureInPicture` | A boolean value to enable Picture-in-Picture (PiP) on Android and iOS. If `true`, it adds the `android:supportsPictureInPicture` property on Android and the `audio` key to the `UIBackgroundModes` array in the Info.plist file on iOS. If `false`, it removes the property on Android and the key on iOS. When `undefined`, the configuration is not modified | `undefined`                                            |
 
 ## Usage
 
@@ -101,13 +103,22 @@ import LibVlcPlayerModule from "expo-libvlc-player";
 await LibVlcPlayerModule.triggerNetworkAlert();
 ```
 
+Check for Picture-in-Picture (PiP) support:
+
+```tsx
+import LibVlcPlayerModule from "expo-libvlc-player";
+
+await LibVlcPlayerModule.isPictureInPictureSupported();
+```
+
 See the [Example App](example/App.tsx) for additional usage.
 
 ### Module methods
 
-| Method                  | Description                                                | Returns         |
-| ----------------------- | ---------------------------------------------------------- | --------------- |
-| `triggerNetworkAlert()` | Attempts to trigger the local network privacy alert on iOS | `Promise<void>` |
+| Method                          | Description                                                 | Returns         |
+| ------------------------------- | ----------------------------------------------------------- | --------------- |
+| `triggerNetworkAlert()`         | Attempts to trigger the local network privacy alert on iOS  | `Promise<void>` |
+| `isPictureInPictureSupported()` | Checks whether the device supports Picture-in-Picture (PiP) | `boolean`       |
 
 ### View methods
 
@@ -121,46 +132,51 @@ See the [Example App](example/App.tsx) for additional usage.
 | `snapshot(path: string)`                           | Takes a snapshot of the current media. Must be a valid path string                                                     | `Promise<void>` |
 | `postAction(action: number)`                       | Posts an answer to a [`Dialog`](#dialog). Must be an integer of `1` or `2`                                             | `Promise<void>` |
 | `dismiss()`                                        | Dismisses a [`Dialog`](#dialog)                                                                                        | `Promise<void>` |
+| `startPictureInPicture()`                          | Enters Picture-in-Picture (PiP) mode. Config plugin has to be configured for Picture-in-Picture (PiP) to work          | `Promise<void>` |
+| `stopPictureInPicture()`                           | Exits Picture-in-Picture (PiP) mode on iOS                                                                             | `Promise<void>` |
 
 ### View props
 
 The `LibVlcPlayerView` extends React Native `ViewProps` and implements the following:
 
-| Prop              | Description                                                                                                                       | Default     |
-| ----------------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `source`          | Sets the source of the media to be played. Set to `null` to release the player                                                    |             |
-| `options`         | Sets the VLC options to initialize the player with. See the [VLC Wiki](https://wiki.videolan.org/VLC_command-line_help/) for more | `[]`        |
-| `tracks`          | Sets the player audio, video and subtitle tracks object. See [`Tracks`](#tracks) for more                                         | `undefined` |
-| `slaves`          | Sets the player audio and subtitle slaves array. See [`Slave`](#slave) for more                                                   | `[]`        |
-| `scale`           | Sets the player scaling factor. Must be a float equal or greater than `0`                                                         | `0`         |
-| `aspectRatio`     | Sets the container aspect ratio. Must be a valid ratio string, number or `"auto"`                                                 | `undefined` |
-| `contentFit`      | Sets how the video should be scaled to fit in the container                                                                       | `"contain"` |
-| `rate`            | Sets the player rate. Must be a float equal or greater than `1`                                                                   | `1`         |
-| `time`            | Sets the initial player time. Must be an integer in milliseconds                                                                  | `0`         |
-| `volume`          | Sets the player volume. Must be an integer between `0` and `100`                                                                  | `100`       |
-| `mute`            | Sets the player volume to `0` when `true`. Previous value is set when `false`                                                     | `false`     |
-| `audioMixingMode` | Determines how the player will interact with other audio in the system                                                            | `"auto"`    |
-| `repeat`          | Determines whether the media should repeat once ended                                                                             | `false`     |
-| `autoplay`        | Determines whether the media should autoplay once created                                                                         | `true`      |
+| Prop               | Description                                                                                                                       | Default     |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `source`           | Sets the source of the media to be played. Set to `null` to release the player                                                    |             |
+| `options`          | Sets the VLC options to initialize the player with. See the [VLC Wiki](https://wiki.videolan.org/VLC_command-line_help/) for more | `[]`        |
+| `tracks`           | Sets the player audio, video and subtitle tracks object. See [`Tracks`](#tracks) for more                                         | `undefined` |
+| `slaves`           | Sets the player audio and subtitle slaves array. See [`Slave`](#slave) for more                                                   | `[]`        |
+| `scale`            | Sets the player scaling factor. Must be a float equal or greater than `0`                                                         | `0`         |
+| `aspectRatio`      | Sets the container aspect ratio. Must be a valid ratio string, number or `"auto"`                                                 | `undefined` |
+| `contentFit`       | Sets how the video should be scaled to fit in the container                                                                       | `"contain"` |
+| `rate`             | Sets the player rate. Must be a float equal or greater than `1`                                                                   | `1`         |
+| `time`             | Sets the initial player time. Must be an integer in milliseconds                                                                  | `0`         |
+| `volume`           | Sets the player volume. Must be an integer between `0` and `100`                                                                  | `100`       |
+| `mute`             | Sets the player volume to `0` when `true`. Previous value is set when `false`                                                     | `false`     |
+| `audioMixingMode`  | Determines how the player will interact with other audio in the system                                                            | `"auto"`    |
+| `repeat`           | Determines whether the media should repeat once ended                                                                             | `false`     |
+| `autoplay`         | Determines whether the media should autoplay once created                                                                         | `true`      |
+| `pictureInPicture` | Determines whether the player should allow Picture-in-Picture (PiP) mode                                                          | `false`     |
 
 #### Callbacks
 
-| Prop                 | Description                                      | Payload                       |
-| -------------------- | ------------------------------------------------ | ----------------------------- |
-| `onBuffering`        | Called after the `Buffering` player event        |                               |
-| `onPlaying`          | Called after the `Playing` player event          |                               |
-| `onPaused`           | Called after the `Paused` player event           |                               |
-| `onStopped`          | Called after the `Stopped` player event          |                               |
-| `onEncounteredError` | Called after the `EncounteredError` player event | `{ error: string }`           |
-| `onDialogDisplay`    | Called after a `Dialog` needs to be displayed    | [`Dialog`](#dialog)           |
-| `onTimeChanged`      | Called after the `TimeChanged` player event      | `{ time: number }`            |
-| `onPositionChanged`  | Called after the `PositionChanged` player event  | `{ position: number }`        |
-| `onESAdded`          | Called after the `ESAdded` player event          | [`MediaTracks`](#mediatracks) |
-| `onRecordChanged`    | Called after the `RecordChanged` player event    | [`Recording`](#recording)     |
-| `onSnapshotTaken`    | Called after a media snapshot is taken           | `{ path: string }`            |
-| `onFirstPlay`        | Called after the player first playing event      | [`MediaInfo`](#mediainfo)     |
-| `onForeground`       | Called after the player enters the foreground    |                               |
-| `onBackground`       | Called after the player enters the background    |                               |
+| Prop                      | Description                                                  | Payload                       |
+| ------------------------- | ------------------------------------------------------------ | ----------------------------- |
+| `onBuffering`             | Called after the `Buffering` player event                    |                               |
+| `onPlaying`               | Called after the `Playing` player event                      |                               |
+| `onPaused`                | Called after the `Paused` player event                       |                               |
+| `onStopped`               | Called after the `Stopped` player event                      |                               |
+| `onEncounteredError`      | Called after the `EncounteredError` player event             | `{ error: string }`           |
+| `onDialogDisplay`         | Called after a `Dialog` needs to be displayed                | [`Dialog`](#dialog)           |
+| `onTimeChanged`           | Called after the `TimeChanged` player event                  | `{ time: number }`            |
+| `onPositionChanged`       | Called after the `PositionChanged` player event              | `{ position: number }`        |
+| `onESAdded`               | Called after the `ESAdded` player event                      | [`MediaTracks`](#mediatracks) |
+| `onRecordChanged`         | Called after the `RecordChanged` player event                | [`Recording`](#recording)     |
+| `onSnapshotTaken`         | Called after a media snapshot is taken                       | `{ path: string }`            |
+| `onFirstPlay`             | Called after the player first playing event                  | [`MediaInfo`](#mediainfo)     |
+| `onForeground`            | Called after the player enters the foreground                |                               |
+| `onBackground`            | Called after the player enters the background                |                               |
+| `onStartPictureInPicture` | Called after the player enters Picture-in-Picture (PiP) mode |                               |
+| `onStopPictureInPicture`  | Called after the player exits Picture-in-Picture (PiP) mode  |                               |
 
 ### Types
 
@@ -245,6 +261,12 @@ The current workaround attaches the View once a surface is created but this caus
 
 https://code.videolan.org/videolan/vlc-android/-/issues/1495
 
+On iOS, the `VLCKit` player deallocates from the UIView when closing the Picture-in-Picture (PiP) window.
+
+The current workaround exclusively selects the current video track but this causes a brief black screen.
+
+https://code.videolan.org/videolan/VLCKit/-/issues/743
+
 #### Audio delay
 
 On iOS, the `VLCKit` player experiences a small audio delay when resuming or muting media playback.

package/android/src/main/java/expo/modules/libvlcplayer/LibVlcPlayerModule.kt

@@ -1,5 +1,8 @@
 package expo.modules.libvlcplayer
 
+import android.app.Activity
+import android.os.Build
+import expo.modules.kotlin.exception.Exceptions
 import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
 import expo.modules.libvlcplayer.constants.MediaPlayerConstants
@@ -25,13 +28,25 @@ private val PLAYER_EVENTS =
         "onFirstPlay",
         "onForeground",
         "onBackground",
+        "onPictureInPictureStart",
+        "onPictureInPictureStop",
     )
 
 class LibVlcPlayerModule : Module() {
+    private val activity: Activity
+        get() = appContext.currentActivity ?: throw Exceptions.MissingActivity()
+
     override fun definition() =
         ModuleDefinition {
             Name("ExpoLibVlcPlayer")
 
+            Function("isPictureInPictureSupported") {
+                Build.VERSION.SDK_INT >= Build.VERSION_CODES.O &&
+                    activity.packageManager.hasSystemFeature(
+                        android.content.pm.PackageManager.FEATURE_PICTURE_IN_PICTURE,
+                    )
+            }
+
             OnCreate {
                 MediaPlayerManager.onModuleCreate(appContext)
             }
@@ -105,6 +120,10 @@ class LibVlcPlayerModule : Module() {
                     view.autoplay = autoplay
                 }
 
+                Prop("pictureInPicture", false) { view: LibVlcPlayerView, pictureInPicture: Boolean ->
+                    view.pictureInPicture = pictureInPicture
+                }
+
                 OnViewDidUpdateProps { view: LibVlcPlayerView ->
                     view.initPlayer()
                 }
@@ -145,6 +164,10 @@ class LibVlcPlayerModule : Module() {
                 AsyncFunction("dismiss") { view: LibVlcPlayerView ->
                     view.dismiss()
                 }
+
+                AsyncFunction("startPictureInPicture") { view: LibVlcPlayerView ->
+                    view.startPictureInPicture()
+                }
             }
         }
 }

package/android/src/main/java/expo/modules/libvlcplayer/LibVlcPlayerView.kt

@@ -25,6 +25,11 @@ import expo.modules.libvlcplayer.records.Recording
 import expo.modules.libvlcplayer.records.Slave
 import expo.modules.libvlcplayer.records.Track
 import expo.modules.libvlcplayer.records.Tracks
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
 import org.videolan.libvlc.LibVLC
 import org.videolan.libvlc.Media
 import org.videolan.libvlc.MediaPlayer
@@ -48,7 +53,9 @@ class LibVlcPlayerView(
     context: Context,
     appContext: AppContext,
 ) : ExpoView(context, appContext) {
-    private val playerView = VLCVideoLayout(context)
+    val playerView: VLCVideoLayout = VLCVideoLayout(context)
+    val pictureView: VLCVideoLayout = VLCVideoLayout(context)
+    private var pauseIfJob: Job? = null
 
     var libVLC: LibVLC? = null
     var mediaPlayer: MediaPlayer? = null
@@ -56,6 +63,7 @@ class LibVlcPlayerView(
 
     var firstPlay: Boolean = true
     private var shouldInit: Boolean = true
+    var isInBackground: Boolean = false
 
     val onBuffering by EventDispatcher<Unit>()
     val onPlaying by EventDispatcher<Unit>()
@@ -71,22 +79,23 @@ class LibVlcPlayerView(
     val onFirstPlay by EventDispatcher<MediaInfo>()
     val onForeground by EventDispatcher<Unit>()
     val onBackground by EventDispatcher<Unit>()
+    val onPictureInPictureStart by EventDispatcher<Unit>()
+    val onPictureInPictureStop by EventDispatcher<Unit>()
 
     init {
         MediaPlayerManager.registerExpoView(this)
-        addPlayerView()
     }
 
     override fun onAttachedToWindow() {
         super.onAttachedToWindow()
 
-        attachPlayer()
+        attachPlayerView(playerView)
     }
 
     override fun onDetachedFromWindow() {
         super.onDetachedFromWindow()
 
-        detachPlayer()
+        detachPlayerView()
     }
 
     override fun onSizeChanged(
@@ -116,12 +125,14 @@ class LibVlcPlayerView(
         var args = options
         args.toggleStartPausedOption(autoplay)
 
+        MediaPlayerManager.pictureInPictureManager.setupPipManager(this)
+
         libVLC = LibVLC(context, args)
         setDialogCallbacks(libVLC!!)
 
         mediaPlayer = MediaPlayer(libVLC!!)
         setPlayerListener(mediaPlayer!!)
-        attachPlayerView()
+        attachPlayerView(playerView)
 
         try {
             URI(source)
@@ -137,6 +148,8 @@ class LibVlcPlayerView(
 
         firstPlay = true
         shouldInit = false
+
+        addPlayerView(playerView)
     }
 
     fun resetPlayer() {
@@ -145,8 +158,8 @@ class LibVlcPlayerView(
     }
 
     fun attachPlayer() {
-        attachPlayerView()
-        addPlayerView()
+        attachPlayerView(playerView)
+        addPlayerView(playerView)
     }
 
     fun detachPlayer() {
@@ -154,12 +167,12 @@ class LibVlcPlayerView(
         removePlayerView()
     }
 
-    fun attachPlayerView() {
+    fun attachPlayerView(view: VLCVideoLayout) {
         mediaPlayer?.let { player ->
             val attached = player.getVLCVout().areViewsAttached()
 
             if (!attached) {
-                player.attachViews(playerView, DISPLAY_MANAGER, ENABLE_SUBTITLES, USE_TEXTURE_VIEW)
+                player.attachViews(view, DISPLAY_MANAGER, ENABLE_SUBTITLES, USE_TEXTURE_VIEW)
             }
         }
     }
@@ -174,11 +187,11 @@ class LibVlcPlayerView(
         }
     }
 
-    fun addPlayerView() {
+    fun addPlayerView(view: VLCVideoLayout) {
         val parent = playerView.parent as? ViewGroup
 
         if (parent == null) {
-            addView(playerView)
+            addView(view)
         }
     }
 
@@ -514,6 +527,12 @@ class LibVlcPlayerView(
             field = value
         }
 
+    var pictureInPicture: Boolean = false
+        set(value) {
+            field = value
+            shouldInit = true
+        }
+
     fun play() {
         mediaPlayer?.let { player ->
             if (!autoplay) {
@@ -529,10 +548,21 @@ class LibVlcPlayerView(
     }
 
     fun pauseIf(condition: Boolean? = true) {
-        mediaPlayer?.let { player ->
-            val shouldPause = condition == true && player.isPlaying()
-            if (shouldPause) player.pause()
-        }
+        cancelPauseIf()
+
+        pauseIfJob =
+            CoroutineScope(Dispatchers.Main).launch {
+                delay(MediaPlayerConstants.COROUTINE_DELAY_MS)
+
+                mediaPlayer?.let { player ->
+                    val shouldPause = condition == true && player.isPlaying()
+                    if (shouldPause) player.pause()
+                }
+            }
+    }
+
+    fun cancelPauseIf() {
+        pauseIfJob?.cancel()
     }
 
     fun stop() {
@@ -630,6 +660,20 @@ class LibVlcPlayerView(
         }
     }
 
+    fun startPictureInPicture() {
+        MediaPlayerManager.pictureInPictureManager.startPictureInPicture(this)
+    }
+
+    fun onStartPictureInPicture() {
+        MediaPlayerManager.pictureInPictureManager.layoutForPipEnter()
+        onPictureInPictureStart(Unit)
+    }
+
+    fun onStopPictureInPicture() {
+        MediaPlayerManager.pictureInPictureManager.layoutForPipExit()
+        onPictureInPictureStop(Unit)
+    }
+
     fun retryUntil(
         maxRetries: Int = MediaPlayerConstants.MAX_RETRY_COUNT,
         retry: Int = 0,
@@ -707,6 +751,7 @@ fun LibVlcPlayerView.setPlayerListener(mediaPlayer: MediaPlayer?) {
                             }
                         }
 
+                        MediaPlayerManager.pictureInPictureManager.setPipActions()
                         MediaPlayerManager.keepAwakeManager.toggleKeepAwake()
 
                         retryUntil { isLastAttempt ->

package/android/src/main/java/expo/modules/libvlcplayer/constants/MediaPlayerConstants.kt

@@ -7,6 +7,15 @@ object MediaPlayerConstants {
     const val MIN_PLAYER_VOLUME: Int = 0
     const val MAX_PLAYER_VOLUME: Int = 100
 
+    const val ACTION_PIP_CONTROL: String = "pip_control"
+    const val EXTRA_CONTROL_TYPE: String = "control_type"
+    const val EXTRA_CONTROL_REWIND: Int = 1
+    const val EXTRA_CONTROL_PLAY: Int = 2
+    const val EXTRA_CONTROL_PAUSE: Int = 3
+    const val EXTRA_CONTROL_FORWARD: Int = 4
+    const val SEEK_STEP_MS: Long = 10_000L
+
+    const val COROUTINE_DELAY_MS: Long = 1_000L
     const val RETRY_DELAY_MS: Long = 200L
     const val MAX_RETRY_COUNT: Int = 5
 }

package/android/src/main/java/expo/modules/libvlcplayer/managers/MediaPlayerManager.kt

@@ -8,6 +8,7 @@ import java.util.WeakHashMap
 object MediaPlayerManager {
     lateinit var audioFocusManager: AudioFocusManager
     lateinit var keepAwakeManager: KeepAwakeManager
+    lateinit var pictureInPictureManager: PictureInPictureManager
 
     val expoViews: MutableSet<LibVlcPlayerView> = Collections.newSetFromMap(WeakHashMap())
 
@@ -27,6 +28,10 @@ object MediaPlayerManager {
         if (!this::keepAwakeManager.isInitialized) {
             keepAwakeManager = KeepAwakeManager(appContext)
         }
+
+        if (!this::pictureInPictureManager.isInitialized) {
+            pictureInPictureManager = PictureInPictureManager(appContext)
+        }
     }
 
     fun onModuleDestroy() {
@@ -38,6 +43,8 @@ object MediaPlayerManager {
     fun onModuleForeground() {
         expoViews.forEach { view ->
             view.onForeground(Unit)
+            view.cancelPauseIf()
+            view.isInBackground = false
         }
     }
 
@@ -45,6 +52,7 @@ object MediaPlayerManager {
         expoViews.forEach { view ->
             view.onBackground(Unit)
             view.pauseIf()
+            view.isInBackground = true
         }
     }
 }