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

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -1,8 +1,10 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import {
   selectAppData,
   selectAppDataByPath,
   selectAudioTrackByPeerID,
+  selectPermissions,
+  selectPolls,
   selectSessionStore,
   selectTrackByID,
   selectVideoTrackByPeerID,
@@ -11,7 +13,7 @@ import {
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
-import { APP_DATA, SESSION_STORE_KEY } from '../../common/constants';
+import { APP_DATA, POLL_STATE, SESSION_STORE_KEY } from '../../common/constants';
 
 /**
  * fields saved related to UI settings in store's app data can be
@@ -69,8 +71,18 @@ export const useUrlToEmbed = () => {
   return useHMSStore(selectAppData(APP_DATA.embedConfig))?.url;
 };
 
-export const usePDFAnnotator = () => {
-  return useHMSStore(selectAppData(APP_DATA.pdfConfig))?.state;
+export const usePDFConfig = () => {
+  return useHMSStore(selectAppData(APP_DATA.pdfConfig));
+};
+
+export const useResetPDFConfig = () => {
+  const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
+  return useCallback(() => setPDFConfig(), [setPDFConfig]);
+};
+
+export const useResetEmbedConfig = () => {
+  const [, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
+  return () => setEmbedConfig();
 };
 export const usePinnedTrack = () => {
   const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));
@@ -86,7 +98,7 @@ export const useSubscribedNotifications = notificationKey => {
 };
 
 export const useIsNotificationDisabled = () => {
-  const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.disableNotificiations));
+  const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.disableNotifications));
   return notificationPreference;
 };
 
@@ -153,3 +165,35 @@ const useSetAppData = ({ key1, key2 }) => {
   );
   return setValue;
 };
+
+export const useShowPolls = () => {
+  const permissions = useHMSStore(selectPermissions);
+  const polls = useHMSStore(selectPolls)?.filter(poll => poll.state === 'started' || poll.state === 'stopped');
+
+  const showPolls = useMemo(() => {
+    return permissions?.pollWrite || (permissions?.pollRead && polls?.length > 0);
+  }, [permissions?.pollRead, permissions?.pollWrite, polls?.length]);
+
+  return { showPolls };
+};
+
+export const usePollViewState = () => {
+  const [pollState, setPollState] = useSetAppDataByKey(APP_DATA.pollState);
+
+  const setPollView = useCallback(
+    view => {
+      setPollState({
+        [POLL_STATE.pollInView]: pollState?.pollInView,
+        [POLL_STATE.view]: view,
+      });
+    },
+    [pollState?.pollInView, setPollState],
+  );
+
+  return {
+    setPollState,
+    setPollView,
+    pollInView: pollState?.pollInView,
+    view: pollState?.view,
+  };
+};

package/src/Prebuilt/components/Chip.tsx

@@ -24,9 +24,13 @@ const Chip = ({
     return null;
   }
   return (
-    <Flex align="center" css={{ backgroundColor, p: '$4 $6', borderRadius: '$4', ...css }} onClick={() => onClick?.()}>
+    <Flex
+      align="center"
+      css={{ backgroundColor, p: '$4 $6', gap: '$2', borderRadius: '$4', ...css }}
+      onClick={() => onClick?.()}
+    >
       {icon}
-      <Text variant="sm" css={{ fontWeight: '$semiBold', color: textColor, ml: '$2' }}>
+      <Text variant="sm" css={{ fontWeight: '$semiBold', color: textColor }}>
         {content}
       </Text>
     </Flex>

package/src/Prebuilt/components/{conference.jsx → ConferenceScreen.tsx}

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { usePrevious } from 'react-use';
+import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
 import {
   HMSRoomState,
   selectAppData,
@@ -11,38 +10,40 @@ import {
 } from '@100mslive/react-sdk';
 import { Footer } from './Footer/Footer';
 import { HLSFailureModal } from './Notifications/HLSFailureModal';
+// @ts-ignore: No implicit Any
 import { ActivatedPIP } from './PIP/PIPComponent';
+// @ts-ignore: No implicit Any
 import { PictureInPicture } from './PIP/PIPManager';
 import { RoleChangeRequestModal } from './RoleChangeRequest/RoleChangeRequestModal';
 import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
+// @ts-ignore: No implicit Any
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
 } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
 import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
+// @ts-ignore: No implicit Any
 import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
 
-const Conference = () => {
-  const navigate = useNavigate();
-  const { roomId, role } = useParams();
-  const { userName, endpoints } = useHMSPrebuiltContext();
+export const ConferenceScreen = () => {
+  const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore(selectRoomState);
-  const prevState = usePrevious(roomState);
   const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
   const hmsActions = useHMSActions();
   const [hideControls, setHideControls] = useState(false);
   const dropdownList = useHMSStore(selectAppData(APP_DATA.dropdownList));
   const authTokenInAppData = useAuthToken();
-  const headerRef = useRef();
-  const footerRef = useRef();
+  const headerRef = useRef<HTMLDivElement | null>(null);
+  const footerRef = useRef<HTMLDivElement | null>(null);
   const isMobileDevice = isAndroid || isIOS || isIPadOS;
-  const dropdownListRef = useRef();
+  const dropdownListRef = useRef<string[]>();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const toggleControls = () => {
     if (dropdownListRef.current?.length === 0 && isMobileDevice) {
@@ -52,12 +53,12 @@ const Conference = () => {
   const autoRoomJoined = useRef(isPreviewScreenEnabled);
 
   useEffect(() => {
-    let timeout = null;
+    let timeout: undefined | ReturnType<typeof setTimeout>;
     dropdownListRef.current = dropdownList || [];
-    if (dropdownListRef.current.length === 0) {
+    if (dropdownListRef.current && dropdownListRef.current.length === 0) {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
-        if (dropdownListRef.current.length === 0) {
+        if (dropdownListRef.current && dropdownListRef.current.length === 0) {
           setHideControls(isMobileDevice);
         }
       }, 5000);
@@ -67,23 +68,6 @@ const Conference = () => {
     };
   }, [dropdownList, hideControls, isMobileDevice]);
 
-  useEffect(() => {
-    if (!roomId) {
-      navigate(`/`);
-      return;
-    }
-    if (!isPreviewScreenEnabled) {
-      return;
-    }
-    if (
-      !prevState &&
-      !(roomState === HMSRoomState.Connecting || roomState === HMSRoomState.Reconnecting || isConnectedToRoom)
-    ) {
-      if (role) navigate(`/preview/${roomId || ''}/${role}`);
-      else navigate(`/preview/${roomId || ''}`);
-    }
-  }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
-
   useEffect(() => {
     if (
       authTokenInAppData &&
@@ -94,10 +78,10 @@ const Conference = () => {
     ) {
       hmsActions
         .join({
-          userName,
+          userName: userName || '',
           authToken: authTokenInAppData,
           initEndpoint: endpoints?.init,
-          initialSettings: {
+          settings: {
             isAudioMuted: !isPreviewScreenEnabled,
             isVideoMuted: !isPreviewScreenEnabled,
             speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],
@@ -109,13 +93,14 @@ const Conference = () => {
   }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
 
   useEffect(() => {
+    onJoinFunc?.();
     return () => {
-      PictureInPicture.stop().catch(error => console.error('stopping pip', error));
+      PictureInPicture.stop().catch((error: unknown) => console.error('stopping pip', (error as Error).message));
     };
-  }, []);
+  }, [onJoinFunc]);
 
-  if (!isConnectedToRoom) {
-    return <FullPageProgress text="Joining..." />;
+  if (!isConnectedToRoom && ![HMSRoomState.Reconnecting, HMSRoomState.Disconnected].includes(roomState)) {
+    return <FullPageProgress text={roomState === HMSRoomState.Connecting ? 'Joining...' : ''} />;
   }
 
   return (
@@ -139,7 +124,7 @@ const Conference = () => {
             }}
             data-testid="header"
           >
-            <Header elements={screenProps.elements} screenType={screenProps.screenType} />
+            <Header />
           </Box>
         )}
         <Box
@@ -147,7 +132,10 @@ const Conference = () => {
             w: '100%',
             flex: '1 1 0',
             minHeight: 0,
-            px: screenProps?.elements?.video_tile_layout?.grid?.edge_to_edge ? 0 : '$10', // TODO: padding to be controlled by section/element
+            // @ts-ignore
+            px: (screenProps?.elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid?.edge_to_edge
+              ? 0
+              : '$10', // TODO: padding to be controlled by section/element
             paddingBottom: 'env(safe-area-inset-bottom)',
             '@lg': {
               px: 0,
@@ -157,13 +145,15 @@ const Conference = () => {
           data-testid="conferencing"
           onClick={toggleControls}
         >
-          <VideoStreamingSection
-            screenType={screenProps.screenType}
-            elements={screenProps.elements}
-            hideControls={hideControls}
-          />
+          {screenProps.elements ? (
+            <VideoStreamingSection
+              screenType={screenProps.screenType}
+              elements={screenProps.elements}
+              hideControls={hideControls}
+            />
+          ) : null}
         </Box>
-        {!screenProps.hideSections.includes('footer') && (
+        {!screenProps.hideSections.includes('footer') && screenProps.elements && (
           <Box
             ref={footerRef}
             css={{
@@ -189,5 +179,3 @@ const Conference = () => {
     </>
   );
 };
-
-export default Conference;

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -24,9 +24,12 @@ import { ScreenshareToggle } from '../ScreenShareToggle';
 import { ChatToggle } from './ChatToggle';
 // @ts-ignore: No implicit Any
 import { ParticipantCount } from './ParticipantList';
+import { PollsToggle } from './PollsToggle';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 // @ts-ignore: No implicit Any
+import { useShowPolls } from '../AppData/useUISettings';
+// @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 // @ts-ignore: No implicit Any
 const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
@@ -46,6 +49,7 @@ export const Footer = ({
   const noAVPermissions = !(toggleAudio || toggleVideo);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const { showPolls } = useShowPolls();
 
   useEffect(() => {
     if (!isChatOpen && openByDefault) {
@@ -108,6 +112,7 @@ export const Footer = ({
         )}
       </AppFooter.Center>
       <AppFooter.Right>
+        {showPolls && <PollsToggle />}
         {!isMobile && elements?.chat && <ChatToggle />}
         {elements?.participant_list && <ParticipantCount />}
         <MoreSettings elements={elements} screenType={screenType} />

package/src/Prebuilt/components/Footer/PaginatedParticipants.tsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { useMeasure } from 'react-use';
+import { VariableSizeList } from 'react-window';
+import { selectIsConnectedToRoom, useHMSStore, usePaginatedParticipants } from '@100mslive/react-sdk';
+import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
+import { IconButton } from '../../../IconButton';
+import { Box, Flex } from '../../../Layout';
+import { Loading } from '../../../Loading';
+import { Text } from '../../../Text';
+// @ts-ignore: No implicit Any
+import { Participant, ParticipantSearch } from './ParticipantList';
+import { ItemData, itemKey, ROW_HEIGHT } from './RoleAccordion';
+// @ts-ignore: No implicit Any
+import { useSidepaneReset } from '../AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { getFormattedCount } from '../../common/utils';
+
+const LoadMoreParticipants = ({
+  hasNext,
+  loadMore,
+  style,
+}: {
+  hasNext: boolean;
+  loadMore: () => Promise<void>;
+  style: React.CSSProperties;
+}) => {
+  const { ref, inView } = useInView();
+  const [inProgress, setInProgress] = useState(false);
+
+  useEffect(() => {
+    if (hasNext && inView && !inProgress) {
+      setInProgress(true);
+      loadMore()
+        .catch(console.error)
+        .finally(() => setInProgress(false));
+    }
+  }, [hasNext, loadMore, inView, inProgress]);
+  return (
+    <Flex ref={ref} style={style} align="center" justify="center">
+      {inProgress ? <Loading size={16} /> : null}
+    </Flex>
+  );
+};
+
+const VirtualizedParticipantItem = React.memo(
+  ({
+    index,
+    data,
+    style,
+  }: {
+    index: number;
+    data: ItemData & { hasNext: boolean; loadMorePeers: () => Promise<void> };
+    style: React.CSSProperties;
+  }) => {
+    if (!data.peerList[index]) {
+      return <LoadMoreParticipants hasNext={data.hasNext} loadMore={data.loadMorePeers} style={style} />;
+    }
+    return (
+      <Participant
+        key={data.peerList[index].id}
+        peer={data.peerList[index]}
+        isConnected={data.isConnected}
+        style={style}
+      />
+    );
+  },
+);
+
+export const PaginatedParticipants = ({ roleName, onBack }: { roleName: string; onBack: () => void }) => {
+  const { peers, total, hasNext, loadPeers, loadMorePeers } = usePaginatedParticipants({ role: roleName, limit: 20 });
+  const [search, setSearch] = useState<string>('');
+  const filteredPeers = peers.filter(p => p.name?.toLowerCase().includes(search));
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const [ref, { width }] = useMeasure<HTMLDivElement>();
+  const height = ROW_HEIGHT * (filteredPeers.length + 1);
+  const resetSidePane = useSidepaneReset();
+
+  useEffect(() => {
+    loadPeers();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Flex ref={ref} direction="column" css={{ size: '100%', gap: '$4' }}>
+      <Flex align="center">
+        <Flex align="center" css={{ flex: '1 1 0', cursor: 'pointer' }} onClick={onBack}>
+          <ChevronLeftIcon />
+          <Text variant="lg" css={{ flex: '1 1 0' }}>
+            Participants
+          </Text>
+        </Flex>
+        <IconButton
+          onClick={e => {
+            e.stopPropagation();
+            resetSidePane();
+          }}
+          data-testid="close_sidepane"
+        >
+          <CrossIcon />
+        </IconButton>
+      </Flex>
+      <ParticipantSearch onSearch={(search: string) => setSearch(search)} placeholder={`Search for ${roleName}`} />
+      <Flex direction="column" css={{ border: '1px solid $border_default', borderRadius: '$1', flex: '1 1 0' }}>
+        <Flex align="center" css={{ height: ROW_HEIGHT, borderBottom: '1px solid $border_default', px: '$8' }}>
+          <Text css={{ fontSize: '$space$7' }}>
+            {roleName}({getFormattedCount(peers.length)}/{getFormattedCount(total)})
+          </Text>
+        </Flex>
+        <Box css={{ flex: '1 1 0', overflowY: 'auto', overflowX: 'hidden', mr: '-$10' }}>
+          <VariableSizeList
+            itemSize={index => (index === filteredPeers.length + 1 ? 16 : ROW_HEIGHT)}
+            itemData={{ peerList: filteredPeers, hasNext: hasNext(), loadMorePeers, isConnected: isConnected === true }}
+            itemKey={itemKey}
+            itemCount={filteredPeers.length + 1}
+            width={width}
+            height={height}
+          >
+            {VirtualizedParticipantItem}
+          </VariableSizeList>
+        </Box>
+      </Flex>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Footer/ParticipantList.jsx

@@ -3,6 +3,7 @@ import { useDebounce, useMedia } from 'react-use';
 import {
   selectHandRaisedPeers,
   selectHasPeerHandRaised,
+  selectIsLargeRoom,
   selectIsPeerAudioEnabled,
   selectLocalPeerID,
   selectPeerCount,
@@ -20,7 +21,7 @@ import {
   SearchIcon,
   VerticalMenuIcon,
 } from '@100mslive/react-icons';
-import { Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
+import { Accordion, Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
 import IconButton from '../../IconButton';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
 import { ToastManager } from '../Toast/ToastManager';
@@ -31,9 +32,10 @@ import { useParticipants } from '../../common/hooks';
 import { getFormattedCount } from '../../common/utils';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ParticipantList = () => {
+export const ParticipantList = ({ offStageRoles = [], onActive }) => {
   const [filter, setFilter] = useState();
   const { participants, isConnected, peerCount } = useParticipants(filter);
+  const isLargeRoom = useHMSStore(selectIsLargeRoom);
   const peersOrderedByRoles = {};
 
   const handRaisedPeers = useHMSStore(selectHandRaisedPeers);
@@ -45,6 +47,15 @@ export const ParticipantList = () => {
     peersOrderedByRoles[participant.roleName].push(participant);
   });
 
+  // prefill off_stage roles of large rooms to load more peers
+  if (isLargeRoom) {
+    offStageRoles.forEach(role => {
+      if (!peersOrderedByRoles[role]) {
+        peersOrderedByRoles[role] = [];
+      }
+    });
+  }
+
   const onSearch = useCallback(value => {
     setFilter(filterValue => {
       if (!filterValue) {
@@ -72,6 +83,9 @@ export const ParticipantList = () => {
           handRaisedList={handRaisedPeers}
           isConnected={isConnected}
           filter={filter}
+          offStageRoles={offStageRoles}
+          isLargeRoom={isLargeRoom}
+          onActive={onActive}
         />
       </Flex>
     </Fragment>
@@ -114,7 +128,15 @@ export const ParticipantCount = () => {
   );
 };
 
-const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter, handRaisedList = [] }) => {
+const VirtualizedParticipants = ({
+  peersOrderedByRoles = {},
+  isConnected,
+  filter,
+  handRaisedList = [],
+  offStageRoles,
+  isLargeRoom,
+  onActive,
+}) => {
   return (
     <Flex
       direction="column"
@@ -127,29 +149,34 @@ const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter
         flex: '1 1 0',
       }}
     >
-      {handRaisedList.length > 0 ? (
-        <RoleAccordion
-          peerList={handRaisedList}
-          roleName="Hand Raised"
-          filter={filter}
-          isConnected={isConnected}
-          isHandRaisedAccordion
-        />
-      ) : null}
-      {Object.keys(peersOrderedByRoles).map(role => (
-        <RoleAccordion
-          key={role}
-          peerList={peersOrderedByRoles[role]}
-          roleName={role}
-          isConnected={isConnected}
-          filter={filter}
-        />
-      ))}
+      <Accordion.Root type={isLargeRoom ? 'single' : 'multiple'} collapsible>
+        {handRaisedList.length > 0 ? (
+          <RoleAccordion
+            peerList={handRaisedList}
+            roleName="Hand Raised"
+            filter={filter}
+            isConnected={isConnected}
+            isHandRaisedAccordion
+            offStageRoles={offStageRoles}
+          />
+        ) : null}
+        {Object.keys(peersOrderedByRoles).map(role => (
+          <RoleAccordion
+            key={role}
+            peerList={peersOrderedByRoles[role]}
+            roleName={role}
+            isConnected={isConnected}
+            filter={filter}
+            offStageRoles={offStageRoles}
+            onActive={onActive}
+          />
+        ))}
+      </Accordion.Root>
     </Flex>
   );
 };
 
-export const Participant = ({ peer, isConnected }) => {
+export const Participant = ({ peer, isConnected, style }) => {
   const localPeerId = useHMSStore(selectLocalPeerID);
   return (
     <Flex
@@ -164,8 +191,12 @@ export const Participant = ({ peer, isConnected }) => {
       align="center"
       justify="between"
       data-testid={'participant_' + peer.name}
+      style={style}
     >
-      <Text variant="sm" css={{ ...textEllipsis(150), fontWeight: '$semiBold', color: '$on_surface_high' }}>
+      <Text
+        variant="sm"
+        css={{ ...textEllipsis('100%'), flex: '1 1 0', mr: '$8', fontWeight: '$semiBold', color: '$on_surface_high' }}
+      >
         {peer.name} {localPeerId === peer.id ? '(You)' : ''}
       </Text>
       {isConnected ? (
@@ -338,7 +369,7 @@ export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false })
       <Input
         type="text"
         placeholder={placeholder || 'Search for participants'}
-        css={{ w: '100%', p: '$6', pl: '$16', mr: '$4', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
+        css={{ w: '100%', p: '$6', pl: '$14', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
         value={value}
         onKeyDown={event => {
           event.stopPropagation();

package/src/Prebuilt/components/Footer/PollsToggle.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { QuizIcon } from '@100mslive/react-icons';
+import { Tooltip } from '../../..';
+// @ts-ignore: No implicit Any
+import IconButton from '../../IconButton';
+// @ts-ignore: No implicit Any
+import { useIsSidepaneTypeOpen, usePollViewToggle } from '../AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
+
+export const PollsToggle = () => {
+  const isPollsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.POLLS);
+  const togglePollView = usePollViewToggle();
+
+  return (
+    <Tooltip key="polls" title={`${isPollsOpen ? 'Close' : 'Open'} polls and quizzes`}>
+      <IconButton onClick={togglePollView} active={!isPollsOpen} data-testid="polls_btn">
+        <QuizIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};