From b2a1244f9718e1f9984b47a96f041586a5ace456 Mon Sep 17 00:00:00 2001
From: albuFlaviu <flaviu.albu@redbeesoftware.com>
Date: Fri, 24 Nov 2023 13:55:04 +0200
Subject: [PATCH 1/4] react-native-video@6.0.0-beta

---
 packages/media-console/package.json        |  7 ++-----
 packages/media-console/src/VideoPlayer.tsx | 15 +++++++++------
 packages/media-console/src/types.ts        |  7 +++----
 packages/media-console/tsconfig.json       |  1 -
 yarn.lock                                  |  5 +++++
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/media-console/package.json b/packages/media-console/package.json
index a4b2f8e..9228bf5 100644
--- a/packages/media-console/package.json
+++ b/packages/media-console/package.json
@@ -24,18 +24,15 @@
     "prepare": "bob build",
     "release": "release-it"
   },
-  "dependencies": {},
   "peerDependencies": {
-    "react-native": ">=0.46.0",
-    "react-native-video": ">=2.0.0"
+    "react-native": ">=0.46.0"
   },
   "devDependencies": {
-    "@types/react-native-video": "^5.0.14",
     "react": "^17.0.2",
     "react-native": "npm:react-native-tvos@0.68.2-5",
     "react-native-builder-bob": "^0.18.2",
-    "react-native-video": "^5.2.0",
     "react-native-reanimated": "^2.12.0",
+    "react-native-video": "6.0.0-beta.0",
     "typescript": "^4.6.2"
   },
   "react-native": "src/index.ts",
