@100mslive/roomkit-react 0.3.2 → 0.3.3-alpha.1

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
-import { HMSException, selectLocalPeer, useAVToggle, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { HMSException, selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled, Text } from '../../..';
 import { IconButton } from '../../../IconButton';
@@ -89,8 +89,6 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   const defaultSelection = useDefaultChatSelection();
   const selection = selectedPeer.name || selectedRole || defaultSelection;
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-  const { toggleAudio, toggleVideo } = useAVToggle();
-  const noAVPermissions = !(toggleAudio || toggleVideo);
   const isMwebHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
 
@@ -275,7 +273,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
                 }}
                 gap="2"
               >
-                {noAVPermissions ? <RaiseHand css={{ bg: '$surface_default' }} /> : null}
+                <RaiseHand css={{ bg: '$surface_default' }} />
                 <MoreSettings elements={elements} screenType={screenType} />
               </Flex>
             </>

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -6,7 +6,6 @@ import {
   selectAppData,
   selectIsConnectedToRoom,
   selectRoomState,
-  useAVToggle,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
@@ -54,8 +53,6 @@ export const ConferenceScreen = () => {
   const dropdownListRef = useRef<string[]>();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
 
-  const { toggleAudio, toggleVideo } = useAVToggle();
-  const noAVPermissions = !(toggleAudio || toggleVideo);
   // using it in hls stream to show action button when chat is disabled
   const showChat = !!screenProps.elements?.chat;
   const autoRoomJoined = useRef(isPreviewScreenEnabled);
@@ -202,7 +199,7 @@ export const ConferenceScreen = () => {
             justify="end"
             gap="2"
           >
-            {noAVPermissions ? <RaiseHand /> : null}
+            <RaiseHand />
             <MoreSettings elements={screenProps.elements} screenType={screenProps.screenType} />
             <Box
               css={{

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
-import { useAVToggle } from '@100mslive/react-sdk';
 import { config as cssConfig, Footer as AppFooter } from '../../..';
 // @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
@@ -41,8 +40,6 @@ export const Footer = ({
   const isOverlayChat = !!elements?.chat?.is_overlay;
   const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
 
-  const { toggleAudio, toggleVideo } = useAVToggle();
-  const noAVPermissions = !(toggleAudio || toggleVideo);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const { showPolls } = useShowPolls();
@@ -90,7 +87,7 @@ export const Footer = ({
       >
         {isMobile ? (
           <>
-            {noAVPermissions ? <RaiseHand /> : null}
+            <RaiseHand />
             {elements?.chat && <ChatToggle />}
             <MoreSettings elements={elements} screenType={screenType} />
           </>

package/src/Prebuilt/components/Footer/RoleAccordion.tsx

@@ -93,6 +93,7 @@ export const RoleAccordion = ({
   return (
     <Accordion.Item value={roleName} css={{ '&:hover .role_actions': { visibility: 'visible' }, mb: '$8' }} ref={ref}>
       <Accordion.Header
+        chevronID={`role_accordion_btn_${roleName}`}
         iconStyles={{ c: '$on_surface_high' }}
         css={{
           textTransform: 'capitalize',
@@ -153,7 +154,7 @@ export const RoleAccordion = ({
             <HorizontalDivider />
             <Flex css={{ w: '100%', p: '$6', gap: '$4' }} justify="center">
               <Button variant="standard" onClick={lowerAllHands} icon css={{ pl: '$2' }}>
-                <CrossIcon /> Lower All Hands
+                <CrossIcon /> Lower all hands
               </Button>
               {canBringToStage && (
                 <Button onClick={bringAllToStage} icon css={{ pl: '$2' }}>

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx

@@ -29,7 +29,6 @@ import { FullScreenItem } from '../FullScreenItem';
 import { MuteAllModal } from '../MuteAllModal';
 // @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
-// @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
 // @ts-ignore: No implicit any
 import { APP_DATA, isMacOS } from '../../../common/constants';

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -6,7 +6,6 @@ import {
   selectIsConnectedToRoom,
   selectPeerCount,
   selectPermissions,
-  useAVToggle,
   useHMSActions,
   useHMSStore,
   useRecordingStreaming,
@@ -51,7 +50,6 @@ import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane'
 import { useShowPolls } from '../../AppData/useUISettings';
 // @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
-// @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
 import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../../../common/hooks';
@@ -95,8 +93,6 @@ export const MwebOptions = ({
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
-  const { toggleAudio, toggleVideo } = useAVToggle();
-  const noAVPermissions = !(toggleAudio || toggleVideo);
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
   const { title, description } = useRoomLayoutHeader();
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
@@ -175,7 +171,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             )}
 
-            {!noAVPermissions ? (
+            {elements.hand_raise ? (
               <ActionTile.Root
                 active={isHandRaised}
                 onClick={() => {

package/src/Prebuilt/components/Polls/CreateQuestions/CreateQuestions.jsx

@@ -75,15 +75,15 @@ export function CreateQuestions() {
                 const updatedQuestions = [...questions.slice(0, index), questionParams, ...questions.slice(index + 1)];
                 setQuestions(updatedQuestions);
                 const validQuestions = updatedQuestions.filter(question => isValidQuestion(question));
-
                 await actions.interactivityCenter.addQuestionsToPoll(id, validQuestions);
               }}
               isQuiz={isQuiz}
-              removeQuestion={questionID =>
-                setQuestions(prev => {
-                  return prev.filter(questionFromSet => questionID !== questionFromSet?.draftID);
-                })
-              }
+              removeQuestion={async questionID => {
+                const updatedQuestions = questions.filter(questionFromSet => questionID !== questionFromSet?.draftID);
+                setQuestions(updatedQuestions);
+                const validQuestions = updatedQuestions.filter(question => isValidQuestion(question));
+                await actions.interactivityCenter.addQuestionsToPoll(id, validQuestions);
+              }}
               convertToDraft={questionID =>
                 setQuestions(prev => {
                   const copyOfQuestions = [...prev];

package/src/Prebuilt/components/Polls/CreateQuestions/SavedQuestion.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { HMSPollQuestion } from '@100mslive/react-sdk';
 import { CheckCircleIcon } from '@100mslive/react-icons';
 import { Button, Flex, Text } from '../../../../';
@@ -15,6 +15,18 @@ export const SavedQuestion = ({
   length: number;
   convertToDraft: (draftID: number) => void;
 }) => {
+  const answerArray = useMemo(() => {
+    const updatedAnswerArray = [];
+    const { option, options } = question?.answer ?? {};
+    if (option) {
+      updatedAnswerArray.push(option);
+    }
+    if (options) {
+      updatedAnswerArray.push(...options);
+    }
+    return updatedAnswerArray;
+  }, [question?.answer]);
+
   return (
     <>
       <Text variant="overline" css={{ c: '$on_surface_low', textTransform: 'uppercase' }}>
@@ -30,7 +42,7 @@ export const SavedQuestion = ({
             {option.text}
           </Text>
           {/* @ts-ignore */}
-          {option.isCorrectAnswer && (
+          {(answerArray.includes(index + 1) || option.isCorrectAnswer) && (
             <Flex css={{ color: '$alert_success', mx: '$xs' }}>
               <CheckCircleIcon height={24} width={24} />
             </Flex>

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

@@ -33,7 +33,7 @@ export const MultipleChoiceOptions = ({
     <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
       {options.map(option => {
         return (
-          <Flex align="center" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$9' }}>
+          <Flex align="center" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$4' }}>
             {!isStopped || !isQuiz ? (
               <Checkbox.Root
                 id={`${questionIndex}-${option.index}`}
@@ -42,6 +42,7 @@ export const MultipleChoiceOptions = ({
                 onCheckedChange={checked => handleCheckedChange(checked, option.index)}
                 css={{
                   cursor: canRespond ? 'pointer' : 'not-allowed',
+                  flexShrink: 0,
                 }}
               >
                 <Checkbox.Indicator>
@@ -51,7 +52,7 @@ export const MultipleChoiceOptions = ({
             ) : null}
 
             {isStopped && correctOptionIndexes?.includes(option.index) ? (
-              <Flex css={{ color: '$on_surface_high' }}>
+              <Flex align="center" css={{ color: '$on_surface_high' }}>
                 <CheckCircleIcon height={20} width={20} />
               </Flex>
             ) : null}

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

@@ -28,6 +28,7 @@ export const OptionInputWithDelete = ({
         value={option?.text || ''}
         key={index}
         onChange={event => handleOptionTextChange(index, event.target.value.trimStart())}
+        maxLength={250}
       />
       <IconButton onClick={() => removeOption(index)} css={{ bg: 'transparent', border: 'none' }}>
         <TrashIcon />

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

@@ -23,7 +23,7 @@ export const SingleChoiceOptions = ({
       <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
         {options.map(option => {
           return (
-            <Flex align="start" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$4' }}>
+            <Flex align="center" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$4' }}>
               {!isStopped || !isQuiz ? (
                 <RadioGroup.Item
                   css={{
@@ -33,6 +33,8 @@ export const SingleChoiceOptions = ({
                     border: '2px solid',
                     borderColor: '$on_surface_high',
                     display: 'flex',
+                    flexShrink: 0,
+                    pt: '$1',
                     justifyContent: 'center',
                     alignItems: 'center',
                     cursor: canRespond ? 'pointer' : 'not-allowed',

package/src/Prebuilt/components/PreviousRoleInMetadata.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import { selectLocalPeerRoleName, useHMSVanillaStore } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
 import { useMyMetadata } from './hooks/useMetadata';
 
 export const PreviousRoleInMetadata = () => {

package/src/Prebuilt/components/RaiseHand.tsx

@@ -4,11 +4,17 @@ import { CSS } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 // @ts-ignore: No implicit Any
 import IconButton from '../IconButton';
-// @ts-ignore: No implicit Any
+import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useMyMetadata } from './hooks/useMetadata';
 
 export const RaiseHand = ({ css }: { css?: CSS }) => {
   const { isHandRaised, toggleHandRaise } = useMyMetadata();
+  const { elements } = useRoomLayoutConferencingScreen();
+
+  if (!elements.hand_raise) {
+    return null;
+  }
+
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
       <IconButton

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

@@ -13,7 +13,6 @@ import { Flex, Text } from '../../..';
 import { PreviewControls, PreviewTile } from '../Preview/PreviewJoin';
 import { RequestPrompt } from './RequestPrompt';
 import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
 import { useMyMetadata } from '../hooks/useMetadata';
 // @ts-ignore: No implicit Any
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';

package/src/Prebuilt/components/hooks/{useMetadata.jsx → useMetadata.tsx}

@@ -15,7 +15,7 @@ export const useMyMetadata = () => {
   const metaData = useHMSStore(selectPeerMetadata(localPeerId));
   const isHandRaised = useHMSStore(selectHasPeerHandRaised(localPeerId));
 
-  const update = async updatedFields => {
+  const update = async (updatedFields: Record<string, any>) => {
     try {
       // get current state from store and merge updated fields
       const currentMetadata = vanillaStore.getState(selectPeerMetadata(localPeerId));
@@ -24,6 +24,7 @@ export const useMyMetadata = () => {
     } catch (error) {
       console.error('failed to update metadata ', updatedFields);
     }
+    return false;
   };
 
   const toggleHandRaise = useCallback(async () => {
@@ -43,12 +44,6 @@ export const useMyMetadata = () => {
     }
   }, [metaData?.isBRBOn]); //eslint-disable-line
 
-  const setPrevRole = async role => {
-    await update({
-      prevRole: role,
-    });
-  };
-
   return {
     isHandRaised,
     isBRBOn: !!metaData?.isBRBOn,
@@ -56,6 +51,5 @@ export const useMyMetadata = () => {
     updateMetaData: update,
     toggleHandRaise,
     toggleBRB,
-    setPrevRole,
   };
 };

package/src/Stats/Stats.tsx

@@ -120,7 +120,7 @@ export function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = f
             value={formatBytes(audioTrackStats?.bitrate, 'b/s')}
           />
 
-          <StatsRow show={isNotNullish(downlinkScore)} label="Downlink" value={downlinkScore} />
+          <StatsRow show={isNotNullish(downlinkScore)} label="CQS" value={downlinkScore} />
 
           <StatsRow show={isNotNullish(videoTrackStats?.codec)} label="Codec(V)" value={videoTrackStats?.codec} />