@100mslive/roomkit-react 0.1.12-alpha.0 → 0.1.13-alpha.0

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -4,9 +4,19 @@ import {
   DefaultConferencingScreen_Elements,
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
-import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { v4 as uuid } from 'uuid';
+import {
+  selectIsConnectedToRoom,
+  selectLocalPeerName,
+  selectLocalPeerRoleName,
+  selectSessionStore,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 // @ts-ignore: No implicit Any
 import FullPageProgress from '../components/FullPageProgress';
+// @ts-ignore: No implicit Any
+import { ToastBatcher } from '../components/Toast/ToastBatcher';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
 import { Flex } from '../../Layout';
 // @ts-ignore: No implicit Any
@@ -46,15 +56,33 @@ export const VideoStreamingSection = ({
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFConfig();
+  const localPeerName = useHMSStore(selectLocalPeerName);
+  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = '' } =
+    useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
 
   useEffect(() => {
     if (!isConnected) {
       return;
     }
-    hmsActions.sessionStore.observe([SESSION_STORE_KEY.PINNED_MESSAGE, SESSION_STORE_KEY.SPOTLIGHT]);
+    hmsActions.sessionStore.observe([
+      SESSION_STORE_KEY.PINNED_MESSAGES,
+      SESSION_STORE_KEY.SPOTLIGHT,
+      SESSION_STORE_KEY.CHAT_STATE,
+      SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST,
+      SESSION_STORE_KEY.CHAT_PEER_BLACKLIST,
+    ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isConnected, hmsActions]);
 
+  useEffect(() => {
+    if (!chatStateUpdatedBy || chatStateUpdatedBy === localPeerName) {
+      return;
+    }
+    const type = isChatEnabled ? 'CHAT_RESUMED' : 'CHAT_PAUSED';
+    const notification = { id: uuid(), message: '', type, data: { name: localPeerName } };
+    ToastBatcher.showToast({ notification, type });
+  }, [isChatEnabled, chatStateUpdatedBy, localPeerName]);
+
   if (!localPeerRole) {
     // we don't know the role yet to decide how to render UI
     return null;

package/src/Prebuilt/plugins/whiteboard/PusherCommunicationProvider.js

@@ -36,7 +36,7 @@ class PusherCommunicationProvider {
 
     /** @private */
     this.pusher = new Pusher(process.env.REACT_APP_PUSHER_APP_KEY, {
-      cluster: 'ap2',
+      cluster: process.env.REACT_APP_PUSHER_CLUSTER || 'ap2',
       authEndpoint: process.env.REACT_APP_PUSHER_AUTHENDPOINT,
     });
 

package/src/Prebuilt/plugins/whiteboard/README.md

@@ -24,6 +24,6 @@ APP_ID="app_id"
 ## Whiteboard Client
 
 - Copy the whole folder at `/src/plugins/whiteboard` into your live video conferencing apps using 100ms' SDKs.
-- Add the pusher app key and pusher auth endpoint to `REACT_APP_PUSHER_APP_KEY` and `REACT_APP_PUSHER_AUTHENDPOINT` environment variables.
+- Add the pusher app key, auth endpoint and cluster to `REACT_APP_PUSHER_APP_KEY`, `REACT_APP_PUSHER_AUTHENDPOINT`, `REACT_APP_PUSHER_CLUSTER` environment variables.
 - The `useWhiteboardMetadata` hook returns state such as the whiteboard owner(`whiteboardOwner`) and action to toggle the whiteboard(`toggleWhiteboard`). Refer usage in `ToggleWhiteboard.jsx` - an icon button to toggle the whiteboard based on the active state.
 - When the whiteboard is active(`whiteboardOwner` from `useWhiteboardMetadata` is not null), render the `Whiteboard` component on your UI to let your users draw on the whiteboard. Refer `mainView.jsx` and `WhiteboardView.jsx`.

package/src/Prebuilt/primitives/DialogContent.jsx

@@ -102,7 +102,7 @@ export const RequestDialog = ({ open = true, onOpenChange, title, body, actionTe
 );
 
 /**
- * a row of items which breaks into column on small screen. For e.g. title on left and options to select
+ * a row of items which breaks into column on small screen. For example title on left and options to select
  * from on right for select component.
  */
 export const DialogRow = ({ children, breakSm = false, css, justify = 'between' }) => {

package/src/Prebuilt/provider/roomLayoutProvider/constants/index.ts

@@ -30,7 +30,18 @@ export const defaultLayout: Layout = {
     conferencing: {
       default: {
         elements: {
-          chat: {},
+          chat: {
+            public_chat_enabled: true,
+            private_chat_enabled: true,
+            chat_title: 'Chat',
+            allow_pinning_messages: true,
+            message_placeholder: 'Send a message...',
+            real_time_controls: {
+              can_disable_chat: true,
+              can_block_user: true,
+              can_hide_message: true,
+            },
+          },
           participant_list: {},
           video_tile_layout: {
             grid: {

package/src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts

@@ -1,6 +1,8 @@
 import {
   ConferencingScreen,
+  DefaultConferencingScreen_Elements,
   DefaultPreviewScreen_Elements,
+  HLSLiveStreamingScreen_Elements,
   LeaveScreen,
   PreviewScreen,
   Screens,
@@ -43,10 +45,12 @@ export function useRoomLayoutPreviewScreen() {
   };
 }
 
+export type ConferencingScreenElements = DefaultConferencingScreen_Elements & HLSLiveStreamingScreen_Elements;
+
 export function useRoomLayoutConferencingScreen() {
   const screenProps = useRoomLayoutScreen({ screen: 'conferencing' }) || {};
   const screenType = Object.keys(screenProps)[0] as keyof ConferencingScreen;
-  const elements = screenProps[screenType]?.elements;
+  const elements = screenProps[screenType]?.elements as ConferencingScreenElements;
   // @ts-ignore
   const hideSections: string[] = screenProps[screenType]?.hideSections || [];
   return {

package/src/Theme/stitches.config.ts

@@ -1,11 +1,10 @@
 import type * as Stitches from '@stitches/react';
 import { createStitches } from '@stitches/react';
 import merge from 'lodash.merge';
-import { v4 as uuidv4 } from 'uuid';
 import { baseConfig, defaultMedia, defaultThemeMap, defaultUtils } from './base.config';
 
 const HmsStitches = createStitches({
-  prefix: `hms-ui-${uuidv4()}`,
+  prefix: 'hms-ui',
   theme: {
     ...baseConfig.theme,
     colors: {