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

package/src/components/HMSLocalScreenshareNotification.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import { useHMSActions } from '../hooks-sdk';
+import { ScreenShareIcon } from '../Icons';
+import { HMSDangerButton } from './HMSDangerButton';
+import { HMSNotification } from './HMSNotification';
+import { useHMSRoomStyle } from '../hooks-util';
+import { NotificationTypes } from '../utils';
+
+export interface HMSLocalScreenshareNotificationProps {}
+
+export const HMSLocalScreenshareNotification: React.FC<
+  HMSLocalScreenshareNotificationProps
+> = () => {
+  const hmsActions = useHMSActions();
+
+  const notificationStyle = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.surface_default,
+  }));
+
+  const stopScreenshare = async () => {
+    await hmsActions.setScreenShareEnabled(false);
+  };
+
+  return (
+    <HMSNotification
+      id={NotificationTypes.LOCAL_SCREENSHARE}
+      autoDismiss={false}
+      style={notificationStyle}
+      text={'You are sharing your screen'}
+      icon={<ScreenShareIcon />}
+      cta={
+        <HMSDangerButton
+          loading={false}
+          onPress={stopScreenshare}
+          title="Stop"
+        />
+      }
+    />
+  );
+};

package/src/components/HMSLocalVideoView.tsx

@@ -1,42 +1,15 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
-import { HMSVideoViewMode } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
-import { useHMSInstance } from '../hooks-util';
+import { HMSVideoView } from './HMSVideoView';
 
 export const HMSLocalVideoView = () => {
-  const hmsInstance = useHMSInstance();
-  const HmsView = hmsInstance.HmsView;
-  const mirrorCamera = useSelector(
-    (state: RootState) => state.app.joinConfig.mirrorCamera
-  );
-  const autoSimulcast = useSelector(
-    (state: RootState) => state.app.joinConfig.autoSimulcast
-  );
   const localVideoTrackId = useSelector(
     (state: RootState) => state.hmsStates.localPeer?.videoTrack?.trackId
   );
 
-  if (!localVideoTrackId) {
-    return null;
-  }
-
-  return (
-    <HmsView
-      trackId={localVideoTrackId}
-      key={localVideoTrackId}
-      mirror={mirrorCamera}
-      autoSimulcast={autoSimulcast}
-      scaleType={HMSVideoViewMode.ASPECT_FILL}
-      style={styles.hmsView}
-    />
-  );
+  return localVideoTrackId ? (
+    <HMSVideoView trackId={localVideoTrackId} />
+  ) : null;
 };
-
-const styles = StyleSheet.create({
-  hmsView: {
-    flex: 1,
-  },
-});

package/src/components/HMSManageAudioOutput.tsx

@@ -23,12 +23,17 @@ import {
   WaveIcon,
 } from '../Icons';
 import { PressableIcon } from './PressableIcon';
-import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
+import {
+  useHMSInstance,
+  useHMSRoomStyleSheet,
+  useIsHLSViewer,
+} from '../hooks-util';
 import type { RootState } from '../redux';
 import { BottomSheet } from './BottomSheet';
 
 export const HMSManageAudioOutput: React.FC = () => {
   const hmsInstance = useHMSInstance();
+  const isHLSViewer = useIsHLSViewer();
   const [settingsModalVisible, setSettingsModalVisible] = React.useState(false);
 
   const [currentAudioOutputDevice, setCurrentAudioOutputDevice] =
@@ -135,7 +140,10 @@ export const HMSManageAudioOutput: React.FC = () => {
 
   return (
     <View>
-      <PressableIcon onPress={handleSpeakerChange}>
+      <PressableIcon
+        onPress={handleSpeakerChange}
+        style={isHLSViewer ? styles.button : null}
+      >
         {Platform.OS === 'ios' ? (
           <SpeakerIcon muted={false} />
         ) : (
@@ -206,6 +214,10 @@ export const HMSManageAudioOutput: React.FC = () => {
 };
 
 const styles = StyleSheet.create({
+  button: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+  },
   contentContainer: {
     marginHorizontal: 24,
   },

package/src/components/HMSManageLeave.tsx

@@ -2,18 +2,15 @@ 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 { 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
@@ -36,13 +33,12 @@ 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 { leave } = useLeaveMethods();
+  const { leave } = useLeaveMethods(false);
 
   /**
    * Opens the Leave Popup Menu
@@ -55,9 +51,9 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
    * Closes the Leave Popup Menu
    * Leave Modal will open after the popup is hidden
    */
-  const handleLeavePress = () => {
+  const handleLeavePress = async () => {
     setLeavePopVisible(false);
-    leave();
+    await leave();
   };
 
   /**
@@ -69,6 +65,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
@@ -90,20 +91,18 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
   const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
     button: {
       backgroundColor: theme.palette.alert_error_default,
-      borderColor: theme.palette.alert_error_default
+      borderColor: theme.palette.alert_error_default,
     },
     icon: {
-      tintColor: theme.palette.alert_error_brighter
+      tintColor: COLORS.WHITE,
     },
   }));
 
   const leaveIconDelegate =
     'leaveIconDelegate' in props && props.leaveIconDelegate ? (
       props.leaveIconDelegate
-    ) : isHLSViewer ? (
-      <LeaveIcon style={hmsRoomStyles.icon} />
     ) : (
-      <EndIcon style={hmsRoomStyles.icon} />
+      <LeaveIcon style={hmsRoomStyles.icon} />
     );
 
   const leaveButtonDelegate =
@@ -126,6 +125,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
         onLeavePress={handleLeavePress}
         onPopupDismiss={dismissPopup}
         onPopupHide={handlePopupHide}
+        onEndStreamPress={handleEndStreamPress}
       />
 
       <BottomSheet
@@ -147,6 +147,7 @@ interface LeaveBottomSheetProps {
   onPopupDismiss(): void;
   onLeavePress(): void;
   onEndSessionPress(): void;
+  onEndStreamPress(): void;
   onPopupHide(): void;
 }
 
@@ -155,11 +156,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: {
@@ -212,10 +223,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]} />
 
@@ -226,8 +237,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>

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

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