docs: review and clean up (#3730)

* 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
TheWidlarzGroup · May 4, 2024 · 4c63988 · 4c63988
1 parent edbb3b6
commit 4c63988
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 181 deletions.
diff --git a/docs/pages/component/drm.mdx b/docs/pages/component/drm.mdx
@@ -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

diff --git a/docs/pages/component/events.mdx b/docs/pages/component/events.mdx
@@ -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']} />

diff --git a/docs/pages/component/methods.mdx b/docs/pages/component/methods.mdx
@@ -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,21 +32,21 @@ 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`
+### `resume`
 
 <PlatformsList types={['Android', 'iOS']} />
 
-`pause(): Promise<void>`
+`resume(): Promise<void>`
 
-Pause the video.
+Resume the video.
 
-### `resume`
+### `restoreUserInterfaceForPictureInPictureStopCompleted`
 
-<PlatformsList types={['Android', 'iOS']} />
+<PlatformsList types={['iOS']} />
 
-`resume(): Promise<void>`
+`restoreUserInterfaceForPictureInPictureStopCompleted(restored)`
 
-Resume the video.
+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`
 
@@ -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

diff --git a/docs/pages/component/props.mdx b/docs/pages/component/props.mdx
@@ -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"
-```
diff --git a/docs/pages/index.md b/docs/pages/index.md
@@ -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
-
-```