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

package/src/HMSPrebuilt.tsx

@@ -18,6 +18,7 @@ export interface HMSPrebuiltProps {
     endPoints?: {
       init: string;
       token: string;
+      layout: string;
     };
     debugMode?: boolean;
     ios?: HMSIOSScreenShareConfig;
@@ -34,21 +35,17 @@ const _HMSPrebuilt: React.FC<HMSPrebuiltProps> = (props) => {
   // We just want to check if SafeAreaProvider exists or not
   const safeAreaProviderExists = !!SafeAreaInsetsContext.Consumer._currentValue;
 
+  const content = (
+    <Provider store={store}>
+      <HMSContainer />
+    </Provider>
+  );
+
   if (safeAreaProviderExists) {
-    return (
-      <Provider store={store}>
-        <HMSContainer />
-      </Provider>
-    );
+    return content;
   }
 
-  return (
-    <SafeAreaProvider>
-      <Provider store={store}>
-        <HMSContainer />
-      </Provider>
-    </SafeAreaProvider>
-  );
+  return <SafeAreaProvider>{content}</SafeAreaProvider>;
 };
 
 // TODO: handle props change

package/src/HMSRoomSetup.tsx

@@ -39,6 +39,7 @@ import {
   useHMSRoomStyle,
   useHMSSessionStore,
   useLeaveMethods,
+  isPublishingAllowed,
 } from './hooks-util';
 import {
   peerTrackNodeExistForPeerAndTrack,
@@ -50,8 +51,15 @@ import { MeetingState } from './types';
 import { getJoinConfig } from './utils';
 import { FullScreenIndicator } from './components/FullScreenIndicator';
 import { HMSMeetingEnded } from './components/HMSMeetingEnded';
-import { selectIsHLSViewer, selectShouldGoLive } from './hooks-util-selectors';
+import {
+  selectChatLayoutConfig,
+  selectIsHLSViewer,
+  selectLayoutConfigForRole,
+  selectShouldGoLive,
+  selectVideoTileLayoutConfig,
+} from './hooks-util-selectors';
 import type { RootState } from './redux';
+import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
 
 type PreviewData = {
   room: HMSRoom;
@@ -64,6 +72,7 @@ export const HMSRoomSetup = () => {
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
   const reduxStore = useStore<RootState>();
+  const { goToPreview } = useLeaveMethods(true);
 
   const { getConfig, clearConfig } = useHMSConfig();
   const meetingState = useSelector(
@@ -71,7 +80,6 @@ export const HMSRoomSetup = () => {
   );
   const [peerTrackNodes, setPeerTrackNodes] = useState<PeerTrackNode[]>([]);
   const [loading, setLoading] = useState(false);
-  const { goToPreview } = useLeaveMethods();
 
   const joinMeeting = useCallback(async () => {
     setLoading(true);
@@ -97,7 +105,7 @@ export const HMSRoomSetup = () => {
       console.log('Start HLS Streaming Error: ', e);
       if (!ignoreHLSStreamPromise.current) {
         console.log('Unable to go live at the moment: ', e);
-        goToPreview();
+        // goToPreview();
       }
     }
   }, [goToPreview, hmsInstance]);
@@ -193,13 +201,38 @@ export const HMSRoomSetup = () => {
       const peer = localPeer;
       const track = localPeer.videoTrack as HMSTrack | undefined;
 
+      const currentLayoutConfig = selectLayoutConfigForRole(
+        reduxState.hmsStates.layoutConfig,
+        localPeer.role || null
+      );
+
+      const isHLSViewer = selectIsHLSViewer(
+        localPeer.role,
+        currentLayoutConfig
+      );
+
       // Creating `PeerTrackNode` for local peer
       const localPeerTrackNode = createPeerTrackNode(peer, track);
 
+      const enableLocalTileInset =
+        selectVideoTileLayoutConfig(currentLayoutConfig)?.grid
+          ?.enable_local_tile_inset;
+
+      const canCreateTile = isPublishingAllowed(localPeer) && !isHLSViewer;
+
       batch(() => {
-        if (selectIsHLSViewer(localPeer)) {
+        const chatConfig = selectChatLayoutConfig(currentLayoutConfig);
+        const overlayChatInitialState =
+          chatConfig && chatConfig.is_overlay && chatConfig.initial_state;
+
+        if (
+          !!chatConfig &&
+          overlayChatInitialState === Chat_ChatState.CHAT_STATE_OPEN
+        ) {
           dispatch({ type: 'SET_SHOW_CHAT_VIEW', showChatView: true });
-        } else {
+        }
+
+        if (canCreateTile) {
           if (reduxState.app.localPeerTrackNode) {
             dispatch(
               updateLocalPeerTrackNode({ peer, track: peer.videoTrack })
@@ -210,8 +243,11 @@ export const HMSRoomSetup = () => {
           }
 
           // setting local `PeerTrackNode` as node for MiniView
-          dispatch(setMiniViewPeerTrackNode(localPeerTrackNode));
+          if (enableLocalTileInset) {
+            dispatch(setMiniViewPeerTrackNode(localPeerTrackNode));
+          }
         }
+
         dispatch(setHMSRoomState(data.room));
         dispatch(setHMSLocalPeerState(data.room.localPeer));
       });
@@ -232,8 +268,10 @@ export const HMSRoomSetup = () => {
           return replacePeerTrackNodes(prevPeerTrackNodes, peer);
         }
 
-        //   const hmsLocalPeer = createPeerTrackNode(peer, track);
-        //   return [hmsLocalPeer, ...prevPeerTrackNodes];
+        // setting local `PeerTrackNode` in regular peerTrackNodes array when inset tile is disabled
+        if (!enableLocalTileInset && canCreateTile) {
+          return [localPeerTrackNode, ...prevPeerTrackNodes];
+        }
 
         return prevPeerTrackNodes;
       });
@@ -295,31 +333,15 @@ export const HMSRoomSetup = () => {
     }
   }, [meetingEnded]);
 
+  const { leave } = useLeaveMethods(true);
+
   useEffect(() => {
     return () => {
       ignoreHLSStreamPromise.current = true;
-
-      // TODOS:
-      // - Check If we have already left meeting, or destroyed native HMSSDK
-      //    - No need to reset redux state?
-      //    - HMSInstance will be available till this point
-      //    - If we have callback fn, call it
-      //    - When we are navigated away from screen, HMSInstance will be not available
-      // - Otherwise
-      //    - call leave method, if not called
-      //    - call destroy method, if not called
-      //    - Reset Redux States or No need?
-      //    - If we have callback fn, call it
-      //    - When we are navigated away from screen, HMSInstance will be not available
-      hmsInstance.leave().finally(() => {
-        hmsInstance.destroy();
-        dispatch(clearStore());
-      });
-      //dispatch(clearHmsReference());
-      // dispatch(clearMessageData());
-      // dispatch(clearPeerData());
+      leave();
+      dispatch(clearStore());
     };
-  }, [hmsInstance]);
+  }, []);
 
   const emptyViewStyles = useHMSRoomStyle((theme) => ({
     backgroundColor: theme.palette.background_dim,

package/src/Icons/AlertTriangle/index.tsx

@@ -4,10 +4,13 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface AlertTriangleIconProps extends Omit<ImageProps, 'source'> {}
+interface AlertTriangleIconProps extends Omit<ImageProps, 'source'> {
+  type?: 'fill' | 'line';
+}
 
 export const AlertTriangleIcon: React.FC<AlertTriangleIconProps> = ({
   style,
+  type = 'line',
   ...restProps
 }) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
@@ -16,7 +19,11 @@ export const AlertTriangleIcon: React.FC<AlertTriangleIconProps> = ({
 
   return (
     <Image
-      source={require('./assets/alert-triangle.png')}
+      source={
+        type === 'fill'
+          ? require('./assets/alert-triangle-filled.png')
+          : require('./assets/alert-triangle.png')
+      }
       style={[styles.icon, iconStyles, style]}
       {...restProps}
     />

package/src/Icons/Chevron/index.tsx

@@ -5,7 +5,7 @@ import type { ImageProps } from 'react-native';
 import { useHMSRoomStyle } from '../../hooks-util';
 
 interface ChevronIconProps extends Omit<ImageProps, 'source'> {
-  direction: 'left' | 'down';
+  direction: 'left' | 'down' | 'right' | 'top';
 }
 
 export const ChevronIcon: React.FC<ChevronIconProps> = ({
@@ -24,7 +24,14 @@ export const ChevronIcon: React.FC<ChevronIconProps> = ({
           ? require('./assets/chevron-down.png')
           : require('./assets/chevron-left.png')
       }
-      style={[styles.icon, iconStyles, style]}
+      style={[
+        styles.icon,
+        direction === 'right' || direction === 'top' ? {
+          transform: [{rotateZ: direction === 'right' ? '180deg' : '90deg' }]
+        } : null,
+        iconStyles,
+        style,
+      ]}
       {...restProps}
     />
   );

package/src/Icons/Eye/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface EyeIconProps extends Omit<ImageProps, 'source'> {
+  size?: 'small';
+}
+
+export const EyeIcon: React.FC<EyeIconProps> = ({
+  style,
+  size = 'small',
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/eye-on-small.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 16,
+    height: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Leave/index.tsx

@@ -2,16 +2,22 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
+import { useHMSRoomStyle } from '../../hooks-util';
+
 interface LeaveIconProps extends Omit<ImageProps, 'source'> {}
 
 export const LeaveIcon: React.FC<LeaveIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={require('./assets/leave.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/Person/index.tsx

@@ -2,15 +2,26 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
-interface PersonIconProps extends Omit<ImageProps, 'source'> {}
+interface PersonIconProps extends Omit<ImageProps, 'source'> {
+  type?: 'off' | 'normal' | 'left' | 'rectangle';
+}
 
 export const PersonIcon: React.FC<PersonIconProps> = ({
   style,
+  type = 'normal',
   ...restProps
 }) => {
   return (
     <Image
-      source={require('./assets/person.png')}
+      source={
+        type === 'off'
+          ? require('./assets/person-off.png')
+          : type === 'left'
+          ? require('./assets/person-left.png')
+          : type === 'rectangle'
+          ? require('./assets/person-rectangle.png')
+          : require('./assets/person.png')
+      }
       style={[styles.icon, style]}
       {...restProps}
     />

package/src/Icons/Search/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface SearchIconProps extends Omit<ImageProps, 'source'> {}
+
+export const SearchIcon: React.FC<SearchIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/search.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/WelcomeHand/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface WelcomeHandIconProps extends Omit<ImageProps, 'source'> {}
+
+export const WelcomeHandIcon: React.FC<WelcomeHandIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/welcome-hand.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 64,
+    height: 64,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/index.ts

@@ -35,3 +35,6 @@ export * from './Recording';
 export * from './AlertTriangle';
 export * from './Hamburger';
 export * from './Stop';
+export * from './Eye';
+export * from './Search';
+export * from './WelcomeHand';