@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.1

package/src/Prebuilt/components/AppData/AppData.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
-import { useSearchParam } from 'react-use';
 import {
   HMSRoomState,
   selectAvailableRoleNames,
+  selectFullAppData,
   selectHLSState,
   selectIsConnectedToRoom,
   selectLocalPeerRoleName,
@@ -17,16 +17,11 @@ import { normalizeAppPolicyConfig } from '../init/initUtils';
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneState, useSidepaneToggle } from './useSidepane';
 import { useSetAppDataByKey } from './useUISettings';
-import { getMetadata } from '../../common/utils';
 import {
   APP_DATA,
   CHAT_SELECTOR,
-  DEFAULT_HLS_ROLE_KEY,
-  DEFAULT_HLS_VIEWER_ROLE,
   DEFAULT_WAITING_VIEWER_ROLE,
-  QUERY_PARAM_VIEW_MODE,
   SIDE_PANE_OPTIONS,
-  UI_MODE_ACTIVE_SPEAKER,
   UI_MODE_GRID,
   UI_SETTINGS,
 } from '../../common/constants';
@@ -42,7 +37,6 @@ export const getAppDetails = appDetails => {
 const initialAppData = {
   [APP_DATA.uiSettings]: {
     [UI_SETTINGS.isAudioOnly]: false,
-    [UI_SETTINGS.isHeadless]: false,
     [UI_SETTINGS.maxTileCount]: 9,
     [UI_SETTINGS.showStatsOnTiles]: false,
     [UI_SETTINGS.enableAmbientMusic]: false,
@@ -66,11 +60,12 @@ const initialAppData = {
   [APP_DATA.hlsStarted]: false,
   [APP_DATA.rtmpStarted]: false,
   [APP_DATA.recordingStarted]: false,
-  [APP_DATA.hlsViewerRole]: DEFAULT_HLS_VIEWER_ROLE,
   [APP_DATA.waitingViewerRole]: DEFAULT_WAITING_VIEWER_ROLE,
   [APP_DATA.dropdownList]: [],
   [APP_DATA.authToken]: '',
   [APP_DATA.minimiseInset]: false,
+  [APP_DATA.activeScreensharePeerId]: '',
+  [APP_DATA.disableNotificiations]: false,
 };
 
 export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
@@ -82,7 +77,7 @@ export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
   const roleNames = useHMSStore(selectAvailableRoleNames);
   const rolesMap = useHMSStore(selectRolesMap);
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const isDefaultModeActiveSpeaker = useSearchParam(QUERY_PARAM_VIEW_MODE) === UI_MODE_ACTIVE_SPEAKER;
+  const appData = useHMSStore(selectFullAppData);
 
   useEffect(() => {
     if (!isConnected && sidePane && sidePane !== SIDE_PANE_OPTIONS.PARTICIPANTS) {
@@ -91,29 +86,30 @@ export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
   }, [isConnected, sidePane, resetSidePane]);
 
   useEffect(() => {
-    hmsActions.initAppData(initialAppData);
+    hmsActions.initAppData({
+      ...initialAppData,
+      ...appData,
+    });
     hmsActions.setFrameworkInfo({
       type: 'react-web',
       isPrebuilt: true,
       version: React.version,
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hmsActions]);
 
   useEffect(() => {
     const uiSettings = preferences || {};
     const updatedSettings = {
       ...uiSettings,
-      [UI_SETTINGS.uiViewMode]: isDefaultModeActiveSpeaker
-        ? UI_MODE_ACTIVE_SPEAKER
-        : uiSettings.uiViewMode || UI_MODE_GRID,
+      [UI_SETTINGS.uiViewMode]: uiSettings.uiViewMode || UI_MODE_GRID,
     };
     hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);
-  }, [preferences, isDefaultModeActiveSpeaker, hmsActions]);
+  }, [preferences, hmsActions]);
 
   useEffect(() => {
     const appData = {
       [APP_DATA.tokenEndpoint]: tokenEndpoint,
-      [APP_DATA.hlsViewerRole]: getMetadata(appDetails)[DEFAULT_HLS_ROLE_KEY] || DEFAULT_HLS_VIEWER_ROLE,
       [APP_DATA.appConfig]: getAppDetails(appDetails),
     };
     for (const key in appData) {

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

@@ -11,7 +11,7 @@ import {
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
-import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../../common/constants';
+import { APP_DATA, SESSION_STORE_KEY } from '../../common/constants';
 
 /**
  * fields saved related to UI settings in store's app data can be
@@ -46,15 +46,6 @@ export const useSetUiSettings = uiSettingKey => {
   return [value, setValue];
 };
 
-export const useIsHeadless = () => {
-  const isHeadless = useUISettings(UI_SETTINGS.isHeadless);
-  return isHeadless;
-};
-
-export const useHLSViewerRole = () => {
-  return useHMSStore(selectAppData(APP_DATA.hlsViewerRole));
-};
-
 export const useWaitingViewerRole = () => {
   return useHMSStore(selectAppData(APP_DATA.waitingViewerRole));
 };
@@ -94,6 +85,11 @@ export const useSubscribedNotifications = notificationKey => {
   return notificationPreference;
 };
 
+export const useIsNotificationDisabled = () => {
+  const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.disableNotificiations));
+  return notificationPreference;
+};
+
 export const useSetSubscribedNotifications = notificationKey => {
   const value = useSubscribedNotifications(notificationKey);
   const setValue = useSetAppData({

package/src/Prebuilt/components/AudioVideoToggle.jsx

@@ -67,14 +67,17 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
   const videoTrackId = useHMSStore(selectLocalVideoTrackID);
   const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
   const roomState = useHMSStore(selectRoomState);
+  const hasAudioDevices = audioInput?.length > 0;
+  const hasVideoDevices = videoInput?.length > 0;
 
   return (
     <Fragment>
       {toggleAudio ? (
-        hideOptions ? (
+        hideOptions || !hasAudioDevices ? (
           <Tooltip title={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}>
             <IconButton
               active={isLocalAudioEnabled}
+              disabled={!toggleAudio}
               onClick={toggleAudio}
               key="toggleAudio"
               data-testid="audio_btn"
@@ -90,6 +93,8 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
         ) : (
           <IconButtonWithOptions
             options={formattedAudioInputList}
+            disabled={!toggleAudio}
+            onDisabledClick={toggleAudio}
             tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}
             icon={
               !isLocalAudioEnabled ? (
@@ -106,11 +111,12 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
       ) : null}
 
       {toggleVideo ? (
-        hideOptions ? (
+        hideOptions || !hasVideoDevices ? (
           <Tooltip title={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}>
             <IconButton
               key="toggleVideo"
               active={isLocalVideoEnabled}
+              disabled={!toggleVideo}
               onClick={toggleVideo}
               data-testid="video_btn"
               className="__cancel-drag-event"
@@ -124,6 +130,8 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
           </Tooltip>
         ) : (
           <IconButtonWithOptions
+            disabled={!toggleVideo}
+            onDisabledClick={toggleVideo}
             options={formattedVideoInputList}
             tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}
             icon={

package/src/Prebuilt/components/AuthToken.jsx

@@ -1,14 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { matchPath, useLocation } from 'react-router-dom';
-import { useSearchParam } from 'react-use';
-import { v4 as uuid } from 'uuid';
+import React, { useEffect, useState } from 'react';
 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 getToken from '../services/tokenService';
-import { APP_DATA, QUERY_PARAM_AUTH_TOKEN } from '../common/constants';
+import { APP_DATA } from '../common/constants';
 
 /**
  * query params exposed -
@@ -19,20 +15,12 @@ import { APP_DATA, QUERY_PARAM_AUTH_TOKEN } from '../common/constants';
  * auth_token=123 => uses the passed in token to join instead of fetching from token endpoint
  * ui_mode=activespeaker => lands in active speaker mode after joining the room
  */
-const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint }) => {
+const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken }) => {
   const hmsActions = useHMSActions();
   const tokenEndpoint = useTokenEndpoint();
-  const { showPreview, roomCode, userId } = useHMSPrebuiltContext();
-  const location = useLocation();
-  const matches = useMemo(
-    () =>
-      matchPath(`${showPreview ? 'preview' : 'meeting'}/:roomId/:role`, location.pathname) ||
-      matchPath(`${showPreview ? 'preview' : 'meeting'}/:roomCode/`, location.pathname),
-    [location, showPreview],
-  );
-  const { roomCode: urlRoomCode, roomId: urlRoomId, role: userRole } = matches?.params || {};
+  const { roomCode, userId } = useHMSPrebuiltContext();
   const [error, setError] = useState({ title: '', body: '' });
-  let authToken = useSearchParam(QUERY_PARAM_AUTH_TOKEN);
+  let authToken = defaultAuthToken;
   const [, setAuthTokenInAppData] = useSetAppDataByKey(APP_DATA.authToken);
 
   useEffect(() => {
@@ -40,34 +28,15 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint }) => {
       setAuthTokenInAppData(authToken);
       return;
     }
-    if (!tokenEndpoint && !urlRoomId && !roomCode && !urlRoomCode) {
+    if (!tokenEndpoint && !roomCode) {
       return;
     }
-    const code = !userRole && (roomCode || urlRoomCode);
 
-    const getTokenFn = code
-      ? () => hmsActions.getAuthTokenByRoomCode({ roomCode: code, userId }, { endpoint: authTokenByRoomCodeEndpoint })
-      : () => getToken(tokenEndpoint, uuid(), userRole, urlRoomId);
-
-    getTokenFn()
-      .then(token => {
-        setAuthTokenInAppData(token);
-      })
-      .catch(error => {
-        setError(convertError(error));
-      });
-  }, [
-    hmsActions,
-    tokenEndpoint,
-    urlRoomId,
-    urlRoomCode,
-    userRole,
-    authToken,
-    authTokenByRoomCodeEndpoint,
-    setAuthTokenInAppData,
-    roomCode,
-    userId,
-  ]);
+    hmsActions
+      .getAuthTokenByRoomCode({ roomCode, userId }, { endpoint: authTokenByRoomCodeEndpoint })
+      .then(token => setAuthTokenInAppData(token))
+      .catch(error => setError(convertError(error)));
+  }, [hmsActions, tokenEndpoint, authToken, authTokenByRoomCodeEndpoint, setAuthTokenInAppData, roomCode, userId]);
 
   if (error.title) {
     return <ErrorDialog title={error.title}>{error.body}</ErrorDialog>;

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

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
 import {
   HMSNotificationTypes,
   selectHMSMessagesCount,
@@ -13,31 +14,37 @@ import { ChevronDownIcon, CrossIcon, PinIcon } from '@100mslive/react-icons';
 import { Button } from '../../../Button';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
-import IconButton from '../../IconButton';
+import { config as cssConfig } from '../../../Theme';
 import { AnnotisedMessage, ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
-import { ChatHeader } from './ChatHeader';
+import { ChatParticipantHeader } from './ChatParticipantHeader';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
 import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
 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
-      css={{ p: '$8', color: '$on_surface_medium', bg: '$surface_bright', r: '$1' }}
+      title={pinnedMessage}
+      css={{ p: '$4', color: '$on_surface_medium', bg: '$surface_default', r: '$1', gap: '$4', mb: '$8', mt: '$8' }}
       align="center"
       justify="between"
     >
-      <Box>
-        <PinIcon />
-      </Box>
+      <PinIcon />
+
       <Box
         css={{
-          ml: '$8',
           color: '$on_surface_medium',
           w: '100%',
           maxHeight: '$18',
@@ -45,19 +52,22 @@ const PinnedMessage = ({ clearPinnedMessage }) => {
         }}
       >
         <Text variant="sm">
-          <AnnotisedMessage message={pinnedMessage} />
+          <AnnotisedMessage message={formattedPinnedMessage} />
         </Text>
       </Box>
       {permissions.removeOthers && (
-        <IconButton onClick={() => clearPinnedMessage()}>
+        <Flex
+          onClick={() => clearPinnedMessage()}
+          css={{ cursor: 'pointer', color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }}
+        >
           <CrossIcon />
-        </IconButton>
+        </Flex>
       )}
     </Flex>
   ) : null;
 };
 
-export const Chat = () => {
+export const Chat = ({ screenType, hideControls = false }) => {
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
@@ -71,6 +81,7 @@ export const Chat = () => {
   const listRef = useRef(null);
   const hmsActions = useHMSActions();
   const { setPinnedMessage } = useSetPinnedMessage();
+
   useEffect(() => {
     if (notification && notification.data && peerSelector === notification.data.id) {
       setPeerSelector('');
@@ -83,6 +94,14 @@ export const Chat = () => {
   }, [notification, peerSelector, setPeerSelector]);
 
   const storeMessageSelector = selectHMSMessagesCount;
+  const { elements } = useRoomLayoutConferencingScreen();
+  const isMobile = useMedia(cssConfig.media.md);
+
+  let isScrolledToBottom = false;
+  if (listRef.current) {
+    const currentRef = listRef.current._outerRef;
+    isScrolledToBottom = currentRef.scrollHeight - currentRef.clientHeight - currentRef.scrollTop < 10;
+  }
 
   const messagesCount = useHMSStore(storeMessageSelector) || 0;
   const scrollToBottom = useCallback(
@@ -99,10 +118,34 @@ export const Chat = () => {
   );
 
   return (
-    <Flex direction="column" css={{ size: '100%' }}>
-      <ChatHeader
-        selectorOpen={isSelectorOpen}
+    <Flex
+      direction="column"
+      css={{
+        size: '100%',
+        gap: '$4',
+        marginTop: hideControls && elements?.chat?.is_overlay ? '$17' : '0',
+        transition: 'margin 0.3s ease-in-out',
+      }}
+    >
+      {isMobile && elements?.chat?.is_overlay ? null : (
+        <>
+          <ChatParticipantHeader selectorOpen={isSelectorOpen} onToggle={() => setSelectorOpen(value => !value)} />
+          {elements?.chat?.allow_pinning_messages ? <PinnedMessage clearPinnedMessage={setPinnedMessage} /> : null}
+        </>
+      )}
+
+      <ChatBody
+        role={chatOptions.role}
+        peerId={chatOptions.peerId}
+        ref={listRef}
+        scrollToBottom={scrollToBottom}
+        screenType={screenType}
+      />
+      <ChatFooter
+        role={chatOptions.role}
+        onSend={() => scrollToBottom(1)}
         selection={chatOptions.selection}
+        screenType={screenType}
         onSelect={({ role, peerId, selection }) => {
           setChatOptions({
             role,
@@ -112,17 +155,9 @@ export const Chat = () => {
           setPeerSelector(peerId);
           setRoleSelector(role);
         }}
-        role={chatOptions.role}
         peerId={chatOptions.peerId}
-        onToggle={() => {
-          setSelectorOpen(value => !value);
-        }}
-      />
-      <PinnedMessage clearPinnedMessage={setPinnedMessage} />
-
-      <ChatBody role={chatOptions.role} peerId={chatOptions.peerId} ref={listRef} scrollToBottom={scrollToBottom} />
-      <ChatFooter role={chatOptions.role} peerId={chatOptions.peerId} onSend={() => scrollToBottom(1)}>
-        {!isSelectorOpen && (
+      >
+        {!isSelectorOpen && !isScrolledToBottom && (
           <NewMessageIndicator role={chatOptions.role} peerId={chatOptions.peerId} scrollToBottom={scrollToBottom} />
         )}
       </ChatFooter>
@@ -146,13 +181,26 @@ const NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
       }}
     >
       <Button
+        variant="standard"
         onClick={() => {
           scrollToBottom(unreadCount);
         }}
-        css={{ p: '$2 $4', '& > svg': { ml: '$4' } }}
+        icon
+        css={{
+          p: '$4',
+          pl: '$8',
+          pr: '$6',
+          '& > svg': { ml: '$4' },
+          borderRadius: '$round',
+          position: 'relative',
+          bottom: '$16',
+          fontSize: '$xs',
+          fontWeight: '$semiBold',
+          c: '$on_secondary_high',
+        }}
       >
-        New Messages
-        <ChevronDownIcon width={16} height={16} />
+        New {unreadCount === 1 ? 'message' : 'messages'}
+        <ChevronDownIcon />
       </Button>
     </Flex>
   );