@100mslive/roomkit-react 0.1.8-alpha.0 → 0.1.9-alpha.0

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

@@ -0,0 +1,132 @@
+// @ts-check
+import React, { useMemo, useState } from 'react';
+import { v4 as uuid } from 'uuid';
+import { selectPollByID, useHMSActions, useHMSStore } 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';
+
+export function CreateQuestions() {
+  const [questions, setQuestions] = useState([{ draftID: uuid() }]);
+  const actions = useHMSActions();
+  const togglePollView = usePollViewToggle();
+  const { pollInView: id, setPollView } = usePollViewState();
+  const interaction = useHMSStore(selectPollByID(id));
+
+  const isValidPoll = useMemo(
+    () => questions.length > 0 && questions.every(question => isValidQuestion(question)),
+    [questions],
+  );
+
+  const launchPoll = async () => {
+    const validQuestions = questions
+      .filter(question => isValidQuestion(question))
+      .map(question => ({
+        text: question.text,
+        type: question.type,
+        options: question.options,
+        skippable: question.skippable,
+      }));
+    await actions.interactivityCenter.addQuestionsToPoll(id, validQuestions);
+    await actions.interactivityCenter.startPoll(id);
+    setPollView(POLL_VIEWS.VOTE);
+  };
+  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={questionParams => {
+                setQuestions(questions => [
+                  ...questions.slice(0, index),
+                  questionParams,
+                  ...questions.slice(index + 1),
+                ]);
+              }}
+              isQuiz={isQuiz}
+              removeQuestion={questionID =>
+                setQuestions(prev => {
+                  return prev.filter(questionFromSet => questionID !== questionFromSet.draftID);
+                })
+              }
+              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={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}
+          removeQuestion={removeQuestion}
+        />
+      ) : (
+        <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.jsx

@@ -0,0 +1,66 @@
+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 }) => {
+  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.jsx

@@ -0,0 +1,251 @@
+// @ts-check
+import React, { useCallback, useRef, useState } from 'react';
+import { AddCircleIcon, TrashIcon } from '@100mslive/react-icons';
+import { Box, Button, Dropdown, Flex, Input, Switch, Text, Tooltip } from '../../../../';
+import { DialogDropdownTrigger } from '../../../primitives/DropdownTrigger';
+import { DeleteQuestionModal } from './DeleteQuestionModal';
+import { useDropdownSelection } from '../../hooks/useDropdownSelection';
+import { isValidTextInput } from '../../../common/utils';
+import { MultipleChoiceOptionInputs } from '../common/MultipleChoiceOptions';
+import { SingleChoiceOptionInputs } from '../common/SingleChoiceOptions';
+import { QUESTION_TYPE, QUESTION_TYPE_TITLE } from '../../../common/constants';
+
+export const QuestionForm = ({ question, index, length, onSave, removeQuestion, isQuiz }) => {
+  const ref = useRef(null);
+  const selectionBg = useDropdownSelection();
+  const [openDelete, setOpenDelete] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [type, setType] = useState(question.type || QUESTION_TYPE.SINGLE_CHOICE);
+  const [text, setText] = useState(question.text);
+  const [options, setOptions] = useState(
+    question?.options || [
+      { text: '', isCorrectAnswer: false },
+      { text: '', isCorrectAnswer: false },
+    ],
+  );
+  const [skippable, setSkippable] = useState(false);
+  const isValid = isValidQuestion({
+    text,
+    type,
+    options,
+    isQuiz,
+  });
+
+  const handleOptionTextChange = useCallback(
+    (index, text) => {
+      setOptions(options => [...options.slice(0, index), { ...options[index], text }, ...options.slice(index + 1)]);
+    },
+    [setOptions],
+  );
+
+  const removeOption = useCallback(
+    index =>
+      setOptions(options => {
+        const newOptions = [...options];
+        newOptions.splice(index, 1);
+        return newOptions;
+      }),
+    [setOptions],
+  );
+
+  const selectSingleChoiceAnswer = useCallback(
+    answerIndex => {
+      if (!isQuiz) {
+        return;
+      }
+      setOptions(options =>
+        options.map((option, index) => ({
+          ...option,
+          isCorrectAnswer: index === answerIndex,
+        })),
+      );
+    },
+    [setOptions, isQuiz],
+  );
+
+  const selectMultipleChoiceAnswer = useCallback(
+    (checked, index) => {
+      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}
+          title={QUESTION_TYPE_TITLE[type]}
+          css={{
+            backgroundColor: '$surface_bright',
+            border: '1px solid $border_bright',
+          }}
+          open={open}
+        />
+        <Dropdown.Portal>
+          <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}
+                  onSelect={() => setType(value)}
+                  css={{
+                    px: '$9',
+                    bg: type === value ? selectionBg : undefined,
+                  }}
+                >
+                  {QUESTION_TYPE_TITLE[value]}
+                </Dropdown.Item>
+              );
+            })}
+          </Dropdown.Content>
+        </Dropdown.Portal>
+      </Dropdown.Root>
+      <Input
+        placeholder="Ask a question"
+        css={{
+          mt: '$md',
+          backgroundColor: '$surface_bright',
+          border: '1px solid $border_bright',
+        }}
+        type="text"
+        value={text}
+        onChange={event => setText(event.target.value)}
+      />
+      {type === QUESTION_TYPE.SINGLE_CHOICE || type === QUESTION_TYPE.MULTIPLE_CHOICE ? (
+        <>
+          <Text variant="body2" css={{ my: '$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="body1"
+                css={{
+                  ml: '$4',
+                  c: 'inherit',
+                }}
+              >
+                Add an option
+              </Text>
+            </Flex>
+          )}
+          {isQuiz ? (
+            <Flex css={{ mt: '$md', gap: '$6' }}>
+              <Switch defaultChecked={skippable} onCheckedChange={checked => setSkippable(checked)} />
+              <Text variant="sm" css={{ color: '$on_surface_medium' }}>
+                Not required to answer
+              </Text>
+            </Flex>
+          ) : null}
+        </>
+      ) : null}
+
+      <Flex justify="between" align="center" css={{ mt: '$12' }}>
+        <Box
+          css={{
+            color: '$on_surface_medium',
+            cursor: 'pointer',
+            '&:hover': { color: '$on_surface_high' },
+          }}
+        >
+          <TrashIcon onClick={() => setOpenDelete(!open)} />
+        </Box>
+        <Tooltip
+          disabled={isValid}
+          title={`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,
+                draftID: question.draftID,
+              });
+            }}
+          >
+            Save
+          </Button>
+        </Tooltip>
+      </Flex>
+
+      <DeleteQuestionModal open={openDelete} setOpen={setOpenDelete} removeQuestion={removeQuestion} />
+    </>
+  );
+};
+
+export const isValidQuestion = ({ text, type, options, isQuiz = false }) => {
+  if (!isValidTextInput(text) || !type) {
+    return false;
+  }
+
+  if (![QUESTION_TYPE.SINGLE_CHOICE, QUESTION_TYPE.MULTIPLE_CHOICE].includes(type)) {
+    return true;
+  }
+
+  const everyOptionHasText = options.every(option => option && isValidTextInput(option.text, 1));
+  const hasCorrectAnswer = options.some(option => option.isCorrectAnswer);
+
+  if (!isQuiz) {
+    return everyOptionHasText;
+  }
+
+  return everyOptionHasText && hasCorrectAnswer;
+};

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

@@ -0,0 +1,57 @@
+// @ts-check
+import React, { useState } from 'react';
+import { CheckCircleIcon, TrashIcon } from '@100mslive/react-icons';
+import { Box, Button, Flex, Text } from '../../../../';
+import { DeleteQuestionModal } from './DeleteQuestionModal';
+import { QUESTION_TYPE_TITLE } from '../../../common/constants';
+
+export const SavedQuestion = ({ question, index, length, convertToDraft, removeQuestion }) => {
+  const [openDeleteModal, setOpenDeleteModal] = useState(false);
+  return (
+    <>
+      <Text variant="overline" css={{ c: '$on_surface_low', textTransform: 'uppercase' }}>
+        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 => (
+        <Flex css={{ alignItems: 'center', my: '$xs' }}>
+          <Text variant="body2" css={{ c: '$on_surface_medium' }}>
+            {option.text}
+          </Text>
+          {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="between" css={{ w: '100%', alignItems: 'center' }}>
+        <Box
+          onClick={() => setOpenDeleteModal(true)}
+          css={{ color: '$on_surface_low', '&:hover': { color: '$on_surface_medium', cursor: 'pointer' } }}
+        >
+          <TrashIcon />
+        </Box>
+        <Button
+          variant="standard"
+          css={{ fontWeight: '$semiBold', p: '$4 $8' }}
+          onClick={() => convertToDraft(question.draftID)}
+        >
+          Edit
+        </Button>
+      </Flex>
+      <DeleteQuestionModal
+        removeQuestion={() => removeQuestion(question.draftID)}
+        open={openDeleteModal}
+        setOpen={setOpenDeleteModal}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+// @ts-ignore: No implicit Any
+import { PollsQuizMenu } from './CreatePollQuiz/PollsQuizMenu';
+// @ts-ignore: No implicit Any
+import { CreateQuestions } from './CreateQuestions/CreateQuestions';
+// @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 {
+    return null;
+  }
+};

package/src/Prebuilt/components/Polls/Voting/PollResultSummary.jsx

@@ -0,0 +1,125 @@
+// @ts-check
+import React, { useMemo } from 'react';
+import { selectLocalPeerID, useHMSStore } from '@100mslive/react-sdk';
+import { Box, Text } from '../../../../';
+import { checkCorrectAnswer } from '../../../common/utils';
+
+/**
+ * @param {{ isQuiz: boolean;
+ * isAdmin: boolean;
+ * pollResult: import("@100mslive/react-sdk").HMSPoll['result'];
+ *  questions: import("@100mslive/react-sdk").HMSPoll['questions'] }} param0
+ */
+export const PollResultSummary = ({ isQuiz, isAdmin, pollResult, questions }) => {
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const noAnswers = pollResult?.maxUsers || 0 - (pollResult?.totalUsers || 0);
+  const participationPercentage =
+    pollResult?.maxUsers && pollResult?.maxUsers > 0 ? ((pollResult?.totalUsers || 0) * 100) / pollResult.maxUsers : 0;
+
+  const totalCorrectAnswers = useMemo(() => {
+    let correctAnswers = 0;
+    questions?.forEach(question => {
+      correctAnswers += question.result?.correctResponses || 0;
+    });
+    return correctAnswers;
+  }, [questions]);
+
+  const totalIncorrectAnswers = useMemo(() => {
+    let incorrectAnswers = 0;
+    questions?.forEach(question => {
+      incorrectAnswers +=
+        (question.result?.totalResponses || 0) -
+        (question.result?.correctResponses || 0) -
+        (question.result?.skippedCount || 0);
+    });
+    return incorrectAnswers;
+  }, [questions]);
+
+  const localCorrectAnswers = useMemo(() => {
+    let correctAnswers = 0;
+    questions?.forEach(question => {
+      const localResponse = question.responses?.find(response => response.peer?.peerid === localPeerID);
+      if (checkCorrectAnswer(question.answer, localResponse, question.type)) {
+        correctAnswers++;
+      }
+    });
+    return correctAnswers;
+  }, [localPeerID, questions]);
+
+  const localIncorrectAnswers = useMemo(() => {
+    let incorrectAnswers = 0;
+    questions?.forEach(question => {
+      const localResponse = question.responses?.find(response => response.peer?.peerid === localPeerID);
+      if (!checkCorrectAnswer(question.answer, localResponse, question.type) && localResponse) {
+        incorrectAnswers++;
+      }
+    });
+    return incorrectAnswers;
+  }, [localPeerID, questions]);
+
+  if (!pollResult) {
+    return null;
+  }
+
+  let StatsComponents;
+
+  if (isQuiz && isAdmin) {
+    StatsComponents = (
+      <>
+        <PollStat label="No. of correct answers" value={totalCorrectAnswers} />
+        <PollStat label="No. of wrong answerss" value={totalIncorrectAnswers} />
+        <PollStat label="Peers who didn't answer" value={noAnswers} />
+        <PollStat label="Participation Percentage" value={participationPercentage.toFixed(2) + '%'} />
+      </>
+    );
+  } else if (isQuiz && !isAdmin) {
+    StatsComponents = (
+      <>
+        <PollStat label="No. of correct answers" value={localCorrectAnswers} />
+        <PollStat label="No. of wrong answers" value={localIncorrectAnswers} />
+      </>
+    );
+  } else if (!isQuiz && isAdmin) {
+    StatsComponents = (
+      <>
+        <PollStat label="Peers who didn't answer" value={noAnswers} />
+        <PollStat label="Participation Percentage" value={participationPercentage.toFixed(2) + '%'} />
+      </>
+    );
+  } else {
+    return null;
+  }
+
+  return (
+    <Box
+      css={{
+        display: 'grid',
+        'grid-template-columns': 'repeat(2, 2fr)',
+        gap: '$4',
+        mt: '$3',
+      }}
+    >
+      {StatsComponents}
+    </Box>
+  );
+};
+
+const PollStat = ({ label, value }) => {
+  return (
+    <Box css={{ bg: '$surface_bright', p: '$8', r: '$1' }}>
+      <Text
+        variant="overline"
+        css={{
+          fontWeight: '$semiBold',
+          color: '$on_surface_medium',
+          textTransform: 'uppercase',
+        }}
+      >
+        {label}
+      </Text>
+      <Text variant="sub1" css={{ fontWeight: '$semiBold', color: '$on_surface_medium' }}>
+        {value}
+      </Text>
+    </Box>
+  );
+};