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

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

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
+| Property | Type    | Description                                                                                                |
---- | --- | ---
+| -------- | ------- | ---------------------------------------------------------------------------------------------------------- |
-index | number | Index number of the track
+| index    | number  | Internal track ID                                                                                          |
-title | string | Description of the track
+| title    | string  | Descriptive name for 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
+| language | string  | 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language |
-type | string | Mime type of track
+| 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: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0, selected: true },
-    {language: 'en', title: 'English', type: 'audio/mpeg', index: 1},
+    { 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']} />

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,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

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"
-```

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
+It allows to stream video files (m3u, mpd, mp4, ...) inside your react native application.
-> ⚠️ **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!
+
+- 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
-
-```

docs/pages/installation.md

@@ -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
-```
-

docs/pages/other/misc.md

@@ -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.

src/specs/VideoNativeComponent.ts

@@ -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>;

src/types/video.ts

@@ -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;