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

package/src/components/HMSManageLeave.tsx

@@ -1,20 +1,20 @@
-import { useNavigation } from '@react-navigation/native';
 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 Toast from 'react-native-simple-toast';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { AlertIcon, LeaveIcon } from '../Icons';
-import { useHMSInstance } from '../hooks-util';
+import { useSelector } from 'react-redux';
+
+import { EndIcon, LeaveIcon } from '../Icons';
+import {
+  useHMSRoomStyleSheet,
+  useIsHLSViewer,
+  useLeaveMethods,
+} from '../hooks-util';
 import type { RootState } from '../redux';
-import { clearStore } from '../redux/actions';
 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
@@ -36,12 +36,8 @@ type LeaveButtonProps =
     };
 
 const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
-  // TODO: What if useNavigation context is undefined?
-  const navigation = useNavigation();
-  const hmsInstance = useHMSInstance();
-  const dispatch = useDispatch();
   const leavePopCloseAction = React.useRef(ModalTypes.DEFAULT);
-
+  const isHLSViewer = useIsHLSViewer();
   const [leavePopVisible, setLeavePopVisible] = React.useState(false);
   const [leaveModalType, setLeaveModalType] = React.useState(
     ModalTypes.DEFAULT
@@ -50,6 +46,8 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
     (state: RootState) => state.hmsStates.localPeer?.role?.permissions?.endRoom
   );
 
+  const { leave } = useLeaveMethods();
+
   /**
    * Opens the Leave Popup Menu
    */
