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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "0.0.4",
+  "version": "0.2.0",
   "description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -56,6 +56,7 @@
     "redux": "^4.1.0"
   },
   "devDependencies": {
+    "@100mslive/types-prebuilt": "^0.8.0",
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.2.2",
     "@react-native-community/eslint-config": "^3.0.2",
@@ -79,11 +80,12 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "@100mslive/react-native-hms": "github:100mslive/100ms-react-native#release1.8.0",
+    "@100mslive/react-native-hms": "1.7.1",
     "@shopify/flash-list": "^1.4.3",
     "react": "*",
     "react-native": "*",
     "react-native-avoid-softinput": "^2.4.8",
+    "react-native-gesture-handler": "^2.12.1",
     "react-native-linear-gradient": "^2.7.3",
     "react-native-modal": "^12.1.0",
     "react-native-permissions": "3.4.0",

package/src/HMSInstanceSetup.tsx

@@ -119,6 +119,7 @@ const getHmsInstance = async (): Promise<HMSSDK> => {
     trackSettings,
     appGroup,
     preferredExtension,
+    isPrebuilt: true,
   });
 
   const logger = new HMSLogger();

package/src/HMSPrebuilt.tsx

@@ -22,12 +22,13 @@ export interface HMSPrebuiltProps {
     debugMode?: boolean;
     ios?: HMSIOSScreenShareConfig;
   };
+  onLeave?: () => void;
 }
 
 const _HMSPrebuilt: React.FC<HMSPrebuiltProps> = (props) => {
-  const { roomCode, options } = props;
+  const { roomCode, options, onLeave } = props;
 
-  store.dispatch(setPrebuiltData({ roomCode, options }));
+  store.dispatch(setPrebuiltData({ roomCode, options, onLeave }));
 
   // @ts-ignore Not using `useContext` hook because we don't want to subscribe to updates
   // We just want to check if SafeAreaProvider exists or not

package/src/HMSRoomSetup.tsx

@@ -23,14 +23,20 @@ import {
   clearStore,
   setHMSLocalPeerState,
   setHMSRoomState,
+  setLocalPeerTrackNode,
+  setMiniViewPeerTrackNode,
+  updateLocalPeerTrackNode,
 } from './redux/actions';
 import { createPeerTrackNode } from './utils/functions';
 import type { PeerTrackNode } from './utils/types';
 import { Meeting } from './components/Meeting';
 import {
+  useHMSActiveSpeakerUpdates,
   useHMSConfig,
   useHMSInstance,
   useHMSListeners,
+  useHMSRoomColorPalette,
+  useHMSRoomStyle,
   useHMSSessionStore,
   useLeaveMethods,
 } from './hooks-util';
@@ -42,7 +48,6 @@ import {
 } from './peerTrackNodeUtils';
 import { MeetingState } from './types';
 import { getJoinConfig } from './utils';
-import { COLORS } from './utils/theme';
 import { FullScreenIndicator } from './components/FullScreenIndicator';
 import { HMSMeetingEnded } from './components/HMSMeetingEnded';
 import { selectIsHLSViewer, selectShouldGoLive } from './hooks-util-selectors';
@@ -58,7 +63,7 @@ export const HMSRoomSetup = () => {
   const didInitMeetingAction = useRef(false);
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
-  const reduxStore = useStore();
+  const reduxStore = useStore<RootState>();
 
   const { getConfig, clearConfig } = useHMSConfig();
   const meetingState = useSelector(
@@ -181,19 +186,37 @@ export const HMSRoomSetup = () => {
 
       setLoading(false);
 
+      const reduxState = reduxStore.getState();
+
       const localPeer = data.room.localPeer;
 
       const peer = localPeer;
       const track = localPeer.videoTrack as HMSTrack | undefined;
 
+      // Creating `PeerTrackNode` for local peer
+      const localPeerTrackNode = createPeerTrackNode(peer, track);
+
       batch(() => {
         if (selectIsHLSViewer(localPeer)) {
           dispatch({ type: 'SET_SHOW_CHAT_VIEW', showChatView: true });
+        } else {
+          if (reduxState.app.localPeerTrackNode) {
+            dispatch(
+              updateLocalPeerTrackNode({ peer, track: peer.videoTrack })
+            );
+          } else {
+            // saving above created `PeerTrackNode` in store
+            dispatch(setLocalPeerTrackNode(localPeerTrackNode));
+          }
+
+          // setting local `PeerTrackNode` as node for MiniView
+          dispatch(setMiniViewPeerTrackNode(localPeerTrackNode));
         }
         dispatch(setHMSRoomState(data.room));
         dispatch(setHMSLocalPeerState(data.room.localPeer));
       });
 
+      // If `peerTrackNodes` also contains a tile for local peer then updating it
       setPeerTrackNodes((prevPeerTrackNodes) => {
         if (
           track &&
@@ -208,11 +231,14 @@ export const HMSRoomSetup = () => {
         if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
           return replacePeerTrackNodes(prevPeerTrackNodes, peer);
         }
-        const hmsLocalPeer = createPeerTrackNode(peer, track);
-        return [hmsLocalPeer, ...prevPeerTrackNodes];
+
+        //   const hmsLocalPeer = createPeerTrackNode(peer, track);
+        //   return [hmsLocalPeer, ...prevPeerTrackNodes];
+
+        return prevPeerTrackNodes;
       });
 
-      const shouldGoLive = selectShouldGoLive(reduxStore.getState());
+      const shouldGoLive = selectShouldGoLive(reduxState);
 
       if (shouldGoLive) {
         startHLSStreaming();
@@ -230,6 +256,12 @@ export const HMSRoomSetup = () => {
     };
   }, [startHLSStreaming, hmsInstance]);
 
+  const meetingJoined = meetingState === MeetingState.IN_MEETING;
+
+  // HMS Active Speaker Listener
+  // dev-note: This is added here because we have `setPeerTrackNodes` here
+  useHMSActiveSpeakerUpdates(setPeerTrackNodes, meetingJoined);
+
   const meetingEnded = meetingState === MeetingState.MEETING_ENDED;
 
   // Handling Automatically calling Preview or Join API
@@ -289,10 +321,16 @@ export const HMSRoomSetup = () => {
     };
   }, [hmsInstance]);
 
+  const emptyViewStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.background_dim,
+  }));
+
+  const { background_dim: backgroundDimColor } = useHMSRoomColorPalette();
+
   return (
     <>
       <StatusBar
-        backgroundColor={COLORS.BACKGROUND.DIM}
+        backgroundColor={backgroundDimColor}
         barStyle={'light-content'}
       />
 
@@ -305,7 +343,7 @@ export const HMSRoomSetup = () => {
       ) : loading ? (
         <FullScreenIndicator />
       ) : (
-        <View style={styles.container} />
+        <View style={[styles.container, emptyViewStyles]} />
       )}
     </>
   );
