@100mslive/react-native-room-kit 0.1.0 → 1.0.0

package/src/components/PreviewForRoleChangeModal.tsx

@@ -0,0 +1,448 @@
+import * as React from 'react';
+import Modal from 'react-native-modal';
+import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import {
+  HMSLocalAudioTrack,
+  HMSLocalVideoTrack,
+  HMSTrackType,
+} from '@100mslive/react-native-hms';
+
+import type { RootState } from '../redux';
+import {
+  useHMSInstance,
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+} from '../hooks-util';
+import { setRoleChangeRequest } from '../redux/actions';
+import { useHMSActions } from '../hooks-sdk';
+import { parseMetadata } from '../utils/functions';
+import { NotificationTypes } from '../utils';
+import { Header } from './Header';
+import { selectCanPublishTrackForRole } from '../hooks-sdk-selectors';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
+import { CameraIcon, MicIcon, RotateCameraIcon } from '../Icons';
+import { PressableIcon } from './PressableIcon';
+import { AvatarView } from './PeerVideoTile/AvatarView';
+import { HMSVideoView } from './HMSVideoView';
+import {
+  selectIsHLSViewer,
+  selectLayoutConfigForRole,
+} from '../hooks-util-selectors';
+
+const _PreviewForRoleChangeModal = () => {
+  const dispatch = useDispatch();
+  const hmsInstance = useHMSInstance();
+  const hmsActions = useHMSActions();
+  const roleChangeRequest = useSelector(
+    (state: RootState) => state.hmsStates.roleChangeRequest
+  );
+  const localPeerName = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.name || ''
+  );
+  const localPeerRoleName = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.role?.name
+  );
+  const localPeerMetadata = useSelector(
+    (state: RootState) => parseMetadata(state.hmsStates.localPeer?.metadata),
+    shallowEqual
+  );
+  const becomeHLSViewer = useSelector((state: RootState) => {
+    const layoutConfig = selectLayoutConfigForRole(
+      state.hmsStates.layoutConfig,
+      roleChangeRequest?.suggestedRole || null
+    );
+    return selectIsHLSViewer(roleChangeRequest?.suggestedRole, layoutConfig);
+  });
+
+  const [localVideoTrack, setLocalVideoTrack] =
+    React.useState<HMSLocalVideoTrack | null>(null);
+  const [localAudioTrack, setLocalAudioTrack] =
+    React.useState<HMSLocalAudioTrack | null>(null);
+
+  const [isLocalAudioMuted, setIsLocalAudioMuted] = React.useState<
+    boolean | undefined
+  >();
+  const [isLocalVideoMuted, setIsLocalVideoMuted] = React.useState<
+    boolean | undefined
+  >();
+
+  const { background_dim: backgroundDimColor } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      container: {
+        backgroundColor: theme.palette.background_dim,
+      },
+      footer: {
+        backgroundColor: theme.palette.background_default,
+      },
+      heading: {
+        color: theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
+      subheading: {
+        color: theme.palette.on_surface_medium,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+      cameraRotation: {
+        tintColor: isLocalVideoMuted
+          ? theme.palette.on_surface_low
+          : theme.palette.on_surface_high,
+      },
+      pressableIcon: {
+        borderColor: theme.palette.border_bright,
+      },
+      activePressableIcon: {
+        backgroundColor: theme.palette.surface_brighter,
+        borderColor: theme.palette.surface_brighter,
+      },
+      declineButton: {
+        borderColor: theme.palette.secondary_default,
+      },
+      declineButtonText: {
+        color: theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
+    }),
+    [isLocalVideoMuted]
+  );
+
+  const onModalShow = async () => {
+    if (
+      roleChangeRequest &&
+      roleChangeRequest.suggestedRole &&
+      roleChangeRequest.suggestedRole.name
+    ) {
+      // get preview tracks
+      const previewForRoleTracks = await hmsInstance.previewForRole(
+        roleChangeRequest.suggestedRole.name
+      );
+
+      const localVideoTrack = previewForRoleTracks.find(
+        (track: HMSLocalVideoTrack | HMSLocalAudioTrack) =>
+          track.type === HMSTrackType.VIDEO
+      ) as HMSLocalVideoTrack;
+      if (localVideoTrack) {
+        setLocalVideoTrack(localVideoTrack);
+        setIsLocalVideoMuted(localVideoTrack.isMute());
+      }
+
+      const localAudioTrack = previewForRoleTracks.find(
+        (track: HMSLocalVideoTrack | HMSLocalAudioTrack) =>
+          track.type === HMSTrackType.AUDIO
+      ) as HMSLocalAudioTrack;
+      if (localAudioTrack) {
+        setLocalAudioTrack(localAudioTrack);
+        setIsLocalAudioMuted(localAudioTrack.isMute());
+      }
+
+      // lower hand
+      const newMetadata = {
+        ...localPeerMetadata,
+        isHandRaised: false,
+        isBRBOn: localPeerMetadata.isBRBOn,
+      };
+      await hmsActions.changeMetadata(newMetadata);
+    }
+  };
+
+  const handleRequestAccept = async () => {
+    dispatch(setRoleChangeRequest(null));
+    // saving current role in peer metadata,
+    // so that when peer is removed from stage, we can assign previous role to it.
+    if (localPeerRoleName) {
+      const newMetadata = {
+        ...localPeerMetadata,
+        prevRole: localPeerRoleName,
+      };
+      await hmsActions.changeMetadata(newMetadata);
+    }
+    await hmsInstance.acceptRoleChange();
+  };
+
+  const handleRequestDecline = async () => {
+    await hmsInstance.cancelPreview();
+    if (roleChangeRequest?.requestedBy) {
+      await hmsInstance.sendDirectMessage(
+        '',
+        roleChangeRequest.requestedBy,
+        NotificationTypes.ROLE_CHANGE_DECLINED
+      );
+    }
+    dispatch(setRoleChangeRequest(null));
+  };
+
+  const handleAudioMuteTogglePress = async () => {
+    if (!localAudioTrack) {
+      return;
+    }
+    const enable = !isLocalAudioMuted;
+    try {
+      setIsLocalAudioMuted(enable);
+      localAudioTrack.setMute(enable);
+    } catch (error) {
+      setIsLocalAudioMuted(!enable);
+      return Promise.reject(error);
+    }
+  };
+
+  const handleVideoMuteTogglePress = async () => {
+    if (!localVideoTrack) {
+      return;
+    }
+    const enable = !isLocalVideoMuted;
+    try {
+      setIsLocalVideoMuted(enable);
+      localVideoTrack.setMute(enable);
+    } catch (error) {
+      setIsLocalVideoMuted(!enable);
+      return Promise.reject(error);
+    }
+  };
+
+  const handleSwitchCameraPress = async () => {
+    if (isLocalVideoMuted) {
+      return;
+    }
+    if (!localVideoTrack) {
+      return;
+    }
+    localVideoTrack.switchCamera();
+  };
+
+  const canPublishAudio = selectCanPublishTrackForRole(
+    roleChangeRequest?.suggestedRole,
+    'audio'
+  );
+  const canPublishVideo = selectCanPublishTrackForRole(
+    roleChangeRequest?.suggestedRole,
+    'video'
+  );
+
+  const heading = becomeHLSViewer
+    ? "You're invited to view the live stream"
+    : "You're invited to join the stage";
+  const subheading = getSubheading(canPublishAudio, canPublishVideo);
+
+  return (
+    <Modal
+      isVisible={roleChangeRequest !== null}
+      animationIn={'fadeInUp'}
+      animationInTiming={100}
+      animationOutTiming={100}
+      animationOut={'fadeOutDown'}
+      backdropColor={backgroundDimColor}
+      backdropOpacity={0.3}
+      onBackButtonPress={handleRequestDecline}
+      onBackdropPress={handleRequestDecline}
+      onModalShow={onModalShow}
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
+      hideModalContentWhileAnimating={true}
+      style={styles.modal}
+      supportedOrientations={['portrait', 'landscape']}
+    >
+      <View style={[styles.container, hmsRoomStyles.container]}>
+        <View style={[styles.container, hmsRoomStyles.container]}>
+          <AvatarView
+            name={localPeerName}
+            avatarStyles={styles.avatar}
+            videoView={
+              localVideoTrack &&
+              localVideoTrack.trackId &&
+              !isLocalVideoMuted ? (
+                // && localVideoTrack.isMute() === false // can't rely on `isMute()` result, because we are not receiving ON_TRACK_UPDATES for `previewForRole` tracks
+                <HMSVideoView trackId={localVideoTrack.trackId} />
+              ) : null
+            }
+          />
+        </View>
+
+        {/* Header */}
+        <View style={styles.header}>
+          <Header showControls={false} transparent={true} />
+        </View>
+
+        {/* Footer */}
+        <View style={styles.footerWrapper}>
+          <View style={[styles.footer, hmsRoomStyles.footer]}>
+            <Text style={[styles.heading, hmsRoomStyles.heading]}>
+              {heading}
+            </Text>
+
+            {subheading ? (
+              <Text style={[styles.subheading, hmsRoomStyles.subheading]}>
+                {subheading}
+              </Text>
+            ) : null}
+
+            {canPublishAudio || canPublishVideo ? (
+              <View style={styles.micAndCameraControls}>
+                {/* Toggle Audio Mute Status */}
+                {canPublishAudio && localAudioTrack ? (
+                  <PressableIcon
+                    onPress={handleAudioMuteTogglePress}
+                    active={isLocalAudioMuted}
+                    style={[
+                      styles.pressableIcon,
+                      hmsRoomStyles.pressableIcon,
+                      !!isLocalAudioMuted
+                        ? hmsRoomStyles.activePressableIcon
+                        : null,
+                    ]}
+                  >
+                    <MicIcon muted={!!isLocalAudioMuted} />
+                  </PressableIcon>
+                ) : null}
+
+                {canPublishVideo && localVideoTrack ? (
+                  <>
+                    {/* Toggle Video Mute Status */}
+                    <View style={styles.manageLocalVideoWrapper}>
+                      <PressableIcon
+                        onPress={handleVideoMuteTogglePress}
+                        active={isLocalVideoMuted}
+                        style={[
+                          styles.pressableIcon,
+                          hmsRoomStyles.pressableIcon,
+                          !!isLocalVideoMuted
+                            ? hmsRoomStyles.activePressableIcon
+                            : null,
+                        ]}
+                      >
+                        <CameraIcon muted={!!isLocalVideoMuted} />
+                      </PressableIcon>
+                    </View>
+
+                    {/* Manage Camera Rotation */}
+                    <PressableIcon
+                      onPress={handleSwitchCameraPress}
+                      disabled={isLocalVideoMuted}
+                      style={[
+                        styles.pressableIcon,
+                        hmsRoomStyles.pressableIcon,
+                      ]}
+                    >
+                      <RotateCameraIcon style={hmsRoomStyles.cameraRotation} />
+                    </PressableIcon>
+                  </>
+                ) : null}
+              </View>
+            ) : null}
+
+            <HMSPrimaryButton
+              loading={false}
+              onPress={handleRequestAccept}
+              title="Join Now"
+              style={styles.joinButton}
+            />
+
+            <TouchableOpacity
+              style={[styles.declineButton, hmsRoomStyles.declineButton]}
+              onPress={handleRequestDecline}
+            >
+              <Text
+                style={[
+                  styles.declineButtonText,
+                  hmsRoomStyles.declineButtonText,
+                ]}
+              >
+                Decline
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export const PreviewForRoleChangeModal = React.memo(_PreviewForRoleChangeModal);
+
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+  },
+  container: {
+    flex: 1,
+    position: 'relative',
+    backgroundColor: 'silver',
+  },
+  header: {
+    position: 'absolute',
+    width: '100%',
+  },
+  micAndCameraControls: {
+    flexDirection: 'row',
+  },
+  manageLocalVideoWrapper: {
+    marginHorizontal: 16,
+  },
+  footerWrapper: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    zIndex: 30,
+  },
+  footer: {
+    flex: 1,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 32,
+  },
+  heading: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    marginBottom: 8,
+  },
+  subheading: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    marginBottom: 24,
+  },
+  pressableIcon: {
+    backgroundColor: undefined,
+    borderWidth: 1,
+  },
+  avatar: {
+    marginBottom: 200,
+  },
+  joinButton: {
+    marginTop: 16,
+  },
+  declineButton: {
+    flex: 1,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    marginTop: 16,
+  },
+  declineButtonText: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+    textAlign: 'center',
+  },
+});
+
+const getSubheading = (canPublishAudio: boolean, canPublishVideo: boolean) => {
+  if (canPublishAudio && canPublishVideo) {
+    return 'Setup your audio and video before joining';
+  }
+
+  if (canPublishAudio) {
+    return 'Setup your audio before joining';
+  }
+
+  if (canPublishVideo) {
+    return 'Setup your video before joining';
+  }
+
+  return '';
+};

