@100mslive/react-native-room-kit 1.0.1 → 1.0.2-beta.1

package/src/components/LeaveRoomBottomSheet.tsx

@@ -0,0 +1,199 @@
+import * as React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { LeaveIcon } from '../Icons';
+import { useHMSRoomStyleSheet, useLeaveMethods, useModalType } from '../hooks-util';
+import type { RootState } from '../redux';
+import { BottomSheet } from './BottomSheet';
+import { StopIcon } from '../Icons';
+import { ModalTypes, OnLeaveReason } from '../utils/types';
+
+// const HEADER_CONTENT_HEIGHT = 24 + 8 + 8 + 2; // ICON_SIZE + TOP_PADDING + BOTTOM_PADDING + TOP&BOTTOM_BORDER_WIDTH
+// const HEADER_HEIGHT = 8 + HEADER_CONTENT_HEIGHT + 8; // TOP_HEADER_PADDING + HEADER_CONTENT_HEIGHT + BOTTOM_HEADER_PADDING
+
+interface LeaveRoomBottomSheetProps {}
+
+export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
+  const canEndRoom = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.role?.permissions?.endRoom
+  );
+  const canStream = useSelector(
+    (state: RootState) =>
+      state.hmsStates.localPeer?.role?.permissions?.hlsStreaming
+  );
+
+  const isStreaming = useSelector(
+    (state: RootState) =>
+      state.hmsStates.room?.hlsStreamingState?.running ?? false
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    subtext: {
+      color: theme.palette.on_surface_low,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    endButton: {
+      backgroundColor: theme.palette.alert_error_dim,
+    },
+    endText: {
+      color: theme.palette.alert_error_brighter,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    endSubtext: {
+      color: theme.palette.alert_error_bright,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    endIcon: {
+      tintColor: theme.palette.alert_error_brighter,
+    },
+  }));
+
+  const leavePopCloseAction = React.useRef(ModalTypes.DEFAULT);
+
+  const { modalVisibleType, handleModalVisibleType } = useModalType();
+
+  const { leave } = useLeaveMethods();
+
+  /**
+   * Closes the Leave Popup Menu
+   * No action is taken when the popup is hidden
+   */
+  const onPopupDismiss = () => {
+    leavePopCloseAction.current = ModalTypes.DEFAULT;
+    handleModalVisibleType(ModalTypes.DEFAULT);
+  };
+
+  /**
+   * Closes the Leave Popup Menu
+   * Leave Modal will open after the popup is hidden
+   */
+  const onLeavePress = async () => {
+    leavePopCloseAction.current = ModalTypes.DEFAULT;
+    handleModalVisibleType(ModalTypes.DEFAULT);
+    await leave(OnLeaveReason.LEAVE);
+  };
+
+  /**
+   * Closes the Leave Popup Menu
+   * End Session Modal will open after the popup is hidden
+   */
+  const onEndSessionPress = async () => {
+    leavePopCloseAction.current = ModalTypes.END_ROOM;
+    handleModalVisibleType(ModalTypes.DEFAULT);
+  };
+
+  const onEndStreamPress = async () => {
+    leavePopCloseAction.current = ModalTypes.END_ROOM;
+    handleModalVisibleType(ModalTypes.DEFAULT);
+  };
+
+  /**
+   * Handles action to take when the leave popup is hidden
+   */
+  const handlePopupHide = () => {
+    if (leavePopCloseAction.current !== ModalTypes.DEFAULT) {
+      handleModalVisibleType(leavePopCloseAction.current);
+    }
+  };
+
+  return (
+    <BottomSheet
+      isVisible={modalVisibleType === ModalTypes.LEAVE_ROOM}
+      containerStyle={styles.container}
+      dismissModal={onPopupDismiss}
+      onModalHide={handlePopupHide}
+      animationOutTiming={700}
+    >
+      <View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={onLeavePress}
+        >
+          <LeaveIcon style={styles.icon} />
+
+          <View style={styles.textContainer}>
+            <Text style={[styles.text, hmsRoomStyles.text]}>
+              Leave
+            </Text>
+            <Text style={[styles.subtext, hmsRoomStyles.subtext]}>
+              Others will continue after you leave. You can join the session
+              again.
+            </Text>
+          </View>
+        </TouchableOpacity>
+
+        {canStream && isStreaming ? (
+          <TouchableOpacity
+            style={[styles.button, hmsRoomStyles.endButton]}
+            onPress={onEndStreamPress}
+          >
+            <StopIcon style={[styles.icon, hmsRoomStyles.endIcon]} />
+
+            <View style={styles.textContainer}>
+              <Text style={[styles.text, hmsRoomStyles.endText]}>
+                End Stream
+              </Text>
+              <Text
+                style={[styles.subtext, hmsRoomStyles.endSubtext]}
+              >
+                The stream will end for everyone after they’ve watched it.
+              </Text>
+            </View>
+          </TouchableOpacity>
+        ) : canEndRoom ? (
+          <TouchableOpacity
+            style={[styles.button, hmsRoomStyles.endButton]}
+            onPress={onEndSessionPress}
+          >
+            <StopIcon style={[styles.icon, hmsRoomStyles.endIcon]} />
+
+            <View style={styles.textContainer}>
+              <Text style={[styles.text, hmsRoomStyles.endText]}>
+                End Session
+              </Text>
+              <Text
+                style={[styles.subtext, hmsRoomStyles.endSubtext]}
+              >
+                The session will end for everyone in the room immediately.
+              </Text>
+            </View>
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    </BottomSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingBottom: 0,
+  },
+  button: {
+    flexDirection: 'row',
+    padding: 24,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    marginRight: 16,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  text: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  },
+  subtext: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    marginTop: 4,
+  },
+});

