@100mslive/roomkit-react 0.1.14 → 0.1.16

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

@@ -1,7 +1,7 @@
 // @ts-check
 import React, { useCallback, useMemo, useState } from 'react';
 import { selectLocalPeer, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
+import { CheckCircleIcon, ChevronLeftIcon, ChevronRightIcon, CrossCircleIcon } from '@100mslive/react-icons';
 import { Box, Button, Flex, IconButton, Input, styled, Text } from '../../../../';
 import { checkCorrectAnswer } from '../../../common/utils';
 import { MultipleChoiceOptions } from '../common/MultipleChoiceOptions';
@@ -48,7 +48,8 @@ export const QuestionCard = ({
     !rolesThatCanViewResponses ||
     rolesThatCanViewResponses.length === 0 ||
     rolesThatCanViewResponses.includes(localPeerRoleName || '');
-  const showVoteCount = roleCanViewResponse && (localPeerResponse || (isLocalPeerCreator && pollState === 'stopped'));
+  const showVoteCount =
+    roleCanViewResponse && (localPeerResponse || (isLocalPeerCreator && pollState === 'stopped')) && !isQuiz;
 
   const isLive = pollState === 'started';
   const canRespond = isLive && !localPeerResponse;
@@ -72,6 +73,8 @@ export const QuestionCard = ({
 
   const stringAnswerExpected = [QUESTION_TYPE.LONG_ANSWER, QUESTION_TYPE.SHORT_ANSWER].includes(type);
 
+  const respondedToQuiz = isQuiz && localPeerResponse && !localPeerResponse.skipped;
+
   const isValidVote = useMemo(() => {
     if (stringAnswerExpected) {
       return textAnswer.length > 0;
@@ -114,13 +117,29 @@ export const QuestionCard = ({
         p: '$md',
         mt: '$md',
         border:
-          isQuiz && localPeerResponse && !localPeerResponse.skipped
+          respondedToQuiz && !isLive
             ? `1px solid ${isCorrectAnswer ? '$alert_success' : '$alert_error_default'}`
             : 'none',
       }}
     >
       <Flex align="center" justify="between">
-        <Text variant="caption" css={{ color: '$on_surface_low', fontWeight: '$semiBold' }}>
+        <Text
+          variant="caption"
+          css={{
+            color:
+              respondedToQuiz && !isLive
+                ? isCorrectAnswer
+                  ? '$alert_success'
+                  : '$alert_error_default'
+                : '$on_surface_low',
+            fontWeight: '$semiBold',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '$4',
+          }}
+        >
+          {respondedToQuiz && isCorrectAnswer ? <CheckCircleIcon height={20} width={20} /> : null}
+          {respondedToQuiz && !isCorrectAnswer ? <CrossCircleIcon height={20} width={20} /> : null}
           QUESTION {index} OF {totalQuestions}: {type.toUpperCase()}
         </Text>
 
@@ -196,6 +215,8 @@ export const QuestionCard = ({
           setAnswer={setSingleOptionAnswer}
           totalResponses={result?.totalResponses}
           showVoteCount={showVoteCount}
+          localPeerResponse={localPeerResponse}
+          isStopped={pollState === 'stopped'}
         />
       ) : null}
 
@@ -211,6 +232,8 @@ export const QuestionCard = ({
           setSelectedOptions={setMultipleOptionAnswer}
           totalResponses={result?.totalResponses}
           showVoteCount={showVoteCount}
+          localPeerResponse={localPeerResponse}
+          isStopped={pollState === 'stopped'}
         />
       ) : null}
 
@@ -221,14 +244,14 @@ export const QuestionCard = ({
           onSkip={handleSkip}
           onVote={handleVote}
           response={localPeerResponse}
-          stringAnswerExpected={stringAnswerExpected}
+          isQuiz={isQuiz}
         />
       )}
     </Box>
   );
 };
 
-const QuestionActions = ({ isValidVote, skippable, response, stringAnswerExpected, onVote, onSkip }) => {
+const QuestionActions = ({ isValidVote, skippable, response, isQuiz, onVote, onSkip }) => {
   return (
     <Flex align="center" justify="end" css={{ gap: '$4', w: '100%' }}>
       {skippable && !response ? (
@@ -239,11 +262,13 @@ const QuestionActions = ({ isValidVote, skippable, response, stringAnswerExpecte
 
       {response ? (
         <Text css={{ fontWeight: '$semiBold', color: '$on_surface_medium' }}>
-          {response.skipped ? 'Skipped' : stringAnswerExpected ? 'Submitted' : 'Voted'}
+          {response.skipped ? 'Skipped' : null}
+          {isQuiz && !response.skipped ? 'Answered' : null}
+          {!isQuiz && !response.skipped ? 'Voted' : null}
         </Text>
       ) : (
         <Button css={{ p: '$xs $10', fontWeight: '$semiBold' }} disabled={!isValidVote} onClick={onVote}>
-          {stringAnswerExpected ? 'Submit' : 'Vote'}
+          {isQuiz ? 'Answer' : 'Vote'}
         </Button>
       )}
     </Flex>

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

@@ -1,5 +1,6 @@
 // @ts-check
 import React from 'react';
+import { PeerParticipationSummary } from './PeerParticipationSummary';
 import { QuestionCard } from './QuestionCard';
 
 /**
@@ -11,12 +12,17 @@ export const StandardView = ({ poll }) => {
   if (!poll?.questions) {
     return null;
   }
+
+  const isQuiz = poll.type === 'quiz';
+  const isStopped = poll.state === 'stopped';
+
   return (
     <>
+      {isQuiz && isStopped ? <PeerParticipationSummary poll={poll} /> : null}
       {poll.questions?.map((question, index) => (
         <QuestionCard
           pollID={poll.id}
-          isQuiz={poll.type === 'quiz'}
+          isQuiz={isQuiz}
           startedBy={poll.startedBy}
           pollState={poll.state}
           key={`${question.text}-${index}`}

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

@@ -3,6 +3,7 @@ import React from 'react';
 import {
   selectLocalPeerID,
   selectPeerNameByID,
+  selectPermissions,
   selectPollByID,
   useHMSActions,
   useHMSStore,
@@ -23,11 +24,18 @@ export const Voting = ({ id, toggleVoting }) => {
   const pollCreatorName = useHMSStore(selectPeerNameByID(poll?.createdBy));
   const isLocalPeerCreator = useHMSStore(selectLocalPeerID) === poll?.createdBy;
   const { setPollView } = usePollViewState();
+  const permissions = useHMSStore(selectPermissions);
+
+  // const sharedLeaderboards = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SHARED_LEADERBOARDS));
 
   if (!poll) {
     return null;
   }
 
+  // const isLeaderboardShared = (sharedLeaderboards || []).includes(id);
+  const canViewLeaderboard =
+    poll.type === 'quiz' && poll.state === 'stopped' && !poll.anonymous && permissions?.pollWrite;
+
   // Sets view - linear or vertical, toggles timer indicator
   const isTimed = (poll.duration || 0) > 0;
   const isLive = poll.state === 'started';
@@ -52,8 +60,8 @@ export const Voting = ({ id, toggleVoting }) => {
         >
           <ChevronLeftIcon />
         </Flex>
-        <Text variant="h6">{poll?.type?.toUpperCase()}</Text>
-        <StatusIndicator isLive={isLive} shouldShowTimer={isLive && isTimed} />
+        <Text variant="h6">{poll.title}</Text>
+        <StatusIndicator isLive={isLive} />
         <Box
           css={{
             marginLeft: 'auto',
@@ -72,18 +80,8 @@ export const Voting = ({ id, toggleVoting }) => {
               {pollCreatorName || 'Participant'} started a {poll.type}
             </Text>
           </Box>
-          {poll.state === 'started' && isLocalPeerCreator && (
-            <Box css={{ flex: 'initial' }}>
-              <Button
-                variant="danger"
-                css={{ fontSize: '$sm', fontWeight: '$semiBold', p: '$3 $6' }}
-                onClick={() => actions.interactivityCenter.stopPoll(id)}
-              >
-                End {poll.type}
-              </Button>
-            </Box>
-          )}
         </Flex>
+
         {/* {poll.state === "stopped" && (
           <PollResultSummary
             pollResult={poll.result}
@@ -92,7 +90,27 @@ export const Voting = ({ id, toggleVoting }) => {
             isAdmin={isLocalPeerCreator}
           />
         )} */}
+
         {isTimed ? <TimedView poll={poll} /> : <StandardView poll={poll} />}
+
+        {poll.state === 'started' && isLocalPeerCreator && (
+          <Button
+            variant="danger"
+            css={{ fontWeight: '$semiBold', w: 'max-content', ml: 'auto', mt: '$8' }}
+            onClick={() => actions.interactivityCenter.stopPoll(id)}
+          >
+            End {poll.type}
+          </Button>
+        )}
+
+        {canViewLeaderboard ? (
+          <Button
+            css={{ fontWeight: '$semiBold', w: 'max-content', ml: 'auto', mt: '$8' }}
+            onClick={() => setPollView(POLL_VIEWS.RESULTS)}
+          >
+            View Leaderboard
+          </Button>
+        ) : null}
       </Flex>
     </Container>
   );

package/src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx

@@ -1,6 +1,6 @@
 // @ts-check
 import React from 'react';
-import { CheckIcon } from '@100mslive/react-icons';
+import { CheckCircleIcon, CheckIcon } from '@100mslive/react-icons';
 import { Checkbox, Flex, Label, Text } from '../../../../';
 import { OptionInputWithDelete } from './OptionInputWithDelete';
 import { VoteCount } from './VoteCount';
@@ -8,15 +8,17 @@ import { VoteProgress } from './VoteProgress';
 
 export const MultipleChoiceOptions = ({
   questionIndex,
-  isQuiz,
   options,
-  correctOptionIndexes,
   canRespond,
   response,
   totalResponses,
   selectedOptions,
   setSelectedOptions,
   showVoteCount,
+  isQuiz,
+  correctOptionIndexes,
+  localPeerResponse,
+  isStopped,
 }) => {
   const handleCheckedChange = (checked, index) => {
     const newSelected = new Set(selectedOptions);
@@ -31,35 +33,45 @@ export const MultipleChoiceOptions = ({
   return (
     <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
       {options.map(option => {
-        const isCorrectAnswer = isQuiz && correctOptionIndexes?.includes(option.index);
-
         return (
           <Flex align="center" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$9' }}>
-            <Checkbox.Root
-              id={`${questionIndex}-${option.index}`}
-              disabled={!canRespond}
-              checked={response?.options?.includes(option.index)}
-              onCheckedChange={checked => handleCheckedChange(checked, option.index)}
-              css={{
-                cursor: canRespond ? 'pointer' : 'not-allowed',
-              }}
-            >
-              <Checkbox.Indicator>
-                <CheckIcon width={16} height={16} />
-              </Checkbox.Indicator>
-            </Checkbox.Root>
+            {!isStopped || !isQuiz ? (
+              <Checkbox.Root
+                id={`${questionIndex}-${option.index}`}
+                disabled={!canRespond}
+                checked={response?.options?.includes(option.index)}
+                onCheckedChange={checked => handleCheckedChange(checked, option.index)}
+                css={{
+                  cursor: canRespond ? 'pointer' : 'not-allowed',
+                }}
+              >
+                <Checkbox.Indicator>
+                  <CheckIcon width={16} height={16} />
+                </Checkbox.Indicator>
+              </Checkbox.Root>
+            ) : null}
+
+            {isStopped && correctOptionIndexes.includes(option.index) ? (
+              <Flex css={{ color: '$on_surface_high' }}>
+                <CheckCircleIcon />
+              </Flex>
+            ) : null}
 
             <Flex direction="column" css={{ flexGrow: '1' }}>
               <Flex css={{ w: '100%' }}>
                 <Text css={{ display: 'flex', flexGrow: '1' }}>
                   <Label htmlFor={`${questionIndex}-${option.index}`}>{option.text}</Label>
                 </Text>
-                {showVoteCount && (
-                  <VoteCount isQuiz={isQuiz} isCorrectAnswer={isCorrectAnswer} voteCount={option.voteCount} />
-                )}
+                {showVoteCount && <VoteCount voteCount={option.voteCount} />}
               </Flex>
               {showVoteCount && <VoteProgress option={option} totalResponses={totalResponses} />}
             </Flex>
+
+            {isStopped && isQuiz && localPeerResponse?.options.includes(option.index) ? (
+              <Text variant="sm" css={{ color: '$on_surface_medium', maxWidth: 'max-content' }}>
+                Your Answer
+              </Text>
+            ) : null}
           </Flex>
         );
       })}

package/src/Prebuilt/components/Polls/common/SingleChoiceOptions.jsx

@@ -1,5 +1,6 @@
 // @ts-check
 import React from 'react';
+import { CheckCircleIcon } from '@100mslive/react-icons';
 import { Flex, Label, RadioGroup, Text } from '../../../../';
 import { OptionInputWithDelete } from './OptionInputWithDelete';
 import { VoteCount } from './VoteCount';
@@ -7,64 +8,75 @@ import { VoteProgress } from './VoteProgress';
 
 export const SingleChoiceOptions = ({
   questionIndex,
-  isQuiz,
   options,
   response,
   canRespond,
-  correctOptionIndex,
   setAnswer,
   totalResponses,
   showVoteCount,
+  correctOptionIndex,
+  isStopped,
+  isQuiz,
+  localPeerResponse,
 }) => {
   return (
     <RadioGroup.Root value={response?.option} onValueChange={value => setAnswer(value)}>
       <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
         {options.map(option => {
-          const isCorrectAnswer = isQuiz && option.index === correctOptionIndex;
-
           return (
-            <Flex align="center" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$5' }}>
-              <RadioGroup.Item
-                css={{
-                  background: 'none',
-                  h: '$9',
-                  w: '$9',
-                  border: '2px solid',
-                  borderColor: '$on_surface_high',
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  cursor: canRespond ? 'pointer' : 'not-allowed',
-                  '&[data-state="checked"]': {
-                    borderColor: '$primary_bright',
-                    borderWidth: '2px',
-                  },
-                }}
-                disabled={!canRespond}
-                value={option.index}
-                id={`${questionIndex}-${option.index}`}
-              >
-                <RadioGroup.Indicator
+            <Flex align="start" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$5' }}>
+              {!isStopped || !isQuiz ? (
+                <RadioGroup.Item
                   css={{
-                    h: '80%',
-                    w: '80%',
-                    background: '$primary_bright',
-                    borderRadius: '$round',
+                    background: 'none',
+                    h: '$9',
+                    w: '$9',
+                    border: '2px solid',
+                    borderColor: '$on_surface_high',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    cursor: canRespond ? 'pointer' : 'not-allowed',
+                    '&[data-state="checked"]': {
+                      borderColor: '$primary_bright',
+                      borderWidth: '2px',
+                    },
                   }}
-                />
-              </RadioGroup.Item>
+                  disabled={!canRespond}
+                  value={option.index}
+                  id={`${questionIndex}-${option.index}`}
+                >
+                  <RadioGroup.Indicator
+                    css={{
+                      h: '80%',
+                      w: '80%',
+                      background: '$primary_bright',
+                      borderRadius: '$round',
+                    }}
+                  />
+                </RadioGroup.Item>
+              ) : null}
+
+              {isStopped && correctOptionIndex === option.index && isQuiz ? (
+                <Flex css={{ color: '$on_surface_high' }}>
+                  <CheckCircleIcon />
+                </Flex>
+              ) : null}
 
               <Flex direction="column" css={{ flexGrow: '1' }}>
                 <Flex css={{ w: '100%' }}>
                   <Text css={{ display: 'flex', flexGrow: '1' }}>
                     <Label htmlFor={`${questionIndex}-${option.index}`}>{option.text}</Label>
                   </Text>
-                  {showVoteCount && (
-                    <VoteCount isQuiz={isQuiz} isCorrectAnswer={isCorrectAnswer} voteCount={option.voteCount} />
-                  )}
+                  {showVoteCount && <VoteCount voteCount={option.voteCount} />}
                 </Flex>
                 {showVoteCount && <VoteProgress option={option} totalResponses={totalResponses} />}
               </Flex>
+              {isStopped && isQuiz && localPeerResponse?.option === option.index ? (
+                <Text variant="sm" css={{ color: '$on_surface_medium', maxWidth: 'max-content' }}>
+                  Your Answer
+                </Text>
+              ) : null}
             </Flex>
           );
         })}

package/src/Prebuilt/components/Polls/common/StatusIndicator.jsx

@@ -2,14 +2,14 @@
 import React from 'react';
 import { Flex, Text } from '../../../../';
 
-export const StatusIndicator = ({ isLive, shouldShowTimer }) => {
+export const StatusIndicator = ({ isLive }) => {
   return (
     <Flex align="center">
       <Flex
         css={{
           backgroundColor: isLive ? '$alert_error_default' : '$secondary_default',
           p: '$2 $4',
-          borderRadius: shouldShowTimer ? '$0 0 0 $0' : '$0',
+          borderRadius: '$0',
         }}
       >
         <Text
@@ -22,26 +22,6 @@ export const StatusIndicator = ({ isLive, shouldShowTimer }) => {
           {isLive ? 'LIVE' : 'ENDED'}
         </Text>
       </Flex>
-
-      {shouldShowTimer ? (
-        <Flex
-          css={{
-            borderRadius: '0 $0 $0 0',
-            p: '$2 $4',
-            backgroundColor: '$background_default',
-          }}
-        >
-          <Text
-            variant="caption"
-            css={{
-              fontWeight: '$semiBold',
-              color: '$on_surface_high',
-            }}
-          >
-            0:32
-          </Text>
-        </Flex>
-      ) : null}
     </Flex>
   );
 };

package/src/Prebuilt/components/Polls/common/VoteCount.jsx

@@ -2,23 +2,9 @@
 import React from 'react';
 import { Flex, Text } from '../../../../';
 
-export const VoteCount = ({ isQuiz, voteCount, isCorrectAnswer }) => {
+export const VoteCount = ({ voteCount }) => {
   return (
     <Flex css={{ alignItems: 'center' }}>
-      {isQuiz && (
-        <Text
-          variant="xs"
-          css={{
-            p: '$2',
-            mr: '$2',
-            color: isCorrectAnswer ? '$alert_success' : '$alert_error_default',
-            borderRadius: '$1',
-            border: `1px solid ${isCorrectAnswer ? '$alert_success' : '$alert_error_default'}`,
-          }}
-        >
-          {isCorrectAnswer ? 'Correct' : 'Incorrect'}
-        </Text>
-      )}
       {voteCount ? (
         <Text variant="sm" css={{ color: '$on_surface_medium' }}>
           {voteCount}&nbsp;

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

@@ -10,7 +10,6 @@ import { LayoutProps } from './interface';
 // @ts-ignore: No implicit Any
 import { useUISettings } from '../AppData/useUISettings';
 import { usePagesWithTiles, useTileLayout } from '../hooks/useTileLayout';
-// @ts-ignore: No implicit Any
 import { UI_SETTINGS } from '../../common/constants';
 
 export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) {
@@ -23,10 +22,12 @@ export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, o
     maxTileCount,
   });
   // useMemo is needed to prevent recursion as new array is created for localPeer
-  const inputPeers = useMemo(
-    () => (pageList.length === 0 ? (localPeer ? [localPeer] : []) : peers),
-    [pageList.length, peers, localPeer],
-  );
+  const inputPeers = useMemo(() => {
+    if (pageList.length === 0) {
+      return localPeer ? [localPeer] : [];
+    }
+    return peers;
+  }, [pageList.length, peers, localPeer]);
   // Pass local peer to main grid if no other peer has tiles
   pageList = usePagesWithTiles({
     peers: inputPeers,