@100mslive/react-native-room-kit 1.1.9 → 1.2.0

package/lib/typescript/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE1E,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CAEtB,CAAC;AAEF,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,cAAc,mBAAmB;IACjC,IAAI,SAAS;IACb,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,OAAO,KAAK;CACb;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,KAAK;CACb;AAED,oBAAY,UAAU;IACpB,kBAAkB,qBAAqB;IACvC,mBAAmB,sBAAsB;IACzC,iBAAiB,oBAAoB;IACrC,WAAW,eAAe;IAC1B,YAAY,qBAAqB;IACjC,iBAAiB,yBAAyB;IAC1C,WAAW,eAAe;IAC1B,aAAa,iBAAiB;IAC9B,iBAAiB,oBAAoB;IACrC,SAAS,cAAc;IACvB,UAAU,eAAe;IACzB,SAAS,aAAa;IACtB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,UAAU,cAAc;IACxB,UAAU,cAAc;IACxB,QAAQ,YAAY;IACpB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,qBAAqB,0BAA0B;IAC/C,iBAAiB,oBAAoB;IACrC,sBAAsB,wBAAwB;IAC9C,gBAAgB,oBAAoB;IACpC,gBAAgB,mBAAmB;IACnC,aAAa,iBAAiB;IAC9B,yBAAyB,4BAA4B;IACrD,uBAAuB,yBAAyB;IAChD,cAAc,kBAAkB;IAChC,WAAW,eAAe;IAC1B,iBAAiB,oBAAoB;IACrC,eAAe,mBAAmB;IAClC,iBAAiB,oBAAoB;IACrC,kBAAkB,sBAAsB;IACxC,OAAO,KAAK;CACb;AAED,oBAAY,WAAW;IACrB,YAAY,uBAAuB;IACnC,QAAQ,aAAa;IACrB,aAAa,kBAAkB;IAC/B,OAAO,SAAS;CACjB;AAED,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,oBAAY,QAAQ;IAClB,aAAa,KAAK;IAClB,MAAM,IAAI;IACV,QAAQ,IAAI;CACb;AAED,oBAAY,SAAS;IACnB,QAAQ,aAAa;CACtB;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;AAE7D,eAAO,MAAM,uBAAuB;;;GAMnC,CAAC;AAEF,oBAAY,iBAAiB;IAC3B,6BAA6B,IAAI;IACjC,WAAW,IAAI;IACf,YAAY,IAAI;CACjB;AAED,eAAO,MAAM,mBAAmB,mCAAoC,CAAC;AAErE,eAAO,MAAM,mBAAmB;;CAAgC,CAAC;AAEjE,eAAO,MAAM,uBAAuB,OAAO,CAAC;AAE5C,oBAAY,aAAa;IACvB;;OAEG;IACH,KAAK,UAAU;IACf;;OAEG;IACH,WAAW,gBAAgB;IAC3B;;OAEG;IACH,QAAQ,eAAe;IACvB;;OAEG;IACH,cAAc,mBAAmB;IACjC;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED,eAAO,MAAM,sBAAsB,qBAOlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,OAAO,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE1E,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CAEtB,CAAC;AAEF,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,cAAc,mBAAmB;IACjC,IAAI,SAAS;IACb,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,OAAO,KAAK;CACb;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,KAAK;CACb;AAED,oBAAY,UAAU;IACpB,kBAAkB,qBAAqB;IACvC,mBAAmB,sBAAsB;IACzC,iBAAiB,oBAAoB;IACrC,WAAW,eAAe;IAC1B,YAAY,qBAAqB;IACjC,iBAAiB,yBAAyB;IAC1C,WAAW,eAAe;IAC1B,aAAa,iBAAiB;IAC9B,iBAAiB,oBAAoB;IACrC,SAAS,cAAc;IACvB,UAAU,eAAe;IACzB,SAAS,aAAa;IACtB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,UAAU,cAAc;IACxB,UAAU,cAAc;IACxB,QAAQ,YAAY;IACpB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,qBAAqB,0BAA0B;IAC/C,iBAAiB,oBAAoB;IACrC,sBAAsB,wBAAwB;IAC9C,gBAAgB,oBAAoB;IACpC,gBAAgB,mBAAmB;IACnC,aAAa,iBAAiB;IAC9B,yBAAyB,4BAA4B;IACrD,uBAAuB,yBAAyB;IAChD,cAAc,kBAAkB;IAChC,WAAW,eAAe;IAC1B,iBAAiB,oBAAoB;IACrC,eAAe,mBAAmB;IAClC,iBAAiB,oBAAoB;IACrC,kBAAkB,sBAAsB;IACxC,uBAAuB,0BAA0B;IACjD,OAAO,KAAK;CACb;AAED,oBAAY,WAAW;IACrB,YAAY,uBAAuB;IACnC,QAAQ,aAAa;IACrB,aAAa,kBAAkB;IAC/B,OAAO,SAAS;CACjB;AAED,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,oBAAY,QAAQ;IAClB,aAAa,KAAK;IAClB,MAAM,IAAI;IACV,QAAQ,IAAI;CACb;AAED,oBAAY,SAAS;IACnB,QAAQ,aAAa;CACtB;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;AAE7D,eAAO,MAAM,uBAAuB;;;GAMnC,CAAC;AAEF,oBAAY,iBAAiB;IAC3B,6BAA6B,IAAI;IACjC,WAAW,IAAI;IACf,YAAY,IAAI;CACjB;AAED,eAAO,MAAM,mBAAmB,mCAAoC,CAAC;AAErE,eAAO,MAAM,mBAAmB;;CAAgC,CAAC;AAEjE,eAAO,MAAM,uBAAuB,OAAO,CAAC;AAE5C,oBAAY,aAAa;IACvB;;OAEG;IACH,KAAK,UAAU;IACf;;OAEG;IACH,WAAW,gBAAgB;IAC3B;;OAEG;IACH,QAAQ,eAAe;IACvB;;OAEG;IACH,cAAc,mBAAmB;IACjC;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED,eAAO,MAAM,sBAAsB,qBAOlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -157,7 +157,7 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "@100mslive/react-native-hms": "1.10.6",
+    "@100mslive/react-native-hms": "1.10.7",
     "@react-native-community/blur": "^4.3.2",
     "@react-native-masked-view/masked-view": "^0.2.9",
     "@shopify/flash-list": "^1.4.3",

