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

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

@@ -0,0 +1,249 @@
+// @ts-check
+import React, { useCallback, useMemo, useState } from 'react';
+import { selectLocalPeerID, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
+import { Box, Button, Flex, IconButton, Input, styled, Text } from '../../../../';
+import { checkCorrectAnswer } from '../../../common/utils';
+import { MultipleChoiceOptions } from '../common/MultipleChoiceOptions';
+import { SingleChoiceOptions } from '../common/SingleChoiceOptions';
+import { QUESTION_TYPE } from '../../../common/constants';
+
+const TextArea = styled('textarea', {
+  backgroundColor: '$surface_brighter',
+  border: '1px solid $border_bright',
+  borderRadius: '$1',
+  mb: '$md',
+  color: '$on_surface_high',
+  resize: 'none',
+  p: '$2',
+  w: '100%',
+});
+
+export const QuestionCard = ({
+  pollID,
+  isQuiz,
+  startedBy,
+  pollState,
+  index,
+  totalQuestions,
+  result,
+  type,
+  text,
+  options = [],
+  answer,
+  setCurrentIndex,
+  skippable = false,
+  responses = [],
+  isTimed = false,
+  rolesThatCanViewResponses,
+}) => {
+  const actions = useHMSActions();
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const localPeerResponse = responses?.find(response => response.peer?.peerid === localPeerID);
+  const isLocalPeerCreator = localPeerID === startedBy;
+  const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
+  const roleCanViewResponse =
+    !rolesThatCanViewResponses ||
+    rolesThatCanViewResponses.length === 0 ||
+    rolesThatCanViewResponses.includes(localPeerRoleName || '');
+  const showVoteCount = roleCanViewResponse && (localPeerResponse || (isLocalPeerCreator && pollState === 'stopped'));
+
+  const isLive = pollState === 'started';
+  const canRespond = isLive && !localPeerResponse;
+
+  const isCorrectAnswer = checkCorrectAnswer(answer, localPeerResponse, type);
+
+  const prev = index !== 1;
+  const next = index !== totalQuestions && (skippable || localPeerResponse);
+
+  const moveNext = useCallback(() => {
+    setCurrentIndex(curr => Math.min(totalQuestions, curr + 1));
+  }, [setCurrentIndex, totalQuestions]);
+
+  const movePrev = () => {
+    setCurrentIndex(curr => Math.max(1, curr - 1));
+  };
+
+  const [textAnswer, setTextAnswer] = useState('');
+  const [singleOptionAnswer, setSingleOptionAnswer] = useState();
+  const [multipleOptionAnswer, setMultipleOptionAnswer] = useState(new Set());
+
+  const stringAnswerExpected = [QUESTION_TYPE.LONG_ANSWER, QUESTION_TYPE.SHORT_ANSWER].includes(type);
+
+  const isValidVote = useMemo(() => {
+    if (stringAnswerExpected) {
+      return textAnswer.length > 0;
+    } else if (type === QUESTION_TYPE.SINGLE_CHOICE) {
+      return singleOptionAnswer !== undefined;
+    } else if (type === QUESTION_TYPE.MULTIPLE_CHOICE) {
+      return multipleOptionAnswer.size > 0;
+    }
+  }, [textAnswer, singleOptionAnswer, multipleOptionAnswer, type, stringAnswerExpected]);
+
+  const handleVote = useCallback(async () => {
+    if (!isValidVote) {
+      return;
+    }
+    await actions.interactivityCenter.addResponsesToPoll(pollID, [
+      {
+        questionIndex: index,
+        text: textAnswer,
+        option: singleOptionAnswer,
+        options: Array.from(multipleOptionAnswer),
+      },
+    ]);
+  }, [actions, index, pollID, isValidVote, textAnswer, singleOptionAnswer, multipleOptionAnswer]);
+
+  const handleSkip = useCallback(async () => {
+    await actions.interactivityCenter.addResponsesToPoll(pollID, [
+      {
+        questionIndex: index,
+        skipped: true,
+      },
+    ]);
+    moveNext();
+  }, [actions, index, pollID, moveNext]);
+
+  return (
+    <Box
+      css={{
+        backgroundColor: '$surface_bright',
+        borderRadius: '$1',
+        p: '$md',
+        mt: '$md',
+        border:
+          isQuiz && localPeerResponse && !localPeerResponse.skipped
+            ? `1px solid ${isCorrectAnswer ? '$alert_success' : '$alert_error_default'}`
+            : 'none',
+      }}
+    >
+      <Flex align="center" justify="between">
+        <Text variant="caption" css={{ color: '$on_surface_low', fontWeight: '$semiBold' }}>
+          QUESTION {index} OF {totalQuestions}: {type.toUpperCase()}
+        </Text>
+
+        {isTimed ? (
+          <Flex align="center" css={{ gap: '$4' }}>
+            <IconButton
+              disabled={!prev}
+              onClick={movePrev}
+              css={
+                prev
+                  ? { color: '$on_surface_high', cursor: 'pointer' }
+                  : {
+                      color: '$on_surface_low',
+                      cursor: 'not-allowed',
+                    }
+              }
+            >
+              <ChevronLeftIcon height={16} width={16} />
+            </IconButton>
+            <IconButton
+              disabled={!next}
+              onClick={moveNext}
+              css={
+                next
+                  ? { color: '$on_surface_high', cursor: 'pointer' }
+                  : {
+                      color: '$on_surface_low',
+                      cursor: 'not-allowed',
+                    }
+              }
+            >
+              <ChevronRightIcon height={16} width={16} />
+            </IconButton>
+          </Flex>
+        ) : null}
+      </Flex>
+
+      <Box css={{ my: '$md' }}>
+        <Text css={{ color: '$on_surface_high' }}>{text}</Text>
+      </Box>
+
+      {type === QUESTION_TYPE.SHORT_ANSWER ? (
+        <Input
+          disabled={!canRespond}
+          placeholder="Enter your answer"
+          onChange={e => setTextAnswer(e.target.value)}
+          css={{
+            w: '100%',
+            backgroundColor: '$surface_brighter',
+            mb: '$md',
+            border: '1px solid $border_default',
+            cursor: localPeerResponse ? 'not-allowed' : 'text',
+          }}
+        />
+      ) : null}
+
+      {type === QUESTION_TYPE.LONG_ANSWER ? (
+        <TextArea
+          disabled={!canRespond}
+          placeholder="Enter your answer"
+          onChange={e => setTextAnswer(e.target.value)}
+        />
+      ) : null}
+
+      {type === QUESTION_TYPE.SINGLE_CHOICE ? (
+        <SingleChoiceOptions
+          questionIndex={index}
+          isQuiz={isQuiz}
+          canRespond={canRespond}
+          response={localPeerResponse}
+          correctOptionIndex={answer?.option}
+          options={options}
+          setAnswer={setSingleOptionAnswer}
+          totalResponses={result?.totalResponses}
+          showVoteCount={showVoteCount}
+        />
+      ) : null}
+
+      {type === QUESTION_TYPE.MULTIPLE_CHOICE ? (
+        <MultipleChoiceOptions
+          questionIndex={index}
+          isQuiz={isQuiz}
+          canRespond={canRespond}
+          response={localPeerResponse}
+          correctOptionIndexes={answer?.options}
+          options={options}
+          selectedOptions={multipleOptionAnswer}
+          setSelectedOptions={setMultipleOptionAnswer}
+          totalResponses={result?.totalResponses}
+          showVoteCount={showVoteCount}
+        />
+      ) : null}
+
+      {isLive && (
+        <QuestionActions
+          isValidVote={isValidVote}
+          skippable={skippable}
+          onSkip={handleSkip}
+          onVote={handleVote}
+          response={localPeerResponse}
+          stringAnswerExpected={stringAnswerExpected}
+        />
+      )}
+    </Box>
+  );
+};
+
+const QuestionActions = ({ isValidVote, skippable, response, stringAnswerExpected, onVote, onSkip }) => {
+  return (
+    <Flex align="center" justify="end" css={{ gap: '$4', w: '100%' }}>
+      {skippable && !response ? (
+        <Button variant="standard" onClick={onSkip} css={{ p: '$xs $10', fontWeight: '$semiBold' }}>
+          Skip
+        </Button>
+      ) : null}
+
+      {response ? (
+        <Text css={{ fontWeight: '$semiBold', color: '$on_surface_medium' }}>
+          {response.skipped ? 'Skipped' : stringAnswerExpected ? 'Submitted' : 'Voted'}
+        </Text>
+      ) : (
+        <Button css={{ p: '$xs $10', fontWeight: '$semiBold' }} disabled={!isValidVote} onClick={onVote}>
+          {stringAnswerExpected ? 'Submit' : 'Vote'}
+        </Button>
+      )}
+    </Flex>
+  );
+};

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

@@ -0,0 +1,40 @@
+// @ts-check
+import React from 'react';
+import { QuestionCard } from './QuestionCard';
+
+/**
+ *
+ * @param {{poll: import("@100mslive/react-sdk").HMSPoll}} param0
+ * @returns
+ */
+export const StandardView = ({ poll }) => {
+  if (!poll?.questions) {
+    return null;
+  }
+  return (
+    <>
+      {poll.questions?.map((question, index) => (
+        <QuestionCard
+          pollID={poll.id}
+          isQuiz={poll.type === 'quiz'}
+          startedBy={poll.startedBy}
+          pollState={poll.state}
+          key={`${question.text}-${index}`}
+          index={question.index}
+          text={question.text}
+          type={question.type}
+          result={question.result}
+          totalQuestions={poll.questions?.length || 0}
+          options={question.options}
+          skippable={question.skippable}
+          responses={question.responses}
+          answer={question.answer}
+          setCurrentIndex={() => {
+            return;
+          }}
+          rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
+        />
+      ))}
+    </>
+  );
+};

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

@@ -0,0 +1,36 @@
+// @ts-check
+import React, { useState } from 'react';
+import { QuestionCard } from './QuestionCard';
+
+/**
+ *
+ * @param {{poll: import("@100mslive/react-sdk").HMSPoll}} param0
+ * @returns
+ */
+export const TimedView = ({ poll }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const activeQuestion = poll.questions?.[currentIndex];
+  if (!activeQuestion) {
+    return null;
+  }
+  return (
+    <QuestionCard
+      pollID={poll.id}
+      isQuiz={poll.type === 'quiz'}
+      startedBy={poll.startedBy}
+      pollState={poll.state}
+      index={activeQuestion.index}
+      text={activeQuestion.text}
+      type={activeQuestion.type}
+      result={activeQuestion?.result}
+      totalQuestions={poll.questions?.length || 0}
+      options={activeQuestion.options}
+      skippable={activeQuestion.skippable || false}
+      responses={activeQuestion.responses}
+      answer={activeQuestion.answer}
+      setCurrentIndex={setCurrentIndex}
+      rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
+      isTimed
+    />
+  );
+};

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

@@ -0,0 +1,99 @@
+// @ts-check
+import React from 'react';
+import {
+  selectLocalPeerID,
+  selectPeerNameByID,
+  selectPollByID,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
+import { Box, Button, Flex, Text } from '../../../../';
+import { Container } from '../../Streaming/Common';
+// import { PollResultSummary } from "./PollResultSummary";
+import { StandardView } from './StandardVoting';
+import { TimedView } from './TimedVoting';
+import { usePollViewState } from '../../AppData/useUISettings';
+import { StatusIndicator } from '../common/StatusIndicator';
+import { POLL_VIEWS } from '../../../common/constants';
+
+export const Voting = ({ id, toggleVoting }) => {
+  const actions = useHMSActions();
+  const poll = useHMSStore(selectPollByID(id));
+  const pollCreatorName = useHMSStore(selectPeerNameByID(poll?.createdBy));
+  const isLocalPeerCreator = useHMSStore(selectLocalPeerID) === poll?.createdBy;
+  const { setPollView } = usePollViewState();
+
+  if (!poll) {
+    return null;
+  }
+
+  // Sets view - linear or vertical, toggles timer indicator
+  const isTimed = (poll.duration || 0) > 0;
+  const isLive = poll.state === 'started';
+
+  return (
+    <Container rounded>
+      <Flex
+        align="center"
+        css={{
+          gap: '$6',
+          py: '$6',
+          px: '$10',
+          my: '$4',
+          w: '100%',
+          color: '$on_surface_high',
+          borderBottom: '1px solid $border_default',
+        }}
+      >
+        <Flex
+          onClick={() => setPollView(POLL_VIEWS.CREATE_POLL_QUIZ)}
+          css={{ cursor: 'pointer', c: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }}
+        >
+          <ChevronLeftIcon />
+        </Flex>
+        <Text variant="h6">{poll?.type?.toUpperCase()}</Text>
+        <StatusIndicator isLive={isLive} shouldShowTimer={isLive && isTimed} />
+        <Box
+          css={{
+            marginLeft: 'auto',
+            cursor: 'pointer',
+            '&:hover': { opacity: '0.8' },
+          }}
+        >
+          <CrossIcon onClick={toggleVoting} />
+        </Box>
+      </Flex>
+
+      <Flex direction="column" css={{ p: '$8 $10' }}>
+        <Flex align="center">
+          <Box css={{ flex: 'auto' }}>
+            <Text css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>
+              {pollCreatorName || 'Participant'} started a {poll.type}
+            </Text>
+          </Box>
+          {poll.state === 'started' && isLocalPeerCreator && (
+            <Box css={{ flex: 'initial' }}>
+              <Button
+                variant="danger"
+                css={{ fontSize: '$sm', fontWeight: '$semiBold', p: '$3 $6' }}
+                onClick={() => actions.interactivityCenter.stopPoll(id)}
+              >
+                End {poll.type}
+              </Button>
+            </Box>
+          )}
+        </Flex>
+        {/* {poll.state === "stopped" && (
+          <PollResultSummary
+            pollResult={poll.result}
+            questions={poll.questions}
+            isQuiz={poll.type === "quiz"}
+            isAdmin={isLocalPeerCreator}
+          />
+        )} */}
+        {isTimed ? <TimedView poll={poll} /> : <StandardView poll={poll} />}
+      </Flex>
+    </Container>
+  );
+};

package/src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx

@@ -0,0 +1,101 @@
+// @ts-check
+import React from 'react';
+import { CheckIcon } from '@100mslive/react-icons';
+import { Checkbox, Flex, Label, Text } from '../../../../';
+import { OptionInputWithDelete } from './OptionInputWithDelete';
+import { VoteCount } from './VoteCount';
+import { VoteProgress } from './VoteProgress';
+
+export const MultipleChoiceOptions = ({
+  questionIndex,
+  isQuiz,
+  options,
+  correctOptionIndexes,
+  canRespond,
+  response,
+  totalResponses,
+  selectedOptions,
+  setSelectedOptions,
+  showVoteCount,
+}) => {
+  const handleCheckedChange = (checked, index) => {
+    const newSelected = new Set(selectedOptions);
+    if (checked) {
+      newSelected.add(index);
+    } else {
+      newSelected.delete(index);
+    }
+    setSelectedOptions(newSelected);
+  };
+
+  return (
+    <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
+      {options.map(option => {
+        const isCorrectAnswer = isQuiz && correctOptionIndexes?.includes(option.index);
+
+        return (
+          <Flex align="center" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$9' }}>
+            <Checkbox.Root
+              id={`${questionIndex}-${option.index}`}
+              disabled={!canRespond}
+              checked={response?.options?.includes(option.index)}
+              onCheckedChange={checked => handleCheckedChange(checked, option.index)}
+              css={{
+                cursor: canRespond ? 'pointer' : 'not-allowed',
+              }}
+            >
+              <Checkbox.Indicator>
+                <CheckIcon width={16} height={16} />
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+
+            <Flex direction="column" css={{ flexGrow: '1' }}>
+              <Flex css={{ w: '100%' }}>
+                <Text css={{ display: 'flex', flexGrow: '1' }}>
+                  <Label htmlFor={`${questionIndex}-${option.index}`}>{option.text}</Label>
+                </Text>
+                {showVoteCount && (
+                  <VoteCount isQuiz={isQuiz} isCorrectAnswer={isCorrectAnswer} voteCount={option.voteCount} />
+                )}
+              </Flex>
+              {showVoteCount && <VoteProgress option={option} totalResponses={totalResponses} />}
+            </Flex>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
+
+export const MultipleChoiceOptionInputs = ({ isQuiz, options, selectAnswer, handleOptionTextChange, removeOption }) => {
+  return (
+    <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
+      {options.map((option, index) => {
+        return (
+          <Flex align="center" key={index} css={{ w: '100%', gap: '$5' }}>
+            {isQuiz && (
+              <Checkbox.Root
+                onCheckedChange={checked => selectAnswer(checked, index)}
+                checked={option.isCorrectAnswer}
+                css={{
+                  cursor: 'pointer',
+                  width: '$9',
+                }}
+              >
+                <Checkbox.Indicator>
+                  <CheckIcon width={16} height={16} />
+                </Checkbox.Indicator>
+              </Checkbox.Root>
+            )}
+            <OptionInputWithDelete
+              index={index}
+              option={option}
+              handleOptionTextChange={handleOptionTextChange}
+              removeOption={removeOption}
+            />
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Polls/common/OptionInputWithDelete.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { TrashIcon } from '@100mslive/react-icons';
+import { Input } from '../../../../Input';
+import IconButton from '../../../IconButton';
+
+export const OptionInputWithDelete = ({ index, option, handleOptionTextChange, removeOption }) => {
+  return (
+    <>
+      <Input
+        placeholder={`Option ${index + 1}`}
+        css={{
+          w: '100%',
+          backgroundColor: '$surface_default',
+          border: '1px solid $border_bright',
+        }}
+        value={option?.text || ''}
+        key={index}
+        onChange={event => handleOptionTextChange(index, event.target.value)}
+      />
+      <IconButton onClick={() => removeOption(index)} css={{ bg: '$transparent', border: 'none' }}>
+        <TrashIcon />
+      </IconButton>
+    </>
+  );
+};

package/src/Prebuilt/components/Polls/common/SingleChoiceOptions.jsx

@@ -0,0 +1,125 @@
+// @ts-check
+import React from 'react';
+import { Flex, Label, RadioGroup, Text } from '../../../../';
+import { OptionInputWithDelete } from './OptionInputWithDelete';
+import { VoteCount } from './VoteCount';
+import { VoteProgress } from './VoteProgress';
+
+export const SingleChoiceOptions = ({
+  questionIndex,
+  isQuiz,
+  options,
+  response,
+  canRespond,
+  correctOptionIndex,
+  setAnswer,
+  totalResponses,
+  showVoteCount,
+}) => {
+  return (
+    <RadioGroup.Root value={response?.option} onValueChange={value => setAnswer(value)}>
+      <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
+        {options.map(option => {
+          const isCorrectAnswer = isQuiz && option.index === correctOptionIndex;
+
+          return (
+            <Flex align="center" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$5' }}>
+              <RadioGroup.Item
+                css={{
+                  background: 'none',
+                  h: '$9',
+                  w: '$9',
+                  border: '2px solid',
+                  borderColor: '$on_surface_high',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  cursor: canRespond ? 'pointer' : 'not-allowed',
+                  '&[data-state="checked"]': {
+                    borderColor: '$primary_bright',
+                    borderWidth: '2px',
+                  },
+                }}
+                disabled={!canRespond}
+                value={option.index}
+                id={`${questionIndex}-${option.index}`}
+              >
+                <RadioGroup.Indicator
+                  css={{
+                    h: '80%',
+                    w: '80%',
+                    background: '$primary_bright',
+                    borderRadius: '$round',
+                  }}
+                />
+              </RadioGroup.Item>
+
+              <Flex direction="column" css={{ flexGrow: '1' }}>
+                <Flex css={{ w: '100%' }}>
+                  <Text css={{ display: 'flex', flexGrow: '1' }}>
+                    <Label htmlFor={`${questionIndex}-${option.index}`}>{option.text}</Label>
+                  </Text>
+                  {showVoteCount && (
+                    <VoteCount isQuiz={isQuiz} isCorrectAnswer={isCorrectAnswer} voteCount={option.voteCount} />
+                  )}
+                </Flex>
+                {showVoteCount && <VoteProgress option={option} totalResponses={totalResponses} />}
+              </Flex>
+            </Flex>
+          );
+        })}
+      </Flex>
+    </RadioGroup.Root>
+  );
+};
+
+export const SingleChoiceOptionInputs = ({ isQuiz, options, selectAnswer, handleOptionTextChange, removeOption }) => {
+  const correctOptionIndex = options.findIndex(option => option.isCorrectAnswer);
+
+  return (
+    <RadioGroup.Root value={correctOptionIndex} onValueChange={selectAnswer}>
+      <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
+        {options.map((option, index) => {
+          return (
+            <Flex align="center" key={`option-${index}`} css={{ w: '100%', gap: '$5' }}>
+              {isQuiz && (
+                <RadioGroup.Item
+                  css={{
+                    background: 'none',
+                    w: '$9',
+                    border: '2px solid',
+                    borderColor: '$on_surface_high',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    '&[data-state="checked"]': {
+                      borderColor: '$primary_bright',
+                      borderWidth: '2px',
+                    },
+                  }}
+                  value={index}
+                >
+                  <RadioGroup.Indicator
+                    css={{
+                      h: '80%',
+                      w: '80%',
+                      background: '$primary_bright',
+                      borderRadius: '$round',
+                    }}
+                  />
+                </RadioGroup.Item>
+              )}
+              <OptionInputWithDelete
+                index={index}
+                option={option}
+                handleOptionTextChange={handleOptionTextChange}
+                removeOption={removeOption}
+              />
+            </Flex>
+          );
+        })}
+      </Flex>
+    </RadioGroup.Root>
+  );
+};