@100mslive/roomkit-react 0.2.2-alpha.5 → 0.2.2

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>
@@ -152,7 +147,6 @@ export const QuestionCard = ({
             showVoteCount={showVoteCount}
             localPeerResponse={localPeerResponse}
             isStopped={pollState === 'stopped'}
-            answer={singleOptionAnswer}
           />
         ) : null}
 

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={{