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

package/src/components/HMSManageLeave.tsx

@@ -1,15 +1,10 @@
 import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useSelector } from 'react-redux';
+import { View } from 'react-native';
 
 import { LeaveIcon } from '../Icons';
-import { useHMSRoomStyleSheet, useLeaveMethods } from '../hooks-util';
-import type { RootState } from '../redux';
+import { useHMSRoomStyleSheet, useModalType } from '../hooks-util';
 import { ModalTypes } from '../utils/types';
 import { PressableIcon } from './PressableIcon';
-import { BottomSheet } from './BottomSheet';
-import { StopIcon } from '../Icons';
-import { EndRoomModalContent } from './EndRoomModalContent';
 import { COLORS } from '../utils/theme';
 
 export const HMSManageLeave: React.FC<LeaveButtonProps> = (props) => {
@@ -32,62 +27,15 @@ type LeaveButtonProps =
     };
 
 const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
-  const leavePopCloseAction = React.useRef(ModalTypes.DEFAULT);
-  const [leavePopVisible, setLeavePopVisible] = React.useState(false);
-  const [leaveModalType, setLeaveModalType] = React.useState(
-    ModalTypes.DEFAULT
-  );
-
-  const { leave } = useLeaveMethods(false);
+  const { handleModalVisibleType } = useModalType();
 
   /**
    * Opens the Leave Popup Menu
    */
   const handleLeaveButtonPress = () => {
-    setLeavePopVisible(true);
-  };
-
-  /**
-   * Closes the Leave Popup Menu
-   * Leave Modal will open after the popup is hidden
-   */
-  const handleLeavePress = async () => {
-    setLeavePopVisible(false);
-    await leave();
-  };
-
-  /**
-   * Closes the Leave Popup Menu
-   * End Session Modal will open after the popup is hidden
-   */
-  const handleEndSessionPress = async () => {
-    leavePopCloseAction.current = ModalTypes.END_ROOM;
-    setLeavePopVisible(false);
-  };
-
-  const handleEndStreamPress = async () => {
-    leavePopCloseAction.current = ModalTypes.END_ROOM;
-    setLeavePopVisible(false);
+    handleModalVisibleType(ModalTypes.LEAVE_ROOM);
   };
 
-  /**
-   * Closes the Leave Popup Menu
-   * No action is taken when the popup is hidden
-   */
-  const dismissPopup = () => {
-    leavePopCloseAction.current = ModalTypes.DEFAULT;
-    setLeavePopVisible(false);
-  };
-
-  /**
-   * Handles action to take when the leave popup is hidden
-   */
-  const handlePopupHide = () => {
-    setLeaveModalType(leavePopCloseAction.current);
-  };
-
-  const dismissModal = () => setLeaveModalType(ModalTypes.DEFAULT);
-
   const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
     button: {
       backgroundColor: theme.palette.alert_error_default,
@@ -118,178 +66,6 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
         onPress: handleLeaveButtonPress,
         style: hmsRoomStyles.button,
       })}
-
-      <LeaveBottomSheet
-        isVisible={leavePopVisible}
-        onEndSessionPress={handleEndSessionPress}
-        onLeavePress={handleLeavePress}
-        onPopupDismiss={dismissPopup}
-        onPopupHide={handlePopupHide}
-        onEndStreamPress={handleEndStreamPress}
-      />
-
-      <BottomSheet
-        dismissModal={dismissModal}
-        isVisible={leaveModalType === ModalTypes.END_ROOM}
-        animationOutTiming={700}
-      >
-        <EndRoomModalContent dismissModal={dismissModal} />
-      </BottomSheet>
     </View>
   );
 };
