@100mslive/react-native-room-kit 1.0.7 → 1.0.9

package/package.json

@@ -1,181 +1,181 @@
 {
-	"name": "@100mslive/react-native-room-kit",
-	"version": "1.0.7",
-	"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",
-	"types": "lib/typescript/index.d.ts",
-	"react-native": "src/index",
-	"source": "src/index",
-	"files": [
-		"src",
-		"lib",
-		"android",
-		"ios",
-		"cpp",
-		"*.podspec",
-		"!lib/typescript/example",
-		"!ios/build",
-		"!android/build",
-		"!android/gradle",
-		"!android/gradlew",
-		"!android/gradlew.bat",
-		"!android/local.properties",
-		"!**/__tests__",
-		"!**/__fixtures__",
-		"!**/__mocks__",
-		"!**/.*"
-	],
-	"scripts": {
-		"test": "jest",
-		"typecheck": "tsc --noEmit",
-		"lint": "eslint \"**/*.{js,ts,tsx}\"",
-		"prepack": "bob build",
-		"release": "release-it",
-		"example": "yarn --cwd example",
-		"bootstrap": "yarn example && yarn install"
-	},
-	"keywords": [
-		"react-native",
-		"ios",
-		"android"
-	],
-	"repository": "https://github.com/100mslive/react-native-hms",
-	"author": "Yogesh <yogesh@100ms.live> (https://www.100ms.live/), Jatin <jatin.nagar@100ms.live> (https://www.100ms.live/)",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/100mslive/react-native-hms/issues"
-	},
-	"homepage": "https://github.com/100mslive/react-native-hms#readme",
-	"publishConfig": {
-		"registry": "https://registry.npmjs.org/"
-	},
-	"dependencies": {
-		"@100mslive/types-prebuilt": "^0.12.0",
-		"@react-navigation/native": "^6.0.8",
-		"react-redux": "^7.2.4",
-		"redux": "^4.1.0"
-	},
-	"devDependencies": {
-		"@commitlint/config-conventional": "^17.0.2",
-		"@evilmartians/lefthook": "^1.2.2",
-		"@react-native-community/eslint-config": "^3.0.2",
-		"@release-it/conventional-changelog": "^5.0.0",
-		"@types/jest": "^28.1.2",
-		"@types/react": "~17.0.21",
-		"@types/react-native": "^0.64.5",
-		"commitlint": "^17.0.2",
-		"del-cli": "^5.0.0",
-		"eslint": "^8.4.1",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-prettier": "^4.0.0",
-		"jest": "^28.1.1",
-		"pod-install": "^0.1.0",
-		"prettier": "^2.0.5",
-		"react": "17.0.1",
-		"react-native": "0.64.4",
-		"react-native-builder-bob": "^0.21.2",
-		"release-it": "^15.0.0",
-		"typescript": "^5.0.2"
-	},
-	"peerDependencies": {
-		"@100mslive/react-native-hms": "1.9.6",
-		"@react-native-community/blur": "^4.3.2",
-		"@react-native-masked-view/masked-view": "^0.2.9",
-		"@shopify/flash-list": "^1.4.3",
-		"lottie-react-native": "5.1.6",
-		"react": "*",
-		"react-native": "*",
-		"react-native-gesture-handler": "^2.12.1",
-		"react-native-linear-gradient": "^2.7.3",
-		"react-native-modal": "^12.1.0",
-		"react-native-reanimated": ">=2.17.0",
-		"react-native-safe-area-context": "^3.3.0",
-		"react-native-simple-toast": "^1.1.3"
-	},
-	"resolutions": {
-		"@types/react": "17.0.21"
-	},
-	"engines": {
-		"node": ">= 16.0.0"
-	},
-	"packageManager": "^yarn@1.22.15",
-	"jest": {
-		"preset": "react-native",
-		"modulePathIgnorePatterns": [
-			"<rootDir>/example/node_modules",
-			"<rootDir>/lib/"
-		]
-	},
-	"commitlint": {
-		"extends": [
-			"@commitlint/config-conventional"
-		]
-	},
-	"release-it": {
-		"git": {
-			"commitMessage": "chore: release ${version}",
-			"tagName": "v${version}"
-		},
-		"npm": {
-			"publish": true
-		},
-		"github": {
-			"release": true
-		},
-		"plugins": {
-			"@release-it/conventional-changelog": {
-				"preset": "angular"
-			}
-		}
-	},
-	"eslintConfig": {
-		"root": true,
-		"extends": [
-			"@react-native-community",
-			"prettier"
-		],
-		"rules": {
-			"prettier/prettier": [
-				"error",
-				{
-					"quoteProps": "consistent",
-					"singleQuote": true,
-					"tabWidth": 2,
-					"trailingComma": "es5",
-					"useTabs": false
-				}
-			]
-		}
-	},
-	"eslintIgnore": [
-		"node_modules/",
-		"lib/"
-	],
-	"prettier": {
-		"quoteProps": "consistent",
-		"singleQuote": true,
-		"tabWidth": 2,
-		"trailingComma": "es5",
-		"useTabs": false
-	},
-	"react-native-builder-bob": {
-		"source": "src",
-		"output": "lib",
-		"targets": [
-			"commonjs",
-			"module",
-			[
-				"typescript",
-				{
-					"project": "tsconfig.build.json",
-					"tsc": "node_modules/typescript/bin/tsc"
-				}
-			]
-		],
-		"main": "lib/commonjs/index.js",
-		"module": "lib/module/index.js",
-		"react-native": "src/index.ts",
-		"types": "lib/typescript/index.d.ts"
-	}
+  "name": "@100mslive/react-native-room-kit",
+  "version": "1.0.9",
+  "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",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepack": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn example && yarn install"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": "https://github.com/100mslive/react-native-hms",
+  "author": "Yogesh <yogesh@100ms.live> (https://www.100ms.live/), Jatin <jatin.nagar@100ms.live> (https://www.100ms.live/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/100mslive/react-native-hms/issues"
+  },
+  "homepage": "https://github.com/100mslive/react-native-hms#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@100mslive/types-prebuilt": "^0.12.4",
+    "@react-navigation/native": "^6.0.8",
+    "react-redux": "^7.2.4",
+    "redux": "^4.1.0"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.2.2",
+    "@react-native-community/eslint-config": "^3.0.2",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^28.1.2",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "^0.64.5",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^28.1.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "17.0.1",
+    "react-native": "0.64.4",
+    "react-native-builder-bob": "^0.21.2",
+    "release-it": "^15.0.0",
+    "typescript": "^5.0.2"
+  },
+  "peerDependencies": {
+    "@100mslive/react-native-hms": "1.9.8",
+    "@react-native-community/blur": "^4.3.2",
+    "@react-native-masked-view/masked-view": "^0.2.9",
+    "@shopify/flash-list": "^1.4.3",
+    "lottie-react-native": "5.1.6",
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": "^2.12.1",
+    "react-native-linear-gradient": "^2.7.3",
+    "react-native-modal": "^12.1.0",
+    "react-native-reanimated": ">=2.17.0",
+    "react-native-safe-area-context": "^3.3.0",
+    "react-native-simple-toast": "^1.1.3"
+  },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
+  "engines": {
+    "node": ">= 16.0.0"
+  },
+  "packageManager": "^yarn@1.22.15",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json",
+          "tsc": "node_modules/typescript/bin/tsc"
+        }
+      ]
+    ],
+    "main": "lib/commonjs/index.js",
+    "module": "lib/module/index.js",
+    "react-native": "src/index.ts",
+    "types": "lib/typescript/index.d.ts"
+  }
 }

