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

package/src/components/WelcomeInMeeting.tsx

@@ -1,30 +1,31 @@
 import * as React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, StyleSheet, Text } from 'react-native';
 
+import { WelcomeHandIcon } from '../Icons';
 import { useHMSRoomStyleSheet } from '../hooks-util';
 
 export interface WelcomeInMeetingProps {}
 
 export const WelcomeInMeeting: React.FC<WelcomeInMeetingProps> = () => {
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
-    heading: {
-      fontFamily: `${typography.font_family}-Bold`,
+    title: {
       color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
     },
-    description: {
-      fontFamily: `${typography.font_family}-Medium`,
+    subtitle: {
       color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
     },
   }));
 
   return (
     <View style={styles.container}>
-      <Text style={[styles.heading, hmsRoomStyles.heading]}>Welcome!</Text>
-      <Text style={[styles.description, hmsRoomStyles.description]}>
-        You're the first one here.
-      </Text>
-      <Text style={[styles.description, hmsRoomStyles.description]}>
-        Sit back and relax till the others join.
+      <WelcomeHandIcon />
+
+      <Text style={[styles.title, hmsRoomStyles.title]}>Welcome!</Text>
+
+      <Text style={[styles.subtitle, hmsRoomStyles.subtitle]}>
+        Sit back and relax.
       </Text>
     </View>
   );
@@ -36,17 +37,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  heading: {
-    fontSize: 28,
-    lineHeight: 36,
-    letterSpacing: 0.1,
-    textAlign: 'center',
-    paddingBottom: 32,
+  title: {
+    fontSize: 24,
+    lineHeight: 32,
+    marginTop: 24,
   },
-  description: {
+  subtitle: {
     fontSize: 16,
     lineHeight: 24,
-    letterSpacing: 0.15,
-    textAlign: 'center',
+    letterSpacing: 0.5,
+    marginTop: 8,
   },
 });

package/src/components/index.ts

@@ -1,7 +1,4 @@
-export * from './ChatWindow';
 export * from './Preview';
-export * from './Picker';
-export * from './CustomInput';
 export * from './CustomButton';
 export * from './DefaultModal';
 export * from './MenuModal';

package/src/hooks-sdk.ts

@@ -11,6 +11,7 @@ import {
   selectCanPublishTrack,
 } from './hooks-sdk-selectors';
 import { useCallback } from 'react';
+import type { HMSPeer } from '@100mslive/react-native-hms';
 
 export const useAllowedTracksToPublish = () => {
   return useSelector(selectAllowedTracksToPublish);
@@ -163,6 +164,60 @@ export const useHMSActions = () => {
     }
   }, []);
 
+  const raiseLocalPeerHand = useCallback(async (): Promise<void> => {
+    const state: RootState = store.getState();
+    const hmsInstance = state.user.hmsInstance;
+
+    if (!hmsInstance) {
+      return Promise.reject('HMSSDK Instance is not available!');
+    }
+
+    try {
+      const result = await hmsInstance.raiseLocalPeerHand();
+      console.log('Raise Local Peer Hand Success: ', result);
+    } catch (error) {
+      console.log('Raise Local Peer Hand Error: ', error);
+      return Promise.reject(error);
+    }
+  }, []);
+
+  const lowerLocalPeerHand = useCallback(async (): Promise<void> => {
+    const state: RootState = store.getState();
+    const hmsInstance = state.user.hmsInstance;
+
+    if (!hmsInstance) {
+      return Promise.reject('HMSSDK Instance is not available!');
+    }
+
+    try {
+      const result = await hmsInstance.lowerLocalPeerHand();
+      console.log('Lower Local Peer Hand Success: ', result);
+    } catch (error) {
+      console.log('Lower Local Peer Hand Error: ', error);
+      return Promise.reject(error);
+    }
+  }, []);
+
+  const lowerRemotePeerHand = useCallback(
+    async (peer: HMSPeer): Promise<void> => {
+      const state: RootState = store.getState();
+      const hmsInstance = state.user.hmsInstance;
+
+      if (!hmsInstance) {
+        return Promise.reject('HMSSDK Instance is not available!');
+      }
+
+      try {
+        const result = await hmsInstance.lowerRemotePeerHand(peer);
+        console.log('Lower Remote Peer Hand Success: ', result);
+      } catch (error) {
+        console.log('Lower Remote Peer Hand Error: ', error);
+        return Promise.reject(error);
+      }
+    },
+    []
+  );
+
   return {
     setLocalAudioEnabled,
     setLocalVideoEnabled,
@@ -170,5 +225,8 @@ export const useHMSActions = () => {
     setScreenShareEnabled,
     changeMetadata,
     changeName,
+    raiseLocalPeerHand,
+    lowerLocalPeerHand,
+    lowerRemotePeerHand,
   };
 };

