@100mslive/roomkit-react 0.1.14 → 0.1.16

package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx

@@ -3,8 +3,40 @@ import { Flex } from '../../../';
 
 export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
   return (
-    <Flex data-testid="hms-video" css={{ size: '100%', position: 'relative' }} direction="column" {...props}>
-      <video style={{ flex: '1 1 0', margin: '0 auto', minHeight: '0' }} ref={videoRef} playsInline />
+    <Flex
+      data-testid="hms-video"
+      css={{
+        size: '100%',
+        position: 'relative',
+        '& video::cue': {
+          color: 'white',
+          // textShadow: '0px 0px 4px #000',
+          whiteSpace: 'pre-line',
+          fontSize: '$lg',
+          fontStyle: 'normal',
+          fontWeight: '$semiBold',
+          lineHeight: '$sm',
+          letterSpacing: '0.5px',
+        },
+        '& video::-webkit-media-text-track-display': {
+          padding: '0 $4',
+        },
+        '& video::-webkit-media-text-track-container': {
+          fontSize: '$space$10 !important',
+        },
+      }}
+      direction="column"
+      {...props}
+    >
+      <video
+        style={{
+          flex: '1 1 0',
+          margin: '0 auto',
+          minHeight: '0',
+        }}
+        ref={videoRef}
+        playsInline
+      />
       {children}
     </Flex>
   );

package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import {
+  HMSNotificationTypes,
+  HMSRoomState,
+  selectHasPeerHandRaised,
+  selectRoomState,
+  useHMSNotifications,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import { ToastBatcher } from '../Toast/ToastBatcher';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+
+export const HandRaisedNotifications = () => {
+  const notification = useHMSNotifications(HMSNotificationTypes.HAND_RAISE_CHANGED);
+  const roomState = useHMSStore(selectRoomState);
+  const vanillaStore = useHMSVanillaStore();
+  const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
+
+  useEffect(() => {
+    if (!notification?.data) {
+      return;
+    }
+    if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !on_stage_exp) {
+      return;
+    }
+    const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
+    if (hasPeerHandRaised) {
+      ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
+    }
+  }, [notification, on_stage_exp, roomState, vanillaStore]);
+
+  return null;
+};

package/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -4,7 +4,6 @@ import {
   HMSNotificationTypes,
   HMSRoleChangeRequest,
   HMSRoomState,
-  selectHasPeerHandRaised,
   selectLocalPeerID,
   selectPeerNameByID,
   selectRoomState,
@@ -13,7 +12,8 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-import { Button } from '../../..';
+import { GroupIcon } from '@100mslive/react-icons';
+import { Box, Button } from '../../..';
 import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { ToastBatcher } from '../Toast/ToastBatcher';
@@ -21,6 +21,7 @@ import { ToastBatcher } from '../Toast/ToastBatcher';
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
 import { ChatNotifications } from './ChatNotifications';
+import { HandRaisedNotifications } from './HandRaisedNotifications';
 import { InitErrorModal } from './InitErrorModal';
 import { PeerNotifications } from './PeerNotifications';
 import { PermissionErrorModal } from './PermissionErrorModal';
@@ -28,6 +29,7 @@ import { ReconnectNotifications } from './ReconnectNotifications';
 import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
 import { TrackNotifications } from './TrackNotifications';
 import { TrackUnmuteModal } from './TrackUnmuteModal';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { usePollViewToggle } from '../AppData/useSidepane';
 // @ts-ignore: No implicit Any
@@ -43,6 +45,7 @@ export function Notifications() {
   const roomState = useHMSStore(selectRoomState);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
+  const screenProps = useRoomLayoutConferencingScreen();
   const vanillaStore = useHMSVanillaStore();
   const togglePollView = usePollViewToggle();
 
@@ -53,23 +56,42 @@ export function Notifications() {
     });
   }, []);
 
