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

package/src/hooks-util.ts

@@ -26,6 +26,8 @@ import {
   HMSPollUpdateType,
   useHMSHLSPlayerPlaybackState,
   HMSHLSPlayerPlaybackState,
+  TranscriptionsMode,
+  TranscriptionState,
 } from '@100mslive/react-native-hms';
 import type { Chat as ChatConfig } from '@100mslive/types-prebuilt/elements/chat';
 import { SoftInputModes } from '@100mslive/react-native-hms';
@@ -207,6 +209,53 @@ const useHMSRoomUpdate = (hmsInstance: HMSSDK) => {
         }
       } else if (type === HMSRoomUpdate.HLS_STREAMING_STATE_UPDATED) {
         dispatch(changeStartingHLSStream(false));
+      } else if (type === HMSRoomUpdate.TRANSCRIPTIONS_UPDATED) {
+        const captionTranscription = room.transcriptions?.find(
+          (transcription) => transcription.mode === TranscriptionsMode.CAPTION
+        );
+
+        if (captionTranscription?.state === TranscriptionState.STARTED) {
+          batch(() => {
+            dispatch(removeNotification('enable-cc'));
+            dispatch(
+              addNotification({
+                id: Math.random().toString(16).slice(2),
+                type: NotificationTypes.INFO,
+                icon: 'cc',
+                title: 'Closed Captioning enabled for everyone',
+              })
+            );
+          });
+        } else if (captionTranscription?.state === TranscriptionState.STOPPED) {
+          batch(() => {
+            dispatch(removeNotification('disable-cc'));
+            dispatch(
+              addNotification({
+                id: Math.random().toString(16).slice(2),
+                type: NotificationTypes.INFO,
+                icon: 'cc',
+                title: 'Closed Captioning disabled for everyone',
+              })
+            );
+          });
+        } else if (captionTranscription?.state === TranscriptionState.FAILED) {
+          const transcriptionError = captionTranscription.error;
+          batch(() => {
+            dispatch(removeNotification('enable-cc'));
+            dispatch(removeNotification('disable-cc'));
+            if (transcriptionError !== undefined) {
+              dispatch(
+                addNotification({
+                  id: Math.random().toString(16).slice(2),
+                  title:
+                    transcriptionError.message ||
+                    'Failed to enable/disable Closed Captions',
+                  type: NotificationTypes.ERROR,
+                })
+              );
+            }
+          });
+        }
       }
     };
 
@@ -2096,7 +2145,7 @@ export const useFilteredParticipants = (filterText: string) => {
       const filteredList =
         Array.isArray(list) && formattedSearchText.length > 0
           ? list.filter((peer) =>
-              peer.name.toLowerCase().includes(formattedSearchText)
+              peer.name?.toLowerCase().includes(formattedSearchText)
             )
           : list;
 

package/src/redux/actionTypes.ts

@@ -115,6 +115,8 @@ const SET_HLS_DESC_PANE_VISIBLE = 'SET_HLS_DESC_PANE_VISIBLE';
 
 const SET_HLS_FULL_SCREEN = 'SET_HLS_FULL_SCREEN';
 
+const SET_SHOW_CLOSED_CAPTIONS = 'SET_SHOW_CLOSED_CAPTIONS';
+
 const SET_ANDROID_HLS_STREAM_PAUSED = 'SET_ANDROID_HLS_STREAM_PAUSED';
 
 const SET_SELECTED_VIRTUAL_BG = 'SET_SELECTED_VIRTUAL_BG';
@@ -174,6 +176,7 @@ export default {
   SET_ANDROID_HLS_STREAM_PAUSED,
   SET_SELECTED_VIRTUAL_BG,
   FILTER_OUT_BLOCKED_MSGS,
+  SET_SHOW_CLOSED_CAPTIONS,
 };
 
 export enum HmsStateActionTypes {

package/src/redux/actions/index.ts

@@ -513,6 +513,11 @@ export const setSelectedVirtualBackground = (vb: string | null) => ({
   payload: { selectedVirtualBackground: vb },
 });
 
+export const setShowClosedCaptions = (showClosedCaptions: boolean) => ({
+  type: actionTypes.SET_SHOW_CLOSED_CAPTIONS,
+  payload: { showClosedCaptions },
+});
+
 /**
  * POLLS
  */

package/src/redux/reducers/appState.ts

@@ -67,6 +67,7 @@ type IntialStateType = {
   hlsFullScreen: boolean;
   hlsStreamPaused_android: boolean;
   selectedVirtualBackground: string | null;
+  showClosedCaptions: boolean;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -109,6 +110,7 @@ const INITIAL_STATE: IntialStateType = {
   hlsFullScreen: false,
   hlsStreamPaused_android: false,
   selectedVirtualBackground: null,
+  showClosedCaptions: false,
 };
 
 const appReducer = (
@@ -397,6 +399,12 @@ const appReducer = (
         selectedVirtualBackground: action.payload.selectedVirtualBackground,
       };
     }
+    case ActionTypes.SET_SHOW_CLOSED_CAPTIONS: {
+      return {
+        ...state,
+        showClosedCaptions: action.payload.showClosedCaptions,
+      };
+    }
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/types.ts

@@ -91,16 +91,21 @@ export type Notification =
   | {
       id: string;
       type: NotificationTypes;
-      icon?: string;
+      icon?: string | React.ReactElement;
       message?: string;
       title: string;
       payload?: any;
     }
-  | { id: string; type: NotificationTypes; icon?: string; peer: HMSPeer }
   | {
       id: string;
       type: NotificationTypes;
-      icon?: string;
+      icon?: string | React.ReactElement;
+      peer: HMSPeer;
+    }
+  | {
+      id: string;
+      type: NotificationTypes;
+      icon?: string | React.ReactElement;
       exception: HMSException;
     };
 

package/src/utils/types.ts

@@ -60,6 +60,7 @@ export enum ModalTypes {
   MESSAGE_OPTIONS = 'messageOptions',
   POLLS_AND_QUIZZES = 'pollsAndQuizzes',
   VIRTUAL_BACKGROUND = 'virtualBackground',
+  CLOSED_CAPTIONS_CONTROL = 'closedCaptionsControl',
   DEFAULT = '',
 }