@@ -314,6 +352,5 @@ export const HMSRoomSetup = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: COLORS.BACKGROUND.DIM,
   },
 });

package/src/Icons/AlertTriangle/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 AlertTriangleIconProps extends Omit<ImageProps, 'source'> {}
+
+export const AlertTriangleIcon: React.FC<AlertTriangleIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.alert_error_default,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/alert-triangle.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/AnswerPhone/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 AnswerPhoneIconProps extends Omit<ImageProps, 'source'> {}
 
 export const AnswerPhoneIcon: React.FC<AnswerPhoneIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={require('./assets/answer-phone.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/BRB/index.tsx

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

package/src/Icons/Bluetooth/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 BluetoothIconProps extends Omit<ImageProps, 'source'> {}
 
 export const BluetoothIcon: React.FC<BluetoothIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={require('./assets/bluetooth-on.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/Camera/index.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
+import { useHMSRoomStyle } from '../../hooks-util';
+
 interface CameraIconProps extends Omit<ImageProps, 'source'> {
   muted: boolean;
 }
@@ -11,6 +13,10 @@ export const CameraIcon: React.FC<CameraIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={
@@ -18,7 +24,7 @@ export const CameraIcon: React.FC<CameraIconProps> = ({
           ? require('./assets/camera-muted.png')
           : require('./assets/camera-unmuted.png')
       }
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/Chat/index.tsx

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

package/src/Icons/Check/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 CheckIconProps extends Omit<ImageProps, 'source'> {}
 
 export const CheckIcon: React.FC<CheckIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={require('./assets/check.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/Chevron/index.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
+import { useHMSRoomStyle } from '../../hooks-util';
+
 interface ChevronIconProps extends Omit<ImageProps, 'source'> {
   direction: 'left' | 'down';
 }
@@ -11,6 +13,10 @@ export const ChevronIcon: React.FC<ChevronIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={
@@ -18,7 +24,7 @@ export const ChevronIcon: React.FC<ChevronIconProps> = ({
           ? require('./assets/chevron-down.png')
           : require('./assets/chevron-left.png')
       }
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/Close/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 CloseIconProps extends Omit<ImageProps, 'source'> {}
 
 export const CloseIcon: React.FC<CloseIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={require('./assets/close.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/Hamburger/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 HamburgerIconProps extends Omit<ImageProps, 'source'> {}
+
+export const HamburgerIcon: React.FC<HamburgerIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/hamburger.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Hand/index.tsx

@@ -2,15 +2,19 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
-import { COLORS } from '../../utils/theme';
+import { useHMSRoomStyle } from '../../hooks-util';
 
 interface HandIconProps extends Omit<ImageProps, 'source'> {}
 
 export const HandIcon: React.FC<HandIconProps> = ({ style, ...restProps }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={require('./assets/hand.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );
@@ -22,6 +26,5 @@ const styles = StyleSheet.create({
     height: 24,
     alignItems: 'center',
     justifyContent: 'center',
-    tintColor: COLORS.SURFACE.ON_SURFACE.HIGH,
   },
 });

package/src/Icons/Headphones/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 HeadphonesIconProps extends Omit<ImageProps, 'source'> {}
 
 export const HeadphonesIcon: React.FC<HeadphonesIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={require('./assets/headphones.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/Maximize/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 MaximizeIconProps extends Omit<ImageProps, 'source'> {}
+
+export const MaximizeIcon: React.FC<MaximizeIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/maximize.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Mic/index.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
+import { useHMSRoomStyle } from '../../hooks-util';
+
 interface MicIconProps extends Omit<ImageProps, 'source'> {
   muted: boolean;
 }
@@ -11,6 +13,10 @@ export const MicIcon: React.FC<MicIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={
@@ -18,7 +24,7 @@ export const MicIcon: React.FC<MicIconProps> = ({
           ? require('./assets/mic-muted.png')
           : require('./assets/mic-unmuted.png')
       }
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

package/src/Icons/Minimize/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 MinimizeIconProps extends Omit<ImageProps, 'source'> {}
+
+export const MinimizeIcon: React.FC<MinimizeIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/minimize.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});