@100mslive/roomkit-react 0.2.2-alpha.4 → 0.2.2-alpha.6

package/src/Prebuilt/components/Chat/ChatBody.tsx

@@ -189,7 +189,7 @@ const ChatMessage = React.memo(
       roles: message.recipientRoles,
       receiver: message.recipientPeer,
     });
-    const [openSheet, setOpenSheet] = useState(false);
+    const [openSheet, setOpenSheetBare] = useState(false);
     const showPinAction = !!elements?.chat?.allow_pinning_messages;
     const showReply = message.sender !== selectedPeer.id && message.sender !== localPeerId && isPrivateChatEnabled;
     useLayoutEffect(() => {
@@ -198,6 +198,11 @@ const ChatMessage = React.memo(
       }
     }, [index, message.id]);
 
+    const setOpenSheet = (value: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      e?.stopPropagation();
+      setOpenSheetBare(value);
+    };
+
     return (
       <Box
         css={{
@@ -228,9 +233,9 @@ const ChatMessage = React.memo(
             },
           }}
           data-testid="chat_msg"
-          onClick={() => {
+          onClick={e => {
             if (isMobile) {
-              setOpenSheet(true);
+              setOpenSheet(true, e);
             }
           }}
         >
@@ -321,8 +326,7 @@ const ChatMessage = React.memo(
               color: isOverlay ? '#FFF' : '$on_surface_high',
             }}
             onClick={e => {
-              e.stopPropagation();
-              setOpenSheet(true);
+              setOpenSheet(true, e);
             }}
           >
             <AnnotisedMessage message={message.message} />

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { CheckCircleIcon, ClockIcon, TrophyFilledIcon } from '@100mslive/react-icons';
 import { Box, Flex } from '../../../../Layout';
 import { Text } from '../../../../Text';
+import { getFormattedTime } from '../common/utils';
 
 const positionColorMap: Record<number, string> = { 1: '#D69516', 2: '#3E3E3E', 3: '#583B0F' };
 
@@ -23,7 +24,7 @@ export const LeaderboardEntry = ({
   duration: number;
 }) => {
   return (
-    <Flex align="center" justify="between" css={{ my: '$4' }}>
+    <Flex align="center" justify="between" css={{ my: '$8' }}>
       <Flex align="center" css={{ gap: '$6' }}>
         <Flex
           align="center"
@@ -66,7 +67,7 @@ export const LeaderboardEntry = ({
         {duration ? (
           <Flex align="center" css={{ gap: '$2', color: '$on_surface_medium' }}>
             <ClockIcon height={16} width={16} />
-            <Text variant="xs">{(duration / 1000).toFixed(3)}s</Text>
+            <Text variant="xs">{getFormattedTime(duration)}</Text>
           </Flex>
         ) : null}
       </Flex>

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

@@ -4,6 +4,7 @@ import { Box } from '../../../../Layout';
 import { Text } from '../../../../Text';
 import { StatisticBox } from './StatisticBox';
 import { useQuizSummary } from './useQuizSummary';
+import { getFormattedTime } from '../common/utils';
 
 export const PeerParticipationSummary = ({ quiz }: { quiz: HMSPoll }) => {
   const localPeerId = useHMSStore(selectLocalPeerID);
@@ -29,7 +30,7 @@ export const PeerParticipationSummary = ({ quiz }: { quiz: HMSPoll }) => {
           }/${summary.totalUsers})`,
         },
         // Time in ms
-        { title: 'Avg. Time Taken', value: `${(summary.avgTime / 1000).toFixed(3)}s` },
+        { title: 'Avg. Time Taken', value: getFormattedTime(summary.avgTime) },
         {
           title: 'Avg. Score',
           value: Number.isInteger(summary.avgScore) ? summary.avgScore : summary.avgScore.toFixed(2),
@@ -37,9 +38,9 @@ export const PeerParticipationSummary = ({ quiz }: { quiz: HMSPoll }) => {
       ]
     : [
         { title: 'Your rank', value: peerEntry?.position || '-' },
-        { title: 'Points', value: peerEntry?.score },
+        { title: 'Points', value: peerEntry?.score || 0 },
         // Time in ms
-        { title: 'Time Taken', value: `${((peerEntry?.duration || 0) / 1000).toFixed(3)}s` },
+        { title: 'Time Taken', value: getFormattedTime(peerEntry?.duration) },
         {
           title: 'Correct Answers',
           value: peerEntry?.totalResponses ? `${peerEntry?.correctResponses}/${peerEntry.totalResponses}` : '-',

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

@@ -73,11 +73,6 @@ export const QuestionCard = ({
       },
     ]);
     startTime.current = Date.now();
-
-    if (isQuiz && index !== totalQuestions) {
-      setSingleOptionAnswer(undefined);
-      setMultipleOptionAnswer(new Set());
-    }
   }, [
     isValidVote,
     actions.interactivityCenter,
@@ -118,8 +113,8 @@ export const QuestionCard = ({
             gap: '$4',
           }}
         >
-          {respondedToQuiz && isCorrectAnswer && pollEnded ? <CheckCircleIcon height={20} width={20} /> : null}
-          {respondedToQuiz && !isCorrectAnswer && pollEnded ? <CrossCircleIcon height={20} width={20} /> : null}
+          {respondedToQuiz && isCorrectAnswer && pollEnded ? <CheckCircleIcon height={16} width={16} /> : null}
+          {respondedToQuiz && !isCorrectAnswer && pollEnded ? <CrossCircleIcon height={16} width={16} /> : null}
           QUESTION {index} OF {totalQuestions}: {type.toUpperCase()}
         </Text>
       </Flex>
@@ -136,7 +131,9 @@ export const QuestionCard = ({
         </Box>
       </Flex>
 
-      <Box css={{ maxHeight: showOptions ? '$80' : '0', transition: 'max-height 0.3s ease', overflowY: 'hidden' }}>
+      <Box
+        css={{ maxHeight: showOptions ? '$80' : '0', transition: 'max-height 0.3s ease', overflowY: 'auto', mb: '$4' }}
+      >
         {type === QUESTION_TYPE.SINGLE_CHOICE ? (
           <SingleChoiceOptions
             key={index}
@@ -150,7 +147,6 @@ export const QuestionCard = ({
             showVoteCount={showVoteCount}
             localPeerResponse={localPeerResponse}
             isStopped={pollState === 'stopped'}
-            answer={singleOptionAnswer}
           />
         ) : null}
 
@@ -169,19 +165,18 @@ export const QuestionCard = ({
             isStopped={pollState === 'stopped'}
           />
         ) : null}
-
-        {isLive && (
-          <QuestionActions
-            isValidVote={isValidVote}
-            onVote={handleVote}
-            response={localPeerResponse}
-            isQuiz={isQuiz}
-            incrementIndex={() => {
-              setCurrentIndex(curr => Math.min(totalQuestions, curr + 1));
-            }}
-          />
-        )}
       </Box>
+      {isLive && (
+        <QuestionActions
+          isValidVote={isValidVote}
+          onVote={handleVote}
+          response={localPeerResponse}
+          isQuiz={isQuiz}
+          incrementIndex={() => {
+            setCurrentIndex(curr => Math.min(totalQuestions, curr + 1));
+          }}
+        />
+      )}
     </Box>
   );
 };

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

@@ -3,7 +3,7 @@ import { Box } from '../../../../Layout';
 import { Text } from '../../../../Text';
 
 export const StatisticBox = ({ title, value = 0 }: { title: string; value: string | number | undefined }) => {
-  if (!value) {
+  if (!value && !(typeof value === 'number')) {
     return <></>;
   }
   return (

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

@@ -1,33 +1,44 @@
 import React, { useState } from 'react';
-import { HMSPoll } from '@100mslive/react-sdk';
+import { HMSPoll, selectLocalPeerID, useHMSStore } from '@100mslive/react-sdk';
 // @ts-ignore
 import { QuestionCard } from './QuestionCard';
+// @ts-ignore
+import { getLastAttemptedIndex } from '../../../common/utils';
 
 export const TimedView = ({ poll }: { poll: HMSPoll }) => {
-  // Backend question index starts at 1
-  const [currentIndex, setCurrentIndex] = useState(1);
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const lastAttemptedIndex = getLastAttemptedIndex(poll.questions, localPeerId, '');
+  const [currentIndex, setCurrentIndex] = useState(lastAttemptedIndex);
   const activeQuestion = poll.questions?.find(question => question.index === currentIndex);
+  const attemptedAll = poll.questions?.length === lastAttemptedIndex - 1;
 
-  if (!activeQuestion) {
+  if (!activeQuestion || !poll.questions?.length) {
     return null;
   }
 
   return (
-    <QuestionCard
-      pollID={poll.id}
-      isQuiz={poll.type === 'quiz'}
-      startedBy={poll.startedBy}
-      pollState={poll.state}
-      index={activeQuestion.index}
-      text={activeQuestion.text}
-      type={activeQuestion.type}
-      result={activeQuestion?.result}
-      totalQuestions={poll.questions?.length || 0}
-      options={activeQuestion.options}
-      responses={activeQuestion.responses}
-      answer={activeQuestion.answer}
-      setCurrentIndex={setCurrentIndex}
-      rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
-    />
+    <>
+      {poll.questions.map(question => {
+        return attemptedAll || activeQuestion.index === question.index ? (
+          <QuestionCard
+            key={question.index}
+            pollID={poll.id}
+            isQuiz={poll.type === 'quiz'}
+            startedBy={poll.startedBy}
+            pollState={poll.state}
+            index={question.index}
+            text={question.text}
+            type={question.type}
+            result={question?.result}
+            totalQuestions={poll.questions?.length || 0}
+            options={question.options}
+            responses={question.responses}
+            answer={question.answer}
+            setCurrentIndex={setCurrentIndex}
+            rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
+          />
+        ) : null;
+      })}
+    </>
   );
 };

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

@@ -68,7 +68,7 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
         </Box>
       </Flex>
 
-      <Flex direction="column" css={{ p: '$8 $10', overflowY: 'auto' }}>
+      <Flex direction="column" css={{ p: '$8 $10', flex: '1 1 0', overflowY: 'auto' }}>
         {poll.state === 'started' ? (
           <Text css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>
             {pollCreatorName || 'Participant'} started a {poll.type}
@@ -76,22 +76,21 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
         ) : null}
 
         {showSingleView ? <TimedView poll={poll} /> : <StandardView poll={poll} />}
-
+      </Flex>
+      <Flex
+        css={{ w: '100%', justifyContent: 'end', alignItems: 'center', p: '$8', borderTop: '1px solid $border_bright' }}
+      >
         {poll.state === 'started' && canEndActivity && (
           <Button
             variant="danger"
-            css={{ fontWeight: '$semiBold', w: 'max-content', ml: 'auto', mt: '$8' }}
+            css={{ fontWeight: '$semiBold', w: 'max-content' }}
             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)}
-          >
+          <Button css={{ fontWeight: '$semiBold', w: 'max-content' }} onClick={() => setPollView(POLL_VIEWS.RESULTS)}>
             View Leaderboard
           </Button>
         ) : null}

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

@@ -52,7 +52,7 @@ export const MultipleChoiceOptions = ({
 
             {isStopped && correctOptionIndexes?.includes(option.index) ? (
               <Flex css={{ color: '$on_surface_high' }}>
-                <CheckCircleIcon />
+                <CheckCircleIcon height={20} width={20} />
               </Flex>
             ) : null}
 
@@ -83,7 +83,7 @@ export const MultipleChoiceOptionInputs = ({ isQuiz, options, selectAnswer, hand
     <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
       {options.map((option, index) => {
         return (
-          <Flex align="center" key={index} css={{ w: '100%', gap: '$5' }}>
+          <Flex align="center" key={index} css={{ w: '100%', gap: '$4' }}>
             {isQuiz && (
               <Checkbox.Root
                 onCheckedChange={checked => selectAnswer(checked, index)}

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

@@ -17,14 +17,13 @@ export const SingleChoiceOptions = ({
   isStopped,
   isQuiz,
   localPeerResponse,
-  answer,
 }) => {
   return (
-    <RadioGroup.Root value={answer || null} onValueChange={value => setAnswer(value)}>
+    <RadioGroup.Root value={localPeerResponse?.option} onValueChange={value => setAnswer(value)}>
       <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
         {options.map(option => {
           return (
-            <Flex align="start" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$5' }}>
+            <Flex align="start" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$4' }}>
               {!isStopped || !isQuiz ? (
                 <RadioGroup.Item
                   css={{
@@ -59,7 +58,7 @@ export const SingleChoiceOptions = ({
 
               {isStopped && correctOptionIndex === option.index && isQuiz ? (
                 <Flex css={{ color: '$on_surface_high' }}>
-                  <CheckCircleIcon />
+                  <CheckCircleIcon height={20} width={20} />
                 </Flex>
               ) : null}
 
@@ -95,7 +94,7 @@ export const SingleChoiceOptionInputs = ({ isQuiz, options, selectAnswer, handle
       <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
         {options.map((option, index) => {
           return (
-            <Flex align="center" key={`option-${index}`} css={{ w: '100%', gap: '$5' }}>
+            <Flex align="center" key={`option-${index}`} css={{ w: '100%', gap: '$4' }}>
               {isQuiz && (
                 <RadioGroup.Item
                   css={{

package/src/Prebuilt/components/Polls/common/utils.ts

@@ -0,0 +1,16 @@
+export const getFormattedTime = (milliseconds: number | undefined) => {
+  if (!milliseconds) return '-';
+
+  const totalSeconds = milliseconds / 1000;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+
+  let formattedSeconds = '';
+  if (Number.isInteger(seconds) || minutes) {
+    formattedSeconds = seconds.toFixed(0);
+  } else {
+    formattedSeconds = seconds.toFixed(1);
+  }
+
+  return `${minutes ? `${minutes}m ` : ''}${formattedSeconds}s`;
+};