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

docs: review and clean up (#3730)

Browse Source 
* fix(ts): onPlaybackRateChangeData was not correctly typed

* fix: ensure tracks are well displayed in the sample

* chore: reorder drm props

* chore: reorder events

* docs: move onAudioTracks to events

* docs: reorder and clean <PlatformsList from methods

* docs: fix props case naming

* docs: fix ordering

* docs: fix ordering & remove trackId

* chore: remove sample build from installation page

* docs: remove outdated information

* docs: remove beta information from doc landing page
This commit is contained in:
Olivier Bouillet 2024-05-04 14:36:39 +02:00 committed by GitHub
parent edbb3b60aa
commit 4c63988d12
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 104 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/pages/component/drm.mdx
View File

@ -77,6 +77,15 @@ getLicense: (spcString, contentId, licenseUrl, loadedLicenseUrl) => {
};
```
### `contentId`
<PlatformsList types={['iOS']} />
Type: string\
Default: undefined
Specify the content id of the stream, otherwise it will take the host value from `loadingRequest.request.URL.host` (f.e: `skd://testAsset` -> will take `testAsset`)
### `headers`
<PlatformsList types={['Android', 'iOS']} />
@ -121,15 +130,6 @@ You can specify the DRM type, either by string or using the exported DRMType enu
Valid values are, for Android: DRMType.WIDEVINE / DRMType.PLAYREADY / DRMType.CLEARKEY.
for iOS: DRMType.FAIRPLAY
### `contentId`
<PlatformsList types={['iOS']} />
Type: string\
Default: undefined
Specify the content id of the stream, otherwise it will take the host value from `loadingRequest.request.URL.host` (f.e: `skd://testAsset` -> will take `testAsset`)
## Common Usage Scenarios
### Send cookies to license server

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

@ -45,20 +45,22 @@ Callback function that is called when audio tracks change
Payload:
An **array** of
Property | Type | Description
--- | --- | ---
index | number | Index number of the track
title | string | Description of the track
language | string | 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) or 3 letter [ISO 639-2](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) language code
type | string | Mime type of track
| Property | Type | Description |
| -------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| index | number | Internal track ID |
| title | string | Descriptive name for the track |
| language | string | 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language |
| bitrate | number | bitrate of track |
| type | string | Mime type of track |
| selected | boolean | true if track is playing |
Example:
```javascript
{
audioTracks: [
{language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0},
{language: 'en', title: 'English', type: 'audio/mpeg', index: 1},
{ language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0, selected: true },
{ language: 'en', title: 'English', type: 'audio/mpeg', index: 1 }
];
}
```
@ -485,6 +487,28 @@ Example:
}
```
### `onTextTrackDataChanged`
<PlatformsList types={['Android', 'iOS']} />
Callback function that is called when new subtitle data is available. It provides the actual subtitle content for the current selected text track, if available (mainly WebVTT).
Payload:
| Property | Type | Description |
| ---------------- | -------- | -------------------------------------------------- |
| `subtitleTracks` | `string` | The subtitles text content in a compatible format. |
Example:
```javascript
{
subtitleTracks: "This blade has a dark past.",
}
```
For details on how to control the visibility of subtitles, see the [subtitleStyle](./props.mdx#subtitleStyle) section.
### `onTextTracks`
<PlatformsList types={['Android', 'iOS']} />
@ -516,28 +540,6 @@ Example:
}
```
### `onTextTrackDataChanged`
<PlatformsList types={['Android', 'iOS']} />
Callback function that is called when new subtitle data is available. It provides the actual subtitle content for the current selected text track, if available (mainly WebVTT).
Payload:
| Property | Type | Description |
| ---------------- | -------- | -------------------------------------------------- |
| `subtitleTracks` | `string` | The subtitles text content in a compatible format. |
Example:
```javascript
{
subtitleTracks: "This blade has a dark past.",
}
```
For details on how to control the visibility of subtitles, see the [subtitleStyle](./props.mdx#subtitleStyle) section.
### `onVideoTracks`
<PlatformsList types={['Android']} />

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

@ -12,6 +12,14 @@ This page shows the list of available methods
Take the player out of fullscreen mode.
### `pause`
<PlatformsList types={['Android', 'iOS']} />
`pause(): Promise<void>`
Pause the video.
### `presentFullscreenPlayer`
<PlatformsList types={['Android', 'iOS']} />
@ -24,14 +32,6 @@ On iOS, this displays the video in a fullscreen view controller with controls.
On Android, this puts the navigation controls in fullscreen mode. It is not a complete fullscreen implementation, so you will still need to apply a style that makes the width and height match your screen dimensions to get a fullscreen video.
### `pause`
<PlatformsList types={['Android', 'iOS']} />
`pause(): Promise<void>`
Pause the video.
### `resume`
<PlatformsList types={['Android', 'iOS']} />
@ -40,6 +40,14 @@ Pause the video.
Resume the video.
### `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.
### `save`
<PlatformsList types={['iOS']} />
@ -64,14 +72,6 @@ Future:
- Will support more formats in the future through options
- Will support custom directory and file name through options
### `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']} />
@ -143,6 +143,8 @@ Possible values are:
### `isCodecSupported`
<PlatformsList types={['Android']} />
Indicates whether the provided codec is supported level supported by device.
parameters:
@ -156,14 +158,12 @@ Possible results:
- `software` - codec is supported by software only
- `unsupported` - codec is not supported
<PlatformsList types={['Android']} />
### `isHEVCSupported`
Helper which Indicates whether the provided HEVC/1920\*1080 is supported level supported by device. It uses isCodecSupported internally.
<PlatformsList types={['Android']} />
Helper which Indicates whether the provided HEVC/1920\*1080 is supported level supported by device. It uses isCodecSupported internally.
### Example Usage
```tsx

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

@ -161,7 +161,7 @@ Determines if the player needs to throw an error when connection is lost or not
- **false (default)** - Player will throw an error when connection is lost
- **true** - Player will keep trying to buffer when network connect is lost
### `DRM`
### `drm`
<PlatformsList types={['Android', 'iOS']} />
@ -209,7 +209,7 @@ Enable video filter.
- **false (default)** - Don't enable filter
- **true** - Enable filter
### `Focusable`
### `focusable`
<PlatformsList types={['Android']} />
@ -280,6 +280,20 @@ Controls the iOS silent switch behavior
- **"ignore"** - Play audio even if the silent switch is set
- **"obey"** - Don't play audio if the silent switch is set
### `localSourceEncryptionKeyScheme`
<PlatformsList types={['iOS']} />
Set the url scheme for stream encryption key for local assets
Type: String
Example:
```
localSourceEncryptionKeyScheme="my-offline-key"
```
### `maxBitRate`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
@ -434,34 +448,6 @@ Determine whether to repeat the video when the end is reached
- **false (default)** - Don't repeat the video
- **true** - Repeat the video
### `onAudioTracks`
<PlatformsList types={['Android']} />
Callback function that is called when audio tracks change
Payload:
| Property | Type | Description |
| -------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| index | number | Internal track ID |
| title | string | Descriptive name for the track |
| language | string | 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language |
| bitrate | number | bitrate of track |
| type | string | Mime type of track |
| selected | boolean | true if track is playing |
Example:
```javascript
{
audioTracks: [
{ language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0, selected: true },
{ language: 'en', title: 'English', type: 'audio/mpeg', index: 1 }
],
}
```
### `reportBandwidth`
<PlatformsList types={['Android']} />
@ -782,11 +768,18 @@ textTracks={[
]}
```
### `trackId`
### `useSecureView`
<PlatformsList types={['Android']} />
Configure an identifier for the video stream to link the playback context to the events emitted.
Force the output to a SurfaceView and enables the secure surface.
This will override useTextureView flag.
SurfaceView is is the only one that can be labeled as secure.
- **true** - Use security
- **false (default)** - Do not use security
### `useTextureView`
@ -804,19 +797,6 @@ useTextureView can only be set at same time you're setting the source.
- **true (default)** - Use a TextureView
- **false** - Use a SurfaceView
### `useSecureView`
<PlatformsList types={['Android']} />
Force the output to a SurfaceView and enables the secure surface.
This will override useTextureView flag.
SurfaceView is is the only one that can be labeled as secure.
- **true** - Use security
- **false (default)** - Do not use security
### `volume`
<PlatformsList types={['All']} />
@ -826,17 +806,3 @@ Adjust the volume.
- **1.0 (default)** - Play at full volume
- **0.0** - Mute the audio
- **Other values** - Reduce volume
### `localSourceEncryptionKeyScheme`
<PlatformsList types={['iOS']} />
Set the url scheme for stream encryption key for local assets
Type: String
Example:
```
localSourceEncryptionKeyScheme="my-offline-key"
```

44
docs/pages/index.md
View File

@ -3,8 +3,24 @@
## About
`react-native-video` is a React Native library that provides a Video component that renders media content such as videos and streams
## Beta Information
> ⚠️ **Version 6 Beta**: The following documentation may refer to features only available through the v6.0.0 alpha releases, [please see version 5.2.x](https://github.com/react-native-video/react-native-video/blob/v5.2.0/README.md) for the current documentation!
It allows to stream video files (m3u, mpd, mp4, ...) inside your react native application.
- Exoplayer for android
- AVplayer for iOS, tvOS and visionOS
- Windows UWP for windows
- Trick mode support
- Subtitles (embeded or side loaded)
- DRM support
- Client side Ads insertion (via google IMA)
- Pip (ios)
- Embedded playback controls
- And much more
The aim of this package is to have a thin and exhaustive control of player.
## V6.0.0 Information
> ⚠️ **Version 6**: The following documentation refer to features only available through the v6.0.0 releases.
> As major rework has been done in case of doubt, you can still use [version 5.2.x, see documentation](https://github.com/react-native-video/react-native-video/blob/v5.2.0/README.md)
Version 6.x requires **react-native >= 0.68.2**
> ⚠️ from **6.0.0-beta.8** requires also **iOS >= 13.0** (default in react-native 0.73)
@ -52,27 +68,3 @@ var styles = StyleSheet.create({
},
});
```
### Version 6.0.0 breaking changes
Version 6.0.0 is introducing dozens of breaking changes, mostly through updated dependencies and significant refactoring. While the API remains compatible, the significant internal changes require full testing with your app to ensure all functionality remains operational. Please view the [Changelog](https://github.com/react-native-video/react-native-video/blob/master/CHANGELOG.md) for specific breaking changes.
### Installing Version 6.0.0 Beta
Whilst we finalise version 6.0.0 you can install the latest beta from npm
Using npm:
```bash
npm install --save react-native-video@beta
```
using yarn:
```bash
yarn add react-native-video@beta
```

20
docs/pages/installation.md
View File

@ -173,23 +173,3 @@ Select RCTVideo-tvOS
Run `pod install` in the `visionos` directory of your project
</details>
## Examples
Run `yarn xbasic install` in the root directory before running any of the examples.
### iOS Example
```bash
yarn xbasic ios
```
### Android Example
```bash
yarn xbasic android
```
### Windows Example
```bash
yarn xbasic windows
```

16
docs/pages/other/misc.md
View File

@ -60,19 +60,3 @@ The asset system [introduced in RN `0.14`](http://www.reactnative.com/react-nati
## Play in background on iOS
To enable audio to play in background on iOS the audio session needs to be set to `AVAudioSessionCategoryPlayback`. See [Apple documentation][3] for additional details. (NOTE: there is now a ticket to [expose this as a prop]( https://github.com/react-native-community/react-native-video/issues/310) )
## Examples
- See an [Example integration][1] in `react-native-login` *note that this example uses an older version of this library, before we used `export default` -- if you use `require` you will need to do `require('react-native-video').default` as per instructions above.*
- Try the included [VideoPlayer example][2] yourself:
```sh
git clone git@github.com:react-native-community/react-native-video.git
cd react-native-video/example
npm install
open ios/VideoPlayer.xcodeproj
```
Then `Cmd+R` to start the React Packager, build and run the project in the simulator.
- [Lumpen Radio](https://github.com/jhabdas/lumpen-radio) contains another example integration using local files and full screen background video.

1
src/specs/VideoNativeComponent.ts
View File

@ -310,7 +310,6 @@ export interface VideoNativeProps extends ViewProps {
minLoadRetryCount?: Int32; // Android
reportBandwidth?: boolean; //Android
subtitleStyle?: SubtitleStyle; // android
trackId?: string; // Android
useTextureView?: boolean; // Android
useSecureView?: boolean; // Android
onVideoLoad?: DirectEventHandler<OnLoadData>;

1
src/types/video.ts
View File

@ -228,7 +228,6 @@ export interface ReactVideoProps extends ReactVideoEvents, ViewProps {
shutterColor?: string; // Android
textTracks?: TextTracks;
testID?: string;
trackId?: string; // Android
useTextureView?: boolean; // Android
useSecureView?: boolean; // Android
volume?: number;