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

package/dist/meta.esbuild.json

@@ -2227,7 +2227,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx": {
-      "bytes": 3097,
+      "bytes": 3098,
       "imports": [
         {
           "path": "react",
@@ -4478,7 +4478,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 320473,
+      "bytes": 320481,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6728,7 +6728,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/StatisticBox.tsx": {
-      "bytes": 540,
+      "bytes": 624,
       "imports": [
         {
           "path": "react",
@@ -6753,8 +6753,8 @@
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx": {
-      "bytes": 5842,
+    "src/Prebuilt/components/Polls/Voting/useQuizSummary.tsx": {
+      "bytes": 1684,
       "imports": [
         {
           "path": "react",
@@ -6767,70 +6767,61 @@
           "external": true
         },
         {
-          "path": "@100mslive/react-icons",
+          "path": "<define:process.env>",
           "kind": "import-statement",
           "external": true
         },
         {
-          "path": "src/Layout/index.tsx",
-          "kind": "import-statement",
-          "original": "../../../../Layout"
-        },
-        {
-          "path": "src/Loading/index.ts",
-          "kind": "import-statement",
-          "original": "../../../../Loading"
-        },
-        {
-          "path": "src/Text/index.tsx",
+          "path": "<runtime>",
           "kind": "import-statement",
-          "original": "../../../../Text"
-        },
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
+    "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
+      "bytes": 2098,
+      "imports": [
         {
-          "path": "src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx",
+          "path": "react",
           "kind": "import-statement",
-          "original": "./LeaderboardEntry"
+          "external": true
         },
         {
-          "path": "src/Prebuilt/components/Polls/Voting/StatisticBox.tsx",
+          "path": "@100mslive/react-sdk",
           "kind": "import-statement",
-          "original": "./StatisticBox"
+          "external": true
         },
         {
-          "path": "src/Prebuilt/components/AppData/useSidepane.js",
+          "path": "src/Layout/index.tsx",
           "kind": "import-statement",
-          "original": "../../AppData/useSidepane"
+          "original": "../../../../Layout"
         },
         {
-          "path": "src/Prebuilt/components/AppData/useUISettings.js",
+          "path": "src/Text/index.tsx",
           "kind": "import-statement",
-          "original": "../../AppData/useUISettings"
+          "original": "../../../../Text"
         },
         {
-          "path": "src/Prebuilt/components/Polls/common/StatusIndicator.tsx",
+          "path": "src/Prebuilt/components/Polls/Voting/StatisticBox.tsx",
           "kind": "import-statement",
-          "original": "../common/StatusIndicator"
+          "original": "./StatisticBox"
         },
         {
-          "path": "src/Prebuilt/common/constants.ts",
+          "path": "src/Prebuilt/components/Polls/Voting/useQuizSummary.tsx",
           "kind": "import-statement",
-          "original": "../../../common/constants"
+          "original": "./useQuizSummary"
         },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
           "external": true
-        },
-        {
-          "path": "<runtime>",
-          "kind": "import-statement",
-          "external": true
         }
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
-      "bytes": 1075,
+    "src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx": {
+      "bytes": 4039,
       "imports": [
         {
           "path": "react",
@@ -6842,25 +6833,60 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-icons",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "src/Layout/index.tsx",
           "kind": "import-statement",
           "original": "../../../../Layout"
         },
+        {
+          "path": "src/Loading/index.ts",
+          "kind": "import-statement",
+          "original": "../../../../Loading"
+        },
         {
           "path": "src/Text/index.tsx",
           "kind": "import-statement",
           "original": "../../../../Text"
         },
         {
-          "path": "src/Prebuilt/components/Polls/Voting/StatisticBox.tsx",
+          "path": "src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx",
           "kind": "import-statement",
-          "original": "./StatisticBox"
+          "original": "./LeaderboardEntry"
         },
         {
-          "path": "src/Prebuilt/common/utils.js",
+          "path": "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx",
           "kind": "import-statement",
-          "original": "../../../common/utils"
+          "original": "./PeerParticipationSummary"
+        },
+        {
+          "path": "src/Prebuilt/components/AppData/useSidepane.js",
+          "kind": "import-statement",
+          "original": "../../AppData/useSidepane"
+        },
+        {
+          "path": "src/Prebuilt/components/AppData/useUISettings.js",
+          "kind": "import-statement",
+          "original": "../../AppData/useUISettings"
+        },
+        {
+          "path": "src/Prebuilt/components/Polls/Voting/useQuizSummary.tsx",
+          "kind": "import-statement",
+          "original": "./useQuizSummary"
+        },
+        {
+          "path": "src/Prebuilt/components/Polls/common/StatusIndicator.tsx",
+          "kind": "import-statement",
+          "original": "../common/StatusIndicator"
+        },
+        {
+          "path": "src/Prebuilt/common/constants.ts",
+          "kind": "import-statement",
+          "original": "../../../common/constants"
         },
         {
           "path": "<define:process.env>",
@@ -6984,7 +7010,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/Voting.tsx": {
-      "bytes": 3244,
+      "bytes": 3192,
       "imports": [
         {
           "path": "react",
@@ -10077,13 +10103,18 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/WhiteboardView.tsx": {
-      "bytes": 1906,
+      "bytes": 2047,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -10099,6 +10130,11 @@
           "kind": "import-statement",
           "original": "../components/VideoLayouts/ProminenceLayout"
         },
+        {
+          "path": "src/index.ts",
+          "kind": "import-statement",
+          "original": "../../"
+        },
         {
           "path": "src/Layout/index.tsx",
           "kind": "import-statement",
@@ -12541,7 +12577,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-FTOP3RHP.js",
+          "path": "dist/chunk-LRZEFY46.js",
           "kind": "import-statement"
         }
       ],
@@ -12614,16 +12650,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-GKCGIZ5F.js.map": {
+    "dist/HLSView-QPKBRL74.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 58021
     },
-    "dist/HLSView-GKCGIZ5F.js": {
+    "dist/HLSView-QPKBRL74.js": {
       "imports": [
         {
-          "path": "dist/chunk-FTOP3RHP.js",
+          "path": "dist/chunk-LRZEFY46.js",
           "kind": "import-statement"
         },
         {
@@ -12787,13 +12823,13 @@
       },
       "bytes": 36449
     },
-    "dist/chunk-FTOP3RHP.js.map": {
+    "dist/chunk-LRZEFY46.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3003490
+      "bytes": 3004449
     },
-    "dist/chunk-FTOP3RHP.js": {
+    "dist/chunk-LRZEFY46.js": {
       "imports": [
         {
           "path": "react",
@@ -14231,22 +14267,22 @@
           "external": true
         },
         {
-          "path": "react",
+          "path": "@100mslive/react-sdk",
           "kind": "import-statement",
           "external": true
         },
         {
-          "path": "@100mslive/react-sdk",
+          "path": "react",
           "kind": "import-statement",
           "external": true
         },
         {
-          "path": "@100mslive/react-icons",
+          "path": "react",
           "kind": "import-statement",
           "external": true
         },
         {
-          "path": "react",
+          "path": "@100mslive/react-sdk",
           "kind": "import-statement",
           "external": true
         },
@@ -14260,6 +14296,16 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-icons",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "react",
           "kind": "import-statement",
@@ -14975,6 +15021,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -14996,7 +15047,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-GKCGIZ5F.js",
+          "path": "dist/HLSView-QPKBRL74.js",
           "kind": "dynamic-import"
         },
         {
@@ -15418,7 +15469,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18388
+          "bytesInOutput": 17933
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224265
@@ -15700,7 +15751,7 @@
           "bytesInOutput": 5480
         },
         "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx": {
-          "bytesInOutput": 2865
+          "bytesInOutput": 2866
         },
         "src/Prebuilt/IconButton.jsx": {
           "bytesInOutput": 573
@@ -15889,7 +15940,7 @@
           "bytesInOutput": 907
         },
         "src/Prebuilt/common/utils.js": {
-          "bytesInOutput": 3731
+          "bytesInOutput": 2426
         },
         "src/Prebuilt/components/MoreSettings/ActionTile.jsx": {
           "bytesInOutput": 1390
@@ -16021,25 +16072,28 @@
           "bytesInOutput": 2116
         },
         "src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx": {
-          "bytesInOutput": 6216
+          "bytesInOutput": 3973
         },
         "src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx": {
           "bytesInOutput": 1683
         },
+        "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
+          "bytesInOutput": 2194
+        },
         "src/Prebuilt/components/Polls/Voting/StatisticBox.tsx": {
-          "bytesInOutput": 512
+          "bytesInOutput": 634
+        },
+        "src/Prebuilt/components/Polls/Voting/useQuizSummary.tsx": {
+          "bytesInOutput": 1874
         },
         "src/Prebuilt/components/Polls/Voting/Voting.tsx": {
-          "bytesInOutput": 3216
+          "bytesInOutput": 3113
         },
         "src/Prebuilt/components/Polls/Voting/StandardVoting.tsx": {
-          "bytesInOutput": 1254
-        },
-        "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
-          "bytesInOutput": 1013
+          "bytesInOutput": 1260
         },
         "src/Prebuilt/components/Polls/Voting/QuestionCard.jsx": {
-          "bytesInOutput": 8548
+          "bytesInOutput": 8527
         },
         "src/Prebuilt/components/Polls/Voting/TimedVoting.tsx": {
           "bytesInOutput": 1101
@@ -16051,7 +16105,7 @@
           "bytesInOutput": 3444
         },
         "src/Prebuilt/components/Chat/ChatBody.tsx": {
-          "bytesInOutput": 14276
+          "bytesInOutput": 14278
         },
         "src/Prebuilt/components/Chat/ChatActions.tsx": {
           "bytesInOutput": 9777
@@ -16162,7 +16216,7 @@
           "bytesInOutput": 3871
         },
         "src/Prebuilt/components/VideoLayouts/EqualProminence.tsx": {
-          "bytesInOutput": 2021
+          "bytesInOutput": 2019
         },
         "src/Prebuilt/components/InsetTile.tsx": {
           "bytesInOutput": 4035
@@ -16213,7 +16267,7 @@
           "bytesInOutput": 1415
         },
         "src/Prebuilt/layouts/WhiteboardView.tsx": {
-          "bytesInOutput": 1967
+          "bytesInOutput": 2075
         },
         "src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx": {
           "bytesInOutput": 997
@@ -16330,7 +16384,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1221347
+      "bytes": 1220642
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.1-alpha.0",
+  "version": "0.2.1-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -65,6 +65,7 @@
     "@types/react-window": "^1.8.5",
     "babel-loader": "^8.2.5",
     "babel-plugin-react-require": "3.1.3",
+    "esbuild-loader": "^4.0.2",
     "react": "^18.1.0",
     "rollup": "^2.70.1",
     "rollup-plugin-esbuild": "^5.0.0",
@@ -76,10 +77,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.1-alpha.0",
-    "@100mslive/hms-virtual-background": "1.12.1-alpha.0",
-    "@100mslive/react-icons": "0.9.1-alpha.0",
-    "@100mslive/react-sdk": "0.9.1-alpha.0",
+    "@100mslive/hls-player": "0.2.1-alpha.1",
+    "@100mslive/hms-virtual-background": "1.12.1-alpha.1",
+    "@100mslive/react-icons": "0.9.1-alpha.1",
+    "@100mslive/react-sdk": "0.9.1-alpha.1",
     "@100mslive/types-prebuilt": "0.12.5",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -114,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "37788eb004f63672aae22043c6ad6b2debaff74c"
+  "gitHead": "8e59b80ba249933faedfafd0c9fef523a07dc74c"
 }

package/src/Introduction/Integrating.stories.mdx

@@ -8,7 +8,7 @@ You can use either npm or yarn to install the dependencies. Please install the r
 you're planning to use with react or other framework/plain JavaScript.
 
 ```bash
-npm install --save @100mslive/hms-video @100mslive/hms-video-store
+npm install --save @100mslive/hms-video-store
 ```
 
 ```bash

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx

@@ -12,7 +12,7 @@ const IconSection = styled(IconButton, {
   p: '$4',
   r: '$1',
   borderTopRightRadius: 0,
-  borderColor: '$border_default',
+  borderColor: '$border_bright',
   borderBottomRightRadius: 0,
   position: 'relative',
   '&:not([disabled]):focus-visible': {
@@ -28,10 +28,10 @@ const IconSection = styled(IconButton, {
 const OptionsSection = styled(IconButton, {
   w: 'unset',
   h: '$14',
-  p: '$4',
+  p: '$4 $2',
   r: '$1',
   borderTopLeftRadius: 0,
-  borderColor: '$border_default',
+  borderColor: '$border_bright',
   borderBottomLeftRadius: 0,
   borderLeftWidth: 0,
   position: 'relative',

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' }}>