package/src/components/Meeting.tsx

@@ -7,6 +7,8 @@ import type { PeerTrackNode } from '../utils/types';
 import { useRTCStatsListeners } from '../utils/hooks';
 import {
   clearPendingModalTasks,
+  useAutoPip,
+  useBackButtonPress,
   useFetchHMSRoles,
   useHMSMessages,
   useHMSNetworkQualityUpdate,
@@ -54,6 +56,11 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
   // Subscribe to Peers Network quality updates
   useHMSNetworkQualityUpdate();
 
+  useAutoPip(peerTrackNodes.length === 1);
+
+  // Handle Back button press and show leave room modal
+  useBackButtonPress();
+
   // Clearing any pending modal opening tasks
   React.useEffect(() => {
     return () => {

package/src/components/MeetingScreenContent.tsx

@@ -20,7 +20,7 @@ import { HMSStatusBar } from './StatusBar';
 import { AnimatedFooter } from './AnimatedFooter';
 import { HLSFooter } from './HLSFooter';
 import { AnimatedHeader } from './AnimatedHeader';
-import { ReconnectionView } from './ReconnectionView';
+// import { ReconnectionView } from './ReconnectionView';
 
 interface MeetingScreenContentProps {
   peerTrackNodes: Array<PeerTrackNode>;
@@ -98,7 +98,7 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
 
         <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
 
-        <ReconnectionView />
+        {/* <ReconnectionView /> */}
       </View>
 
       {isPipModeActive ? null : isHLSViewer ? (

package/src/components/PIPView.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { useSelector } from 'react-redux';
+import { shallowEqual, useSelector } from 'react-redux';
+import { View } from 'react-native';
 
 import type { PeerTrackNode } from '../utils/types';
 import { PeerVideoTileView } from './PeerVideoTile/PeerVideoTileView';
 import type { RootState } from '../redux';
+import { COLORS } from '../utils/theme';
 
 type PIPViewProps = {
   peerTrackNodes: PeerTrackNode[];
@@ -11,41 +13,127 @@ type PIPViewProps = {
 };
 
 const PIPView: React.FC<PIPViewProps> = ({ peerTrackNodes, customView }) => {
-  const memoDominantSpeakerIdRef = React.useRef<string | null>(null);
-
-  const dominantSpeakerId = useSelector((state: RootState) => {
-    const dominantSpeaker = state.hmsStates.activeSpeakers[0];
-
-    return dominantSpeaker?.peer.peerID ?? null;
-  });
-
-  if (dominantSpeakerId) {
-    memoDominantSpeakerIdRef.current = dominantSpeakerId;
-  }
+  const firstSSNode = useSelector(
+    (state: RootState) => state.app.screensharePeerTrackNodes[0]
+  );
 
   if (customView) {
     return customView;
   }
 
-  const firstPeerTrackNode = peerTrackNodes[0];
+  if (firstSSNode) {
+    return (
+      <PeerVideoTileView key={firstSSNode.id} peerTrackNode={firstSSNode} />
+    );
+  }
+
+  return <PIPPeerTiles peerTrackNodes={peerTrackNodes} />;
+};
+
+export default PIPView;
+
+type PIPPeerTilesProps = {
+  peerTrackNodes: PeerTrackNode[];
+};
+
+const PIPPeerTiles: React.FC<PIPPeerTilesProps> = ({ peerTrackNodes }) => {
+  const memoDominantSpeakerIdsRef = React.useRef<string[]>([]);
+
+  const dominantSpeakerIds = useSelector((state: RootState) => {
+    return state.hmsStates.activeSpeakers
+      .slice(0, 3)
+      .map((speaker) => speaker.peer.peerID);
+  }, shallowEqual);
+
+  if (
+    dominantSpeakerIds.length > 0 &&
+    anyNewDominantSpeaker(memoDominantSpeakerIdsRef.current, dominantSpeakerIds)
+  ) {
+    memoDominantSpeakerIdsRef.current = dominantSpeakerIds;
+  }
 
-  const preferedPeerTrack =
-    (memoDominantSpeakerIdRef.current
-      ? peerTrackNodes.find(
-          (node) => node.peer.peerID === memoDominantSpeakerIdRef.current
-        )
-      : firstPeerTrackNode) ?? firstPeerTrackNode;
+  const preferredPeerTrackNodes = React.useMemo(() => {
+    return getDominantSpeakers(
+      memoDominantSpeakerIdsRef.current,
+      peerTrackNodes
+    );
+  }, [memoDominantSpeakerIdsRef.current, peerTrackNodes]);
 
-  if (!preferedPeerTrack) {
+  if (preferredPeerTrackNodes.length === 0) {
     return null;
   }
 
   return (
-    <PeerVideoTileView
-      key={preferedPeerTrack.id}
-      peerTrackNode={preferedPeerTrack}
-    />
+    <View
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        backgroundColor: COLORS.BLACK,
+      }}
+    >
+      {preferredPeerTrackNodes.map((node, index, arr) => {
+        const isFirst = index === 0;
+        const dividerWidth = arr.length > 2 ? 4 : 5;
+
+        return (
+          <React.Fragment key={node.id}>
+            {isFirst ? null : (
+              <View style={{ height: '100%', width: dividerWidth }} />
+            )}
+
+            <View style={{ flex: 1 }}>
+              <PeerVideoTileView peerTrackNode={node} />
+            </View>
+          </React.Fragment>
+        );
+      })}
+    </View>
   );
 };
 
-export default PIPView;
+function anyNewDominantSpeaker(
+  oldSpeakers: string[],
+  newSpeakers: string[]
+): boolean {
+  if (newSpeakers.length !== oldSpeakers.length) {
+    return true;
+  }
+
+  const uniques = new Set([...oldSpeakers, ...newSpeakers]);
+
+  return uniques.size > oldSpeakers.length;
+}
+
+function getDominantSpeakers(
+  dominantSpeakerIds: string[],
+  peerTrackNodes: PeerTrackNode[]
+): PeerTrackNode[] {
+  if (peerTrackNodes.length <= 3) {
+    return peerTrackNodes;
+  }
+
+  const list = peerTrackNodes.slice(0, 3);
+
+  let dominantSpeakerIdsCopy = dominantSpeakerIds.slice();
+
+  for (let i = 3; i < peerTrackNodes.length; i++) {
+    const peerTrackNode = peerTrackNodes[i];
+
+    if (dominantSpeakerIdsCopy.length <= 0 || !peerTrackNode) {
+      break;
+    }
+
+    if (dominantSpeakerIdsCopy.includes(peerTrackNode.peer.peerID)) {
+      dominantSpeakerIdsCopy = dominantSpeakerIdsCopy.filter(
+        (speakerId) => speakerId !== peerTrackNode.peer.peerID
+      );
+      list.unshift(peerTrackNode);
+    }
+  }
+
+  if (list.length > 3) {
+    list.length = 3;
+  }
+
+  return list;
+}

package/src/components/Participants/ParticipantsItemOptions.tsx

@@ -8,7 +8,7 @@ import {
   useHMSLayoutConfig,
   useHMSRoomStyleSheet,
 } from '../../hooks-util';
-import { CameraIcon, MicIcon, PersonIcon } from '../../Icons';
+import { CameraIcon, HandIcon, MicIcon, PersonIcon } from '../../Icons';
 import { ParticipantsItemOption } from './ParticipantsItemOption';
 import type { RootState } from '../../redux';
 import { selectCanPublishTrackForRole } from '../../hooks-sdk-selectors';
@@ -88,6 +88,18 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
     onItemPress();
   };
 
+  const handleLowerHandPress = () => {
+    if (peer.isHandRaised) {
+      hmsInstance
+        .lowerRemotePeerHand(peer)
+        .then((d) => console.log('Lower Remote Peer hand Success: ', d))
+        .catch((e) => console.log('Lower Remote Peer hand Error: ', e));
+    } else {
+      console.warn(`peer.isHandRaised = ${peer.isHandRaised} | peer's hand is not raised`);
+    }
+    onItemPress();
+  };
+
   const handleAudioTogglePress = () => {
     if (peer.audioTrack) {
       hmsInstance
@@ -157,10 +169,10 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
     peer.videoTrack?.isMute();
 
   const showBringOnStageOptions =
-    insideHandRaiseGroup &&
     offStageRoles &&
-    offStageRoles.includes(peer.role?.name || '') &&
-    peer.isHandRaised;
+    offStageRoles.includes(peer.role?.name || '');
+
+  const showLowerHandOption = peer.isHandRaised;
 
   return (
     <>
@@ -175,6 +187,16 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
           isActive: false,
           hide: !showBringOnStageOptions,
         },
+        {
+          id: 'lower-hand',
+          icon: (
+            <HandIcon type="off" style={{ width: 20, height: 20 }} />
+          ),
+          label: 'Lower Hand',
+          pressHandler: handleLowerHandPress,
+          isActive: false,
+          hide: !showLowerHandOption,
+        },
         {
           id: 'mute-audio',
           icon: <MicIcon muted={true} style={{ width: 20, height: 20 }} />,

package/src/components/PeerVideoTile/AvatarView.tsx

@@ -93,9 +93,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   insetAvatar: {
-    width: 64,
+    width: 44,
     aspectRatio: 1,
-    borderRadius: 44,
+    borderRadius: 22,
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -109,8 +109,8 @@ const styles = StyleSheet.create({
     letterSpacing: 0.25,
   },
   insetText: {
-    fontSize: 24,
-    lineHeight: 32,
+    fontSize: 18,
+    lineHeight: 24,
   },
 });
 

package/src/components/PeerVideoTile/PeerAudioIndicator.tsx

@@ -7,6 +7,7 @@ import LottieView from 'lottie-react-native';
 import { MicIcon } from '../../Icons';
 import { useHMSRoomStyleSheet } from '../../hooks-util';
 import type { RootState } from '../../redux';
+import { PipModes } from '../../utils/types';
 
 export interface PeerAudioIndicatorProps {
   peer: HMSPeer;
@@ -24,6 +25,10 @@ export const PeerAudioIndicator: React.FC<PeerAudioIndicatorProps> = ({
       ) >= 0
   );
 
+  const isPipModeActive = useSelector(
+    (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
+  );
+
   const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
     iconWrapper: {
       backgroundColor: theme.palette.secondary_dim,
@@ -41,7 +46,7 @@ export const PeerAudioIndicator: React.FC<PeerAudioIndicatorProps> = ({
     );
   }
 
-  if (activeSpeaker) {
+  if (activeSpeaker && !isPipModeActive) {
     return (
       <View style={[styles.speakerIconWrapper, hmsRoomStyles.iconWrapper]}>
         <LottieView

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -177,13 +177,15 @@ export const _PeerVideoTileView = React.forwardRef<
 
         {/* Handling Peer Audio Mute indicator */}
         {screenShareTile && showingVideoTrack ? (
-          <HMSFullScreenButton peerTrackNode={peerTrackNode} />
+          isPipModeActive ? null : (
+            <HMSFullScreenButton peerTrackNode={peerTrackNode} />
+          )
         ) : peerCanPublishAudio ? (
           <PeerAudioIndicator isMuted={peer.audioTrack?.isMute()} peer={peer} />
         ) : null}
 
         {/* Handling showing Peer name */}
-        {(insetMode || isPipModeActive) ? null : (
+        {insetMode || isPipModeActive ? null : (
           <PeerNameAndNetwork
             name={peer.name}
             isLocal={peer.isLocal}

package/src/components/PreviewForRoleChangeModal.tsx

@@ -17,7 +17,7 @@ import {
 import { setRoleChangeRequest } from '../redux/actions';
 import { useHMSActions } from '../hooks-sdk';
 import { parseMetadata } from '../utils/functions';
-import { NotificationTypes } from '../utils';
+import { NotificationTypes } from '../types';
 import { Header } from './Header';
 import { selectCanPublishTrackForRole } from '../hooks-sdk-selectors';
 import { HMSPrimaryButton } from './HMSPrimaryButton';

package/src/components/RoomSettingsModalContent.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { HMSAudioMixingMode } from '@100mslive/react-native-hms';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
 import { ModalTypes } from '../utils/types';
@@ -17,14 +17,13 @@ import {
 import { BottomSheet, useBottomSheetActions } from './BottomSheet';
 import {
   isPublishingAllowed,
-  useHMSInstance,
   useHMSLayoutConfig,
   useHMSRoomStyleSheet,
   useShowChatAndParticipants,
+  useStartRecording,
 } from '../hooks-util';
 import { useCanPublishScreen, useHMSActions } from '../hooks-sdk';
 import { RoomSettingsModalDebugModeContent } from './RoomSettingsModalDebugModeContent';
-import { setStartingOrStoppingRecording } from '../redux/actions';
 import { ParticipantsCount } from './ParticipantsCount';
 import { selectAllowedTracksToPublish } from '../hooks-sdk-selectors';
 
@@ -45,8 +44,6 @@ export const RoomSettingsModalContent: React.FC<
 > = (props) => {
   const { closeRoomSettingsModal, setModalVisible } = props;
 
-  const dispatch = useDispatch();
-  const hmsInstance = useHMSInstance();
   const debugMode = useSelector((state: RootState) => state.user.debugMode);
 
   const hmsActions = useHMSActions();
@@ -134,6 +131,8 @@ export const RoomSettingsModalContent: React.FC<
     (state: RootState) => !!state.hmsStates.room?.browserRecordingState?.running
   );
 
+  const { startRecording } = useStartRecording();
+
   const handleRecordingTogglePress = () => {
     if (isRecordingOn) {
       registerOnModalHideAction(() => {
@@ -141,10 +140,7 @@ export const RoomSettingsModalContent: React.FC<
       });
       closeRoomSettingsModal();
     } else {
-      dispatch(setStartingOrStoppingRecording(true));
-      hmsInstance
-        .startRTMPOrRecording({ record: true })
-        .catch(() => dispatch(setStartingOrStoppingRecording(false)));
+      startRecording();
       closeRoomSettingsModal();
     }
   };

package/src/components/StopRecordingModalContent.tsx

@@ -18,7 +18,9 @@ export const StopRecordingModalContent: React.FC<
   const dispatch = useDispatch();
   const hmsInstance = useHMSInstance();
   const startingOrStoppingRecording = useSelector(
-    (state: RootState) => state.app.startingOrStoppingRecording
+    (state: RootState) =>
+      state.app.startingOrStoppingRecording ||
+      (state.hmsStates.room?.browserRecordingState.initialising ?? false)
   );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({