package/src/components/ReconnectionView.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Platform, StyleSheet, Text, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { BlurView } from '@react-native-community/blur';
+
+import type { RootState } from '../redux';
+import { AlertTriangleIcon } from '../Icons';
+import { useHMSRoomStyleSheet } from '../hooks-util';
+
+export const _ReconnectionView: React.FC = () => {
+  const reconnecting = useSelector(
+    (state: RootState) => state.hmsStates.reconnecting
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    degradedText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    icon: {
+      tintColor: theme.palette.on_surface_high,
+    },
+  }));
+
+  if (!reconnecting) {
+    return null;
+  }
+
+  return (
+    <View style={[StyleSheet.absoluteFill, styles.container]}>
+      <BlurView
+        style={StyleSheet.absoluteFill}
+        blurType="dark"
+        blurRadius={25}
+        blurAmount={Platform.OS === 'ios' ? 4 : 32}
+        downsampleFactor={25}
+      />
+
+      <AlertTriangleIcon
+        type="fill"
+        style={[styles.icon, hmsRoomStyles.icon]}
+      />
+
+      <Text
+        numberOfLines={2}
+        style={[styles.degradedText, hmsRoomStyles.degradedText]}
+      >
+        Your network is unstable
+      </Text>
+    </View>
+  );
+};
+
+export const ReconnectionView = React.memo(_ReconnectionView);
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    width: 32,
+    height: 32,
+  },
+  degradedText: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.4,
+    marginTop: 8,
+    textAlign: 'center',
+    paddingHorizontal: 8,
+  },
+});

