@100mslive/roomkit-react 0.1.4 → 0.1.6-alpha.0

package/src/Prebuilt/components/RoleChangeRequestModal.jsx

@@ -1,26 +1,102 @@
-import React from 'react';
-import { selectRoleChangeRequest, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { RequestDialog } from '../primitives/DialogContent';
+import React, { useEffect } from 'react';
+import {
+  selectLocalPeerName,
+  selectLocalPeerRoleName,
+  selectRoleChangeRequest,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { PreviewControls, PreviewTile } from './Preview/PreviewJoin';
+import { Box, Button, Dialog, Flex, Text } from '../../';
 import { useIsHeadless } from './AppData/useUISettings';
+import { useMyMetadata } from './hooks/useMetadata';
+import { ROLE_CHANGE_DECLINED } from '../common/constants';
 
 export const RoleChangeRequestModal = () => {
   const hmsActions = useHMSActions();
   const isHeadless = useIsHeadless();
+  const { setPrevRole } = useMyMetadata();
+  const currentRole = useHMSStore(selectLocalPeerRoleName);
   const roleChangeRequest = useHMSStore(selectRoleChangeRequest);
+  const name = useHMSStore(selectLocalPeerName);
+
+  useEffect(() => {
+    if (!roleChangeRequest?.role || isHeadless) {
+      return;
+    }
+
+    hmsActions.preview({ asRole: roleChangeRequest.role.name });
+  }, [hmsActions, roleChangeRequest, isHeadless]);
 
   if (!roleChangeRequest?.role || isHeadless) {
     return null;
   }
 
+  const body = (
+    <>
+      <Text css={{ fontWeight: 400, c: '$on_surface_medium', textAlign: 'center' }}>
+        Setup your audio and video before joining
+      </Text>
+      <Flex
+        align="center"
+        justify="center"
+        css={{
+          '@sm': { width: '100%' },
+          flexDirection: 'column',
+          mt: '$6',
+        }}
+      >
+        <PreviewTile name={name} />
+        <PreviewControls />
+      </Flex>
+    </>
+  );
+
   return (
     <RequestDialog
-      title="Role Change Request"
-      onOpenChange={value => !value && hmsActions.rejectChangeRole(roleChangeRequest)}
-      body={`${roleChangeRequest?.requestedBy?.name} has requested you to change your role to ${roleChangeRequest?.role?.name}.`}
+      title={`You're invited to join the ${roleChangeRequest.role.name} role`}
+      onOpenChange={async value => {
+        if (!value) {
+          await hmsActions.rejectChangeRole(roleChangeRequest);
+          await hmsActions.sendDirectMessage('', roleChangeRequest.requestedBy?.id, ROLE_CHANGE_DECLINED);
+          await hmsActions.cancelMidCallPreview();
+        }
+      }}
+      body={body}
       onAction={() => {
         hmsActions.acceptChangeRole(roleChangeRequest);
+        setPrevRole(currentRole);
       }}
       actionText="Accept"
     />
   );
 };
+
+const RequestDialog = ({ open = true, onOpenChange, title, body, actionText = 'Accept', onAction, Icon }) => (
+  <Dialog.Root open={open} onOpenChange={onOpenChange}>
+    <Dialog.Portal>
+      <Dialog.Overlay />
+      <Dialog.Content css={{ p: '$10' }}>
+        <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
+          {Icon ? Icon : null}
+          <Text variant="h6">{title}</Text>
+        </Dialog.Title>
+        <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
+        <Flex justify="center" align="center" css={{ width: '100%', gap: '$md' }}>
+          <Box css={{ width: '50%' }}>
+            <Dialog.Close css={{ width: '100%' }}>
+              <Button variant="standard" outlined css={{ width: '100%' }}>
+                Cancel
+              </Button>
+            </Dialog.Close>
+          </Box>
+          <Box css={{ width: '50%' }}>
+            <Button variant="primary" css={{ width: '100%' }} onClick={onAction}>
+              {actionText}
+            </Button>
+          </Box>
+        </Flex>
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog.Root>
+);

package/src/Prebuilt/components/ScreenshareDisplay.jsx

@@ -14,24 +14,18 @@ export const ScreenshareDisplay = () => {
       align="center"
       justify="center"
       css={{
-        position: 'relative',
-        overflow: 'hidden',
-        w: '37.5rem',
-        maxWidth: '80%',
-        h: '100%',
-        r: '$3',
-        m: '0 auto',
-        color: '$on_surface_high',
+        size: '100%',
         bg: '$background_default',
-        textAlign: 'center',
+        color: '$on_surface_high',
       }}
     >
       <ShareScreenIcon width={48} height={48} />
-      <Text variant="h5" css={{ m: '$8 0', color: '$on_surface_high' }}>
+      <Text variant="h5" css={{ m: '$8 0' }}>
         You are sharing your screen
       </Text>
       <Button
         variant="danger"
+        css={{ fontWeight: '$semiBold' }}
         onClick={async () => {
           await hmsActions.setScreenShareEnabled(false);
         }}

package/src/Prebuilt/components/ScreenshareTile.jsx

@@ -14,6 +14,7 @@ import { VideoTileStats } from '../../Stats';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
+import { ScreenshareDisplay } from './ScreenshareDisplay';
 import { useIsHeadless, useUISettings } from './AppData/useUISettings';
 import { UI_SETTINGS } from '../common/constants';
 
@@ -21,6 +22,7 @@ const labelStyles = {
   position: 'unset',
   width: '100%',
   textAlign: 'center',
+  c: '$on_surface_high',
   transform: 'none',
   mt: '$2',
   flexShrink: 0,
@@ -48,40 +50,46 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
   });
   const isFullScreenSupported = screenfull.isEnabled;
   const audioTrack = useHMSStore(selectScreenShareAudioByPeerID(peer?.id));
+
+  if (isLocal && !['browser', 'window', 'application'].includes(track?.displaySurface)) {
+    return <ScreenshareDisplay />;
+  }
+
+  if (!peer) {
+    return null;
+  }
   return (
-    <StyledVideoTile.Root css={{ width, height, p: 0 }} data-testid="screenshare_tile">
-      {peer ? (
-        <StyledVideoTile.Container
-          transparentBg
-          ref={fullscreenRef}
-          css={{ flexDirection: 'column' }}
-          onMouseEnter={() => setIsMouseHovered(true)}
-          onMouseLeave={() => {
-            setIsMouseHovered(false);
-          }}
-        >
-          {showStatsOnTiles ? (
-            <VideoTileStats audioTrackID={audioTrack?.id} videoTrackID={track?.id} peerID={peerId} isLocal={isLocal} />
-          ) : null}
-          {isFullScreenSupported && !isHeadless ? (
-            <StyledVideoTile.FullScreenButton onClick={() => setFullscreen(!fullscreen)}>
-              {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
-            </StyledVideoTile.FullScreenButton>
-          ) : null}
-          {track ? (
-            <Video
-              screenShare={true}
-              mirror={peer.isLocal && track?.source === 'regular'}
-              attach={!isAudioOnly}
-              trackId={track.id}
-            />
-          ) : null}
-          <StyledVideoTile.Info css={labelStyles}>{label}</StyledVideoTile.Info>
-          {isMouseHovered && !isHeadless && !peer?.isLocal ? (
-            <TileMenu isScreenshare peerID={peer?.id} audioTrackID={audioTrack?.id} videoTrackID={track?.id} />
-          ) : null}
-        </StyledVideoTile.Container>
-      ) : null}
+    <StyledVideoTile.Root css={{ width, height, p: 0, mb: '$4', minHeight: 0 }} data-testid="screenshare_tile">
+      <StyledVideoTile.Container
+        transparentBg
+        ref={fullscreenRef}
+        css={{ flexDirection: 'column' }}
+        onMouseEnter={() => setIsMouseHovered(true)}
+        onMouseLeave={() => {
+          setIsMouseHovered(false);
+        }}
+      >
+        {showStatsOnTiles ? (
+          <VideoTileStats audioTrackID={audioTrack?.id} videoTrackID={track?.id} peerID={peerId} isLocal={isLocal} />
+        ) : null}
+        {isFullScreenSupported && !isHeadless ? (
+          <StyledVideoTile.FullScreenButton onClick={() => setFullscreen(!fullscreen)}>
+            {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
+          </StyledVideoTile.FullScreenButton>
+        ) : null}
+        {track ? (
+          <Video
+            screenShare={true}
+            mirror={peer.isLocal && track?.source === 'regular'}
+            attach={!isAudioOnly}
+            trackId={track.id}
+          />
+        ) : null}
+        <StyledVideoTile.Info css={labelStyles}>{label}</StyledVideoTile.Info>
+        {isMouseHovered && !isHeadless && !peer?.isLocal ? (
+          <TileMenu isScreenshare peerID={peer?.id} audioTrackID={audioTrack?.id} videoTrackID={track?.id} />
+        ) : null}
+      </StyledVideoTile.Container>
     </StyledVideoTile.Root>
   );
 };

package/src/Prebuilt/components/SecondaryTiles.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
+import { LayoutProps } from './VideoLayouts/interface';
+import { ProminenceLayout } from './VideoLayouts/ProminenceLayout';
+import { config as cssConfig } from '../../Theme';
+import { Pagination } from './Pagination';
+import { usePagesWithTiles } from './hooks/useTileLayout';
+
+export const SecondaryTiles = ({ peers, onPageChange, onPageSize }: LayoutProps) => {
+  const isMobile = useMedia(cssConfig.media.md);
+  const maxTileCount = isMobile ? 2 : 4;
+  const pagesWithTiles = usePagesWithTiles({ peers, maxTileCount });
+  const [page, setPage] = useState(0);
+  const pageSize = pagesWithTiles[0]?.length || 0;
+
+  useEffect(() => {
+    if (pageSize > 0) {
+      onPageSize?.(pageSize);
+    }
+  }, [pageSize, onPageSize]);
+
+  return (
+    <ProminenceLayout.SecondarySection tiles={pagesWithTiles[page]}>
+      <Pagination
+        page={page}
+        onPageChange={page => {
+          setPage(page);
+          onPageChange?.(page);
+        }}
+        numPages={pagesWithTiles.length}
+      />
+    </ProminenceLayout.SecondarySection>
+  );
+};

package/src/Prebuilt/components/Settings/LayoutSettings.jsx

@@ -4,13 +4,13 @@ import { Box, Flex, Slider, Text } from '../../../';
 import SwitchWithLabel from './SwitchWithLabel';
 import { useSetUiSettings } from '../AppData/useUISettings';
 import { settingOverflow } from './common.js';
-import { UI_MODE_ACTIVE_SPEAKER, UI_MODE_GRID, UI_SETTINGS } from '../../common/constants';
+import { UI_SETTINGS } from '../../common/constants';
 
 export const LayoutSettings = () => {
   const hmsActions = useHMSActions();
   const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
   const isLocalScreenShared = useHMSStore(selectIsLocalScreenShared);
-  const [{ isAudioOnly, uiViewMode, maxTileCount, mirrorLocalVideo }, setUISettings] = useSetUiSettings();
+  const [{ isAudioOnly, maxTileCount, mirrorLocalVideo }, setUISettings] = useSetUiSettings();
   const toggleIsAudioOnly = useCallback(
     async isAudioOnlyModeOn => {
       if (isAudioOnlyModeOn) {
@@ -25,16 +25,6 @@ export const LayoutSettings = () => {
 
   return (
     <Box className={settingOverflow()}>
-      <SwitchWithLabel
-        checked={uiViewMode === UI_MODE_ACTIVE_SPEAKER}
-        onChange={value => {
-          setUISettings({
-            [UI_SETTINGS.uiViewMode]: value ? UI_MODE_ACTIVE_SPEAKER : UI_MODE_GRID,
-          });
-        }}
-        id="activeSpeakerMode"
-        label="Active Speaker Mode"
-      />
       <SwitchWithLabel label="Audio Only Mode" id="audioOnlyMode" checked={isAudioOnly} onChange={toggleIsAudioOnly} />
       <SwitchWithLabel
         label="Mirror Local Video"

package/src/Prebuilt/components/Settings/NotificationSettings.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AlertOctagonIcon, ChatIcon, ExitIcon, HandIcon, PersonIcon } from '@100mslive/react-icons';
+import { AlertOctagonIcon, HandIcon, PeopleAddIcon, PeopleRemoveIcon } from '@100mslive/react-icons';
 import { Box } from '../../../';
 import SwitchWithLabel from './SwitchWithLabel';
 import { useSetSubscribedNotifications, useSubscribedNotifications } from '../AppData/useUISettings';
@@ -29,21 +29,15 @@ export const NotificationSettings = () => {
       <NotificationItem
         label="Peer Joined"
         type={SUBSCRIBED_NOTIFICATIONS.PEER_JOINED}
-        icon={<PersonIcon />}
+        icon={<PeopleAddIcon />}
         checked={subscribedNotifications.PEER_JOINED}
       />
       <NotificationItem
         label="Peer Leave"
         type={SUBSCRIBED_NOTIFICATIONS.PEER_LEFT}
-        icon={<ExitIcon />}
+        icon={<PeopleRemoveIcon />}
         checked={subscribedNotifications.PEER_LEFT}
       />
-      <NotificationItem
-        label="New Message"
-        type={SUBSCRIBED_NOTIFICATIONS.NEW_MESSAGE}
-        icon={<ChatIcon />}
-        checked={subscribedNotifications.NEW_MESSAGE}
-      />
       <NotificationItem
         label="Hand Raised"
         type={SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED}

package/src/Prebuilt/components/Settings/SettingsModal.jsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk';
 import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
 import { HorizontalDivider } from '../../../Divider';
 import { IconButton } from '../../../IconButton';
@@ -10,17 +9,12 @@ import { Sheet } from '../../../Sheet';
 import { Tabs } from '../../../Tabs';
 import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
-import { useHLSViewerRole } from '../AppData/useUISettings';
 import { settingContent, settingsList } from './common.js';
 
-const SettingsModal = ({ open, onOpenChange, children = <></> }) => {
+const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) => {
   const mediaQueryLg = cssConfig.media.md;
   const isMobile = useMedia(mediaQueryLg);
 
-  const hlsViewerRole = useHLSViewerRole();
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const isHlsViewer = hlsViewerRole === localPeerRole;
-
   const [showSetting, setShowSetting] = useState(() =>
     settingsList.reduce((obj, { tabName }) => ({ ...obj, [tabName]: true }), {}),
   );
@@ -31,10 +25,10 @@ const SettingsModal = ({ open, onOpenChange, children = <></> }) => {
   );
 
   useEffect(() => {
-    if (isHlsViewer) {
+    if (screenType === 'hls_live_streaming') {
       hideSettingByTabName('layout')(true);
     }
-  }, [isHlsViewer, hideSettingByTabName]);
+  }, [screenType, hideSettingByTabName]);
 
   const [selection, setSelection] = useState(() => Object.keys(showSetting).find(key => showSetting[key]) ?? '');
   const resetSelection = useCallback(() => {

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -76,7 +76,9 @@ export const StatsForNerds = ({ onOpenChange }) => {
               minWidth: 0,
             }}
           >
-            <Label variant="body2">Stats For</Label>
+            <Label variant="body2" css={{ c: '$on_surface_high' }}>
+              Stats For
+            </Label>
             <Dropdown.Root data-testid="dialog_select_Stats For" open={open} onOpenChange={setOpen}>
               <DialogDropdownTrigger
                 title={selectedStat.label || 'Select Stats'}

package/src/Prebuilt/components/TileMenu/TileMenu.jsx

@@ -4,7 +4,6 @@ import {
   selectLocalPeerID,
   selectPeerByID,
   selectPermissions,
-  selectTemplateAppData,
   selectTrackByID,
   selectVideoTrackByPeerID,
   useHMSStore,
@@ -19,28 +18,29 @@ import { StyledMenuTile } from '../../../TileMenu';
 import { ChangeNameModal } from '../MoreSettings/ChangeNameModal';
 import { TileMenuContent } from './TileMenuContent';
 import { useDropdownList } from '../hooks/useDropdownList';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
-import { FEATURE_LIST } from '../../common/constants';
 
 /**
  * Taking peerID as peer won't necesarilly have tracks
  */
-const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, canMinimise }) => {
+const TileMenu = ({
+  audioTrackID,
+  videoTrackID,
+  peerID,
+  isScreenshare = false,
+  canMinimise,
+  enableSpotlightingPeer = true,
+}) => {
   const [open, setOpen] = useState(false);
   const { theme } = useTheme();
 
   const localPeerID = useHMSStore(selectLocalPeerID);
   const isLocal = localPeerID === peerID;
-  const { removeOthers, changeRole } = useHMSStore(selectPermissions);
+  const { removeOthers } = useHMSStore(selectPermissions);
   const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle(audioTrackID, videoTrackID);
-  const showSpotlight = changeRole;
+  const showSpotlight = enableSpotlightingPeer;
 
   const isPrimaryVideoTrack = useHMSStore(selectVideoTrackByPeerID(peerID))?.id === videoTrackID;
-  const uiMode = useHMSStore(selectTemplateAppData).uiMode;
-  const isInset = uiMode === 'inset';
-
-  const isPinEnabled = useIsFeatureEnabled(FEATURE_LIST.PIN_TILE);
-  const showPinAction = isPinEnabled && (audioTrackID || (videoTrackID && isPrimaryVideoTrack)) && !isInset;
+  const showPinAction = audioTrackID || (videoTrackID && isPrimaryVideoTrack);
 
   const track = useHMSStore(selectTrackByID(videoTrackID));
   const hideSimulcastLayers = !track?.layerDefinitions?.length || track.degraded || !track.enabled;
@@ -53,9 +53,6 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c
     return null;
   }
 
-  if (isInset && isLocal) {
-    return null;
-  }
   const openNameChangeModal = () => setShowNameChangeModal(true);
 
   const props = {
@@ -114,13 +111,13 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c
                   <CrossIcon />
                 </Sheet.Close>
               </Flex>
-              <Box css={{ px: '$8', pb: '$10' }}>
+              <Box css={{ px: '$8', pb: '$8', maxHeight: '80vh', overflowY: 'auto' }}>
                 <TileMenuContent {...props} closeSheetOnClick={() => setOpen(false)} />
               </Box>
             </Sheet.Content>
           </Sheet.Root>
         ) : (
-          <StyledMenuTile.Content side="top" align="end">
+          <StyledMenuTile.Content side="top" align="end" css={{ maxHeight: '$80', overflowY: 'auto' }}>
             <TileMenuContent {...props} />
           </StyledMenuTile.Content>
         )}
@@ -130,4 +127,6 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c
   );
 };
 
+export { isSameTile } from './TileMenuContent';
+
 export default TileMenu;

package/src/Prebuilt/components/TileMenu/TileMenuContent.jsx

@@ -28,10 +28,9 @@ import { StyledMenuTile } from '../../../TileMenu';
 import { ToastManager } from '../Toast/ToastManager';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { useDropdownSelection } from '../hooks/useDropdownSelection';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
-import { APP_DATA, FEATURE_LIST, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants';
+import { APP_DATA, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants';
 
-const isSameTile = ({ trackId, videoTrackID, audioTrackID }) =>
+export const isSameTile = ({ trackId, videoTrackID, audioTrackID }) =>
   trackId && ((videoTrackID && videoTrackID === trackId) || (audioTrackID && audioTrackID === trackId));
 
 const spacingCSS = { '@md': { my: '$8', fontWeight: '$semiBold', fontSize: 'sm' } };
@@ -138,11 +137,18 @@ const SimulcastLayers = ({ trackId }) => {
                 textTransform: 'capitalize',
                 mr: '$2',
                 fontWeight: track.preferredLayer === layer.layer ? '$semiBold' : '$regular',
+                color: track.preferredLayer === layer.layer ? '$on_primary_high' : '$on_surface_high',
               }}
             >
               {layer.layer}
             </Text>
-            <Text as="span" variant="xs" css={{ color: '$on_surface_medium' }}>
+            <Text
+              as="span"
+              variant="xs"
+              css={{
+                color: track.preferredLayer === layer.layer ? '$on_primary_high' : '$on_surface_high',
+              }}
+            >
               {layer.resolution.width}x{layer.resolution.height}
             </Text>
           </StyledMenuTile.ItemButton>
@@ -204,27 +210,23 @@ export const TileMenuContent = props => {
     type: REMOTE_STOP_SCREENSHARE_TYPE,
   });
 
-  const isChangeNameEnabled = useIsFeatureEnabled(FEATURE_LIST.CHANGE_NAME);
-
   return isLocal ? (
     (showPinAction || canMinimise) && (
       <>
         {showPinAction && <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />}
         {showSpotlight && <SpotlightActions peerId={peerID} onSpotLightClick={() => closeSheetOnClick()} />}
         {canMinimise && <MinimiseInset />}
-        {isChangeNameEnabled ? (
-          <StyledMenuTile.ItemButton
-            onClick={() => {
-              openNameChangeModal();
-              closeSheetOnClick();
-            }}
-          >
-            <PencilIcon />
-            <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
-              Change Name
-            </Text>
-          </StyledMenuTile.ItemButton>
-        ) : null}
+        <StyledMenuTile.ItemButton
+          onClick={() => {
+            openNameChangeModal();
+            closeSheetOnClick();
+          }}
+        >
+          <PencilIcon />
+          <Text variant="sm" css={{ '@md': { fontWeight: '$semiBold' }, c: '$on_surface_high' }}>
+            Change Name
+          </Text>
+        </StyledMenuTile.ItemButton>
       </>
     )
   ) : (