-
-// 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 LeaveBottomSheetProps {
-  isVisible: boolean;
-  onPopupDismiss(): void;
-  onLeavePress(): void;
-  onEndSessionPress(): void;
-  onEndStreamPress(): void;
-  onPopupHide(): void;
-}
-
-const LeaveBottomSheet: React.FC<LeaveBottomSheetProps> = ({
-  isVisible,
-  onPopupDismiss,
-  onLeavePress,
-  onEndSessionPress,
-  onEndStreamPress,
-  onPopupHide,
-}) => {
-  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,
-    },
-  }));
-
-  return (
-    <BottomSheet
-      isVisible={isVisible}
-      containerStyle={leavePopupStyles.container}
-      dismissModal={onPopupDismiss}
-      onModalHide={onPopupHide}
-      animationOutTiming={700}
-    >
-      <View>
-        <TouchableOpacity
-          style={leavePopupStyles.button}
-          onPress={onLeavePress}
-        >
-          <LeaveIcon style={leavePopupStyles.icon} />
-
-          <View style={leavePopupStyles.textContainer}>
-            <Text style={[leavePopupStyles.text, hmsRoomStyles.text]}>
-              Leave
-            </Text>
-            <Text style={[leavePopupStyles.subtext, hmsRoomStyles.subtext]}>
-              Others will continue after you leave. You can join the session
-              again.
-            </Text>
-          </View>
-        </TouchableOpacity>
-
-        {canStream && isStreaming ? (
-          <TouchableOpacity
-            style={[leavePopupStyles.button, hmsRoomStyles.endButton]}
-            onPress={onEndStreamPress}
-          >
-            <StopIcon style={[leavePopupStyles.icon, hmsRoomStyles.endIcon]} />
-
-            <View style={leavePopupStyles.textContainer}>
-              <Text style={[leavePopupStyles.text, hmsRoomStyles.endText]}>
-                End Stream
-              </Text>
-              <Text
-                style={[leavePopupStyles.subtext, hmsRoomStyles.endSubtext]}
-              >
-                The stream will end for everyone after they’ve watched it.
-              </Text>
-            </View>
-          </TouchableOpacity>
-        ) : canEndRoom ? (
-          <TouchableOpacity
-            style={[leavePopupStyles.button, hmsRoomStyles.endButton]}
-            onPress={onEndSessionPress}
-          >
-            <StopIcon style={[leavePopupStyles.icon, hmsRoomStyles.endIcon]} />
-
-            <View style={leavePopupStyles.textContainer}>
-              <Text style={[leavePopupStyles.text, hmsRoomStyles.endText]}>
-                End Session
-              </Text>
-              <Text
-                style={[leavePopupStyles.subtext, hmsRoomStyles.endSubtext]}
-              >
-                The session will end for everyone in the room immediately.
-              </Text>
-            </View>
-          </TouchableOpacity>
-        ) : null}
-      </View>
-    </BottomSheet>
-  );
-};
-
-const leavePopupStyles = 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/HMSNotification.tsx

