@100mslive/react-native-room-kit 1.0.0 → 1.0.2-beta.0

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/HMSPreviewHLSLiveIndicator.tsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
 import { useHMSRoomStyleSheet } from '../hooks-util';
+import { COLORS } from '../utils/theme';
 
 export const HMSPreviewHLSLiveIndicator = () => {
   const isHLSStreaming = useSelector(
@@ -15,10 +16,10 @@ export const HMSPreviewHLSLiveIndicator = () => {
       backgroundColor: theme.palette.alert_error_default,
     },
     circle: {
-      backgroundColor: theme.palette.on_surface_high,
+      backgroundColor: COLORS.WHITE,
     },
     text: {
-      color: theme.palette.on_surface_high,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
   }));

package/src/components/HMSPreviewJoinButton.tsx

@@ -6,7 +6,7 @@ import type { RootState } from '../redux';
 import { RadioIcon } from '../Icons';
 import {
   useHMSLayoutConfig,
-  useHMSRoomStyle,
+  useHMSRoomStyleSheet,
   useShouldGoLive,
 } from '../hooks-util';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
@@ -36,8 +36,13 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
 
   const shouldGoLive = useShouldGoLive();
 
-  const liveIconStyles = useHMSRoomStyle((theme) => ({
-    tintColor: theme.palette.on_primary_low,
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    disabledLiveIcon: {
+      tintColor: theme.palette.on_primary_low,
+    },
+    activeLiveIcon: {
+      tintColor: theme.palette.on_primary_high,
+    },
   }));
 
   const disabledJoin = userNameInvalid || loading;
@@ -54,7 +59,13 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
       disabled={disabledJoin}
       leftComponent={
         shouldGoLive ? (
-          <RadioIcon style={disabledJoin ? liveIconStyles : null} />
+          <RadioIcon
+            style={
+              disabledJoin
+                ? hmsRoomStyles.disabledLiveIcon
+                : hmsRoomStyles.activeLiveIcon
+            }
+          />
         ) : null
       }
       style={styles.button}

package/src/components/HMSPreviewTile.tsx

@@ -26,7 +26,7 @@ export const HMSPreviewTile: React.FC = () => {
       backgroundColor: COLORS.EXTENDED.PURPLE,
     },
     avatarText: {
-      color: theme.palette.on_surface_high,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
   }));

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

@@ -11,7 +11,9 @@ export const HMSRecordingIndicator = () => {
     (state: RootState) => !!state.hmsStates.room?.browserRecordingState?.running
   );
   const startingOrStoppingRecording = useSelector(
-    (state: RootState) => state.app.startingOrStoppingRecording
+    (state: RootState) =>
+      state.app.startingOrStoppingRecording ||
+      (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,
+  },
+});

package/src/components/HMSTextInput.tsx

@@ -52,7 +52,7 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
   const handleInputBlur = () => setInputFocused(false);
 
   const {
-    on_surface_low: onSurfaceLowColor,
+    on_surface_medium: onSurfaceMediumColor,
     on_surface_high: onSurfaceHighColor,
   } = useHMSRoomColorPalette();
 
@@ -91,7 +91,7 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
 
     // ICON STYLES
     sendIcon: {
-      tintColor: theme.palette.on_surface_low,
+      tintColor: theme.palette.on_surface_medium,
     },
     focusedSendIcon: {
       tintColor: theme.palette.on_surface_high,
@@ -123,7 +123,7 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
       autoCapitalize={resetProps.autoCapitalize ?? 'words'}
       autoCompleteType={resetProps.autoCompleteType ?? 'name'}
       placeholderTextColor={
-        resetProps.placeholderTextColor ?? onSurfaceLowColor
+        resetProps.placeholderTextColor ?? onSurfaceMediumColor
       }
       selectionColor={resetProps.selectionColor ?? onSurfaceHighColor}
       onFocus={resetProps.onFocus ?? handleInputFocus}

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 ? (