diff --git a/packages/media-console/src/VideoPlayer.tsx b/packages/media-console/src/VideoPlayer.tsx
index ae20078..41e2860 100644
--- a/packages/media-console/src/VideoPlayer.tsx
+++ b/packages/media-console/src/VideoPlayer.tsx
@@ -2,8 +2,11 @@ import React, {useCallback, useState, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import Video, {
   OnLoadData,
+  OnLoadStartData,
   OnProgressData,
   OnSeekData,
+  ResizeMode,
+  VideoRef,
 } from 'react-native-video';
 import {useControlTimeout, useJSAnimations, usePanResponders} from './hooks';
 import {
@@ -29,7 +32,7 @@ const AnimatedVideoPlayer = (
     animations,
     toggleResizeModeOnFullscreen,
     doubleTapTime = 130,
-    resizeMode = 'contain',
+    resizeMode = ResizeMode.CONTAIN,
     isFullscreen = false,
     showOnStart = false,
     showOnEnd = false,
@@ -75,12 +78,12 @@ const AnimatedVideoPlayer = (
   } = props;
 
   const mounted = useRef(false);
-  const _videoRef = useRef<Video>(null);
+  const _videoRef = useRef<VideoRef>(null);
   const controlTimeout = useRef<ReturnType<typeof setTimeout>>(
     setTimeout(() => {}),
   ).current;
   const tapActionTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [_resizeMode, setResizeMode] = useState(resizeMode);
+  const [_resizeMode, setResizeMode] = useState<ResizeMode>(resizeMode);
   const [_paused, setPaused] = useState<boolean>(paused);
   const [_muted, setMuted] = useState<boolean>(muted);
   const [_volume, setVolume] = useState<number>(volume);
@@ -150,11 +153,11 @@ const AnimatedVideoPlayer = (
     setLoading(false);
   };
 
-  function _onLoadStart() {
+  function _onLoadStart(e: OnLoadStartData) {
     setLoading(true);
 
     if (typeof onLoadStart === 'function') {
-      onLoadStart();
+      onLoadStart(e);
     }
   }
 
@@ -298,7 +301,7 @@ const AnimatedVideoPlayer = (
 
   useEffect(() => {
     if (toggleResizeModeOnFullscreen) {
-      setResizeMode(_isFullscreen ? 'cover' : 'contain');
+      setResizeMode(_isFullscreen ? ResizeMode.COVER : ResizeMode.CONTAIN);
     }
 
     if (_isFullscreen) {
diff --git a/packages/media-console/src/types.ts b/packages/media-console/src/types.ts
index 766ca8b..eac7878 100644
--- a/packages/media-console/src/types.ts
+++ b/packages/media-console/src/types.ts
@@ -2,8 +2,7 @@ import type {RefObject} from 'react';
 import type {ViewStyle, StyleProp, Animated} from 'react-native';
 import type Reanimated from 'react-native-reanimated';
 import type {StyleProps} from 'react-native-reanimated';
-import type VideoResource from 'react-native-video';
-import type {VideoProperties} from 'react-native-video';
+import type {VideoRef, ReactVideoProps} from 'react-native-video';
 
 export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
   [Property in Key]-?: Type[Property];
@@ -18,7 +17,7 @@ export type VideoAnimations = {
   controlsOpacity: StyleProps;
 };
 
-export interface VideoPlayerProps extends VideoProperties {
+export interface VideoPlayerProps extends ReactVideoProps {
   animations?: VideoAnimations;
   useAnimations?: (controlAnimationTiming: number) => VideoAnimations;
   /**
@@ -236,7 +235,7 @@ export interface VideoPlayerProps extends VideoProperties {
    *
    * @default false
    */
-  videoRef?: RefObject<VideoResource>;
+  videoRef?: RefObject<VideoRef>;
 
   /**
    * Number of seconds to rewind or forward.
diff --git a/packages/media-console/tsconfig.json b/packages/media-console/tsconfig.json
index b983a3f..8463a29 100644
--- a/packages/media-console/tsconfig.json
+++ b/packages/media-console/tsconfig.json
@@ -3,7 +3,6 @@
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "esModuleInterop": true,
-    "importsNotUsedAsValues": "error",
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "lib": [
diff --git a/yarn.lock b/yarn.lock
index 6c068c6..b2b6ddb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10276,6 +10276,11 @@ react-native-reanimated@^2.12.0:
     setimmediate "^1.0.5"
     string-hash-64 "^1.0.3"
 
+react-native-video@6.0.0-beta.0:
+  version "6.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/react-native-video/-/react-native-video-6.0.0-beta.0.tgz#c6c3c21f3d46e66dfc942f61dc65dc89ca6b5ff5"
+  integrity sha512-PZrwrbVKvIyDdRImV76T75/Cmilx5TC1H78D5/rPOsiE/LKabWWXUDNZeNx8hdwcmdPxtGHK77BdLq8S1qYAmQ==
+
 react-native-video@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/react-native-video/-/react-native-video-5.2.0.tgz#c3f2c541775f4fda7e0d26d75a6fb59819b13d5e"

From 0b5de715e6426e4d3c0186fa13574cbb99695c1a Mon Sep 17 00:00:00 2001
From: albuFlaviu <flaviu.albu@redbeesoftware.com>
Date: Wed, 17 Jan 2024 16:14:18 +0200
Subject: [PATCH 2/4] feat(caption): Add caption control

---
 packages/media-console/src/VideoPlayer.tsx    |   8 ++++
 .../media-console/src/assets/img/caption.png  | Bin 0 -> 367 bytes
 .../src/assets/img/caption@2x.png             | Bin 0 -> 601 bytes
 .../src/assets/img/caption@3x.png             | Bin 0 -> 903 bytes
 .../src/components/BottomControls.tsx         |  24 ++++++++++++
 .../media-console/src/components/Caption.tsx  |  35 ++++++++++++++++++
 packages/media-console/src/types.ts           |   7 ++++
 7 files changed, 74 insertions(+)
 create mode 100644 packages/media-console/src/assets/img/caption.png
 create mode 100644 packages/media-console/src/assets/img/caption@2x.png
 create mode 100644 packages/media-console/src/assets/img/caption@3x.png
 create mode 100644 packages/media-console/src/components/Caption.tsx

diff --git a/packages/media-console/src/VideoPlayer.tsx b/packages/media-console/src/VideoPlayer.tsx
index 41e2860..fda8f15 100644
--- a/packages/media-console/src/VideoPlayer.tsx
+++ b/packages/media-console/src/VideoPlayer.tsx
@@ -67,6 +67,7 @@ const AnimatedVideoPlayer = (
     disableBack = false,
     disableVolume = false,
     disableFullscreen = false,
+    disableCaption = false,
     disableTimer = false,
     disableSeekbar = false,
     disablePlayPause = false,
@@ -106,10 +107,12 @@ const AnimatedVideoPlayer = (
   const [currentTime, setCurrentTime] = useState(0);
   const [error, setError] = useState(false);
   const [duration, setDuration] = useState(0);
+  const [isCaption, setIsCaption] = useState<boolean>(false);
 
   const videoRef = props.videoRef || _videoRef;
 
   const toggleFullscreen = () => setIsFullscreen((prevState) => !prevState);
+  const toggleCaption = () => setIsCaption((prevState) => !prevState);
   const toggleControls = () =>
     setShowControls((prevState) => alwaysShowControls || !prevState);
   const toggleTimer = () => setShowTimeRemaining((prevState) => !prevState);
@@ -404,6 +407,7 @@ const AnimatedVideoPlayer = (
         <Video
           {...props}
           {...events}
+          selectedTextTrack={isCaption ? props.selectedTextTrack : undefined}
           ref={videoRef || _videoRef}
           resizeMode={_resizeMode}
           volume={_volume}
@@ -465,8 +469,12 @@ const AnimatedVideoPlayer = (
               seekerPosition={seekerPosition}
               setSeekerWidth={setSeekerWidth}
               isFullscreen={isFullscreen}
+              isCaption={isCaption}
+              //showSubtitles
               disableFullscreen={disableFullscreen}
+              disableCaption={disableCaption}
               toggleFullscreen={toggleFullscreen}
+              toggleCaption={toggleCaption}
               showControls={showControls}
             />
           </>
diff --git a/packages/media-console/src/assets/img/caption.png b/packages/media-console/src/assets/img/caption.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc87c548c7c9290699826652936d906632a440a5
GIT binary patch
literal 367
zcmV-#0g(QQP)<h;3K|Lk000e1NJLTq000^Q000*V1^@s671Uo400009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0R%}zK~#7F<(BOY
zf-n$<55fS9P&dE{WCTaR3BXAV6EFfJ5GQa1*#I}Fcjk%*mb7T<4}FrCufDnK$F(8S
zTBiU|q7;PThN=_1w5S}yl0`To%`XQCLqnG_QG`GMO#B$W#2+QXsm)LwYGAb}wbmoe
zT2!9-w%5z#z8)Drwj`zveB##{wLxw9nNU6+aE(axw6l1XuLoQsLNdOe=MA{k`W2oD
zwnWCbgJpa?Q!G=Las?5U_+Fx}w9r1Dm-zEU+*pYU8bnZ{@bx$ov7zAJ$zatRo(IlD
zRdW?BEwalq#&;$96chjV4%Ngw$dU{Jt<eRZJ3SPA#1+#(IOs3vcn2YkxXU4>Hb?*f
N002ovPDHLkV1kZwj2{31

literal 0
HcmV?d00001

diff --git a/packages/media-console/src/assets/img/caption@2x.png b/packages/media-console/src/assets/img/caption@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..9964e37efbcb0b7ea51e803adc1a2a9528f4b90f
GIT binary patch
literal 601
zcmV-f0;c_mP)<h;3K|Lk000e1NJLTq001-q001rs1^@s6XEiz&00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0q#jeK~#7F?U><l
zgD?z*MX&#x5g36H=mu=ijF1h=2F(U(CP+6(HXs|o22CeWr9v)7Cg2!Df%A9g0~_(s
zOE3rrpn!-GZB{TZE<q5SYa?VNq4tgQC8w6Kmw<L++8$vUys{xS6T>n%u^|+L1<Z?3
z?P!K*f(0-mWd2XEFub9u;|)z6Z)oaxLsz&4r1n8A!&_m?`@5<>992gZtYHuza{Y(h
z>^OD=oqGP-K)0D3&EeQ+D4kx0ERwjA4WZ-0(4pZXM{4UT$*|hb+caJ2^fH9y#FcDY
z%%@6R>RLy{SQ*-iunaoD@|TW=&=JS23}qrL0SjE|2u&+PaskC^WyqC|(5zwf#cC2`
zdT|#zZJMT)LLo$Au%mFKa~D%XXVH(r4p%z&F`PpQ>a;z1A}rr6M>Wosj)<w}uMISx
zv_gGCbAQti_by^{*E(&6jF+*ne8e6a4qf1OD>bf-tD3HK6g|`iy8a<0HpRzDhtg@x
zUmNIvLN;iIb}J2})6Y;P!sW<kO9EWtgk$K)lX@=&WBD#wRgLFBK@t~u5L+EB|GtL)
z8=1dfB$+zi(A4pUrq1FFJ<9>SQ!~v4ez9^{9>Ov>^DVcB<*@%NbGSgH%^S>{JymUM
n`Qa5)dx3fJL+y*qoVfD~7o|=HA3~#;00000NkvXXu0mjfYxn%z

literal 0
HcmV?d00001

diff --git a/packages/media-console/src/assets/img/caption@3x.png b/packages/media-console/src/assets/img/caption@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..87f8e40cd26666e3784906475cd7d23bf281f995
GIT binary patch
literal 903
zcmeAS@N?(olHy`uVBq!ia0vp^en9NP!3HGt4VkNf6lZ})WHAGSq6G*ux=u4p017e|
z2e~^jtUD+363Agmcl32+VA$Bt{U?!?fq_}Z)5S5Qg7NK~#?o5`0&VB_@EzcI$CAim
z?0B2gOFhGgv81Vl`4CH{`UZ23xd-kk<P_}fKBMhhvaM!XYTUir_nItcJ|1p&a5G|%
z(Asp`xFh1i$?z;ziFCg!eOLG*r-eS}jz2PSgX-Kn!M7VO9%bHYEmUFEeY@F{`>A;6
z?@1H4@Xo#2Y}oR(>0b>~vPSf~!t-Cw3-u_@iICxvzMf#P^u1G{%wEQ{goY>SjBQ-P
z%a0t<G%WP;nInXSX?MWoLi*!5es;mT8@Fdm@NT{TAT3y0!t>Oc(*gPmTEuHsOqDp7
z{QJOqBkx@cGaju-@q8=ywIKIGOV%SD{lFs^uNG(dTg;QHu5vlG#`EY_{w2pMu4sH|
zn-W?3D5+=F9;a!}HboPrYXzs38fAs3e!Rc1`s)1fgZx*t3KmNrKL3I3jv%wpY0J$`
z6Luvz#NI!>>`34D3ETb!uF!pU>eH1fN#(p|BWsS9^|!-k8=Vdoj*Zcra?L=X#J1__
znrG)e#n{iYDES>I#Ok7wI&Fe{XpG_%-gk_Q<u;MiCcJmuZLL)L*<N7&l*oe_M?IZ?
z2tJx@q&?%tWiL(sdo#Z}D6ZY%w&M@mqstDv)+B6sv}F28F6MOEbtc*}nO8VgREv3)
z3(TAnIWK3we4+Dy-hU!qKOLV5aO{!|nkTQl@@?%_&CNEZ7ms@W4)>9*SY9*V@#mkS
zbvpiY@AvOeWOy@g+p~KczTPz~na{ROV?Rs&^D|YU?^CY`&U|6_-qz7x^pCV`ae?*L
z*z;fbyY8Qz`c+H(D6gG@K;1C|yQ6m^_tqWZWj?U|vT5>-Snq339^Gn?*!%Ds*XBJg
z!q?k=xUCcL;+Z4wJy-RvM@XS~qBKvm#<SNV22CqBFOi=8rJC<W8GqP^|0j-hYw>RF
z+TY4PafX)n7vrTnzBfEM-WL{>^k~Wq3sp70&dy+L%nA){|HBQ6hc+wM><HmICeZgM
z$hN_7it_gzGIuu3{_7K9Aus+`{P4R298aaKt0hBU&Sx*!zw}CjVqjqO_H_^RMIY*L
V<-gjw4w!EkJYD@<);T3K0RVj)k8S_}

literal 0
HcmV?d00001

diff --git a/packages/media-console/src/components/BottomControls.tsx b/packages/media-console/src/components/BottomControls.tsx
index 86a949d..8f90f3c 100644
--- a/packages/media-console/src/components/BottomControls.tsx
+++ b/packages/media-console/src/components/BottomControls.tsx
@@ -13,6 +13,7 @@ import {Seekbar} from './Seekbar';
 import {calculateTime} from '../utils';
 import type {VideoAnimations} from '../types';
 import {styles} from './styles';
+import {Caption} from './Caption';
 
 interface BottomControlsProps {
   showControls: boolean;
@@ -34,8 +35,11 @@ interface BottomControlsProps {
   seekerPosition: number;
   setSeekerWidth: Dispatch<SetStateAction<number>>;
   isFullscreen: boolean;
+  isCaption: boolean;
   disableFullscreen: boolean;
+  disableCaption: boolean;
   toggleFullscreen: () => void;
+  toggleCaption: () => void;
 }
 
 export const BottomControls = ({
@@ -57,8 +61,11 @@ export const BottomControls = ({
   seekerPosition,
   setSeekerWidth,
   isFullscreen,
+  isCaption,
   disableFullscreen,
+  disableCaption,
   toggleFullscreen,
+  toggleCaption,
 }: BottomControlsProps) => {
   const timerControl = disableTimer ? (
     <NullControl />
@@ -100,6 +107,16 @@ export const BottomControls = ({
     />
   );
 
+  const captionControl = disableCaption ? (
+    <NullControl />
+  ) : (
+    <Caption
+      isCaption={isCaption}
+      toggleCaption={toggleCaption}
+      showControls={showControls}
+    />
+  );
+
   return (
     <AnimatedView
       style={[
@@ -114,6 +131,9 @@ export const BottomControls = ({
         <SafeAreaView style={[styles.row, _styles.bottomControlGroup]}>
           {timerControl}
           <Title title={title} />
+          <SafeAreaView style={_styles.captionContainer}>
+            {captionControl}
+          </SafeAreaView>
           {fullscreenControl}
         </SafeAreaView>
         <SafeAreaView style={styles.seekBarContainer}>
@@ -138,4 +158,8 @@ const _styles = StyleSheet.create({
     marginRight: 12,
     marginBottom: 0,
   },
+  captionContainer: {
+    marginLeft: 'auto',
+    marginBottom: 0,
+  },
 });
diff --git a/packages/media-console/src/components/Caption.tsx b/packages/media-console/src/components/Caption.tsx
new file mode 100644
index 0000000..307071b
--- /dev/null
+++ b/packages/media-console/src/components/Caption.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import {Image, StyleSheet} from 'react-native';
+import {Control} from './Control';
+
+interface CaptionProps {
+  isCaption: boolean;
+  toggleCaption: () => void;
+  showControls: boolean;
+}
+
+export const Caption = ({
+  isCaption,
+  toggleCaption,
+
+  showControls,
+}: CaptionProps) => {
+  return (
+    <Control
+      callback={toggleCaption}
+      style={[styles.caption, isCaption && styles.captionActive]}
+      disabled={!showControls}>
+      <Image source={require('../assets/img/caption.png')} />
+    </Control>
+  );
+};
+
+const styles = StyleSheet.create({
+  caption: {
+    flexDirection: 'row',
+    padding: 4,
+  },
+  captionActive: {
+    opacity: 1,
+  },
+});
diff --git a/packages/media-console/src/types.ts b/packages/media-console/src/types.ts
index eac7878..bf97086 100644
--- a/packages/media-console/src/types.ts
+++ b/packages/media-console/src/types.ts
@@ -187,6 +187,13 @@ export interface VideoPlayerProps extends ReactVideoProps {
    */
   disableFullscreen?: boolean;
 
+  /**
+   * Show the caption button
+   *
+   * @default false
+   */
+  disableCaption?: boolean;
+
   /**
    * Hide the timer
    *

From ad8492ea62017e6ff9dcd3c37babe47ad97e1262 Mon Sep 17 00:00:00 2001
From: albuFlaviu <flaviu.albu@redbeesoftware.com>
Date: Wed, 17 Jan 2024 16:25:36 +0200
Subject: [PATCH 3/4] remove comments

---
 packages/media-console/src/VideoPlayer.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/media-console/src/VideoPlayer.tsx b/packages/media-console/src/VideoPlayer.tsx
index fda8f15..6b1fcaf 100644
--- a/packages/media-console/src/VideoPlayer.tsx
+++ b/packages/media-console/src/VideoPlayer.tsx
@@ -470,7 +470,6 @@ const AnimatedVideoPlayer = (
               setSeekerWidth={setSeekerWidth}
               isFullscreen={isFullscreen}
               isCaption={isCaption}
-              //showSubtitles
               disableFullscreen={disableFullscreen}
               disableCaption={disableCaption}
               toggleFullscreen={toggleFullscreen}

From fde88533357b4f108f406a554ff541a09c7690df Mon Sep 17 00:00:00 2001
From: Ovidiu Cristescu <55203625+LunatiqueCoder@users.noreply.github.com>
Date: Fri, 19 Jan 2024 17:54:46 +0200
Subject: [PATCH 4/4] =?UTF-8?q?feat/add-caption-control=20=F0=9F=91=89=20f?=
 =?UTF-8?q?ix=20comments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/media-console/src/VideoPlayer.tsx             | 10 ++++++----
 .../media-console/src/components/BottomControls.tsx    |  6 +++---
 packages/media-console/src/components/Caption.tsx      |  7 +++----
 packages/media-console/src/types.ts                    |  2 +-
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/media-console/src/VideoPlayer.tsx b/packages/media-console/src/VideoPlayer.tsx
index 6b1fcaf..dd9335e 100644
--- a/packages/media-console/src/VideoPlayer.tsx
+++ b/packages/media-console/src/VideoPlayer.tsx
@@ -107,12 +107,12 @@ const AnimatedVideoPlayer = (
   const [currentTime, setCurrentTime] = useState(0);
   const [error, setError] = useState(false);
   const [duration, setDuration] = useState(0);
-  const [isCaption, setIsCaption] = useState<boolean>(false);
+  const [isCaptionEnabled, setIsCaptionEnabled] = useState<boolean>(false);
 
   const videoRef = props.videoRef || _videoRef;
 
   const toggleFullscreen = () => setIsFullscreen((prevState) => !prevState);
-  const toggleCaption = () => setIsCaption((prevState) => !prevState);
+  const toggleCaption = () => setIsCaptionEnabled((prevState) => !prevState);
   const toggleControls = () =>
     setShowControls((prevState) => alwaysShowControls || !prevState);
   const toggleTimer = () => setShowTimeRemaining((prevState) => !prevState);
@@ -407,7 +407,9 @@ const AnimatedVideoPlayer = (
         <Video
           {...props}
           {...events}
-          selectedTextTrack={isCaption ? props.selectedTextTrack : undefined}
+          selectedTextTrack={
+            isCaptionEnabled ? props.selectedTextTrack : undefined
+          }
           ref={videoRef || _videoRef}
           resizeMode={_resizeMode}
           volume={_volume}
@@ -469,7 +471,7 @@ const AnimatedVideoPlayer = (
               seekerPosition={seekerPosition}
               setSeekerWidth={setSeekerWidth}
               isFullscreen={isFullscreen}
-              isCaption={isCaption}
+              isCaptionEnabled={isCaptionEnabled}
               disableFullscreen={disableFullscreen}
               disableCaption={disableCaption}
               toggleFullscreen={toggleFullscreen}
diff --git a/packages/media-console/src/components/BottomControls.tsx b/packages/media-console/src/components/BottomControls.tsx
index 8f90f3c..f09f219 100644
--- a/packages/media-console/src/components/BottomControls.tsx
+++ b/packages/media-console/src/components/BottomControls.tsx
@@ -35,7 +35,7 @@ interface BottomControlsProps {
   seekerPosition: number;
   setSeekerWidth: Dispatch<SetStateAction<number>>;
   isFullscreen: boolean;
-  isCaption: boolean;
+  isCaptionEnabled: boolean;
   disableFullscreen: boolean;
   disableCaption: boolean;
   toggleFullscreen: () => void;
@@ -61,7 +61,7 @@ export const BottomControls = ({
   seekerPosition,
   setSeekerWidth,
   isFullscreen,
-  isCaption,
+  isCaptionEnabled,
   disableFullscreen,
   disableCaption,
   toggleFullscreen,
@@ -111,7 +111,7 @@ export const BottomControls = ({
     <NullControl />
   ) : (
     <Caption
-      isCaption={isCaption}
+      isCaptionEnabled={isCaptionEnabled}
       toggleCaption={toggleCaption}
       showControls={showControls}
     />
diff --git a/packages/media-console/src/components/Caption.tsx b/packages/media-console/src/components/Caption.tsx
index 307071b..b9a5e1a 100644
--- a/packages/media-console/src/components/Caption.tsx
+++ b/packages/media-console/src/components/Caption.tsx
@@ -3,21 +3,20 @@ import {Image, StyleSheet} from 'react-native';
 import {Control} from './Control';
 
 interface CaptionProps {
-  isCaption: boolean;
+  isCaptionEnabled: boolean;
   toggleCaption: () => void;
   showControls: boolean;
 }
 
 export const Caption = ({
-  isCaption,
+  isCaptionEnabled,
   toggleCaption,
-
   showControls,
 }: CaptionProps) => {
   return (
     <Control
       callback={toggleCaption}
-      style={[styles.caption, isCaption && styles.captionActive]}
+      style={[styles.caption, isCaptionEnabled && styles.captionActive]}
       disabled={!showControls}>
       <Image source={require('../assets/img/caption.png')} />
     </Control>
diff --git a/packages/media-console/src/types.ts b/packages/media-console/src/types.ts
index bf97086..1a4d439 100644
--- a/packages/media-console/src/types.ts
+++ b/packages/media-console/src/types.ts
@@ -188,7 +188,7 @@ export interface VideoPlayerProps extends ReactVideoProps {
   disableFullscreen?: boolean;
 
   /**
-   * Show the caption button
+   * Hide the caption button
    *
    * @default false
    */