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

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

@@ -24,7 +24,8 @@ import { OverlayContainer } from './OverlayContainer';
 import { OverlayedViews } from './OverlayedViews';
 import { useFooterHeight } from './Footer';
 import { useHeaderHeight } from './Header';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
+import { WebrtcTranscriptOverlayView } from './WebrtcTranscriptOverlayView';
 
 interface WebrtcViewProps {
   offset: SharedValue<number>;
@@ -110,7 +111,7 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
       };
     }, [isPortrait, bottom]);
 
-    if (isPipModeActive) {
+    if (isPipModeActive && Platform.OS === 'android') {
       return (
         <PIPView
           peerTrackNodes={peerTrackNodes}
@@ -145,6 +146,8 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
               />
             )}
 
+            <WebrtcTranscriptOverlayView offset={offset} />
+
             <OverlayedViews
               animatedStyle={overlayedAnimatedStyles}
               offset={offset}

package/src/hooks-util.ts

@@ -1,12 +1,24 @@
+import type {
+  HMSHLSPlayer,
+  HMSPIPConfig,
+  HMSRole,
+  HMSSessionStore,
+  HMSSpeaker,
+  JsonValue,
+} from '@100mslive/react-native-hms';
 import {
+  getSoftInputMode,
   HMSChangeTrackStateRequest,
   HMSConfig,
+  HMSHLSPlayerPlaybackState,
   HMSLocalPeer,
   HMSMessage,
+  HMSMessageRecipient,
   HMSMessageRecipientType,
-  HMSPIPListenerActions,
   HMSPeer,
   HMSPeerUpdate,
+  HMSPIPListenerActions,
+  HMSPollUpdateType,
   HMSRoleChangeRequest,
   HMSRoom,
   HMSRoomUpdate,
@@ -16,27 +28,18 @@ import {
   HMSTrackType,
   HMSTrackUpdate,
   HMSUpdateListenerActions,
-  HMSMessageRecipient,
-  useHMSHLSPlayerResolution,
-  useHmsViewsResolutionsState,
+  HMSVideoViewMode,
   setSoftInputMode,
-  getSoftInputMode,
-  WindowController,
+  SoftInputModes,
+  TranscriptionsMode,
+  TranscriptionState,
   useHMSHLSPlayerCue,
-  HMSPollUpdateType,
   useHMSHLSPlayerPlaybackState,
-  HMSHLSPlayerPlaybackState,
+  useHMSHLSPlayerResolution,
+  useHmsViewsResolutionsState,
+  WindowController,
 } from '@100mslive/react-native-hms';
 import type { Chat as ChatConfig } from '@100mslive/types-prebuilt/elements/chat';
-import { SoftInputModes } from '@100mslive/react-native-hms';
-import type {
-  HMSHLSPlayer,
-  HMSPIPConfig,
-  HMSRole,
-  HMSSessionStore,
-  HMSSpeaker,
-  JsonValue,
-} from '@100mslive/react-native-hms';
 import type {
   ColorPalette,
   DefaultConferencingScreen,
@@ -46,25 +49,25 @@ import type {
   Typography,
 } from '@100mslive/types-prebuilt';
 import Toast from 'react-native-simple-toast';
+import type { DependencyList } from 'react';
 import {
-  useRef,
   useCallback,
+  useContext,
   useEffect,
-  useState,
   useMemo,
-  useContext,
+  useRef,
+  useState,
 } from 'react';
-import type { DependencyList } from 'react';
 
+import type { OnLeaveHandler, PeerTrackNode } from './utils/types';
 import {
+  ChatBroadcastFilter,
   MaxTilesInOnePage,
   ModalTypes,
   OnLeaveReason,
   PeerListRefreshInterval,
   PipModes,
 } from './utils/types';
-import { ChatBroadcastFilter } from './utils/types';
-import type { OnLeaveHandler, PeerTrackNode } from './utils/types';
 import { createPeerTrackNode, parseMetadata } from './utils/functions';
 import {
   batch,
@@ -102,10 +105,10 @@ import {
   setChatState,
   setEditUsernameDisabled,
   setFullScreenPeerTrackNode,
+  setHandleBackButton,
   setHMSLocalPeerState,
   setHMSRoleState,
   setHMSRoomState,
-  setHandleBackButton,
   setIsLocalAudioMutedState,
   setIsLocalVideoMutedState,
   setLayoutConfig,
@@ -132,15 +135,15 @@ import {
   replacePeerTrackNodes,
   replacePeerTrackNodesWithTrack,
 } from './peerTrackNodeUtils';
-import { MeetingState } from './types';
 import type { ChatState, HMSPrebuiltProps, PinnedMessage } from './types';
+import { MeetingState, NotificationTypes } from './types';
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import {
   BackHandler,
   InteractionManager,
   Keyboard,
   Platform,
 } from 'react-native';
-import type { ImageStyle, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { NavigationContext } from '@react-navigation/native';
 import {
   useIsLandscapeOrientation,
@@ -157,7 +160,6 @@ import {
 import type { GridViewRefAttrs } from './components/GridView';
 import { getRoomLayout } from './modules/HMSManager';
 import { DEFAULT_THEME, DEFAULT_TYPOGRAPHY } from './utils/theme';
-import { NotificationTypes } from './types';
 import { KeyboardState, useSharedValue } from 'react-native-reanimated';
 import {
   useCanPublishAudio,
@@ -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,
+                })
+              );
+            }
+          });
+        }
       }
     };
 
