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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.12",
+  "version": "0.1.13-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,11 +76,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.21",
-    "@100mslive/hms-virtual-background": "1.11.21",
-    "@100mslive/react-icons": "0.8.21",
-    "@100mslive/react-sdk": "0.8.21",
-    "@100mslive/types-prebuilt": "0.12.0",
+    "@100mslive/hls-player": "0.1.22-alpha.0",
+    "@100mslive/hms-virtual-background": "1.11.22-alpha.0",
+    "@100mslive/react-icons": "0.8.22-alpha.0",
+    "@100mslive/react-sdk": "0.8.22-alpha.0",
+    "@100mslive/types-prebuilt": "0.12.4",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -106,6 +106,7 @@
     "qrcode.react": "^3.1.0",
     "react-draggable": "^4.4.5",
     "react-intersection-observer": "^9.4.3",
+    "react-swipeable": "^7.0.1",
     "react-use": "^17.4.0",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.7",
@@ -114,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "b2409381228fa1a60f446f7873086440578f704f"
+  "gitHead": "b12ee3cc718d94936eb45de704bd29f823a5cad9"
 }

package/src/Prebuilt/App.tsx

@@ -9,7 +9,6 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
 import { AppData } from './components/AppData/AppData';
 // @ts-ignore: No implicit Any
 import AuthToken from './components/AuthToken';
