@100mslive/roomkit-react 0.2.0 → 0.2.1-alpha.1

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

@@ -1,23 +1,46 @@
 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: summary.avgScore },
+      ]
+    : [
+        { 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/TileMenu/StyledMenuTile.tsx

@@ -49,6 +49,7 @@ const styledItem = {
 const StyledItemButton = styled('button', {
   ...styledItem,
   height: '$14',
+  border: 'none',
   '&:hover': {
     backgroundColor: '$surface_brighter',
   },