@100mslive/roomkit-react 0.3.25 → 0.3.26

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`}
+      />
     </>
   );
 };