@100mslive/roomkit-react 0.1.14 → 0.1.15

package/src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { HMSPoll, selectLocalPeer, useHMSStore } from '@100mslive/react-sdk';
+import { Box } from '../../../../Layout';
+import { Text } from '../../../../Text';
+// @ts-ignore
+import { getPeerParticipationSummary } from '../../../common/utils';
+
+export const PeerParticipationSummary = ({ poll }: { poll: HMSPoll }) => {
+  const localPeer = useHMSStore(selectLocalPeer);
+  const { totalResponses, correctResponses, score } = getPeerParticipationSummary(
+    poll,
+    localPeer?.id,
+    localPeer?.customerUserId,
+  );
+
+  const boxes = [
+    { title: 'Points', value: score },
+    { title: 'Correct Answers', value: `${correctResponses}/${totalResponses}` },
+  ];
+  return (
+    <Box>
+      <Text css={{ fontWeight: '$semiBold', my: '$8' }}>Participation Summary</Text>
+      <Box css={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '$4' }}>
+        {boxes.map(box => (
+          <Box key={box.title} css={{ p: '$8', background: '$surface_default', borderRadius: '$1' }}>
+            <Text
+              variant="tiny"
+              css={{ textTransform: 'uppercase', color: '$on_surface_medium', fontWeight: '$semiBold', my: '$4' }}
+            >
+              {box.title}
+            </Text>
+            <Text css={{ fontWeight: '$semiBold' }}>{box.value}</Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};

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;
@@ -113,14 +116,22 @@ export const QuestionCard = ({
         borderRadius: '$1',
         p: '$md',
         mt: '$md',
-        border:
-          isQuiz && localPeerResponse && !localPeerResponse.skipped
-            ? `1px solid ${isCorrectAnswer ? '$alert_success' : '$alert_error_default'}`
-            : 'none',
+        border: respondedToQuiz ? `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 ? (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 +207,8 @@ export const QuestionCard = ({
           setAnswer={setSingleOptionAnswer}
           totalResponses={result?.totalResponses}
           showVoteCount={showVoteCount}
+          localPeerResponse={localPeerResponse}
+          isStopped={pollState === 'stopped'}
         />
       ) : null}
 
@@ -211,6 +224,8 @@ export const QuestionCard = ({
           setSelectedOptions={setMultipleOptionAnswer}
           totalResponses={result?.totalResponses}
           showVoteCount={showVoteCount}
+          localPeerResponse={localPeerResponse}
+          isStopped={pollState === 'stopped'}
         />
       ) : null}
 
@@ -221,14 +236,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 +254,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/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,

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

@@ -1,13 +1,20 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
-import { selectPeers, selectPeerScreenSharing, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
+import {
+  selectLocalPeerRoleName,
+  selectPeers,
+  selectPeerScreenSharing,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
 import { EqualProminence } from './EqualProminence';
 import { RoleProminence } from './RoleProminence';
 import { ScreenshareLayout } from './ScreenshareLayout';
 // @ts-ignore: No implicit Any
-import { usePinnedTrack } from '../AppData/useUISettings';
+import { usePinnedTrack, useSetAppDataByKey } from '../AppData/useUISettings';
 import { VideoTileContext } from '../hooks/useVideoTileLayout';
 import PeersSorter from '../../common/PeersSorter';
+import { APP_DATA } from '../../common/constants';
 
 export type TileCustomisationProps = {
   hide_participant_name_on_tile: boolean;
@@ -34,6 +41,8 @@ export const GridLayout = ({
   const peerSharing = useHMSStore(selectPeerScreenSharing);
   const pinnedTrack = usePinnedTrack();
   const peers = useHMSStore(selectPeers);
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const [activeScreensharePeerId] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
   const isRoleProminence =
     (prominentRoles.length &&
       peers.some(
@@ -41,11 +50,20 @@ export const GridLayout = ({
       )) ||
     pinnedTrack;
   const updatedPeers = useMemo(() => {
-    if (isInsetEnabled && !isRoleProminence && !peerSharing) {
-      return peers.filter(peer => !peer.isLocal);
+    // remove screenshare peer from active speaker sorting
+    if (activeScreensharePeerId) {
+      return peers.filter(peer => peer.id !== activeScreensharePeerId);
+    }
+    if (isInsetEnabled) {
+      // if localPeer role is prominent role, it shows up in the center, so allow it in active speaker sorting
+      if (localPeerRole && prominentRoles.includes(localPeerRole)) {
+        return peers;
+      } else {
+        return peers.filter(peer => !peer.isLocal);
+      }
     }
     return peers;
-  }, [isInsetEnabled, isRoleProminence, peerSharing, peers]);
+  }, [isInsetEnabled, activeScreensharePeerId, localPeerRole, prominentRoles, peers]);
   const vanillaStore = useHMSVanillaStore();
   const [sortedPeers, setSortedPeers] = useState(updatedPeers);
   const peersSorter = useMemo(() => new PeersSorter(vanillaStore), [vanillaStore]);
@@ -61,7 +79,8 @@ export const GridLayout = ({
   };
 
   useEffect(() => {
-    if (mainPage !== 0) {
+    if (mainPage !== 0 || pageSize === 0) {
+      setSortedPeers(updatedPeers);
       return;
     }
     peersSorter.setPeersAndTilesPerPage({

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

@@ -10,7 +10,6 @@ import { LayoutProps } from './interface';
 import { ProminenceLayout } from './ProminenceLayout';
 // @ts-ignore: No implicit Any
 import { useSetAppDataByKey } from '../AppData/useUISettings';
-// @ts-ignore: No implicit Any
 import { APP_DATA } from '../../common/constants';
 
 export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => {