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

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

@@ -1,76 +0,0 @@
-import React from 'react';
-import { CheckCircleIcon, ClockIcon, TrophyFilledIcon } from '@100mslive/react-icons';
-import { Box, Flex } from '../../../../Layout';
-import { Text } from '../../../../Text';
-import { getFormattedTime } from '../common/utils';
-
-const positionColorMap: Record<number, string> = { 1: '#D69516', 2: '#3E3E3E', 3: '#583B0F' };
-
-export const LeaderboardEntry = ({
-  position,
-  score,
-  questionCount,
-  correctResponses,
-  userName,
-  maxPossibleScore,
-  duration,
-}: {
-  position: number;
-  score: number;
-  questionCount: number;
-  correctResponses: number;
-  userName: string;
-  maxPossibleScore: number;
-  duration: number;
-}) => {
-  return (
-    <Flex align="center" justify="between" css={{ my: '$8' }}>
-      <Flex align="center" css={{ gap: '$6' }}>
-        <Flex
-          align="center"
-          justify="center"
-          css={{
-            backgroundColor: positionColorMap[position] || '',
-            h: '$10',
-            w: '$10',
-            borderRadius: '$round',
-            color: position > 3 ? '$on_surface_low' : '#FFF',
-            fontSize: '$xs',
-            fontWeight: '$semiBold',
-          }}
-        >
-          {position}
-        </Flex>
-
-        <Box>
-          <Text variant="sm" css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>
-            {userName}
-          </Text>
-
-          <Text variant="sm" css={{ mt: '$1' }}>
-            {score} / {maxPossibleScore} points
-          </Text>
-        </Box>
-      </Flex>
-
-      <Flex align="center" css={{ gap: '$4', color: '$on_surface_medium' }}>
-        {position === 1 && score ? <TrophyFilledIcon height={16} width={16} /> : null}
-        {questionCount ? (
-          <>
-            <CheckCircleIcon height={16} width={16} />
-            <Text variant="xs">
-              {correctResponses}/{questionCount}
-            </Text>
-          </>
-        ) : null}
-
-        {duration ? (
-          <Flex align="center" css={{ gap: '$2', color: '$on_surface_medium' }}>
-            <ClockIcon height={16} width={16} />
-            <Text variant="xs">{getFormattedTime(duration)}</Text>
-          </Flex>
-        ) : null}
-      </Flex>
-    </Flex>
-  );
-};

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

