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] =?UTF-8?q?feat/add-caption-control=20=F0=9F=91=89=20fix?=
 =?UTF-8?q?=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
    */