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

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -29,7 +29,7 @@ import {
   SettingsIcon,
   VirtualBackgroundIcon,
 } from '@100mslive/react-icons';
-import { Box, Loading, Tooltip } from '../../../..';
+import { Box, Loading, Text, Tooltip } from '../../../..';
 import { Sheet } from '../../../../Sheet';
 // @ts-ignore: No implicit any
 import IconButton from '../../../IconButton';
@@ -43,6 +43,7 @@ import SettingsModal from '../../Settings/SettingsModal';
 import { ToastManager } from '../../Toast/ToastManager';
 // @ts-ignore: No implicit any
 import { ActionTile } from '../ActionTile';
+import { CaptionModal } from '../CaptionModal';
 // @ts-ignore: No implicit any
 import { ChangeNameModal } from '../ChangeNameModal';
 // @ts-ignore: No implicit any
@@ -73,6 +74,7 @@ const MODALS = {
   BULK_ROLE_CHANGE: 'bulkRoleChange',
   MUTE_ALL: 'muteAll',
   EMBED_URL: 'embedUrl',
+  CAPTION: 'caption',
 };
 
 export const MwebOptions = ({
@@ -106,9 +108,9 @@ export const MwebOptions = ({
   const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
   const { startRecording, isRecordingLoading } = useRecordingHandler();
 
-  const isCaptionPresent = useHMSStore(selectIsTranscriptionEnabled);
+  const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
 
-  const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled();
+  const [isCaptionEnabled] = useSetIsCaptionEnabled();
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
   const updateState = (modalName: string, value: boolean) => {
@@ -193,21 +195,17 @@ export const MwebOptions = ({
                 <ActionTile.Title>{isHandRaised ? 'Lower' : 'Raise'} Hand</ActionTile.Title>
               </ActionTile.Root>
             ) : null}
-            {isCaptionPresent && screenType !== 'hls_live_streaming' ? (
-              <ActionTile.Root
-                onClick={() => {
-                  setIsCaptionEnabled(!isCaptionEnabled);
-                }}
-              >
-                {isCaptionEnabled ? (
-                  <ClosedCaptionIcon width="20" height="20px" />
-                ) : (
-                  <OpenCaptionIcon width="20" height="20px" />
-                )}
-                <ActionTile.Title>{isCaptionEnabled ? 'Hide Captions' : 'Captions Disabled'}</ActionTile.Title>
-              </ActionTile.Root>
-            ) : null}
-
+            <ActionTile.Root
+              onClick={() => {
+                setOpenOptionsSheet(false);
+                updateState(MODALS.CAPTION, true);
+              }}
+            >
+              {isTranscriptionEnabled && isCaptionEnabled ? <ClosedCaptionIcon /> : <OpenCaptionIcon />}
+              <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high', flexGrow: '1' }}>
+                Closed Caption
+              </Text>
+            </ActionTile.Root>
             {isLocalVideoEnabled && !!elements?.virtual_background ? (
               <ActionTile.Root
                 onClick={() => {
@@ -323,7 +321,9 @@ export const MwebOptions = ({
           openParentSheet={() => setOpenOptionsSheet(true)}
         />
       )}
-
+      {openModals.has(MODALS.CAPTION) && (
+        <CaptionModal onOpenChange={(value: boolean) => updateState(MODALS.CAPTION, value)} />
+      )}
       {showEmojiCard && (
         <Box
           ref={emojiCardRef}

package/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx

@@ -152,18 +152,6 @@ const AddMenu = () => {
             Hide Vote Count
           </Text>
         </Flex>
-        {/* <Flex align="center" css={{ mt: '$10' }}>
-          <Switch onCheckedChange={value => setAnonymous(value)} css={{ mr: '$6' }} />
-          <Text variant="body2" css={{ c: '$on_surface_medium' }}>
-            Make Results Anonymous
-          </Text>
-        </Flex> */}
-        {/* <Timer
-        timer={timer}
-        setTimer={setTimer}
-        showTimerDropDown={showTimerDropDown}
-        setShowTimerDropDown={setShowTimerDropDown}
-      /> */}
 
         <Button
           variant="primary"
@@ -198,8 +186,8 @@ const PrevMenu = () => {
   const sortedPolls = useMemo(
     () =>
       polls
-        ?.sort((a, b) => (b.createdAt?.getTime() || 0) - (a.createdAt?.getTime() || 0))
-        ?.sort((a, b) => (b.state === 'started' ? 1 : 0) - (a.state === 'started' ? 1 : 0)),
+        ?.sort((a, b) => (b?.createdAt?.getTime?.() || 0) - (a?.createdAt?.getTime?.() || 0))
+        ?.sort((a, b) => (b?.state === 'started' ? 1 : 0) - (a?.state === 'started' ? 1 : 0)),
     [polls],
   );
   const permissions = useHMSStore(selectPermissions);
@@ -208,7 +196,6 @@ const PrevMenu = () => {
     const updatePolls = async () => {
       await hmsActions.interactivityCenter.getPolls();
     };
-
     updatePolls();
   }, [hmsActions.interactivityCenter]);
 

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

@@ -4,6 +4,8 @@ import { ChevronLeftIcon, ChevronRightIcon, CrossIcon } from '@100mslive/react-i
 import { Box, Flex } from '../../../../Layout';
 import { Loading } from '../../../../Loading';
 import { Text } from '../../../../Text';
+// @ts-ignore
+import { Container } from '../../Streaming/Common';
 import { LeaderboardEntry } from './LeaderboardEntry';
 import { PeerParticipationSummary } from './PeerParticipationSummary';
 // @ts-ignore
@@ -32,80 +34,83 @@ export const LeaderboardSummary = ({ pollID }: { pollID: string }) => {
   const questionCount = quiz.questions?.length || 0;
 
   return (
-    <Flex direction="column" css={{ size: '100%' }}>
-      <Flex justify="between" align="center" css={{ pb: '$6', borderBottom: '1px solid $border_bright', mb: '$8' }}>
-        <Flex align="center" css={{ gap: '$4' }}>
+    <Container rounded>
+      <Flex direction="column" css={{ size: '100%', p: '$8' }}>
+        <Flex justify="between" align="center" css={{ pb: '$6', borderBottom: '1px solid $border_bright', mb: '$8' }}>
+          <Flex align="center" css={{ gap: '$4' }}>
+            <Flex
+              css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
+              onClick={() => setPollView(POLL_VIEWS.VOTE)}
+            >
+              <ChevronLeftIcon />
+            </Flex>
+            <Text variant="lg" css={{ fontWeight: '$semiBold' }}>
+              {quiz.title}
+            </Text>
+            <StatusIndicator status={quiz.state} />
+          </Flex>
           <Flex
             css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
-            onClick={() => setPollView(POLL_VIEWS.VOTE)}
+            onClick={toggleSidepane}
           >
-            <ChevronLeftIcon />
+            <CrossIcon />
           </Flex>
-          <Text variant="lg" css={{ fontWeight: '$semiBold' }}>
-            {quiz.title}
-          </Text>
-          <StatusIndicator status={quiz.state} />
         </Flex>
-        <Flex
-          css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
-          onClick={toggleSidepane}
-        >
-          <CrossIcon />
-        </Flex>
-      </Flex>
-
-      {!viewAllEntries ? <PeerParticipationSummary quiz={quiz} /> : null}
+        <Box css={{ overflowY: 'auto', mr: '-$4', pr: '$4' }}>
+          {!viewAllEntries ? <PeerParticipationSummary quiz={quiz} /> : null}
 
-      <Text variant="sm" css={{ fontWeight: '$semiBold', mt: '$4' }}>
-        Leaderboard
-      </Text>
-      <Text variant="xs" css={{ color: '$on_surface_medium' }}>
-        Based on score and time taken to cast the correct answer
-      </Text>
-      <Box
-        css={{
-          mt: '$8',
-          overflowY: 'auto',
-          flex: viewAllEntries ? '1 1 0' : 'unset',
-          mr: viewAllEntries ? '-$6' : 'unset',
-          px: viewAllEntries ? '0' : '$4',
-          pr: viewAllEntries ? '$6' : '$4',
-          backgroundColor: viewAllEntries ? '' : '$surface_default',
-          borderRadius: '$1',
-        }}
-      >
-        {quizLeaderboard?.entries &&
-          quizLeaderboard.entries
-            .slice(0, viewAllEntries ? undefined : 5)
-            .map(question => (
-              <LeaderboardEntry
-                key={question.position}
-                position={question.position}
-                score={question.score}
-                questionCount={questionCount}
-                correctResponses={question.correctResponses}
-                userName={question.peer.username || ''}
-                maxPossibleScore={maxPossibleScore}
-                duration={question.duration}
-              />
-            ))}
-        {quizLeaderboard?.entries?.length > 5 && !viewAllEntries ? (
-          <Flex
-            align="center"
-            justify="end"
+          <Text variant="sm" css={{ fontWeight: '$semiBold', mt: '$4' }}>
+            Leaderboard
+          </Text>
+          <Text variant="xs" css={{ color: '$on_surface_medium' }}>
+            Based on score and time taken to cast the correct answer
+          </Text>
+          <Box
             css={{
-              w: '100%',
-              borderTop: '1px solid $border_bright',
-              cursor: 'pointer',
-              color: '$on_surface_high',
-              p: '$6 $2',
+              mt: '$8',
+              overflowY: 'auto',
+              flex: viewAllEntries ? '1 1 0' : 'unset',
+              mr: viewAllEntries ? '-$6' : 'unset',
+              px: viewAllEntries ? '0' : '$4',
+              pr: viewAllEntries ? '$6' : '$4',
+              backgroundColor: viewAllEntries ? '' : '$surface_default',
+              borderRadius: '$1',
             }}
-            onClick={() => setViewAllEntries(true)}
           >
-            <Text variant="sm">View All</Text> <ChevronRightIcon />
-          </Flex>
-        ) : null}
-      </Box>
-    </Flex>
+            {quizLeaderboard?.entries &&
+              quizLeaderboard.entries
+                .slice(0, viewAllEntries ? undefined : 5)
+                .map(question => (
+                  <LeaderboardEntry
+                    key={question.position}
+                    position={question.position}
+                    score={question.score}
+                    questionCount={questionCount}
+                    correctResponses={question.correctResponses}
+                    userName={question.peer.username || ''}
+                    maxPossibleScore={maxPossibleScore}
+                    duration={question.duration}
+                  />
+                ))}
+            {quizLeaderboard?.entries?.length > 5 && !viewAllEntries ? (
+              <Flex
+                align="center"
+                justify="end"
+                css={{
+                  w: '100%',
+                  borderTop: '1px solid $border_bright',
+                  cursor: 'pointer',
+                  color: '$on_surface_high',
+                  p: '$6 $2',
+                }}
+                onClick={() => setViewAllEntries(true)}
+              >
+                <Text variant="sm">View All</Text> <ChevronRightIcon />
+              </Flex>
+            ) : null}
+          </Box>
+        </Box>
+      </Flex>
+    </Container>
   );
 };

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

@@ -1,5 +1,5 @@
 // @ts-check
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { match } from 'ts-pattern';
 import { selectLocalPeer, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { CheckCircleIcon, ChevronDownIcon, CrossCircleIcon } from '@100mslive/react-icons';
@@ -21,15 +21,12 @@ export const QuestionCard = ({
   text,
   options = [],
   answer,
-  setCurrentIndex,
-  responses = [],
+  localPeerResponse,
+  updateSavedResponses,
   rolesThatCanViewResponses,
 }) => {
   const actions = useHMSActions();
   const localPeer = useHMSStore(selectLocalPeer);
-  const localPeerResponse = responses?.find(
-    response => response.peer?.peerid === localPeer?.id || response.peer?.userid === localPeer?.customerUserId,
-  );
 
   const isLocalPeerCreator = localPeer?.id === startedBy;
   const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
@@ -37,20 +34,26 @@ export const QuestionCard = ({
     !rolesThatCanViewResponses ||
     rolesThatCanViewResponses.length === 0 ||
     rolesThatCanViewResponses.includes(localPeerRoleName || '');
+  const [localPeerChoice, setLocalPeerChoice] = useState(localPeerResponse);
+
+  useEffect(() => {
+    setLocalPeerChoice(localPeerResponse);
+  }, [localPeerResponse]);
+
   const showVoteCount =
-    roleCanViewResponse && (localPeerResponse || (isLocalPeerCreator && pollState === 'stopped')) && !isQuiz;
+    roleCanViewResponse && (localPeerChoice || (isLocalPeerCreator && pollState === 'stopped')) && !isQuiz;
 
   const isLive = pollState === 'started';
   const pollEnded = pollState === 'stopped';
-  const canRespond = isLive && !localPeerResponse;
+  const canRespond = isLive && !localPeerChoice;
   const startTime = useRef(Date.now());
-  const isCorrectAnswer = checkCorrectAnswer(answer, localPeerResponse, type);
+  const isCorrectAnswer = checkCorrectAnswer(answer, localPeerChoice, type);
 
   const [singleOptionAnswer, setSingleOptionAnswer] = useState();
   const [multipleOptionAnswer, setMultipleOptionAnswer] = useState(new Set());
   const [showOptions, setShowOptions] = useState(true);
 
-  const respondedToQuiz = isQuiz && localPeerResponse && !localPeerResponse.skipped;
+  const respondedToQuiz = isQuiz && localPeerChoice && !localPeerChoice.skipped;
 
   const isValidVote = useMemo(() => {
     if (type === QUESTION_TYPE.SINGLE_CHOICE) {
@@ -64,17 +67,28 @@ export const QuestionCard = ({
     if (!isValidVote) {
       return;
     }
-
-    await actions.interactivityCenter.addResponsesToPoll(pollID, [
-      {
-        questionIndex: index,
-        option: singleOptionAnswer,
-        options: Array.from(multipleOptionAnswer),
-        duration: Date.now() - startTime.current,
-      },
-    ]);
+    const submittedResponse = {
+      questionIndex: index,
+      option: singleOptionAnswer,
+      options: Array.from(multipleOptionAnswer),
+      duration: Date.now() - startTime.current,
+    };
+    await actions.interactivityCenter.addResponsesToPoll(pollID, [submittedResponse]);
+    updateSavedResponses(prev => {
+      const prevCopy = { ...prev };
+      prevCopy[index] = { option: singleOptionAnswer, options: Array.from(multipleOptionAnswer) };
+      return prevCopy;
+    });
     startTime.current = Date.now();
-  }, [isValidVote, actions.interactivityCenter, pollID, index, singleOptionAnswer, multipleOptionAnswer]);
+  }, [
+    isValidVote,
+    index,
+    singleOptionAnswer,
+    multipleOptionAnswer,
+    actions.interactivityCenter,
+    pollID,
+    updateSavedResponses,
+  ]);
 
   return (
     <Box
@@ -147,7 +161,7 @@ export const QuestionCard = ({
             setAnswer={setSingleOptionAnswer}
             totalResponses={result?.totalResponses}
             showVoteCount={showVoteCount}
-            localPeerResponse={localPeerResponse}
+            localPeerResponse={localPeerChoice}
             isStopped={pollState === 'stopped'}
           />
         ) : null}
@@ -163,27 +177,19 @@ export const QuestionCard = ({
             setSelectedOptions={setMultipleOptionAnswer}
             totalResponses={result?.totalResponses}
             showVoteCount={showVoteCount}
-            localPeerResponse={localPeerResponse}
+            localPeerResponse={localPeerChoice}
             isStopped={pollState === 'stopped'}
           />
         ) : null}
       </Box>
       {isLive && (
-        <QuestionActions
-          isValidVote={isValidVote}
-          onVote={handleVote}
-          response={localPeerResponse}
-          isQuiz={isQuiz}
-          incrementIndex={() => {
-            setCurrentIndex(curr => Math.min(totalQuestions, curr + 1));
-          }}
-        />
+        <QuestionActions isValidVote={isValidVote} onVote={handleVote} response={localPeerChoice} isQuiz={isQuiz} />
       )}
     </Box>
   );
 };
 
-const QuestionActions = ({ isValidVote, response, isQuiz, onVote, incrementIndex }) => {
+const QuestionActions = ({ isValidVote, response, isQuiz, onVote }) => {
   return (
     <Flex align="center" justify="end" css={{ gap: '$4', w: '100%' }}>
       {response ? (
@@ -193,14 +199,7 @@ const QuestionActions = ({ isValidVote, response, isQuiz, onVote, incrementIndex
           {!isQuiz && !response.skipped ? 'Voted' : null}
         </Text>
       ) : (
-        <Button
-          css={{ p: '$xs $10', fontWeight: '$semiBold' }}
-          disabled={!isValidVote}
-          onClick={() => {
-            onVote();
-            incrementIndex();
-          }}
-        >
+        <Button css={{ p: '$xs $10', fontWeight: '$semiBold' }} disabled={!isValidVote} onClick={onVote}>
           {isQuiz ? 'Answer' : 'Vote'}
         </Button>
       )}

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

@@ -1,10 +1,18 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { HMSPoll } from '@100mslive/react-sdk';
 import { PeerParticipationSummary } from './PeerParticipationSummary';
 // @ts-ignore
 import { QuestionCard } from './QuestionCard';
 
-export const StandardView = ({ poll }: { poll: HMSPoll }) => {
+export const StandardView = ({
+  poll,
+  localPeerResponses,
+  updateSavedResponses,
+}: {
+  poll: HMSPoll;
+  localPeerResponses: Record<number, number | number[] | undefined>;
+  updateSavedResponses: Dispatch<SetStateAction<Record<any, any>>>;
+}) => {
   if (!poll?.questions) {
     return null;
   }
@@ -28,11 +36,9 @@ export const StandardView = ({ poll }: { poll: HMSPoll }) => {
           result={question.result}
           totalQuestions={poll.questions?.length || 0}
           options={question.options}
-          responses={question.responses}
+          localPeerResponse={localPeerResponses?.[question.index]}
           answer={question.answer}
-          setCurrentIndex={() => {
-            return;
-          }}
+          updateSavedResponses={updateSavedResponses}
           rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
         />
       ))}

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

@@ -1,16 +1,27 @@
-import React, { useState } from 'react';
-import { HMSPoll, selectLocalPeerID, useHMSStore } from '@100mslive/react-sdk';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { HMSPoll } from '@100mslive/react-sdk';
 // @ts-ignore
 import { QuestionCard } from './QuestionCard';
 // @ts-ignore
-import { getLastAttemptedIndex } from '../../../common/utils';
+import { getIndexToShow } from '../../../common/utils';
 
-export const TimedView = ({ poll }: { poll: HMSPoll }) => {
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const lastAttemptedIndex = getLastAttemptedIndex(poll.questions, localPeerId, '');
-  const [currentIndex, setCurrentIndex] = useState(lastAttemptedIndex);
+export const TimedView = ({
+  poll,
+  localPeerResponses,
+  updateSavedResponses,
+}: {
+  poll: HMSPoll;
+  localPeerResponses?: Record<number, number | number[] | undefined>;
+  updateSavedResponses: Dispatch<SetStateAction<Record<any, any>>>;
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(getIndexToShow(localPeerResponses));
   const activeQuestion = poll.questions?.find(question => question.index === currentIndex);
-  const attemptedAll = poll.questions?.length === lastAttemptedIndex - 1;
+  const attemptedAll = (poll.questions?.length || 0) < currentIndex;
+
+  // Handles increments so only one question is shown at a time in quiz
+  useEffect(() => {
+    setCurrentIndex(getIndexToShow(localPeerResponses));
+  }, [localPeerResponses]);
 
   if ((!activeQuestion && !attemptedAll) || !poll.questions?.length) {
     return null;
@@ -32,10 +43,10 @@ export const TimedView = ({ poll }: { poll: HMSPoll }) => {
             result={question?.result}
             totalQuestions={poll.questions?.length || 0}
             options={question.options}
-            responses={question.responses}
+            localPeerResponse={localPeerResponses?.[question.index]}
             answer={question.answer}
-            setCurrentIndex={setCurrentIndex}
             rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
+            updateSavedResponses={updateSavedResponses}
           />
         ) : null;
       })}

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

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
+  selectLocalPeerID,
   selectPeerNameByID,
   selectPermissions,
   selectPollByID,
@@ -14,6 +15,8 @@ import { StandardView } from './StandardVoting';
 import { TimedView } from './TimedVoting';
 // @ts-ignore
 import { usePollViewState } from '../../AppData/useUISettings';
+// @ts-ignore
+import { getPeerResponses } from '../../../common/utils';
 import { StatusIndicator } from '../common/StatusIndicator';
 import { POLL_VIEWS } from '../../../common/constants';
 
@@ -26,6 +29,41 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
   const { setPollView } = usePollViewState();
   // Sets view - linear or vertical, toggles timer indicator
   const showSingleView = poll?.type === 'quiz' && poll.state === 'started';
+  const fetchedInitialResponses = useRef(false);
+  const [savedResponses, setSavedResponses] = useState<Record<any, any>>({});
+  const localPeerId = useHMSStore(selectLocalPeerID);
+
+  // To reset whenever a different poll is opened
+  useEffect(() => {
+    fetchedInitialResponses.current = false;
+    setSavedResponses({});
+  }, [id, setSavedResponses]);
+
+  useEffect(() => {
+    const getResponses = async () => {
+      if (poll && actions.interactivityCenter && !fetchedInitialResponses.current) {
+        await actions.interactivityCenter.getPollResponses(poll, true);
+        fetchedInitialResponses.current = true;
+      }
+    };
+    getResponses();
+  }, [poll, actions.interactivityCenter]);
+
+  useEffect(() => {
+    if (poll?.questions) {
+      const localPeerResponses = getPeerResponses(poll.questions, localPeerId);
+      // @ts-ignore
+      localPeerResponses?.forEach(response => {
+        if (response) {
+          setSavedResponses(prev => {
+            const prevCopy = { ...prev };
+            prevCopy[response[0]?.questionIndex] = { option: response[0]?.option, options: response[0]?.options };
+            return prevCopy;
+          });
+        }
+      });
+    }
+  }, [localPeerId, poll?.questions, id]);
 
   if (!poll) {
     return null;
@@ -74,7 +112,11 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
           </Text>
         ) : null}
 
-        {showSingleView ? <TimedView poll={poll} /> : <StandardView poll={poll} />}
+        {showSingleView ? (
+          <TimedView poll={poll} localPeerResponses={savedResponses} updateSavedResponses={setSavedResponses} />
+        ) : (
+          <StandardView poll={poll} localPeerResponses={savedResponses} updateSavedResponses={setSavedResponses} />
+        )}
       </Flex>
       <Flex
         css={{ w: '100%', justifyContent: 'end', alignItems: 'center', p: '$8', borderTop: '1px solid $border_bright' }}

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

@@ -1,8 +1,9 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { selectLocalPeer, useHMSStore } from '@100mslive/react-sdk';
+import { PeopleAddIcon } from '@100mslive/react-icons';
 import { Flex } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
+import { WaitingView } from '../../layouts/WaitingView';
 import { InsetTile } from '../InsetTile';
 import { Pagination } from '../Pagination';
 import { Grid } from './Grid';
@@ -13,26 +14,14 @@ import { usePagesWithTiles, useTileLayout } from '../hooks/useTileLayout';
 import { UI_SETTINGS } from '../../common/constants';
 
 export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) {
-  const localPeer = useHMSStore(selectLocalPeer);
   const isMobile = useMedia(cssConfig.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
-  let pageList = usePagesWithTiles({
+  const pageList = usePagesWithTiles({
     peers,
     maxTileCount,
   });
-  // useMemo is needed to prevent recursion as new array is created for 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,
-    maxTileCount,
-  });
+
   const { ref, pagesWithTiles } = useTileLayout({
     pageList,
     maxTileCount,
@@ -60,7 +49,14 @@ export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, o
           numPages={pagesWithTiles.length}
         />
       )}
-      {isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== localPeer?.id && <InsetTile />}
+      {pageList.length === 0 ? (
+        <WaitingView
+          title="You're the first to join"
+          subtitle="Sit back and relax till others join"
+          icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
+        />
+      ) : null}
+      {isInsetEnabled && <InsetTile />}
     </Flex>
   );
 }