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

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/SecondaryTiles.tsx

@@ -42,6 +42,13 @@ export const SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, ha
   });
   const pageSize = pagesWithTiles[0]?.length || 0;
 
+  // Handles final peer leaving from the last page
+  useEffect(() => {
+    if (peers.length > 0 && !pagesWithTiles[page]?.length) {
+      setPage(Math.max(0, page - 1));
+    }
+  }, [peers, page, pagesWithTiles]);
+
   useEffect(() => {
     if (pageSize > 0) {
       onPageSize?.(pageSize);

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/VideoLayouts/ScreenshareLayout.tsx

@@ -55,8 +55,6 @@ export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge
     };
   }, [activeSharePeer?.id, isMobile, setActiveScreenSharePeer]);
 
-  console.log({ activeSharePeer, secondaryPeers });
-
   return (
     <ProminenceLayout.Root edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>
       <ProminenceLayout.ProminentSection>

package/src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
 import { useMedia } from 'react-use';
+import { Whiteboard } from '@100mslive/hms-whiteboard';
 import { selectPeerByCondition, selectWhiteboard, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
 import { Box } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
@@ -11,10 +12,12 @@ import { ProminenceLayout } from './ProminenceLayout';
 // @ts-ignore: No implicit Any
 import { useSetUiSettings } from '../AppData/useUISettings';
 import { UI_SETTINGS } from '../../common/constants';
+// eslint-disable-next-line import/no-unresolved
+import '@100mslive/hms-whiteboard/index.css';
 
 const WhiteboardEmbed = () => {
   const isMobile = useMedia(cssConfig.media.md);
-  const { iframeRef } = useWhiteboard(isMobile);
+  const { token, endpoint, zoomToContent } = useWhiteboard(isMobile);
 
   return (
     <Box
@@ -28,18 +31,9 @@ const WhiteboardEmbed = () => {
         },
       }}
     >
-      <iframe
-        title="Whiteboard View"
-        ref={iframeRef}
-        style={{
-          width: '100%',
-          height: '100%',
-          border: 0,
-          borderRadius: '0.75rem',
-        }}
-        allow="autoplay; clipboard-write;"
-        referrerPolicy="no-referrer"
-      />
+      <Box css={{ size: '100%' }}>
+        <Whiteboard token={token} endpoint={`https://${endpoint}`} zoomToContent={zoomToContent} />
+      </Box>
     </Box>
   );
 };

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/PDFView.jsx

@@ -11,10 +11,15 @@ import { usePDFConfig, useResetPDFConfig } from '../components/AppData/useUISett
 export const PDFView = () => {
   const pdfConfig = usePDFConfig();
   const resetConfig = useResetPDFConfig();
-
   // need to send resetConfig to clear configuration, if stop screenshare occurs.
   const { iframeRef, startPDFShare, isPDFShareInProgress } = usePDFShare(resetConfig);
 
+  useEffect(() => {
+    // no working in other useEffect, as return is called multiple time on state change
+    return () => {
+      resetConfig();
+    };
+  }, []);
   useEffect(() => {
     (async () => {
       try {

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;
   }
 

package/src/Prebuilt/plugins/FlyingEmoji.jsx

@@ -119,12 +119,10 @@ export function FlyingEmoji() {
                 emoji.wiggleType === 0 ? wiggleLeftRight() : wiggleRightLeft()
               } 1s ease-in-out infinite alternate`,
             }}
-            onAnimationEnd={() => {
-              setEmojis(emojis.filter(item => item.id !== emoji.id));
-            }}
+            onAnimationEnd={() => setEmojis(emojis.filter(item => item.id !== emoji.id))}
           >
             <Box>
-              <em-emoji id={emoji.emojiId} size="48px" set="apple"></em-emoji>
+              <em-emoji id={emoji.emojiId} size="48px" set="apple" />
             </Box>
             {emoji.senderName ? (
               <Box