@100mslive/roomkit-react 0.2.1-alpha.0 → 0.2.2-alpha.2

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

@@ -1,51 +1,27 @@
-import React, { useEffect, useState } from 'react';
-import {
-  HMSQuizLeaderboardResponse,
-  HMSQuizLeaderboardSummary,
-  selectPollByID,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
+import React, { useState } from 'react';
+import { selectPollByID, useHMSStore } from '@100mslive/react-sdk';
 import { ChevronLeftIcon, ChevronRightIcon, CrossIcon } from '@100mslive/react-icons';
 import { Box, Flex } from '../../../../Layout';
 import { Loading } from '../../../../Loading';
 import { Text } from '../../../../Text';
 import { LeaderboardEntry } from './LeaderboardEntry';
-import { StatisticBox } from './StatisticBox';
+import { PeerParticipationSummary } from './PeerParticipationSummary';
 // @ts-ignore
 import { useSidepaneToggle } from '../../AppData/useSidepane';
 // @ts-ignore
 import { usePollViewState } from '../../AppData/useUISettings';
+import { useQuizSummary } from './useQuizSummary';
 // @ts-ignore
 import { StatusIndicator } from '../common/StatusIndicator';
 import { POLL_VIEWS } from '../../../common/constants';
 
 export const LeaderboardSummary = ({ pollID }: { pollID: string }) => {
-  const hmsActions = useHMSActions();
   const quiz = useHMSStore(selectPollByID(pollID));
-  const [quizLeaderboard, setQuizLeaderboard] = useState<HMSQuizLeaderboardResponse | undefined>();
+  const { quizLeaderboard, maxPossibleScore } = useQuizSummary(pollID);
   const [viewAllEntries, setViewAllEntries] = useState(false);
-  const summary: HMSQuizLeaderboardSummary = quizLeaderboard?.summary || {
-    totalUsers: 0,
-    votedUsers: 0,
-    avgScore: 0,
-    avgTime: 0,
-    correctAnswers: 0,
-  };
-
   const { setPollView } = usePollViewState();
   const toggleSidepane = useSidepaneToggle();
 
-  useEffect(() => {
-    const fetchLeaderboardData = async () => {
-      if (!quizLeaderboard && quiz) {
-        const leaderboardData = await hmsActions.interactivityCenter.fetchLeaderboard(quiz.id, 0, 50);
-        setQuizLeaderboard(leaderboardData);
-      }
-    };
-    fetchLeaderboardData();
-  }, [quiz, hmsActions.interactivityCenter, quizLeaderboard]);
-
   if (!quiz || !quizLeaderboard)
     return (
       <Flex align="center" justify="center" css={{ size: '100%' }}>
@@ -53,14 +29,6 @@ export const LeaderboardSummary = ({ pollID }: { pollID: string }) => {
       </Flex>
     );
 
-  const defaultCalculations = { maxPossibleScore: 0, totalResponses: 0 };
-  const { maxPossibleScore, totalResponses } =
-    quiz.questions?.reduce((accumulator, question) => {
-      accumulator.maxPossibleScore += question.weight || 0;
-      accumulator.totalResponses += question?.responses?.length || 0;
-      return accumulator;
-    }, defaultCalculations) || defaultCalculations;
-
   const questionCount = quiz.questions?.length || 0;
 
   return (
@@ -86,29 +54,9 @@ export const LeaderboardSummary = ({ pollID }: { pollID: string }) => {
         </Flex>
       </Flex>
 
-      {!viewAllEntries ? (
-        <Box css={{ py: '$4' }}>
-          <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
-            Participation Summary
-          </Text>
-
-          <Box css={{ my: '$4' }}>
-            <Flex css={{ w: '100%', gap: '$4' }}>
-              <StatisticBox
-                title="Voted"
-                value={`${summary?.totalUsers ? (100 * summary?.votedUsers) / summary?.totalUsers : 0}%`}
-              />
-              <StatisticBox title="Correct Answers" value={`${summary?.correctAnswers}/${totalResponses}`} />
-            </Flex>
-            <Flex css={{ w: '100%', gap: '$4', mt: '$4' }}>
-              {summary?.avgTime > 0 ? <StatisticBox title="Avg. Time" value={summary?.avgTime} /> : null}
-              <StatisticBox title="Avg. Score" value={summary?.avgScore} />
-            </Flex>
-          </Box>
-        </Box>
-      ) : null}
+      {!viewAllEntries ? <PeerParticipationSummary quiz={quiz} /> : null}
 
-      <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
+      <Text variant="sm" css={{ fontWeight: '$semiBold', mt: '$4' }}>
         Leaderboard
       </Text>
       <Text variant="xs" css={{ color: '$on_surface_medium' }}>

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

@@ -1,23 +1,49 @@
 import React from 'react';
-import { HMSPoll, selectLocalPeer, useHMSStore } from '@100mslive/react-sdk';
+import { HMSPoll, selectLocalPeerID, useHMSStore } from '@100mslive/react-sdk';
 import { Box } from '../../../../Layout';
 import { Text } from '../../../../Text';
 import { StatisticBox } from './StatisticBox';
-// @ts-ignore
-import { getPeerParticipationSummary } from '../../../common/utils';
+import { useQuizSummary } from './useQuizSummary';
 
-export const PeerParticipationSummary = ({ poll }: { poll: HMSPoll }) => {
-  const localPeer = useHMSStore(selectLocalPeer);
-  const { totalResponses, correctResponses, score } = getPeerParticipationSummary(
-    poll,
-    localPeer?.id,
-    localPeer?.customerUserId,
-  );
+export const PeerParticipationSummary = ({ quiz }: { quiz: HMSPoll }) => {
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const { quizLeaderboard, summary } = useQuizSummary(quiz.id);
+  if (quiz.state !== 'stopped') {
+    return <></>;
+  }
+  const isLocalPeerQuizCreator = localPeerId === quiz.startedBy;
+  const peerEntry = quizLeaderboard?.entries.find(entry => entry.peer?.peerid === localPeerId);
+
+  const boxes = isLocalPeerQuizCreator
+    ? [
+        {
+          title: 'Voted',
+          value: `${summary.totalUsers ? ((100 * summary.votedUsers) / summary.totalUsers).toFixed(0) : 0}% (${
+            summary.votedUsers
+          }/${summary.totalUsers})`,
+        },
+        {
+          title: 'Correct Answers',
+          value: `${summary.totalUsers ? ((100 * summary.correctUsers) / summary.totalUsers).toFixed(0) : 0}% (${
+            summary.correctUsers
+          }/${summary.totalUsers})`,
+        },
+        { title: 'Avg. Time Taken', value: summary.avgTime },
+        {
+          title: 'Avg. Score',
+          value: Number.isInteger(summary.avgScore) ? summary.avgScore : summary.avgScore.toFixed(2),
+        },
+      ]
+    : [
+        { title: 'Your rank', value: peerEntry?.position ? `${peerEntry.position}/${summary.totalUsers}` : '-' },
+        { title: 'Points', value: peerEntry?.score },
+        { title: 'Time Taken', value: peerEntry?.duration },
+        {
+          title: 'Correct Answers',
+          value: peerEntry?.totalResponses ? `${peerEntry?.correctResponses}/${peerEntry.totalResponses}` : '-',
+        },
+      ];
 
-  const boxes = [
-    { title: 'Points', value: score },
-    { title: 'Correct Answers', value: `${correctResponses}/${totalResponses}` },
-  ];
   return (
     <Box>
       <Text css={{ fontWeight: '$semiBold', my: '$8' }}>Participation Summary</Text>

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

@@ -14,7 +14,7 @@ export const StandardView = ({ poll }: { poll: HMSPoll }) => {
 
   return (
     <>
-      {isQuiz && isStopped ? <PeerParticipationSummary poll={poll} /> : null}
+      {isQuiz && isStopped ? <PeerParticipationSummary quiz={poll} /> : null}
       {poll.questions?.map((question, index) => (
         <QuestionCard
           pollID={poll.id}

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

@@ -2,14 +2,19 @@ import React from 'react';
 import { Box } from '../../../../Layout';
 import { Text } from '../../../../Text';
 
-export const StatisticBox = ({ title, value = 0 }: { title: string; value: string | number }) => (
-  <Box css={{ p: '$8', background: '$surface_default', borderRadius: '$1', w: '100%' }}>
-    <Text
-      variant="tiny"
-      css={{ textTransform: 'uppercase', color: '$on_surface_medium', fontWeight: '$semiBold', my: '$4' }}
-    >
-      {title}
-    </Text>
-    <Text css={{ fontWeight: '$semiBold' }}>{value}</Text>
-  </Box>
-);
+export const StatisticBox = ({ title, value = 0 }: { title: string; value: string | number | undefined }) => {
+  if (!value) {
+    return <></>;
+  }
+  return (
+    <Box css={{ p: '$8', background: '$surface_default', borderRadius: '$1', w: '100%' }}>
+      <Text
+        variant="tiny"
+        css={{ textTransform: 'uppercase', color: '$on_surface_medium', fontWeight: '$semiBold', my: '$4' }}
+      >
+        {title}
+      </Text>
+      <Text css={{ fontWeight: '$semiBold' }}>{value}</Text>
+    </Box>
+  );
+};

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

@@ -68,13 +68,11 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
       </Flex>
 
       <Flex direction="column" css={{ p: '$8 $10', overflowY: 'auto' }}>
-        <Flex align="center">
-          <Box css={{ flex: 'auto' }}>
-            <Text css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>
-              {pollCreatorName || 'Participant'} started a {poll.type}
-            </Text>
-          </Box>
-        </Flex>
+        {poll.state === 'started' ? (
+          <Text css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>
+            {pollCreatorName || 'Participant'} started a {poll.type}
+          </Text>
+        ) : null}
 
         {isTimed ? <TimedView poll={poll} /> : <StandardView poll={poll} />}
 

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

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import {
+  HMSQuizLeaderboardResponse,
+  HMSQuizLeaderboardSummary,
+  selectPollByID,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+
+export const useQuizSummary = (quizID: string) => {
+  const hmsActions = useHMSActions();
+  const quiz = useHMSStore(selectPollByID(quizID));
+  const [quizLeaderboard, setQuizLeaderboard] = useState<HMSQuizLeaderboardResponse | undefined>();
+
+  const summary: HMSQuizLeaderboardSummary = quizLeaderboard?.summary || {
+    totalUsers: 0,
+    votedUsers: 0,
+    avgScore: 0,
+    avgTime: 0,
+    correctUsers: 0,
+  };
+  const [calculations, setCalculations] = useState({ maxPossibleScore: 0, totalResponses: 0 });
+
+  useEffect(() => {
+    const fetchLeaderboardData = async () => {
+      if (!quizLeaderboard && quiz && !quiz?.anonymous && quiz.state === 'stopped') {
+        const leaderboardData = await hmsActions.interactivityCenter.fetchLeaderboard(quiz.id, 0, 50);
+
+        const { maxPossibleScore, totalResponses } =
+          quiz?.questions?.reduce((accumulator, question) => {
+            accumulator.maxPossibleScore += question.weight || 0;
+            accumulator.totalResponses += question?.responses?.length || 0;
+            return accumulator;
+          }, calculations) || calculations;
+
+        setQuizLeaderboard(leaderboardData);
+        setCalculations({ maxPossibleScore, totalResponses });
+      }
+    };
+
+    fetchLeaderboardData();
+  }, [quiz, hmsActions.interactivityCenter, quizLeaderboard, calculations]);
+
+  return {
+    quizLeaderboard,
+    summary,
+    maxPossibleScore: calculations.maxPossibleScore,
+    totalResponses: calculations.totalResponses,
+  };
+};

package/src/Prebuilt/layouts/WhiteboardView.tsx

@@ -1,14 +1,17 @@
 import React, { useEffect, useMemo } from 'react';
+import { useMedia } from 'react-use';
 import { selectPeers, selectWhiteboard, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
 import { SecondaryTiles } from '../components/SecondaryTiles';
 import { ProminenceLayout } from '../components/VideoLayouts/ProminenceLayout';
+import { config as cssConfig } from '../../';
 import { Box } from '../../Layout';
 // @ts-ignore: No implicit Any
 import { useSetAppDataByKey } from '../components/AppData/useUISettings';
 import { APP_DATA } from '../common/constants';
 
 const EmbedComponent = () => {
-  const { iframeRef } = useWhiteboard();
+  const isMobile = useMedia(cssConfig.media.md);
+  const { iframeRef } = useWhiteboard(isMobile);
 
   return (
     <Box

package/src/Toast/Toast.tsx

@@ -78,6 +78,7 @@ const ToastClose = styled(ToastPrimitives.Close, {});
 const ToastAction = styled(ToastPrimitives.Action, {
   cursor: 'pointer',
   background: 'none',
+  border: 'none',
 });
 const ToastViewport = styled(ToastPrimitives.Viewport, {
   position: 'fixed',