Notifications

package.json

@@ -76,6 +76,7 @@
         "rc-slider": "^10.6.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-toastify": "^10.0.5",
         "three": "^0.162.0",
         "ts-xor": "^1.3.0",
         "unique-names-generator": "^4.7.1",

src/Notifications.tsx

@@ -0,0 +1,80 @@
+import {
+  HMSNotificationTypes,
+  selectIsConnectedToRoom,
+  useHMSNotifications,
+  useHMSStore
+} from '@100mslive/react-sdk';
+import { faHand } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useEffect } from 'react';
+import { toast } from 'react-toastify';
+import { ROLES } from './constants';
+
+export const Notifications = () => {
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const notification = useHMSNotifications();
+
+  let peer;
+  let track;
+
+  useEffect(() => {
+    console.log('isInPreview', isConnected);
+  }, [isConnected]);
+
+  useEffect(() => {
+    if (!notification) {
+      return;
+    }
+    switch (notification.type) {
+      case HMSNotificationTypes.HAND_RAISE_CHANGED:
+        peer = notification.data;
+        if (peer && !peer.isLocal && peer.isHandRaised) {
+          toast(`${peer.name} would like to speak`, {
+            icon: (
+              <FontAwesomeIcon
+                icon={faHand}
+                style={{ fontSize: '1.5rem', color: '#f37726' }}
+              />
+            )
+          });
+        }
+        break;
+      case HMSNotificationTypes.PEER_JOINED:
+        if (isConnected) {
+          toast.info(`${notification.data.name} has joined the room`);
+        }
+        break;
+      case HMSNotificationTypes.PEER_LEFT:
+        if (isConnected) {
+          toast.info(`${notification.data.name} has left the room`);
+        }
+        break;
+      case HMSNotificationTypes.ROLE_UPDATED:
+        peer = notification.data;
+        if (peer && !peer.isLocal && peer.roleName === ROLES.presenter) {
+          toast.info(`${peer.name} has started presenting`);
+        }
+        break;
+      case HMSNotificationTypes.TRACK_DEGRADED:
+        track = notification.data;
+        toast.warn(`${track.type} track degraded due to poor network`, {
+          style: { textTransform: 'capitalize' }
+        });
+        break;
+      case HMSNotificationTypes.REMOVED_FROM_ROOM:
+        console.log(`removed from room, reason - ${notification.data.reason}`);
+        break;
+      case HMSNotificationTypes.ROOM_ENDED:
+        toast.info(`room ended, reason - ${notification.data.reason}`);
+        break;
+      case HMSNotificationTypes.ERROR:
+        toast.error(`Something happened \n
+        [${notification.data.code}]: ${notification.data}`);
+        break;
+      default:
+        break;
+    }
+  }, [notification]);
+
+  return null;
+};

src/constants.ts

@@ -12,3 +12,8 @@ export const SCROLL_BAR_WIDTH = 6;
 export const SIDEPANE_PEER_LIST_TILE = 128;
 export const SIDEPANE_PEER_LIST_PADDING = 3;
 export const SIDEPANE_PEER_LIST_MARGIN = 13;
+
+export const ROLES = {
+  host: 'host',
+  presenter: 'presenter'
+};

src/utils/utils.ts

@@ -0,0 +1,4 @@
+// Thanks JupyterCAD
+export function isLightTheme(): boolean {
+  return document.body.getAttribute('data-jp-theme-light') === 'true';
+}

src/widgets/RootDisplay.tsx

@@ -4,9 +4,13 @@ import { IStateDB } from '@jupyterlab/statedb';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import { ISignal } from '@lumino/signaling';
 import React, { useEffect, useRef } from 'react';
+import { Bounce, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { Notifications } from '../Notifications';
 import { MainDisplay } from '../components/MainDisplay';
 import { TypedHMSRoomProvider, hmsActions } from '../hms';
 import { IModelRegistry, IModelRegistryData } from '../registry';
+import { isLightTheme } from '../utils/utils';
 
 interface IRootDisplayProps {
   node: HTMLElement;
@@ -25,6 +29,7 @@ const RootDisplay = ({
   themeChangedSignal
 }: IRootDisplayProps) => {
   const rootRef = useRef(null);
+  const isLight = isLightTheme();
 
   useEffect(() => {
     hmsActions.setAppData('themeChanged', themeChangedSignal);
@@ -42,7 +47,24 @@ const RootDisplay = ({
 
   return (
     <div ref={rootRef} className="jlab-gather-root">
-      <MainDisplay state={state} />
+      <>
+        <MainDisplay state={state} />
+        <Notifications />
+        <ToastContainer
+          position="bottom-right"
+          autoClose={5000}
+          hideProgressBar={true}
+          stacked
+          newestOnTop={false}
+          closeOnClick
+          rtl={false}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+          theme={isLight ? 'light' : 'dark'}
+          transition={Bounce}
+        />
+      </>
     </div>
   );
 };

yarn.lock

@@ -4996,6 +4996,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.0":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: acd3e1ab9d8a433ecb3cc2f6a05ab95fe50b4a3cfc5ba47abb6cbf3754585fcb87b84e90c822a1f256c4198e3b41c7f6c391577ffc8678ad587fc0976b24fd57
+  languageName: node
+  linkType: hard
+
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"
@@ -8044,6 +8051,7 @@ __metadata:
     rc-slider: ^10.6.2
     react: ^18.2.0
     react-dom: ^18.2.0
+    react-toastify: ^10.0.5
     rimraf: ^5.0.1
     source-map-loader: ^1.0.2
     style-loader: ^3.3.1
@@ -9570,6 +9578,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-toastify@npm:^10.0.5":
+  version: 10.0.5
+  resolution: "react-toastify@npm:10.0.5"
+  dependencies:
+    clsx: ^2.1.0
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 982d33918c63e99464623a1b3b023ab5fe18fe341143cb0cb04287e37fd0611c560d9ef451e151ac8ade15a1cda09df09d4c442b3db582965d71aaf42d49b230
+  languageName: node
+  linkType: hard
+
 "react@npm:>=17.0.0 <19.0.0, react@npm:^18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"