@@ -18,6 +18,7 @@ export interface HMSNotificationProps {
   autoDismiss?: boolean;
   dismissDelay?: number;
   cta?: React.ReactElement;
+  dismissable?: boolean;
 }
 
 export const HMSNotification: React.FC<HMSNotificationProps> = ({
@@ -30,6 +31,7 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
   onDismiss,
   dismissDelay = 5000,
   autoDismiss = true,
+  dismissable = false,
 }) => {
   const dispatch = useDispatch();
 
@@ -45,7 +47,7 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
 
   const dismissNotification =
     onDismiss ||
-    (autoDismiss
+    (autoDismiss || dismissable
       ? () => {
           dispatch(removeNotification(id));
         }
@@ -77,7 +79,7 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
     </View>
   );
 
-  if (dismissNotification) {
+  if (dismissNotification && autoDismiss) {
     return (
       <UnmountAfterDelay
         visible={true}

package/src/components/HMSNotifications.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import { StyleSheet, View } from 'react-native';
-import type { HMSPeer } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
 import { HMSLocalScreenshareNotification } from './HMSLocalScreenshareNotification';
 import { HMSHandRaiseNotification } from './HMSHandRaiseNotification';
 import { HMSRoleChangeDeclinedNotification } from './HMSRoleChangeDeclinedNotification';
-import { NotificationTypes } from '../utils';
+import { NotificationTypes } from '../types';
+import { HMSTerminalErrorNotification } from './HMSTerminalErrorNotification';
+import { HMSNotification } from './HMSNotification';
+import { AlertTriangleIcon } from '../Icons';
+import { HMSReconnectingNotification } from './HMSReconnectingNotification';
 
 export interface HMSNotificationsProps {}
 
@@ -22,14 +25,11 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
   );
 
   // notifications is a stack, first will appear last
-  const notifications: (
-    | typeof LOCAL_SCREENSHARE_PAYLOAD
-    | { id: string; type: string; peer: HMSPeer }
-  )[] = useSelector((state: RootState) => {
+  const notifications = useSelector((state: RootState) => {
     // Latest notification will be at 0th index.
     const allNotifications = state.app.notifications;
 
-    let list = [];
+    let list: typeof allNotifications = [];
 
     if (isLocalScreenShared) {
       list.push(LOCAL_SCREENSHARE_PAYLOAD);
@@ -101,6 +101,8 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
           >
             {notification.type === NotificationTypes.LOCAL_SCREENSHARE ? (
               <HMSLocalScreenshareNotification />
+            ) : notification.type === NotificationTypes.RECONNECTING ? (
+              <HMSReconnectingNotification />
             ) : notification.type === NotificationTypes.HAND_RAISE &&
               'peer' in notification ? (
               <HMSHandRaiseNotification
@@ -117,6 +119,22 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
                 autoDismiss={atTop}
                 dismissDelay={10000}
               />
+            ) : notification.type === NotificationTypes.TERMINAL_ERROR &&
+              'exception' in notification ? (
+              <HMSTerminalErrorNotification
+                id={notification.id}
+                exception={notification.exception}
+                autoDismiss={false}
+              />
+            ) : notification.type === NotificationTypes.ERROR &&
+              'message' in notification ? (
+              <HMSNotification
+                icon={<AlertTriangleIcon type="line" />}
+                id={notification.id}
+                text={notification.message}
+                autoDismiss={false}
+                dismissable={true}
+              />
             ) : null}
           </View>
         );
@@ -125,6 +143,22 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
   );
 };
 
+export const useHMSNotificationsHeight = () => {
+  const numberOfNotifications = useSelector((state: RootState) => {
+    const allNotifications = state.app.notifications;
+    const isLocalScreenShared = state.hmsStates.isLocalScreenShared;
+
+    return (
+      Math.min(allNotifications.length, isLocalScreenShared ? 2 : 3) +
+      (isLocalScreenShared ? 1 : 0)
+    );
+  });
+
+  if (numberOfNotifications === 0) return 0;
+
+  return 8 + (numberOfNotifications - 1) * 16 + 56; // marginBottom + calculated paddingTop + content
+};
+
 const styles = StyleSheet.create({
   absoluteContainer: {
     position: 'relative',

package/src/components/HMSOverlayChatView.tsx

@@ -6,6 +6,8 @@ import MaskedView from '@react-native-masked-view/masked-view';
 import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
 import { HMSSendMessageInput } from './HMSSendMessageInput';
 import { HMSHLSMessageList } from './HMSHLSMessageList';
+import { useFooterHeight } from './Footer';
+import { useHMSNotificationsHeight } from './HMSNotifications';
 
 const colors = [
   'rgba(0, 0, 0, 0)',
@@ -15,8 +17,11 @@ const colors = [
 const colorLocations = [0, 0.4, 1];
 
 export const HLSChatView = () => {
+  const footerHeight = useFooterHeight();
+  const hmsNotificationsHeight = useHMSNotificationsHeight();
+
   return (
-    <HMSKeyboardAvoidingView>
+    <HMSKeyboardAvoidingView bottomOffset={footerHeight + hmsNotificationsHeight}>
       <MaskedView
         maskElement={
           <LinearGradient

package/src/components/HMSReconnectingNotification.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ActivityIndicator } from 'react-native';
+
+import { HMSNotification } from './HMSNotification';
+import { useHMSRoomColorPalette, useHMSRoomStyle } from '../hooks-util';
+import { NotificationTypes } from '../types';
+
+export interface HMSReconnectingNotificationProps {}
+
+export const HMSReconnectingNotification: React.FC<
+  HMSReconnectingNotificationProps
+> = () => {
+  const { on_surface_high: onSurfaceHigh } = useHMSRoomColorPalette();
+  const notificationStyle = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.surface_default,
+  }));
+
+  return (
+    <HMSNotification
+      id={NotificationTypes.RECONNECTING}
+      autoDismiss={false}
+      style={notificationStyle}
+      text={'You lost your network connection. Trying to reconnect.'}
+      icon={<ActivityIndicator size='small' color={onSurfaceHigh} />}
+    />
+  );
+};

package/src/components/HMSRecordingIndicator.tsx

@@ -13,7 +13,7 @@ export const HMSRecordingIndicator = () => {
   const startingOrStoppingRecording = useSelector(
     (state: RootState) =>
       state.app.startingOrStoppingRecording ||
-      state.hmsStates.room?.browserRecordingState.initialising
+      (state.hmsStates.room?.browserRecordingState.initialising ?? false)
   );
 
   const { on_surface_high: onSurfaceHighColor } = useHMSRoomColorPalette();

package/src/components/HMSTerminalErrorNotification.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import type { HMSException } from '@100mslive/react-native-hms';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+
+import { HMSNotification } from './HMSNotification';
+import { AlertTriangleIcon } from '../Icons';
+import { useHMSRoomStyleSheet, useLeaveMethods } from '../hooks-util';
+import { OnLeaveReason } from '../utils/types';
+import { COLORS } from '../utils/theme';
+
+export interface HMSTerminalErrorNotificationProps {
+  id: string;
+  exception: HMSException;
+  autoDismiss?: boolean;
+  dismissDelay?: number;
+}
+
+export const HMSTerminalErrorNotification: React.FC<
+  HMSTerminalErrorNotificationProps
+> = ({ id, exception, autoDismiss, dismissDelay }) => {
+  const { leave } = useLeaveMethods();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    button: {
+      backgroundColor: theme.palette.alert_error_default,
+    },
+    buttonText: {
+      color: COLORS.WHITE,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const handleLeaveRoomPress = () => {
+    leave(OnLeaveReason.NETWORK_ISSUES);
+  };
+
+  return (
+    <HMSNotification
+      id={id}
+      icon={<AlertTriangleIcon />}
+      text={exception.description || 'Something went wrong!'}
+      dismissDelay={dismissDelay}
+      autoDismiss={autoDismiss}
+      cta={(
+        <TouchableOpacity
+          style={[styles.button, hmsRoomStyles.button]}
+          onPress={handleLeaveRoomPress}
+        >
+          <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
+            Leave
+          </Text>
+        </TouchableOpacity>
+      )}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    marginRight: 16,
+  },
+  buttonText: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+});