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

package/src/components/DisplayView.tsx

@@ -36,6 +36,8 @@ import { BottomSheet } from './BottomSheet';
 import { FullScreenVideoView } from './FullScreenVideoView';
 import { PreviewForRoleChangeModal } from './PreviewForRoleChangeModal';
 import { ChatAndParticipantsBottomSheet } from './ChatAndParticipants';
+import { LeaveRoomBottomSheet } from './LeaveRoomBottomSheet';
+import { EndRoomModal } from './EndRoomModal';
 
 type CapturedImagePath = { uri: string } | null;
 
@@ -150,6 +152,10 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
 
       {isPipModeActive ? null : (
         <>
+          <LeaveRoomBottomSheet />
+
+          <EndRoomModal />
+
           <PreviewForRoleChangeModal />
 
           <FullScreenVideoView />

package/src/components/EndRoomModal.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { ModalTypes } from '../utils/types';
+import { BottomSheet } from './BottomSheet';
+import { useModalType } from '../hooks-util';
+import { EndRoomModalContent } from './EndRoomModalContent';
+
+interface EndRoomModalProps {}
+
+export const EndRoomModal: React.FC<EndRoomModalProps> = () => {
+  const { modalVisibleType, handleModalVisibleType } = useModalType();
+
+  const dismissModal = () => handleModalVisibleType(ModalTypes.DEFAULT);
+
+  return (
+    <BottomSheet
+      dismissModal={dismissModal}
+      isVisible={modalVisibleType === ModalTypes.END_ROOM}
+      animationOutTiming={700}
+    >
+      <EndRoomModalContent dismissModal={dismissModal} />
+    </BottomSheet>
+  );
+};

package/src/components/EndRoomModalContent.tsx

@@ -6,6 +6,7 @@ import { AlertTriangleIcon, CloseIcon } from '../Icons';
 import { HMSDangerButton } from './HMSDangerButton';
 import { useSelector } from 'react-redux';
 import type { RootState } from '../redux';
+import { OnLeaveReason } from '../utils/types';
 
 export interface EndRoomModalContentProps {
   dismissModal(): void;
@@ -14,7 +15,7 @@ export interface EndRoomModalContentProps {
 export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
   dismissModal,
 }) => {
-  const { endRoom, leave } = useLeaveMethods(false);
+  const { endRoom, leave } = useLeaveMethods();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     headerText: {
@@ -72,7 +73,13 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
       </Text>
       <HMSDangerButton
         loading={false}
-        onPress={canStream && isStreaming ? () => leave(true) : endRoom}
+        onPress={() => {
+          if (canStream && isStreaming) {
+            leave(OnLeaveReason.LEAVE, true)
+          } else {
+            endRoom(OnLeaveReason.ROOM_END);
+          }
+        }}
         title={canStream && isStreaming ? 'End Stream' : 'End Session'}
       />
     </View>

package/src/components/Footer.tsx

@@ -1,6 +1,9 @@
 import React, { memo, useMemo } from 'react';
 import { View, StyleSheet, Platform } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 import {
   useHMSLayoutConfig,
@@ -50,7 +53,11 @@ export const _Footer: React.FC<FooterProps> = () => {
   );
 
   const canShowOptions =
-    canPublishScreen || canShowParticipants || canShowBRB || canStartRecording;
+    isViewer ||
+    canPublishScreen ||
+    canShowParticipants ||
+    canShowBRB ||
+    canStartRecording;
 
   const footerActionButtons = useMemo(() => {
     const actions = [];
@@ -129,6 +136,15 @@ export const _Footer: React.FC<FooterProps> = () => {
   );
 };
 
+export const useFooterHeight = () => {
+  const isHLSViewer = useIsHLSViewer();
+  const { bottom } = useSafeAreaInsets();
+
+  return (
+    bottom + (isHLSViewer ? 8 : 16) + (Platform.OS === 'android' ? 16 : 0) + 40
+  ); // bottomSafeArea + paddingTop + marginBottom + content
+};
+
 const styles = StyleSheet.create({
   container: {
     paddingTop: 16,

package/src/components/HMSDangerButton.tsx

@@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 
 import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
 import { HMSBaseButton } from './HMSBaseButton';
+import { COLORS } from '../utils/theme';
 
 export interface HMSDangerButtonProps {
   title: string;
@@ -34,7 +35,7 @@ export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
       backgroundColor: theme.palette.alert_error_dim,
     },
     buttonText: {
-      color: theme.palette.alert_error_brighter,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
     disabledText: {

package/src/components/HMSHLSStreamLoading.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 
-import { COLORS } from '../utils/theme';
+import { hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
 import { HMSLocalVideoView } from './HMSLocalVideoView';
 import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
@@ -22,13 +22,20 @@ export const HMSHLSStreamLoading = () => {
       color: theme.palette.on_surface_high,
       fontFamily: `${typography.font_family}-Regular`,
     },
+    backdropContainer: {
+      backgroundColor: theme.palette.background_dim
+        ? hexToRgbA(theme.palette.background_dim, 0.7)
+        : undefined,
+    },
   }));
 
   return (
     <View style={[styles.container, hmsRoomStyles.container]}>
       {isLocalVideoMuted ? null : <HMSLocalVideoView />}
 
-      <View style={styles.hlsLoaderContainer}>
+      <View
+        style={[styles.hlsLoaderContainer, hmsRoomStyles.backdropContainer]}
+      >
         <ActivityIndicator
           style={styles.hlsLoader}
           size={'large'}
@@ -52,7 +59,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
     height: '100%',
-    backgroundColor: COLORS.LOADING_BACKDROP,
     zIndex: 5,
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/HMSKeyboardAvoidingView.tsx

@@ -1,39 +1,25 @@
 import * as React from 'react';
-import { Platform, StatusBar, useWindowDimensions } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Animated, {
+  useAnimatedKeyboard,
   useAnimatedStyle,
-  useSharedValue,
+  useDerivedValue,
 } from 'react-native-reanimated';
-import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
 
 export interface HMSKeyboardAvoidingViewProps {
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
+  bottomOffset?: number;
 }
 
 export const HMSKeyboardAvoidingView: React.FC<
   HMSKeyboardAvoidingViewProps
-> = ({ children, style }) => {
-  const animatedViewRef = React.useRef<Animated.View>(null);
-  const { height: windowHeight } = useWindowDimensions();
-  const animatedKeyboard = useReanimatedKeyboardAnimation();
+> = ({ children, style, bottomOffset=0 }) => {
+  const animatedKeyboard = useAnimatedKeyboard();
 
-  const initialPageY = useSharedValue(0);
-
-  const _handleViewOnLayout = React.useCallback(() => {
-    animatedViewRef.current?.measureInWindow((_fx, fy, _width, height) => {
-      if (height > 0) {
-        const finalWindowHeight =
-          Platform.OS === 'android' && Platform.Version < 29
-            ? windowHeight - (StatusBar.currentHeight ?? 0)
-            : windowHeight;
-        initialPageY.value = finalWindowHeight - (height + fy);
-      }
-    });
-  }, []);
+  const initialPageY = useDerivedValue(() => bottomOffset, [bottomOffset]);
 
   const keyboardAvoidStyle = useAnimatedStyle(() => {
-    const keyboardHeight = -animatedKeyboard.height.value;
+    const keyboardHeight = animatedKeyboard.height.value;
     return {
       transform: [
         {
@@ -47,11 +33,7 @@ export const HMSKeyboardAvoidingView: React.FC<
   });
 
   return (
-    <Animated.View
-      ref={animatedViewRef}
-      onLayout={_handleViewOnLayout}
-      style={[style, keyboardAvoidStyle]}
-    >
+    <Animated.View style={[style, keyboardAvoidStyle]}>
       {children}
     </Animated.View>
   );

package/src/components/HMSLiveIndicator.tsx

@@ -14,7 +14,7 @@ import {
   useShowChatAndParticipants,
 } from '../hooks-util';
 import { EyeIcon } from '../Icons';
-import { hexToRgbA } from '../utils/theme';
+import { COLORS, hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
 
 const _HMSLiveIndicator = () => {
@@ -23,7 +23,7 @@ const _HMSLiveIndicator = () => {
     (state: RootState) => state.hmsStates.room?.peerCount
   );
   const live = useSelector(
-    (state: RootState) => !!state.hmsStates.room?.hlsStreamingState.running
+    (state: RootState) => !!state.hmsStates.room?.hlsStreamingState?.running
   );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
@@ -31,7 +31,7 @@ const _HMSLiveIndicator = () => {
       backgroundColor: theme.palette.alert_error_default,
     },
     liveText: {
-      color: theme.palette.alert_error_brighter,
+      color: COLORS.WHITE,
       fontFamily: `${typograhy.font_family}-SemiBold`,
     },
     viewers: {

package/src/components/HMSLocalScreenshareNotification.tsx

@@ -5,7 +5,7 @@ import { ScreenShareIcon } from '../Icons';
 import { HMSDangerButton } from './HMSDangerButton';
 import { HMSNotification } from './HMSNotification';
 import { useHMSRoomStyle } from '../hooks-util';
-import { NotificationTypes } from '../utils';
+import { NotificationTypes } from '../types';
 
 export interface HMSLocalScreenshareNotificationProps {}
 

package/src/components/HMSManageLeave.tsx

@@ -1,15 +1,11 @@
 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) => {
   // TODO: read current meeting joined state
@@ -31,69 +27,22 @@ 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,
       borderColor: theme.palette.alert_error_default,
     },
     icon: {
-      tintColor: theme.palette.alert_error_brighter,
+      tintColor: COLORS.WHITE,
     },
   }));
 
@@ -117,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/HMSManageRaiseHand.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useSelector, shallowEqual } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
 import { useHMSActions } from '../hooks-sdk';
@@ -10,24 +10,31 @@ import { parseMetadata } from '../utils/functions';
 export const HMSManageRaiseHand = () => {
   const hmsActions = useHMSActions();
   const localPeerMetadata = useSelector(
-    (state: RootState) => parseMetadata(state.hmsStates.localPeer?.metadata),
-    shallowEqual
+    (state: RootState) => state.hmsStates.localPeer?.metadata
+  );
+  const parsedLocalPeerMetadata = parseMetadata(localPeerMetadata);
+  const isBRBOn = !!parsedLocalPeerMetadata.isBRBOn;
+  const isHandRaised = useSelector(
+    (state: RootState) => !!state.hmsStates.localPeer?.isHandRaised
   );
 
   const toggleRaiseHand = async () => {
-    const newMetadata = {
-      ...localPeerMetadata,
-      isHandRaised: !localPeerMetadata.isHandRaised,
-      isBRBOn: false,
-    };
-    await hmsActions.changeMetadata(newMetadata);
+    if (isBRBOn) {
+      const newMetadata = {
+        ...parsedLocalPeerMetadata,
+        isBRBOn: false,
+      };
+      await hmsActions.changeMetadata(newMetadata);
+    }
+    if (isHandRaised) {
+      await hmsActions.lowerLocalPeerHand();
+    } else {
+      await hmsActions.raiseLocalPeerHand();
+    }
   };
 
   return (
-    <PressableIcon
-      onPress={toggleRaiseHand}
-      active={localPeerMetadata.isHandRaised}
-    >
+    <PressableIcon onPress={toggleRaiseHand} active={isHandRaised}>
       <HandIcon />
     </PressableIcon>
   );

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}