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

package/package.json

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

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}` : '-',

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

@@ -1,14 +1,8 @@
 // @ts-check
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { selectLocalPeer, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import {
-  CheckCircleIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  CrossCircleIcon,
-} from '@100mslive/react-icons';
-import { Box, Button, Flex, IconButton, Text } from '../../../../';
+import { CheckCircleIcon, ChevronDownIcon, CrossCircleIcon } from '@100mslive/react-icons';
+import { Box, Button, Flex, Text } from '../../../../';
 import { checkCorrectAnswer } from '../../../common/utils';
 import { MultipleChoiceOptions } from '../common/MultipleChoiceOptions';
 import { SingleChoiceOptions } from '../common/SingleChoiceOptions';
@@ -27,9 +21,7 @@ export const QuestionCard = ({
   options = [],
   answer,
   setCurrentIndex,
-  skippable = false,
   responses = [],
-  isTimed = false,
   rolesThatCanViewResponses,
 }) => {
   const actions = useHMSActions();
@@ -37,6 +29,7 @@ export const QuestionCard = ({
   const localPeerResponse = responses?.find(
     response => response.peer?.peerid === localPeer?.id || response.peer?.userid === localPeer?.customerUserId,
   );
+
   const isLocalPeerCreator = localPeer?.id === startedBy;
   const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
   const roleCanViewResponse =
@@ -48,27 +41,13 @@ export const QuestionCard = ({
 
   const isLive = pollState === 'started';
   const canRespond = isLive && !localPeerResponse;
-
+  const startTime = useRef(Date.now());
   const isCorrectAnswer = checkCorrectAnswer(answer, localPeerResponse, type);
 
-  const prev = index !== 1;
-  const next = index !== totalQuestions && (skippable || localPeerResponse);
-
-  const moveNext = useCallback(() => {
-    setCurrentIndex(curr => Math.min(totalQuestions, curr + 1));
-  }, [setCurrentIndex, totalQuestions]);
-
-  const movePrev = () => {
-    setCurrentIndex(curr => Math.max(1, curr - 1));
-  };
-
-  // const [textAnswer, setTextAnswer] = useState('');
   const [singleOptionAnswer, setSingleOptionAnswer] = useState();
   const [multipleOptionAnswer, setMultipleOptionAnswer] = useState(new Set());
   const [showOptions, setShowOptions] = useState(true);
 
-  // const stringAnswerExpected = [QUESTION_TYPE.LONG_ANSWER, QUESTION_TYPE.SHORT_ANSWER].includes(type);
-
   const respondedToQuiz = isQuiz && localPeerResponse && !localPeerResponse.skipped;
 
   const isValidVote = useMemo(() => {
@@ -83,24 +62,31 @@ export const QuestionCard = ({
     if (!isValidVote) {
       return;
     }
+
     await actions.interactivityCenter.addResponsesToPoll(pollID, [
       {
         questionIndex: index,
         option: singleOptionAnswer,
         options: Array.from(multipleOptionAnswer),
+        duration: Date.now() - startTime.current,
       },
     ]);
-  }, [actions, index, pollID, isValidVote, singleOptionAnswer, multipleOptionAnswer]);
+    startTime.current = Date.now();
 
-  const handleSkip = useCallback(async () => {
-    await actions.interactivityCenter.addResponsesToPoll(pollID, [
-      {
-        questionIndex: index,
-        skipped: true,
-      },
-    ]);
-    moveNext();
-  }, [actions, index, pollID, moveNext]);
+    if (isQuiz && index !== totalQuestions) {
+      setSingleOptionAnswer(undefined);
+      setMultipleOptionAnswer(new Set());
+    }
+  }, [
+    isValidVote,
+    actions.interactivityCenter,
+    pollID,
+    index,
+    singleOptionAnswer,
+    multipleOptionAnswer,
+    totalQuestions,
+    isQuiz,
+  ]);
 
   return (
     <Box
@@ -135,39 +121,6 @@ export const QuestionCard = ({
           {respondedToQuiz && !isCorrectAnswer ? <CrossCircleIcon height={20} width={20} /> : null}
           QUESTION {index} OF {totalQuestions}: {type.toUpperCase()}
         </Text>
-
-        {isTimed ? (
-          <Flex align="center" css={{ gap: '$4' }}>
-            <IconButton
-              disabled={!prev}
-              onClick={movePrev}
-              css={
-                prev
-                  ? { color: '$on_surface_high', cursor: 'pointer' }
-                  : {
-                      color: '$on_surface_low',
-                      cursor: 'not-allowed',
-                    }
-              }
-            >
-              <ChevronLeftIcon height={16} width={16} />
-            </IconButton>
-            <IconButton
-              disabled={!next}
-              onClick={moveNext}
-              css={
-                next
-                  ? { color: '$on_surface_high', cursor: 'pointer' }
-                  : {
-                      color: '$on_surface_low',
-                      cursor: 'not-allowed',
-                    }
-              }
-            >
-              <ChevronRightIcon height={16} width={16} />
-            </IconButton>
-          </Flex>
-        ) : null}
       </Flex>
 
       <Flex justify="between" css={{ my: '$md' }}>
@@ -185,10 +138,10 @@ export const QuestionCard = ({
       <Box css={{ maxHeight: showOptions ? '$80' : '0', transition: 'max-height 0.3s ease', overflowY: 'hidden' }}>
         {type === QUESTION_TYPE.SINGLE_CHOICE ? (
           <SingleChoiceOptions
+            key={index}
             questionIndex={index}
             isQuiz={isQuiz}
             canRespond={canRespond}
-            response={localPeerResponse}
             correctOptionIndex={answer?.option}
             options={options}
             setAnswer={setSingleOptionAnswer}
@@ -196,14 +149,15 @@ export const QuestionCard = ({
             showVoteCount={showVoteCount}
             localPeerResponse={localPeerResponse}
             isStopped={pollState === 'stopped'}
+            answer={singleOptionAnswer}
           />
         ) : null}
+
         {type === QUESTION_TYPE.MULTIPLE_CHOICE ? (
           <MultipleChoiceOptions
             questionIndex={index}
             isQuiz={isQuiz}
             canRespond={canRespond}
-            response={localPeerResponse}
             correctOptionIndexes={answer?.options}
             options={options}
             selectedOptions={multipleOptionAnswer}
@@ -214,14 +168,16 @@ export const QuestionCard = ({
             isStopped={pollState === 'stopped'}
           />
         ) : null}
+
         {isLive && (
           <QuestionActions
             isValidVote={isValidVote}
-            skippable={skippable}
-            onSkip={handleSkip}
             onVote={handleVote}
             response={localPeerResponse}
             isQuiz={isQuiz}
+            incrementIndex={() => {
+              setCurrentIndex(curr => Math.min(totalQuestions, curr + 1));
+            }}
           />
         )}
       </Box>
@@ -229,15 +185,9 @@ export const QuestionCard = ({
   );
 };
 
-const QuestionActions = ({ isValidVote, skippable, response, isQuiz, onVote, onSkip }) => {
+const QuestionActions = ({ isValidVote, response, isQuiz, onVote, incrementIndex }) => {
   return (
     <Flex align="center" justify="end" css={{ gap: '$4', w: '100%' }}>
-      {skippable && !response ? (
-        <Button variant="standard" onClick={onSkip} css={{ p: '$xs $10', fontWeight: '$semiBold' }}>
-          Skip
-        </Button>
-      ) : null}
-
       {response ? (
         <Text css={{ fontWeight: '$semiBold', color: '$on_surface_medium' }}>
           {response.skipped ? 'Skipped' : null}
@@ -245,7 +195,14 @@ const QuestionActions = ({ isValidVote, skippable, response, isQuiz, onVote, onS
           {!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}
+          onClick={() => {
+            onVote();
+            incrementIndex();
+          }}
+        >
           {isQuiz ? 'Answer' : 'Vote'}
         </Button>
       )}

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

@@ -28,7 +28,6 @@ export const StandardView = ({ poll }: { poll: HMSPoll }) => {
           result={question.result}
           totalQuestions={poll.questions?.length || 0}
           options={question.options}
-          skippable={question.skippable}
           responses={question.responses}
           answer={question.answer}
           setCurrentIndex={() => {

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

@@ -4,9 +4,10 @@ import { HMSPoll } from '@100mslive/react-sdk';
 import { QuestionCard } from './QuestionCard';
 
 export const TimedView = ({ poll }: { poll: HMSPoll }) => {
-  // backend question index starts at 1
+  // Backend question index starts at 1
   const [currentIndex, setCurrentIndex] = useState(1);
   const activeQuestion = poll.questions?.find(question => question.index === currentIndex);
+
   if (!activeQuestion) {
     return null;
   }
@@ -23,12 +24,10 @@ export const TimedView = ({ poll }: { poll: HMSPoll }) => {
       result={activeQuestion?.result}
       totalQuestions={poll.questions?.length || 0}
       options={activeQuestion.options}
-      skippable={activeQuestion.skippable || false}
       responses={activeQuestion.responses}
       answer={activeQuestion.answer}
       setCurrentIndex={setCurrentIndex}
       rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
-      isTimed
     />
   );
 };

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

@@ -23,6 +23,8 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
   const pollCreatorName = useHMSStore(selectPeerNameByID(poll?.createdBy));
   const isLocalPeerCreator = useHMSStore(selectLocalPeerID) === poll?.createdBy;
   const { setPollView } = usePollViewState();
+  // Sets view - linear or vertical, toggles timer indicator
+  const showSingleView = poll?.type === 'quiz' && poll.state === 'started';
 
   if (!poll) {
     return null;
@@ -30,8 +32,6 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
 
   const canViewLeaderboard = poll.type === 'quiz' && poll.state === 'stopped' && !poll.anonymous;
 
-  // Sets view - linear or vertical, toggles timer indicator
-  const isTimed = (poll.duration || 0) > 0;
   const isLive = poll.state === 'started';
 
   return (
@@ -74,7 +74,7 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
           </Text>
         ) : null}
 
-        {isTimed ? <TimedView poll={poll} /> : <StandardView poll={poll} />}
+        {showSingleView ? <TimedView poll={poll} /> : <StandardView poll={poll} />}
 
         {poll.state === 'started' && isLocalPeerCreator && (
           <Button

package/src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx

@@ -10,7 +10,6 @@ export const MultipleChoiceOptions = ({
   questionIndex,
   options,
   canRespond,
-  response,
   totalResponses,
   selectedOptions,
   setSelectedOptions,
@@ -39,7 +38,7 @@ export const MultipleChoiceOptions = ({
               <Checkbox.Root
                 id={`${questionIndex}-${option.index}`}
                 disabled={!canRespond}
-                checked={response?.options?.includes(option.index)}
+                checked={localPeerResponse?.options?.includes(option.index)}
                 onCheckedChange={checked => handleCheckedChange(checked, option.index)}
                 css={{
                   cursor: canRespond ? 'pointer' : 'not-allowed',

package/src/Prebuilt/components/Polls/common/SingleChoiceOptions.jsx

@@ -9,7 +9,6 @@ import { VoteProgress } from './VoteProgress';
 export const SingleChoiceOptions = ({
   questionIndex,
   options,
-  response,
   canRespond,
   setAnswer,
   totalResponses,
@@ -18,9 +17,10 @@ export const SingleChoiceOptions = ({
   isStopped,
   isQuiz,
   localPeerResponse,
+  answer,
 }) => {
   return (
-    <RadioGroup.Root value={response?.option} onValueChange={value => setAnswer(value)}>
+    <RadioGroup.Root value={answer || null} onValueChange={value => setAnswer(value)}>
       <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
         {options.map(option => {
           return (
@@ -65,8 +65,10 @@ export const SingleChoiceOptions = ({
 
               <Flex direction="column" css={{ flexGrow: '1' }}>
                 <Flex css={{ w: '100%' }}>
-                  <Text css={{ display: 'flex', flexGrow: '1' }}>
-                    <Label htmlFor={`${questionIndex}-${option.index}`}>{option.text}</Label>
+                  <Text css={{ display: 'flex', flexGrow: '1', color: '$on_surface_high' }}>
+                    <Label style={{ color: 'inherit' }} htmlFor={`${questionIndex}-${option.index}`}>
+                      {option.text}
+                    </Label>
                   </Text>
                   {showVoteCount && <VoteCount voteCount={option.voteCount} />}
                 </Flex>

package/src/Prebuilt/components/Polls/common/StatusIndicator.tsx

@@ -15,7 +15,7 @@ export const StatusIndicator = ({ isLive }: { isLive: boolean }) => {
           variant="caption"
           css={{
             fontWeight: '$semiBold',
-            color: '$on_surface_high',
+            color: '$on_primary_high',
           }}
         >
           {isLive ? 'LIVE' : 'ENDED'}

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -160,20 +160,7 @@ const PreviewJoin = ({
             <Chip content={getParticipantChipContent(peerCount)} hideIfNoContent />
           </Flex>
         </Flex>
-        {toggleVideo ? (
-          <Flex
-            align="center"
-            justify="center"
-            css={{
-              mt: '$14',
-              '@md': { mt: 0 },
-              '@sm': { width: '100%' },
-              flexDirection: 'column',
-            }}
-          >
-            <PreviewTile name={name} error={previewError} />
-          </Flex>
-        ) : null}
+        {toggleVideo ? <PreviewTile name={name} error={previewError} /> : null}
         <Box css={{ w: '100%', maxWidth: `${Math.max(aspectRatio, 1) * 360}px` }}>
           <PreviewControls hideSettings={!toggleVideo && !toggleAudio} vbEnabled={!!virtual_background} />
           <PreviewForm
@@ -225,9 +212,12 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
         bg: '$surface_default',
         aspectRatio,
         height: 'min(360px, 70vh)',
+        width: 'auto',
         maxWidth: '640px',
         overflow: 'clip',
+        mt: '$14',
         '@md': {
+          mt: 0,
           width: 'min(220px, 70vw)',
           maxWidth: '100%',
           my: '$4',

package/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx

@@ -10,6 +10,7 @@ export const RequestPrompt = ({
   body,
   actionText = 'Accept',
   onAction,
+  disableActions = false,
 }: {
   open?: boolean;
   onOpenChange: (value: boolean) => void;
@@ -17,6 +18,7 @@ export const RequestPrompt = ({
   body: React.ReactNode;
   actionText?: string;
   onAction: () => void;
+  disableActions?: boolean;
 }) => {
   const isMobile = useMedia(cssConfig.media.md);
 
@@ -26,7 +28,7 @@ export const RequestPrompt = ({
         <Sheet.Content css={{ py: '$8' }}>
           <Text css={{ fontWeight: '$semiBold', c: '$on_surface_high', '@md': { px: '$8' } }}>{title}</Text>
           {body}
-          <RequestActions actionText={actionText} onAction={onAction} />
+          <RequestActions actionText={actionText} onAction={onAction} disabled={disableActions} />
         </Sheet.Content>
       </Sheet.Root>
     );
@@ -40,24 +42,32 @@ export const RequestPrompt = ({
             <Text variant="h6">{title}</Text>
           </Dialog.Title>
           <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
-          <RequestActions actionText={actionText} onAction={onAction} />
+          <RequestActions actionText={actionText} onAction={onAction} disabled={disableActions} />
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
   );
 };
 
-const RequestActions = ({ onAction, actionText }: { actionText?: string; onAction: () => void }) => (
+const RequestActions = ({
+  onAction,
+  actionText,
+  disabled = false,
+}: {
+  actionText?: string;
+  onAction: () => void;
+  disabled?: boolean;
+}) => (
   <Flex justify="center" align="center" css={{ width: '100%', gap: '$md', '@md': { mt: '$8', px: '$8' } }}>
     <Box css={{ width: '50%' }}>
       <Dialog.Close css={{ width: '100%' }}>
-        <Button variant="standard" outlined css={{ width: '100%' }}>
+        <Button variant="standard" outlined css={{ width: '100%' }} disabled={disabled}>
           Decline
         </Button>
       </Dialog.Close>
     </Box>
     <Box css={{ width: '50%' }}>
-      <Button variant="primary" css={{ width: '100%' }} onClick={onAction}>
+      <Button variant="primary" css={{ width: '100%' }} onClick={onAction} disabled={disabled}>
         {actionText}
       </Button>
     </Box>

package/src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import {
+  selectIsInPreview,
   selectLocalPeerName,
   selectLocalPeerRoleName,
   selectRoleChangeRequest,
@@ -20,6 +21,7 @@ import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 export const RoleChangeRequestModal = () => {
   const hmsActions = useHMSActions();
   const { updateMetaData } = useMyMetadata();
+  const isPreview = useHMSStore(selectIsInPreview);
   const currentRole = useHMSStore(selectLocalPeerRoleName);
   const roleChangeRequest = useHMSStore(selectRoleChangeRequest);
   const name = useHMSStore(selectLocalPeerName);
@@ -87,6 +89,7 @@ export const RoleChangeRequestModal = () => {
         await hmsActions.lowerLocalPeerHand();
       }}
       actionText="Accept"
+      disableActions={!isPreview}
     />
   );
 };

package/src/Prebuilt/components/VirtualBackground/VBHandler.tsx

@@ -19,8 +19,18 @@ export class VBPlugin {
     if (this.effectsPlugin) {
       return this.effectsPlugin?.getBackground();
     } else {
+      const background = this.hmsPlugin?.getBackground();
       // @ts-ignore
-      return this.hmsPlugin?.background?.src || this.hmsPlugin?.background;
+      return background?.src || background;
+    }
+  };
+
+  getBlurAmount = () => {
+    if (this.effectsPlugin) {
+      return this.effectsPlugin.getBlurAmount();
+    } else {
+      // Treating HMS VB intensity as a fixed value
+      return this.hmsPlugin?.getBackground() === HMSVirtualBackgroundTypes.BLUR ? 1 : 0;
     }
   };