@100mslive/roomkit-react 0.1.14 → 0.1.15

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.14",
+  "version": "0.1.15",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.23",
-    "@100mslive/hms-virtual-background": "1.11.23",
-    "@100mslive/react-icons": "0.8.23",
-    "@100mslive/react-sdk": "0.8.23",
+    "@100mslive/hls-player": "0.1.24",
+    "@100mslive/hms-virtual-background": "1.11.24",
+    "@100mslive/react-icons": "0.8.24",
+    "@100mslive/react-sdk": "0.8.24",
     "@100mslive/types-prebuilt": "0.12.4",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "aed9a8922bbebf1015858ab5b4896acff5647c0a"
+  "gitHead": "49795c5577e2d578fc0a8f372f3290dd0a52c9b2"
 }

package/src/Prebuilt/common/PeersSorter.ts

@@ -17,6 +17,7 @@ class PeersSorter {
   }
 
   setPeersAndTilesPerPage = ({ peers, tilesPerPage }: { peers: HMSPeer[]; tilesPerPage: number }) => {
+    this.speaker = undefined;
     this.tilesPerPage = tilesPerPage;
     const peerIds = new Set(peers.map(peer => peer.id));
     // remove existing peers which are no longer provided
@@ -46,6 +47,8 @@ class PeersSorter {
     this.updateListeners();
     this.listeners.clear();
     this.storeUnsubscribe?.();
+    this.storeUnsubscribe = undefined;
+    this.speaker = undefined;
   };
 
   moveSpeakerToFront = (speaker?: HMSPeer) => {
@@ -68,10 +71,16 @@ class PeersSorter {
   };
 
   onDominantSpeakerChange = (speaker: HMSPeer | null) => {
-    if (speaker && speaker.id !== this?.speaker?.id) {
-      this.speaker = speaker;
-      this.moveSpeakerToFront(speaker);
+    // no speaker or is current speaker do nothing
+    if (!speaker || speaker.id === this.speaker?.id) {
+      return;
+    }
+    // if the active speaker is not from the peers passed ignore
+    if (!this.peers.has(speaker.id)) {
+      return;
     }
+    this.speaker = speaker;
+    this.moveSpeakerToFront(speaker);
   };
 
   updateListeners = () => {

package/src/Prebuilt/common/constants.ts

@@ -111,6 +111,7 @@ export enum SESSION_STORE_KEY {
   CHAT_PEER_BLACKLIST = 'chatPeerBlacklist',
   CHAT_MESSAGE_BLACKLIST = 'chatMessageBlacklist',
   CHAT_STATE = 'chatState',
+  SHARED_LEADERBOARDS = 'sharedLeaderboards',
 }
 
 export enum INTERACTION_TYPE {

package/src/Prebuilt/common/utils.js

@@ -1,3 +1,4 @@
+import { isEqual } from 'lodash';
 import { QUESTION_TYPE } from './constants';
 
 // eslint-disable-next-line complexity
@@ -137,3 +138,36 @@ export const calculateAvatarAndAttribBoxSize = (calculatedWidth, calculatedHeigh
 };
 
 export const isMobileUserAgent = /Mobi|Android|iPhone/i.test(navigator.userAgent);
+
+export const getPeerResponses = (questions, peerid, userid) => {
+  return questions.map(question =>
+    question.responses?.filter(
+      response =>
+        ((response && response.peer?.peerid === peerid) || response.peer?.userid === userid) && !response.skipped,
+    ),
+  );
+};
+
+export const getPeerParticipationSummary = (poll, localPeerID, localCustomerUserID) => {
+  let correctResponses = 0;
+  let score = 0;
+  const questions = poll.questions || [];
+  const peerResponses = getPeerResponses(questions, localPeerID, localCustomerUserID);
+  let totalResponses = peerResponses.length || 0;
+
+  peerResponses.forEach(peerResponse => {
+    if (!peerResponse?.[0]) {
+      return;
+    }
+    const submission = [peerResponse[0].option] || peerResponse[0].options;
+    const answer =
+      [questions[peerResponse[0].questionIndex - 1].answer?.option] ||
+      questions[peerResponse[0].questionIndex - 1].answer?.options;
+    const isCorrect = isEqual(submission, answer);
+    if (isCorrect) {
+      score += questions[peerResponse[0].questionIndex - 1]?.weight || 0;
+      correctResponses++;
+    }
+  });
+  return { totalResponses, correctResponses, score };
+};

package/src/Prebuilt/components/Chat/Chat.jsx

@@ -128,9 +128,8 @@ const NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
         }}
         icon
         css={{
-          p: '$4',
-          pl: '$8',
-          pr: '$6',
+          p: '$3 $4',
+          pl: '$6',
           '& > svg': { ml: '$4' },
           borderRadius: '$round',
           position: 'relative',
@@ -141,7 +140,7 @@ const NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
         }}
       >
         New {unreadCount === 1 ? 'message' : 'messages'}
-        <ChevronDownIcon />
+        <ChevronDownIcon height={16} width={16} />
       </Button>
     </Flex>
   );

package/src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';
+import { IconButton, Tooltip } from '../../../';
+
+export function HLSCaptionSelector({ isEnabled, onClick }: { isEnabled: boolean; onClick: () => void }) {
+  return (
+    <Tooltip title="Subtitles/closed captions" side="top">
+      <IconButton css={{ p: '$2' }} onClick={() => onClick()}>
+        {isEnabled ? <ClosedCaptionIcon width="20" height="20px" /> : <OpenCaptionIcon width="20" height="20px" />}
+      </IconButton>
+    </Tooltip>
+  );
+}

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

@@ -28,6 +28,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 +44,7 @@ export function Notifications() {
   const roomState = useHMSStore(selectRoomState);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
+  const screenProps = useRoomLayoutConferencingScreen();
   const vanillaStore = useHMSVanillaStore();
   const togglePollView = usePollViewToggle();
 
@@ -53,7 +55,36 @@ 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) {
@@ -146,7 +177,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 +192,7 @@ export function Notifications() {
                   p: '$xs $md',
                 }}
               >
-                Vote
+                {notification.data.type === 'quiz' ? 'Answer' : 'Vote'}
               </Button>
             ),
           });

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