feat(caption): Add caption control

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,11 @@ const AnimatedVideoPlayer = (
               seekerPosition={seekerPosition}
               setSeekerWidth={setSeekerWidth}
               isFullscreen={isFullscreen}
+              isCaption={isCaption}
               disableFullscreen={disableFullscreen}
+              disableCaption={disableCaption}
               toggleFullscreen={toggleFullscreen}
+              toggleCaption={toggleCaption}
               showControls={showControls}
             />
           </>

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,
+  },
 });

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,
+  },
+});

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
    *