@100mslive/react-native-room-kit 0.0.4 → 0.2.0

package/src/components/HMSManageAudioOutput.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Modal from 'react-native-modal';
 import {
   Platform,
   ScrollView,
@@ -24,10 +23,9 @@ import {
   WaveIcon,
 } from '../Icons';
 import { PressableIcon } from './PressableIcon';
-import { COLORS } from '../utils/theme';
-import { CloseIcon } from '../Icons';
-import { useHMSInstance } from '../hooks-util';
+import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
 import type { RootState } from '../redux';
+import { BottomSheet } from './BottomSheet';
 
 export const HMSManageAudioOutput: React.FC = () => {
   const hmsInstance = useHMSInstance();
@@ -121,6 +119,20 @@ export const HMSManageAudioOutput: React.FC = () => {
     setSettingsModalVisible(false);
   };
 
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    headerText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Medium`,
+    },
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    divider: {
+      backgroundColor: theme.palette.border_default,
+    },
+  }));
+
   return (
     <View>
       <PressableIcon onPress={handleSpeakerChange}>
@@ -131,36 +143,20 @@ export const HMSManageAudioOutput: React.FC = () => {
         )}
       </PressableIcon>
 
-      <Modal
-        isVisible={settingsModalVisible}
-        animationIn={'slideInUp'}
-        animationOut={'slideOutDown'}
-        backdropColor={COLORS.BACKGROUND.DIM}
-        backdropOpacity={0.3}
-        onBackButtonPress={dismissModal}
-        onBackdropPress={dismissModal}
-        useNativeDriver={true}
-        useNativeDriverForBackdrop={true}
-        hideModalContentWhileAnimating={true}
-        // swipeDirection={['up', 'down']}
-        // swipe
-        style={styles.modal}
-      >
-        <View style={styles.container}>
-          <View style={styles.header}>
-            <Text style={styles.headerText}>Audio Output</Text>
+      <BottomSheet isVisible={settingsModalVisible} dismissModal={dismissModal}>
+        <BottomSheet.Header
+          dismissModal={dismissModal}
+          heading="Audio Output"
+        />
 
-            <TouchableOpacity
-              onPress={dismissModal}
-              hitSlop={styles.closeIconHitSlop}
-            >
-              <CloseIcon />
-            </TouchableOpacity>
-          </View>
+        <BottomSheet.Divider />
 
+        <View style={styles.contentContainer}>
           {availableAudioOutputDevices.length === 0 ? (
             <View style={styles.emptyView}>
-              <Text style={styles.itemText}>No other devices available!</Text>
+              <Text style={[styles.itemText, hmsRoomStyles.text]}>
+                No other devices available!
+              </Text>
             </View>
           ) : (
             <ScrollView showsVerticalScrollIndicator={true}>
@@ -168,73 +164,50 @@ export const HMSManageAudioOutput: React.FC = () => {
                 .sort(
                   (a, b) => audioDeviceSortOrder[a] - audioDeviceSortOrder[b]
                 )
-                .map((device) => (
-                  <React.Fragment key={device}>
-                    <View style={styles.divider} />
+                .map((device, index) => {
+                  const isFirst = index === 0;
+
+                  return (
+                    <React.Fragment key={device}>
+                      {isFirst ? null : (
+                        <View style={[styles.divider, hmsRoomStyles.divider]} />
+                      )}
 
-                    <TouchableOpacity
-                      style={styles.audioDeviceItem}
-                      onPress={() => handleSelectAudioDevice(device)}
-                    >
-                      <View style={styles.itemTextWrapper}>
-                        {getIcon(
-                          device === HMSAudioDevice.AUTOMATIC &&
-                            currentAudioOutputDevice
-                            ? currentAudioOutputDevice
-                            : device
-                        )}
+                      <TouchableOpacity
+                        style={styles.audioDeviceItem}
+                        onPress={() => handleSelectAudioDevice(device)}
+                      >
+                        <View style={styles.itemTextWrapper}>
+                          {getIcon(
+                            device === HMSAudioDevice.AUTOMATIC &&
+                              currentAudioOutputDevice
+                              ? currentAudioOutputDevice
+                              : device
+                          )}
 
-                        <Text style={styles.itemText}>
-                          {getDescription(device, currentAudioOutputDevice)}
-                        </Text>
-                      </View>
+                          <Text style={[styles.itemText, hmsRoomStyles.text]}>
+                            {getDescription(device, currentAudioOutputDevice)}
+                          </Text>
+                        </View>
 
-                      {device === currentAudioOutputDevice ? (
-                        <CheckIcon />
-                      ) : null}
-                    </TouchableOpacity>
-                  </React.Fragment>
-                ))}
+                        {device === currentAudioOutputDevice ? (
+                          <CheckIcon />
+                        ) : null}
+                      </TouchableOpacity>
+                    </React.Fragment>
+                  );
+                })}
             </ScrollView>
           )}
         </View>
-      </Modal>
+      </BottomSheet>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  modal: {
-    margin: 0,
-    justifyContent: 'flex-end',
-  },
-  container: {
-    backgroundColor: COLORS.BACKGROUND.DEFAULT,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    paddingTop: 24,
-    paddingHorizontal: 16,
-    paddingBottom: 32,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 16,
-  },
-  headerText: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '500',
-    lineHeight: 24,
-    letterSpacing: 0.15,
-  },
-  closeIconHitSlop: {
-    bottom: 16,
-    left: 16,
-    right: 16,
-    top: 16,
+  contentContainer: {
+    marginHorizontal: 24,
   },
   itemTextWrapper: {
     flexDirection: 'row',
@@ -243,10 +216,7 @@ const styles = StyleSheet.create({
   },
   itemText: {
     marginHorizontal: 16,
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 20,
     letterSpacing: 0.1,
   },
@@ -263,7 +233,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: COLORS.BORDER.DEFAULT,
   },
 });
 

package/src/components/HMSManageCameraRotation.tsx

@@ -4,8 +4,8 @@ import { useSelector } from 'react-redux';
 import { RotateCameraIcon } from '../Icons';
 import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { PressableIcon } from './PressableIcon';
+import { useHMSRoomStyle } from '../hooks-util';
 
 export const HMSManageCameraRotation = () => {
   const canPublishVideo = useCanPublishVideo();
@@ -31,18 +31,21 @@ const RotateCameraButton = () => {
     await hmsActions.switchCamera();
   };
 
+  const cameraIconStyles = useHMSRoomStyle(
+    (theme) => ({
+      tintColor: isLocalVideoMuted
+        ? theme.palette.on_surface_low
+        : theme.palette.on_surface_high,
+    }),
+    [isLocalVideoMuted]
+  );
+
   return (
     <PressableIcon
       onPress={handleVideoMuteTogglePress}
       disabled={isLocalVideoMuted}
     >
-      <RotateCameraIcon
-        style={{
-          tintColor: isLocalVideoMuted
-            ? COLORS.SURFACE.ON_SURFACE.LOW
-            : COLORS.SURFACE.ON_SURFACE.HIGH,
-        }}
-      />
+      <RotateCameraIcon style={cameraIconStyles} />
     </PressableIcon>
   );
 };

package/src/components/HMSManageLeave.tsx

@@ -1,17 +1,19 @@
 import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import Modal from 'react-native-modal';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
-import { AlertIcon, LeaveIcon } from '../Icons';
-import { useLeaveMethods } from '../hooks-util';
+import { EndIcon, LeaveIcon } from '../Icons';
+import {
+  useHMSRoomStyleSheet,
+  useIsHLSViewer,
+  useLeaveMethods,
+} from '../hooks-util';
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { ModalTypes } from '../utils/types';
-import { DefaultModal } from './DefaultModal';
-import { EndRoomModal, LeaveRoomModal } from './Modals';
 import { PressableIcon } from './PressableIcon';
+import { BottomSheet } from './BottomSheet';
+import { StopIcon } from '../Icons';
+import { EndRoomModalContent } from './EndRoomModalContent';
 
 export const HMSManageLeave: React.FC<LeaveButtonProps> = (props) => {
   // TODO: read current meeting joined state
@@ -34,24 +36,19 @@ 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();
 
   /**
    * Opens the Leave Popup Menu
    */
   const handleLeaveButtonPress = () => {
-    if (canEndRoom) {
-      setLeavePopVisible(true);
-    } else {
-      setLeaveModalType(ModalTypes.LEAVE_ROOM);
-    }
+    setLeavePopVisible(true);
   };
 
   /**
@@ -59,8 +56,8 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
    * Leave Modal will open after the popup is hidden
    */
   const handleLeavePress = () => {
-    leavePopCloseAction.current = ModalTypes.LEAVE_ROOM;
     setLeavePopVisible(false);
+    leave();
   };
 
   /**
@@ -90,13 +87,23 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
 
   const dismissModal = () => setLeaveModalType(ModalTypes.DEFAULT);
 
-  const { leave, endRoom } = useLeaveMethods();
+  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={hmsRoomStyles.icon} />
     ) : (
-      <LeaveIcon />
+      <EndIcon style={hmsRoomStyles.icon} />
     );
 
   const leaveButtonDelegate =
@@ -110,10 +117,10 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
     <View>
       {React.cloneElement(leaveButtonDelegate, {
         onPress: handleLeaveButtonPress,
-        style: styles.button,
+        style: hmsRoomStyles.button,
       })}
 
-      <LeavePopup
+      <LeaveBottomSheet
         isVisible={leavePopVisible}
         onEndSessionPress={handleEndSessionPress}
         onLeavePress={handleLeavePress}
@@ -121,36 +128,21 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
         onPopupHide={handlePopupHide}
       />
 
-      <DefaultModal
-        modalPosiion="center"
-        modalVisible={leaveModalType === ModalTypes.LEAVE_ROOM}
-        setModalVisible={dismissModal}
+      <BottomSheet
+        dismissModal={dismissModal}
+        isVisible={leaveModalType === ModalTypes.END_ROOM}
+        animationOutTiming={700}
       >
-        <LeaveRoomModal onSuccess={leave} cancelModal={dismissModal} />
-      </DefaultModal>
-
-      <DefaultModal
-        modalPosiion="center"
-        modalVisible={leaveModalType === ModalTypes.END_ROOM}
-        setModalVisible={dismissModal}
-      >
-        <EndRoomModal onSuccess={endRoom} cancelModal={dismissModal} />
-      </DefaultModal>
+        <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
-
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: COLORS.ALERT.ERROR.DEFAULT,
-    borderColor: COLORS.ALERT.ERROR.DEFAULT,
-  },
-});
+// 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 LeavePopupProps {
+interface LeaveBottomSheetProps {
   isVisible: boolean;
   onPopupDismiss(): void;
   onLeavePress(): void;
@@ -158,121 +150,118 @@ interface LeavePopupProps {
   onPopupHide(): void;
 }
 
-const LeavePopup: React.FC<LeavePopupProps> = ({
+const LeaveBottomSheet: React.FC<LeaveBottomSheetProps> = ({
   isVisible,
   onPopupDismiss,
   onLeavePress,
   onEndSessionPress,
   onPopupHide,
 }) => {
-  const safeAreaInsets = useSafeAreaInsets();
   const canEndRoom = useSelector(
     (state: RootState) => state.hmsStates.localPeer?.role?.permissions?.endRoom
   );
 
+  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 (
-    <Modal
+    <BottomSheet
       isVisible={isVisible}
-      animationIn={'fadeIn'}
-      animationOut={'fadeOut'}
-      backdropColor={COLORS.BACKGROUND.DIM}
-      backdropOpacity={0}
-      onBackButtonPress={onPopupDismiss}
-      onBackdropPress={onPopupDismiss}
-      useNativeDriver={true}
+      containerStyle={leavePopupStyles.container}
+      dismissModal={onPopupDismiss}
       onModalHide={onPopupHide}
-      useNativeDriverForBackdrop={true}
-      hideModalContentWhileAnimating={true}
-      style={leavePopupStyles.modal}
+      animationOutTiming={700}
     >
-      <View
-        style={[
-          leavePopupStyles.leavePopupContent,
-          {
-            marginTop: safeAreaInsets.top + HEADER_HEIGHT,
-            marginLeft: safeAreaInsets.left + 16 - 1, // LEFT_HEADER_PADDING - HEADER_BORDER_WIDTH,
-            marginRight: safeAreaInsets.right,
-            marginBottom: safeAreaInsets.bottom,
-          },
-        ]}
-      >
+      <View>
         <TouchableOpacity
-          style={leavePopupStyles.leaveButton}
+          style={leavePopupStyles.button}
           onPress={onLeavePress}
         >
-          <LeaveIcon style={leavePopupStyles.leaveButtonIcon} />
-          <Text style={leavePopupStyles.leaveButtonText}>Leave Studio</Text>
+          <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>
 
         {canEndRoom ? (
-          <>
-            <View style={leavePopupStyles.divider} />
+          <TouchableOpacity
+            style={[leavePopupStyles.button, hmsRoomStyles.endButton]}
+            onPress={onEndSessionPress}
+          >
+            <StopIcon style={[leavePopupStyles.icon, hmsRoomStyles.endIcon]} />
 
-            <TouchableOpacity
-              style={leavePopupStyles.endRoomButton}
-              onPress={onEndSessionPress}
-            >
-              <AlertIcon style={leavePopupStyles.endRoomIcon} />
-              <Text style={leavePopupStyles.endRoomText}>End Session</Text>
-            </TouchableOpacity>
-          </>
+            <View style={leavePopupStyles.textContainer}>
+              <Text style={[leavePopupStyles.text, hmsRoomStyles.endText]}>
+                End Stream
+              </Text>
+              <Text
+                style={[leavePopupStyles.subtext, hmsRoomStyles.endSubtext]}
+              >
+                The stream & session will end for everyone. You can't undo this
+                action.
+              </Text>
+            </View>
+          </TouchableOpacity>
         ) : null}
       </View>
-    </Modal>
+    </BottomSheet>
   );
 };
 
 const leavePopupStyles = StyleSheet.create({
-  modal: {
-    margin: 0,
-    justifyContent: 'flex-start',
-  },
-  leavePopupContent: {
-    overflow: 'hidden',
-    width: 243,
-    backgroundColor: COLORS.SURFACE.DIM,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: COLORS.BORDER.BRIGHT,
+  container: {
+    paddingBottom: 0,
   },
-  leaveButton: {
+  button: {
     flexDirection: 'row',
-    paddingHorizontal: 8,
-    paddingVertical: 16,
+    padding: 24,
   },
-  leaveButtonIcon: {
-    width: 20,
-    height: 20,
-    marginHorizontal: 8,
-    transform: [{ rotateY: '180deg' }],
+  icon: {
+    width: 24,
+    height: 24,
+    marginRight: 16,
   },
-  leaveButtonText: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    lineHeight: 20,
-  },
-  divider: {
-    height: 1,
-    backgroundColor: COLORS.BORDER.BRIGHT,
-  },
-  endRoomButton: {
-    flexDirection: 'row',
-    backgroundColor: COLORS.ALERT.ERROR.DIM,
-    paddingHorizontal: 8,
-    paddingVertical: 16,
+  textContainer: {
+    flex: 1,
   },
-  endRoomIcon: {
-    width: 20,
-    height: 20,
-    marginHorizontal: 8,
+  text: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
   },
-  endRoomText: {
-    color: COLORS.ALERT.ERROR.BRIGHT,
+  subtext: {
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 20,
+    letterSpacing: 0.25,
+    marginTop: 4,
   },
 });

package/src/components/HMSManageLocalAudio.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import { MicIcon } from '../Icons';
 import { useCanPublishAudio, useHMSActions } from '../hooks-sdk';
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { PressableIcon } from './PressableIcon';
 
 export const HMSManageLocalAudio = () => {
@@ -34,16 +32,9 @@ const ToggleAudioMuteButton = () => {
   return (
     <PressableIcon
       onPress={handleAudioMuteTogglePress}
-      style={isLocalAudioMuted ? styles.mutedButton : undefined}
+      active={isLocalAudioMuted}
     >
       <MicIcon muted={!!isLocalAudioMuted} />
     </PressableIcon>
   );
 };
-
-const styles = StyleSheet.create({
-  mutedButton: {
-    backgroundColor: COLORS.SECONDARY.DIM,
-    borderColor: COLORS.SECONDARY.DIM,
-  },
-});

package/src/components/HMSManageLocalVideo.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
 import { PressableIcon } from './PressableIcon';
 import { CameraIcon } from '../Icons';
@@ -34,16 +32,9 @@ const ToggleVideoMuteButton = () => {
   return (
     <PressableIcon
       onPress={handleVideoMuteTogglePress}
-      style={isLocalVideoMuted ? styles.mutedButton : undefined}
+      active={isLocalVideoMuted}
     >
       <CameraIcon muted={!!isLocalVideoMuted} />
     </PressableIcon>
   );
 };
-
-const styles = StyleSheet.create({
-  mutedButton: {
-    backgroundColor: COLORS.SECONDARY.DIM,
-    borderColor: COLORS.SECONDARY.DIM,
-  },
-});

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,
-  },
-});