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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/Accordion/Accordion.d.ts +1 -0
  2. package/dist/Accordion/index.d.ts +1 -0
  3. package/dist/{HLSView-IN3HFCHT.js → HLSView-GDOF4655.js} +2 -2
  4. package/dist/Prebuilt/components/RaiseHand.d.ts +1 -1
  5. package/dist/Prebuilt/components/hooks/useMetadata.d.ts +8 -0
  6. package/dist/{chunk-ORCLDJ5D.js → chunk-ZDW56PPL.js} +563 -508
  7. package/dist/chunk-ZDW56PPL.js.map +7 -0
  8. package/dist/index.cjs.js +965 -907
  9. package/dist/index.cjs.js.map +4 -4
  10. package/dist/index.js +1 -1
  11. package/dist/meta.cjs.json +69 -74
  12. package/dist/meta.esbuild.json +75 -80
  13. package/package.json +7 -7
  14. package/src/Accordion/Accordion.tsx +4 -4
  15. package/src/Prebuilt/common/utils.js +1 -1
  16. package/src/Prebuilt/components/Chat/ChatBody.tsx +10 -0
  17. package/src/Prebuilt/components/Chat/ChatFooter.tsx +2 -4
  18. package/src/Prebuilt/components/ConferenceScreen.tsx +1 -4
  19. package/src/Prebuilt/components/Footer/Footer.tsx +1 -4
  20. package/src/Prebuilt/components/Footer/RoleAccordion.tsx +2 -1
  21. package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx +0 -1
  22. package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +1 -5
  23. package/src/Prebuilt/components/Polls/CreateQuestions/CreateQuestions.jsx +6 -6
  24. package/src/Prebuilt/components/Polls/CreateQuestions/SavedQuestion.tsx +14 -2
  25. package/src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx +3 -2
  26. package/src/Prebuilt/components/Polls/common/OptionInputWithDelete.tsx +1 -0
  27. package/src/Prebuilt/components/Polls/common/SingleChoiceOptions.jsx +3 -1
  28. package/src/Prebuilt/components/PreviousRoleInMetadata.tsx +0 -1
  29. package/src/Prebuilt/components/RaiseHand.tsx +7 -1
  30. package/src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx +0 -1
  31. package/src/Prebuilt/components/hooks/{useMetadata.jsx → useMetadata.tsx} +2 -8
  32. package/src/Stats/Stats.tsx +1 -1
  33. package/dist/chunk-ORCLDJ5D.js.map +0 -7
  34. /package/dist/{HLSView-IN3HFCHT.js.map → HLSView-GDOF4655.js.map} +0 -0
@@ -2,7 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
2
2
  import { useMedia } from 'react-use';
3
3
  import data from '@emoji-mart/data';
4
4
  import Picker from '@emoji-mart/react';
5
- import { HMSException, selectLocalPeer, useAVToggle, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
5
+ import { HMSException, selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
6
6
  import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';
7
7
  import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled, Text } from '../../..';
8
8
  import { IconButton } from '../../../IconButton';
@@ -89,8 +89,6 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
89
89
  const defaultSelection = useDefaultChatSelection();
90
90
  const selection = selectedPeer.name || selectedRole || defaultSelection;
91
91
  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
92
- const { toggleAudio, toggleVideo } = useAVToggle();
93
- const noAVPermissions = !(toggleAudio || toggleVideo);
94
92
  const isMwebHLSStream = useMobileHLSStream();
95
93
  const isLandscapeHLSStream = useLandscapeHLSStream();
96
94
 
@@ -275,7 +273,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
275
273
  }}
276
274
  gap="2"
277
275
  >
278
- {noAVPermissions ? <RaiseHand css={{ bg: '$surface_default' }} /> : null}
276
+ <RaiseHand css={{ bg: '$surface_default' }} />
279
277
  <MoreSettings elements={elements} screenType={screenType} />
280
278
  </Flex>
281
279
  </>
@@ -6,7 +6,6 @@ import {
6
6
  selectAppData,
7
7
  selectIsConnectedToRoom,
8
8
  selectRoomState,
9
- useAVToggle,
10
9
  useHMSActions,
11
10
  useHMSStore,
12
11
  } from '@100mslive/react-sdk';