@@ -1,116 +0,0 @@
-import React, { useState } from 'react';
-import { selectPollByID, useHMSStore } from '@100mslive/react-sdk';
-import { ChevronLeftIcon, ChevronRightIcon, CrossIcon } from '@100mslive/react-icons';
-import { Box, Flex } from '../../../../Layout';
-import { Loading } from '../../../../Loading';
-import { Text } from '../../../../Text';
-// @ts-ignore
-import { Container } from '../../Streaming/Common';
-import { LeaderboardEntry } from './LeaderboardEntry';
-import { PeerParticipationSummary } from './PeerParticipationSummary';
-// @ts-ignore
-import { useSidepaneToggle } from '../../AppData/useSidepane';
-// @ts-ignore
-import { usePollViewState } from '../../AppData/useUISettings';
-import { useQuizSummary } from './useQuizSummary';
-// @ts-ignore
-import { StatusIndicator } from '../common/StatusIndicator';
-import { POLL_VIEWS } from '../../../common/constants';
-
-export const LeaderboardSummary = ({ pollID }: { pollID: string }) => {
-  const quiz = useHMSStore(selectPollByID(pollID));
-  const { quizLeaderboard, maxPossibleScore } = useQuizSummary(pollID);
-  const [viewAllEntries, setViewAllEntries] = useState(false);
-  const { setPollView } = usePollViewState();
-  const toggleSidepane = useSidepaneToggle();
-
-  if (!quiz || !quizLeaderboard)
-    return (
-      <Flex align="center" justify="center" css={{ size: '100%' }}>
-        <Loading />
-      </Flex>
-    );
-
-  const questionCount = quiz.questions?.length || 0;
-
-  return (
-    <Container rounded>
-      <Flex direction="column" css={{ size: '100%', p: '$8' }}>
-        <Flex justify="between" align="center" css={{ pb: '$6', borderBottom: '1px solid $border_bright', mb: '$8' }}>
-          <Flex align="center" css={{ gap: '$4' }}>
-            <Flex
-              css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
-              onClick={() => setPollView(POLL_VIEWS.VOTE)}
-            >
-              <ChevronLeftIcon />
-            </Flex>
-            <Text variant="lg" css={{ fontWeight: '$semiBold' }}>
-              {quiz.title}
-            </Text>
-            <StatusIndicator status={quiz.state} />
-          </Flex>
-          <Flex
-            css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
-            onClick={toggleSidepane}
-          >
-            <CrossIcon />
-          </Flex>
-        </Flex>
-        <Box css={{ overflowY: 'auto', mr: '-$4', pr: '$4' }}>
-          {!viewAllEntries ? <PeerParticipationSummary quiz={quiz} /> : null}
-
-          <Text variant="sm" css={{ fontWeight: '$semiBold', mt: '$4' }}>
-            Leaderboard
-          </Text>
-          <Text variant="xs" css={{ color: '$on_surface_medium' }}>
-            Based on score and time taken to cast the correct answer
-          </Text>
-          <Box
-            css={{
-              mt: '$8',
-              overflowY: 'auto',
-              flex: viewAllEntries ? '1 1 0' : 'unset',
-              mr: viewAllEntries ? '-$6' : 'unset',
-              px: viewAllEntries ? '0' : '$4',
-              pr: viewAllEntries ? '$6' : '$4',
-              backgroundColor: viewAllEntries ? '' : '$surface_default',
-              borderRadius: '$1',
-            }}
-          >
-            {quizLeaderboard?.entries &&
-              quizLeaderboard.entries
-                .slice(0, viewAllEntries ? undefined : 5)
-                .map(question => (
-                  <LeaderboardEntry
-                    key={question.position}
-                    position={question.position}
-                    score={question.score}
-                    questionCount={questionCount}
-                    correctResponses={question.correctResponses}
-                    userName={question.peer.username || ''}
-                    maxPossibleScore={maxPossibleScore}
-                    duration={question.duration}
-                  />
-                ))}
-            {quizLeaderboard?.entries?.length > 5 && !viewAllEntries ? (
-              <Flex
-                align="center"
-                justify="end"
-                css={{
-                  w: '100%',
-                  borderTop: '1px solid $border_bright',
-                  cursor: 'pointer',
-                  color: '$on_surface_high',
-                  p: '$6 $2',
-                }}
-                onClick={() => setViewAllEntries(true)}
-              >
-                <Text variant="sm">View All</Text> <ChevronRightIcon />
-              </Flex>
-            ) : null}
-          </Box>
-        </Box>
-      </Flex>
-    </Container>
-  );
-};

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

@@ -1,60 +0,0 @@
-import React from 'react';
-import { HMSPoll, selectLocalPeerID, useHMSStore } from '@100mslive/react-sdk';
-import { Box } from '../../../../Layout';
-import { Text } from '../../../../Text';
-import { StatisticBox } from './StatisticBox';
-import { useQuizSummary } from './useQuizSummary';
-import { getFormattedTime } from '../common/utils';
-
-export const PeerParticipationSummary = ({ quiz }: { quiz: HMSPoll }) => {
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const { quizLeaderboard, summary } = useQuizSummary(quiz.id);
-  if (quiz.state !== 'stopped') {
-    return <></>;
-  }
-  const isLocalPeerQuizCreator = localPeerId === quiz.startedBy;
-  const peerEntry = quizLeaderboard?.entries.find(entry => entry.peer?.peerid === localPeerId);
-
-  const boxes = isLocalPeerQuizCreator
-    ? [
-        {
-          title: 'Voted',
-          value: `${summary.totalUsers ? ((100 * summary.votedUsers) / summary.totalUsers).toFixed(0) : 0}% (${
-            summary.votedUsers
-          }/${summary.totalUsers})`,
-        },
-        {
-          title: 'Correct Answers',
-          value: `${summary.totalUsers ? ((100 * summary.correctUsers) / summary.totalUsers).toFixed(0) : 0}% (${
-            summary.correctUsers
-          }/${summary.totalUsers})`,
-        },
-        // Time in ms
-        { title: 'Avg. Time Taken', value: getFormattedTime(summary.avgTime) },
-        {
-          title: 'Avg. Score',
-          value: Number.isInteger(summary.avgScore) ? summary.avgScore : summary.avgScore.toFixed(2),
-        },
-      ]
-    : [
-        { title: 'Your rank', value: peerEntry?.position || '-' },
-        { title: 'Points', value: peerEntry?.score || 0 },
-        // Time in ms
-        { title: 'Time Taken', value: getFormattedTime(peerEntry?.duration) },
-        {
-          title: 'Correct Answers',
-          value: peerEntry?.totalResponses ? `${peerEntry?.correctResponses}/${peerEntry.totalResponses}` : '-',
-        },
-      ];
-
-  return (
-    <Box>
-      <Text css={{ fontWeight: '$semiBold', my: '$8' }}>Participation Summary</Text>
-      <Box css={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '$4' }}>
-        {boxes.map(box => (
-          <StatisticBox key={box.title} title={box.title} value={box.value} />
-        ))}
-      </Box>
-    </Box>
-  );
-};

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

