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

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,12 +2,8 @@ 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';
@@ -36,13 +32,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 +50,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 +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
@@ -90,20 +90,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: theme.palette.alert_error_brighter,
     },
   }));
 
   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 +124,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
         onLeavePress={handleLeavePress}
         onPopupDismiss={dismissPopup}
         onPopupHide={handlePopupHide}
+        onEndStreamPress={handleEndStreamPress}
       />
 
       <BottomSheet
@@ -147,6 +146,7 @@ interface LeaveBottomSheetProps {
   onPopupDismiss(): void;
   onLeavePress(): void;
   onEndSessionPress(): void;
+  onEndStreamPress(): void;
   onPopupHide(): void;
 }
 
@@ -155,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: {
@@ -212,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]} />
 
@@ -226,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>

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

@@ -21,11 +21,19 @@ export const HMSRecordingIndicator = () => {
   }));
 
   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;
@@ -36,4 +44,7 @@ const styles = StyleSheet.create({
     width: 24,
     height: 24,
   },
+  rightSpace: {
+    marginRight: 8,
+  },
 });

package/src/components/HMSRoleChangeDeclinedNotification.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { HMSNotification } from './HMSNotification';
+import { PersonIcon } from '../Icons';
+
+export interface HMSRoleChangeDeclinedNotificationProps {
+  peerName: string;
+  id: string;
+  autoDismiss?: boolean;
+  dismissDelay?: number;
+}
+
+export const HMSRoleChangeDeclinedNotification: React.FC<
+  HMSRoleChangeDeclinedNotificationProps
+> = ({ peerName, id, autoDismiss, dismissDelay }) => {
+  return (
+    <HMSNotification
+      id={id}
+      text={`${peerName} declined the request to join the stage`}
+      icon={<PersonIcon type="off" />}
+      autoDismiss={autoDismiss}
+      dismissDelay={dismissDelay}
+    />
+  );
+};