package/src/components/CaptionsModalContent.tsx

@@ -0,0 +1,217 @@
+import * as React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
+import { batch, useDispatch, useSelector } from 'react-redux';
+import {
+  TranscriptionState,
+  TranscriptionsMode,
+} from '@100mslive/react-native-hms';
+
+import {
+  useHMSInstance,
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+} from '../hooks-util';
+import { CloseIcon } from '../Icons';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
+import { TestIds } from '../utils/constants';
+import { HMSDangerButton } from './HMSDangerButton';
+import { HMSSecondaryButton } from './HMSSecondaryButton';
+import type { RootState } from '../redux';
+import { addNotification, setShowClosedCaptions } from '../redux/actions';
+import { NotificationTypes } from '../types';
+
+export interface CaptionsModalContentProps {
+  dismissModal(): void;
+}
+
+export const CaptionsModalContent: React.FC<CaptionsModalContentProps> = ({
+  dismissModal,
+}) => {
+  const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    semiBoldSurfaceHigh: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    regularSurfaceMedium: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  const { on_surface_high: OnSurfaceHighColor } = useHMSRoomColorPalette();
+
+  const isCCAdmin = useSelector((state: RootState) => {
+    const captionPermission =
+      state.hmsStates.localPeer?.role?.permissions?.transcriptions?.find(
+        (element) => element.mode === TranscriptionsMode.CAPTION
+      );
+    return captionPermission?.admin || false;
+  });
+
+  const ccEnabledForEveryone = useSelector((state: RootState) => {
+    return (
+      state.hmsStates.room?.transcriptions?.some(
+        (transcription) => transcription.state === TranscriptionState.STARTED
+      ) || false
+    );
+  });
+
+  const ccEnabledForSelf = useSelector(
+    (state: RootState) => state.app.showClosedCaptions
+  );
+
+  const handleClosePress = () => {
+    dismissModal();
+  };
+
+  const enableCCForEveryone = async () => {
+    if (!isCCAdmin) return;
+    hmsInstance.startRealTimeTranscription();
+    batch(() => {
+      dispatch(setShowClosedCaptions(true));
+      dispatch(
+        addNotification({
+          id: 'enable-cc',
+          title: 'Enabling Closed Captioning for everyone',
+          icon: <ActivityIndicator size={'small'} color={OnSurfaceHighColor} />,
+          type: NotificationTypes.INFO,
+        })
+      );
+    });
+    dismissModal();
+  };
+
+  const disableCCForEveryone = async () => {
+    if (!isCCAdmin) return;
+    hmsInstance.stopRealTimeTranscription();
+    dispatch(
+      addNotification({
+        id: 'disable-cc',
+        title: 'Disabling Closed Captioning for everyone',
+        icon: <ActivityIndicator size={'small'} color={OnSurfaceHighColor} />,
+        type: NotificationTypes.INFO,
+      })
+    );
+    dismissModal();
+  };
+
+  const handleCCForSelf = async () => {
+    dispatch(setShowClosedCaptions(!ccEnabledForSelf));
+    dismissModal();
+  };
+
+  return (
+    <View>
+      {/* Header */}
+      <View style={styles.header}>
+        {ccEnabledForEveryone ? (
+          <Text
+            testID={TestIds.change_name_modal_heading}
+            style={[styles.headerText, hmsRoomStyles.semiBoldSurfaceHigh]}
+          >
+            Closed Captions (CC)
+          </Text>
+        ) : (
+          <Text
+            testID={TestIds.change_name_modal_heading}
+            style={[styles.headerText, hmsRoomStyles.semiBoldSurfaceHigh]}
+          >
+            Enable Closed Captions (CC) {'\n'}for this session?
+          </Text>
+        )}
+
+        <TouchableOpacity
+          testID={TestIds.change_name_modal_close_btn}
+          onPress={handleClosePress}
+          hitSlop={styles.closeIconHitSlop}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
+
+      {/* Content */}
+      <View style={styles.contentContainer}>
+        {ccEnabledForEveryone ? (
+          <>
+            <HMSSecondaryButton
+              style={{ marginBottom: 16 }}
+              loading={false}
+              onPress={handleCCForSelf}
+              title={ccEnabledForSelf ? 'Hide for Me' : 'Show for Me'}
+            />
+
+            <HMSDangerButton
+              loading={false}
+              onPress={disableCCForEveryone}
+              title="Disable for Everyone"
+            />
+          </>
+        ) : (
+          <HMSPrimaryButton
+            loading={false}
+            onPress={enableCCForEveryone}
+            title="Enable for Everyone"
+          />
+        )}
+
+        <Text style={[styles.subtitle, hmsRoomStyles.regularSurfaceMedium]}>
+          This will {ccEnabledForEveryone ? 'disable' : 'enable'} Closed
+          Captions for everyone in this room. You can{' '}
+          {ccEnabledForEveryone ? 'enable' : 'disable'} it later.
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    marginTop: 16,
+    marginHorizontal: 24,
+  },
+  headerControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerText: {
+    flexShrink: 1,
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  },
+  subtitle: {
+    marginTop: 16,
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+  closeIconHitSlop: {
+    bottom: 16,
+    left: 16,
+    right: 16,
+    top: 16,
+  },
+  backIcon: {
+    marginRight: 8,
+  },
+  contentContainer: {
+    paddingTop: 16,
+    marginHorizontal: 24,
+  },
+  textInput: {
+    flex: undefined,
+    marginBottom: 16,
+  },
+});

