@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.
- package/dist/Accordion/Accordion.d.ts +1 -0
- package/dist/Accordion/index.d.ts +1 -0
- package/dist/{HLSView-IN3HFCHT.js → HLSView-GDOF4655.js} +2 -2
- package/dist/Prebuilt/components/RaiseHand.d.ts +1 -1
- package/dist/Prebuilt/components/hooks/useMetadata.d.ts +8 -0
- package/dist/{chunk-ORCLDJ5D.js → chunk-ZDW56PPL.js} +563 -508
- package/dist/chunk-ZDW56PPL.js.map +7 -0
- package/dist/index.cjs.js +965 -907
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +69 -74
- package/dist/meta.esbuild.json +75 -80
- package/package.json +7 -7
- package/src/Accordion/Accordion.tsx +4 -4
- package/src/Prebuilt/common/utils.js +1 -1
- package/src/Prebuilt/components/Chat/ChatBody.tsx +10 -0
- package/src/Prebuilt/components/Chat/ChatFooter.tsx +2 -4
- package/src/Prebuilt/components/ConferenceScreen.tsx +1 -4
- package/src/Prebuilt/components/Footer/Footer.tsx +1 -4
- package/src/Prebuilt/components/Footer/RoleAccordion.tsx +2 -1
- package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx +0 -1
- package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +1 -5
- package/src/Prebuilt/components/Polls/CreateQuestions/CreateQuestions.jsx +6 -6
- package/src/Prebuilt/components/Polls/CreateQuestions/SavedQuestion.tsx +14 -2
- package/src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx +3 -2
- package/src/Prebuilt/components/Polls/common/OptionInputWithDelete.tsx +1 -0
- package/src/Prebuilt/components/Polls/common/SingleChoiceOptions.jsx +3 -1
- package/src/Prebuilt/components/PreviousRoleInMetadata.tsx +0 -1
- package/src/Prebuilt/components/RaiseHand.tsx +7 -1
- package/src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx +0 -1
- package/src/Prebuilt/components/hooks/{useMetadata.jsx → useMetadata.tsx} +2 -8
- package/src/Stats/Stats.tsx +1 -1
- package/dist/chunk-ORCLDJ5D.js.map +0 -7
- /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,
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
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
|
-
{
|
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
|
-
|
84
|
-
|
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: '$
|
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="
|
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',
|
@@ -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
|
-
|
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
|
};
|
package/src/Stats/Stats.tsx
CHANGED
@@ -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="
|
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
|
|