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

package/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx

@@ -0,0 +1,229 @@
+// @ts-check
+import React, { useMemo, useState } from 'react';
+import {
+  selectLocalPeerRoleName,
+  selectPermissions,
+  selectPolls,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { QuestionIcon, StatsIcon } from '@100mslive/react-icons';
+import { Button, Flex, Input, Switch, Text } from '../../../../';
+import { Container, ContentHeader, ErrorText } from '../../Streaming/Common';
+import { usePollViewToggle } from '../../AppData/useSidepane';
+import { usePollViewState } from '../../AppData/useUISettings';
+import { isValidTextInput } from '../../../common/utils';
+import { StatusIndicator } from '../common/StatusIndicator';
+import { INTERACTION_TYPE, POLL_STATE, POLL_VIEWS } from '../../../common/constants';
+
+export const PollsQuizMenu = () => {
+  const togglePollView = usePollViewToggle();
+  const permissions = useHMSStore(selectPermissions);
+
+  return (
+    <Container rounded>
+      <ContentHeader content="Polls and Quizzes" onClose={togglePollView} />
+      <Flex direction="column" css={{ px: '$10', pb: '$10', overflowY: 'auto' }}>
+        {permissions?.pollWrite && <AddMenu />}
+        <PrevMenu />
+      </Flex>
+    </Container>
+  );
+};
+
+function InteractionSelectionCard({ title, icon, active, onClick }) {
+  const activeBorderStyle = active ? '$space$px solid $primary_default' : '$space$px solid $border_bright';
+  return (
+    <Flex
+      onClick={onClick}
+      css={{
+        border: activeBorderStyle,
+        p: '$4',
+        r: '$2',
+        w: '100%',
+        cursor: 'pointer',
+      }}
+      align="center"
+    >
+      <Flex
+        css={{
+          border: activeBorderStyle,
+          p: '$4',
+          bg: '$surface_bright',
+          c: '$on_surface_high',
+          r: '$0',
+        }}
+      >
+        {icon}
+      </Flex>
+      <Text variant="sub1" css={{ ml: '$md' }}>
+        {title}
+      </Text>
+    </Flex>
+  );
+}
+
+const AddMenu = () => {
+  const actions = useHMSActions();
+  const [title, setTitle] = useState('');
+  const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
+  const [anonymous, setAnonymous] = useState(false);
+  const [hideVoteCount, setHideVoteCount] = useState(false);
+  const [error, setError] = useState();
+  const [titleError, setTitleError] = useState('');
+  const { setPollState } = usePollViewState();
+  const [interactionType, setInteractionType] = useState(INTERACTION_TYPE.POLL);
+
+  const handleCreate = id => {
+    setPollState({
+      [POLL_STATE.pollInView]: id,
+      [POLL_STATE.view]: POLL_VIEWS.CREATE_QUESTIONS,
+    });
+  };
+
+  const validateTitle = useMemo(() => {
+    if (!isValidTextInput(title)) {
+      if (title) {
+        setTitleError('The title should have between 2-100 characters');
+      }
+      return true;
+    } else {
+      setTitleError('');
+      return false;
+    }
+  }, [title]);
+  // const [timer, setTimer] = useState(10);
+  // const [showTimerDropDown, setShowTimerDropDown] = useState(false);
+
+  return (
+    <>
+      <Text variant="caption" css={{ c: '$on_surface_medium', mb: '$md' }}>
+        Select the type you want to continue with
+      </Text>
+      <Flex css={{ w: '100%', gap: '$10', mb: '$md' }}>
+        <InteractionSelectionCard
+          title={INTERACTION_TYPE.POLL}
+          icon={<StatsIcon width={32} height={32} />}
+          onClick={() => setInteractionType(INTERACTION_TYPE.POLL)}
+          active={interactionType === INTERACTION_TYPE.POLL}
+        />
+        <InteractionSelectionCard
+          title={INTERACTION_TYPE.QUIZ}
+          icon={<QuestionIcon width={32} height={32} />}
+          onClick={() => setInteractionType(INTERACTION_TYPE.QUIZ)}
+          active={interactionType === INTERACTION_TYPE.QUIZ}
+        />
+      </Flex>
+      <Flex direction="column">
+        <Text variant="body2" css={{ mb: '$4' }}>{`Name this ${interactionType.toLowerCase()}`}</Text>
+        <Input
+          type="text"
+          value={title}
+          onChange={event => setTitle(event.target.value)}
+          css={{
+            backgroundColor: '$surface_bright',
+            border: '1px solid $border_default',
+          }}
+        />
+        <Flex align="center" css={{ mt: '$10' }}>
+          <Switch onCheckedChange={value => setHideVoteCount(value)} css={{ mr: '$6' }} />
+          <Text variant="body2" css={{ c: '$on_surface_medium' }}>
+            Hide Vote Count
+          </Text>
+        </Flex>
+        <Flex align="center" css={{ mt: '$10' }}>
+          <Switch onCheckedChange={value => setAnonymous(value)} css={{ mr: '$6' }} />
+          <Text variant="body2" css={{ c: '$on_surface_medium' }}>
+            Make Results Anonymous
+          </Text>
+        </Flex>
+        {/* <Timer
+        timer={timer}
+        setTimer={setTimer}
+        showTimerDropDown={showTimerDropDown}
+        setShowTimerDropDown={setShowTimerDropDown}
+      /> */}
+
+        <Button
+          variant="primary"
+          disabled={validateTitle}
+          css={{ mt: '$10' }}
+          onClick={async () => {
+            const id = Date.now().toString();
+            await actions.interactivityCenter
+              .createPoll({
+                id,
+                title,
+                anonymous,
+                rolesThatCanViewResponses: hideVoteCount && localPeerRoleName ? [localPeerRoleName] : undefined,
+                type: interactionType.toLowerCase(),
+                // duration: showTimerDropDown ? timer : undefined,
+              })
+              .then(() => handleCreate(id))
+              .catch(err => setError(err.message));
+          }}
+        >
+          Create {interactionType}
+        </Button>
+        <ErrorText error={error || titleError} />
+      </Flex>
+    </>
+  );
+};
+
+const PrevMenu = () => {
+  const polls = useHMSStore(selectPolls)?.filter(poll => poll.state === 'started' || poll.state === 'stopped');
+  return polls?.length ? (
+    <Flex
+      css={{
+        borderTop: '$space$px solid $border_bright',
+        mt: '$10',
+        pt: '$10',
+      }}
+    >
+      <Flex direction="column" css={{ w: '100%' }}>
+        <Text variant="h6" css={{ c: '$on_surface_high' }}>
+          Previous Polls and Quizzes
+        </Text>
+        <Flex direction="column" css={{ gap: '$10', mt: '$8' }}>
+          {polls.map(poll => (
+            <InteractionCard
+              key={poll.id}
+              id={poll.id}
+              title={poll.title}
+              isLive={poll.state === 'started'}
+              isTimed={(poll.duration || 0) > 0}
+            />
+          ))}
+        </Flex>
+      </Flex>
+    </Flex>
+  ) : null;
+};
+
+const InteractionCard = ({ id, title, isLive, isTimed }) => {
+  const { setPollState } = usePollViewState();
+
+  const goToVote = id => {
+    setPollState({
+      [POLL_STATE.pollInView]: id,
+      [POLL_STATE.view]: POLL_VIEWS.VOTE,
+    });
+  };
+
+  return (
+    <Flex direction="column" css={{ backgroundColor: '$surface_bright', borderRadius: '$1', p: '$8' }}>
+      <Flex css={{ w: '100%', justifyContent: 'space-between', mb: '$sm' }}>
+        <Text variant="sub1" css={{ c: '$on_surface_high', fontWeight: '$semiBold' }}>
+          {title}
+        </Text>
+        <StatusIndicator isLive={isLive} shouldShowTimer={isLive && isTimed} />
+      </Flex>
+      <Flex css={{ w: '100%', gap: '$4' }} justify="end">
+        <Button variant="primary" onClick={() => goToVote(id)}>
+          View
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Polls/CreatePollQuiz/Timer.jsx

@@ -0,0 +1,71 @@
+// @ts-check
+import React, { useRef, useState } from 'react';
+import { Dropdown, Flex, Switch, Text } from '../../../../';
+import { DialogDropdownTrigger } from '../../../primitives/DropdownTrigger';
+import { useDropdownSelection } from '../../hooks/useDropdownSelection';
+
+const timerSettings = {
+  10: '10 secs',
+  15: '15 secs',
+  20: '20 secs',
+  25: '25 secs',
+  30: '30 secs',
+  60: '1 min',
+  120: '2 mins',
+  300: '5 mins',
+};
+
+export const Timer = ({ timer, setTimer, showTimerDropDown, setShowTimerDropDown }) => {
+  const selectionBg = useDropdownSelection();
+  const [timerDropdownToggle, setTimerDropdownToggle] = useState(false);
+  const timerDropdownRef = useRef();
+
+  return (
+    <Flex justify="between" align="center" css={{ mt: '$10' }}>
+      <Flex align="center">
+        <Switch checked={showTimerDropDown} onCheckedChange={setShowTimerDropDown} css={{ mr: '$6' }} />
+        <Text variant="body2" css={{ c: '$on_surface_medium' }}>
+          Timer
+        </Text>
+      </Flex>
+      <Flex align="center">
+        {showTimerDropDown ? (
+          <Dropdown.Root open={timerDropdownToggle} onOpenChange={setTimerDropdownToggle}>
+            <DialogDropdownTrigger
+              ref={timerDropdownRef}
+              title={timerSettings[timer]}
+              open={timerDropdownToggle}
+              titleCss={{ c: '$on_surface_high', ml: '$md' }}
+            />
+            <Dropdown.Portal>
+              <Dropdown.Content
+                align="start"
+                sideOffset={8}
+                css={{
+                  w: timerDropdownRef.current?.clientWidth,
+                  zIndex: 1000,
+                }}
+              >
+                {Object.keys(timerSettings).map(value => {
+                  const val = parseInt(value);
+                  return (
+                    <Dropdown.Item
+                      key={value}
+                      onSelect={() => setTimer(val)}
+                      css={{
+                        px: '$9',
+                        bg: timer === val ? selectionBg : undefined,
+                      }}
+                    >
+                      {timerSettings[val]}
+                    </Dropdown.Item>
+                  );
+                })}
+              </Dropdown.Content>
+            </Dropdown.Portal>
+          </Dropdown.Root>
+        ) : null}
+      </Flex>
+    </Flex>
+  );
+};

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>
+  );
+};