@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

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

@@ -1,142 +0,0 @@
-// @ts-check
-import React, { useMemo, useState } from 'react';
-import { v4 as uuid } from 'uuid';
-import { selectPollByID, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
-import { AddCircleIcon } from '@100mslive/react-icons';
-import { Button, Flex, Text } from '../../../../';
-import { Container, ContentHeader } from '../../Streaming/Common';
-import { isValidQuestion, QuestionForm } from './QuestionForm';
-import { SavedQuestion } from './SavedQuestion';
-import { usePollViewToggle } from '../../AppData/useSidepane';
-import { usePollViewState } from '../../AppData/useUISettings';
-import { POLL_VIEWS } from '../../../common/constants';
-
-const getEditableFormat = questions => {
-  const editableQuestions = questions.map(question => {
-    return { ...question, saved: true, draftID: uuid() };
-  });
-  return editableQuestions;
-};
-
-export function CreateQuestions() {
-  const actions = useHMSActions();
-  const { isHLSRunning } = useRecordingStreaming();
-  const togglePollView = usePollViewToggle();
-  const { pollInView: id, setPollView } = usePollViewState();
-  const interaction = useHMSStore(selectPollByID(id));
-  const [questions, setQuestions] = useState(
-    interaction.questions?.length ? getEditableFormat(interaction.questions) : [{ draftID: uuid() }],
-  );
-
-  const isValidPoll = useMemo(() => questions.length > 0 && questions.every(isValidQuestion), [questions]);
-
-  const launchPoll = async () => {
-    await actions.interactivityCenter.startPoll(id);
-    await sendTimedMetadata(id);
-    setPollView(POLL_VIEWS.VOTE);
-  };
-
-  const sendTimedMetadata = async poll_id => {
-    // send hls timedmetadata when it is running
-    if (poll_id && isHLSRunning) {
-      try {
-        await actions.sendHLSTimedMetadata([
-          {
-            payload: `poll:${poll_id}`,
-            duration: 100,
-          },
-        ]);
-      } catch (e) {
-        console.error(e);
-      }
-    }
-  };
-
-  const headingTitle = interaction?.type
-    ? interaction?.type?.[0]?.toUpperCase() + interaction?.type?.slice(1)
-    : 'Polls and Quizzes';
-  const isQuiz = interaction?.type === 'quiz';
-  return (
-    <Container rounded>
-      <ContentHeader
-        content={headingTitle}
-        onClose={togglePollView}
-        onBack={() => setPollView(POLL_VIEWS.CREATE_POLL_QUIZ)}
-      />
-      <Flex direction="column" css={{ p: '$10', overflowY: 'auto' }}>
-        <Flex direction="column">
-          {questions.map((question, index) => (
-            <QuestionCard
-              key={question.draftID}
-              question={question}
-              index={index}
-              length={questions.length}
-              onSave={async questionParams => {
-                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={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];
-                  copyOfQuestions.forEach(question => {
-                    if (questionID && question.draftID === questionID) {
-                      question.saved = false;
-                    }
-                  });
-                  return copyOfQuestions;
-                })
-              }
-            />
-          ))}
-        </Flex>
-        <Flex
-          css={{
-            c: '$on_surface_low',
-            my: '$sm',
-            cursor: 'pointer',
-            '&:hover': { c: '$on_surface_medium' },
-          }}
-          onClick={() => setQuestions([...questions, { draftID: uuid() }])}
-        >
-          <AddCircleIcon />
-          <Text variant="body1" css={{ ml: '$md', c: '$inherit' }}>
-            Add another question
-          </Text>
-        </Flex>
-        <Flex css={{ w: '100%' }} justify="end">
-          <Button disabled={!isValidPoll} onClick={async () => launchPoll()}>
-            Launch {interaction?.type}
-          </Button>
-        </Flex>
-      </Flex>
-    </Container>
-  );
-}
-
-const QuestionCard = ({ question, onSave, index, length, removeQuestion, isQuiz, convertToDraft }) => {
-  return (
-    <Flex direction="column" css={{ p: '$md', bg: '$surface_default', r: '$1', mb: '$sm' }}>
-      {question.saved ? (
-        <SavedQuestion question={question} index={index} length={length} convertToDraft={convertToDraft} />
-      ) : (
-        <QuestionForm
-          question={question}
-          removeQuestion={() => removeQuestion(question.draftID)}
-          onSave={params => onSave(params)}
-          index={index}
-          length={length}
-          isQuiz={isQuiz}
-        />
-      )}
-    </Flex>
-  );
-};

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

