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

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/ChatBanner.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+// @ts-ignore - Ignoring React import as it is generating error while running prepack script
+import React from 'react';
 import { View, StyleSheet, Text, Image } from 'react-native';
-
 import { useHMSRoomStyleSheet } from '../../hooks-util';
 import { useIsLandscapeOrientation } from '../../utils/dimension';
 

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/CustomButton.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore - Ignoring React import as it is generating error while running prepack script
 import React from 'react';
 import {
   StyleSheet,

package/src/components/DisplayView.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { InteractionManager, View } from 'react-native';
+import { InteractionManager, Platform, View } from 'react-native';
 import { HMSTrack, HMSCameraControl } from '@100mslive/react-native-hms';
 import type { SharedValue } from 'react-native-reanimated';
 
@@ -134,7 +134,7 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
         handlePeerTileMorePress={handlePeerTileMorePress}
       />
 
-      {isPipModeActive ? null : (
+      {isPipModeActive && Platform.OS === 'android' ? null : (
         <>
           <LeaveRoomBottomSheet />
 

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/HMSPreviewHLSLiveIndicator.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore - Ignoring React import as it is generating error while running prepack script
 import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 

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(() => {
@@ -123,7 +144,7 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
 
       <GestureDetector gesture={tapGesture}>
         <View collapsable={false} style={styles.container}>
-          {isPipModeActive ? null : (
+          {isPipModeActive && Platform.OS === 'android' ? null : (
             <AnimatedHeader offset={offset}>
               <Header />
             </AnimatedHeader>
@@ -131,7 +152,7 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
 
           <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
 
-          {isPipModeActive ? null : (
+          {isPipModeActive && Platform.OS === 'android' ? null : (
             <AnimatedFooter offset={offset}>
               <Footer />
             </AnimatedFooter>

package/src/components/MenuModal/MenuDivider.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore - Ignoring React import as it is generating error while running prepack script
 import React from 'react';
 
 import { StyleSheet, View } from 'react-native';

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/VirtualBackgroundModalContent.tsx

@@ -109,7 +109,7 @@ export const VirtualBackgroundModalContent: React.FC<
       // If PIP is enabled, disable it
       if (pipModeEnabled) {
         dispatch(setAutoEnterPipMode(false));
-        disableAutoPip();
+        disableAutoPip({});
       }
 
       const imageLibraryResponse = await ImagePicker.launchImageLibrary({