@100mslive/roomkit-react 0.3.25-alpha.9 → 0.3.26-alpha.1

package/dist/meta.cjs.json

@@ -1359,7 +1359,7 @@
       "format": "esm"
     },
     "src/Stats/Stats.tsx": {
-      "bytes": 8401,
+      "bytes": 8508,
       "imports": [
         {
           "path": "react",
@@ -3102,7 +3102,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AudioVideoToggle.tsx": {
-      "bytes": 13759,
+      "bytes": 13760,
       "imports": [
         {
           "path": "react",
@@ -4739,7 +4739,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/StatsForNerds.jsx": {
-      "bytes": 13474,
+      "bytes": 13543,
       "imports": [
         {
           "path": "react",
@@ -5779,7 +5779,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 375693,
+      "bytes": 375761,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -8324,7 +8324,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/QuestionCard.jsx": {
-      "bytes": 7266,
+      "bytes": 7496,
       "imports": [
         {
           "path": "react",
@@ -11321,7 +11321,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2753-VUNFsMls4FlC/1939b41fc332/tldraw.css": {
+    "../../../../../../../tmp/tmp-2748-1OMZvrJdpQSE/193b98190f22/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11371,7 +11371,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2753-VUNFsMls4FlC/1939b41fbc80/index.css": {
+    "../../../../../../../tmp/tmp-2748-1OMZvrJdpQSE/193b981908a0/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11380,7 +11380,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2753-VUNFsMls4FlC/1939b41fc332/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2748-1OMZvrJdpQSE/193b98190f22/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11455,7 +11455,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2753-VUNFsMls4FlC/1939b41fbc80/index.css",
+          "path": "../../../../../../../tmp/tmp-2748-1OMZvrJdpQSE/193b981908a0/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -15714,7 +15714,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3624491
+      "bytes": 3625378
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -19052,7 +19052,7 @@
       "cssBundle": "dist/index.cjs.css",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18042
+          "bytesInOutput": 18054
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224306
@@ -19274,7 +19274,7 @@
           "bytesInOutput": 27
         },
         "src/Stats/Stats.tsx": {
-          "bytesInOutput": 9337
+          "bytesInOutput": 9431
         },
         "src/Stats/formatBytes.ts": {
           "bytesInOutput": 471
@@ -19406,7 +19406,7 @@
           "bytesInOutput": 3740
         },
         "src/Prebuilt/components/AudioVideoToggle.tsx": {
-          "bytesInOutput": 15351
+          "bytesInOutput": 15352
         },
         "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx": {
           "bytesInOutput": 3499
@@ -19544,7 +19544,7 @@
           "bytesInOutput": 8368
         },
         "src/Prebuilt/components/StatsForNerds.jsx": {
-          "bytesInOutput": 15803
+          "bytesInOutput": 15919
         },
         "src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx": {
           "bytesInOutput": 5478
@@ -19781,7 +19781,7 @@
           "bytesInOutput": 1383
         },
         "src/Prebuilt/components/Polls/Voting/QuestionCard.jsx": {
-          "bytesInOutput": 7868
+          "bytesInOutput": 8123
         },
         "src/Prebuilt/components/Polls/Voting/TimedVoting.tsx": {
           "bytesInOutput": 1786
@@ -19930,7 +19930,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 3051
         },
-        "../../../../../../../tmp/tmp-2753-VUNFsMls4FlC/1939b41fbc80/index.css": {
+        "../../../../../../../tmp/tmp-2748-1OMZvrJdpQSE/193b981908a0/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -20159,13 +20159,13 @@
           "bytesInOutput": 4736
         },
         "src/Diagnostics/ConnectivityTest.tsx": {
-          "bytesInOutput": 15474
+          "bytesInOutput": 15472
         },
         "src/Diagnostics/VideoTest.tsx": {
           "bytesInOutput": 2777
         }
       },
-      "bytes": 1504648
+      "bytes": 1505124
     },
     "dist/index.cjs.css.map": {
       "imports": [],
@@ -20227,10 +20227,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2753-VUNFsMls4FlC/1939b41fc332/tldraw.css": {
+        "../../../../../../../tmp/tmp-2748-1OMZvrJdpQSE/193b98190f22/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2753-VUNFsMls4FlC/1939b41fbc80/index.css": {
+        "../../../../../../../tmp/tmp-2748-1OMZvrJdpQSE/193b981908a0/index.css": {
           "bytesInOutput": 401
         }
       },

package/dist/meta.esbuild.json

@@ -1359,7 +1359,7 @@
       "format": "esm"
     },
     "src/Stats/Stats.tsx": {
-      "bytes": 8401,
+      "bytes": 8508,
       "imports": [
         {
           "path": "react",
@@ -3102,7 +3102,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AudioVideoToggle.tsx": {
-      "bytes": 13759,
+      "bytes": 13760,
       "imports": [
         {
           "path": "react",
@@ -4739,7 +4739,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/StatsForNerds.jsx": {
-      "bytes": 13474,
+      "bytes": 13543,
       "imports": [
         {
           "path": "react",
@@ -5779,7 +5779,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 375693,
+      "bytes": 375761,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -8324,7 +8324,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Polls/Voting/QuestionCard.jsx": {
-      "bytes": 7266,
+      "bytes": 7496,
       "imports": [
         {
           "path": "react",
@@ -11321,7 +11321,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2753-5MlpEP9SW0c7/1939b41fc8f3/tldraw.css": {
+    "../../../../../../../tmp/tmp-2748-0N4i0vvstTKq/193b98190f33/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11371,7 +11371,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2753-5MlpEP9SW0c7/1939b41fc2a1/index.css": {
+    "../../../../../../../tmp/tmp-2748-0N4i0vvstTKq/193b98190e51/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11380,7 +11380,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2753-5MlpEP9SW0c7/1939b41fc8f3/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2748-0N4i0vvstTKq/193b98190f33/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11455,7 +11455,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2753-5MlpEP9SW0c7/1939b41fc2a1/index.css",
+          "path": "../../../../../../../tmp/tmp-2748-0N4i0vvstTKq/193b98190e51/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -15714,7 +15714,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3664414
+      "bytes": 3665423
     },
     "dist/index.js": {
       "imports": [
@@ -19118,7 +19118,7 @@
       "cssBundle": "dist/index.css",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18042
+          "bytesInOutput": 18054
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224301
@@ -19340,7 +19340,7 @@
           "bytesInOutput": 27
         },
         "src/Stats/Stats.tsx": {
-          "bytesInOutput": 8580
+          "bytesInOutput": 8674
         },
         "src/Stats/formatBytes.ts": {
           "bytesInOutput": 471
@@ -19472,7 +19472,7 @@
           "bytesInOutput": 3306
         },
         "src/Prebuilt/components/AudioVideoToggle.tsx": {
-          "bytesInOutput": 14235
+          "bytesInOutput": 14236
         },
         "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx": {
           "bytesInOutput": 3293
@@ -19610,7 +19610,7 @@
           "bytesInOutput": 7700
         },
         "src/Prebuilt/components/StatsForNerds.jsx": {
-          "bytesInOutput": 14466
+          "bytesInOutput": 14582
         },
         "src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx": {
           "bytesInOutput": 5008
@@ -19847,7 +19847,7 @@
           "bytesInOutput": 1304
         },
         "src/Prebuilt/components/Polls/Voting/QuestionCard.jsx": {
-          "bytesInOutput": 7598
+          "bytesInOutput": 7875
         },
         "src/Prebuilt/components/Polls/Voting/TimedVoting.tsx": {
           "bytesInOutput": 1738
@@ -19996,7 +19996,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-2753-5MlpEP9SW0c7/1939b41fc2a1/index.css": {
+        "../../../../../../../tmp/tmp-2748-0N4i0vvstTKq/193b98190e51/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -20132,7 +20132,7 @@
           "bytesInOutput": 1686
         },
         "src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx": {
-          "bytesInOutput": 3074
+          "bytesInOutput": 3079
         },
         "src/Prebuilt/components/Toast/ToastBatcher.js": {
           "bytesInOutput": 1983
@@ -20225,13 +20225,13 @@
           "bytesInOutput": 4418
         },
         "src/Diagnostics/ConnectivityTest.tsx": {
-          "bytesInOutput": 13776
+          "bytesInOutput": 13774
         },
         "src/Diagnostics/VideoTest.tsx": {
           "bytesInOutput": 2632
         }
       },
-      "bytes": 1449703
+      "bytes": 1450206
     },
     "dist/index.css.map": {
       "imports": [],
@@ -20293,10 +20293,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2753-5MlpEP9SW0c7/1939b41fc8f3/tldraw.css": {
+        "../../../../../../../tmp/tmp-2748-0N4i0vvstTKq/193b98190f33/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2753-5MlpEP9SW0c7/1939b41fc2a1/index.css": {
+        "../../../../../../../tmp/tmp-2748-0N4i0vvstTKq/193b98190e51/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.25-alpha.9",
+  "version": "0.3.26-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.25-alpha.9",
+    "@100mslive/hls-player": "0.3.26-alpha.1",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.25-alpha.9",
-    "@100mslive/hms-whiteboard": "0.0.15-alpha.9",
-    "@100mslive/react-icons": "0.10.25-alpha.9",
-    "@100mslive/react-sdk": "0.10.25-alpha.9",
+    "@100mslive/hms-virtual-background": "1.13.26-alpha.1",
+    "@100mslive/hms-whiteboard": "0.0.15-alpha.15",
+    "@100mslive/react-icons": "0.10.26-alpha.1",
+    "@100mslive/react-sdk": "0.10.26-alpha.1",
     "@100mslive/types-prebuilt": "0.12.12",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -117,5 +117,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "bf1ea5c8a4ade738ea19a95fd3d5f05f4e7e0c2b"
+  "gitHead": "47edda2d774cd4f278d4e6c566c89f4395696314"
 }

package/src/Diagnostics/ConnectivityTest.tsx

@@ -11,7 +11,6 @@ import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
 
 const Regions = {
   in: 'India',
-  eu: 'Europe',
   us: 'United States',
 };
 
@@ -164,7 +163,7 @@ const AudioStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
           <DetailedInfo title="Bitrate Sent" value={formatBytes(stats.bitrateSent, 'b/s')} />
           <DetailedInfo title="Bitrate Received" value={formatBytes(stats.bitrateReceived, 'b/s')} />
           <DetailedInfo title="Round Trip Time" value={`${stats.roundTripTime} ms`} />
-          <DetailedInfo title="Jitter" value={`${stats.jitter} s`} />
+          <DetailedInfo title="Jitter" value={`${stats.jitter * 1000} ms`} />
         </Flex>
       )}
     </ConnectivityTestStepResult>
@@ -183,7 +182,7 @@ const VideoStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
           <DetailedInfo title="Bitrate Sent" value={formatBytes(stats.bitrateSent, 'b/s')} />
           <DetailedInfo title="Bitrate Received" value={formatBytes(stats.bitrateReceived, 'b/s')} />
           <DetailedInfo title="Round Trip Time" value={`${stats.roundTripTime} ms`} />
-          <DetailedInfo title="Jitter" value={`${stats.jitter} s`} />
+          <DetailedInfo title="Jitter" value={`${stats.jitter * 1000} ms`} />
         </Flex>
       )}
     </ConnectivityTestStepResult>

package/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -155,7 +155,7 @@ export const NoiseCancellation = ({
     return (
       <ActionTile.Root
         active={isNoiseCancellationEnabled && isKrispPluginAdded}
-        disable={inProgress}
+        disabled={inProgress}
         onClick={async () => {
           await setNoiseCancellationWithPlugin(!isNoiseCancellationEnabled);
           setOpenOptionsSheet?.(false);

package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx

@@ -1,7 +1,14 @@
 // @ts-check
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { match } from 'ts-pattern';
-import { selectLocalPeer, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import {
+  HMSRoomState,
+  selectLocalPeer,
+  selectLocalPeerRoleName,
+  selectRoomState,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 import { CheckCircleIcon, ChevronDownIcon, CrossCircleIcon } from '@100mslive/react-icons';
 import { Box, Button, Flex, Text } from '../../../../';
 import { checkCorrectAnswer } from '../../../common/utils';
@@ -27,7 +34,7 @@ export const QuestionCard = ({
 }) => {
   const actions = useHMSActions();
   const localPeer = useHMSStore(selectLocalPeer);
-
+  const roomState = useHMSStore(selectRoomState);
   const isLocalPeerCreator = localPeer?.id === startedBy;
   const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
   const roleCanViewResponse =
@@ -183,13 +190,19 @@ export const QuestionCard = ({
         ) : null}
       </Box>
       {isLive && (
-        <QuestionActions isValidVote={isValidVote} onVote={handleVote} response={localPeerChoice} isQuiz={isQuiz} />
+        <QuestionActions
+          disableVote={roomState !== HMSRoomState.Connected}
+          isValidVote={isValidVote}
+          onVote={handleVote}
+          response={localPeerChoice}
+          isQuiz={isQuiz}
+        />
       )}
     </Box>
   );
 };
 
-const QuestionActions = ({ isValidVote, response, isQuiz, onVote }) => {
+const QuestionActions = ({ isValidVote, response, isQuiz, onVote, disableVote }) => {
   return (
     <Flex align="center" justify="end" css={{ gap: '$4', w: '100%' }}>
       {response ? (
@@ -199,7 +212,7 @@ const QuestionActions = ({ isValidVote, response, isQuiz, onVote }) => {
           {!isQuiz && !response.skipped ? 'Voted' : null}
         </Text>
       ) : (
-        <Button css={{ p: '$xs $10', fontWeight: '$semiBold' }} disabled={!isValidVote} onClick={onVote}>
+        <Button css={{ p: '$xs $10', fontWeight: '$semiBold' }} disabled={!isValidVote || disableVote} onClick={onVote}>
           {isQuiz ? 'Answer' : 'Vote'}
         </Button>
       )}

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -275,7 +275,7 @@ const LocalPeerStats = () => {
   return (
     <Flex css={{ flexWrap: 'wrap', gap: '$10' }}>
       <StatsRow label="Packets Lost" value={stats.subscribe?.packetsLost} />
-      <StatsRow label="Jitter" value={stats.subscribe?.jitter} />
+      <StatsRow label="Jitter" value={`${((stats.subscribe?.jitter ?? 0) * 1000).toFixed(2)} ms`} />
       <StatsRow label="Publish Bitrate" value={formatBytes(stats.publish?.bitrate, 'b/s')} />
       <StatsRow label="Subscribe Bitrate" value={formatBytes(stats.subscribe?.bitrate, 'b/s')} />
       <StatsRow
@@ -316,7 +316,7 @@ const TrackStats = ({ trackID, layer, local }) => {
       <StatsRow label="Type" value={stats.type + ' ' + stats.kind} />
       <StatsRow label="Bitrate" value={formatBytes(stats.bitrate, 'b/s')} />
       <StatsRow label="Packets Lost" value={stats.packetsLost} />
-      <StatsRow label="Jitter" value={stats.jitter?.toFixed(3)} />
+      <StatsRow label="Jitter" value={`${((stats.subscribe?.jitter ?? 0) * 1000).toFixed(2)} ms`} />
       <StatsRow
         label={inbound ? 'Bytes Received' : 'Bytes Sent'}
         value={formatBytes(inbound ? stats.bytesReceived : stats.bytesSent)}

package/src/Stats/Stats.tsx

@@ -159,12 +159,21 @@ const PacketLostAndJitter = ({
   const isLocalPeer = audioTrackStats?.type.includes('outbound') || videoTrackStats?.type.includes('outbound');
   const audioStats = isLocalPeer ? audioTrackStats?.remote : audioTrackStats;
   const videoStats = isLocalPeer ? videoTrackStats?.remote : videoTrackStats;
+
   return (
     <>
       <TrackPacketsLostRow label="Packet Loss(V)" stats={videoStats} />
       <TrackPacketsLostRow label="Packet Loss(A)" stats={audioStats} />
-      <StatsRow show={isNotNullish(videoStats?.jitter)} label="Jitter(V)" value={videoStats?.jitter?.toFixed(4)} />
-      <StatsRow show={isNotNullish(audioStats?.jitter)} label="Jitter(A)" value={audioStats?.jitter?.toFixed(4)} />
+      <StatsRow
+        show={isNotNullish(videoStats?.jitter)}
+        label="Jitter(V)"
+        value={`${((videoStats?.jitter ?? 0) * 1000).toFixed(2)} ms`}
+      />
+      <StatsRow
+        show={isNotNullish(audioStats?.jitter)}
+        label="Jitter(A)"
+        value={`${((audioStats?.jitter ?? 0) * 1000).toFixed(2)} ms`}
+      />
     </>
   );
 };