@@ -1,74 +0,0 @@
-import React from 'react';
-import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../../../Button';
-import { Box, Flex } from '../../../../Layout';
-import { Dialog } from '../../../../Modal';
-import { Text } from '../../../../Text';
-
-export const DeleteQuestionModal = ({
-  open,
-  setOpen,
-  removeQuestion,
-}: {
-  open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  removeQuestion: () => void;
-}) => {
-  return (
-    <Dialog.Root open={open}>
-      <Dialog.Overlay />
-      <Dialog.Portal>
-        <Dialog.Content css={{ p: '$10' }}>
-          <Box>
-            <Flex
-              css={{
-                color: '$alert_error_default',
-                display: 'flex',
-                alignItems: 'center',
-              }}
-            >
-              <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />
-              <Text variant="lg" css={{ color: 'inherit', fontWeight: '$semiBold' }}>
-                Delete Question?
-              </Text>
-
-              <Box
-                css={{
-                  ml: 'auto',
-                  color: '$on_surface_medium',
-                  '&:hover': { color: '$on_surface_high', cursor: 'pointer' },
-                }}
-                onClick={() => setOpen(false)}
-              >
-                <CrossIcon />
-              </Box>
-            </Flex>
-            <Text variant="sm" css={{ color: '$on_surface_medium', mb: '$8', mt: '$4' }}>
-              The question will be deleted. You can't undo this action.
-            </Text>
-            <Flex css={{ w: '100%', mt: '$12', gap: '$md' }}>
-              <Button
-                variant="standard"
-                outlined
-                onClick={() => setOpen(false)}
-                css={{ w: '100%', fontSize: '$md', fontWeight: '$semiBold' }}
-              >
-                Cancel
-              </Button>
-              <Button
-                css={{ w: '100%', fontSize: '$md', fontWeight: '$semiBold' }}
-                variant="danger"
-                onClick={() => {
-                  removeQuestion();
-                  setOpen(false);
-                }}
-              >
-                Delete
-              </Button>
-            </Flex>
-          </Box>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};

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

@@ -1,324 +0,0 @@
-// @ts-check
-import React, { useCallback, useRef, useState } from 'react';
-import {
-  HMSPollQuestionCreateParams,
-  HMSPollQuestionOptionCreateParams,
-  HMSPollQuestionType,
-} from '@100mslive/react-sdk';
-import { AddCircleIcon, TrashIcon } from '@100mslive/react-icons';
-// import { Button, Dropdown, Flex, IconButton, Input, Switch, Text, TextArea, Tooltip } from '../../../..';
-import { Button, Dropdown, Flex, IconButton, Input, Text, TextArea, Tooltip } from '../../../..';
-// @ts-ignore
-import { DialogDropdownTrigger } from '../../../primitives/DropdownTrigger';
-// @ts-ignore
-import { DeleteQuestionModal } from './DeleteQuestionModal';
-// @ts-ignore
-import { useDropdownSelection } from '../../hooks/useDropdownSelection';
-// @ts-ignore
-import { isValidTextInput } from '../../../common/utils';
-import { Line } from '../common/Line';
-// @ts-ignore
-import { MultipleChoiceOptionInputs } from '../common/MultipleChoiceOptions';
-// @ts-ignore
-import { SingleChoiceOptionInputs } from '../common/SingleChoiceOptions';
-import { QUESTION_TYPE, QUESTION_TYPE_TITLE } from '../../../common/constants';
-
-export const QuestionForm = ({
-  question,
-  index,
-  length,
-  onSave,
-  removeQuestion,
-  isQuiz,
-}: {
-  question: HMSPollQuestionCreateParams & { draftID: number };
-  index: number;
-  length: number;
-  onSave: (optionParams: HMSPollQuestionCreateParams & { draftID: number; saved: boolean }) => void;
-  removeQuestion: () => void;
-  isQuiz: boolean;
-}) => {
-  const ref = useRef(null);
-  const selectionBg = useDropdownSelection();
-  const [openDelete, setOpenDelete] = useState(false);
-  const [open, setOpen] = useState(false);
-  const [type, setType] = useState<HMSPollQuestionType>(question.type || QUESTION_TYPE.SINGLE_CHOICE);
-  const [text, setText] = useState(question.text);
-  const [weight, setWeight] = useState(isQuiz ? 10 : 1);
-  const [options, setOptions] = useState(
-    question?.options || [
-      { text: '', isCorrectAnswer: false },
-      { text: '', isCorrectAnswer: false },
-    ],
-  );
-  // const [skippable, setSkippable] = useState(false);
-  const isValid = isValidQuestion({
-    text,
-    type,
-    options,
-    weight,
-    isQuiz,
-  });
-
-  const handleOptionTextChange = useCallback(
-    (index: number, text: string) => {
-      setOptions(options => [...options.slice(0, index), { ...options[index], text }, ...options.slice(index + 1)]);
-    },
-    [setOptions],
-  );
-
-  const removeOption = useCallback(
-    (index: number) =>
-      setOptions(options => {
-        const newOptions = [...options];
-        newOptions.splice(index, 1);
-        return newOptions;
-      }),
-    [setOptions],
-  );
-
-  const selectSingleChoiceAnswer = useCallback(
-    (answerIndex: number) => {
-      if (!isQuiz) {
-        return;
-      }
-      setOptions(options =>
-        options.map((option, index) => ({
-          ...option,
-          isCorrectAnswer: index === answerIndex,
-        })),
-      );
-    },
-    [setOptions, isQuiz],
-  );
-
-  const selectMultipleChoiceAnswer = useCallback(
-    (checked: boolean, index: number) => {
-      if (!isQuiz) {
-        return;
-      }
-      setOptions(options => [
-        ...options.slice(0, index),
-        { ...options[index], isCorrectAnswer: checked },
-        ...options.slice(index + 1),
-      ]);
-    },
-    [setOptions, isQuiz],
-  );
-
-  return (
-    <>
-      <Text variant="overline" css={{ c: '$on_surface_low', textTransform: 'uppercase' }}>
-        Question {index + 1} of {length}
-      </Text>
-      <Text variant="body2" css={{ mt: '$4', mb: '$md' }}>
-        Question Type
-      </Text>
-      <Dropdown.Root open={open} onOpenChange={setOpen}>
-        <DialogDropdownTrigger
-          ref={ref}
-          // @ts-ignore
-          title={QUESTION_TYPE_TITLE[type]}
-          css={{
-            backgroundColor: '$surface_bright',
-            border: '1px solid $border_bright',
-          }}
-          open={open}
-        />
-        <Dropdown.Portal>
-          {/* @ts-ignore */}
-          <Dropdown.Content align="start" sideOffset={8} css={{ w: ref.current?.clientWidth, zIndex: 1000 }}>
-            {Object.keys(QUESTION_TYPE_TITLE).map(value => {
-              return (
-                <Dropdown.Item
-                  key={value}
-                  // @ts-ignore
-                  onSelect={() => setType(value)}
-                  css={{
-                    px: '$9',
-                    bg: type === value ? selectionBg : undefined,
-                  }}
-                >
-                  {/* @ts-ignore */}
-                  {QUESTION_TYPE_TITLE[value]}
-                </Dropdown.Item>
-              );
-            })}
-          </Dropdown.Content>
-        </Dropdown.Portal>
-      </Dropdown.Root>
-      <TextArea
-        maxLength={1024}
-        placeholder="Ask a question"
-        css={{
-          mt: '$md',
-          backgroundColor: '$surface_bright',
-          border: '1px solid $border_bright',
-          minHeight: '$14',
-          resize: 'vertical',
-          maxHeight: '$32',
-        }}
-        value={text}
-        onChange={event => setText(event.target.value.trimStart())}
-      />
-      <Text variant="xs" css={{ color: '$on_surface_medium', textAlign: 'end', mt: '$4' }}>
-        {text?.length || 0}/1024
-      </Text>
-      <Line />
-      {/* @ts-ignore */}
-      {type === QUESTION_TYPE.SINGLE_CHOICE || type === QUESTION_TYPE.MULTIPLE_CHOICE ? (
-        <>
-          <Text variant="body2" css={{ mb: '$6', c: '$on_surface_medium' }}>
-            Options
-          </Text>
-
-          {isQuiz && (
-            <Text variant="xs" css={{ c: '$on_surface_medium', mb: '$md' }}>
-              {type === QUESTION_TYPE.SINGLE_CHOICE
-                ? 'Use the radio buttons to indicate the correct answer'
-                : 'Use the checkboxes to indicate the correct answer(s)'}
-            </Text>
-          )}
-
-          {type === QUESTION_TYPE.SINGLE_CHOICE && (
-            <SingleChoiceOptionInputs
-              isQuiz={isQuiz}
-              options={options}
-              selectAnswer={selectSingleChoiceAnswer}
-              handleOptionTextChange={handleOptionTextChange}
-              removeOption={removeOption}
-            />
-          )}
-
-          {type === QUESTION_TYPE.MULTIPLE_CHOICE && (
-            <MultipleChoiceOptionInputs
-              isQuiz={isQuiz}
-              options={options}
-              selectAnswer={selectMultipleChoiceAnswer}
-              handleOptionTextChange={handleOptionTextChange}
-              removeOption={removeOption}
-            />
-          )}
-
-          {options?.length < 20 && (
-            <Flex
-              css={{
-                c: '$on_surface_medium',
-                cursor: 'pointer',
-                '&:hover': { c: '$on_surface_high' },
-              }}
-              onClick={() => setOptions([...options, { text: '', isCorrectAnswer: false }])}
-            >
-              <AddCircleIcon style={{ position: 'relative', left: '-2px' }} />
-
-              <Text
-                variant="sm"
-                css={{
-                  ml: '$4',
-                  c: 'inherit',
-                }}
-              >
-                Add an option
-              </Text>
-            </Flex>
-          )}
-          <Line />
-          {isQuiz ? (
-            <>
-              <Flex justify="between" align="center" css={{ gap: '$6', w: '100%' }}>
-                <Text variant="sm" css={{ color: '$on_surface_medium' }}>
-                  Point Weightage
-                </Text>
-                <Input
-                  type="number"
-                  value={weight}
-                  min={1}
-                  max={999}
-                  onChange={e => setWeight(Math.min(Number(e.target.value), 999))}
-                  css={{
-                    backgroundColor: '$surface_bright',
-                    border: '1px solid $border_bright',
-                    maxWidth: '$20',
-                  }}
-                />
-              </Flex>
-              {/* <Flex justify="between" css={{ mt: '$md', gap: '$6', w: '100%' }}>
-                <Text variant="sm" css={{ color: '$on_surface_medium' }}>
-                  Allow to skip
-                </Text>
-                <Switch defaultChecked={skippable} onCheckedChange={checked => setSkippable(checked)} />
-              </Flex> */}
-            </>
-          ) : null}
-        </>
-      ) : null}
-
-      <Flex justify="end" align="center" css={{ mt: '$12', gap: '$8' }}>
-        <IconButton css={{ border: '1px solid $border_bright' }}>
-          <TrashIcon onClick={() => setOpenDelete(!open)} />
-        </IconButton>
-        <Tooltip
-          disabled={isValid}
-          title={
-            options.length < 2
-              ? 'At least two options must be added'
-              : `Please fill all the fields ${isQuiz ? 'and mark the correct answer(s)' : ''} to continue`
-          }
-          boxCss={{ maxWidth: '$40' }}
-        >
-          <Button
-            variant="standard"
-            disabled={!isValid}
-            onClick={() => {
-              onSave({
-                saved: true,
-                text,
-                type,
-                options,
-                skippable: false,
-                draftID: question.draftID,
-                weight,
-              });
-            }}
-          >
-            Save
-          </Button>
-        </Tooltip>
-      </Flex>
-
-      <DeleteQuestionModal open={openDelete} setOpen={setOpenDelete} removeQuestion={removeQuestion} />
-    </>
-  );
-};
-
-export const isValidQuestion = ({
-  text,
-  type,
-  options,
-  weight,
-  isQuiz = false,
-}: {
-  text: string;
-  type: string;
-  options: HMSPollQuestionOptionCreateParams[];
-  weight: number;
-  isQuiz?: boolean;
-}) => {
-  if (!isValidTextInput(text) || !type) {
-    return false;
-  }
-
-  const everyOptionHasText = options.length > 1 && options.every(option => option && isValidTextInput(option.text, 1));
-  const hasCorrectAnswer = options.some(option => option.isCorrectAnswer);
-
-  if (!isQuiz) {
-    return everyOptionHasText;
-  }
-
-  // The minimum acceptable value of weight is 1
-  if (isQuiz && weight < 1) {
-    return false;
-  }
-
-  return everyOptionHasText && hasCorrectAnswer;
-};

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

@@ -1,64 +0,0 @@
-import React, { useMemo } from 'react';
-import { HMSPollQuestion } from '@100mslive/react-sdk';
-import { CheckCircleIcon } from '@100mslive/react-icons';
-import { Button, Flex, Text } from '../../../../';
-import { QUESTION_TYPE_TITLE } from '../../../common/constants';
-
-export const SavedQuestion = ({
-  question,
-  index,
-  length,
-  convertToDraft,
-}: {
-  question: HMSPollQuestion & { draftID: number };
-  index: number;
-  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' }}>
-        {/* @ts-ignore */}
-        Question {index + 1} of {length}: {QUESTION_TYPE_TITLE[question.type]}
-      </Text>
-      <Text variant="body2" css={{ mt: '$4', mb: '$md' }}>
-        {question.text}
-      </Text>
-      {question.options?.map((option, index) => (
-        <Flex key={`${option.text}-${index}`} css={{ alignItems: 'center', my: '$xs' }}>
-          <Text variant="body2" css={{ c: '$on_surface_medium' }}>
-            {option.text}
-          </Text>
-          {/* @ts-ignore */}
-          {(answerArray.includes(index + 1) || option.isCorrectAnswer) && (
-            <Flex css={{ color: '$alert_success', mx: '$xs' }}>
-              <CheckCircleIcon height={24} width={24} />
-            </Flex>
-          )}
-        </Flex>
-      ))}
-      {question.skippable ? (
-        <Text variant="sm" css={{ color: '$on_surface_low', my: '$md' }}>
-          Not required to answer
-        </Text>
-      ) : null}
-      <Flex justify="end" css={{ w: '100%', alignItems: 'center' }}>
-        <Button variant="standard" css={{ fontWeight: '$semiBold' }} onClick={() => convertToDraft(question.draftID)}>
-          Edit
-        </Button>
-      </Flex>
-    </>
-  );
-};

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

@@ -1,31 +0,0 @@
-import React from 'react';
-// @ts-ignore: No implicit Any
-import { PollsQuizMenu } from './CreatePollQuiz/PollsQuizMenu';
-// @ts-ignore: No implicit Any
-import { CreateQuestions } from './CreateQuestions/CreateQuestions';
-import { LeaderboardSummary } from './Voting/LeaderboardSummary';
-// @ts-ignore: No implicit Any
-import { Voting } from './Voting/Voting';
-// @ts-ignore: No implicit Any
-import { usePollViewToggle } from '../AppData/useSidepane';
-// @ts-ignore: No implicit Any
-import { usePollViewState } from '../AppData/useUISettings';
-// @ts-ignore: No implicit Any
-import { POLL_VIEWS } from '../../common/constants';
-
-export const Polls = () => {
-  const togglePollView = usePollViewToggle();
-  const { pollInView: pollID, view } = usePollViewState();
-
-  if (view === POLL_VIEWS.CREATE_POLL_QUIZ) {
-    return <PollsQuizMenu />;
-  } else if (view === POLL_VIEWS.CREATE_QUESTIONS) {
-    return <CreateQuestions />;
-  } else if (view === POLL_VIEWS.VOTE) {
-    return <Voting toggleVoting={togglePollView} id={pollID} />;
-  } else if (view === POLL_VIEWS.RESULTS) {
-    return <LeaderboardSummary pollID={pollID} />;
-  } else {
-    return null;
-  }
-};