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

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": 320301,
+      "bytes": 320789,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6211,7 +6211,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx": {
-      "bytes": 7706,
+      "bytes": 7668,
       "imports": [
         {
           "path": "react",
@@ -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": 2250,
       "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": 7080,
       "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",
@@ -8323,7 +8323,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/TileMenu/TileMenuContent.tsx": {
-      "bytes": 11390,
+      "bytes": 11476,
       "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",
@@ -11738,7 +11738,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Notifications/Notifications.tsx": {
-      "bytes": 7752,
+      "bytes": 8209,
       "imports": [
         {
           "path": "react",
@@ -12577,7 +12577,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-ERKB3GGI.js",
+          "path": "dist/chunk-S5NNUR2M.js",
           "kind": "import-statement"
         }
       ],
@@ -12650,16 +12650,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-DJGDJPXM.js.map": {
+    "dist/HLSView-DPM6YJWZ.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 58021
+      "bytes": 58852
     },
-    "dist/HLSView-DJGDJPXM.js": {
+    "dist/HLSView-DPM6YJWZ.js": {
       "imports": [
         {
-          "path": "dist/chunk-ERKB3GGI.js",
+          "path": "dist/chunk-S5NNUR2M.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-ERKB3GGI.js.map": {
+    "dist/chunk-S5NNUR2M.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3003590
+      "bytes": 3005199
     },
-    "dist/chunk-ERKB3GGI.js": {
+    "dist/chunk-S5NNUR2M.js": {
       "imports": [
         {
           "path": "react",
@@ -15047,7 +15047,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-DJGDJPXM.js",
+          "path": "dist/HLSView-DPM6YJWZ.js",
           "kind": "dynamic-import"
         },
         {
@@ -15469,7 +15469,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 17184
+          "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
@@ -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
@@ -16033,7 +16033,7 @@
           "bytesInOutput": 735
         },
         "src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx": {
-          "bytesInOutput": 7927
+          "bytesInOutput": 7547
         },
         "src/Prebuilt/components/Streaming/Common.jsx": {
           "bytesInOutput": 2247
@@ -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": 2325
         },
         "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": 7337
         },
         "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
@@ -16171,7 +16171,7 @@
           "bytesInOutput": 4473
         },
         "src/Prebuilt/components/TileMenu/TileMenuContent.tsx": {
-          "bytesInOutput": 11288
+          "bytesInOutput": 11356
         },
         "src/Prebuilt/components/TileMenu/utils.ts": {
           "bytesInOutput": 160
@@ -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
@@ -16312,7 +16312,7 @@
           "bytesInOutput": 27
         },
         "src/Prebuilt/components/Notifications/Notifications.tsx": {
-          "bytesInOutput": 7354
+          "bytesInOutput": 7908
         },
         "src/Prebuilt/components/Toast/ToastBatcher.js": {
           "bytesInOutput": 1768
@@ -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": 1219711
+      "bytes": 1220229
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.2-alpha.2",
+  "version": "0.2.2-alpha.4",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,10 +82,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.2-alpha.2",
-    "@100mslive/hms-virtual-background": "1.12.2-alpha.2",
-    "@100mslive/react-icons": "0.9.2-alpha.2",
-    "@100mslive/react-sdk": "0.9.2-alpha.2",
+    "@100mslive/hls-player": "0.2.2-alpha.4",
+    "@100mslive/hms-virtual-background": "1.12.2-alpha.4",
+    "@100mslive/react-icons": "0.9.2-alpha.4",
+    "@100mslive/react-sdk": "0.9.2-alpha.4",
     "@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": "dc2bba6723a123d51715cc2786e3798b6ff189a9"
+  "gitHead": "75d0bdf72d3ed51decf146ccdba347bf8dd8d25d"
 }

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/Notifications.tsx

@@ -38,6 +38,9 @@ import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppDat
 import { getMetadata } from '../../common/utils';
 // @ts-ignore: No implicit Any
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';
+
+const pollToastKey: Record<string, string> = {};
+
 export function Notifications() {
   const localPeerID = useHMSStore(selectLocalPeerID);
   const notification = useHMSNotifications();
@@ -151,7 +154,8 @@ export function Notifications() {
       case HMSNotificationTypes.POLL_STARTED:
         if (notification.data.startedBy !== localPeerID && screenProps.screenType !== 'hls_live_streaming') {
           const pollStartedBy = vanillaStore.getState(selectPeerNameByID(notification.data.startedBy)) || 'Participant';
-          ToastManager.addToast({
+
+          const pollToastID = ToastManager.addToast({
             title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`,
             action: (
               <Button
@@ -167,7 +171,16 @@ export function Notifications() {
                 {notification.data.type === 'quiz' ? 'Answer' : 'Vote'}
               </Button>
             ),
+            duration: Infinity,
           });
+          pollToastKey[notification.data.id] = pollToastID;
+        }
+        break;
+      case HMSNotificationTypes.POLL_STOPPED:
+        const pollID = notification?.data.id;
+        if (pollID && pollToastKey?.[pollID]) {
+          ToastManager.removeToast(pollToastKey?.[notification.data.id]);
+          delete pollToastKey[notification?.data.id];
         }
         break;
       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/CreatePollQuiz/PollsQuizMenu.jsx

@@ -67,7 +67,6 @@ const AddMenu = () => {
   const actions = useHMSActions();
   const [title, setTitle] = useState('');
   const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
-  const [anonymous, setAnonymous] = useState(false);
   const [hideVoteCount, setHideVoteCount] = useState(false);
   const [error, setError] = useState();
   const [titleError, setTitleError] = useState('');
@@ -141,12 +140,12 @@ const AddMenu = () => {
             Hide Vote Count
           </Text>
         </Flex>
-        <Flex align="center" css={{ mt: '$10' }}>
+        {/* <Flex align="center" css={{ mt: '$10' }}>
           <Switch onCheckedChange={value => setAnonymous(value)} css={{ mr: '$6' }} />
           <Text variant="body2" css={{ c: '$on_surface_medium' }}>
             Make Results Anonymous
           </Text>
-        </Flex>
+        </Flex> */}
         {/* <Timer
         timer={timer}
         setTimer={setTimer}
@@ -164,7 +163,7 @@ const AddMenu = () => {
               .createPoll({
                 id,
                 title,
-                anonymous,
+                anonymous: false,
                 rolesThatCanViewResponses: hideVoteCount && localPeerRoleName ? [localPeerRoleName] : undefined,
                 type: interactionType.toLowerCase(),
                 // duration: showTimerDropDown ? timer : undefined,

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,16 +28,18 @@ 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),
         },
       ]
     : [
-        { title: 'Your rank', value: peerEntry?.position ? `${peerEntry.position}/${summary.totalUsers}` : '-' },
+        { title: 'Your rank', value: peerEntry?.position || '-' },
         { 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}` : '-',