+  /*
+  const leaderboardResultsShared = useCallback(
+    (stringifiedPollDetails: string) => {
+      const pollDetails = JSON.parse(stringifiedPollDetails);
+      if (pollDetails.startedBy !== localPeerID) {
+        const pollStartedBy = pollDetails.initiatorName;
+        ToastManager.addToast({
+          title: `${pollStartedBy} shared leaderboard for the quiz`,
+          action: (
+            <Button
+              onClick={() => togglePollView(pollDetails.id)}
+              variant="standard"
+              css={{
+                backgroundColor: '$surface_bright',
+                fontWeight: '$semiBold',
+                color: '$on_surface_high',
+                p: '$xs $md',
+              }}
+            >
+              View
+            </Button>
+          ),
+        });
+      }
+    },
+    [localPeerID, togglePollView],
+  );  */
+
   useCustomEvent({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
+  // useCustomEvent({ type: 'POLL_LEADERBOARD_SHARED', onEvent: leaderboardResultsShared });
 
   useEffect(() => {
     if (!notification || isNotificationDisabled) {
       return;
     }
     switch (notification.type) {
-      case HMSNotificationTypes.HAND_RAISE_CHANGED: {
-        if (roomState !== HMSRoomState.Connected || notification.data.isLocal) {
-          return;
-        }
-        const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
-        if (hasPeerHandRaised) {
-          ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
-        }
-        break;
-      }
       case HMSNotificationTypes.METADATA_UPDATED:
         if (roomState !== HMSRoomState.Connected) {
           return;
@@ -92,6 +114,16 @@ export function Notifications() {
             ToastManager.addToast({
               title: `Error: ${notification.data?.message}`,
             });
+          } else if (notification.data?.message === 'role limit reached') {
+            ToastManager.addToast({
+              title: 'The room is currently full, try joining later',
+              close: true,
+              icon: (
+                <Box css={{ color: '$alert_error_default' }}>
+                  <GroupIcon />
+                </Box>
+              ),
+            });
           } else {
             ToastManager.addToast({
               title:
@@ -146,7 +178,7 @@ export function Notifications() {
         break;
 
       case HMSNotificationTypes.POLL_STARTED:
-        if (notification.data.startedBy !== localPeerID) {
+        if (notification.data.startedBy !== localPeerID && screenProps.screenType !== 'hls_live_streaming') {
           const pollStartedBy = vanillaStore.getState(selectPeerNameByID(notification.data.startedBy)) || 'Participant';
           ToastManager.addToast({
             title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`,
@@ -161,7 +193,7 @@ export function Notifications() {
                   p: '$xs $md',
                 }}
               >
-                Vote
+                {notification.data.type === 'quiz' ? 'Answer' : 'Vote'}
               </Button>
             ),
           });
@@ -188,6 +220,7 @@ export function Notifications() {
       <PermissionErrorModal />
       <InitErrorModal />
       <ChatNotifications />
+      <HandRaisedNotifications />
     </>
   );
 }

package/src/Prebuilt/components/Notifications/PeerNotifications.tsx

@@ -3,9 +3,9 @@ import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk'
 // @ts-ignore: No implicit Any
 import { ToastBatcher } from '../Toast/ToastBatcher';
 // @ts-ignore: No implicit Any
-import { useSubscribedNotifications } from '../AppData/useUISettings';
+import { useSetSubscribedChatSelector, useSubscribedNotifications } from '../AppData/useUISettings';
 // @ts-ignore: No implicit Any
-import { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
+import { CHAT_SELECTOR, SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
 
 const notificationTypes = [
   HMSNotificationTypes.PEER_LIST,
@@ -17,6 +17,8 @@ export const PeerNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
   const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
+  const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
+
   useEffect(() => {
     if (!notification?.data) {
       return;
@@ -35,6 +37,9 @@ export const PeerNotifications = () => {
         }
         break;
       case HMSNotificationTypes.PEER_LEFT:
+        if (selectedPeer.id === notification.data.id) {
+          setPeerSelector({});
+        }
         if (!isPeerLeftSubscribed) {
           return;
         }

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

@@ -191,13 +191,7 @@ const PrevMenu = () => {
         </Text>
         <Flex direction="column" css={{ gap: '$10', mt: '$8' }}>
           {polls.map(poll => (
-            <InteractionCard
-              key={poll.id}
-              id={poll.id}
-              title={poll.title}
-              isLive={poll.state === 'started'}
-              isTimed={(poll.duration || 0) > 0}
-            />
+            <InteractionCard key={poll.id} id={poll.id} title={poll.title} isLive={poll.state === 'started'} />
           ))}
         </Flex>
       </Flex>
@@ -205,7 +199,7 @@ const PrevMenu = () => {
   ) : null;
 };
 
-const InteractionCard = ({ id, title, isLive, isTimed }) => {
+const InteractionCard = ({ id, title, isLive }) => {
   const { setPollState } = usePollViewState();
 
   const goToVote = id => {
@@ -221,7 +215,7 @@ const InteractionCard = ({ id, title, isLive, isTimed }) => {
         <Text variant="sub1" css={{ c: '$on_surface_high', fontWeight: '$semiBold' }}>
           {title}
         </Text>
-        <StatusIndicator isLive={isLive} shouldShowTimer={isLive && isTimed} />
+        <StatusIndicator isLive={isLive} />
       </Flex>
       <Flex css={{ w: '100%', gap: '$4' }} justify="end">
         <Button variant="primary" onClick={() => goToVote(id)}>

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

@@ -1,7 +1,7 @@
 // @ts-check
 import React, { useMemo, useState } from 'react';
 import { v4 as uuid } from 'uuid';
-import { selectPollByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { selectPollByID, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { AddCircleIcon } from '@100mslive/react-icons';
 import { Button, Flex, Text } from '../../../../';
 import { Container, ContentHeader } from '../../Streaming/Common';
@@ -14,6 +14,7 @@ import { POLL_VIEWS } from '../../../common/constants';
 export function CreateQuestions() {
   const [questions, setQuestions] = useState([{ draftID: uuid() }]);
   const actions = useHMSActions();
+  const { isHLSRunning } = useRecordingStreaming();
   const togglePollView = usePollViewToggle();
   const { pollInView: id, setPollView } = usePollViewState();
   const interaction = useHMSStore(selectPollByID(id));
@@ -31,11 +32,30 @@ export function CreateQuestions() {
         type: question.type,
         options: question.options,
         skippable: question.skippable,
+        weight: question.weight,
       }));
     await actions.interactivityCenter.addQuestionsToPoll(id, validQuestions);
     await actions.interactivityCenter.startPoll(id);
+    await sendTimedMetadata(id);
     setPollView(POLL_VIEWS.VOTE);
   };
+
+  const sendTimedMetadata = async poll_id => {
+    // send hls timedmetadata when it is running
+    if (poll_id && isHLSRunning) {
+      try {
+        await actions.sendHLSTimedMetadata([
+          {
+            payload: `poll:${poll_id}`,
+            duration: 100,
+          },
+        ]);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
   const headingTitle = interaction?.type
     ? interaction?.type?.[0]?.toUpperCase() + interaction?.type?.slice(1)
     : 'Polls and Quizzes';

package/src/Prebuilt/components/Polls/CreateQuestions/QuestionForm.jsx

@@ -17,6 +17,7 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
   const [open, setOpen] = useState(false);
   const [type, setType] = useState(question.type || QUESTION_TYPE.SINGLE_CHOICE);
   const [text, setText] = useState(question.text);
+  const [weight, setWeight] = useState(isQuiz ? 10 : 1);
   const [options, setOptions] = useState(
     question?.options || [
       { text: '', isCorrectAnswer: false },
@@ -28,6 +29,7 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
     text,
     type,
     options,
+    weight,
     isQuiz,
   });
 
@@ -182,12 +184,31 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
             </Flex>
           )}
           {isQuiz ? (
-            <Flex css={{ mt: '$md', gap: '$6' }}>
-              <Switch defaultChecked={skippable} onCheckedChange={checked => setSkippable(checked)} />
-              <Text variant="sm" css={{ color: '$on_surface_medium' }}>
-                Not required to answer
-              </Text>
-            </Flex>
+            <>
+              <Flex justify="between" align="center" css={{ mt: '$md', gap: '$6', w: '100%' }}>
+                <Text variant="sm" css={{ color: '$on_surface_medium' }}>
+                  Point Weightage
+                </Text>
+                <Input
+                  type="number"
+                  value={weight}
+                  min={1}
+                  max={999}
+                  onChange={e => setWeight(Math.min(e.target.value, 999))}
+                  css={{
+                    backgroundColor: '$surface_bright',
+                    border: '1px solid $border_bright',
+                    maxWidth: '$20',
+                  }}
+                />
+              </Flex>
+              <Flex justify="between" css={{ mt: '$md', gap: '$6', w: '100%' }}>
+                <Text variant="sm" css={{ color: '$on_surface_medium' }}>
+                  Allow to skip
+                </Text>
+                <Switch defaultChecked={skippable} onCheckedChange={checked => setSkippable(checked)} />
+              </Flex>
+            </>
           ) : null}
         </>
       ) : null}
@@ -222,6 +243,7 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
                 options,
                 skippable,
                 draftID: question.draftID,
+                weight,
               });
             }}
           >
@@ -235,7 +257,7 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
   );
 };
 
-export const isValidQuestion = ({ text, type, options, isQuiz = false }) => {
+export const isValidQuestion = ({ text, type, options, weight, isQuiz = false }) => {
   if (!isValidTextInput(text) || !type) {
     return false;
   }
@@ -251,5 +273,10 @@ export const isValidQuestion = ({ text, type, options, isQuiz = false }) => {
     return everyOptionHasText;
   }
 
+  // The minimum acceptable value of weight is 1
+  if (isQuiz && weight < 1) {
+    return false;
+  }
+
   return everyOptionHasText && hasCorrectAnswer;
 };

package/src/Prebuilt/components/Polls/CreateQuestions/SavedQuestion.jsx

@@ -15,8 +15,8 @@ export const SavedQuestion = ({ question, index, length, convertToDraft, removeQ
       <Text variant="body2" css={{ mt: '$4', mb: '$md' }}>
         {question.text}
       </Text>
-      {question.options.map(option => (
-        <Flex css={{ alignItems: 'center', my: '$xs' }}>
+      {question.options.map((option, index) => (
+        <Flex key={`${option.text}-${index}`} css={{ alignItems: 'center', my: '$xs' }}>
           <Text variant="body2" css={{ c: '$on_surface_medium' }}>
             {option.text}
           </Text>

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { PollsQuizMenu } from './CreatePollQuiz/PollsQuizMenu';
 // @ts-ignore: No implicit Any
 import { CreateQuestions } from './CreateQuestions/CreateQuestions';
+import { Leaderboard } from './Voting/Leaderboard';
 // @ts-ignore: No implicit Any
 import { Voting } from './Voting/Voting';
 // @ts-ignore: No implicit Any
@@ -22,6 +23,8 @@ export const Polls = () => {
     return <CreateQuestions />;
   } else if (view === POLL_VIEWS.VOTE) {
     return <Voting toggleVoting={togglePollView} id={pollID} />;
+  } else if (view === POLL_VIEWS.RESULTS) {
+    return <Leaderboard pollID={pollID} />;
   } else {
     return null;
   }

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

@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from 'react';
+import { HMSPollLeaderboardResponse, selectPollByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../../Layout';
+import { Loading } from '../../../../Loading';
+import { Text } from '../../../../Text';
+import { LeaderboardEntry } from './LeaderboardEntry';
+// @ts-ignore
+import { useSidepaneToggle } from '../../AppData/useSidepane';
+// @ts-ignore
+import { usePollViewState } from '../../AppData/useUISettings';
+// @ts-ignore
+import { StatusIndicator } from '../common/StatusIndicator';
+import { POLL_VIEWS } from '../../../common/constants';
+
+export const Leaderboard = ({ pollID }: { pollID: string }) => {
+  const hmsActions = useHMSActions();
+  const poll = useHMSStore(selectPollByID(pollID));
+  const [pollLeaderboard, setPollLeaderboard] = useState<HMSPollLeaderboardResponse | undefined>();
+  const { setPollView } = usePollViewState();
+  const toggleSidepane = useSidepaneToggle();
+
+  /*
+  const sharedLeaderboardRef = useRef(false);
+  const sharedLeaderboards = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SHARED_LEADERBOARDS));
+  const { sendEvent } = useCustomEvent({
+    type: HMSNotificationTypes.POLL_LEADERBOARD_SHARED,
+    onEvent: () => {
+      return;
+    },
+  });
+   */
+
+  useEffect(() => {
+    const fetchLeaderboardData = async () => {
+      if (poll) {
+        const leaderboardData = await hmsActions.interactivityCenter.fetchLeaderboard(poll, 0, 50);
+        setPollLeaderboard(leaderboardData);
+      }
+    };
+    fetchLeaderboardData();
+  }, [poll, hmsActions.interactivityCenter]);
+
+  if (!poll || !pollLeaderboard)
+    return (
+      <Flex align="center" justify="center" css={{ size: '100%' }}>
+        <Loading />
+      </Flex>
+    );
+  const maxPossibleScore = poll.questions?.reduce((total, question) => (total += question.weight || 0), 0) || 0;
+  const questionCount = poll.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' }}>
+          <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' }}>
+            {poll.title}
+          </Text>
+          <StatusIndicator isLive={false} />
+        </Flex>
+        <Flex
+          css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
+          onClick={toggleSidepane}
+        >
+          <CrossIcon />
+        </Flex>
+      </Flex>
+      <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
+        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', gap: '$4', overflowY: 'auto', flex: '1 1 0', mr: '-$6', pr: '$6' }}>
+        {pollLeaderboard?.entries &&
+          pollLeaderboard.entries.map(question => (
+            <LeaderboardEntry
+              key={question.position}
+              position={question.position}
+              score={question.score}
+              questionCount={questionCount}
+              correctResponses={question.correctResponses}
+              userName={question.peer.username || ''}
+              maxPossibleScore={maxPossibleScore}
+            />
+          ))}
+      </Box>
+
+      {/* {!sharedLeaderboardRef.current ? (
+        <Button
+          css={{ ml: 'auto', mt: '$8' }}
+          onClick={() => {
+            const currentlySharedLeaderboards = sharedLeaderboards || [];
+            hmsActions.sessionStore.set(SESSION_STORE_KEY.SHARED_LEADERBOARDS, [
+              ...currentlySharedLeaderboards,
+              pollID,
+            ]);
+            const pollDetails = { initiatorName: '', startedBy: poll.startedBy, id: pollID };
+            sendEvent();
+            sharedLeaderboardRef.current = true;
+          }}
+        >
+          Share Results
+        </Button>
+      ) : null} */}
+    </Flex>
+  );
+};

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { CheckCircleIcon, TrophyFilledIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../../Layout';
+import { Text } from '../../../../Text';
+
+const positionColorMap: Record<number, string> = { 1: '#D69516', 2: '#3E3E3E', 3: '#583B0F' };
+
+export const LeaderboardEntry = ({
+  position,
+  score,
+  questionCount,
+  correctResponses,
+  userName,
+  maxPossibleScore,
+}: {
+  position: number;
+  score: number;
+  questionCount: number;
+  correctResponses: number;
+  userName: string;
+  maxPossibleScore: number;
+}) => {
+  return (
+    <Flex align="center" justify="between">
+      <Flex align="center" css={{ gap: '$6' }}>
+        <Flex
+          align="center"
+          justify="center"
+          css={{
+            backgroundColor: positionColorMap[position] || '',
+            h: '$10',
+            w: '$10',
+            borderRadius: '$round',
+            color: position > 3 ? '$on_surface_low' : '#FFF',
+            fontSize: '$xs',
+            fontWeight: '$semiBold',
+          }}
+        >
+          {position}
+        </Flex>
+
+        <Box>
+          <Text variant="sm" css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>
+            {userName}
+          </Text>
+
+          <Text variant="sm">
+            {score}/{maxPossibleScore} points
+          </Text>
+        </Box>
+      </Flex>
+      <Flex align="center" css={{ gap: '$6', color: '$on_surface_medium' }}>
+        {position === 1 ? <TrophyFilledIcon /> : null}
+        <CheckCircleIcon height={16} width={16} />
+        {questionCount ? (
+          <Text variant="xs">
+            {correctResponses}/{questionCount}
+          </Text>
+        ) : null}
+      </Flex>
+    </Flex>
+  );
+};

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