@100mslive/roomkit-react 0.3.10-alpha.0 → 0.3.10-alpha.1

package/src/Prebuilt/components/Footer/ParticipantList.tsx

@@ -21,6 +21,7 @@ import {
   HandIcon,
   MicOffIcon,
   PeopleIcon,
+  PersonSettingsIcon,
   SearchIcon,
   VerticalMenuIcon,
 } from '@100mslive/react-icons';
@@ -29,10 +30,12 @@ import { Accordion, Box, Button, config as cssConfig, Dropdown, Flex, Input, Tex
 import IconButton from '../../IconButton';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
 import { RemoveParticipant } from '../RemoveParticipant';
+import { RoleChangeModal } from '../RoleChangeModal';
 import { RoleAccordion } from './RoleAccordion';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLayoutUpdate';
 import { usePeerOnStageActions } from '../hooks/usePeerOnStageActions';
 import { useParticipants } from '../../common/hooks';
 // @ts-ignore: No implicit Any
@@ -71,6 +74,8 @@ export const ParticipantList = ({
     });
   }
 
+  useSidepaneResetOnLayoutUpdate('participant_list', SIDE_PANE_OPTIONS.PARTICIPANTS);
+
   const onSearch = useCallback((value: string) => {
     setFilter(filterValue => {
       if (!filterValue) {
@@ -365,45 +370,59 @@ const ParticipantMoreActions = ({ peerId, role }: { peerId: string; role: string
     isInStage,
     shouldShowStageRoleChange,
   } = usePeerOnStageActions({ peerId, role });
+  const canChangeRole = !!useHMSStore(selectPermissions)?.changeRole;
+  const [openRoleChangeModal, setOpenRoleChangeModal] = useState(false);
+
   return (
-    <Dropdown.Root open={open} onOpenChange={value => setOpen(value)} modal={false}>
-      <Dropdown.Trigger
-        asChild
-        data-testid="participant_more_actions"
-        className="participant_item"
-        css={{
-          p: '$1',
-          r: '$0',
-          c: '$on_surface_high',
-          display: open ? 'flex' : 'none',
-          '&:hover': {
-            bg: '$surface_bright',
-          },
-          '@md': {
-            display: 'flex',
-          },
-        }}
-        tabIndex={0}
-      >
-        <Box css={{ my: 'auto' }}>
-          <VerticalMenuIcon />
-        </Box>
-      </Dropdown.Trigger>
-      <Dropdown.Portal>
-        <Dropdown.Content align="end" sideOffset={8} css={{ w: '$64', bg: '$surface_default' }}>
-          {shouldShowStageRoleChange ? (
-            <Dropdown.Item css={{ bg: '$surface_default' }} onClick={() => handleStageAction()}>
-              <ChangeRoleIcon />
-              <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold', c: '$on_surface_high' }}>
-                {isInStage ? remove_from_stage_label : bring_to_stage_label}
-              </Text>
-            </Dropdown.Item>
-          ) : null}
+    <>
+      <Dropdown.Root open={open} onOpenChange={value => setOpen(value)} modal={false}>
+        <Dropdown.Trigger
+          asChild
+          data-testid="participant_more_actions"
+          className="participant_item"
+          css={{
+            p: '$1',
+            r: '$0',
+            c: '$on_surface_high',
+            display: open ? 'flex' : 'none',
+            '&:hover': {
+              bg: '$surface_bright',
+            },
+            '@md': {
+              display: 'flex',
+            },
+          }}
+          tabIndex={0}
+        >
+          <Box css={{ my: 'auto' }}>
+            <VerticalMenuIcon />
+          </Box>
+        </Dropdown.Trigger>
+        <Dropdown.Portal>
+          <Dropdown.Content align="end" sideOffset={8} css={{ w: '$64', bg: '$surface_default' }}>
+            {shouldShowStageRoleChange ? (
+              <Dropdown.Item css={{ bg: '$surface_default' }} onClick={() => handleStageAction()}>
+                <ChangeRoleIcon />
+                <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold', c: '$on_surface_high' }}>
+                  {isInStage ? remove_from_stage_label : bring_to_stage_label}
+                </Text>
+              </Dropdown.Item>
+            ) : null}
 
-          <RemoveParticipant peerId={peerId} />
-        </Dropdown.Content>
-      </Dropdown.Portal>
-    </Dropdown.Root>
+            {canChangeRole ? (
+              <Dropdown.Item css={{ bg: '$surface_default' }} onClick={() => setOpenRoleChangeModal(true)}>
+                <PersonSettingsIcon />
+                <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold', c: '$on_surface_high' }}>
+                  Switch Role
+                </Text>
+              </Dropdown.Item>
+            ) : null}
+            <RemoveParticipant peerId={peerId} />
+          </Dropdown.Content>
+        </Dropdown.Portal>
+      </Dropdown.Root>
+      {openRoleChangeModal && <RoleChangeModal peerId={peerId} onOpenChange={setOpenRoleChangeModal} />}
+    </>
   );
 };
 

package/src/Prebuilt/components/RoleChangeModal.tsx

@@ -0,0 +1,187 @@
+import React, { useRef, useState } from 'react';
+import { useMedia } from 'react-use';
+import { HMSPeer, selectAvailableRoleNames, selectPeerByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@100mslive/react-icons';
+import { Button } from '../../Button';
+import { Dropdown } from '../../Dropdown';
+import { Box, Flex } from '../../Layout';
+import { Dialog } from '../../Modal';
+import { Sheet } from '../../Sheet';
+import { Text } from '../../Text';
+import { config as cssConfig } from '../../Theme';
+import { Tooltip } from '../../Tooltip';
+
+const HighlightTerm = ({ value }: { value: string | undefined }) => {
+  return value ? (
+    <Tooltip side="top" title={value}>
+      <Text
+        variant="body2"
+        css={{
+          color: '$on_surface_medium',
+          fontWeight: '$semiBold',
+        }}
+      >
+        '{value.slice(0, 100)}
+        {value.length > 100 ? '...' : ''}'
+      </Text>
+    </Tooltip>
+  ) : (
+    <></>
+  );
+};
+
+const RoleChangeContent = ({
+  peer,
+  onOpenChange,
+  isMobile = false,
+}: {
+  peer: HMSPeer;
+  onOpenChange: (open: boolean) => void;
+  isMobile?: boolean;
+}) => {
+  const roles = useHMSStore(selectAvailableRoleNames).filter(role => role !== peer?.roleName);
+  const [selectedRole, setRole] = useState(roles.filter(role => role !== peer?.roleName)?.[0] || peer?.roleName);
+  const hmsActions = useHMSActions();
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement | undefined>();
+
+  return (
+    <>
+      <Flex align="center" justify="between" css={{ w: '100%' }}>
+        <Text as="h6" variant="h6">
+          Switch Role
+        </Text>
+        {isMobile && <CrossIcon onClick={() => onOpenChange(false)} />}
+      </Flex>
+
+      <Box>
+        <Text
+          variant="body2"
+          css={{
+            mt: '$4',
+            mb: '$8',
+            c: '$on_surface_medium',
+            display: 'flex',
+            flexWrap: 'wrap',
+            columnGap: '4px',
+          }}
+        >
+          Switch the role of
+          <HighlightTerm value={peer.name} />
+          from <HighlightTerm value={peer.roleName} />
+        </Text>
+      </Box>
+      <Flex
+        align="center"
+        css={{
+          w: '100%',
+          mb: '$10',
+        }}
+      >
+        <Box
+          css={{
+            position: 'relative',
+            flex: '1 1 0',
+            minWidth: 0,
+          }}
+        >
+          <Dropdown.Root open={open} onOpenChange={setOpen} css={{ width: '100%' }}>
+            <Dropdown.Trigger
+              // @ts-ignore
+              ref={triggerRef}
+              data-testid="open_role_selection_dropdown"
+              asChild
+              css={{
+                border: '1px solid $border_bright',
+                bg: '$surface_default',
+                r: '$1',
+                p: '$6 $9',
+              }}
+            >
+              <Flex align="center" justify="between" css={{ width: '100%' }}>
+                <Text>{selectedRole}</Text>
+                {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+              </Flex>
+            </Dropdown.Trigger>
+
+            <Dropdown.Content align="start" sideOffset={8} css={{ zIndex: 1000, w: '100%' }}>
+              {roles.map(role => (
+                <Dropdown.Item
+                  data-testid={role}
+                  key={role}
+                  onSelect={() => setRole(role)}
+                  css={{ w: `${triggerRef.current?.clientWidth}px` }}
+                >
+                  {role}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </Box>
+      </Flex>
+      <Flex justify="center" align="center" css={{ width: '100%', gap: '$md' }}>
+        {!isMobile && (
+          <Button
+            variant="standard"
+            outlined
+            css={{ width: '100%' }}
+            onClick={() => onOpenChange(false)}
+            data-testid="cancel_button"
+          >
+            Cancel
+          </Button>
+        )}
+
+        <Button
+          data-testid="change_button"
+          variant="primary"
+          css={{ width: '100%' }}
+          onClick={async () => {
+            if (selectedRole) {
+              await hmsActions.changeRoleOfPeer(peer.id, selectedRole, true);
+              onOpenChange(false);
+            }
+          }}
+        >
+          Switch Role
+        </Button>
+      </Flex>
+    </>
+  );
+};
+
+export const RoleChangeModal = ({
+  peerId,
+  onOpenChange,
+}: {
+  peerId: string;
+  onOpenChange: (open: boolean) => void;
+}) => {
+  const peer = useHMSStore(selectPeerByID(peerId));
+  const isMobile = useMedia(cssConfig.media.md);
+
+  if (!peer) {
+    return null;
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet.Root open={true} onOpenChange={onOpenChange}>
+        <Sheet.Content css={{ p: '$12 $8', background: '$surface_dim' }}>
+          <RoleChangeContent peer={peer} onOpenChange={onOpenChange} isMobile />
+        </Sheet.Content>
+      </Sheet.Root>
+    );
+  }
+
+  return (
+    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
+          <RoleChangeContent peer={peer} onOpenChange={onOpenChange} />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};

package/src/Prebuilt/components/TileMenu/TileMenu.tsx

@@ -17,6 +17,7 @@ import { Text } from '../../../Text';
 import { config as cssConfig, useTheme } from '../../../Theme';
 import { StyledMenuTile } from '../../../TileMenu';
 import { ChangeNameModal } from '../MoreSettings/ChangeNameModal';
+import { RoleChangeModal } from '../RoleChangeModal';
 import { TileMenuContent } from './TileMenuContent';
 import { useDropdownList } from '../hooks/useDropdownList';
 import { getDragClassName } from './utils';
@@ -56,6 +57,7 @@ const TileMenu = ({
   const isMobile = useMedia(cssConfig.media.md);
   const peer = useHMSStore(selectPeerByID(peerID));
   const [showNameChangeModal, setShowNameChangeModal] = useState(false);
+  const [showRoleChangeModal, setShowRoleChangeModal] = useState(false);
   useDropdownList({ open, name: 'TileMenu' });
   const dragClassName = getDragClassName();
 
@@ -64,6 +66,7 @@ const TileMenu = ({
   }
 
   const openNameChangeModal = () => setShowNameChangeModal(true);
+  const openRoleChangeModal = () => setShowRoleChangeModal(true);
 
   const props = {
     isLocal,
@@ -76,6 +79,7 @@ const TileMenu = ({
     showPinAction,
     canMinimise,
     openNameChangeModal,
+    openRoleChangeModal,
   };
 
   return (
@@ -133,6 +137,7 @@ const TileMenu = ({
         )}
       </StyledMenuTile.Root>
       {showNameChangeModal && <ChangeNameModal onOpenChange={setShowNameChangeModal} />}
+      {showRoleChangeModal && <RoleChangeModal peerId={peerID} onOpenChange={setShowRoleChangeModal} />}
     </>
   );
 };

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

@@ -17,6 +17,7 @@ import {
   MicOffIcon,
   MicOnIcon,
   PencilIcon,
+  PersonSettingsIcon,
   PinIcon,
   RemoveUserIcon,
   ShareScreenIcon,
@@ -224,6 +225,9 @@ export const TileMenuContent = ({
   openNameChangeModal = () => {
     return;
   },
+  openRoleChangeModal = () => {
+    return;
+  },
 }: {
   videoTrackID: string;
   audioTrackID: string;
@@ -235,10 +239,13 @@ export const TileMenuContent = ({
   canMinimise?: boolean;
   closeSheetOnClick?: () => void;
   openNameChangeModal?: () => void;
+  openRoleChangeModal?: () => void;
 }) => {
   const actions = useHMSActions();
   const dragClassName = getDragClassName();
-  const removeOthers: boolean | undefined = useHMSStore(selectPermissions)?.removeOthers;
+  const permissions = useHMSStore(selectPermissions);
+  const canChangeRole = !!permissions?.changeRole;
+  const removeOthers = !!permissions?.removeOthers;
   const { userName } = useHMSPrebuiltContext();
 
   const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
@@ -308,6 +315,21 @@ export const TileMenuContent = ({
         </StyledMenuTile.ItemButton>
       ) : null}
 
+      {canChangeRole ? (
+        <StyledMenuTile.ItemButton
+          className={dragClassName}
+          css={spacingCSS}
+          onClick={() => {
+            openRoleChangeModal();
+            closeSheetOnClick();
+          }}
+          data-testid="change_role_btn"
+        >
+          <PersonSettingsIcon height={20} width={20} />
+          <span>Switch Role</span>
+        </StyledMenuTile.ItemButton>
+      ) : null}
+
       {audioTrackID ? (
         <StyledMenuTile.VolumeItem data-testid="participant_volume_slider" css={{ ...spacingCSS, mb: '$0' }}>
           <Flex align="center" gap={1}>

package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx

@@ -26,6 +26,7 @@ import { VBCollection } from './VBCollection';
 import { VBHandler } from './VBHandler';
 // @ts-ignore
 import { useSidepaneToggle } from '../AppData/useSidepane';
+import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLayoutUpdate';
 // @ts-ignore
 import { useSetAppDataByKey, useUISettings } from '../AppData/useUISettings';
 import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
@@ -113,6 +114,8 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
     return () => setLoadingEffects(false);
   }, [isVideoOn, setLoadingEffects, toggleVB]);
 
+  useSidepaneResetOnLayoutUpdate('virtual_background', SIDE_PANE_OPTIONS.VB);
+
   return (
     <Flex css={{ pr: '$6', size: '100%' }} direction="column">
       <Flex align="center" justify="between" css={{ w: '100%', background: '$surface_dim', pb: '$4' }}>

package/src/Prebuilt/layouts/SidePane.tsx

@@ -141,14 +141,6 @@ const SidePane = ({
     ? preview_elements?.virtual_background?.background_media
     : elements?.virtual_background?.background_media || [];
 
-  const resetSidePane = useSidepaneReset();
-
-  useEffect(() => {
-    return () => {
-      resetSidePane();
-    };
-  }, [resetSidePane]);
-
   const tileLayout = {
     hideParticipantNameOnTile: tileProps?.hide_participant_name_on_tile,
     roundedVideoTile: tileProps?.rounded_video_tile,
@@ -199,7 +191,15 @@ const SidePane = ({
       return null;
     });
 
-  if (!trackId && !SidepaneComponent) {
+  const resetSidePane = useSidepaneReset();
+
+  useEffect(() => {
+    return () => {
+      resetSidePane();
+    };
+  }, [resetSidePane]);
+
+  if (!SidepaneComponent && !trackId) {
     return null;
   }