@100mslive/roomkit-react 0.1.12 → 0.1.13

package/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx

@@ -42,7 +42,16 @@ export const useAutoStartStreaming = () => {
       streamStartedRef.current = false;
       setHLSStarted(false);
     }
-  }, [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI, isRTMPRunning]);
+  }, [
+    hmsActions,
+    isHLSRunning,
+    isHLSStarted,
+    setHLSStarted,
+    showStreamingUI,
+    isRTMPRunning,
+    isHLSRecordingOn,
+    isBrowserRecordingOn,
+  ]);
 
   useEffect(() => {
     if (!isHLSStarted && !isHLSRunning) {

package/src/Prebuilt/components/hooks/useChatBlacklist.ts

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+import { useHMSActions } from '@100mslive/react-sdk';
+// @ts-ignore
+import { ToastManager } from '../Toast/ToastManager';
+import { SESSION_STORE_KEY } from '../../common/constants';
+
+export const useChatBlacklist = (
+  sessionStoreKey: SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST | SESSION_STORE_KEY.CHAT_PEER_BLACKLIST,
+) => {
+  const hmsActions = useHMSActions();
+
+  const blacklistItem = useCallback(
+    async (blacklistedIDs: string[], blacklistID: string) =>
+      await hmsActions.sessionStore
+        .set(sessionStoreKey, [...blacklistedIDs, blacklistID])
+        .catch(err => ToastManager.addToast({ title: err.description })),
+    [hmsActions, sessionStoreKey],
+  );
+
+  return { blacklistItem };
+};

package/src/Prebuilt/components/hooks/useSetPinnedMessages.ts

@@ -0,0 +1,75 @@
+import { useCallback } from 'react';
+import { HMSMessage, selectPeerNameByID, useHMSActions, useHMSVanillaStore } from '@100mslive/react-sdk';
+// @ts-ignore
+import { ToastManager } from '../Toast/ToastManager';
+// @ts-ignore
+import { SESSION_STORE_KEY } from '../../common/constants';
+
+type PinnedMessage = {
+  text: string;
+  id: string;
+  authorId: string;
+  pinnedBy: string;
+};
+
+/**
+ * set pinned chat message by updating the session store
+ */
+export const useSetPinnedMessages = () => {
+  const hmsActions = useHMSActions();
+  const vanillaStore = useHMSVanillaStore();
+
+  const setPinnedMessages = useCallback(
+    async (pinnedMessages: PinnedMessage[] = [], message: HMSMessage, pinnedBy: string) => {
+      const peerName = vanillaStore.getState(selectPeerNameByID(message?.sender)) || message?.senderName;
+      const newPinnedMessage = { text: '', id: message.id, pinnedBy, authorId: message?.senderUserId || '' };
+
+      if (message && peerName) {
+        newPinnedMessage['text'] = `${peerName}: ${message.message}`;
+      } else if (message) {
+        newPinnedMessage['text'] = message.message;
+      }
+
+      if (newPinnedMessage && !pinnedMessages.find(pinnedMessage => pinnedMessage.id === newPinnedMessage.id)) {
+        await hmsActions.sessionStore
+          .set(SESSION_STORE_KEY.PINNED_MESSAGES, [...pinnedMessages, newPinnedMessage].slice(-3)) // Limiting to maximum of 3 messages - FIFO
+          .catch(err => ToastManager.addToast({ title: err.description }));
+      }
+    },
+    [hmsActions, vanillaStore],
+  );
+
+  const removePinnedMessage = useCallback(
+    async (pinnedMessages: PinnedMessage[] = [], indexToRemove: number) => {
+      if (pinnedMessages[indexToRemove]) {
+        await hmsActions.sessionStore
+          .set(
+            SESSION_STORE_KEY.PINNED_MESSAGES,
+            pinnedMessages.filter((_, index: number) => index !== indexToRemove),
+          )
+          .catch(err => ToastManager.addToast({ title: err.description }));
+      }
+    },
+    [hmsActions],
+  );
+
+  const unpinBlacklistedMessages = useCallback(
+    async (
+      pinnedMessages: PinnedMessage[] = [],
+      blacklistedPeerIDSet: Set<string>,
+      blacklistedMessageIDSet: Set<string>,
+    ) => {
+      const filteredPinnedMessages = pinnedMessages?.filter(
+        pinnedMessage =>
+          !blacklistedMessageIDSet?.has(pinnedMessage.id) && !blacklistedPeerIDSet.has(pinnedMessage.authorId),
+      );
+
+      await hmsActions.sessionStore
+        .set(SESSION_STORE_KEY.PINNED_MESSAGES, filteredPinnedMessages)
+        .catch(err => ToastManager.addToast({ title: err.description }));
+    },
+    [hmsActions],
+  );
+
+  return { setPinnedMessages, removePinnedMessage, unpinBlacklistedMessages };
+};

package/src/Prebuilt/components/hooks/useUserPreferences.jsx

@@ -6,6 +6,7 @@ export const UserPreferencesKeys = {
   NOTIFICATIONS: 'notifications',
   UI_SETTINGS: 'uiSettings',
   RTMP_URLS: 'rtmpUrls',
+  USER_ID: 'userId',
 };
 
 export const defaultPreviewPreference = {

package/src/Prebuilt/layouts/SidePane.tsx

@@ -41,7 +41,7 @@ const SidePane = ({
     ViewComponent = <SidePaneTabs screenType={screenType} hideControls={hideControls} active={sidepane} />;
   }
   if (sidepane === SIDE_PANE_OPTIONS.VB) {
-    ViewComponent = <VBPicker />;
+    ViewComponent = <VBPicker {...elements.virtual_background} />;
   }
 
   useEffect(() => {

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -8,7 +8,7 @@ import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMS
 // @ts-ignore: No implicit Any
 import FullPageProgress from '../components/FullPageProgress';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
-import { Flex } from '../../Layout';
+import { Box, Flex } from '../../Layout';
 // @ts-ignore: No implicit Any
 import { EmbedView } from './EmbedView';
 // @ts-ignore: No implicit Any
@@ -51,7 +51,13 @@ export const VideoStreamingSection = ({
     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]);
 
@@ -84,12 +90,14 @@ export const VideoStreamingSection = ({
         }}
       >
         {ViewComponent}
-        <SidePane
-          screenType={screenType}
-          // @ts-ignore
-          tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
-          hideControls={hideControls}
-        />
+        <Box css={{ height: '100%', maxHeight: '100%', overflowY: 'clip' }}>
+          <SidePane
+            screenType={screenType}
+            // @ts-ignore
+            tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
+            hideControls={hideControls}
+          />
+        </Box>
       </Flex>
     </Suspense>
   );

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 {