@@ -62,8 +61,6 @@ export type HMSPrebuiltProps = {
   options?: HMSPrebuiltOptions;
   screens?: Screens;
   authToken?: string;
-  roomId?: string;
-  role?: string;
   onLeave?: () => void;
   onJoin?: () => void;
   /**
@@ -85,8 +82,6 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
     {
       roomCode = '',
       authToken = '',
-      roomId = '',
-      role = '',
       containerSelector = DEFAULT_PORTAL_CONTAINER,
       logo,
       typography,
@@ -98,7 +93,6 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
     },
     ref,
   ) => {
-    const metadata = '';
     const reactiveStore = useRef<HMSPrebuiltRefType>();
 
     const [hydrated, setHydrated] = React.useState(false);
@@ -138,14 +132,12 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       | {
           init: string;
           tokenByRoomCode: string;
-          tokenByRoomIdRole: string;
           roomLayout: string;
         }
       | undefined;
     const tokenByRoomCodeEndpoint: string = endpointsObj?.tokenByRoomCode || '';
     const initEndpoint: string = endpointsObj?.init || '';
     const roomLayoutEndpoint: string = endpointsObj?.roomLayout || '';
-    const tokenByRoomIdRoleEndpoint: string = endpointsObj?.tokenByRoomIdRole || '';
 
     const overrideLayout: Partial<Layout> = {
       logo,
@@ -154,10 +146,10 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       screens,
     };
 
-    if (!roomCode && !(authToken && roomId && role)) {
+    if (!roomCode && !authToken) {
       console.error(`
           HMSPrebuilt can be initialised by providing: 
-          either just "roomCode" or "authToken" and "roomId" and "role".
+          either "roomCode" or "authToken".
           Please check if you are providing the above values for initialising prebuilt.
         `);
       throw Error('Incorrect initializing params for HMSPrebuilt component');
@@ -174,8 +166,6 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
         <HMSPrebuiltContext.Provider
           value={{
             roomCode,
-            roomId,
-            role,
             containerSelector,
             onLeave,
             onJoin,
@@ -184,7 +174,6 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
             endpoints: {
               tokenByRoomCode: tokenByRoomCodeEndpoint,
               init: initEndpoint,
-              tokenByRoomIdRole: tokenByRoomIdRoleEndpoint,
               roomLayout: roomLayoutEndpoint,
             },
           }}
@@ -222,7 +211,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                         },
                       }}
                     >
-                      <AppData appDetails={metadata} tokenEndpoint={tokenByRoomIdRoleEndpoint} />
+                      <AppData />
                       <Init />
                       <DialogContainerProvider dialogContainerSelector={containerSelector}>
                         <Box

package/src/Prebuilt/AppContext.tsx

@@ -4,8 +4,6 @@ import { DEFAULT_PORTAL_CONTAINER } from './common/constants';
 
 type HMSPrebuiltContextType = {
   roomCode: string;
-  roomId?: string;
-  role?: string;
   userName?: string;
   userId?: string;
   containerSelector: string;

package/src/Prebuilt/common/{constants.js → constants.ts}

@@ -32,7 +32,6 @@ export const APP_DATA = {
   waitingViewerRole: 'waitingViewerRole',
   subscribedNotifications: 'subscribedNotifications',
   logo: 'logo',
-  tokenEndpoint: 'tokenEndpoint',
   appLayout: 'appLayout',
   hlsStarted: 'hlsStarted',
   rtmpStarted: 'rtmpStarted',
@@ -104,30 +103,33 @@ export const isIPadOS = false;
 // navigator?.maxTouchPoints > 2 &&
 // navigator?.userAgent?.match(/Mac/);
 
-export const SESSION_STORE_KEY = {
-  TRANSCRIPTION_STATE: 'transcriptionState',
-  PINNED_MESSAGE: 'pinnedMessage',
-  SPOTLIGHT: 'spotlight',
-};
-
-export const INTERACTION_TYPE = {
-  POLL: 'Poll',
-  QUIZ: 'Quiz',
-};
-
-export const QUESTION_TYPE_TITLE = {
-  'single-choice': 'Single Choice',
-  'multiple-choice': 'Multiple Choice',
+export enum SESSION_STORE_KEY {
+  TRANSCRIPTION_STATE = 'transcriptionState',
+  PINNED_MESSAGES = 'pinnedMessages',
+  SPOTLIGHT = 'spotlight',
+  CHAT_PEER_BLACKLIST = 'chatPeerBlacklist',
+  CHAT_MESSAGE_BLACKLIST = 'chatMessageBlacklist',
+  CHAT_STATE = 'chatState',
+}
+
+export enum INTERACTION_TYPE {
+  POLL = 'Poll',
+  QUIZ = 'Quiz',
+}
+
+export enum QUESTION_TYPE_TITLE {
+  'single-choice' = 'Single Choice',
+  'multiple-choice' = 'Multiple Choice',
   // "short-answer": "Short Answer",
   // "long-answer": "Long Answer",
-};
+}
 
-export const QUESTION_TYPE = {
-  SINGLE_CHOICE: 'single-choice',
-  MULTIPLE_CHOICE: 'multiple-choice',
+export enum QUESTION_TYPE {
+  SINGLE_CHOICE = 'single-choice',
+  MULTIPLE_CHOICE = 'multiple-choice',
   // SHORT_ANSWER: "short-answer",
   // LONG_ANSWER: "long-answer",
-};
+}
 
 export const ROLE_CHANGE_DECLINED = 'role_change_declined';
 

package/src/Prebuilt/components/AppData/{AppData.jsx → AppData.tsx}

@@ -12,9 +12,13 @@ import {
   useHMSStore,
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
+//@ts-ignore
 import { normalizeAppPolicyConfig } from '../init/initUtils';
+//@ts-ignore
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
+// @ts-ignore
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from './useSidepane';
+// @ts-ignore
 import { useSetAppDataByKey } from './useUISettings';
 import {
   APP_DATA,
@@ -25,15 +29,6 @@ import {
   UI_MODE_GRID,
   UI_SETTINGS,
 } from '../../common/constants';
-import { VB_EFFECT } from '../VirtualBackground/constants';
-
-export const getAppDetails = appDetails => {
-  try {
-    return !appDetails ? {} : JSON.parse(appDetails);
-  } catch (error) {
-    return {};
-  }
-};
 
 const initialAppData = {
   [APP_DATA.uiSettings]: {
@@ -67,15 +62,15 @@ const initialAppData = {
   [APP_DATA.minimiseInset]: false,
   [APP_DATA.activeScreensharePeerId]: '',
   [APP_DATA.disableNotifications]: false,
-  [APP_DATA.background]: VB_EFFECT.NONE,
-  [APP_DATA.backgroundType]: VB_EFFECT.NONE,
+  [APP_DATA.background]: 'none',
+  [APP_DATA.backgroundType]: 'none',
   [APP_DATA.pollState]: {
     [POLL_STATE.pollInView]: '',
     [POLL_STATE.view]: '',
   },
 };
 
-export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
+export const AppData = React.memo(() => {
   const hmsActions = useHMSActions();
   const [preferences = {}] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);
   const roleNames = useHMSStore(selectAvailableRoleNames);
@@ -88,6 +83,7 @@ export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
       ...initialAppData,
       ...appData,
     });
+    // @ts-ignore
     hmsActions.setFrameworkInfo({
       type: 'react-web',
       isPrebuilt: true,
@@ -105,16 +101,6 @@ export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
     hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);
   }, [preferences, hmsActions]);
 
-  useEffect(() => {
-    const appData = {
-      [APP_DATA.tokenEndpoint]: tokenEndpoint,
-      [APP_DATA.appConfig]: getAppDetails(appDetails),
-    };
-    for (const key in appData) {
-      hmsActions.setAppData([key], appData[key]);
-    }
-  }, [appDetails, tokenEndpoint, hmsActions]);
-
   useEffect(() => {
     if (!preferences.subscribedNotifications) {
       return;

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -59,10 +59,6 @@ export const useIsRTMPStartedFromUI = () => {
   return useHMSStore(selectAppData(APP_DATA.rtmpStarted));
 };
 
-export const useTokenEndpoint = () => {
-  return useHMSStore(selectAppData(APP_DATA.tokenEndpoint));
-};
-
 export const useAuthToken = () => {
   return useHMSStore(selectAppData(APP_DATA.authToken));
 };

package/src/Prebuilt/components/AuthToken.jsx

@@ -3,7 +3,7 @@ import { useHMSActions } from '@100mslive/react-sdk';
 import { styled } from '../../Theme';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { ErrorDialog } from '../primitives/DialogContent';
-import { useSetAppDataByKey, useTokenEndpoint } from './AppData/useUISettings';
+import { useSetAppDataByKey } from './AppData/useUISettings';
 import { APP_DATA } from '../common/constants';
 
 /**
@@ -17,7 +17,6 @@ import { APP_DATA } from '../common/constants';
  */
 const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken }) => {
   const hmsActions = useHMSActions();
-  const tokenEndpoint = useTokenEndpoint();
   const { roomCode, userId } = useHMSPrebuiltContext();
   const [error, setError] = useState({ title: '', body: '' });
   let authToken = defaultAuthToken;
@@ -28,7 +27,8 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
       setAuthTokenInAppData(authToken);
       return;
     }
