@100mslive/roomkit-react 0.3.2 → 0.3.3-alpha.0
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/{HLSView-IN3HFCHT.js → HLSView-NVF25XHT.js} +2 -2
- package/dist/{chunk-ORCLDJ5D.js → chunk-2V7F62FX.js} +538 -479
- package/dist/chunk-2V7F62FX.js.map +7 -0
- package/dist/index.cjs.js +493 -434
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +35 -35
- package/dist/meta.esbuild.json +42 -42
- package/package.json +6 -6
- package/src/Prebuilt/common/utils.js +1 -1
- package/src/Prebuilt/components/Footer/RoleAccordion.tsx +1 -1
- 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/Stats/Stats.tsx +1 -1
- package/dist/chunk-ORCLDJ5D.js.map +0 -7
- /package/dist/{HLSView-IN3HFCHT.js.map → HLSView-NVF25XHT.js.map} +0 -0
@@ -153,7 +153,7 @@ export const RoleAccordion = ({
|
|
153
153
|
<HorizontalDivider />
|
154
154
|
<Flex css={{ w: '100%', p: '$6', gap: '$4' }} justify="center">
|
155
155
|
<Button variant="standard" onClick={lowerAllHands} icon css={{ pl: '$2' }}>
|
156
|
-
<CrossIcon /> Lower
|
156
|
+
<CrossIcon /> Lower all hands
|
157
157
|
</Button>
|
158
158
|
{canBringToStage && (
|
159
159
|
<Button onClick={bringAllToStage} icon css={{ pl: '$2' }}>
|
@@ -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',
|
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
|
|