package/src/components/Chat/ChatFilterView.tsx

@@ -111,7 +111,7 @@ const _ChatFilterView: React.FC<ChatFilterViewProps> = ({ onDismiss }) => {
     }
 
     return remotePeers.filter((remotePeer) =>
-      remotePeer.name.toLowerCase().includes(formattedFilterText)
+      remotePeer.name?.toLowerCase().includes(formattedFilterText)
     );
   }, [formattedFilterText, remotePeers]);
 

package/src/components/HMSNotification.tsx

@@ -5,7 +5,7 @@ import type { StyleProp, ViewStyle, TextStyle, TextProps } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
-import { ChatIcon, CloseIcon } from '../Icons';
+import { CCIcon, ChatIcon, CloseIcon } from '../Icons';
 import { UnmountAfterDelay } from './UnmountAfterDelay';
 import { removeNotification } from '../redux/actions';
 
@@ -172,7 +172,8 @@ function getIcon(icon: string) {
     case 'chat-off':
     case 'chat-on':
       return <ChatIcon type={icon === 'chat-on' ? 'on' : 'off'} />;
-
+    case 'cc':
+      return <CCIcon style={{ width: 20, height: 20 }} />;
     default:
       return null;
   }

package/src/components/HMSNotifications.tsx

@@ -122,7 +122,7 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
               'peer' in notification ? (
               <HMSRoleChangeDeclinedNotification
                 id={notification.id}
-                peerName={notification.peer.name}
+                peerName={notification.peer.name || ''}
                 autoDismiss={atTop}
                 dismissDelay={10000}
               />

package/src/components/HMSRoomOptions.tsx

@@ -24,6 +24,7 @@ import { StopRecordingModalContent } from './StopRecordingModalContent';
 import { TestIds } from '../utils/constants';
 import { PollsAndQuizBottomSheet } from './PollsAndQuizBottomSheet';
 import { VirtualBackgroundBottomSheet } from './VirtualBackgroundBottomSheet';
+import { CaptionsModalContent } from './CaptionsModalContent';
 
 interface HMSRoomOptionsProps {}
 
@@ -77,6 +78,13 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
 
       <VirtualBackgroundBottomSheet />
 
+      <BottomSheet
+        isVisible={modalVisible === ModalTypes.CLOSED_CAPTIONS_CONTROL}
+        dismissModal={dismissModal}
+      >
+        <CaptionsModalContent dismissModal={dismissModal} />
+      </BottomSheet>
+
       <BottomSheet
         isVisible={modalVisible === ModalTypes.CHANGE_NAME}
         dismissModal={dismissModal}

package/src/components/MeetingScreenContent.tsx

@@ -35,6 +35,7 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
   const timerIdRef = useRef<NodeJS.Timeout | null>(null);
   const [controlsHidden, setControlsHidden] = useState(false);
   const isLandscapeOrientation = useIsLandscapeOrientation();
+  const prevIsLandscapeOrientation = useRef(isLandscapeOrientation);
   const isPipModeActive = useSelector(
     (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
   );
@@ -97,6 +98,26 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
     );
   }
 
