From 3deda8f6f02640ebc5ccdee4b0ef58fcea79a410 Mon Sep 17 00:00:00 2001
From: Ovidiu Cristescu <55203625+LunatiqueCoder@users.noreply.github.com>
Date: Fri, 31 May 2024 22:14:41 +0300
Subject: [PATCH] Update README.md

---
 packages/media-console/README.md | 48 ++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/packages/media-console/README.md b/packages/media-console/README.md
index bd472e6..3c9e4a0 100644
--- a/packages/media-console/README.md
+++ b/packages/media-console/README.md
@@ -6,19 +6,20 @@
 [![GitHub top language][9]][10]
 [![Maintenance][11]][12]
 [![npm][13]][14]
-
 <!-- [![ci][1]][2] -->
 
 VideoPlayer for the React Native `<Video/>` component at [react-native-video][15].
 
 [![demogif][16]][17]
 
+### ⚠️ **Note:**
+> 
+> We're only supporting the beta version of `react-native-video`. Since it looks stable enough except for the subtitles (which might still be a WIP at the time of writing), we're already using it in production at http://englishdiscoveries.net/
+
 ## ⭐️ Features
 
 This package contains a simple set of GUI controls that work with the [react-native-video][15] `<Video>` component.
-
 - [x] `react-native-reanimated`
-- [x] tvOS support (partially, PRs are welcome)
 - [x] Back Button
 - [x] Volume bar
 - [x] Fullscreen button
@@ -29,7 +30,6 @@ This package contains a simple set of GUI controls that work with the [react-nat
 - [x] Error handling
 - [x] Timer
 - [ ] Rate button
-- [ ] Caption button
 
 By default the `<VideoPlayer>` accepts a navigator property from React's built-in `<Navigator>` which pops the current
 scene off the stack when tapped. Alternatively you can provide your own onBack prop to the component to override this
@@ -65,21 +65,21 @@ the current scene off the stack. This can be overridden if desired, see the [API
 ```javascript
 // At the top where our imports are...
 import VideoPlayer from 'react-native-media-console';
-// 👇 if you use react-native-reanimated
+// 👇 if you use react-native-reanimated 
 import {useAnimations} from '@react-native-media-console/reanimated';
 
 // in the component's render() function
 <VideoPlayer
-  useAnimations={useAnimations}
-  source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
-  navigator={props.navigator}
+    useAnimations={useAnimations}
+    source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
+    navigator={props.navigator}
 />;
 ```
 
 To play a local file, use require syntax like so:
 
 ```js
-<VideoPlayer source={require('path/to/file')} />
+<VideoPlayer source={require('path/to/file')}/>
 ```
 
 ## 🧰 API
@@ -94,10 +94,10 @@ the `<VideoPlayer />` and it will pass them through to the `<Video />` component
 In addition, the `<VideoPlayer />` also takes these props:
 
 | Prop                         | Type                                          | Default                                  | Description                                                                                                                                                            |
-| ---------------------------- | --------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
+|------------------------------|-----------------------------------------------|------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | alwaysShowControls           | Boolean                                       | false                                    | Always show controls.                                                                                                                                                  |
 | controlAnimationTiming       | Integer                                       | 500                                      | The amount of time (in milliseconds) to animate the controls in and out.                                                                                               |
-| controlTimeoutDelay          | Integer                                       | 15000                                    | Hide controls after X amount of time in milliseconds                                                                                                                   |     |
+| controlTimeoutDelay          | Integer                                       | 15000                                    | Hide controls after X amount of time in milliseconds                                                                                                                   |                           |
 | doubleTapTime                | Integer                                       | 130                                      | Tapping twice within this amount of time in milliseconds is considered a double tap. Single taps will not be actioned until this time has expired.                     |
 | isFullscreen                 | Boolean                                       | false                                    | The VideoPlayer fullscreen state                                                                                                                                       |
 | navigator                    | Navigator                                     | null                                     | When using the default React Native navigator and do not override the `onBack` function, you'll need to pass the navigator to the VideoPlayer for it to function       |
@@ -120,7 +120,7 @@ In addition, the `<VideoPlayer />` also takes these props:
 These are various events that you can hook into and fire functions on in the component:
 
 | Callback          | Description                                                                     |
-| ----------------- | ------------------------------------------------------------------------------- |
+|-------------------|---------------------------------------------------------------------------------|
 | onEnterFullscreen | Fired when the video enters fullscreen after the fullscreen button is pressed   |
 | onExitFullscreen  | Fired when the video exits fullscreen after the fullscreen button is pressed    |
 | onHideControls    | Fired when the controls disappear                                               |
@@ -137,7 +137,7 @@ These are the various controls that you can turn on/off as needed. All of these
 disable any controls
 
 | Control            | Description                                                                                                                         |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
+|--------------------|-------------------------------------------------------------------------------------------------------------------------------------|
 | disableFullscreen  | Hide the fullscreen button                                                                                                          |
 | disablePlayPause   | Hide the play/pause toggle and the rewind/forward buttons                                                                           |
 | disableSeekButtons | Hide the rewind/forward buttons (but not play/pause)                                                                                |
@@ -164,27 +164,47 @@ disable any controls
 ## 🏆 Sponsors
 
 |                           |                                |
-| ------------------------- | ------------------------------ |
+|---------------------------|--------------------------------|
 | [![jetbrains100][18]][19] | [![englishdislogo100][20]][21] |
 
 [1]: https://github.com/LunatiqueCoder/react-native-media-console/workflows/ci/badge.svg
+
 [2]: https://github.com/LunatiqueCoder/react-native-media-console/actions
+
 [3]: https://img.shields.io/badge/platforms-Android%20%7C%20iOS%20%7C%20tvOS-brightgreen.svg?style=flat-square&colorB=191A17
+
 [4]: https://github.com/react-native-tvos/react-native-tvos
+
 [5]: https://img.shields.io/github/issues/LunatiqueCoder/react-native-media-console
+
 [6]: https://github.com/LunatiqueCoder/react-native-media-console/issues
+
 [7]: https://img.shields.io/github/license/LunatiqueCoder/react-native-media-console
+
 [8]: https://github.com/LunatiqueCoder/react-native-media-console/blob/master/LICENSE
+
 [9]: https://img.shields.io/github/languages/top/LunatiqueCoder/react-native-media-console
+
 [10]: https://github.com/LunatiqueCoder/react-native-media-console/search?l=typescript
+
 [11]: https://img.shields.io/maintenance/yes/2025
+
 [12]: https://github.com/LunatiqueCoder/react-native-media-console/graphs/contributors
+
 [13]: https://img.shields.io/npm/v/react-native-media-console
+
 [14]: https://www.npmjs.com/package/react-native-media-console
+
 [15]: https://github.com/react-native-video/react-native-video
+
 [16]: https://user-images.githubusercontent.com/55203625/159137837-4e34a8be-1cbb-48ae-9d67-99ce4922e660.gif
+
 [17]: https://user-images.githubusercontent.com/55203625/159138065-cf3554b6-3f8b-4cab-bf94-0f3fc0b57333.gif
+
 [18]: https://user-images.githubusercontent.com/55203625/213786907-b95dfb4b-08bf-4449-a055-72edf401da23.png
+
 [19]: https://www.jetbrains.com/
+
 [20]: https://user-images.githubusercontent.com/55203625/213786736-1d0226de-f810-4ece-968f-08c81c769948.png
+
 [21]: https://englishdiscoveries.page.link/fJc4