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

package/dist/meta.esbuild.json

@@ -242,7 +242,7 @@
       "format": "esm"
     },
     "src/Button/Button.tsx": {
-      "bytes": 4738,
+      "bytes": 4742,
       "imports": [
         {
           "path": "react",
@@ -2713,7 +2713,7 @@
       "format": "esm"
     },
     "src/Sheet/Sheet.tsx": {
-      "bytes": 3142,
+      "bytes": 3140,
       "imports": [
         {
           "path": "react",
@@ -4478,7 +4478,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 320293,
+      "bytes": 320733,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6422,7 +6422,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx": {
-      "bytes": 3799,
+      "bytes": 3796,
       "imports": [
         {
           "path": "react",
@@ -6463,7 +6463,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/common/SingleChoiceOptions.jsx": {
-      "bytes": 4925,
+      "bytes": 5021,
       "imports": [
         {
           "path": "react",
@@ -6697,7 +6697,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx": {
-      "bytes": 1775,
+      "bytes": 2113,
       "imports": [
         {
           "path": "react",
@@ -6780,7 +6780,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
-      "bytes": 2194,
+      "bytes": 2297,
       "imports": [
         {
           "path": "react",
@@ -6821,7 +6821,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx": {
-      "bytes": 4039,
+      "bytes": 4084,
       "imports": [
         {
           "path": "react",
@@ -6897,7 +6897,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/QuestionCard.jsx": {
-      "bytes": 8553,
+      "bytes": 7009,
       "imports": [
         {
           "path": "react",
@@ -6953,7 +6953,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/StandardVoting.tsx": {
-      "bytes": 1253,
+      "bytes": 1212,
       "imports": [
         {
           "path": "react",
@@ -6984,7 +6984,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/TimedVoting.tsx": {
-      "bytes": 1090,
+      "bytes": 1025,
       "imports": [
         {
           "path": "react",
@@ -7010,7 +7010,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/Voting.tsx": {
-      "bytes": 3192,
+      "bytes": 3251,
       "imports": [
         {
           "path": "react",
@@ -8674,7 +8674,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-      "bytes": 2178,
+      "bytes": 2475,
       "imports": [
         {
           "path": "@100mslive/hms-virtual-background",
@@ -8706,7 +8706,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-      "bytes": 5568,
+      "bytes": 6047,
       "imports": [
         {
           "path": "react",
@@ -9042,7 +9042,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-      "bytes": 10223,
+      "bytes": 9986,
       "imports": [
         {
           "path": "react",
@@ -9168,7 +9168,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx": {
-      "bytes": 2091,
+      "bytes": 2289,
       "imports": [
         {
           "path": "react",
@@ -9199,7 +9199,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx": {
-      "bytes": 2851,
+      "bytes": 2958,
       "imports": [
         {
           "path": "react",
@@ -10523,7 +10523,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/HLSView.jsx": {
-      "bytes": 17061,
+      "bytes": 17552,
       "imports": [
         {
           "path": "react",
@@ -11573,7 +11573,7 @@
       "imports": []
     },
     "src/Prebuilt/components/Notifications/PermissionErrorModal.tsx": {
-      "bytes": 4772,
+      "bytes": 4888,
       "imports": [
         {
           "path": "react",
@@ -12577,7 +12577,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-GNQAOG73.js",
+          "path": "dist/chunk-XXVJPGLN.js",
           "kind": "import-statement"
         }
       ],
@@ -12650,16 +12650,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-U7FQ2YLK.js.map": {
+    "dist/HLSView-2DSOSSTP.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 58021
+      "bytes": 58852
     },
-    "dist/HLSView-U7FQ2YLK.js": {
+    "dist/HLSView-2DSOSSTP.js": {
       "imports": [
         {
-          "path": "dist/chunk-GNQAOG73.js",
+          "path": "dist/chunk-XXVJPGLN.js",
           "kind": "import-statement"
         },
         {
@@ -12779,7 +12779,7 @@
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 16830
+          "bytesInOutput": 17351
         },
         "src/Prebuilt/components/HlsStatsOverlay.jsx": {
           "bytesInOutput": 3521
@@ -12821,15 +12821,15 @@
           "bytesInOutput": 3992
         }
       },
-      "bytes": 36449
+      "bytes": 36970
     },
-    "dist/chunk-GNQAOG73.js.map": {
+    "dist/chunk-XXVJPGLN.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3004637
+      "bytes": 3004956
     },
-    "dist/chunk-GNQAOG73.js": {
+    "dist/chunk-XXVJPGLN.js": {
       "imports": [
         {
           "path": "react",
@@ -15047,7 +15047,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-U7FQ2YLK.js",
+          "path": "dist/HLSView-2DSOSSTP.js",
           "kind": "dynamic-import"
         },
         {
@@ -15469,7 +15469,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18024
+          "bytesInOutput": 17194
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224265
@@ -15499,7 +15499,7 @@
           "bytesInOutput": 27
         },
         "src/Button/Button.tsx": {
-          "bytesInOutput": 4339
+          "bytesInOutput": 4343
         },
         "src/Layout/index.tsx": {
           "bytesInOutput": 27
@@ -15793,7 +15793,7 @@
           "bytesInOutput": 27
         },
         "src/Sheet/Sheet.tsx": {
-          "bytesInOutput": 2770
+          "bytesInOutput": 2768
         },
         "src/Prebuilt/components/MoreSettings/MoreSettings.tsx": {
           "bytesInOutput": 392
@@ -15892,7 +15892,7 @@
           "bytesInOutput": 10019
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 48225
+          "bytesInOutput": 48233
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2537
@@ -16021,10 +16021,10 @@
           "bytesInOutput": 2414
         },
         "src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx": {
-          "bytesInOutput": 2968
+          "bytesInOutput": 3077
         },
         "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-          "bytesInOutput": 9824
+          "bytesInOutput": 9632
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
           "bytesInOutput": 4443
@@ -16054,7 +16054,7 @@
           "bytesInOutput": 204
         },
         "src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx": {
-          "bytesInOutput": 3637
+          "bytesInOutput": 3643
         },
         "src/Prebuilt/components/Polls/common/OptionInputWithDelete.tsx": {
           "bytesInOutput": 889
@@ -16066,19 +16066,19 @@
           "bytesInOutput": 594
         },
         "src/Prebuilt/components/Polls/common/SingleChoiceOptions.jsx": {
-          "bytesInOutput": 4306
+          "bytesInOutput": 4331
         },
         "src/Prebuilt/components/Polls/CreateQuestions/SavedQuestion.tsx": {
           "bytesInOutput": 2116
         },
         "src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx": {
-          "bytesInOutput": 3973
+          "bytesInOutput": 4010
         },
         "src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx": {
-          "bytesInOutput": 1683
+          "bytesInOutput": 2075
         },
         "src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx": {
-          "bytesInOutput": 2277
+          "bytesInOutput": 2372
         },
         "src/Prebuilt/components/Polls/Voting/StatisticBox.tsx": {
           "bytesInOutput": 634
@@ -16087,16 +16087,16 @@
           "bytesInOutput": 1874
         },
         "src/Prebuilt/components/Polls/Voting/Voting.tsx": {
-          "bytesInOutput": 3113
+          "bytesInOutput": 3206
         },
         "src/Prebuilt/components/Polls/Voting/StandardVoting.tsx": {
-          "bytesInOutput": 1260
+          "bytesInOutput": 1221
         },
         "src/Prebuilt/components/Polls/Voting/QuestionCard.jsx": {
-          "bytesInOutput": 8527
+          "bytesInOutput": 7266
         },
         "src/Prebuilt/components/Polls/Voting/TimedVoting.tsx": {
-          "bytesInOutput": 1101
+          "bytesInOutput": 1028
         },
         "src/Prebuilt/components/SidePaneTabs.tsx": {
           "bytesInOutput": 7277
@@ -16105,7 +16105,7 @@
           "bytesInOutput": 3444
         },
         "src/Prebuilt/components/Chat/ChatBody.tsx": {
-          "bytesInOutput": 14278
+          "bytesInOutput": 14276
         },
         "src/Prebuilt/components/Chat/ChatActions.tsx": {
           "bytesInOutput": 9777
@@ -16180,7 +16180,7 @@
           "bytesInOutput": 1050
         },
         "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-          "bytesInOutput": 5518
+          "bytesInOutput": 6018
         },
         "src/Prebuilt/components/VirtualBackground/VBCollection.tsx": {
           "bytesInOutput": 1157
@@ -16189,7 +16189,7 @@
           "bytesInOutput": 1161
         },
         "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-          "bytesInOutput": 2848
+          "bytesInOutput": 3124
         },
         "src/Prebuilt/components/VirtualBackground/constants.ts": {
           "bytesInOutput": 714
@@ -16207,7 +16207,7 @@
           "bytesInOutput": 2717
         },
         "src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx": {
-          "bytesInOutput": 2041
+          "bytesInOutput": 2163
         },
         "src/Prebuilt/layouts/VideoStreamingSection.tsx": {
           "bytesInOutput": 3196
@@ -16336,7 +16336,7 @@
           "bytesInOutput": 1593
         },
         "src/Prebuilt/components/Notifications/PermissionErrorModal.tsx": {
-          "bytesInOutput": 4382
+          "bytesInOutput": 4534
         },
         "src/Prebuilt/images/android-perm-1.png": {
           "bytesInOutput": 10443
@@ -16384,7 +16384,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1220717
+      "bytes": 1220137
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.1",
+  "version": "0.2.2-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,10 +82,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.1",
-    "@100mslive/hms-virtual-background": "1.12.1",
-    "@100mslive/react-icons": "0.9.1",
-    "@100mslive/react-sdk": "0.9.1",
+    "@100mslive/hls-player": "0.2.2-alpha.1",
+    "@100mslive/hms-virtual-background": "1.12.2-alpha.1",
+    "@100mslive/react-icons": "0.9.2-alpha.1",
+    "@100mslive/react-sdk": "0.9.2-alpha.1",
     "@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": "d059b6f9ea6851f26271332df4cf83c9a4f3d567"
+  "gitHead": "470903541e619aa64cfa01ec9b3a59b32445e29d"
 }

package/src/Button/Button.tsx

@@ -143,8 +143,8 @@ const StyledButton = styled('button', {
         '$secondary_bright',
         '$secondary_dim',
         '$secondary_disabled',
-        '$on_surface_high',
-        '$on_surface_low',
+        '$on_secondary_high',
+        '$on_secondary_low',
       ),
       danger: getButtonVariants(
         '$alert_error_default',

package/src/Prebuilt/components/Notifications/PermissionErrorModal.tsx

@@ -44,7 +44,14 @@ export function PermissionErrorModal() {
     <Dialog.Root open={!!deviceType}>
       <Dialog.Portal>
         <Dialog.Overlay />
-        <Dialog.Content css={{ w: 'min(380px, 90%)', p: '$8' }}>
+        <Dialog.Content
+          css={{
+            w: 'min(380px, 90%)',
+            p: '$8',
+            // overlay over Sheet.tsx
+            zIndex: 23,
+          }}
+        >
           <Dialog.Title
             css={{
               borderBottom: '1px solid $border_default',

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CheckCircleIcon, TrophyFilledIcon } from '@100mslive/react-icons';
+import { CheckCircleIcon, ClockIcon, TrophyFilledIcon } from '@100mslive/react-icons';
 import { Box, Flex } from '../../../../Layout';
 import { Text } from '../../../../Text';
 
@@ -12,6 +12,7 @@ export const LeaderboardEntry = ({
   correctResponses,
   userName,
   maxPossibleScore,
+  duration,
 }: {
   position: number;
   score: number;
@@ -19,6 +20,7 @@ export const LeaderboardEntry = ({
   correctResponses: number;
   userName: string;
   maxPossibleScore: number;
+  duration: number;
 }) => {
   return (
     <Flex align="center" justify="between" css={{ my: '$4' }}>
@@ -49,13 +51,23 @@ export const LeaderboardEntry = ({
           </Text>
         </Box>
       </Flex>
+
       <Flex align="center" css={{ gap: '$4', color: '$on_surface_medium' }}>
         {position === 1 ? <TrophyFilledIcon height={16} width={16} /> : null}
-        <CheckCircleIcon height={16} width={16} />
         {questionCount ? (
-          <Text variant="xs">
-            {correctResponses} / {questionCount}
-          </Text>
+          <>
+            <CheckCircleIcon height={16} width={16} />
+            <Text variant="xs">
+              {correctResponses}/{questionCount}
+            </Text>
+          </>
+        ) : null}
+
+        {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>
+          </Flex>
         ) : null}
       </Flex>
     </Flex>

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

@@ -86,6 +86,7 @@ export const LeaderboardSummary = ({ pollID }: { pollID: string }) => {
                 correctResponses={question.correctResponses}
                 userName={question.peer.username || ''}
                 maxPossibleScore={maxPossibleScore}
+                duration={question.duration}
               />
             ))}
         {quizLeaderboard?.entries?.length > 5 && !viewAllEntries ? (

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

@@ -28,7 +28,8 @@ export const PeerParticipationSummary = ({ quiz }: { quiz: HMSPoll }) => {
             summary.correctUsers
           }/${summary.totalUsers})`,
         },
-        { title: 'Avg. Time Taken', value: summary.avgTime },
+        // Time in ms
+        { title: 'Avg. Time Taken', value: `${(summary.avgTime / 1000).toFixed(3)}s` },
         {
           title: 'Avg. Score',
           value: Number.isInteger(summary.avgScore) ? summary.avgScore : summary.avgScore.toFixed(2),
@@ -37,7 +38,8 @@ export const PeerParticipationSummary = ({ quiz }: { quiz: HMSPoll }) => {
     : [
         { title: 'Your rank', value: peerEntry?.position ? `${peerEntry.position}/${summary.totalUsers}` : '-' },
         { title: 'Points', value: peerEntry?.score },
-        { title: 'Time Taken', value: peerEntry?.duration },
+        // Time in ms
+        { title: 'Time Taken', value: `${((peerEntry?.duration || 0) / 1000).toFixed(3)}s` },
         {
           title: 'Correct Answers',
           value: peerEntry?.totalResponses ? `${peerEntry?.correctResponses}/${peerEntry.totalResponses}` : '-',