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

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}

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 = '',
 }