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

package/src/components/HMSManageLeave.tsx

@@ -2,14 +2,9 @@ import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useSelector } from 'react-redux';
 
-import { EndIcon, LeaveIcon } from '../Icons';
-import {
-  useHMSRoomStyleSheet,
-  useIsHLSViewer,
-  useLeaveMethods,
-} from '../hooks-util';
+import { LeaveIcon } from '../Icons';
+import { useHMSRoomStyleSheet, useLeaveMethods } from '../hooks-util';
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { ModalTypes } from '../utils/types';
 import { PressableIcon } from './PressableIcon';
 import { BottomSheet } from './BottomSheet';
@@ -37,35 +32,27 @@ type LeaveButtonProps =
 
 const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
   const leavePopCloseAction = React.useRef(ModalTypes.DEFAULT);
-  const isHLSViewer = useIsHLSViewer();
   const [leavePopVisible, setLeavePopVisible] = React.useState(false);
   const [leaveModalType, setLeaveModalType] = React.useState(
     ModalTypes.DEFAULT
   );
-  const canEndRoom = useSelector(
-    (state: RootState) => state.hmsStates.localPeer?.role?.permissions?.endRoom
-  );
 
-  const { leave } = useLeaveMethods();
+  const { leave } = useLeaveMethods(false);
 
   /**
    * Opens the Leave Popup Menu
    */
   const handleLeaveButtonPress = () => {
-    if (canEndRoom) {
-      setLeavePopVisible(true);
-    } else {
-      setLeaveModalType(ModalTypes.LEAVE_ROOM);
-    }
+    setLeavePopVisible(true);
   };
 
   /**
    * Closes the Leave Popup Menu
    * Leave Modal will open after the popup is hidden
    */