package/src/HMSContainer.tsx

@@ -1,14 +1,35 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
+import * as React from 'react';
+import { useDispatch, useSelector, useStore } from 'react-redux';
 
 import type { RootState } from './redux';
 import { HMSInstanceSetup } from './HMSInstanceSetup';
 import { HMSRoomSetup } from './HMSRoomSetup';
+import { MeetingState } from './types';
+import { clearStore } from './redux/actions';
 
 export const HMSContainer = () => {
-  const isHMSInstanceAvailable = useSelector(
-    (state: RootState) => !!state.user.hmsInstance
-  );
+  const store = useStore<RootState>();
+  const dispatch = useDispatch();
+  const hmsInstance = useSelector((state: RootState) => state.user.hmsInstance);
+
+  React.useEffect(() => {
+    if (hmsInstance) {
+      const cleanup = async () => {
+        const userExited =
+          store.getState().app.meetingState === MeetingState.EXITED;
+        if (!userExited) {
+          await hmsInstance.leave();
+          await hmsInstance.destroy();
+        }
+        dispatch(clearStore());
+      };
+      return () => {
+        cleanup();
+      };
+    }
+  }, [hmsInstance, store]);
+
+  const isHMSInstanceAvailable = !!hmsInstance;
 
   if (isHMSInstanceAvailable) {
     return <HMSRoomSetup />;

package/src/HMSRoomSetup.tsx

@@ -16,6 +16,7 @@ import {
   changeStartingHLSStream,
   setHMSLocalPeerState,
   setHMSRoomState,
+  setInitialRole,
   setLocalPeerTrackNode,
   setMiniViewPeerTrackNode,
   updateLocalPeerTrackNode,
@@ -43,6 +44,7 @@ import {
   peerTrackNodeExistForPeer,
 } from './peerTrackNodeUtils';
 import { MeetingState, NotificationTypes } from './types';
+import type { Notification } from './types';
 import { getJoinConfig } from './utils';
 import { FullScreenIndicator } from './components/FullScreenIndicator';
 import { HMSMeetingEnded } from './components/HMSMeetingEnded';
@@ -67,7 +69,7 @@ export const HMSRoomSetup = () => {
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
   const reduxStore = useStore<RootState>();
-  const { leave, destroy, prebuiltCleanUp } = useLeaveMethods();
+  const { leave, destroy } = useLeaveMethods();
 
   const { getConfig, clearConfig } = useHMSConfig();
   const meetingState = useSelector(
@@ -135,13 +137,9 @@ export const HMSRoomSetup = () => {
       if (!ignoreHLSStreamPromise.current) {
         console.log('Unable to go live at the moment: ', e);
         dispatch(changeStartingHLSStream(false));
-        // prebuiltCleanUp();
       }
     }
-  }, [
-    // prebuiltCleanUp,
-    hmsInstance,
-  ]);
+  }, [hmsInstance]);
 
   // HMS Room, Peers, Track Listeners
   useHMSListeners(setPeerTrackNodes);
@@ -172,7 +170,7 @@ export const HMSRoomSetup = () => {
 
       if (meetingJoined) {
         const uid = Math.random().toString(16).slice(2);
-        const notificationPayload = terminalError
+        const notificationPayload: Notification = terminalError
           ? {
               id: uid,
               type: NotificationTypes.TERMINAL_ERROR,
@@ -181,7 +179,7 @@ export const HMSRoomSetup = () => {
           : {
               id: uid,
               type: NotificationTypes.ERROR,
-              message: error.description,
+              title: error.description,
             };
 
         dispatch(addNotification(notificationPayload));
@@ -311,6 +309,9 @@ export const HMSRoomSetup = () => {
 
         dispatch(setHMSRoomState(data.room));
         dispatch(setHMSLocalPeerState(data.room.localPeer));
+        if (data.room.localPeer.role) {
+          dispatch(setInitialRole(data.room.localPeer.role));
+        }
       });
 
       // If `peerTrackNodes` also contains a tile for local peer then updating it
@@ -395,7 +396,6 @@ export const HMSRoomSetup = () => {
   useEffect(() => {
     return () => {
       ignoreHLSStreamPromise.current = true;
-      prebuiltCleanUp();
     };
   }, []);
 

package/src/Icons/Chat/index.tsx

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

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

package/src/Icons/PauseCircle/index.tsx

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

package/src/Icons/Pin/index.tsx

@@ -4,16 +4,26 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface PinIconProps extends Omit<ImageProps, 'source'> {}
+interface PinIconProps extends Omit<ImageProps, 'source'> {
+  type: 'pin' | 'unpin';
+}
 
-export const PinIcon: React.FC<PinIconProps> = ({ style, ...restProps }) => {
+export const PinIcon: React.FC<PinIconProps> = ({
+  type = 'pin',
+  style,
+  ...restProps
+}) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
     tintColor: theme.palette.on_surface_high,
   }));
 
   return (
     <Image
-      source={require('./assets/pin.png')}
+      source={
+        type === 'unpin'
+          ? require('./assets/unpin.png')
+          : require('./assets/pin.png')
+      }
       style={[styles.icon, iconStyles, style]}
       {...restProps}
     />

package/src/Icons/Recording/index.tsx

@@ -23,8 +23,8 @@ export const RecordingIcon: React.FC<RecordingIconProps> = ({
         type === 'on'
           ? require('./assets/recording.png')
           : type === 'pause'
-          ? require('./assets/recording-pause.png')
-          : require('./assets/recording-off.png')
+            ? require('./assets/recording-pause.png')
+            : require('./assets/recording-off.png')
       }
       style={[styles.icon, iconStyles, style]}
       {...restProps}