@100mslive/roomkit-react 0.4.3-alpha.3 → 0.4.3-alpha.5

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

@@ -1,143 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {
-  selectLocalPeer,
-  selectPeerNameByID,
-  selectPermissions,
-  selectPollByID,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
-import { Box, Button, Flex, Text } from '../../../..';
-// @ts-ignore
-import { Container } from '../../Streaming/Common';
-import { StandardView } from './StandardVoting';
-import { TimedView } from './TimedVoting';
-// @ts-ignore
-import { usePollViewState } from '../../AppData/useUISettings';
-// @ts-ignore
-import { getPeerResponses } from '../../../common/utils';
-import { StatusIndicator } from '../common/StatusIndicator';
-import { POLL_VIEWS } from '../../../common/constants';
-
-export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => void }) => {
-  const actions = useHMSActions();
-  const poll = useHMSStore(selectPollByID(id));
-  const pollCreatorName = useHMSStore(selectPeerNameByID(poll?.createdBy));
-  const permissions = useHMSStore(selectPermissions);
-  const canEndActivity = !!permissions?.pollWrite;
-  const { setPollView } = usePollViewState();
-  // Sets view - linear or vertical, toggles timer indicator
-  const showSingleView = poll?.type === 'quiz' && poll.state === 'started';
-  const fetchedInitialResponses = useRef(false);
-  const [savedResponses, setSavedResponses] = useState<Record<any, any>>({});
-  const localPeer = useHMSStore(selectLocalPeer);
-  const localPeerId = localPeer?.id;
-  const customerUserId = localPeer?.customerUserId;
-
-  // To reset whenever a different poll is opened
-  useEffect(() => {
-    fetchedInitialResponses.current = false;
-    setSavedResponses({});
-  }, [id, setSavedResponses]);
-
-  useEffect(() => {
-    const getResponses = async () => {
-      if (poll && actions.interactivityCenter && !fetchedInitialResponses.current) {
-        await actions.interactivityCenter.getPollResponses(poll, true);
-        fetchedInitialResponses.current = true;
-      }
-    };
-    getResponses();
-  }, [poll, actions.interactivityCenter]);
-
-  useEffect(() => {
-    if (poll?.questions) {
-      const localPeerResponses = getPeerResponses(poll.questions, localPeerId, customerUserId);
-      // @ts-ignore
-      localPeerResponses?.forEach(response => {
-        if (response) {
-          setSavedResponses(prev => {
-            const prevCopy = { ...prev };
-            prevCopy[response[0]?.questionIndex] = { option: response[0]?.option, options: response[0]?.options };
-            return prevCopy;
-          });
-        }
-      });
-    }
-  }, [localPeerId, poll?.questions, id, customerUserId]);
-
-  if (!poll) {
-    return null;
-  }
-
-  const canViewLeaderboard = poll.type === 'quiz' && poll.state === 'stopped' && !poll.anonymous;
-
-  return (
-    <Container rounded>
-      <Flex
-        align="center"
-        css={{
-          gap: '$4',
-          py: '$6',
-          px: '$8',
-          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.title}</Text>
-        <StatusIndicator status={poll.state} />
-        <Box
-          css={{
-            marginLeft: 'auto',
-            cursor: 'pointer',
-            '&:hover': { opacity: '0.8' },
-            height: 'fit-content',
-          }}
-        >
-          <CrossIcon onClick={toggleVoting} />
-        </Box>
-      </Flex>
-
-      <Flex direction="column" css={{ p: '$8 $10', flex: '1 1 0', overflowY: 'auto' }}>
-        {poll.state === 'started' ? (
-          <Text css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>
-            {pollCreatorName || 'Participant'} started a {poll.type}
-          </Text>
-        ) : null}
-
-        {showSingleView ? (
-          <TimedView poll={poll} localPeerResponses={savedResponses} updateSavedResponses={setSavedResponses} />
-        ) : (
-          <StandardView poll={poll} localPeerResponses={savedResponses} updateSavedResponses={setSavedResponses} />
-        )}
-      </Flex>
-      <Flex
-        css={{ w: '100%', justifyContent: 'end', alignItems: 'center', p: '$8', borderTop: '1px solid $border_bright' }}
-      >
-        {poll.state === 'started' && canEndActivity && (
-          <Button
-            variant="danger"
-            css={{ fontWeight: '$semiBold', w: 'max-content' }}
-            onClick={() => actions.interactivityCenter.stopPoll(id)}
-          >
-            End {poll.type}
-          </Button>
-        )}
-        {canViewLeaderboard ? (
-          <Button css={{ fontWeight: '$semiBold', w: 'max-content' }} onClick={() => setPollView(POLL_VIEWS.RESULTS)}>
-            View Leaderboard
-          </Button>
-        ) : null}
-      </Flex>
-    </Container>
-  );
-};

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

@@ -1,50 +0,0 @@
-import { useEffect, useState } from 'react';
-import {
-  HMSQuizLeaderboardResponse,
-  HMSQuizLeaderboardSummary,
-  selectPollByID,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-
-export const useQuizSummary = (quizID: string) => {
-  const hmsActions = useHMSActions();
-  const quiz = useHMSStore(selectPollByID(quizID));
-  const [quizLeaderboard, setQuizLeaderboard] = useState<HMSQuizLeaderboardResponse | undefined>();
-
-  const summary: HMSQuizLeaderboardSummary = quizLeaderboard?.summary || {
-    totalUsers: 0,
-    votedUsers: 0,
-    avgScore: 0,
-    avgTime: 0,
-    correctUsers: 0,
-  };
-  const [calculations, setCalculations] = useState({ maxPossibleScore: 0, totalResponses: 0 });
-
-  useEffect(() => {
-    const fetchLeaderboardData = async () => {
-      if (!quizLeaderboard && quiz && !quiz?.anonymous && quiz.state === 'stopped') {
-        const leaderboardData = await hmsActions.interactivityCenter.fetchLeaderboard(quiz.id, 0, 200);
-
-        const { maxPossibleScore, totalResponses } =
-          quiz?.questions?.reduce((accumulator, question) => {
-            accumulator.maxPossibleScore += question.weight || 0;
-            accumulator.totalResponses += question?.responses?.length || 0;
-            return accumulator;
-          }, calculations) || calculations;
-
-        setQuizLeaderboard(leaderboardData);
-        setCalculations({ maxPossibleScore, totalResponses });
-      }
-    };
-
-    fetchLeaderboardData();
-  }, [quiz, hmsActions.interactivityCenter, quizLeaderboard, calculations]);
-
-  return {
-    quizLeaderboard,
-    summary,
-    maxPossibleScore: calculations.maxPossibleScore,
-    totalResponses: calculations.totalResponses,
-  };
-};

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import { Flex } from '../../../../Layout';
-
-export const Line = () => <Flex css={{ w: '100%', borderBottom: '1px solid $border_bright', h: '1px', my: '$8' }} />;

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

@@ -1,115 +0,0 @@
-// @ts-check
-import React from 'react';
-import { CheckCircleIcon, 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,
-  options,
-  canRespond,
-  totalResponses,
-  selectedOptions,
-  setSelectedOptions,
-  showVoteCount,
-  isQuiz,
-  correctOptionIndexes,
-  localPeerResponse,
-  isStopped,
-}) => {
-  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 => {
-        return (
-          <Flex align="center" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$4' }}>
-            {!isStopped || !isQuiz ? (
-              <Checkbox.Root
-                id={`${questionIndex}-${option.index}`}
-                disabled={!canRespond}
-                checked={localPeerResponse?.options?.includes(option.index)}
-                onCheckedChange={checked => handleCheckedChange(checked, option.index)}
-                css={{
-                  cursor: canRespond ? 'pointer' : 'not-allowed',
-                  flexShrink: 0,
-                }}
-              >
-                <Checkbox.Indicator>
-                  <CheckIcon width={16} height={16} />
-                </Checkbox.Indicator>
-              </Checkbox.Root>
-            ) : null}
-
-            {isStopped && correctOptionIndexes?.includes(option.index) ? (
-              <Flex align="center" css={{ color: '$on_surface_high' }}>
-                <CheckCircleIcon height={20} width={20} />
-              </Flex>
-            ) : null}
-
-            <Flex direction="column" css={{ flexGrow: '1' }}>
-              <Flex css={{ w: '100%' }}>
-                <Text css={{ display: 'flex', flexGrow: '1' }}>
-                  <Label htmlFor={`${questionIndex}-${option.index}`} css={{ color: 'inherit' }}>
-                    {option.text}
-                  </Label>
-                </Text>
-                {showVoteCount && <VoteCount voteCount={option.voteCount} />}
-              </Flex>
-              {showVoteCount && <VoteProgress option={option} totalResponses={totalResponses} />}
-            </Flex>
-
-            {isStopped && isQuiz && localPeerResponse?.options.includes(option.index) ? (
-              <Text variant="sm" css={{ color: '$on_surface_medium', maxWidth: 'max-content' }}>
-                Your Answer
-              </Text>
-            ) : null}
-          </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: '$4' }}>
-            {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.tsx

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

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

@@ -1,140 +0,0 @@
-// @ts-check
-import React from 'react';
-import { CheckCircleIcon } from '@100mslive/react-icons';
-import { Flex, Label, RadioGroup, Text } from '../../../..';
-import { OptionInputWithDelete } from './OptionInputWithDelete';
-import { VoteCount } from './VoteCount';
-import { VoteProgress } from './VoteProgress';
-
-export const SingleChoiceOptions = ({
-  questionIndex,
-  options,
-  canRespond,
-  setAnswer,
-  totalResponses,
-  showVoteCount,
-  correctOptionIndex,
-  isStopped,
-  isQuiz,
-  localPeerResponse,
-}) => {
-  return (
-    <RadioGroup.Root value={localPeerResponse?.option} onValueChange={value => setAnswer(value)}>
-      <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
-        {options.map(option => {
-          return (
-            <Flex align="center" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$4' }}>
-              {!isStopped || !isQuiz ? (
-                <RadioGroup.Item
-                  css={{
-                    background: 'none',
-                    h: '$9',
-                    w: '$9',
-                    border: '2px solid',
-                    borderColor: '$on_surface_high',
-                    display: 'flex',
-                    flexShrink: 0,
-                    pt: '$1',
-                    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>
-              ) : null}
-
-              {isStopped && correctOptionIndex === option.index && isQuiz ? (
-                <Flex css={{ color: '$on_surface_high' }}>
-                  <CheckCircleIcon height={20} width={20} />
-                </Flex>
-              ) : null}
-
-              <Flex direction="column" css={{ flexGrow: '1' }}>
-                <Flex css={{ w: '100%' }}>
-                  <Text css={{ display: 'flex', flexGrow: '1', color: '$on_surface_high' }}>
-                    <Label style={{ color: 'inherit' }} htmlFor={`${questionIndex}-${option.index}`}>
-                      {option.text}
-                    </Label>
-                  </Text>
-                  {showVoteCount && <VoteCount voteCount={option.voteCount} />}
-                </Flex>
-                {showVoteCount && <VoteProgress option={option} totalResponses={totalResponses} />}
-              </Flex>
-              {isStopped && isQuiz && localPeerResponse?.option === option.index ? (
-                <Text variant="sm" css={{ color: '$on_surface_medium', maxWidth: 'max-content' }}>
-                  Your Answer
-                </Text>
-              ) : null}
-            </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: '$4' }}>
-              {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>
-  );
-};

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import { HMSPollState } from '@100mslive/react-sdk';
-import { Flex, Text } from '../../../../';
-import { PollStage } from './constants';
-
-const statusMap: Record<HMSPollState, PollStage> = {
-  created: PollStage.DRAFT,
-  started: PollStage.LIVE,
-  stopped: PollStage.ENDED,
-};
-
-export const StatusIndicator = ({ status }: { status?: HMSPollState }) => {
-  if (!status) return null;
-  return (
-    <Flex align="center">
-      <Flex
-        css={{
-          backgroundColor: statusMap[status] === PollStage.LIVE ? '$alert_error_default' : '$secondary_default',
-          p: '$2 $4',
-          borderRadius: '$0',
-        }}
-      >
-        <Text
-          variant="caption"
-          css={{
-            fontWeight: '$semiBold',
-            color: '$on_primary_high',
-          }}
-        >
-          {statusMap[status]}
-        </Text>
-      </Flex>
-    </Flex>
-  );
-};

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Flex, Text } from '../../../../';
-
-export const VoteCount = ({ voteCount }: { voteCount: number }) => {
-  return (
-    <Flex css={{ alignItems: 'center' }}>
-      {voteCount ? (
-        <Text variant="sm" css={{ color: '$on_surface_medium' }}>
-          {voteCount}&nbsp;
-          {voteCount === 1 ? 'vote' : 'votes'}
-        </Text>
-      ) : null}
-    </Flex>
-  );
-};

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import { HMSPollQuestionOption } from '@100mslive/react-sdk';
-import { Progress } from '../../../../';
-
-export const VoteProgress = ({ option, totalResponses }: { option: HMSPollQuestionOption; totalResponses: number }) => {
-  const showProgress = typeof option.voteCount === 'number' && typeof totalResponses === 'number' && totalResponses > 0;
-  const progressValue = (100 * (option.voteCount || 0)) / totalResponses;
-
-  return showProgress ? (
-    <Progress.Root value={progressValue} css={{ mt: '$4' }}>
-      <Progress.Content
-        style={{
-          transform: `translateX(-${100 - progressValue}%)`,
-        }}
-      />
-    </Progress.Root>
-  ) : null;
-};

package/src/Prebuilt/components/Polls/common/constants.ts

@@ -1,5 +0,0 @@
-export enum PollStage {
-  DRAFT = 'DRAFT',
-  LIVE = 'LIVE',
-  ENDED = 'ENDED',
-}

package/src/Prebuilt/components/Polls/common/utils.ts

@@ -1,22 +0,0 @@
-export const getFormattedTime = (milliseconds: number | undefined, precise = true) => {
-  if (!milliseconds) return '-';
-
-  const totalSeconds = milliseconds / 1000;
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = totalSeconds % 60;
-
-  let formattedTime = '';
-  if (hours) {
-    formattedTime += `${hours}h `;
-  }
-  if (minutes || hours) {
-    formattedTime += `${minutes}m `;
-  }
-  if (!precise && (hours || minutes)) {
-    return formattedTime;
-  }
-  formattedTime += `${precise ? seconds.toFixed(3) : Math.floor(seconds)}s`;
-
-  return formattedTime;
-};