-    if (!tokenEndpoint && !roomCode) {
+
+    if (!roomCode) {
       return;
     }
 
@@ -36,7 +36,7 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
       .getAuthTokenByRoomCode({ roomCode, userId }, { endpoint: authTokenByRoomCodeEndpoint })
       .then(token => setAuthTokenInAppData(token))
       .catch(error => setError(convertError(error)));
-  }, [hmsActions, tokenEndpoint, authToken, authTokenByRoomCodeEndpoint, setAuthTokenInAppData, roomCode, userId]);
+  }, [hmsActions, authToken, authTokenByRoomCodeEndpoint, setAuthTokenInAppData, roomCode, userId]);
 
   if (error.title) {
     return <ErrorDialog title={error.title}>{error.body}</ErrorDialog>;

package/src/Prebuilt/components/Chat/Chat.jsx

@@ -1,76 +1,34 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
+import { selectLocalPeerID, selectSessionStore } from '@100mslive/hms-video-store';
 import {
   HMSNotificationTypes,
   selectHMSMessagesCount,
   selectPeerNameByID,
-  selectPermissions,
-  selectSessionStore,
   useHMSActions,
   useHMSNotifications,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import { ChevronDownIcon, CrossIcon, PinIcon } from '@100mslive/react-icons';
+import { ChevronDownIcon } from '@100mslive/react-icons';
 import { Button } from '../../../Button';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
+import { Flex } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
-import { AnnotisedMessage, ChatBody } from './ChatBody';
+import { ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
+import { ChatBlocked, ChatPaused } from './ChatStates';
+import { PinnedMessage } from './PinnedMessage';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
-import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
+import { useSetPinnedMessages } from '../hooks/useSetPinnedMessages';
 import { useUnreadCount } from './useUnreadCount';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
-const PINNED_MESSAGE_LENGTH = 80;
-
-const PinnedMessage = ({ clearPinnedMessage }) => {
-  const permissions = useHMSStore(selectPermissions);
-  const pinnedMessage = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGE));
-  const formattedPinnedMessage =
-    pinnedMessage?.length && pinnedMessage.length > PINNED_MESSAGE_LENGTH
-      ? `${pinnedMessage.slice(0, PINNED_MESSAGE_LENGTH)}...`
-      : pinnedMessage;
-
-  return pinnedMessage ? (
-    <Flex
-      title={pinnedMessage}
-      css={{ p: '$4', color: '$on_surface_medium', bg: '$surface_default', r: '$1', gap: '$4', mb: '$8', mt: '$8' }}
-      align="center"
-      justify="between"
-    >
-      <PinIcon />
-
-      <Box
-        css={{
-          color: '$on_surface_medium',
-          w: '100%',
-          maxHeight: '$18',
-          overflowY: 'auto',
-        }}
-      >
-        <Text variant="sm">
-          <AnnotisedMessage message={formattedPinnedMessage} />
-        </Text>
-      </Box>
-      {permissions.removeOthers && (
-        <Flex
-          onClick={() => clearPinnedMessage()}
-          css={{ cursor: 'pointer', color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }}
-        >
-          <CrossIcon />
-        </Flex>
-      )}
-    </Flex>
-  ) : null;
-};
-
 export const Chat = ({ screenType }) => {
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   const peerName = useHMSStore(selectPeerNameByID(peerSelector));
+  const localPeerId = useHMSStore(selectLocalPeerID);
   const [chatOptions, setChatOptions] = useState({
     role: roleSelector || '',
     peerId: peerSelector && peerName ? peerSelector : '',
@@ -79,7 +37,8 @@ export const Chat = ({ screenType }) => {
   const [isSelectorOpen] = useState(false);
   const listRef = useRef(null);
   const hmsActions = useHMSActions();
-  const { setPinnedMessage } = useSetPinnedMessage();
+  const { removePinnedMessage } = useSetPinnedMessages();
+  const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
 
   useEffect(() => {
     if (notification && notification.data && peerSelector === notification.data.id) {
@@ -91,9 +50,12 @@ export const Chat = ({ screenType }) => {
       });
     }
   }, [notification, peerSelector, setPeerSelector]);
-
+  const blacklistedPeerIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST)) || [];
+  const blacklistedPeerIDSet = new Set(blacklistedPeerIDs);
+  const isLocalPeerBlacklisted = blacklistedPeerIDSet.has(localPeerId);
   const storeMessageSelector = selectHMSMessagesCount;
   const { elements } = useRoomLayoutConferencingScreen();
+  const { enabled: isChatEnabled = true } = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
   const isMobile = useMedia(cssConfig.media.md);
 
   let isScrolledToBottom = false;
@@ -125,7 +87,11 @@ export const Chat = ({ screenType }) => {
       }}
     >
       {isMobile && elements?.chat?.is_overlay ? null : (
-        <>{elements?.chat?.allow_pinning_messages ? <PinnedMessage clearPinnedMessage={setPinnedMessage} /> : null}</>
+        <>
+          {elements?.chat?.allow_pinning_messages ? (
+            <PinnedMessage clearPinnedMessage={index => removePinnedMessage(pinnedMessages, index)} />
+          ) : null}
+        </>
       )}
 
       <ChatBody
@@ -134,27 +100,39 @@ export const Chat = ({ screenType }) => {
         ref={listRef}
         scrollToBottom={scrollToBottom}
         screenType={screenType}
+        blacklistedPeerIDs={blacklistedPeerIDs}
       />
-      <ChatFooter
-        role={chatOptions.role}
-        onSend={() => scrollToBottom(1)}
-        selection={chatOptions.selection}
-        screenType={screenType}
-        onSelect={({ role, peerId, selection }) => {
-          setChatOptions({
-            role,
-            peerId,
-            selection,
-          });
-          setPeerSelector(peerId);
-          setRoleSelector(role);
-        }}
-        peerId={chatOptions.peerId}
-      >
-        {!isSelectorOpen && !isScrolledToBottom && (
-          <NewMessageIndicator role={chatOptions.role} peerId={chatOptions.peerId} scrollToBottom={scrollToBottom} />
-        )}
-      </ChatFooter>
+
+      <ChatPaused />
+
+      {isLocalPeerBlacklisted ? <ChatBlocked /> : null}
+
+      {isMobile && elements?.chat?.is_overlay && elements?.chat?.allow_pinning_messages ? (
+        <PinnedMessage clearPinnedMessage={index => removePinnedMessage(pinnedMessages, index)} />
+      ) : null}
+
+      {isChatEnabled && !isLocalPeerBlacklisted ? (
+        <ChatFooter
+          role={chatOptions.role}
+          onSend={() => scrollToBottom(1)}
+          selection={chatOptions.selection}
+          screenType={screenType}
+          onSelect={({ role, peerId, selection }) => {
+            setChatOptions({
+              role,
+              peerId,
+              selection,
+            });
+            setPeerSelector(peerId);
+            setRoleSelector(role);
+          }}
+          peerId={chatOptions.peerId}
+        >
+          {!isSelectorOpen && !isScrolledToBottom && (
+            <NewMessageIndicator role={chatOptions.role} peerId={chatOptions.peerId} scrollToBottom={scrollToBottom} />
+          )}
+        </ChatFooter>
+      ) : null}
     </Flex>
   );
 };