@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.
@@ -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 All Hands
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
- 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',
@@ -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