-  const handleLeavePress = () => {
+  const handleLeavePress = async () => {
     setLeavePopVisible(false);
-    leave();
+    await leave();
   };
 
   /**
@@ -77,6 +64,11 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
     setLeavePopVisible(false);
   };
 
+  const handleEndStreamPress = async () => {
+    leavePopCloseAction.current = ModalTypes.END_ROOM;
+    setLeavePopVisible(false);
+  };
+
   /**
    * Closes the Leave Popup Menu
    * No action is taken when the popup is hidden
@@ -95,13 +87,21 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
 
   const dismissModal = () => setLeaveModalType(ModalTypes.DEFAULT);
 
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    button: {
+      backgroundColor: theme.palette.alert_error_default,
+      borderColor: theme.palette.alert_error_default,
+    },
+    icon: {
+      tintColor: theme.palette.alert_error_brighter,
+    },
+  }));
+
   const leaveIconDelegate =
     'leaveIconDelegate' in props && props.leaveIconDelegate ? (
       props.leaveIconDelegate
-    ) : isHLSViewer ? (
-      <LeaveIcon style={{ transform: [{ rotateZ: '180 deg' }] }} />
     ) : (
-      <EndIcon />
+      <LeaveIcon style={hmsRoomStyles.icon} />
     );
 
   const leaveButtonDelegate =
@@ -115,7 +115,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
     <View>
       {React.cloneElement(leaveButtonDelegate, {
         onPress: handleLeaveButtonPress,
-        style: styles.button,
+        style: hmsRoomStyles.button,
       })}
 
       <LeaveBottomSheet
@@ -124,6 +124,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
         onLeavePress={handleLeavePress}
         onPopupDismiss={dismissPopup}
         onPopupHide={handlePopupHide}
+        onEndStreamPress={handleEndStreamPress}
       />
 
       <BottomSheet
@@ -140,18 +141,12 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
 // 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
 
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: COLORS.ALERT.ERROR.DEFAULT,
-    borderColor: COLORS.ALERT.ERROR.DEFAULT,
-  },
-});
-
 interface LeaveBottomSheetProps {
   isVisible: boolean;
   onPopupDismiss(): void;
   onLeavePress(): void;
   onEndSessionPress(): void;
+  onEndStreamPress(): void;
   onPopupHide(): void;
 }
 
@@ -160,11 +155,21 @@ const LeaveBottomSheet: React.FC<LeaveBottomSheetProps> = ({
   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: {
@@ -217,10 +222,10 @@ const LeaveBottomSheet: React.FC<LeaveBottomSheetProps> = ({
           </View>
         </TouchableOpacity>
 
-        {canEndRoom ? (
+        {canStream && isStreaming ? (
           <TouchableOpacity
             style={[leavePopupStyles.button, hmsRoomStyles.endButton]}
-            onPress={onEndSessionPress}
+            onPress={onEndStreamPress}
           >
             <StopIcon style={[leavePopupStyles.icon, hmsRoomStyles.endIcon]} />
 
@@ -231,8 +236,25 @@ const LeaveBottomSheet: React.FC<LeaveBottomSheetProps> = ({
               <Text
                 style={[leavePopupStyles.subtext, hmsRoomStyles.endSubtext]}
               >
-                The stream & session will end for everyone. You can't undo this
-                action.
+                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>
@@ -254,7 +276,6 @@ const leavePopupStyles = StyleSheet.create({
     width: 24,
     height: 24,
     marginRight: 16,
-    transform: [{ rotateY: '180deg' }],
   },
   textContainer: {
     flex: 1,

package/src/components/HMSManageRaiseHand.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { useSelector, shallowEqual } from 'react-redux';
 
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { useHMSActions } from '../hooks-sdk';
 import { PressableIcon } from './PressableIcon';
 import { HandIcon } from '../Icons';
@@ -28,21 +26,9 @@ export const HMSManageRaiseHand = () => {
   return (
     <PressableIcon
       onPress={toggleRaiseHand}
-      style={localPeerMetadata.isHandRaised ? styles.activeButton : undefined}
+      active={localPeerMetadata.isHandRaised}
     >
-      <HandIcon
-        style={localPeerMetadata.isHandRaised ? styles.handRaised : undefined}
-      />
+      <HandIcon />
     </PressableIcon>
   );
 };
-
-const styles = StyleSheet.create({
-  activeButton: {
-    backgroundColor: COLORS.SECONDARY.DIM,
-    borderColor: COLORS.SECONDARY.DIM,
-  },
-  handRaised: {
-    tintColor: COLORS.TWIN.YELLOW,
-  },
-});

package/src/components/HMSNotification.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { useDispatch } from 'react-redux';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { CloseIcon } from '../Icons';
+import { UnmountAfterDelay } from './UnmountAfterDelay';
+import { removeNotification } from '../redux/actions';
+
+export interface HMSNotificationProps {
+  id: string;
+  text: string | React.ReactElement;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  icon?: React.ReactElement;
+  onDismiss?: () => void;
+  autoDismiss?: boolean;
+  dismissDelay?: number;
+  cta?: React.ReactElement;
+}
+
+export const HMSNotification: React.FC<HMSNotificationProps> = ({
+  id,
+  text,
+  icon,
+  style,
+  textStyle,
+  cta,
+  onDismiss,
+  dismissDelay = 5000,
+  autoDismiss = true,
+}) => {
+  const dispatch = useDispatch();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const dismissNotification =
+    onDismiss ||
+    (autoDismiss
+      ? () => {
+          dispatch(removeNotification(id));
+        }
+      : null);
+
+  const notification = (
+    <View style={[styles.container, hmsRoomStyles.container, style]}>
+      <View style={styles.leftWrapper}>
+        {icon ? <View style={styles.icon}>{icon}</View> : null}
+
+        {typeof text === 'string' ? (
+          <Text style={[styles.text, hmsRoomStyles.text, textStyle]}>
+            {text}
+          </Text>
+        ) : (
+          text
+        )}
+      </View>
+
+      <View style={styles.rightWrapper}>
+        {cta}
+
+        {dismissNotification ? (
+          <TouchableOpacity onPress={dismissNotification}>
+            <CloseIcon />
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    </View>
+  );
+
+  if (dismissNotification) {
+    return (
+      <UnmountAfterDelay
+        visible={true}
+        onUnmount={dismissNotification}
+        delay={dismissDelay}
+      >
+        {notification}
+      </UnmountAfterDelay>
+    );
+  }
+
+  return notification;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    elevation: 2,
+    borderRadius: 8,
+    flexDirection: 'row',
+    padding: 8,
+    paddingLeft: 16,
+    marginHorizontal: 8,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  leftWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rightWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 16,
+  },
+  icon: {
+    marginRight: 8,
+  },
+  text: {
+    flexShrink: 1,
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  },
+});

package/src/components/HMSNotifications.tsx

@@ -0,0 +1,154 @@
+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';
+
+export interface HMSNotificationsProps {}
+
+const LOCAL_SCREENSHARE_PAYLOAD = {
+  id: NotificationTypes.LOCAL_SCREENSHARE,
+  type: NotificationTypes.LOCAL_SCREENSHARE,
+};
+
+export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
+  const isLocalScreenShared = useSelector(
+    (state: RootState) => state.hmsStates.isLocalScreenShared
+  );
+
+  // notifications is a stack, first will appear last
+  const notifications: (
+    | typeof LOCAL_SCREENSHARE_PAYLOAD
+    | { id: string; type: string; peer: HMSPeer }
+  )[] = useSelector((state: RootState) => {
+    // Latest notification will be at 0th index.
+    const allNotifications = state.app.notifications;
+
+    let list = [];
+
+    if (isLocalScreenShared) {
+      list.push(LOCAL_SCREENSHARE_PAYLOAD);
+
+      // We are picking the latest notification always
+      if (allNotifications.length > 0) {
+        const firstNotification = allNotifications[0];
+
+        const secondNotification =
+          allNotifications.length > 1 ? allNotifications[1] : null;
+
+        if (secondNotification) {
+          list.push(secondNotification);
+        }
+
+        if (firstNotification) {
+          list.push(firstNotification);
+        }
+      }
+    } else if (allNotifications.length > 0) {
+      const firstNotification = allNotifications[0];
+
+      const secondNotification =
+        allNotifications.length > 1 ? allNotifications[1] : null;
+
+      const thirdNotification =
+        allNotifications.length > 2 ? allNotifications[2] : null;
+
+      if (thirdNotification) {
+        list.push(thirdNotification);
+      }
+
+      if (secondNotification) {
+        list.push(secondNotification);
+      }
+
+      if (firstNotification) {
+        list.push(firstNotification);
+      }
+    }
+
+    return list;
+  }, shallowEqual);
+
+  if (notifications.length === 0) {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        styles.absoluteContainer,
+        { paddingTop: (notifications.length - 1) * 16 },
+      ]}
+    >
+      {notifications.map((notification, index, arr) => {
+        const atTop = index === arr.length - 1;
+        const atBottom = index === 0;
+        return (
+          <View
+            key={notification.id}
+            style={[
+              {
+                transform: [{ scale: getScale(arr.length, index) }],
+              },
+              atBottom ? null : styles.notificationWrapper,
+              atBottom ? null : { bottom: index * 16 },
+            ]}
+          >
+            {notification.type === NotificationTypes.LOCAL_SCREENSHARE ? (
+              <HMSLocalScreenshareNotification />
+            ) : notification.type === NotificationTypes.HAND_RAISE &&
+              'peer' in notification ? (
+              <HMSHandRaiseNotification
+                id={notification.id}
+                peer={notification.peer}
+                autoDismiss={atTop}
+                dismissDelay={20000}
+              />
+            ) : notification.type === NotificationTypes.ROLE_CHANGE_DECLINED &&
+              'peer' in notification ? (
+              <HMSRoleChangeDeclinedNotification
+                id={notification.id}
+                peerName={notification.peer.name}
+                autoDismiss={atTop}
+                dismissDelay={10000}
+              />
+            ) : null}
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  absoluteContainer: {
+    position: 'relative',
+    marginBottom: 8,
+    width: '100%',
+  },
+  notificationWrapper: {
+    position: 'absolute',
+    width: '100%',
+  },
+});
+
+const getScale = (totalItem: number, current: number): number => {
+  if (totalItem === 1) {
+    return 1;
+  }
+
+  if (totalItem === 2) {
+    return [0.96, 1][current]!;
+  }
+
+  if (totalItem === 3) {
+    return [0.94, 0.97, 1][current]!;
+  }
+
+  return 1;
+};

package/src/components/HMSOverlayChatView.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import MaskedView from '@react-native-masked-view/masked-view';
+
+import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
+import { HMSSendMessageInput } from './HMSSendMessageInput';
+import { HMSHLSMessageList } from './HMSHLSMessageList';
+
+const colors = [
+  'rgba(0, 0, 0, 0)',
+  'rgba(255, 255, 255, 1)',
+  'rgba(255, 255, 255, 1)',
+];
+const colorLocations = [0, 0.4, 1];
+
+export const HLSChatView = () => {
+  return (
+    <HMSKeyboardAvoidingView>
+      <MaskedView
+        maskElement={
+          <LinearGradient
+            pointerEvents="box-none"
+            style={StyleSheet.absoluteFill}
+            colors={colors}
+            locations={colorLocations}
+          />
+        }
+      >
+        <HMSHLSMessageList />
+      </MaskedView>
+
+      <HMSSendMessageInput />
+    </HMSKeyboardAvoidingView>
+  );
+};

package/src/components/HMSPreviewJoinButton.tsx

@@ -4,7 +4,11 @@ import { shallowEqual, useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
 import { RadioIcon } from '../Icons';
-import { useHMSRoomStyle, useShouldGoLive } from '../hooks-util';
+import {
+  useHMSLayoutConfig,
+  useHMSRoomStyle,
+  useShouldGoLive,
+} from '../hooks-util';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
 
 export interface HMSPreviewJoinButtonProps {
@@ -20,8 +24,7 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
     (state: RootState) => state.user.userName.length <= 0
   );
 
-  const joinButtonLabels = useSelector((state: RootState) => {
-    const layoutConfig = state.hmsStates.layoutConfig;
+  const joinButtonLabels = useHMSLayoutConfig((layoutConfig) => {
     const joinLayoutConfig =
       layoutConfig?.screens?.preview?.default?.elements?.join_form;
 

package/src/components/HMSPreviewNetworkQuality.tsx

@@ -21,7 +21,9 @@ export const HMSPreviewNetworkQuality = () => {
   }, []);
 
   const containerStyles = useHMSRoomStyle((theme) => ({
-    backgroundColor: hexToRgbA(theme.palette.background_dim, 0.8),
+    backgroundColor:
+      theme.palette.background_dim &&
+      hexToRgbA(theme.palette.background_dim, 0.8),
   }));
 
   return (

package/src/components/HMSPreviewSubtitle.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import { useSelector } from 'react-redux';
 import { StyleSheet, Text } from 'react-native';
 import type { StyleProp, TextStyle } from 'react-native';
 
 import { useCanPublishAudio, useCanPublishVideo } from '../hooks-sdk';
-import { useHMSRoomStyle } from '../hooks-util';
-import type { RootState } from '../redux';
+import { useHMSLayoutConfig, useHMSRoomStyle } from '../hooks-util';
 
 export interface HMSPreviewSubtitleProps {
   subtitle?: string;
@@ -17,9 +15,7 @@ export const HMSPreviewSubtitle: React.FC<HMSPreviewSubtitleProps> = ({
   const canPublishAudio = useCanPublishAudio();
   const canPublishVideo = useCanPublishVideo();
 
-  const hmsRoomPreviewSubtitle = useSelector((state: RootState) => {
-    const layoutConfig = state.hmsStates.layoutConfig;
-
+  const hmsRoomPreviewSubtitle = useHMSLayoutConfig((layoutConfig) => {
     return layoutConfig?.screens?.preview?.default?.elements?.preview_header
       ?.sub_title;
   });

package/src/components/HMSPreviewTitle.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, Text } from 'react-native';
-import { useSelector } from 'react-redux';
 
-import { useHMSRoomStyle } from '../hooks-util';
-import type { RootState } from '../redux';
+import { useHMSLayoutConfig, useHMSRoomStyle } from '../hooks-util';
 
 export interface HMSPreviewTitleProps {
   title?: string;
@@ -12,9 +10,7 @@ export interface HMSPreviewTitleProps {
 export const HMSPreviewTitle: React.FC<HMSPreviewTitleProps> = ({
   title = 'Get Started',
 }) => {
-  const hmsRoomPreviewTitle = useSelector((state: RootState) => {
-    const layoutConfig = state.hmsStates.layoutConfig;
-
+  const hmsRoomPreviewTitle = useHMSLayoutConfig((layoutConfig) => {
     const previewTitle =
       layoutConfig?.screens?.preview?.default?.elements?.preview_header?.title;
 

package/src/components/HMSRecordingIndicator.tsx

@@ -10,28 +10,41 @@ export const HMSRecordingIndicator = () => {
   const isRecordingOn = useSelector(
     (state: RootState) => !!state.hmsStates.room?.browserRecordingState?.running
   );
-  const startingOrStoppingRecording = useSelector((state: RootState) => state.app.startingOrStoppingRecording);
+  const startingOrStoppingRecording = useSelector(
+    (state: RootState) => state.app.startingOrStoppingRecording
+  );
 
   const { on_surface_high: onSurfaceHighColor } = useHMSRoomColorPalette();
 
   const iconStyles = useHMSRoomStyle((theme) => ({
-    tintColor: theme.palette.alert_error_default
+    tintColor: theme.palette.alert_error_default,
   }));
 
   if (startingOrStoppingRecording) {
-    return <ActivityIndicator size={"small"} color={onSurfaceHighColor} />
+    return (
+      <ActivityIndicator
+        size={'small'}
+        color={onSurfaceHighColor}
+        style={styles.rightSpace}
+      />
+    );
   }
 
   if (isRecordingOn) {
-    return <RecordingIcon style={[styles.icon, iconStyles]} />;
+    return (
+      <RecordingIcon style={[styles.icon, styles.rightSpace, iconStyles]} />
+    );
   }
 
   return null;
-}
+};
 
 const styles = StyleSheet.create({
   icon: {
     width: 24,
     height: 24,
   },
+  rightSpace: {
+    marginRight: 8,
+  },
 });