@100mslive/roomkit-react 0.1.19-alpha.1 → 0.1.19

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.19-alpha.1",
+  "version": "0.1.19",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.28-alpha.1",
-    "@100mslive/hms-virtual-background": "1.11.28-alpha.1",
-    "@100mslive/react-icons": "0.8.28-alpha.1",
-    "@100mslive/react-sdk": "0.8.28-alpha.1",
+    "@100mslive/hls-player": "0.1.28",
+    "@100mslive/hms-virtual-background": "1.11.28",
+    "@100mslive/react-icons": "0.8.28",
+    "@100mslive/react-sdk": "0.8.28",
     "@100mslive/types-prebuilt": "0.12.5",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "5f85c1840b3852eee50dbd94689eac2aa7a1f327"
+  "gitHead": "2616c7f5408ccbe73ba402514ca7b87b310d377c"
 }

package/src/Prebuilt/App.tsx

@@ -51,6 +51,7 @@ export type HMSPrebuiltOptions = {
   userName?: string;
   userId?: string;
   endpoints?: object;
+  effectsSDKKey?: string;
 };
 
 export type HMSPrebuiltProps = {
@@ -215,7 +216,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                       <Init />
                       <DialogContainerProvider dialogContainerSelector={containerSelector}>
                         <Box
-                          id={DEFAULT_PORTAL_CONTAINER.slice(1)} //Skips the #
+                          className={DEFAULT_PORTAL_CONTAINER.slice(1)} // Skips the '.' in the selector
                           css={{
                             bg: '$background_dim',
                             size: '100%',

package/src/Prebuilt/AppStateContext.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { usePreviousDistinct } from 'react-use';
 import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
+import { VBHandler } from './components/VirtualBackground/VBHandler';
 import { useRoomLayout } from './provider/roomLayoutProvider';
 import { useRedirectToLeave } from './components/hooks/useRedirectToLeave';
 import {
@@ -60,6 +61,7 @@ export const useAppStateManager = () => {
     ) {
       const goTo = isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING;
       setActiveState(isLeaveScreenEnabled ? PrebuiltStates.LEAVE : goTo);
+      VBHandler.reset();
       redirectToLeave(1000); // to clear toasts after 1 second
     } else if (!prevRoomState && roomState === HMSRoomState.Disconnected) {
       setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);

package/src/Prebuilt/common/constants.ts

@@ -134,4 +134,4 @@ export enum QUESTION_TYPE {
 
 export const ROLE_CHANGE_DECLINED = 'role_change_declined';
 
-export const DEFAULT_PORTAL_CONTAINER = '#prebuilt-container';
+export const DEFAULT_PORTAL_CONTAINER = '.prebuilt-container';

package/src/Prebuilt/components/Chat/Chat.tsx

@@ -70,10 +70,10 @@ const NewMessageIndicator = ({
   }
   // @ts-ignore
   const outerElement = listRef.current._outerRef;
-  // @ts-ignore
-  if (outerElement.scrollHeight === listRef.current.state.scrollOffset + outerElement.offsetHeight) {
+  if (outerElement.clientHeight + outerElement.scrollTop + outerElement.offsetTop >= outerElement.scrollHeight) {
     return null;
   }
+
   return (
     <Flex
       justify="center"

package/src/Prebuilt/components/Chat/ChatActions.tsx

@@ -104,8 +104,8 @@ export const ChatActions = ({
     }
   > = {
     reply: {
-      text: message.recipientRoles?.length ? 'Reply to Group' : 'Reply Privately',
-      tooltipText: message.recipientRoles?.length ? 'Reply to Group' : 'Reply Privately',
+      text: message.recipientRoles?.length ? 'Reply to group' : 'Reply privately',
+      tooltipText: message.recipientRoles?.length ? 'Reply to group' : 'Reply privately',
       icon: <ReplyIcon style={iconStyle} />,
       onClick: onReply,
       show: showReply,
@@ -145,7 +145,7 @@ export const ChatActions = ({
       show: !!can_block_user && !sentByLocalPeer && !isSenderBlocked,
     },
     remove: {
-      text: 'Remove Partipant',
+      text: 'Remove participant',
       icon: <PeopleRemoveIcon style={iconStyle} />,
       color: '$alert_error_default',
       show: !!canRemoveOthers && !sentByLocalPeer,

package/src/Prebuilt/components/Chat/ChatBody.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeList } from 'react-window';
@@ -7,11 +7,11 @@ import {
   HMSPeerID,
   HMSRoleName,
   selectHMSMessages,
-  selectHMSMessagesCount,
   selectLocalPeerID,
   selectLocalPeerRoleName,
   selectPeerNameByID,
   selectSessionStore,
+  selectUnreadHMSMessagesCount,
   useHMSActions,
   useHMSStore,
   useHMSVanillaStore,
@@ -20,9 +20,8 @@ import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
 import { config as cssConfig, styled } from '../../../Theme';
 import { Tooltip } from '../../../Tooltip';
-// @ts-ignore
-import emptyChat from '../../images/empty-chat.svg';
 import { ChatActions } from './ChatActions';
+import { EmptyChat } from './EmptyChat';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
@@ -38,15 +37,19 @@ const formatTime = (date: Date) => {
   return `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes} ${suffix}`;
 };
 
-const rowHeights: Record<number, number> = {};
+const rowHeights: Record<number, { size: number; id: string }> = {};
+let listInstance: VariableSizeList | null = null; //eslint-disable-line
 function getRowHeight(index: number) {
   // 72 will be default row height for any message length
-  // 16 will add margin value as clientHeight don't include margin
-  return rowHeights[index] + 16 || 72;
+  return rowHeights[index]?.size || 72;
 }
 
-const setRowHeight = (index: number, size: number) => {
-  Object.assign(rowHeights, { [index]: size });
+const setRowHeight = (index: number, id: string, size: number) => {
+  if (rowHeights[index]?.id === id && rowHeights[index]?.size) {
+    return;
+  }
+  listInstance?.resetAfterIndex(Math.max(index - 1, 0));
+  Object.assign(rowHeights, { [index]: { size, id } });
 };
 
 const MessageTypeContainer = ({ left, right }: { left?: string; right?: string }) => {
@@ -181,11 +184,11 @@ const ChatMessage = React.memo(
       showReply = true;
     }
 
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (rowRef.current) {
-        setRowHeight(index, rowRef.current.clientHeight);
+        setRowHeight(index, message.id, rowRef.current.clientHeight);
       }
-    }, [index]);
+    }, [index, message.id]);
 
     return (
       <Box
@@ -356,7 +359,13 @@ const VirtualizedChatMessages = React.forwardRef<
       >
         {({ height, width }: { height: number; width: number }) => (
           <VariableSizeList
-            ref={listRef}
+            ref={node => {
+              if (node) {
+                // @ts-ignore
+                listRef.current = node;
+                listInstance = node;
+              }
+            }}
             itemCount={messages.length}
             itemSize={getRowHeight}
             itemData={messages}
@@ -391,52 +400,25 @@ export const ChatBody = React.forwardRef<VariableSizeList, { scrollToBottom: (co
       return messages?.filter(message => message.type === 'chat' && !blacklistedMessageIDSet.has(message.id)) || [];
     }, [blacklistedMessageIDs, messages]);
 
-    const isMobile = useMedia(cssConfig.media.md);
-    const { elements } = useRoomLayoutConferencingScreen();
     const vanillaStore = useHMSVanillaStore();
 
     useEffect(() => {
       const unsubscribe = vanillaStore.subscribe(() => {
         // @ts-ignore
-        if (!listRef?.current) {
+        if (!listRef.current) {
           return;
         }
         // @ts-ignore
         const outerElement = listRef.current._outerRef;
-        // @ts-ignore
-        if (outerElement.scrollHeight - (listRef.current.state.scrollOffset + outerElement.offsetHeight) <= 10) {
-          scrollToBottom(1);
+        if (outerElement.clientHeight + outerElement.scrollTop + outerElement.offsetTop >= outerElement.scrollHeight) {
+          requestAnimationFrame(() => scrollToBottom(1));
         }
-      }, selectHMSMessagesCount);
+      }, selectUnreadHMSMessagesCount);
       return unsubscribe;
     }, [vanillaStore, listRef, scrollToBottom]);
 
-    if (filteredMessages.length === 0 && !(isMobile && elements?.chat?.is_overlay)) {
-      return (
-        <Flex
-          css={{
-            width: '100%',
-            flex: '1 1 0',
-            textAlign: 'center',
-            px: '$4',
-          }}
-          align="center"
-          justify="center"
-        >
-          <Box>
-            <img src={emptyChat} alt="Empty Chat" height={132} width={185} style={{ margin: '0 auto' }} />
-            <Text variant="h5" css={{ mt: '$8', c: '$on_surface_high' }}>
-              Start a conversation
-            </Text>
-            <Text
-              variant="sm"
-              css={{ mt: '$4', maxWidth: '80%', textAlign: 'center', mx: 'auto', c: '$on_surface_medium' }}
-            >
-              There are no messages here yet. Start a conversation by sending a message.
-            </Text>
-          </Box>
-        </Flex>
-      );
+    if (filteredMessages.length === 0) {
+      return <EmptyChat />;
     }
 
     return <VirtualizedChatMessages messages={filteredMessages} ref={listRef} scrollToBottom={scrollToBottom} />;

package/src/Prebuilt/components/Chat/EmptyChat.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { config as cssConfig } from '../../../Theme';
+// @ts-ignore
+import emptyChat from '../../images/empty-chat.svg';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
+
+export const EmptyChat = () => {
+  const { elements } = useRoomLayoutConferencingScreen();
+  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
+  const isMobile = useMedia(cssConfig.media.md);
+  const canSendMessages =
+    elements.chat &&
+    (elements.chat.public_chat_enabled ||
+      elements.chat.private_chat_enabled ||
+      (elements.chat.roles_whitelist && elements.chat.roles_whitelist.length)) &&
+    !isLocalPeerBlacklisted;
+
+  if (isMobile && elements?.chat?.is_overlay) return <></>;
+
+  return (
+    <Flex
+      css={{
+        width: '100%',
+        flex: '1 1 0',
+        textAlign: 'center',
+        px: '$4',
+      }}
+      align="center"
+      justify="center"
+    >
+      <Box>
+        <img src={emptyChat} alt="Empty Chat" height={132} width={185} style={{ margin: '0 auto' }} />
+        <Text variant="h5" css={{ mt: '$8', c: '$on_surface_high' }}>
+          {canSendMessages ? 'Start a conversation' : 'No messages yet'}
+        </Text>
+        {canSendMessages ? (
+          <Text
+            variant="sm"
+            css={{ mt: '$4', maxWidth: '80%', textAlign: 'center', mx: 'auto', c: '$on_surface_medium' }}
+          >
+            There are no messages here yet. Start a conversation by sending a message.
+          </Text>
+        ) : null}
+      </Box>
+    </Flex>
+  );
+};

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

@@ -69,7 +69,7 @@ const VirtualizedParticipantItem = React.memo(
 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 filteredPeers = peers.filter(p => p.name?.toLowerCase().includes(search?.toLowerCase()));
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const [ref, { width }] = useMeasure<HTMLDivElement>();
   const height = ROW_HEIGHT * (filteredPeers.length + 1);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { QuizActiveIcon, QuizIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../..';
 // @ts-ignore: No implicit Any
@@ -14,6 +14,12 @@ export const PollsToggle = () => {
   const togglePollView = usePollViewToggle();
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
 
+  useEffect(() => {
+    if (unreadPollQuiz && isPollsOpen) {
+      setUnreadPollQuiz(false);
+    }
+  }, [isPollsOpen, unreadPollQuiz, setUnreadPollQuiz]);
+
   return (
     <Tooltip key="polls" title={`${isPollsOpen ? 'Close' : 'Open'} polls and quizzes`}>
       <IconButton

package/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -56,36 +56,7 @@ export function Notifications() {
     });
   }, []);
 
-  /*
-  const leaderboardResultsShared = useCallback(
-    (stringifiedPollDetails: string) => {
-      const pollDetails = JSON.parse(stringifiedPollDetails);
-      if (pollDetails.startedBy !== localPeerID) {
-        const pollStartedBy = pollDetails.initiatorName;
-        ToastManager.addToast({
-          title: `${pollStartedBy} shared leaderboard for the quiz`,
-          action: (
-            <Button
-              onClick={() => togglePollView(pollDetails.id)}
-              variant="standard"
-              css={{
-                backgroundColor: '$surface_bright',
-                fontWeight: '$semiBold',
-                color: '$on_surface_high',
-                p: '$xs $md',
-              }}
-            >
-              View
-            </Button>
-          ),
-        });
-      }
-    },
-    [localPeerID, togglePollView],
-  );  */
-
   useCustomEvent({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
-  // useCustomEvent({ type: 'POLL_LEADERBOARD_SHARED', onEvent: leaderboardResultsShared });
 
   useEffect(() => {
     if (!notification || isNotificationDisabled) {

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { PollsQuizMenu } from './CreatePollQuiz/PollsQuizMenu';
 // @ts-ignore: No implicit Any
 import { CreateQuestions } from './CreateQuestions/CreateQuestions';
-import { Leaderboard } from './Voting/Leaderboard';
+import { LeaderboardSummary } from './Voting/LeaderboardSummary';
 // @ts-ignore: No implicit Any
 import { Voting } from './Voting/Voting';
 // @ts-ignore: No implicit Any
@@ -24,7 +24,7 @@ export const Polls = () => {
   } else if (view === POLL_VIEWS.VOTE) {
     return <Voting toggleVoting={togglePollView} id={pollID} />;
   } else if (view === POLL_VIEWS.RESULTS) {
-    return <Leaderboard pollID={pollID} />;
+    return <LeaderboardSummary pollID={pollID} />;
   } else {
     return null;
   }

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

@@ -44,13 +44,13 @@ export const LeaderboardEntry = ({
             {userName}
           </Text>
 
-          <Text variant="sm" css={{ mt: '$2' }}>
+          <Text variant="sm" css={{ mt: '$1' }}>
             {score} / {maxPossibleScore} points
           </Text>
         </Box>
       </Flex>
       <Flex align="center" css={{ gap: '$4', color: '$on_surface_medium' }}>
-        {position === 1 ? <TrophyFilledIcon height={18} width={18} /> : null}
+        {position === 1 ? <TrophyFilledIcon height={16} width={16} /> : null}
         <CheckCircleIcon height={16} width={16} />
         {questionCount ? (
           <Text variant="xs">

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

@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from 'react';
+import {
+  HMSQuizLeaderboardResponse,
+  HMSQuizLeaderboardSummary,
+  selectPollByID,
+  useHMSActions,
+  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';
+import { LeaderboardEntry } from './LeaderboardEntry';
+import { StatisticBox } from './StatisticBox';
+// @ts-ignore
+import { useSidepaneToggle } from '../../AppData/useSidepane';
+// @ts-ignore
+import { usePollViewState } from '../../AppData/useUISettings';
+// @ts-ignore
+import { StatusIndicator } from '../common/StatusIndicator';
+import { POLL_VIEWS } from '../../../common/constants';
+
+export const LeaderboardSummary = ({ pollID }: { pollID: string }) => {
+  const hmsActions = useHMSActions();
+  const quiz = useHMSStore(selectPollByID(pollID));
+  const [quizLeaderboard, setQuizLeaderboard] = useState<HMSQuizLeaderboardResponse | undefined>();
+  const [viewAllEntries, setViewAllEntries] = useState(false);
+  const summary: HMSQuizLeaderboardSummary = quizLeaderboard?.summary || {
+    totalUsers: 0,
+    votedUsers: 0,
+    avgScore: 0,
+    avgTime: 0,
+    correctAnswers: 0,
+  };
+
+  const { setPollView } = usePollViewState();
+  const toggleSidepane = useSidepaneToggle();
+
+  useEffect(() => {
+    const fetchLeaderboardData = async () => {
+      if (!quizLeaderboard && quiz) {
+        const leaderboardData = await hmsActions.interactivityCenter.fetchLeaderboard(quiz, 0, 50);
+        setQuizLeaderboard(leaderboardData);
+      }
+    };
+    fetchLeaderboardData();
+  }, [quiz, hmsActions.interactivityCenter, quizLeaderboard]);
+
+  if (!quiz || !quizLeaderboard)
+    return (
+      <Flex align="center" justify="center" css={{ size: '100%' }}>
+        <Loading />
+      </Flex>
+    );
+
+  const defaultCalculations = { maxPossibleScore: 0, totalResponses: 0 };
+  const { maxPossibleScore, totalResponses } =
+    quiz.questions?.reduce((accumulator, question) => {
+      accumulator.maxPossibleScore += question.weight || 0;
+      accumulator.totalResponses += question?.responses?.length || 0;
+      return accumulator;
+    }, defaultCalculations) || defaultCalculations;
+
+  const questionCount = quiz.questions?.length || 0;
+
+  return (
+    <Flex direction="column" css={{ size: '100%' }}>
+      <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 isLive={false} />
+        </Flex>
+        <Flex
+          css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
+          onClick={toggleSidepane}
+        >
+          <CrossIcon />
+        </Flex>
+      </Flex>
+
+      {!viewAllEntries ? (
+        <Box css={{ py: '$4' }}>
+          <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
+            Participation Summary
+          </Text>
+
+          <Box css={{ my: '$4' }}>
+            <Flex css={{ w: '100%', gap: '$4' }}>
+              <StatisticBox
+                title="Voted"
+                value={`${summary?.totalUsers ? (100 * summary?.votedUsers) / summary?.totalUsers : 0}%`}
+              />
+              <StatisticBox title="Correct Answers" value={`${summary?.correctAnswers}/${totalResponses}`} />
+            </Flex>
+            <Flex css={{ w: '100%', gap: '$4', mt: '$4' }}>
+              {summary?.avgTime > 0 ? <StatisticBox title="Avg. Time" value={summary?.avgTime} /> : null}
+              <StatisticBox title="Avg. Score" value={summary?.avgScore} />
+            </Flex>
+          </Box>
+        </Box>
+      ) : null}
+
+      <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
+        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}
+              />
+            ))}
+        {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>
+    </Flex>
+  );
+};

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { HMSPoll, selectLocalPeer, useHMSStore } from '@100mslive/react-sdk';
 import { Box } from '../../../../Layout';
 import { Text } from '../../../../Text';
+import { StatisticBox } from './StatisticBox';
 // @ts-ignore
 import { getPeerParticipationSummary } from '../../../common/utils';
 
@@ -22,15 +23,7 @@ export const PeerParticipationSummary = ({ poll }: { poll: HMSPoll }) => {
       <Text css={{ fontWeight: '$semiBold', my: '$8' }}>Participation Summary</Text>
       <Box css={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '$4' }}>
         {boxes.map(box => (
-          <Box key={box.title} css={{ p: '$8', background: '$surface_default', borderRadius: '$1' }}>
-            <Text
-              variant="tiny"
-              css={{ textTransform: 'uppercase', color: '$on_surface_medium', fontWeight: '$semiBold', my: '$4' }}
-            >
-              {box.title}
-            </Text>
-            <Text css={{ fontWeight: '$semiBold' }}>{box.value}</Text>
-          </Box>
+          <StatisticBox key={box.title} title={box.title} value={box.value} />
         ))}
       </Box>
     </Box>

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Box } from '../../../../Layout';
+import { Text } from '../../../../Text';
+
+export const StatisticBox = ({ title, value = 0 }: { title: string; value: string | number }) => (
+  <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/Voting.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import {
   selectLocalPeerID,
   selectPeerNameByID,
-  selectPermissions,
   selectPollByID,
   useHMSActions,
   useHMSStore,
@@ -11,7 +10,6 @@ import {
 import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
 import { Box, Button, Flex, Text } from '../../../../';
 import { Container } from '../../Streaming/Common';
-// import { PollResultSummary } from "./PollResultSummary";
 import { StandardView } from './StandardVoting';
 import { TimedView } from './TimedVoting';
 import { usePollViewState } from '../../AppData/useUISettings';
@@ -24,17 +22,12 @@ export const Voting = ({ id, toggleVoting }) => {
   const pollCreatorName = useHMSStore(selectPeerNameByID(poll?.createdBy));
   const isLocalPeerCreator = useHMSStore(selectLocalPeerID) === poll?.createdBy;
   const { setPollView } = usePollViewState();
-  const permissions = useHMSStore(selectPermissions);
-
-  // const sharedLeaderboards = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SHARED_LEADERBOARDS));
 
   if (!poll) {
     return null;
   }
 
-  // const isLeaderboardShared = (sharedLeaderboards || []).includes(id);
-  const canViewLeaderboard =
-    poll.type === 'quiz' && poll.state === 'stopped' && !poll.anonymous && permissions?.pollWrite;
+  const canViewLeaderboard = poll.type === 'quiz' && poll.state === 'stopped' && !poll.anonymous;
 
   // Sets view - linear or vertical, toggles timer indicator
   const isTimed = (poll.duration || 0) > 0;
@@ -82,15 +75,6 @@ export const Voting = ({ id, toggleVoting }) => {
           </Box>
         </Flex>
 
-        {/* {poll.state === "stopped" && (
-          <PollResultSummary
-            pollResult={poll.result}
-            questions={poll.questions}
-            isQuiz={poll.type === "quiz"}
-            isAdmin={isLocalPeerCreator}
-          />
-        )} */}
-
         {isTimed ? <TimedView poll={poll} /> : <StandardView poll={poll} />}
 
         {poll.state === 'started' && isLocalPeerCreator && (