@@ -66,8 +64,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();
   };
 
   /**
@@ -97,77 +95,13 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
 
   const dismissModal = () => setLeaveModalType(ModalTypes.DEFAULT);
 
-  const destroy = () => {
-    hmsInstance
-      .destroy()
-      .then((s) => {
-        console.log('Destroy Success: ', s);
-        // TODOS:
-        // - If show `Meeting_Ended` is true, show Meeting screen by setting state to MEETING_ENDED
-        //    - Reset Redux States
-        //    - HMSInstance will not be available now
-        //    - When your presses "Re Join" Action button, restart process from root component
-        //    - When your presses "Done" Action button
-        //        - If we have callback fn, call it
-        //        - Otherwise try our best to navigate away from current screen
-        //
-        // - No screen to show
-        //    - No need to reset redux state?
-        //    - HMSInstance will be available till this point
-        //    - If we have callback fn, call it
-        //    - Otherwise try our best to navigate away from current screen
-        //    - When we are navigated away from screen, HMSInstance will be not available
-
-        // dispatch(clearMessageData());
-        // dispatch(clearPeerData());
-        // dispatch(clearHmsReference());
-
-        // if (navigation.canGoBack()) {
-        //   navigation.goBack();
-        // } else {
-        // TODO: remove this later
-        navigation.navigate('QRCodeScreen' as never);
-        dispatch(clearStore());
-        // }
-      })
-      .catch((e) => {
-        console.log(`Destroy HMS instance Error: ${e}`);
-        Toast.showWithGravity(
-          `Destroy HMS instance Error: ${e}`,
-          Toast.LONG,
-          Toast.TOP
-        );
-      });
-  };
-
-  const onLeavePress = () => {
-    hmsInstance
-      .leave()
-      .then((d) => {
-        console.log('Leave Success: ', d);
-        destroy();
-      })
-      .catch((e) => {
-        console.log(`Leave Room Error: ${e}`);
-        Toast.showWithGravity(`Leave Room Error: ${e}`, Toast.LONG, Toast.TOP);
-      });
-  };
-
-  const onEndRoomPress = () => {
-    hmsInstance
-      .endRoom('Host ended the room')
-      .then((d) => {
-        console.log('EndRoom Success: ', d);
-        destroy();
-      })
-      .catch((e) => console.log('EndRoom Error: ', e));
-  };
-
   const leaveIconDelegate =
     'leaveIconDelegate' in props && props.leaveIconDelegate ? (
       props.leaveIconDelegate
+    ) : isHLSViewer ? (
+      <LeaveIcon style={{ transform: [{ rotateZ: '180 deg' }] }} />
     ) : (
-      <LeaveIcon />
+      <EndIcon />
     );
 
   const leaveButtonDelegate =
@@ -184,7 +118,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
         style: styles.button,
       })}
 
-      <LeavePopup
+      <LeaveBottomSheet
         isVisible={leavePopVisible}
         onEndSessionPress={handleEndSessionPress}
         onLeavePress={handleLeavePress}
@@ -192,27 +126,19 @@ 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={onLeavePress} cancelModal={dismissModal} />
-      </DefaultModal>
-
-      <DefaultModal
-        modalPosiion="center"
-        modalVisible={leaveModalType === ModalTypes.END_ROOM}
-        setModalVisible={dismissModal}
-      >
-        <EndRoomModal onSuccess={onEndRoomPress} 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 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: {
@@ -221,7 +147,7 @@ const styles = StyleSheet.create({
   },
 });
 
-interface LeavePopupProps {
+interface LeaveBottomSheetProps {
   isVisible: boolean;
   onPopupDismiss(): void;
   onLeavePress(): void;
@@ -229,121 +155,119 @@ 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</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.endRoomButton}
-              onPress={onEndSessionPress}
-            >
-              <AlertIcon style={leavePopupStyles.endRoomIcon} />
-              <Text style={leavePopupStyles.endRoomText}>End Session</Text>
-            </TouchableOpacity>
-          </>
+          <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 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,
+  icon: {
+    width: 24,
+    height: 24,
+    marginRight: 16,
     transform: [{ rotateY: '180deg' }],
   },
-  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/HMSMeetingEnded.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { COLORS } from '../utils/theme';
+
+export const HMSMeetingEnded = () => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.title}>Meeting Ended</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.BACKGROUND.DIM,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 24,
+    fontFamily: 'Inter-SemiBold',
+    lineHeight: 32,
+  },
+});

package/src/components/HMSPreviewEditName.tsx

@@ -1,63 +1,22 @@
 import * as React from 'react';
-import { StyleSheet, TextInput } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
 import { changeUsername } from '../redux/actions';
 import { useHMSConfig } from '../hooks-util';
+import { HMSTextInput } from './HMSTextInput';
 
 export interface HMSPreviewEditNameProps {}
 
 export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
   const dispatch = useDispatch();
-  const { clearConfig } = useHMSConfig();
+  const { updateConfig } = useHMSConfig();
   const userName = useSelector((state: RootState) => state.user.userName);
-  const [inputFocused, setInputFocused] = React.useState(false);
 
   const handleNameChange = (name: string) => {
     dispatch(changeUsername(name));
-    clearConfig();
+    updateConfig({ username: name });
   };
 
-  const handleInputFocus = () => setInputFocused(true);
-
-  const handleInputBlur = () => setInputFocused(false);
-
-  return (
-    <TextInput
-      style={[styles.input, inputFocused ? styles.focusedInput : null]}
-      value={userName}
-      onChangeText={handleNameChange}
-      placeholder="Enter Name..."
-      autoCapitalize="words"
-      autoCompleteType="name"
-      placeholderTextColor={COLORS.SURFACE.ON_SURFACE.LOW}
-      selectionColor={COLORS.SURFACE.ON_SURFACE.HIGH}
-      onFocus={handleInputFocus}
-      onBlur={handleInputBlur}
-    />
-  );
+  return <HMSTextInput value={userName} onChangeText={handleNameChange} />;
 };
-
-const styles = StyleSheet.create({
-  input: {
-    flex: 1,
-    textAlignVertical: 'center',
-    backgroundColor: COLORS.SURFACE.DEFAULT,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderRadius: 8,
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    letterSpacing: 0.5,
-    borderWidth: 2,
-    borderColor: COLORS.SURFACE.DEFAULT,
-  },
-  focusedInput: {
-    borderColor: COLORS.PRIMARY.DEFAULT,
-    borderWidth: 2,
-  },
-});

package/src/components/HMSPreviewHLSLiveIndicator.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import type { RootState } from '../redux';
+import { useHMSRoomStyleSheet } from '../hooks-util';
+
+export const HMSPreviewHLSLiveIndicator = () => {
+  const isHLSStreaming = useSelector(
+    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.running
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.alert_error_default,
+    },
+    circle: {
+      backgroundColor: theme.palette.on_surface_high,
+    },
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  if (!isHLSStreaming) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <View style={styles.circleContainer}>
+        <View style={[styles.circle, hmsRoomStyles.circle]} />
+      </View>
+      <Text style={[styles.text, hmsRoomStyles.text]}>LIVE</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 20,
+    paddingLeft: 8,
+    paddingRight: 12,
+    marginRight: 8,
+  },
+  circleContainer: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  circle: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+  text: {
+    marginLeft: 4,
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+});