@100mslive/roomkit-react 0.2.3 → 0.2.4-alpha.1

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.3",
+  "version": "0.2.4-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,10 +82,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.3",
-    "@100mslive/hms-virtual-background": "1.12.3",
-    "@100mslive/react-icons": "0.9.3",
-    "@100mslive/react-sdk": "0.9.3",
+    "@100mslive/hls-player": "0.2.4-alpha.1",
+    "@100mslive/hms-virtual-background": "1.12.4-alpha.1",
+    "@100mslive/react-icons": "0.9.4-alpha.1",
+    "@100mslive/react-sdk": "0.9.4-alpha.1",
     "@100mslive/types-prebuilt": "0.12.6",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -120,5 +120,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "83684d84e695eaf15f683f361848293c2df337a2"
+  "gitHead": "ae40b4fdc16f86138cb26086f63e4555cc439bba"
 }

package/src/Pagination/StyledPagination.tsx

@@ -14,6 +14,7 @@ const Root = styled('div', {
 
 const Chevron = styled('button', {
   color: '$on_surface_high',
+  border: 'none',
   '&:focus': {
     outline: 'none',
   },

package/src/Popover/index.tsx

@@ -15,7 +15,14 @@ const StyledArrow = styled(Arrow, {
   ...popoverAnimation,
 });
 
-const StyledTrigger = styled(Trigger, {});
+const StyledTrigger = styled(Trigger, {
+  '&:hover': {
+    cursor: 'pointer',
+  },
+  '&:focus-visible': {
+    boxShadow: '0 0 0 3px $colors$primary_default',
+  },
+});
 
 export const Popover = {
   Root,

package/src/Prebuilt/common/constants.ts

@@ -52,6 +52,7 @@ export const UI_SETTINGS = {
   isAudioOnly: 'isAudioOnly',
   maxTileCount: 'maxTileCount',
   uiViewMode: 'uiViewMode',
+  layoutMode: 'layoutMode',
   showStatsOnTiles: 'showStatsOnTiles',
   enableAmbientMusic: 'enableAmbientMusic',
   mirrorLocalVideo: 'mirrorLocalVideo',

package/src/Prebuilt/components/AppData/AppData.tsx

@@ -9,6 +9,7 @@ import {
   useHMSStore,
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
+import { LayoutMode } from '../Settings/LayoutSettings';
 //@ts-ignore
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 // @ts-ignore
@@ -33,6 +34,7 @@ const initialAppData = {
     [UI_SETTINGS.enableAmbientMusic]: false,
     [UI_SETTINGS.uiViewMode]: UI_MODE_GRID,
     [UI_SETTINGS.mirrorLocalVideo]: true,
+    [UI_SETTINGS.layoutMode]: LayoutMode.GALLERY,
   },
   [APP_DATA.subscribedNotifications]: {
     PEER_JOINED: false,

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

@@ -165,7 +165,7 @@ const useSetAppData = ({ key1, key2 }) => {
 
 export const useShowPolls = () => {
   const permissions = useHMSStore(selectPermissions);
-  const polls = useHMSStore(selectPolls)?.filter(poll => poll.state === 'started' || poll.state === 'stopped');
+  const polls = useHMSStore(selectPolls);
 
   const showPolls = useMemo(() => {
     return permissions?.pollWrite || (permissions?.pollRead && polls?.length > 0);

package/src/Prebuilt/components/Connection/ConnectionIndicator.tsx

@@ -33,7 +33,7 @@ export const ConnectionIndicator = ({
 }) => {
   const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;
   const { theme } = useTheme();
-  const defaultColor = theme.colors.surface_brighter;
+  const defaultColor = theme.colors.on_surface_low;
   if (downlinkQuality === -1 || downlinkQuality === undefined) {
     return null;
   }

package/src/Prebuilt/components/Connection/TileConnection.tsx

@@ -1,28 +1,35 @@
 import React from 'react';
-import { PinIcon, SpotlightIcon } from '@100mslive/react-icons';
+import { selectScreenShareByPeerID, selectSessionStore, useHMSStore } from '@100mslive/react-sdk';
+import { PinIcon, ShareScreenIcon, SpotlightIcon } from '@100mslive/react-icons';
 import { Flex, styled, Text, textEllipsis } from '../../..';
 import { ConnectionIndicator } from './ConnectionIndicator';
+import { SESSION_STORE_KEY } from '../../common/constants';
 
 const TileConnection = ({
   name,
   peerId,
   hideLabel,
   width,
-  spotlighted,
   pinned,
 }: {
   name: string;
   peerId: string;
   hideLabel: boolean;
-  width?: number;
-  spotlighted?: boolean;
+  width?: string | number;
   pinned?: boolean;
 }) => {
+  const spotlighted = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
+  const isPeerScreenSharing = !!useHMSStore(selectScreenShareByPeerID(peerId));
   return (
     <Wrapper>
       {!hideLabel ? (
         <>
           <Flex align="center">
+            {isPeerScreenSharing && (
+              <IconWrapper>
+                <ShareScreenIcon width="15" height="15" />
+              </IconWrapper>
+            )}
             {pinned && (
               <IconWrapper>
                 <PinIcon width="15" height="15" />
@@ -37,7 +44,7 @@ const TileConnection = ({
               css={{
                 c: '$on_surface_high',
                 verticalAlign: 'baseline',
-                ...(width ? textEllipsis(width - 60) : {}),
+                ...(width ? textEllipsis((width as number) - 60) : {}),
               }}
               variant="xs"
             >
@@ -51,7 +58,7 @@ const TileConnection = ({
   );
 };
 
-const IconWrapper = styled('div', { c: '$on_surface_high', ml: '$3', mt: '$1' });
+const IconWrapper = styled('div', { c: '$on_surface_high', ml: '$3', mt: '$1', display: 'flex' });
 
 const Wrapper = styled('div', {
   display: 'flex',

package/src/Prebuilt/components/Connection/connectionQualityUtils.js

@@ -30,10 +30,8 @@ export const getColor = (position, connectionScore, defaultColor, theme) => {
   }
   if (connectionScore >= 4) {
     return theme.colors.alert_success;
-  } else if (connectionScore >= 3) {
-    return theme.colors.alert_warning;
   } else if (connectionScore >= 1) {
-    return theme.colors.alert_default;
+    return theme.colors.alert_warning;
   }
   return defaultColor;
 };

package/src/Prebuilt/components/HlsStatsOverlay.jsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { CloseIcon } from '@100mslive/react-icons';
+import { CrossIcon } from '@100mslive/react-icons';
 import { Flex } from '../../Layout';
 import { Text } from '../../Text';
 import IconButton from '../IconButton';
@@ -19,7 +19,7 @@ export function HlsStatsOverlay({ hlsStatsState, onClose }) {
       direction="column"
     >
       <IconButton css={{ position: 'absolute', top: '$2', right: '$2' }} onClick={onClose}>
-        <CloseIcon />
+        <CrossIcon />
       </IconButton>
       <HlsStatsRow label="URL">
         <Flex align="center">

package/src/Prebuilt/components/InsetTile.tsx

@@ -1,7 +1,13 @@
 import React, { useEffect, useRef } from 'react';
 import Draggable from 'react-draggable';
 import { useMedia } from 'react-use';
-import { selectIsAllowedToPublish, selectLocalPeer, selectVideoTrackByID, useHMSStore } from '@100mslive/react-sdk';
+import {
+  selectIsAllowedToPublish,
+  selectLocalPeer,
+  selectPeerByID,
+  selectVideoTrackByID,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 import { ExpandIcon } from '@100mslive/react-icons';
 import { Box, Flex } from '../../Layout';
 import { Text } from '../../Text';
@@ -39,12 +45,13 @@ const insetMaxWidthPx = 240;
 const defaultMobileAspectRatio = 9 / 16;
 const desktopAspectRatio = 1 / defaultMobileAspectRatio;
 
-export const InsetTile = () => {
+export const InsetTile = ({ peerId }: { peerId?: string }) => {
   const isMobile = useMedia(cssConfig.media.md);
   const isLandscape = useMedia(cssConfig.media.ls);
-  const localPeer = useHMSStore(selectLocalPeer);
+  const selector = peerId ? selectPeerByID(peerId) : selectLocalPeer;
+  const peer = useHMSStore(selector);
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const videoTrack = useHMSStore(selectVideoTrackByID(localPeer?.videoTrack));
+  const videoTrack = useHMSStore(selectVideoTrackByID(peer?.videoTrack));
   const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
   const videoTileProps = useVideoTileContext();
   let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
@@ -108,8 +115,8 @@ export const InsetTile = () => {
           <MinimisedTile setMinimised={setMinimised} />
         ) : (
           <VideoTile
-            peerId={localPeer?.id}
-            trackid={localPeer?.videoTrack}
+            peerId={peer?.id}
+            trackId={peer?.videoTrack}
             rootCSS={{
               size: '100%',
               padding: 0,

package/src/Prebuilt/components/LayoutModeSelector.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';
+import { LayoutMode, LayoutModeIconMapping, LayoutModeKeys } from './Settings/LayoutSettings';
+import { Flex } from '../../Layout';
+import { Popover } from '../../Popover';
+import { Text } from '../../Text';
+// @ts-ignore: No implicit Any
+import { useSetUiSettings } from '../components/AppData/useUISettings';
+import { UI_SETTINGS } from '../common/constants';
+
+export const LayoutModeSelector = () => {
+  const [open, setOpen] = useState(false);
+  const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <Flex
+          align="center"
+          css={{
+            gap: '$4',
+            color: open ? '$on_surface_low' : '$on_surface_medium',
+            r: '$1',
+            p: '$2 $4',
+            height: '100%',
+          }}
+        >
+          <Flex
+            align="center"
+            justify="center"
+            css={{
+              color: 'inherit',
+              '& > svg': {
+                w: '$9',
+                h: '$9',
+              },
+            }}
+          >
+            {LayoutModeIconMapping[layoutMode as LayoutModeKeys]}
+          </Flex>
+          <Text variant="caption" css={{ color: 'inherit', lineHeight: '$sm' }}>
+            {layoutMode}
+          </Text>
+          {open ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />}
+        </Flex>
+      </Popover.Trigger>
+      <Popover.Content
+        css={{
+          w: '10.75rem',
+          r: '$1',
+          py: '$4',
+          px: 0,
+          backgroundColor: '$surface_default',
+          overflowY: 'auto',
+          boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
+          fontFamily: '$sans',
+          color: '$on_surface_high',
+        }}
+        side="bottom"
+        sideOffset={8}
+        align="end"
+      >
+        {Object.keys(LayoutMode).map(key => {
+          const value = LayoutMode[key as LayoutModeKeys];
+          return (
+            <Flex
+              key={key}
+              onClick={() => setLayoutMode(value)}
+              align="center"
+              css={{
+                gap: '$4',
+                borderBottom: '1px solid $border_bright',
+                p: '$8',
+                '&:hover': {
+                  cursor: 'pointer',
+                  bg: '$surface_bright',
+                },
+                '&:focus-visible': {
+                  bg: '$surface_bright',
+                },
+              }}
+            >
+              <Flex
+                align="center"
+                justify="center"
+                css={{
+                  color: '$on_surface_medium',
+                  '& > svg': {
+                    w: '$9',
+                    h: '$9',
+                  },
+                }}
+              >
+                {LayoutModeIconMapping[value]}
+              </Flex>
+              <Text variant="caption" css={{ lineHeight: '$sm' }}>
+                {value}
+              </Text>
+              {value === layoutMode ? <CheckIcon width={20} height={20} style={{ marginLeft: 'auto' }} /> : null}
+            </Flex>
+          );
+        })}
+      </Popover.Content>
+    </Popover.Root>
+  );
+};

package/src/Prebuilt/components/MoreSettings/{ChangeNameContent.jsx → ChangeNameContent.tsx}

@@ -13,6 +13,14 @@ export const ChangeNameContent = ({
   isMobile,
   onExit,
   onBackClick,
+}: {
+  changeName: () => Promise<void>;
+  setCurrentName: (name: string) => void;
+  currentName?: string;
+  localPeerName?: string;
+  isMobile: boolean;
+  onExit: () => void;
+  onBackClick: () => void;
 }) => {
   return (
     <form
@@ -56,7 +64,7 @@ export const ChangeNameContent = ({
           required
           data-testid="change_name_field"
           onKeyDown={async e => {
-            if (e.key === 'Enter' && currentName.trim().length > 0 && currentName !== localPeerName) {
+            if (e.key === 'Enter' && currentName && currentName.trim().length > 0 && currentName !== localPeerName) {
               e.preventDefault();
               if (isMobile) {
                 return;
@@ -94,7 +102,7 @@ export const ChangeNameContent = ({
           variant="primary"
           css={{ width: '100%' }}
           type="submit"
-          disabled={!currentName.trim() || currentName.trim() === localPeerName}
+          disabled={!currentName?.trim() || currentName?.trim() === localPeerName}
           data-testid="popup_change_btn"
         >
           Change

package/src/Prebuilt/components/MoreSettings/{ChangeNameModal.jsx → ChangeNameModal.tsx}

@@ -1,13 +1,22 @@
 import React, { useState } from 'react';
 import { useMedia } from 'react-use';
 import { selectLocalPeerName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { config as cssConfig, Dialog } from '../../../';
+import { config as cssConfig, Dialog } from '../../..';
 import { Sheet } from '../../../Sheet';
+// @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
+// @ts-ignore: No implicit Any
 import { ChangeNameContent } from './ChangeNameContent';
+// @ts-ignore: No implicit Any
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 
-export const ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
+export const ChangeNameModal = ({
+  onOpenChange,
+  openParentSheet = undefined,
+}: {
+  onOpenChange: (value: boolean) => void;
+  openParentSheet?: () => void;
+}) => {
   const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
   const hmsActions = useHMSActions();
   const localPeerName = useHMSStore(selectLocalPeerName);
@@ -15,7 +24,7 @@ export const ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
   const isMobile = useMedia(cssConfig.media.md);
 
   const changeName = async () => {
-    const name = currentName.trim();
+    const name = currentName?.trim() || '';
     if (!name || name === localPeerName) {
       return;
     }
@@ -27,7 +36,7 @@ export const ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
       });
     } catch (error) {
       console.error('failed to update name', error);
-      ToastManager.addToast({ title: error.message });
+      ToastManager.addToast({ title: (error as Error).message });
     } finally {
       onOpenChange(false);
     }
@@ -42,7 +51,7 @@ export const ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
     onExit: () => onOpenChange(false),
     onBackClick: () => {
       onOpenChange(false);
-      openParentSheet();
+      openParentSheet?.();
     },
   };
 

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx

@@ -6,7 +6,7 @@ import {
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
 import { selectAppData, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { BrbIcon, CheckIcon, DragHandleIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
+import { BrbIcon, CheckIcon, HamburgerMenuIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../..';
 // @ts-ignore: No implicit any
 import IconButton from '../../../IconButton';
@@ -88,7 +88,7 @@ export const DesktopOptions = ({
         <Tooltip title="More options">
           <Dropdown.Trigger asChild data-testid="more_settings_btn">
             <IconButton>
-              <DragHandleIcon />
+              <HamburgerMenuIcon />
             </IconButton>
           </Dropdown.Trigger>
         </Tooltip>

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -13,8 +13,8 @@ import {
 import {
   BrbIcon,
   CrossIcon,
-  DragHandleIcon,
   EmojiIcon,
+  HamburgerMenuIcon,
   HandIcon,
   HandRaiseSlashedIcon,
   PeopleIcon,
@@ -119,7 +119,7 @@ export const MwebOptions = ({
         <Tooltip title="More options">
           <Sheet.Trigger asChild data-testid="more_settings_btn">
             <IconButton>
-              <DragHandleIcon />
+              <HamburgerMenuIcon />
             </IconButton>
           </Sheet.Trigger>
         </Tooltip>

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

@@ -36,7 +36,6 @@ import { usePollViewToggle } from '../AppData/useSidepane';
 import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppData/useUISettings';
 // @ts-ignore: No implicit Any
 import { getMetadata } from '../../common/utils';
-// @ts-ignore: No implicit Any
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 
 const pollToastKey: Record<string, string> = {};

package/src/Prebuilt/components/Playlist/VideoPlayer.jsx

@@ -78,7 +78,7 @@ export const VideoPlayer = React.memo(({ peerId }) => {
       <VideoPlaylistControls>
         {screenfull.enabled && (
           <IconButton
-            onClick={() => toggle()}
+            onClick={toggle}
             css={{
               color: '$on_primary_high',
               height: 'max-content',

package/src/Prebuilt/components/Polls/CreatePollQuiz/{PollsQuizMenu.jsx → PollsQuizMenu.tsx}

@@ -1,17 +1,21 @@
-// @ts-check
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  HMSPoll,
+  HMSPollState,
   selectLocalPeerRoleName,
   selectPermissions,
-  selectPolls,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { QuestionIcon, StatsIcon } from '@100mslive/react-icons';
-import { Button, Flex, Input, Switch, Text } from '../../../../';
+import { Button, Flex, Input, Switch, Text } from '../../../..';
+// @ts-ignore
 import { Container, ContentHeader, ErrorText } from '../../Streaming/Common';
+// @ts-ignore
 import { usePollViewToggle } from '../../AppData/useSidepane';
+// @ts-ignore
 import { usePollViewState } from '../../AppData/useUISettings';
+// @ts-ignore
 import { isValidTextInput } from '../../../common/utils';
 import { StatusIndicator } from '../common/StatusIndicator';
 import { INTERACTION_TYPE, POLL_STATE, POLL_VIEWS } from '../../../common/constants';
@@ -31,7 +35,17 @@ export const PollsQuizMenu = () => {
   );
 };
 
-function InteractionSelectionCard({ title, icon, active, onClick }) {
+function InteractionSelectionCard({
+  title,
+  icon,
+  active,
+  onClick,
+}: {
+  title: string;
+  icon: React.JSX.Element;
+  active: boolean;
+  onClick: () => void;
+}) {
   const activeBorderStyle = active ? '$space$px solid $primary_default' : '$space$px solid $border_bright';
   return (
     <Flex
@@ -73,7 +87,7 @@ const AddMenu = () => {
   const { setPollState } = usePollViewState();
   const [interactionType, setInteractionType] = useState(INTERACTION_TYPE.POLL);
 
-  const inputRef = useRef(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (inputRef.current) {
@@ -81,7 +95,7 @@ const AddMenu = () => {
     }
   }, [interactionType]);
 
-  const handleCreate = id => {
+  const handleCreate = (id: string) => {
     setPollState({
       [POLL_STATE.pollInView]: id,
       [POLL_STATE.view]: POLL_VIEWS.CREATE_QUESTIONS,
@@ -99,8 +113,6 @@ const AddMenu = () => {
       return false;
     }
   }, [title]);
-  // const [timer, setTimer] = useState(10);
-  // const [showTimerDropDown, setShowTimerDropDown] = useState(false);
 
   return (
     <>
@@ -165,8 +177,8 @@ const AddMenu = () => {
                 title,
                 anonymous: false,
                 rolesThatCanViewResponses: hideVoteCount && localPeerRoleName ? [localPeerRoleName] : undefined,
+                // @ts-ignore
                 type: interactionType.toLowerCase(),
-                // duration: showTimerDropDown ? timer : undefined,
               })
               .then(() => handleCreate(id))
               .catch(err => setError(err.message));
@@ -181,11 +193,26 @@ const AddMenu = () => {
 };
 
 const PrevMenu = () => {
-  // filter polls that have been started or stopped sorted by when they were created and their live state
-  const polls = useHMSStore(selectPolls)
-    ?.filter(poll => poll.state === 'started' || poll.state === 'stopped')
-    .sort((a, b) => (b.createdAt?.getTime() || 0) - (a.createdAt?.getTime() || 0))
-    .sort((a, b) => (b.state === 'started' ? 1 : 0) - (a.state === 'started' ? 1 : 0));
+  const hmsActions = useHMSActions();
+  const [polls, setPolls] = useState<HMSPoll[]>([]);
+
+  useEffect(() => {
+    const listPolls = async () => {
+      const polls = await hmsActions.interactivityCenter.getPolls();
+      const sortedPolls = await polls
+        ?.sort((a, b) => (b.createdAt?.getTime() || 0) - (a.createdAt?.getTime() || 0))
+        ?.sort((a, b) => (b.state === 'started' ? 1 : 0) - (a.state === 'started' ? 1 : 0));
+      return sortedPolls;
+    };
+
+    const updatePolls = async () => {
+      const sortedPolls = await listPolls();
+      setPolls(sortedPolls);
+    };
+
+    updatePolls();
+  }, [hmsActions.interactivityCenter]);
+
   return polls?.length ? (
     <Flex
       css={{
@@ -199,8 +226,8 @@ const PrevMenu = () => {
           Previous Polls and Quizzes
         </Text>
         <Flex direction="column" css={{ gap: '$10', mt: '$8' }}>
-          {polls.map(poll => (
-            <InteractionCard key={poll.id} id={poll.id} title={poll.title} isLive={poll.state === 'started'} />
+          {polls?.map(poll => (
+            <InteractionCard key={poll.id} id={poll.id} title={poll.title} status={poll.state} />
           ))}
         </Flex>
       </Flex>
@@ -208,26 +235,27 @@ const PrevMenu = () => {
   ) : null;
 };
 
-const InteractionCard = ({ id, title, isLive }) => {
+const InteractionCard = ({ id, title, status }: { id: string; title: string; status?: HMSPollState }) => {
   const { setPollState } = usePollViewState();
 
-  const goToVote = id => {
-    setPollState({
-      [POLL_STATE.pollInView]: id,
-      [POLL_STATE.view]: POLL_VIEWS.VOTE,
-    });
-  };
-
   return (
     <Flex direction="column" css={{ backgroundColor: '$surface_bright', borderRadius: '$1', p: '$8' }}>
       <Flex css={{ w: '100%', justifyContent: 'space-between', mb: '$sm' }}>
         <Text variant="sub1" css={{ c: '$on_surface_high', fontWeight: '$semiBold' }}>
           {title}
         </Text>
-        <StatusIndicator isLive={isLive} />
+        <StatusIndicator status={status} />
       </Flex>
       <Flex css={{ w: '100%', gap: '$4' }} justify="end">
-        <Button variant="primary" onClick={() => goToVote(id)}>
+        <Button
+          variant="primary"
+          onClick={() =>
+            setPollState({
+              [POLL_STATE.pollInView]: id,
+              [POLL_STATE.view]: status === 'created' ? POLL_VIEWS.CREATE_QUESTIONS : POLL_VIEWS.VOTE,
+            })
+          }
+        >
           View
         </Button>
       </Flex>