@100mslive/roomkit-react 0.3.10-alpha.16 → 0.3.10-alpha.18

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

@@ -1,5 +1,5 @@
 // @ts-check
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { match } from 'ts-pattern';
 import { selectLocalPeer, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { CheckCircleIcon, ChevronDownIcon, CrossCircleIcon } from '@100mslive/react-icons';
@@ -21,15 +21,12 @@ export const QuestionCard = ({
   text,
   options = [],
   answer,
-  setCurrentIndex,
-  responses = [],
+  localPeerResponse,
+  updateSavedResponses,
   rolesThatCanViewResponses,
 }) => {
   const actions = useHMSActions();
   const localPeer = useHMSStore(selectLocalPeer);
-  const localPeerResponse = responses?.find(
-    response => response.peer?.peerid === localPeer?.id || response.peer?.userid === localPeer?.customerUserId,
-  );
 
   const isLocalPeerCreator = localPeer?.id === startedBy;
   const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
@@ -37,20 +34,26 @@ export const QuestionCard = ({
     !rolesThatCanViewResponses ||
     rolesThatCanViewResponses.length === 0 ||
     rolesThatCanViewResponses.includes(localPeerRoleName || '');
+  const [localPeerChoice, setLocalPeerChoice] = useState(localPeerResponse);
+
+  useEffect(() => {
+    setLocalPeerChoice(localPeerResponse);
+  }, [localPeerResponse]);
+
   const showVoteCount =
-    roleCanViewResponse && (localPeerResponse || (isLocalPeerCreator && pollState === 'stopped')) && !isQuiz;
+    roleCanViewResponse && (localPeerChoice || (isLocalPeerCreator && pollState === 'stopped')) && !isQuiz;
 
   const isLive = pollState === 'started';
   const pollEnded = pollState === 'stopped';
-  const canRespond = isLive && !localPeerResponse;
+  const canRespond = isLive && !localPeerChoice;
   const startTime = useRef(Date.now());
-  const isCorrectAnswer = checkCorrectAnswer(answer, localPeerResponse, type);
+  const isCorrectAnswer = checkCorrectAnswer(answer, localPeerChoice, type);
 
   const [singleOptionAnswer, setSingleOptionAnswer] = useState();
   const [multipleOptionAnswer, setMultipleOptionAnswer] = useState(new Set());
   const [showOptions, setShowOptions] = useState(true);
 
-  const respondedToQuiz = isQuiz && localPeerResponse && !localPeerResponse.skipped;
+  const respondedToQuiz = isQuiz && localPeerChoice && !localPeerChoice.skipped;
 
   const isValidVote = useMemo(() => {
     if (type === QUESTION_TYPE.SINGLE_CHOICE) {
@@ -64,17 +67,28 @@ export const QuestionCard = ({
     if (!isValidVote) {
       return;
     }
-
-    await actions.interactivityCenter.addResponsesToPoll(pollID, [
-      {
-        questionIndex: index,
-        option: singleOptionAnswer,
-        options: Array.from(multipleOptionAnswer),
-        duration: Date.now() - startTime.current,
-      },
-    ]);
+    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, actions.interactivityCenter, pollID, index, singleOptionAnswer, multipleOptionAnswer]);
+  }, [
+    isValidVote,
+    index,
+    singleOptionAnswer,
+    multipleOptionAnswer,
+    actions.interactivityCenter,
+    pollID,
+    updateSavedResponses,
+  ]);
 
   return (
     <Box
@@ -147,7 +161,7 @@ export const QuestionCard = ({
             setAnswer={setSingleOptionAnswer}
             totalResponses={result?.totalResponses}
             showVoteCount={showVoteCount}
-            localPeerResponse={localPeerResponse}
+            localPeerResponse={localPeerChoice}
             isStopped={pollState === 'stopped'}
           />
         ) : null}
@@ -163,27 +177,19 @@ export const QuestionCard = ({
             setSelectedOptions={setMultipleOptionAnswer}
             totalResponses={result?.totalResponses}
             showVoteCount={showVoteCount}
-            localPeerResponse={localPeerResponse}
+            localPeerResponse={localPeerChoice}
             isStopped={pollState === 'stopped'}
           />
         ) : null}
       </Box>
       {isLive && (
-        <QuestionActions
-          isValidVote={isValidVote}
-          onVote={handleVote}
-          response={localPeerResponse}
-          isQuiz={isQuiz}
-          incrementIndex={() => {
-            setCurrentIndex(curr => Math.min(totalQuestions, curr + 1));
-          }}
-        />
+        <QuestionActions isValidVote={isValidVote} onVote={handleVote} response={localPeerChoice} isQuiz={isQuiz} />
       )}
     </Box>
   );
 };
 
-const QuestionActions = ({ isValidVote, response, isQuiz, onVote, incrementIndex }) => {
+const QuestionActions = ({ isValidVote, response, isQuiz, onVote }) => {
   return (
     <Flex align="center" justify="end" css={{ gap: '$4', w: '100%' }}>
       {response ? (
@@ -193,14 +199,7 @@ const QuestionActions = ({ isValidVote, response, isQuiz, onVote, incrementIndex
           {!isQuiz && !response.skipped ? 'Voted' : null}
         </Text>
       ) : (
-        <Button
-          css={{ p: '$xs $10', fontWeight: '$semiBold' }}
-          disabled={!isValidVote}
-          onClick={() => {
-            onVote();
-            incrementIndex();
-          }}
-        >
+        <Button css={{ p: '$xs $10', fontWeight: '$semiBold' }} disabled={!isValidVote} onClick={onVote}>
           {isQuiz ? 'Answer' : 'Vote'}
         </Button>
       )}

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

@@ -1,10 +1,18 @@
-import React from 'react';
+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 }: { poll: HMSPoll }) => {
+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;
   }
@@ -28,11 +36,9 @@ export const StandardView = ({ poll }: { poll: HMSPoll }) => {
           result={question.result}
           totalQuestions={poll.questions?.length || 0}
           options={question.options}
-          responses={question.responses}
+          localPeerResponse={localPeerResponses?.[question.index]}
           answer={question.answer}
-          setCurrentIndex={() => {
-            return;
-          }}
+          updateSavedResponses={updateSavedResponses}
           rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
         />
       ))}

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

@@ -1,16 +1,27 @@
-import React, { useState } from 'react';
-import { HMSPoll, selectLocalPeerID, useHMSStore } from '@100mslive/react-sdk';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { HMSPoll } from '@100mslive/react-sdk';
 // @ts-ignore
 import { QuestionCard } from './QuestionCard';
 // @ts-ignore
-import { getLastAttemptedIndex } from '../../../common/utils';
+import { getIndexToShow } from '../../../common/utils';
 
-export const TimedView = ({ poll }: { poll: HMSPoll }) => {
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const lastAttemptedIndex = getLastAttemptedIndex(poll.questions, localPeerId, '');
-  const [currentIndex, setCurrentIndex] = useState(lastAttemptedIndex);
+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 === lastAttemptedIndex - 1;
+  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;
@@ -32,10 +43,10 @@ export const TimedView = ({ poll }: { poll: HMSPoll }) => {
             result={question?.result}
             totalQuestions={poll.questions?.length || 0}
             options={question.options}
-            responses={question.responses}
+            localPeerResponse={localPeerResponses?.[question.index]}
             answer={question.answer}
-            setCurrentIndex={setCurrentIndex}
             rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
+            updateSavedResponses={updateSavedResponses}
           />
         ) : null;
       })}

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

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
+  selectLocalPeerID,
   selectPeerNameByID,
   selectPermissions,
   selectPollByID,
@@ -14,6 +15,8 @@ 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';
 
@@ -26,6 +29,41 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
   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 localPeerId = useHMSStore(selectLocalPeerID);
+
+  // 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);
+      // @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]);
 
   if (!poll) {
     return null;
@@ -74,7 +112,11 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
           </Text>
         ) : null}
 
-        {showSingleView ? <TimedView poll={poll} /> : <StandardView poll={poll} />}
+        {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' }}

package/src/Prebuilt/components/VideoLayouts/EqualProminence.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { selectLocalPeer, useHMSStore } from '@100mslive/react-sdk';
+import { PeopleAddIcon } from '@100mslive/react-icons';
 import { Flex } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
+import { WaitingView } from '../../layouts/WaitingView';
 import { InsetTile } from '../InsetTile';
 import { Pagination } from '../Pagination';
 import { Grid } from './Grid';
@@ -13,26 +14,14 @@ import { usePagesWithTiles, useTileLayout } from '../hooks/useTileLayout';
 import { UI_SETTINGS } from '../../common/constants';
 
 export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) {
-  const localPeer = useHMSStore(selectLocalPeer);
   const isMobile = useMedia(cssConfig.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
-  let pageList = usePagesWithTiles({
+  const pageList = usePagesWithTiles({
     peers,
     maxTileCount,
   });
-  // useMemo is needed to prevent recursion as new array is created for localPeer
-  const inputPeers = useMemo(() => {
-    if (pageList.length === 0) {
-      return localPeer ? [localPeer] : [];
-    }
-    return peers;
-  }, [pageList.length, peers, localPeer]);
-  // Pass local peer to main grid if no other peer has tiles
-  pageList = usePagesWithTiles({
-    peers: inputPeers,
-    maxTileCount,
-  });
+
   const { ref, pagesWithTiles } = useTileLayout({
     pageList,
     maxTileCount,
@@ -60,7 +49,14 @@ export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, o
           numPages={pagesWithTiles.length}
         />
       )}
-      {isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== localPeer?.id && <InsetTile />}
+      {pageList.length === 0 ? (
+        <WaitingView
+          title="Waiting for Host to join"
+          subtitle="Sit back and relax till others join"
+          icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
+        />
+      ) : null}
+      {isInsetEnabled && <InsetTile />}
     </Flex>
   );
 }

package/src/Prebuilt/layouts/HLSView.jsx

@@ -34,6 +34,7 @@ import { Loading } from '../../Loading';
 import { Text } from '../../Text';
 import { config, theme, useTheme } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
+import { WaitingView } from './WaitingView';
 import { useSidepaneToggle } from '../components/AppData/useSidepane';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useIsLandscape, useKeyboardHandler } from '../common/hooks';
@@ -457,17 +458,19 @@ const HLSView = () => {
             flex: isLandscape ? '2 1 0' : '1 1 0',
           }}
         >
-          <Flex align="center" justify="center" direction="column" css={{ size: '100%', px: '$10' }}>
-            <Flex css={{ c: '$on_surface_high', r: '$round', bg: '$surface_default', p: '$2' }}>
-              {streamEnded ? <ColoredHandIcon height={56} width={56} /> : <GoLiveIcon height={56} width={56} />}
-            </Flex>
-            <Text variant="h5" css={{ c: '$on_surface_high', mt: '$10', mb: 0, textAlign: 'center' }}>
-              {streamEnded ? 'Stream has ended' : 'Stream yet to start'}
-            </Text>
-            <Text variant="md" css={{ textAlign: 'center', mt: '$4', c: '$on_surface_medium' }}>
-              {streamEnded ? 'Have a nice day!' : 'Sit back and relax'}
-            </Text>
-          </Flex>
+          {streamEnded ? (
+            <WaitingView
+              icon={<ColoredHandIcon height={56} width={56} />}
+              title="Stream has ended"
+              subtitle="Have a nice day!"
+            />
+          ) : (
+            <WaitingView
+              icon={<GoLiveIcon height={56} width={56} style={{ color: 'white' }} />}
+              title="Stream yet to start"
+              subtitle="Sit back and relax"
+            />
+          )}
         </Flex>
       </>
     );

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -5,7 +5,14 @@ import {
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
-import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import {
+  selectIsConnectedToRoom,
+  selectIsLocalScreenShared,
+  selectLocalPeerRoleName,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { PeopleAddIcon, ShareScreenIcon } from '@100mslive/react-icons';
 import FullPageProgress from '../components/FullPageProgress';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
 import { Box, Flex } from '../../Layout';
@@ -21,11 +28,10 @@ import { CaptionsViewer } from '../plugins/CaptionsViewer';
 import {
   usePDFConfig,
   useUrlToEmbed,
-  useWaitingViewerRole,
   // @ts-ignore: No implicit Any
 } from '../components/AppData/useUISettings';
 import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
-import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
+import { useLandscapeHLSStream, useMobileHLSStream, useWaitingRoomInfo } from '../common/hooks';
 import { SESSION_STORE_KEY } from '../common/constants';
 // @ts-ignore: No implicit Any
 const HLSView = React.lazy(() => import('./HLSView'));
@@ -39,17 +45,20 @@ export const VideoStreamingSection = ({
   elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
   hideControls: boolean;
 }) => {
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const isSharingScreen = useHMSStore(selectIsLocalScreenShared);
 
   const hmsActions = useHMSActions();
-  const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFConfig();
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
   useCloseScreenshareWhiteboard();
 
+  const { isNotAllowedToPublish, isScreenOnlyPublishParams, hasSubscribedRolePublishing } = useWaitingRoomInfo();
+
+  console.log('pring ', isNotAllowedToPublish, isScreenOnlyPublishParams, hasSubscribedRolePublishing);
   useEffect(() => {
     if (!isConnected) {
       return;
@@ -64,7 +73,7 @@ export const VideoStreamingSection = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isConnected, hmsActions]);
 
-  if (!localPeerRole) {
+  if (!localPeerRoleName) {
     // we don't know the role yet to decide how to render UI
     return null;
   }
@@ -82,7 +91,15 @@ export const VideoStreamingSection = ({
           .with({ isMobileHLSStream: true }, () => 'column')
           .otherwise(() => 'row')}
       >
-        {match({ screenType, localPeerRole, pdfAnnotatorActive, urlToIframe })
+        {match({
+          screenType,
+          isNotAllowedToPublish,
+          isScreenOnlyPublishParams,
+          hasSubscribedRolePublishing,
+          isSharingScreen,
+          pdfAnnotatorActive,
+          urlToIframe,
+        })
           .with(
             {
               screenType: 'hls_live_streaming',
@@ -90,8 +107,26 @@ export const VideoStreamingSection = ({
             () => <HLSView />,
           )
           .when(
-            ({ localPeerRole }) => localPeerRole === waitingViewerRole,
-            () => <WaitingView />,
+            ({ isNotAllowedToPublish, hasSubscribedRolePublishing }) =>
+              isNotAllowedToPublish && !hasSubscribedRolePublishing,
+            () => (
+              <WaitingView
+                title="Waiting for Host to join"
+                subtitle="Sit back and relax"
+                icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
+              />
+            ),
+          )
+          .when(
+            ({ isScreenOnlyPublishParams, isSharingScreen, hasSubscribedRolePublishing }) =>
+              isScreenOnlyPublishParams && !isSharingScreen && !hasSubscribedRolePublishing,
+            () => (
+              <WaitingView
+                title="Ready to present"
+                subtitle="Select the Screenshare button to start presenting"
+                icon={<ShareScreenIcon width="56px" height="56px" style={{ color: 'white' }} />}
+              />
+            ),
           )
           .when(
             ({ pdfAnnotatorActive }) => !!pdfAnnotatorActive,

package/src/Prebuilt/layouts/WaitingView.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, Flex } from '../../Layout';
+import { Text } from '../../Text';
+
+export const WaitingView = React.memo(
+  ({ icon, title, subtitle }: { icon: React.ReactNode; title: string; subtitle: string }) => {
+    return (
+      <Flex
+        align="center"
+        direction="column"
+        css={{
+          textAlign: 'center',
+          margin: 'auto',
+          h: '100%',
+          justifyContent: 'center',
+          gap: '$8',
+        }}
+      >
+        <Box
+          css={{
+            backgroundColor: '$surface_default',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '$4',
+            size: '$20',
+            r: '$round',
+            justifyContent: 'center',
+          }}
+        >
+          {icon}
+        </Box>
+        <Flex
+          direction="column"
+          css={{
+            p: '$1',
+            gap: '$4',
+          }}
+        >
+          <Text variant="h4" css={{ '@md': { fontSize: '$md', color: '$on_surface_high' } }}>
+            {title}
+          </Text>
+          <Text
+            variant="body1"
+            css={{ fontWeight: '$regular', color: '$on_surface_medium', '@md': { fontSize: '$sm' } }}
+          >
+            {subtitle}
+          </Text>
+        </Flex>
+      </Flex>
+    );
+  },
+);