@@ -1,221 +0,0 @@
-// @ts-check
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { match } from 'ts-pattern';
-import {
-  HMSRoomState,
-  selectLocalPeer,
-  selectLocalPeerRoleName,
-  selectRoomState,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { CheckCircleIcon, ChevronDownIcon, CrossCircleIcon } from '@100mslive/react-icons';
-import { Box, Button, Flex, Text } from '../../../../';
-import { checkCorrectAnswer } from '../../../common/utils';
-import { MultipleChoiceOptions } from '../common/MultipleChoiceOptions';
-import { SingleChoiceOptions } from '../common/SingleChoiceOptions';
-import { QUESTION_TYPE } from '../../../common/constants';
-
-export const QuestionCard = ({
-  pollID,
-  isQuiz,
-  startedBy,
-  pollState,
-  index,
-  totalQuestions,
-  result,
-  type,
-  text,
-  options = [],
-  answer,
-  localPeerResponse,
-  updateSavedResponses,
-  rolesThatCanViewResponses,
-}) => {
-  const actions = useHMSActions();
-  const localPeer = useHMSStore(selectLocalPeer);
-  const roomState = useHMSStore(selectRoomState);
-  const isLocalPeerCreator = localPeer?.id === startedBy;
-  const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
-  const roleCanViewResponse =
-    !rolesThatCanViewResponses ||
-    rolesThatCanViewResponses.length === 0 ||
-    rolesThatCanViewResponses.includes(localPeerRoleName || '');
-  const [localPeerChoice, setLocalPeerChoice] = useState(localPeerResponse);
-
-  useEffect(() => {
-    setLocalPeerChoice(localPeerResponse);
-  }, [localPeerResponse]);
-
-  const showVoteCount =
-    roleCanViewResponse && (localPeerChoice || (isLocalPeerCreator && pollState === 'stopped')) && !isQuiz;
-
-  const isLive = pollState === 'started';
-  const pollEnded = pollState === 'stopped';
-  const canRespond = isLive && !localPeerChoice;
-  const startTime = useRef(Date.now());
-  const isCorrectAnswer = checkCorrectAnswer(answer, localPeerChoice, type);
-
-  const [singleOptionAnswer, setSingleOptionAnswer] = useState();
-  const [multipleOptionAnswer, setMultipleOptionAnswer] = useState(new Set());
-  const [showOptions, setShowOptions] = useState(true);
-
-  const respondedToQuiz = isQuiz && localPeerChoice && !localPeerChoice.skipped;
-
-  const isValidVote = useMemo(() => {
-    if (type === QUESTION_TYPE.SINGLE_CHOICE) {
-      return singleOptionAnswer !== undefined;
-    } else if (type === QUESTION_TYPE.MULTIPLE_CHOICE) {
-      return multipleOptionAnswer.size > 0;
-    }
-  }, [singleOptionAnswer, multipleOptionAnswer, type]);
-
-  const handleVote = useCallback(async () => {
-    if (!isValidVote) {
-      return;
-    }
-    const submittedResponse = {
-      questionIndex: index,
-      option: singleOptionAnswer,
-      options: Array.from(multipleOptionAnswer),
-      duration: Date.now() - startTime.current,
-    };
-    await actions.interactivityCenter.addResponsesToPoll(pollID, [submittedResponse]);
-    updateSavedResponses(prev => {
-      const prevCopy = { ...prev };
-      prevCopy[index] = { option: singleOptionAnswer, options: Array.from(multipleOptionAnswer) };
-      return prevCopy;
-    });
-    startTime.current = Date.now();
-  }, [
-    isValidVote,
-    index,
-    singleOptionAnswer,
-    multipleOptionAnswer,
-    actions.interactivityCenter,
-    pollID,
-    updateSavedResponses,
-  ]);
-
-  return (
-    <Box
-      css={{
-        backgroundColor: '$surface_bright',
-        borderRadius: '$1',
-        p: '$md',
-        mt: '$md',
-        border:
-          respondedToQuiz && !isLive
-            ? `1px solid ${isCorrectAnswer ? '$alert_success' : '$alert_error_default'}`
-            : 'none',
-      }}
-    >
-      <Flex align="center" justify="between">
-        <Text
-          variant="caption"
-          css={{
-            color: match({ respondedToQuiz, isLive, isCorrectAnswer })
-              .when(
-                ({ respondedToQuiz, isLive }) => respondedToQuiz && !isLive,
-                ({ isCorrectAnswer }) => (isCorrectAnswer ? '$alert_success' : '$alert_error_default'),
-              )
-              .otherwise(() => '$on_surface_low'),
-            fontWeight: '$semiBold',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '$4',
-          }}
-        >
-          {match({ respondedToQuiz, pollEnded, isCorrectAnswer })
-            .when(
-              ({ respondedToQuiz, pollEnded }) => respondedToQuiz && pollEnded,
-              ({ isCorrectAnswer }) => {
-                return isCorrectAnswer ? (
-                  <CheckCircleIcon height={16} width={16} />
-                ) : (
-                  <CrossCircleIcon height={16} width={16} />
-                );
-              },
-            )
-            .otherwise(() => null)}
-          QUESTION {index} OF {totalQuestions}: {type.toUpperCase()}
-        </Text>
-      </Flex>
-
-      <Flex justify="between" css={{ my: '$md' }}>
-        <Text css={{ color: '$on_surface_high' }}>{text}</Text>
-        <Box
-          css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
-          onClick={() => setShowOptions(prev => !prev)}
-        >
-          <ChevronDownIcon
-            style={{ transform: showOptions ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.3s ease' }}
-          />
-        </Box>
-      </Flex>
-
-      <Box
-        css={{ maxHeight: showOptions ? '$80' : '0', transition: 'max-height 0.3s ease', overflowY: 'auto', mb: '$4' }}
-      >
-        {type === QUESTION_TYPE.SINGLE_CHOICE ? (
-          <SingleChoiceOptions
-            key={index}
-            questionIndex={index}
-            isQuiz={isQuiz}
-            canRespond={canRespond}
-            correctOptionIndex={answer?.option}
-            options={options}
-            setAnswer={setSingleOptionAnswer}
-            totalResponses={result?.totalResponses}
-            showVoteCount={showVoteCount}
-            localPeerResponse={localPeerChoice}
-            isStopped={pollState === 'stopped'}
-          />
-        ) : null}
-
-        {type === QUESTION_TYPE.MULTIPLE_CHOICE ? (
-          <MultipleChoiceOptions
-            questionIndex={index}
-            isQuiz={isQuiz}
-            canRespond={canRespond}
-            correctOptionIndexes={answer?.options}
-            options={options}
-            selectedOptions={multipleOptionAnswer}
-            setSelectedOptions={setMultipleOptionAnswer}
-            totalResponses={result?.totalResponses}
-            showVoteCount={showVoteCount}
-            localPeerResponse={localPeerChoice}
-            isStopped={pollState === 'stopped'}
-          />
-        ) : null}
-      </Box>
-      {isLive && (
-        <QuestionActions
-          disableVote={roomState !== HMSRoomState.Connected}
-          isValidVote={isValidVote}
-          onVote={handleVote}
-          response={localPeerChoice}
-          isQuiz={isQuiz}
-        />
-      )}
-    </Box>
-  );
-};
-
-const QuestionActions = ({ isValidVote, response, isQuiz, onVote, disableVote }) => {
-  return (
-    <Flex align="center" justify="end" css={{ gap: '$4', w: '100%' }}>
-      {response ? (
-        <Text css={{ fontWeight: '$semiBold', color: '$on_surface_medium' }}>
-          {response.skipped ? 'Skipped' : null}
-          {isQuiz && !response.skipped ? 'Answered' : null}
-          {!isQuiz && !response.skipped ? 'Voted' : null}
-        </Text>
-      ) : (
-        <Button css={{ p: '$xs $10', fontWeight: '$semiBold' }} disabled={!isValidVote || disableVote} onClick={onVote}>
-          {isQuiz ? 'Answer' : 'Vote'}
-        </Button>
-      )}
-    </Flex>
-  );
-};

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

@@ -1,47 +0,0 @@
-import React, { Dispatch, SetStateAction } from 'react';
-import { HMSPoll } from '@100mslive/react-sdk';
-import { PeerParticipationSummary } from './PeerParticipationSummary';
-// @ts-ignore
-import { QuestionCard } from './QuestionCard';
-
-export const StandardView = ({
-  poll,
-  localPeerResponses,
-  updateSavedResponses,
-}: {
-  poll: HMSPoll;
-  localPeerResponses: Record<number, number | number[] | undefined>;
-  updateSavedResponses: Dispatch<SetStateAction<Record<any, any>>>;
-}) => {
-  if (!poll?.questions) {
-    return null;
-  }
-
-  const isQuiz = poll.type === 'quiz';
-  const isStopped = poll.state === 'stopped';
-
-  return (
-    <>
-      {isQuiz && isStopped ? <PeerParticipationSummary quiz={poll} /> : null}
-      {poll.questions?.map((question, index) => (
-        <QuestionCard
-          pollID={poll.id}
-          isQuiz={isQuiz}
-          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}
-          localPeerResponse={localPeerResponses?.[question.index]}
-          answer={question.answer}
-          updateSavedResponses={updateSavedResponses}
-          rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
-        />
-      ))}
-    </>
-  );
-};

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Box } from '../../../../Layout';
-import { Text } from '../../../../Text';
-
-export const StatisticBox = ({ title, value = 0 }: { title: string; value: string | number | undefined }) => {
-  if (!value && !(typeof value === 'number')) {
-    return <></>;
-  }
-  return (
-    <Box css={{ p: '$8', background: '$surface_default', borderRadius: '$1', w: '100%' }}>
-      <Text
-        variant="tiny"
-        css={{ textTransform: 'uppercase', color: '$on_surface_medium', fontWeight: '$semiBold', my: '$4' }}
-      >
-        {title}
-      </Text>
-      <Text css={{ fontWeight: '$semiBold' }}>{value}</Text>
-    </Box>
-  );
-};

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

@@ -1,55 +0,0 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { HMSPoll } from '@100mslive/react-sdk';
-// @ts-ignore
-import { QuestionCard } from './QuestionCard';
-// @ts-ignore
-import { getIndexToShow } from '../../../common/utils';
-
-export const TimedView = ({
-  poll,
-  localPeerResponses,
-  updateSavedResponses,
-}: {
-  poll: HMSPoll;
-  localPeerResponses?: Record<number, number | number[] | undefined>;
-  updateSavedResponses: Dispatch<SetStateAction<Record<any, any>>>;
-}) => {
-  const [currentIndex, setCurrentIndex] = useState(getIndexToShow(localPeerResponses));
-  const activeQuestion = poll.questions?.find(question => question.index === currentIndex);
-  const attemptedAll = (poll.questions?.length || 0) < currentIndex;
-
-  // Handles increments so only one question is shown at a time in quiz
-  useEffect(() => {
-    setCurrentIndex(getIndexToShow(localPeerResponses));
-  }, [localPeerResponses]);
-
-  if ((!activeQuestion && !attemptedAll) || !poll.questions?.length) {
-    return null;
-  }
-
-  return (
-    <>
-      {poll.questions.map(question => {
-        return attemptedAll || activeQuestion?.index === question.index ? (
-          <QuestionCard
-            key={question.index}
-            pollID={poll.id}
-            isQuiz={poll.type === 'quiz'}
-            startedBy={poll.startedBy}
-            pollState={poll.state}
-            index={question.index}
-            text={question.text}
-            type={question.type}
-            result={question?.result}
-            totalQuestions={poll.questions?.length || 0}
-            options={question.options}
-            localPeerResponse={localPeerResponses?.[question.index]}
-            answer={question.answer}
-            rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
-            updateSavedResponses={updateSavedResponses}
-          />
-        ) : null;
-      })}
-    </>
-  );
-};