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

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   theme,
   useBorderAudioLevel,
   useTheme
-} from "./chunk-O7BEFUE4.js";
+} from "./chunk-YOFFMNAR.js";
 export {
   Accordion,
   AudioLevel,

package/dist/meta.cjs.json

@@ -4478,7 +4478,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 320733,
+      "bytes": 320789,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6696,8 +6696,19 @@
       ],
       "format": "esm"
     },
+    "src/Prebuilt/components/Polls/common/utils.ts": {
+      "bytes": 482,
+      "imports": [
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
     "src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx": {
-      "bytes": 2113,
+      "bytes": 2162,
       "imports": [
         {
           "path": "react",
@@ -6719,6 +6730,11 @@
           "kind": "import-statement",
           "original": "../../../../Text"
         },
+        {
+          "path": "src/Prebuilt/components/Polls/common/utils.ts",
+          "kind": "import-statement",
+          "original": "../common/utils"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -6780,7 +6796,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
-      "bytes": 2297,
+      "bytes": 2279,
       "imports": [
         {
           "path": "react",
@@ -6812,6 +6828,11 @@
           "kind": "import-statement",
           "original": "./useQuizSummary"
         },
+        {
+          "path": "src/Prebuilt/components/Polls/common/utils.ts",
+          "kind": "import-statement",
+          "original": "../common/utils"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -6897,7 +6918,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/QuestionCard.jsx": {
-      "bytes": 7009,
+      "bytes": 7080,
       "imports": [
         {
           "path": "react",
@@ -12572,7 +12593,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3068442
+      "bytes": 3069617
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -15246,7 +15267,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 17184
+          "bytesInOutput": 17187
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -15863,8 +15884,11 @@
         "src/Prebuilt/components/Polls/CreateQuestions/CreateQuestions.jsx": {
           "bytesInOutput": 5588
         },
+        "src/Prebuilt/components/Polls/common/utils.ts": {
+          "bytesInOutput": 664
+        },
         "src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx": {
-          "bytesInOutput": 2704
+          "bytesInOutput": 2717
         },
         "src/Prebuilt/components/Polls/Voting/StatisticBox.tsx": {
           "bytesInOutput": 978
@@ -15873,13 +15897,13 @@
           "bytesInOutput": 2203
         },
         "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
-          "bytesInOutput": 2928
+          "bytesInOutput": 2877
         },
         "src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx": {
           "bytesInOutput": 5052
         },
         "src/Prebuilt/components/Polls/Voting/QuestionCard.jsx": {
-          "bytesInOutput": 8545
+          "bytesInOutput": 8770
         },
         "src/Prebuilt/components/Polls/Voting/StandardVoting.tsx": {
           "bytesInOutput": 1658
@@ -16242,7 +16266,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1439261
+      "bytes": 1440165
     }
   }
 }

package/dist/meta.esbuild.json

@@ -4478,7 +4478,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 320733,
+      "bytes": 320789,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6696,8 +6696,19 @@
       ],
       "format": "esm"
     },
+    "src/Prebuilt/components/Polls/common/utils.ts": {
+      "bytes": 482,
+      "imports": [
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
     "src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx": {
-      "bytes": 2113,
+      "bytes": 2162,
       "imports": [
         {
           "path": "react",
@@ -6719,6 +6730,11 @@
           "kind": "import-statement",
           "original": "../../../../Text"
         },
+        {
+          "path": "src/Prebuilt/components/Polls/common/utils.ts",
+          "kind": "import-statement",
+          "original": "../common/utils"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -6780,7 +6796,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
-      "bytes": 2297,
+      "bytes": 2279,
       "imports": [
         {
           "path": "react",
@@ -6812,6 +6828,11 @@
           "kind": "import-statement",
           "original": "./useQuizSummary"
         },
+        {
+          "path": "src/Prebuilt/components/Polls/common/utils.ts",
+          "kind": "import-statement",
+          "original": "../common/utils"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -6897,7 +6918,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/QuestionCard.jsx": {
-      "bytes": 7009,
+      "bytes": 7080,
       "imports": [
         {
           "path": "react",
@@ -12577,7 +12598,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-O7BEFUE4.js",
+          "path": "dist/chunk-YOFFMNAR.js",
           "kind": "import-statement"
         }
       ],
@@ -12650,16 +12671,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-ZG7ZVFEM.js.map": {
+    "dist/HLSView-HMMJY2KC.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 58852
     },
-    "dist/HLSView-ZG7ZVFEM.js": {
+    "dist/HLSView-HMMJY2KC.js": {
       "imports": [
         {
-          "path": "dist/chunk-O7BEFUE4.js",
+          "path": "dist/chunk-YOFFMNAR.js",
           "kind": "import-statement"
         },
         {
@@ -12823,13 +12844,13 @@
       },
       "bytes": 36970
     },
-    "dist/chunk-O7BEFUE4.js.map": {
+    "dist/chunk-YOFFMNAR.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3005104
+      "bytes": 3006166
     },
-    "dist/chunk-O7BEFUE4.js": {
+    "dist/chunk-YOFFMNAR.js": {
       "imports": [
         {
           "path": "react",
@@ -15047,7 +15068,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-ZG7ZVFEM.js",
+          "path": "dist/HLSView-HMMJY2KC.js",
           "kind": "dynamic-import"
         },
         {
@@ -15469,7 +15490,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 17184
+          "bytesInOutput": 17187
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224265
@@ -16075,10 +16096,13 @@
           "bytesInOutput": 4010
         },
         "src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx": {
-          "bytesInOutput": 2075
+          "bytesInOutput": 2069
+        },
+        "src/Prebuilt/components/Polls/common/utils.ts": {
+          "bytesInOutput": 480
         },
         "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
-          "bytesInOutput": 2372
+          "bytesInOutput": 2302
         },
         "src/Prebuilt/components/Polls/Voting/StatisticBox.tsx": {
           "bytesInOutput": 634
@@ -16093,7 +16117,7 @@
           "bytesInOutput": 1221
         },
         "src/Prebuilt/components/Polls/Voting/QuestionCard.jsx": {
-          "bytesInOutput": 7266
+          "bytesInOutput": 7455
         },
         "src/Prebuilt/components/Polls/Voting/TimedVoting.tsx": {
           "bytesInOutput": 1028
@@ -16384,7 +16408,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1220195
+      "bytes": 1220903
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.2-alpha.3",
+  "version": "0.2.2-alpha.5",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,10 +82,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.2-alpha.3",
-    "@100mslive/hms-virtual-background": "1.12.2-alpha.3",
-    "@100mslive/react-icons": "0.9.2-alpha.3",
-    "@100mslive/react-sdk": "0.9.2-alpha.3",
+    "@100mslive/hls-player": "0.2.2-alpha.5",
+    "@100mslive/hms-virtual-background": "1.12.2-alpha.5",
+    "@100mslive/react-icons": "0.9.2-alpha.5",
+    "@100mslive/react-sdk": "0.9.2-alpha.5",
     "@100mslive/types-prebuilt": "0.12.5",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -120,5 +120,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "a8ba9a5b8f03574b1b398575dced298fd1a9fab5"
+  "gitHead": "f92ee12444119121ba670c4127c808a992a8b2c1"
 }

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' };
 
@@ -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,17 +30,17 @@ 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),
         },
       ]
     : [
-        { title: 'Your rank', value: peerEntry?.position ? `${peerEntry.position}/${summary.totalUsers}` : '-' },
+        { title: 'Your rank', value: peerEntry?.position || '-' },
         { title: 'Points', value: peerEntry?.score },
         // 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

@@ -40,6 +40,7 @@ export const QuestionCard = ({
     roleCanViewResponse && (localPeerResponse || (isLocalPeerCreator && pollState === 'stopped')) && !isQuiz;
 
   const isLive = pollState === 'started';
+  const pollEnded = pollState === 'stopped';
   const canRespond = isLive && !localPeerResponse;
   const startTime = useRef(Date.now());
   const isCorrectAnswer = checkCorrectAnswer(answer, localPeerResponse, type);
@@ -117,8 +118,8 @@ export const QuestionCard = ({
             gap: '$4',
           }}
         >
-          {respondedToQuiz && isCorrectAnswer ? <CheckCircleIcon height={20} width={20} /> : null}
-          {respondedToQuiz && !isCorrectAnswer ? <CrossCircleIcon height={20} width={20} /> : null}
+          {respondedToQuiz && isCorrectAnswer && pollEnded ? <CheckCircleIcon height={20} width={20} /> : null}
+          {respondedToQuiz && !isCorrectAnswer && pollEnded ? <CrossCircleIcon height={20} width={20} /> : null}
           QUESTION {index} OF {totalQuestions}: {type.toUpperCase()}
         </Text>
       </Flex>
@@ -135,7 +136,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}
@@ -168,19 +171,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/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`;
+};