package/src/hooks-util-selectors.tsx

@@ -1,17 +1,56 @@
-import type { HMSPeer } from '@100mslive/react-native-hms';
+import type {
+  DefaultConferencingScreen,
+  HLSLiveStreamingScreen,
+  Layout,
+} from '@100mslive/types-prebuilt';
+import type { HMSRole } from '@100mslive/react-native-hms';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 
 import type { RootState } from './redux';
 
-export const selectIsHLSViewer = (peer: HMSPeer | null | undefined) =>
-  peer?.role?.name?.includes('hls') ?? false;
+export const selectIsHLSViewer = (
+  role: HMSRole | null | undefined,
+  layoutConfig: Layout | null | undefined
+) => {
+  if (layoutConfig) {
+    return !!layoutConfig.screens?.conferencing?.hls_live_streaming;
+  }
+  return role?.name?.includes('hls-') ?? false;
+};
+
+export const selectLayoutConfigForRole = (
+  layoutConfig: Layout[] | null,
+  role: HMSRole | null
+): Layout | null => {
+  if (layoutConfig === null || layoutConfig.length <= 0) {
+    return null;
+  }
+
+  if (role === null) {
+    return layoutConfig[0] || null;
+  }
+
+  const selectedLayout = layoutConfig.find(
+    (layout) => layout.role === role.name
+  );
+
+  return selectedLayout || layoutConfig[0] || null;
+};
 
 export const selectShouldGoLive = (state: RootState) => {
-  const layoutConfig = state.hmsStates.layoutConfig;
-  const isHLSStreaming = state.hmsStates.room?.hlsStreamingState.running;
+  const currentRole = state.hmsStates.localPeer?.role || null;
+
+  const layoutConfig = selectLayoutConfigForRole(
+    state.hmsStates.layoutConfig,
+    currentRole
+  );
+
+  const isHLSStreaming =
+    state.hmsStates.room?.hlsStreamingState?.running ?? false;
 
   const joinButtonType =
-    layoutConfig?.screens?.preview?.default?.elements?.join_form?.join_btn_type;
+    layoutConfig?.screens?.preview?.default?.elements?.join_form
+      ?.join_btn_type ?? JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_ONLY;
 
   const canStartHLSStreaming =
     joinButtonType === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE ||
@@ -23,3 +62,27 @@ export const selectShouldGoLive = (state: RootState) => {
 
   return canStartHLSStreaming && !isHLSStreaming;
 };
+
+export const selectChatLayoutConfig = (layoutConfig: Layout | null) => {
+  const conferencingConfig = layoutConfig?.screens?.conferencing;
+  const screenOptions = conferencingConfig
+    ? conferencingConfig.default || conferencingConfig.hls_live_streaming
+    : null;
+
+  return screenOptions?.elements?.chat ?? null;
+};
+
+export const selectVideoTileLayoutConfig = (layoutConfig: Layout | null) => {
+  return layoutConfig?.screens?.conferencing?.default?.elements
+    ?.video_tile_layout;
+};
+
+export const selectConferencingScreenConfig = (
+  layoutConfig: Layout | null
+): DefaultConferencingScreen | HLSLiveStreamingScreen | null => {
+  const conferencingConfig = layoutConfig?.screens?.conferencing;
+  return (
+    (conferencingConfig?.default || conferencingConfig?.hls_live_streaming) ??
+    null
+  );
+};