+  //#region Hiding Header & Footer when user switches from Portrait to Landscape
+  if (
+    prevIsLandscapeOrientation.current === false &&
+    isLandscapeOrientation &&
+    offset.value === 1
+  ) {
+    cancelAnimation(offset);
+    offset.value = withTiming(
+      0,
+      { duration: 200, easing: Easing.ease },
+      (finished) => {
+        if (finished) {
+          runOnJS(setControlsHidden)(offset.value === 0);
+        }
+      }
+    );
+  }
+  prevIsLandscapeOrientation.current = isLandscapeOrientation;
+  //#endregion
+
   // Handles Auto hiding the controls for the first time
   // to make this feature discoverable
   useEffect(() => {

package/src/components/Participants/ParticipantsList.tsx

@@ -124,7 +124,9 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
   //#region FlashList props
   const data = React.useMemo(() => {
     return (isOffStageGroup ? offStageData : dataWithHeader).filter((item) =>
-      'id' in item ? true : item.name.toLowerCase().includes(filteredSearchText)
+      'id' in item
+        ? true
+        : item.name?.toLowerCase().includes(filteredSearchText)
     );
   }, [filteredSearchText, offStageData, dataWithHeader, isOffStageGroup]);
 

package/src/components/PeerDisplayView.tsx

@@ -55,7 +55,7 @@ const PeerDisplayViewUnmemoized = React.forwardRef<
     <View style={peerDisplayViewStyles.container}>
       {videoTrack?.isMute() || videoTrack?.trackId === undefined ? (
         <View style={styles.avatarContainer}>
-          <AvatarView userName={peer.name} />
+          <AvatarView userName={peer.name || ''} />
         </View>
       ) : (
         <View style={styles.flex}>

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -153,7 +153,7 @@ export const _PeerVideoTileView = React.forwardRef<
     return (
       <View style={styles.container}>
         <AvatarView
-          name={peer.name}
+          name={peer.name || ''}
           avatarContainerStyles={
             insetMode ? hmsRoomStyles.avatarContainer : null
           }
@@ -196,7 +196,7 @@ export const _PeerVideoTileView = React.forwardRef<
         {insetMode || isPipModeActive ? null : (
           <PeerNameAndNetwork
             isSIPPeerType={peer.type === HMSPeerType.SIP}
-            name={peer.name}
+            name={peer.name || ''}
             isLocal={peer.isLocal}
             trackSource={trackSource}
             networkQuality={peer.networkQuality?.downlinkQuality}

package/src/components/RoomSettingsModalContent.tsx

@@ -2,7 +2,11 @@ import * as React from 'react';
 import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
 import type { HMSAudioMixingMode } from '@100mslive/react-native-hms';
-import { HMSRecordingState } from '@100mslive/react-native-hms';
+import {
+  HMSRecordingState,
+  TranscriptionState,
+  TranscriptionsMode,
+} from '@100mslive/react-native-hms';
 import { useDispatch, useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
@@ -10,6 +14,7 @@ import { ModalTypes } from '../utils/types';
 import { groupIntoTriplets, parseMetadata } from '../utils/functions';
 import {
   BRBIcon,
+  CCIcon,
   HandIcon,
   ParticipantsIcon,
   PencilIcon,
@@ -41,7 +46,7 @@ import { RoomSettingsModalDebugModeContent } from './RoomSettingsModalDebugModeC
 import { ParticipantsCount } from './ParticipantsCount';
 import { selectAllowedTracksToPublish } from '../hooks-sdk-selectors';
 import { TestIds } from '../utils/constants';
-import { addNotification } from '../redux/actions';
+import { addNotification, setShowClosedCaptions } from '../redux/actions';
 import { NotificationTypes } from '../types';
 
 interface RoomSettingsModalContentProps {
@@ -285,6 +290,47 @@ export const RoomSettingsModalContent: React.FC<
   };
   // #endregion
 
+  // #region Closed Captions
+  const isCCAdmin = useSelector((state: RootState) => {
+    const captionPermission =
+      state.hmsStates.localPeer?.role?.permissions?.transcriptions?.find(
+        (element) => element.mode === TranscriptionsMode.CAPTION
+      );
+    return captionPermission?.admin || false;
+  });
+
+  const ccEnabledForEveryone = useSelector((state: RootState) => {
+    const captionTranscription = state.hmsStates.room?.transcriptions?.find(
+      (transcription) => transcription.mode === TranscriptionsMode.CAPTION
+    );
+
+    return captionTranscription
+      ? captionTranscription.state === TranscriptionState.STARTED
+      : false;
+  });
+
+  const ccEnabledForSelf = useSelector(
+    (state: RootState) => state.app.showClosedCaptions
+  );
+
+  const handleCCForSelf = () => {
+    dispatch(setShowClosedCaptions(!ccEnabledForSelf));
+
+    // Close the current bottom sheet
+    closeRoomSettingsModal();
+  };
+
+  const handleCCForEveryone = () => {
+    // Register callback to be called when bottom sheet is hiddden
+    registerOnModalHideAction(() => {
+      setModalVisible(ModalTypes.CLOSED_CAPTIONS_CONTROL);
+    });
+
+    // Close the current bottom sheet
+    closeRoomSettingsModal();
+  };
+  // #endregion
+
   const changeName = () => {
     // Register callback to be called when bottom sheet is hiddden
     registerOnModalHideAction(() => {
@@ -513,6 +559,19 @@ export const RoomSettingsModalContent: React.FC<
               hide: !videoPlugin || !canPublishVideo,
               disabled: isLocalVideoMuted,
             },
+            {
+              id: 'closed-captions',
+              icon: <CCIcon style={{ width: 20, height: 20 }} />,
+              label: isCCAdmin
+                ? 'Closed Captions'
+                : ccEnabledForSelf
+                  ? 'Hide Captions'
+                  : 'Show Captions',
+              pressHandler: isCCAdmin ? handleCCForEveryone : handleCCForSelf,
+              isActive: !isCCAdmin && ccEnabledForSelf,
+              hide: !isCCAdmin && !ccEnabledForEveryone,
+              disabled: false,
+            },
           ].filter((itm) => !itm.hide),
           true
         ).map((itm, idx) => {

package/src/components/WebrtcTranscriptOverlayView.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import { interpolate } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import { useSelector } from 'react-redux';
+import { View, Text, StyleSheet, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  useHMSInstance,
+  useHMSRoomStyleSheet,
+  useShowChatAndParticipants,
+} from '../hooks-util';
+import { useIsPortraitOrientation } from '../utils/dimension';
+import { COLORS, hexToRgbA } from '../utils/theme';
+import type { RootState } from '../redux';
+import {
+  HMSUpdateListenerActions,
+  TranscriptionState,
+} from '@100mslive/react-native-hms';
+import type { HMSTranscript } from '@100mslive/react-native-hms';
+
+export type WebrtcTranscriptOverlayViewProps = {
+  offset: SharedValue<number>;
+};
+
+const _WebrtcTranscriptOverlayView: React.FC<
+  WebrtcTranscriptOverlayViewProps
+> = ({ offset }) => {
+  const hmsInstance = useHMSInstance();
+  const isPortrait = useIsPortraitOrientation();
+  const { overlayChatVisible } = useShowChatAndParticipants();
+  const { bottom } = useSafeAreaInsets();
+  let timerId = React.useRef<NodeJS.Timeout | null>(null);
+
+  const [transcripts, setTranscripts] =
+    React.useState<Array<HMSTranscript> | null>(null);
+  const ccEnabledForSelf = useSelector(
+    (state: RootState) => state.app.showClosedCaptions
+  );
+  const ccEnabledForEveryone = useSelector((state: RootState) => {
+    return (
+      state.hmsStates.room?.transcriptions?.some(
+        (transcription) => transcription.state === TranscriptionState.STARTED
+      ) || false
+    );
+  });
+
+  React.useEffect(() => {
+    if (!ccEnabledForSelf) return;
+
+    let mounted = true;
+
+    const onTranscriptsListener = (data: any) => {
+      if (timerId.current != null) {
+        clearTimeout(timerId.current);
+      }
+      setTranscripts(data.transcripts);
+
+      timerId.current = setTimeout(() => {
+        if (mounted) {
+          setTranscripts(null);
+        }
+        timerId.current = null;
+      }, 4000);
+    };
+
+    hmsInstance.addEventListener(
+      HMSUpdateListenerActions.ON_TRANSCRIPTS,
+      onTranscriptsListener
+    );
+
+    return () => {
+      mounted = false;
+      if (timerId.current !== null) {
+        clearTimeout(timerId.current);
+        timerId.current = null;
+      }
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_TRANSCRIPTS);
+    };
+  }, [ccEnabledForSelf, hmsInstance]);
+
+  const notificationsCount = useSelector((state: RootState) => {
+    const isLocalScreenShared = state.hmsStates.isLocalScreenShared;
+    return Math.min(
+      state.app.notifications.length + (isLocalScreenShared ? 1 : 0),
+      3
+    );
+  });
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      container: {
+        backgroundColor:
+          theme.palette.background_dim &&
+          hexToRgbA(theme.palette.background_dim, 0.64),
+      },
+      regularWhite: {
+        color: COLORS.WHITE,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+      semiBoldWhite: {
+        color: COLORS.WHITE,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
+    }),
+    []
+  );
+
+  const extraBottomOffset =
+    notificationsCount > 0 ? 44 + notificationsCount * 16 : 32;
+
+  const dynamicStyles = {
+    top: overlayChatVisible ? 0 : undefined,
+    bottom: overlayChatVisible
+      ? undefined
+      : interpolate(
+          offset.value,
+          [0, 1],
+          [(!isPortrait ? bottom : 0) + extraBottomOffset, extraBottomOffset]
+        ),
+  };
+
+  if (ccEnabledForEveryone && ccEnabledForSelf && transcripts !== null) {
+    return (
+      <View
+        pointerEvents="box-none"
+        style={[styles.absoluteContainer, dynamicStyles]}
+      >
+        <View style={[styles.container, hmsRoomStyles.container]}>
+          {transcripts.map((transcript, idx) => {
+            const isFirst = idx === 0;
+            return (
+              <Text
+                key={transcript.transcript}
+                style={[
+                  styles.transcriptText,
+                  hmsRoomStyles.regularWhite,
+                  isFirst ? null : { marginTop: 8 },
+                ]}
+              >
+                <Text style={hmsRoomStyles.semiBoldWhite}>
+                  {transcript.peer.name}:
+                </Text>{' '}
+                {transcript.transcript}
+              </Text>
+            );
+          })}
+        </View>
+      </View>
+    );
+  }
+
+  return null;
+};
+
+const styles = StyleSheet.create({
+  absoluteContainer: {
+    position: 'absolute',
+    width: '100%',
+    bottom: 0,
+    zIndex: 1,
+  },
+  container: {
+    margin: 8,
+    padding: 12,
+    borderRadius: 8,
+  },
+  transcriptText: {
+    fontSize: 14,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
+  },
+});
+
+export const WebrtcTranscriptOverlayView = React.memo(
+  _WebrtcTranscriptOverlayView
+);

package/src/components/WebrtcView.tsx

@@ -25,6 +25,7 @@ import { OverlayedViews } from './OverlayedViews';
 import { useFooterHeight } from './Footer';
 import { useHeaderHeight } from './Header';
 import { View } from 'react-native';
+import { WebrtcTranscriptOverlayView } from './WebrtcTranscriptOverlayView';
 
 interface WebrtcViewProps {
   offset: SharedValue<number>;
@@ -145,6 +146,8 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
               />
             )}
 
+            <WebrtcTranscriptOverlayView offset={offset} />
+
             <OverlayedViews
               animatedStyle={overlayedAnimatedStyles}
               offset={offset}