@100mslive/roomkit-react 0.1.15 → 0.1.16

package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx

@@ -116,14 +116,22 @@ export const QuestionCard = ({
         borderRadius: '$1',
         p: '$md',
         mt: '$md',
-        border: respondedToQuiz ? `1px solid ${isCorrectAnswer ? '$alert_success' : '$alert_error_default'}` : 'none',
+        border:
+          respondedToQuiz && !isLive
+            ? `1px solid ${isCorrectAnswer ? '$alert_success' : '$alert_error_default'}`
+            : 'none',
       }}
     >
       <Flex align="center" justify="between">
         <Text
           variant="caption"
           css={{
-            color: respondedToQuiz ? (isCorrectAnswer ? '$alert_success' : '$alert_error_default') : '$on_surface_low',
+            color:
+              respondedToQuiz && !isLive
+                ? isCorrectAnswer
+                  ? '$alert_success'
+                  : '$alert_error_default'
+                : '$on_surface_low',
             fontWeight: '$semiBold',
             display: 'flex',
             alignItems: 'center',

package/src/Prebuilt/components/PreviousRoleInMetadata.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import { selectLocalPeerRoleName, useHMSVanillaStore } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import { useMyMetadata } from './hooks/useMetadata';
+
+export const PreviousRoleInMetadata = () => {
+  const vanillaStore = useHMSVanillaStore();
+  const { updateMetaData } = useMyMetadata();
+
+  useEffect(() => {
+    let previousRole = vanillaStore.getState(selectLocalPeerRoleName);
+    const unsubscribe = vanillaStore.subscribe(currentRole => {
+      if (previousRole !== currentRole) {
+        updateMetaData({ prevRole: previousRole });
+        previousRole = currentRole;
+      }
+    }, selectLocalPeerRoleName);
+    return unsubscribe;
+  }, [vanillaStore]); //eslint-disable-line
+  return null;
+};

package/src/Prebuilt/components/RemoveParticipant.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { HMSPeerID, selectLocalPeerID, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { PeopleRemoveIcon } from '@100mslive/react-icons';
+// @ts-ignore: No implicit Any
+import { ToastManager } from './Toast/ToastManager';
+import { Dropdown } from '../../Dropdown';
+import { Text } from '../../Text';
+
+export const RemoveParticipant = ({ peerId }: { peerId: HMSPeerID }) => {
+  const canRemoveOthers = useHMSStore(selectPermissions)?.removeOthers;
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const actions = useHMSActions();
+
+  if (peerId === localPeerId || !canRemoveOthers) {
+    return null;
+  }
+  return (
+    <Dropdown.Item
+      css={{ color: '$alert_error_default', bg: '$surface_default' }}
+      onClick={async () => {
+        try {
+          await actions.removePeer(peerId, '');
+        } catch (error) {
+          const ex = error as Error;
+          ToastManager.addToast({ title: ex.message, variant: 'error' });
+        }
+      }}
+    >
+      <PeopleRemoveIcon />
+      <Text variant="sm" css={{ ml: '$4', color: 'inherit', fontWeight: '$semiBold' }}>
+        Remove Participant
+      </Text>
+    </Dropdown.Item>
+  );
+};

package/src/Prebuilt/components/RoleChangeModal.jsx

@@ -170,7 +170,7 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => {
                 variant="primary"
                 css={{ width: '100%' }}
                 onClick={async () => {
-                  await hmsActions.changeRole(peerId, selectedRole, peer.isLocal ? true : !requestPermission);
+                  await hmsActions.changeRoleOfPeer(peerId, selectedRole, peer.isLocal ? true : !requestPermission);
                   onOpenChange(false);
                 }}
               >

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -6,7 +6,6 @@ import { CrossIcon } from '@100mslive/react-icons';
 // @ts-ignore: No implicit Any
 import { Chat } from './Chat/Chat';
 import { PaginatedParticipants } from './Footer/PaginatedParticipants';
-// @ts-ignore: No implicit Any
 import { ParticipantList } from './Footer/ParticipantList';
 import { Box, config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
 import { Tooltip } from '../../Tooltip';

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

@@ -287,7 +287,7 @@ export const TileMenuContent = ({
             toggleAudio();
             closeSheetOnClick();
           }}
-          data-testid={isVideoEnabled ? 'mute_audio_participant_btn' : 'unmute_audio_participant_btn'}
+          data-testid={isAudioEnabled ? 'mute_audio_participant_btn' : 'unmute_audio_participant_btn'}
         >
           {isAudioEnabled ? <MicOnIcon height={20} width={20} /> : <MicOffIcon height={20} width={20} />}
           <span>{isAudioEnabled ? 'Mute' : 'Request Unmute'}</span>

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -38,15 +38,27 @@ const HandRaiseAction = React.forwardRef(({ id = '', isSingleHandRaise = true },
     bring_to_stage_label,
     on_stage_role,
     off_stage_roles = [],
+    skip_preview_for_role_change = false,
   } = layout?.screens?.conferencing?.default?.elements.on_stage_exp || {};
 
-  const onClickHandler = useCallback(() => {
+  const onClickHandler = useCallback(async () => {
     if (isSingleHandRaise) {
-      hmsActions.changeRoleOfPeer(id, on_stage_role);
+      hmsActions.changeRoleOfPeer(id, on_stage_role, skip_preview_for_role_change);
+      if (skip_preview_for_role_change) {
+        await hmsActions.lowerRemotePeerHand(id);
+      }
     } else {
       !isParticipantsOpen && toggleSidepane();
     }
-  }, [hmsActions, id, isParticipantsOpen, isSingleHandRaise, on_stage_role, toggleSidepane]);
+  }, [
+    hmsActions,
+    id,
+    isParticipantsOpen,
+    isSingleHandRaise,
+    on_stage_role,
+    toggleSidepane,
+    skip_preview_for_role_change,
+  ]);
 
   // show nothing if handRaise is single and peer role is not hls
   if (isSingleHandRaise && (!peer || !off_stage_roles.includes(peer.roleName))) {

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

@@ -79,8 +79,8 @@ export const GridLayout = ({
   };
 
   useEffect(() => {
-    if (mainPage !== 0 || pageSize === 0) {
-      setSortedPeers(updatedPeers);
+    if (mainPage !== 0) {
+      peersSorter.stop();
       return;
     }
     peersSorter.setPeersAndTilesPerPage({
@@ -88,6 +88,9 @@ export const GridLayout = ({
       tilesPerPage: pageSize,
     });
     peersSorter.onUpdate(setSortedPeers);
+    return () => {
+      peersSorter.stop();
+    };
   }, [mainPage, peersSorter, updatedPeers, pageSize]);
 
   if (peerSharing) {

package/src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { usePrevious } from 'react-use';
+import { useScreenShare, useWhiteboard } from '@100mslive/react-sdk';
+
+/**
+ * close existing screenshare or whiteboard when the other is started
+ */
+export const useCloseScreenshareWhiteboard = () => {
+  const { amIScreenSharing, toggleScreenShare } = useScreenShare();
+  const { isOwner: isWhiteboardOwner, toggle: toggleWhiteboard } = useWhiteboard();
+  const prevScreenSharer = usePrevious(amIScreenSharing);
+  const prevWhiteboardOwner = usePrevious(isWhiteboardOwner);
+
+  // if both screenshare and whiteboard are open, close the one that was open earlier
+  useEffect(() => {
+    if (isWhiteboardOwner && amIScreenSharing) {
+      if (prevScreenSharer && !prevWhiteboardOwner) {
+        toggleScreenShare?.();
+      } else if (prevWhiteboardOwner && !prevScreenSharer) {
+        toggleWhiteboard?.();
+      }
+    }
+  }, [isWhiteboardOwner, amIScreenSharing, prevScreenSharer, prevWhiteboardOwner, toggleScreenShare, toggleWhiteboard]);
+};

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -4,7 +4,14 @@ import {
   DefaultConferencingScreen_Elements,
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
-import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import {
+  selectIsConnectedToRoom,
+  selectLocalPeerRoleName,
+  selectPeerScreenSharing,
+  selectWhiteboard,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 // @ts-ignore: No implicit Any
 import FullPageProgress from '../components/FullPageProgress';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
@@ -16,13 +23,14 @@ import { PDFView } from './PDFView';
 import SidePane from './SidePane';
 // @ts-ignore: No implicit Any
 import { WaitingView } from './WaitingView';
-// import { useWhiteboardMetadata } from '../plugins/whiteboard';
+import { WhiteboardView } from './WhiteboardView';
 import {
   usePDFConfig,
   useUrlToEmbed,
   useWaitingViewerRole,
   // @ts-ignore: No implicit Any
 } from '../components/AppData/useUISettings';
+import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
 // @ts-ignore: No implicit Any
 import { SESSION_STORE_KEY } from '../common/constants';
 
@@ -40,12 +48,15 @@ export const VideoStreamingSection = ({
   hideControls: boolean;
 }) => {
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  // const { whiteboardOwner: whiteboardShared } = useWhiteboardMetadata();
   const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const peerSharing = useHMSStore(selectPeerScreenSharing);
+  const isWhiteboardOpen = useHMSStore(selectWhiteboard)?.open;
+
   const hmsActions = useHMSActions();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFConfig();
+  useCloseScreenshareWhiteboard();
 
   useEffect(() => {
     if (!isConnected) {
@@ -75,6 +86,12 @@ export const VideoStreamingSection = ({
     ViewComponent = <PDFView />;
   } else if (urlToIframe) {
     ViewComponent = <EmbedView />;
+  } else if (peerSharing) {
+    // screen share should take preference over whiteboard
+    //@ts-ignore
+    ViewComponent = <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
+  } else if (isWhiteboardOpen) {
+    ViewComponent = <WhiteboardView />;
   } else {
     //@ts-ignore
     ViewComponent = <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;

package/src/Prebuilt/layouts/WhiteboardView.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useMemo } from 'react';
+import { selectPeers, selectWhiteboard, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
+import { SecondaryTiles } from '../components/SecondaryTiles';
+import { ProminenceLayout } from '../components/VideoLayouts/ProminenceLayout';
+import { Box } from '../../Layout';
+// @ts-ignore: No implicit Any
+import { useSetAppDataByKey } from '../components/AppData/useUISettings';
+import { APP_DATA } from '../common/constants';
+
+const EmbedComponent = () => {
+  const { iframeRef } = useWhiteboard();
+
+  return (
+    <Box
+      css={{
+        mx: '$8',
+        flex: '3 1 0',
+        '@lg': {
+          flex: '2 1 0',
+          display: 'flex',
+          alignItems: 'center',
+        },
+      }}
+    >
+      <iframe
+        title="Whiteboard View"
+        ref={iframeRef}
+        style={{
+          width: '100%',
+          height: '100%',
+          border: 0,
+          borderRadius: '0.75rem',
+        }}
+        allow="autoplay; clipboard-write;"
+        referrerPolicy="no-referrer"
+      />
+    </Box>
+  );
+};
+
+export const WhiteboardView = () => {
+  const peers = useHMSStore(selectPeers);
+  const whiteboard = useHMSStore(selectWhiteboard);
+  const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
+
+  const smallTilePeers = useMemo(() => {
+    const smallTilePeers = peers.filter(peer => peer.id !== whiteboard?.owner);
+    return smallTilePeers;
+  }, [peers, whiteboard?.owner]);
+
+  useEffect(() => {
+    setActiveScreenSharePeer(whiteboard?.owner || '');
+    return () => {
+      setActiveScreenSharePeer('');
+    };
+  }, [whiteboard?.owner, setActiveScreenSharePeer]);
+
+  return (
+    <ProminenceLayout.Root>
+      <ProminenceLayout.ProminentSection>
+        <EmbedComponent />
+      </ProminenceLayout.ProminentSection>
+      <SecondaryTiles peers={smallTilePeers} />
+    </ProminenceLayout.Root>
+  );
+};