feat/add-caption-control 👉 fix comments

LunatiqueCoder · Jan 19, 2024 · fde8853 · fde8853
1 parent ad8492e
commit fde8853
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -188,7 +188,7 @@ export interface VideoPlayerProps extends ReactVideoProps {
   disableFullscreen?: boolean;
 
   /**
-   * Show the caption button
+   * Hide the caption button
    *
    * @default false
    */