package/src/components/RoomSettingsModalContent.tsx

@@ -10,16 +10,21 @@ import {
   BRBIcon,
   HandIcon,
   ParticipantsIcon,
-  PencilIcon,
   RecordingIcon,
   ScreenShareIcon,
 } from '../Icons';
 import { BottomSheet, useBottomSheetActions } from './BottomSheet';
-import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
+import {
+  useHMSInstance,
+  useHMSLayoutConfig,
+  useHMSRoomStyleSheet,
+  useShowChatAndParticipants,
+} 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';
 
 interface RoomSettingsModalContentProps {
   newAudioMixingMode: HMSAudioMixingMode;
@@ -46,12 +51,12 @@ export const RoomSettingsModalContent: React.FC<
 
   const { registerOnModalHideAction } = useBottomSheetActions();
 
-  // #region Participants realted states and functions
+  const { canShowParticipants, show } = useShowChatAndParticipants();
+
+  // #region Participants related states and functions
   const onParticipantsPress = () => {
-    // Register callback to be called when bottom sheet is hiddden
-    registerOnModalHideAction(() => {
-      setModalVisible(ModalTypes.PARTICIPANTS);
-    });
+    // Register callback to be called when bottom sheet is hidden
+    registerOnModalHideAction(() => show('participants'));
 
     // Close the current bottom sheet
     closeRoomSettingsModal();
@@ -75,6 +80,7 @@ export const RoomSettingsModalContent: React.FC<
   const localPeerMetadata = useSelector(
     (state: RootState) => state.hmsStates.localPeer?.metadata
   );
+
   const parsedMetadata = parseMetadata(localPeerMetadata);
 
   const isBRBOn = !!parsedMetadata.isBRBOn;
@@ -127,17 +133,22 @@ export const RoomSettingsModalContent: React.FC<
   };
   // #endregion
 
-  // #region Change Name functions
-  const changeName = () => {
-    // Register callback to be called when bottom sheet is hiddden
-    registerOnModalHideAction(() => {
-      setModalVisible(ModalTypes.CHANGE_NAME);
-    });
+  const canShowBRB = useHMSLayoutConfig(
+    (layoutConfig) =>
+      !!layoutConfig?.screens?.conferencing?.default?.elements?.brb
+  );
 
-    // Close the current bottom sheet
-    closeRoomSettingsModal();
-  };
-  // #endregion
+  const isOnStage = useHMSLayoutConfig((layoutConfig) => {
+    return !!layoutConfig?.screens?.conferencing?.default?.elements
+      ?.on_stage_exp;
+  });
+
+  const allowedToPublish = useSelector((state: RootState) => {
+    const allowed = selectAllowedTracksToPublish(state);
+    return (allowed && allowed.length > 0) ?? false;
+  });
+
+  const showHandRaiseIcon = !isOnStage && allowedToPublish;
 
   return (
     <View>
@@ -157,7 +168,7 @@ export const RoomSettingsModalContent: React.FC<
               label: 'Participants',
               pressHandler: onParticipantsPress,
               isActive: false,
-              hide: false,
+              hide: !canShowParticipants,
               sibling: <ParticipantsCount />,
               // parent
               // children
@@ -176,7 +187,7 @@ export const RoomSettingsModalContent: React.FC<
               label: isBRBOn ? "I'm Back" : 'Be Right Back',
               pressHandler: toggleBRB,
               isActive: isBRBOn, // Show active if `isBRBOn` is set on metadata
-              hide: false, // Hide if can't publish screen
+              hide: !canShowBRB, // Hide if can't publish screen
             },
             {
               id: 'raise-hand',
@@ -184,24 +195,16 @@ export const RoomSettingsModalContent: React.FC<
               label: parsedMetadata.isHandRaised ? 'Hand Raised' : 'Raise Hand',
               pressHandler: toggleRaiseHand,
               isActive: isHandRaised, // Show active if `isHandRaised` is set on metadata
-              hide: false, // Hide if can't publish screen
+              hide: !showHandRaiseIcon, // Hide if can't publish screen
             },
             {
               id: 'start-recording',
               icon: <RecordingIcon style={{ width: 20, height: 20 }} />,
               label: isRecordingOn ? 'Stop Recording' : 'Start Recording',
               pressHandler: handleRecordingTogglePress,
-              isActive: !!isRecordingOn,
+              isActive: isRecordingOn,
               hide: !canStartRecording, // Hide if can't publish screen
             },
-            {
-              id: 'change-name',
-              icon: <PencilIcon style={{ width: 20, height: 20 }} />,
-              label: 'Change Name',
-              pressHandler: changeName,
-              isActive: false,
-              hide: false,
-            },
           ].filter((itm) => !itm.hide),
           true
         ).map((itm, idx) => {