railbird/react-native-video
10
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: implement enterPictureInPictureOnLeave prop for both platform (Android, iOS) (#3385)

Browse Source 
* docs: enable Android PIP

* chore: change comments

* feat(android): implement Android PictureInPicture

* refactor: minor refactor code and apply lint

* fix: rewrite pip action intent code for Android14

* fix: remove redundant codes

* feat: add isInPictureInPicture flag for lifecycle handling

- activity provide helper method for same purpose, but this flag makes code simple

* feat: add pipFullscreenPlayerView for makes PIP include video only

* fix: add manifest value checker for prevent crash

* docs: add pictureInPicture prop's Android guide

* fix: sync controller visibility

* refactor: refining variable name

* fix: check multi window mode when host pause

- some OS version call onPause on multi-window mode

* fix: handling when onStop is called while in multi-window mode

* refactor:  enhance PIP util codes

* fix: fix FullscreenPlayerView constructor

* refactor: add enterPictureInPictureOnLeave prop and pip methods

- remove pictureInPicture boolean prop
- add enterPictureInPictureOnLeave boolean prop
- add enterPictureInPicture method
- add exitPictureInPicture method

* fix: fix lint error

* fix: prevent audio play in background without playInBackground prop

* fix: fix onDetachedFromWindow

* docs: update docs for pip

* fix(android): sync pip controller with external controller state

- for media session

* fix(ios): fix pip active fn variable reference

* refactor(ios): refactor code

* refactor(android): refactor codes

* fix(android): fix lint error

* refactor(android): refactor android pip logics

* fix(android): fix flickering issue when stop picture in picture

* fix(android): fix import

* fix(android): fix picture in picture with fullscreen mode

* fix(ios): fix syntax error

* fix(android): fix Fragment managed code

* refactor(android): remove redundant override lifecycle

* fix(js): add PIP type definition for codegen

* fix(android): fix syntax

* chore(android): fix lint error

* fix(ios): fix enter background handler

* refactor(ios): remove redundant code

* fix(ios): fix applicationDidEnterBackground for PIP

* fix(android): fix onPictureInPictureStatusChanged

* fix(ios): fix RCTPictureInPicture

* refactor(android): Ignore exception for some device ignore pip checker

- some device ignore PIP availability check, so we need to handle exception to prevent crash

* fix(android): add hideWithoutPlayer fn into Kotlin ver

* refactor(android): remove redundant code

* fix(android): fix pip ratio to be calculated with correct ratio value

* fix(android): fix crash issue when unmounting in PIP mode

* fix(android): fix lint error

* Update android/src/main/java/com/brentvatne/react/VideoManagerModule.kt

* fix(android): fix lint error

* fix(ios): fix lint error

* fix(ios): fix lint error

* feat(expo): add android picture in picture config within expo plugin

* fix: Replace Fragment with androidx.activity

- remove code that uses Fragment, which is a tricky implementation

* fix: fix lint error

* fix(android): disable auto enter when player released

* fix(android): fix event handler to check based on Activity it's bound to

---------

Co-authored-by: jonghun <jonghun@toss.im>
Co-authored-by: Olivier Bouillet <62574056+freeboub@users.noreply.github.com>
This commit is contained in:
YangJH
2025-01-04 20:37:33 +09:00
committed by GitHub
parent a735a4a581
commit 69a7bc2d26
28 changed files with 739 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/pages/component/events.mdx
View File

@@ -317,7 +317,7 @@ Example:
### `onPictureInPictureStatusChanged`
<PlatformsList types={['iOS']} />
<PlatformsList types={['iOS', 'Android']} />
Callback function that is called when picture in picture becomes active or inactive.

50
docs/pages/component/methods.mdx
View File

@@ -78,6 +78,56 @@ Future:
- Will support more formats in the future through options
- Will support custom directory and file name through options
### `enterPictureInPicture`
<PlatformsList types={['Android', 'iOS']} />
`enterPictureInPicture()`
To use this feature on Android with Expo, you must set 'enableAndroidPictureInPicture' true within expo plugin config (app.json)
```json
"plugins": [
[
"react-native-video",
{
"enableAndroidPictureInPicture": true,
}
]
]
```
To use this feature on Android with Bare React Native, you must:
- [Declare PiP support](https://developer.android.com/develop/ui/views/picture-in-picture#declaring) in your AndroidManifest.xml
- setting `android:supportsPictureInPicture` to `true`
```xml
<activity
android:name=".MainActivity"
...
android:supportsPictureInPicture="true">
```
NOTE: Foreground picture in picture is not supported on Android due to limitations of react native (Single Activity App). So, If you call `enterPictureInPicture`, application will switch to background on Android.
NOTE: Video ads cannot start when you are using the PIP on iOS (more info available at [Google IMA SDK Docs](https://developers.google.com/interactive-media-ads/docs/sdks/ios/client-side/picture_in_picture?hl=en#starting_ads)). If you are using custom controls, you must hide your PIP button when you receive the `STARTED` event from `onReceiveAdEvent` and show it again when you receive the `ALL_ADS_COMPLETED` event.
### `exitPictureInPicture`
<PlatformsList types={['Android', 'iOS']} />
`exitPictureInPicture()`
Exits the active picture in picture; if it is not active, the function call is ignored.
### `restoreUserInterfaceForPictureInPictureStopCompleted`
<PlatformsList types={['iOS']} />
`restoreUserInterfaceForPictureInPictureStopCompleted(restored)`
This function corresponds to the completion handler in Apple's [restoreUserInterfaceForPictureInPictureStop](https://developer.apple.com/documentation/avkit/avpictureinpicturecontrollerdelegate/1614703-pictureinpicturecontroller?language=objc). IMPORTANT: This function must be called after `onRestoreUserInterfaceForPictureInPictureStop` is called.
### `seek`
<PlatformsList types={['All']} />

47
docs/pages/component/props.mdx
View File

@@ -252,6 +252,42 @@ To setup DRM please follow [this guide](/component/drm)
> ⚠️ DRM is not supported on visionOS yet
### `enterPictureInPictureOnLeave`
<PlatformsList types={['iOS', 'Android']} />
Determine whether to play media as a picture in picture when the user goes to the background.
- **false (default)** - Don't not play as picture in picture
- **true** - Play the media as picture in picture
To use this feature on Android with Expo, you must set 'enableAndroidPictureInPicture' true within expo plugin config (app.json)
```json
"plugins": [
[
"react-native-video",
{
"enableAndroidPictureInPicture": true,
}
]
]
```
To use this feature on Android with Bare React Native, you must:
- [Declare PiP support](https://developer.android.com/develop/ui/views/picture-in-picture#declaring) in your AndroidManifest.xml
- setting `android:supportsPictureInPicture` to `true`
```xml
<activity
android:name=".MainActivity"
...
android:supportsPictureInPicture="true">
```
NOTE: Video ads cannot start when you are using the PIP on iOS (more info available at [Google IMA SDK Docs](https://developers.google.com/interactive-media-ads/docs/sdks/ios/client-side/picture_in_picture?hl=en#starting_ads)). If you are using custom controls, you must hide your PIP button when you receive the `STARTED` event from `onReceiveAdEvent` and show it again when you receive the `ALL_ADS_COMPLETED` event.
### `filter`
<PlatformsList types={['iOS', 'visionOS']} />
@@ -425,17 +461,6 @@ Controls whether the media is paused
- **false (default)** - Don't pause the media
- **true** - Pause the media
### `pictureInPicture`
<PlatformsList types={['iOS']} />
Determine whether the media should played as picture in picture.
- **false (default)** - Don't not play as picture in picture
- **true** - Play the media as picture in picture
NOTE: Video ads cannot start when you are using the PIP on iOS (more info available at [Google IMA SDK Docs](https://developers.google.com/interactive-media-ads/docs/sdks/ios/client-side/picture_in_picture?hl=en#starting_ads)). If you are using custom controls, you must hide your PIP button when you receive the `STARTED` event from `onReceiveAdEvent` and show it again when you receive the `ALL_ADS_COMPLETED` event.
### `playInBackground`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />

2
docs/pages/index.md
View File

@@ -13,7 +13,7 @@ It allows to stream video files (m3u, mpd, mp4, ...) inside your react native ap
- Subtitles (embeded or side loaded)
- DRM support
- Client side Ads insertion (via google IMA)
- Pip (ios)
- Pip
- Embedded playback controls
- And much more

3
docs/pages/other/expo.md
View File

@@ -37,4 +37,5 @@ It's useful when you are using `expo` managed workflow (expo prebuild) as it wil
| enableBackgroundAudio | boolean | false | Add required changes to play video in background on iOS |
| enableADSExtension | boolean | false | Add required changes to use ads extension for video player |
| enableCacheExtension | boolean | false | Add required changes to use cache extension for video player on iOS |
| androidExtensions | object | {} | You can enable/disable extensions as per your requirement - this allow to reduce library size on android |
| androidExtensions | object | {} | You can enable/disable extensions as per your requirement - this allow to reduce library size on android |
| enableAndroidPictureInPicture | boolean | false | Apply configs to be able to use Picture-in-picture on android |