@@ -54,8 +53,6 @@ export const ConferenceScreen = () => {
54
53
  const dropdownListRef = useRef<string[]>();
55
54
  const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
56
55
 
57
- const { toggleAudio, toggleVideo } = useAVToggle();
58
- const noAVPermissions = !(toggleAudio || toggleVideo);
59
56
  // using it in hls stream to show action button when chat is disabled
60
57
  const showChat = !!screenProps.elements?.chat;
61
58
  const autoRoomJoined = useRef(isPreviewScreenEnabled);
@@ -202,7 +199,7 @@ export const ConferenceScreen = () => {
202
199
  justify="end"
203
200
  gap="2"
204
201
  >
205
- {noAVPermissions ? <RaiseHand /> : null}
202
+ <RaiseHand />
206
203
  <MoreSettings elements={screenProps.elements} screenType={screenProps.screenType} />
207
204
  <Box
208
205
  css={{
@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
2
2
  import { useMedia } from 'react-use';
3
3
  import { ConferencingScreen } from '@100mslive/types-prebuilt';
4
4
  import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
5
- import { useAVToggle } from '@100mslive/react-sdk';
6
5
  import { config as cssConfig, Footer as AppFooter } from '../../..';
7
6
  // @ts-ignore: No implicit Any
8
7
  import { AudioVideoToggle } from '../AudioVideoToggle';
@@ -41,8 +40,6 @@ export const Footer = ({
41
40
  const isOverlayChat = !!elements?.chat?.is_overlay;
42
41
  const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
43
42
 
44
- const { toggleAudio, toggleVideo } = useAVToggle();
45
- const noAVPermissions = !(toggleAudio || toggleVideo);
46
43
  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
47
44
  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
48
45
  const { showPolls } = useShowPolls();
@@ -90,7 +87,7 @@ export const Footer = ({
90
87
  >
91
88
  {isMobile ? (
92
89
  <>
93
- {noAVPermissions ? <RaiseHand /> : null}
90
+ <RaiseHand />
94
91
  {elements?.chat && <ChatToggle />}
95
92
  <MoreSettings elements={elements} screenType={screenType} />
96
93
  </>
@@ -93,6 +93,7 @@ export const RoleAccordion = ({
93
93
  return (
94
94
  <Accordion.Item value={roleName} css={{ '&:hover .role_actions': { visibility: 'visible' }, mb: '$8' }} ref={ref}>
95
95
  <Accordion.Header
96
+ chevronID={`role_accordion_btn_${roleName}`}
96
97
  iconStyles={{ c: '$on_surface_high' }}
97
98
  css={{
98
99
  textTransform: 'capitalize',
@@ -153,7 +154,7 @@ export const RoleAccordion = ({
153
154
  <HorizontalDivider />
154
155
  <Flex css={{ w: '100%', p: '$6', gap: '$4' }} justify="center">
155
156
  <Button variant="standard" onClick={lowerAllHands} icon css={{ pl: '$2' }}>
156
- <CrossIcon /> Lower All Hands
157
+ <CrossIcon /> Lower all hands
157
158
  </Button>
158
159
  {canBringToStage && (
159
160
  <Button onClick={bringAllToStage} icon css={{ pl: '$2' }}>
@@ -29,7 +29,6 @@ import { FullScreenItem } from '../FullScreenItem';
29
29
  import { MuteAllModal } from '../MuteAllModal';
30
30
  // @ts-ignore: No implicit any
31
31
  import { useDropdownList } from '../../hooks/useDropdownList';
32
- // @ts-ignore: No implicit any
33
32
  import { useMyMetadata } from '../../hooks/useMetadata';
34
33
  // @ts-ignore: No implicit any
35
34
  import { APP_DATA, isMacOS } from '../../../common/constants';
@@ -6,7 +6,6 @@ import {
6
6
  selectIsConnectedToRoom,
7
7
  selectPeerCount,
8
8
  selectPermissions,
9
- useAVToggle,
10
9
  useHMSActions,
11
10
  useHMSStore,
12
11
  useRecordingStreaming,
@@ -51,7 +50,6 @@ import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane'
51
50
  import { useShowPolls } from '../../AppData/useUISettings';
52
51
  // @ts-ignore: No implicit any
53
52
  import { useDropdownList } from '../../hooks/useDropdownList';
54
- // @ts-ignore: No implicit any
55
53
  import { useMyMetadata } from '../../hooks/useMetadata';
56
54
  import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
57
55
  import { useLandscapeHLSStream, useMobileHLSStream } from '../../../common/hooks';
@@ -95,8 +93,6 @@ export const MwebOptions = ({
95
93
  const peerCount = useHMSStore(selectPeerCount);
96
94
  const emojiCardRef = useRef(null);
97
95
  const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
98
- const { toggleAudio, toggleVideo } = useAVToggle();
99
- const noAVPermissions = !(toggleAudio || toggleVideo);
100
96
  const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
101
97
  const { title, description } = useRoomLayoutHeader();
102
98
  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
@@ -175,7 +171,7 @@ export const MwebOptions = ({
175
171
  </ActionTile.Root>
176
172
  )}
177
173
 
178
- {!noAVPermissions ? (
174
+ {elements.hand_raise ? (
179
175
  <ActionTile.Root
180
176
  active={isHandRaised}
181
177
  onClick={() => {
@@ -75,15 +75,15 @@ export function CreateQuestions() {
75
75
  const updatedQuestions = [...questions.slice(0, index), questionParams, ...questions.slice(index + 1)];
76
76
  setQuestions(updatedQuestions);
77
77
  const validQuestions = updatedQuestions.filter(question => isValidQuestion(question));
78
-
79
78
  await actions.interactivityCenter.addQuestionsToPoll(id, validQuestions);
80
79
  }}
81
80
  isQuiz={isQuiz}
82
- removeQuestion={questionID =>
83
- setQuestions(prev => {
84
- return prev.filter(questionFromSet => questionID !== questionFromSet?.draftID);
85
- })
86
- }
81
+ removeQuestion={async questionID => {
82
+ const updatedQuestions = questions.filter(questionFromSet => questionID !== questionFromSet?.draftID);
83
+ setQuestions(updatedQuestions);
84
+ const validQuestions = updatedQuestions.filter(question => isValidQuestion(question));
85
+ await actions.interactivityCenter.addQuestionsToPoll(id, validQuestions);
86
+ }}
87
87
  convertToDraft={questionID =>
88
88
  setQuestions(prev => {
89
89
  const copyOfQuestions = [...prev];
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useMemo } from 'react';
2
2
  import { HMSPollQuestion } from '@100mslive/react-sdk';
3
3
  import { CheckCircleIcon } from '@100mslive/react-icons';
4
4
  import { Button, Flex, Text } from '../../../../';
@@ -15,6 +15,18 @@ export const SavedQuestion = ({
15
15
  length: number;
16
16
  convertToDraft: (draftID: number) => void;
17
17
  }) => {
18
+ const answerArray = useMemo(() => {
19
+ const updatedAnswerArray = [];
20
+ const { option, options } = question?.answer ?? {};
21
+ if (option) {
22
+ updatedAnswerArray.push(option);
23
+ }
24
+ if (options) {
25
+ updatedAnswerArray.push(...options);
26
+ }
27
+ return updatedAnswerArray;
28
+ }, [question?.answer]);
29
+
18
30
  return (
19
31
  <>
20
32
  <Text variant="overline" css={{ c: '$on_surface_low', textTransform: 'uppercase' }}>
@@ -30,7 +42,7 @@ export const SavedQuestion = ({
30
42
  {option.text}
31
43
  </Text>
32
44
  {/* @ts-ignore */}
33
- {option.isCorrectAnswer && (
45
+ {(answerArray.includes(index + 1) || option.isCorrectAnswer) && (
34
46
  <Flex css={{ color: '$alert_success', mx: '$xs' }}>
35
47
  <CheckCircleIcon height={24} width={24} />
36
48
  </Flex>
@@ -33,7 +33,7 @@ export const MultipleChoiceOptions = ({
33
33
  <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
34
34
  {options.map(option => {
35
35
  return (
36
- <Flex align="center" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$9' }}>
36
+ <Flex align="center" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$4' }}>
37
37
  {!isStopped || !isQuiz ? (
38
38
  <Checkbox.Root
39
39
  id={`${questionIndex}-${option.index}`}
@@ -42,6 +42,7 @@ export const MultipleChoiceOptions = ({
42
42
  onCheckedChange={checked => handleCheckedChange(checked, option.index)}
43
43
  css={{
44
44
  cursor: canRespond ? 'pointer' : 'not-allowed',
45
+ flexShrink: 0,
45
46
  }}
46
47
  >
47
48
  <Checkbox.Indicator>
@@ -51,7 +52,7 @@ export const MultipleChoiceOptions = ({
51
52
  ) : null}
52
53
 
53
54
  {isStopped && correctOptionIndexes?.includes(option.index) ? (
54
- <Flex css={{ color: '$on_surface_high' }}>
55
+ <Flex align="center" css={{ color: '$on_surface_high' }}>
55
56
  <CheckCircleIcon height={20} width={20} />
56
57
  </Flex>
57
58
  ) : null}
@@ -28,6 +28,7 @@ export const OptionInputWithDelete = ({
28
28
  value={option?.text || ''}
29
29
  key={index}
30
30
  onChange={event => handleOptionTextChange(index, event.target.value.trimStart())}
31
+ maxLength={250}
31
32
  />
32
33
  <IconButton onClick={() => removeOption(index)} css={{ bg: 'transparent', border: 'none' }}>
33
34
  <TrashIcon />
@@ -23,7 +23,7 @@ export const SingleChoiceOptions = ({
23
23
  <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
24
24
  {options.map(option => {
25
25
  return (
26
- <Flex align="start" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$4' }}>
26
+ <Flex align="center" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$4' }}>
27
27
  {!isStopped || !isQuiz ? (
28
28
  <RadioGroup.Item
29
29
  css={{
@@ -33,6 +33,8 @@ export const SingleChoiceOptions = ({
33
33
  border: '2px solid',
34
34
  borderColor: '$on_surface_high',
35
35
  display: 'flex',
36
+ flexShrink: 0,
37
+ pt: '$1',
36
38
  justifyContent: 'center',
37
39
  alignItems: 'center',
38
40
  cursor: canRespond ? 'pointer' : 'not-allowed',
@@ -1,6 +1,5 @@
1
1
  import { useEffect } from 'react';
2
2
  import { selectLocalPeerRoleName, useHMSVanillaStore } from '@100mslive/react-sdk';
3
- // @ts-ignore: No implicit Any
4
3
  import { useMyMetadata } from './hooks/useMetadata';
5
4
 
6
5
  export const PreviousRoleInMetadata = () => {
@@ -4,11 +4,17 @@ import { CSS } from '../../Theme';
4
4
  import { Tooltip } from '../../Tooltip';
5
5
  // @ts-ignore: No implicit Any
6
6
  import IconButton from '../IconButton';
7
- // @ts-ignore: No implicit Any
7
+ import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
8
8
  import { useMyMetadata } from './hooks/useMetadata';
9
9
 
10
10
  export const RaiseHand = ({ css }: { css?: CSS }) => {
11
11
  const { isHandRaised, toggleHandRaise } = useMyMetadata();
12
+ const { elements } = useRoomLayoutConferencingScreen();
13
+
14
+ if (!elements.hand_raise) {
15
+ return null;
16
+ }
17
+
12
18
  return (
13
19
  <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
14
20
  <IconButton
@@ -13,7 +13,6 @@ import { Flex, Text } from '../../..';
13
13
  import { PreviewControls, PreviewTile } from '../Preview/PreviewJoin';
14
14
  import { RequestPrompt } from './RequestPrompt';
15
15
  import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
16
- // @ts-ignore: No implicit Any
17
16
  import { useMyMetadata } from '../hooks/useMetadata';
18
17
  // @ts-ignore: No implicit Any
19
18
  import { ROLE_CHANGE_DECLINED } from '../../common/constants';
@@ -15,7 +15,7 @@ export const useMyMetadata = () => {
15
15
  const metaData = useHMSStore(selectPeerMetadata(localPeerId));
16
16
  const isHandRaised = useHMSStore(selectHasPeerHandRaised(localPeerId));
17
17
 
18
- const update = async updatedFields => {
18
+ const update = async (updatedFields: Record<string, any>) => {
19
19
  try {
20
20
  // get current state from store and merge updated fields
21
21
  const currentMetadata = vanillaStore.getState(selectPeerMetadata(localPeerId));
@@ -24,6 +24,7 @@ export const useMyMetadata = () => {
24
24
  } catch (error) {
25
25
  console.error('failed to update metadata ', updatedFields);
26
26
  }
27
+ return false;
27
28
  };
28
29
 
29
30
  const toggleHandRaise = useCallback(async () => {
@@ -43,12 +44,6 @@ export const useMyMetadata = () => {
43
44
  }
44
45
  }, [metaData?.isBRBOn]); //eslint-disable-line
45
46
 
46
- const setPrevRole = async role => {
47
- await update({
48
- prevRole: role,
49
- });
50
- };
51
-
52
47
  return {
53
48
  isHandRaised,
54
49
  isBRBOn: !!metaData?.isBRBOn,
@@ -56,6 +51,5 @@ export const useMyMetadata = () => {
56
51
  updateMetaData: update,
57
52
  toggleHandRaise,
58
53
  toggleBRB,
59
- setPrevRole,
60
54
  };
61
55
  };
@@ -120,7 +120,7 @@ export function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = f
120
120
  value={formatBytes(audioTrackStats?.bitrate, 'b/s')}
121
121
  />
122
122
 
123
- <StatsRow show={isNotNullish(downlinkScore)} label="Downlink" value={downlinkScore} />
123
+ <StatsRow show={isNotNullish(downlinkScore)} label="CQS" value={downlinkScore} />
124
124
 
125
125
  <StatsRow show={isNotNullish(videoTrackStats?.codec)} label="Codec(V)" value={videoTrackStats?.codec} />
126
126