@@ -736,6 +785,7 @@ const useHMSTrackUpdate = (
       if (type === HMSTrackUpdate.TRACK_REMOVED) {
         if (track.source === HMSTrackSource.SCREEN) {
           if (!peer.isLocal && track.type === HMSTrackType.VIDEO) {
+            hmsInstance.setActiveSpeakerInIOSPIP(true);
             const screensharePeerTrackNodes =
               reduxState.app.screensharePeerTrackNodes;
             const nodeToRemove = screensharePeerTrackNodes.find(
@@ -1528,14 +1578,26 @@ export const useHMSNetworkQualityUpdate = () => {
   }, [hmsInstance]);
 };
 
-export type PIPConfig = Omit<HMSPIPConfig, 'autoEnterPipMode'>;
+const pipConfig: HMSPIPConfig = {
+  scaleType: HMSVideoViewMode.ASPECT_FILL,
+  aspectRatio: [9, 16],
+  autoEnterPipMode: true,
+  useActiveSpeaker: true,
+  endButton: false,
+  audioButton: false,
+  videoButton: false,
+};
 
 export const useEnableAutoPip = () => {
   const hmsInstance = useHMSInstance();
 
   const enableAutoPip = useCallback(
-    (data?: PIPConfig) => {
-      hmsInstance.setPipParams({ ...data, autoEnterPipMode: true });
+    (data: HMSPIPConfig) => {
+      hmsInstance.setPipParams({
+        ...pipConfig,
+        ...data,
+        autoEnterPipMode: true,
+      });
     },
     [hmsInstance]
   );
@@ -1547,8 +1609,12 @@ export const useDisableAutoPip = () => {
   const hmsInstance = useHMSInstance();
 
   const disableAutoPip = useCallback(
-    (data?: PIPConfig) => {
-      hmsInstance.setPipParams({ ...data, autoEnterPipMode: false });
+    (data: HMSPIPConfig) => {
+      hmsInstance.setPipParams({
+        ...pipConfig,
+        ...data,
+        autoEnterPipMode: false,
+      });
     },
     [hmsInstance]
   );
@@ -1572,9 +1638,14 @@ export const useAutoPip = (oneToOneCall: boolean) => {
 
   useEffect(() => {
     if (autoEnterPipMode && remotePeersPresent) {
-      enableAutoPip({ aspectRatio: [numerator, denominator] });
+      enableAutoPip({
+        scaleType: HMSVideoViewMode.ASPECT_FILL,
+        aspectRatio: [numerator, denominator],
+      });
 
-      return disableAutoPip;
+      return () => {
+        disableAutoPip({});
+      };
     }
   }, [
     remotePeersPresent,
@@ -1602,7 +1673,7 @@ export const usePipAspectRatio = (oneToOneCall: boolean): [number, number] => {
     if (isHLSViewer && hlsPlayerResolution) {
       return [hlsPlayerResolution.width, hlsPlayerResolution.height];
     }
-    // When user is hlsviewer and we don't have stream resolution
+    // When user is hlsviewer, and we don't have stream resolution
     if (isHLSViewer) {
       return [9, 16];
     }
@@ -1615,7 +1686,11 @@ export const usePipAspectRatio = (oneToOneCall: boolean): [number, number] => {
       return [9, 16];
     }
     // default aspect ratio
-    return [16, 9];
+    return Platform.select({
+      ios: [9, 16],
+      android: [16, 9],
+      default: [16, 9],
+    });
   }, [
     isHLSViewer,
     firstSSNodeId,
@@ -2096,7 +2171,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;
 
@@ -2670,9 +2745,7 @@ export const useSavePropsToStore = (
   }, [handleBackButton]);
 
   useEffect(() => {
-    if (Platform.OS === 'android') {
-      dispatch(setAutoEnterPipMode(autoEnterPipMode));
-    }
+    dispatch(setAutoEnterPipMode(autoEnterPipMode));
   }, [autoEnterPipMode]);
 };
 

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