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

package/src/Prebuilt/components/Polls/CreateQuestions/CreateQuestions.jsx

@@ -11,30 +11,26 @@ import { usePollViewToggle } from '../../AppData/useSidepane';
 import { usePollViewState } from '../../AppData/useUISettings';
 import { POLL_VIEWS } from '../../../common/constants';
 
+const getEditableFormat = questions => {
+  const editableQuestions = questions.map(question => {
+    return { ...question, saved: true, draftID: uuid() };
+  });
+  return editableQuestions;
+};
+
 export function CreateQuestions() {
-  const [questions, setQuestions] = useState([{ draftID: uuid() }]);
   const actions = useHMSActions();
   const { isHLSRunning } = useRecordingStreaming();
   const togglePollView = usePollViewToggle();
   const { pollInView: id, setPollView } = usePollViewState();
   const interaction = useHMSStore(selectPollByID(id));
-
-  const isValidPoll = useMemo(
-    () => questions.length > 0 && questions.every(question => isValidQuestion(question)),
-    [questions],
+  const [questions, setQuestions] = useState(
+    interaction.questions?.length ? getEditableFormat(interaction.questions) : [{ draftID: uuid() }],
   );
 
+  const isValidPoll = useMemo(() => questions.length > 0 && questions.every(isValidQuestion), [questions]);
+
   const launchPoll = async () => {
-    const validQuestions = questions
-      .filter(question => isValidQuestion(question))
-      .map(question => ({
-        text: question.text,
-        type: question.type,
-        options: question.options,
-        skippable: question.skippable,
-        weight: question.weight,
-      }));
-    await actions.interactivityCenter.addQuestionsToPoll(id, validQuestions);
     await actions.interactivityCenter.startPoll(id);
     await sendTimedMetadata(id);
     setPollView(POLL_VIEWS.VOTE);
@@ -75,17 +71,17 @@ export function CreateQuestions() {
               question={question}
               index={index}
               length={questions.length}
-              onSave={questionParams => {
-                setQuestions(questions => [
-                  ...questions.slice(0, index),
-                  questionParams,
-                  ...questions.slice(index + 1),
-                ]);
+              onSave={async questionParams => {
+                const updatedQuestions = [...questions.slice(0, index), questionParams, ...questions.slice(index + 1)];
+                setQuestions(updatedQuestions);
+                const validQuestions = updatedQuestions.filter(question => isValidQuestion(question));
+
+                await actions.interactivityCenter.addQuestionsToPoll(id, validQuestions);
               }}
               isQuiz={isQuiz}
               removeQuestion={questionID =>
                 setQuestions(prev => {
-                  return prev.filter(questionFromSet => questionID !== questionFromSet.draftID);
+                  return prev.filter(questionFromSet => questionID !== questionFromSet?.draftID);
                 })
               }
               convertToDraft={questionID =>
@@ -117,8 +113,8 @@ export function CreateQuestions() {
           </Text>
         </Flex>
         <Flex css={{ w: '100%' }} justify="end">
-          <Button disabled={!isValidPoll} onClick={launchPoll}>
-            Launch {interaction.type}
+          <Button disabled={!isValidPoll} onClick={async () => launchPoll()}>
+            Launch {interaction?.type}
           </Button>
         </Flex>
       </Flex>
@@ -130,13 +126,7 @@ const QuestionCard = ({ question, onSave, index, length, removeQuestion, isQuiz,
   return (
     <Flex direction="column" css={{ p: '$md', bg: '$surface_default', r: '$1', mb: '$sm' }}>
       {question.saved ? (
-        <SavedQuestion
-          question={question}
-          index={index}
-          length={length}
-          convertToDraft={convertToDraft}
-          removeQuestion={removeQuestion}
-        />
+        <SavedQuestion question={question} index={index} length={length} convertToDraft={convertToDraft} />
       ) : (
         <QuestionForm
           question={question}

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

@@ -1,10 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { HMSPollQuestion } from '@100mslive/react-sdk';
-import { CheckCircleIcon, TrashIcon } from '@100mslive/react-icons';
+import { CheckCircleIcon } from '@100mslive/react-icons';
 import { Button, Flex, Text } from '../../../../';
-// @ts-ignore
-import IconButton from '../../../IconButton';
-import { DeleteQuestionModal } from './DeleteQuestionModal';
 import { QUESTION_TYPE_TITLE } from '../../../common/constants';
 
 export const SavedQuestion = ({
@@ -12,15 +9,12 @@ export const SavedQuestion = ({
   index,
   length,
   convertToDraft,
-  removeQuestion,
 }: {
   question: HMSPollQuestion & { draftID: number };
   index: number;
   length: number;
   convertToDraft: (draftID: number) => void;
-  removeQuestion: (draftID: number) => void;
 }) => {
-  const [openDeleteModal, setOpenDeleteModal] = useState(false);
   return (
     <>
       <Text variant="overline" css={{ c: '$on_surface_low', textTransform: 'uppercase' }}>
@@ -48,19 +42,11 @@ export const SavedQuestion = ({
           Not required to answer
         </Text>
       ) : null}
-      <Flex justify="end" css={{ w: '100%', alignItems: 'center', gap: '$4' }}>
-        <IconButton onClick={() => setOpenDeleteModal(true)} css={{ background: 'none' }}>
-          <TrashIcon />
-        </IconButton>
+      <Flex justify="end" css={{ w: '100%', alignItems: 'center' }}>
         <Button variant="standard" css={{ fontWeight: '$semiBold' }} onClick={() => convertToDraft(question.draftID)}>
           Edit
         </Button>
       </Flex>
-      <DeleteQuestionModal
-        removeQuestion={() => removeQuestion(question.draftID)}
-        open={openDeleteModal}
-        setOpen={setOpenDeleteModal}
-      />
     </>
   );
 };

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

@@ -44,7 +44,7 @@ export const LeaderboardSummary = ({ pollID }: { pollID: string }) => {
           <Text variant="lg" css={{ fontWeight: '$semiBold' }}>
             {quiz.title}
           </Text>
-          <StatusIndicator isLive={false} />
+          <StatusIndicator status={quiz.state} />
         </Flex>
         <Flex
           css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}

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

@@ -73,16 +73,7 @@ export const QuestionCard = ({
       },
     ]);
     startTime.current = Date.now();
-  }, [
-    isValidVote,
-    actions.interactivityCenter,
-    pollID,
-    index,
-    singleOptionAnswer,
-    multipleOptionAnswer,
-    totalQuestions,
-    isQuiz,
-  ]);
+  }, [isValidVote, actions.interactivityCenter, pollID, index, singleOptionAnswer, multipleOptionAnswer]);
 
   return (
     <Box

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

@@ -33,8 +33,6 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
 
   const canViewLeaderboard = poll.type === 'quiz' && poll.state === 'stopped' && !poll.anonymous;
 
-  const isLive = poll.state === 'started';
-
   return (
     <Container rounded>
       <Flex
@@ -56,7 +54,7 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
           <ChevronLeftIcon />
         </Flex>
         <Text variant="h6">{poll.title}</Text>
-        <StatusIndicator isLive={isLive} />
+        <StatusIndicator status={poll.state} />
         <Box
           css={{
             marginLeft: 'auto',

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

@@ -1,12 +1,21 @@
 import React from 'react';
+import { HMSPollState } from '@100mslive/react-sdk';
 import { Flex, Text } from '../../../../';
+import { PollStage } from './constants';
 
-export const StatusIndicator = ({ isLive }: { isLive: boolean }) => {
+const statusMap: Record<HMSPollState, PollStage> = {
+  created: PollStage.DRAFT,
+  started: PollStage.LIVE,
+  stopped: PollStage.ENDED,
+};
+
+export const StatusIndicator = ({ status }: { status?: HMSPollState }) => {
+  if (!status) return null;
   return (
     <Flex align="center">
       <Flex
         css={{
-          backgroundColor: isLive ? '$alert_error_default' : '$secondary_default',
+          backgroundColor: statusMap[status] === PollStage.LIVE ? '$alert_error_default' : '$secondary_default',
           p: '$2 $4',
           borderRadius: '$0',
         }}
@@ -18,7 +27,7 @@ export const StatusIndicator = ({ isLive }: { isLive: boolean }) => {
             color: '$on_primary_high',
           }}
         >
-          {isLive ? 'LIVE' : 'ENDED'}
+          {statusMap[status]}
         </Text>
       </Flex>
     </Flex>

package/src/Prebuilt/components/Polls/common/constants.ts

@@ -0,0 +1,5 @@
+export enum PollStage {
+  DRAFT = 'DRAFT',
+  LIVE = 'LIVE',
+  ENDED = 'ENDED',
+}

package/src/Prebuilt/components/Preview/PreviewForm.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useMedia } from 'react-use';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import { useRecordingStreaming } from '@100mslive/react-sdk';
-import { RadioIcon } from '@100mslive/react-icons';
+import { GoLiveIcon } from '@100mslive/react-icons';
 import { Button, config as cssConfig, Flex, Input, styled } from '../../..';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
@@ -72,7 +72,7 @@ const PreviewForm = ({
 
       <Button type="submit" icon disabled={!name || !enableJoin} onClick={onJoin}>
         {/* Conditions to show go live: The first broadcaster joins a streaming kit that is not live */}
-        {showGoLive ? <RadioIcon height={18} width={18} /> : null}
+        {showGoLive ? <GoLiveIcon height={18} width={18} /> : null}
         {showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label}
       </Button>
     </Form>

package/src/Prebuilt/components/PreviousRoleInMetadata.tsx

@@ -10,7 +10,7 @@ export const PreviousRoleInMetadata = () => {
   useEffect(() => {
     let previousRole = vanillaStore.getState(selectLocalPeerRoleName);
     const unsubscribe = vanillaStore.subscribe(currentRole => {
-      if (previousRole !== currentRole) {
+      if (previousRole !== currentRole && currentRole) {
         updateMetaData({ prevRole: previousRole });
         previousRole = currentRole;
       }

package/src/Prebuilt/components/{ScreenshareTile.jsx → ScreenshareTile.tsx}

@@ -10,11 +10,16 @@ import {
 } from '@100mslive/react-sdk';
 import { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';
 import TileMenu from './TileMenu/TileMenu';
+import { Box } from '../../Layout';
 import { VideoTileStats } from '../../Stats';
+import { useTheme } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
+import { LayoutModeSelector } from './LayoutModeSelector';
+// @ts-ignore: No implicit Any
 import { getVideoTileLabel } from './peerTileUtils';
 import { ScreenshareDisplay } from './ScreenshareDisplay';
+// @ts-ignore: No implicit Any
 import { useUISettings } from './AppData/useUISettings';
 import { UI_SETTINGS } from '../common/constants';
 
@@ -27,14 +32,15 @@ const labelStyles = {
   flexShrink: 0,
 };
 
-const Tile = ({ peerId, width = '100%', height = '100%' }) => {
+const Tile = ({ peerId, width = '100%', height = '100%' }: { peerId: string; width?: string; height?: string }) => {
   const isLocal = useHMSStore(selectLocalPeerID) === peerId;
   const track = useHMSStore(selectScreenShareByPeerID(peerId));
+  const { theme } = useTheme();
   const peer = useHMSStore(selectPeerByID(peerId));
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const [isMouseHovered, setIsMouseHovered] = useState(false);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const fullscreenRef = useRef(null);
+  const fullscreenRef = useRef<HTMLDivElement | null>(null);
   // fullscreen is for desired state
   const [fullscreen, setFullscreen] = useState(false);
   // isFullscreen is for true state
@@ -44,7 +50,7 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
   const isFullScreenSupported = screenfull.isEnabled;
   const audioTrack = useHMSStore(selectScreenShareAudioByPeerID(peer?.id));
 
-  if (isLocal && !['browser', 'window', 'application'].includes(track?.displaySurface)) {
+  if (isLocal && track?.displaySurface && !['browser', 'window', 'application'].includes(track.displaySurface)) {
     return <ScreenshareDisplay />;
   }
 
@@ -59,7 +65,15 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
   });
 
   return (
-    <StyledVideoTile.Root css={{ width, height, p: 0, minHeight: 0 }} data-testid="screenshare_tile">
+    <StyledVideoTile.Root
+      css={{
+        width,
+        height,
+        p: 0,
+        minHeight: 0,
+      }}
+      data-testid="screenshare_tile"
+    >
       <StyledVideoTile.Container
         transparentBg
         ref={fullscreenRef}
@@ -73,14 +87,33 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
           <VideoTileStats audioTrackID={audioTrack?.id} videoTrackID={track?.id} peerID={peerId} isLocal={isLocal} />
         ) : null}
         {isFullScreenSupported && isMouseHovered ? (
-          <StyledVideoTile.FullScreenButton onClick={() => setFullscreen(!fullscreen)}>
+          <StyledVideoTile.FullScreenButton
+            css={{ bg: `${theme.colors.background_dim.value}A3` }}
+            onClick={() => setFullscreen(!fullscreen)}
+          >
             {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
           </StyledVideoTile.FullScreenButton>
         ) : null}
+        {isMouseHovered && (
+          <Box
+            css={{
+              position: 'absolute',
+              top: '$2',
+              r: '$1',
+              h: '$14',
+              right: isFullScreenSupported ? '$17' : '$2',
+              zIndex: 5,
+              bg: `${theme.colors.background_dim.value}A3`,
+            }}
+          >
+            <LayoutModeSelector />
+          </Box>
+        )}
+
         {track ? (
           <Video
             screenShare={true}
-            mirror={peer.isLocal && track?.source === 'regular'}
+            mirror={peer.isLocal}
             attach={!isAudioOnly}
             trackId={track.id}
             css={{ minHeight: 0 }}

package/src/Prebuilt/components/SecondaryTiles.tsx

@@ -1,16 +1,45 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
+import { selectAppData, selectSessionStore, selectTrackByID, useHMSStore } from '@100mslive/react-sdk';
 import { LayoutProps } from './VideoLayouts/interface';
 import { ProminenceLayout } from './VideoLayouts/ProminenceLayout';
 import { config as cssConfig } from '../../Theme';
 import { Pagination } from './Pagination';
 import { usePagesWithTiles } from './hooks/useTileLayout';
+import { APP_DATA, SESSION_STORE_KEY } from '../common/constants';
 
-export const SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => {
+export const SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, hasSidebar }: LayoutProps) => {
   const isMobile = useMedia(cssConfig.media.md);
   const maxTileCount = isMobile ? 2 : 4;
-  const pagesWithTiles = usePagesWithTiles({ peers, maxTileCount });
   const [page, setPage] = useState(0);
+  const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));
+  const spotlightPeerId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
+  const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));
+  const pinnedPeer = useHMSStore(selectTrackByID(pinnedTrackId))?.peerId;
+  const pageChangedAfterPinning = useRef(false);
+  const pagesWithTiles = usePagesWithTiles({
+    peers:
+      spotlightPeerId || pinnedPeer
+        ? [...peers].sort((p1, p2) => {
+            if (activeScreensharePeerId === p1.id) {
+              return -1;
+            }
+            if (activeScreensharePeerId === p2.id) {
+              return 1;
+            }
+            const peerIdList = [pinnedPeer, spotlightPeerId];
+            // put active screenshare peer, pinned peer, spotlight peer at first
+            if (peerIdList.includes(p1.id)) {
+              return -1;
+            }
+            if (peerIdList.includes(p2.id)) {
+              return 1;
+            }
+            return 0;
+          })
+        : peers,
+    maxTileCount,
+  });
   const pageSize = pagesWithTiles[0]?.length || 0;
 
   useEffect(() => {
@@ -19,8 +48,17 @@ export const SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge }:
     }
   }, [pageSize, onPageSize]);
 
+  useEffect(() => {
+    if ((pinnedPeer || spotlightPeerId) && page !== 0 && !pageChangedAfterPinning.current) {
+      setPage(0);
+      pageChangedAfterPinning.current = true;
+    } else if (!pinnedPeer && !spotlightPeerId) {
+      pageChangedAfterPinning.current = false;
+    }
+  }, [pinnedPeer, spotlightPeerId, page]);
+
   return (
-    <ProminenceLayout.SecondarySection tiles={pagesWithTiles[page]} edgeToEdge={edgeToEdge}>
+    <ProminenceLayout.SecondarySection tiles={pagesWithTiles[page]} edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>
       {!edgeToEdge && (
         <Pagination
           page={page}

package/src/Prebuilt/components/Settings/DeviceSettings.jsx

@@ -15,7 +15,7 @@ import { config as cssConfig } from '../../../Theme';
 import { DialogDropdownTrigger } from '../../primitives/DropdownTrigger';
 import { useUISettings } from '../AppData/useUISettings';
 import { useDropdownSelection } from '../hooks/useDropdownSelection';
-import { settingOverflow } from './common.js';
+import { settingOverflow } from './common';
 import { UI_SETTINGS } from '../../common/constants';
 
 /**

package/src/Prebuilt/components/Settings/{LayoutSettings.jsx → LayoutSettings.tsx}

@@ -1,18 +1,34 @@
 import React, { useCallback } from 'react';
 import { selectIsLocalScreenShared, selectIsLocalVideoEnabled, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { Box, Flex, Slider, Text } from '../../../';
+import { GalleryIcon, PersonRectangleIcon, SidebarIcon } from '@100mslive/react-icons';
+import { Box, Flex, Slider, Text } from '../../..';
 import SwitchWithLabel from './SwitchWithLabel';
+// @ts-ignore: No implicit Any
 import { useSetUiSettings } from '../AppData/useUISettings';
-import { settingOverflow } from './common.js';
+import { settingOverflow } from './common';
 import { UI_SETTINGS } from '../../common/constants';
 
+export const LayoutMode = {
+  SIDEBAR: 'Sidebar',
+  GALLERY: 'Gallery',
+  SPOTLIGHT: 'Spotlight',
+};
+
+export type LayoutModeKeys = keyof typeof LayoutMode;
+
+export const LayoutModeIconMapping = {
+  [LayoutMode.GALLERY]: <GalleryIcon />,
+  [LayoutMode.SIDEBAR]: <SidebarIcon />,
+  [LayoutMode.SPOTLIGHT]: <PersonRectangleIcon />,
+};
+
 export const LayoutSettings = () => {
   const hmsActions = useHMSActions();
   const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
   const isLocalScreenShared = useHMSStore(selectIsLocalScreenShared);
   const [{ isAudioOnly, maxTileCount, mirrorLocalVideo }, setUISettings] = useSetUiSettings();
   const toggleIsAudioOnly = useCallback(
-    async isAudioOnlyModeOn => {
+    async (isAudioOnlyModeOn?: boolean) => {
       if (isAudioOnlyModeOn) {
         // turn off video and screen share if user switches to audio only mode
         isLocalVideoEnabled && (await hmsActions.setLocalVideoEnabled(false));
@@ -25,17 +41,34 @@ export const LayoutSettings = () => {
 
   return (
     <Box className={settingOverflow()}>
-      <SwitchWithLabel label="Audio Only Mode" id="audioOnlyMode" checked={isAudioOnly} onChange={toggleIsAudioOnly} />
-      <SwitchWithLabel
-        label="Mirror Local Video"
-        id="mirrorMode"
-        checked={mirrorLocalVideo}
-        onChange={value => {
-          setUISettings({
-            [UI_SETTINGS.mirrorLocalVideo]: value,
-          });
-        }}
-      />
+      <Box>
+        {/* <Text variant="md" css={{ fontWeight: '$semiBold' }}>
+          Layout Modes
+        </Text>
+         <RadioGroup.Root
+          css={{ flexDirection: 'column', alignItems: 'start', gap: '$10', my: '$2', py: '$8' }}
+          value={layoutMode}
+          onValueChange={value =>
+            setUISettings({
+              [UI_SETTINGS.layoutMode]: value,
+            })
+          }
+        >
+          {Object.keys(LayoutMode).map(key => {
+            return (
+              <Flex align="center" key={key} css={{ mr: '$8', gap: '$8' }}>
+                <RadioGroup.Item value={LayoutMode[key as LayoutModeKeys]} id={`layoutMode-${key}`} css={{ mr: '$4' }}>
+                  <RadioGroup.Indicator />
+                </RadioGroup.Item>
+                <Label htmlFor={`layoutMode-${key}`} css={{ display: 'flex', gap: '$8', cursor: 'pointer' }}>
+                  {LayoutModeIconMapping[LayoutMode[key as LayoutModeKeys]]}
+                  {LayoutMode[key as LayoutModeKeys]}
+                </Label>
+              </Flex>
+            );
+          })}
+        </RadioGroup.Root> */}
+      </Box>
       <Flex align="center" css={{ w: '100%', my: '$2', py: '$8', '@md': { display: 'none' } }}>
         <Text variant="md" css={{ fontWeight: '$semiBold' }}>
           Tiles In View({maxTileCount})
@@ -53,6 +86,17 @@ export const LayoutSettings = () => {
           />
         </Flex>
       </Flex>
+      <SwitchWithLabel label="Audio Only Mode" id="audioOnlyMode" checked={isAudioOnly} onChange={toggleIsAudioOnly} />
+      <SwitchWithLabel
+        label="Mirror Local Video"
+        id="mirrorMode"
+        checked={mirrorLocalVideo}
+        onChange={value => {
+          setUISettings({
+            [UI_SETTINGS.mirrorLocalVideo]: value,
+          });
+        }}
+      />
     </Box>
   );
 };

package/src/Prebuilt/components/Settings/{NotificationSettings.jsx → NotificationSettings.tsx}

@@ -1,12 +1,23 @@
 import React from 'react';
 import { AlertOctagonIcon, HandIcon, PeopleAddIcon, PeopleRemoveIcon } from '@100mslive/react-icons';
-import { Box } from '../../../';
+import { Box } from '../../..';
 import SwitchWithLabel from './SwitchWithLabel';
+// @ts-ignore: No implicit Any
 import { useSetSubscribedNotifications, useSubscribedNotifications } from '../AppData/useUISettings';
-import { settingOverflow } from './common.js';
+import { settingOverflow } from './common';
 import { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
 
-const NotificationItem = ({ type, label, icon, checked }) => {
+const NotificationItem = ({
+  type,
+  label,
+  icon,
+  checked,
+}: {
+  type: string;
+  label: string;
+  icon: React.ReactNode;
+  checked: boolean;
+}) => {
   const [, setSubscribedNotifications] = useSetSubscribedNotifications(type);
   return (
     <SwitchWithLabel

package/src/Prebuilt/components/Settings/SettingsModal.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
+import { ChevronLeftIcon, CrossIcon, GridFourIcon, NotificationsIcon, SettingsIcon } from '@100mslive/react-icons';
 import { HorizontalDivider } from '../../../Divider';
 import { IconButton } from '../../../IconButton';
 import { Box, Flex } from '../../../Layout';
@@ -9,7 +9,31 @@ import { Sheet } from '../../../Sheet';
 import { Tabs } from '../../../Tabs';
 import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
-import { settingContent, settingsList } from './common.js';
+import DeviceSettings from './DeviceSettings';
+import { LayoutSettings } from './LayoutSettings';
+import { NotificationSettings } from './NotificationSettings';
+import { settingContent } from './common';
+
+const settingsList = [
+  {
+    tabName: 'devices',
+    title: 'Device Settings',
+    icon: SettingsIcon,
+    content: DeviceSettings,
+  },
+  {
+    tabName: 'notifications',
+    title: 'Notifications',
+    icon: NotificationsIcon,
+    content: NotificationSettings,
+  },
+  {
+    tabName: 'layout',
+    title: 'Layout',
+    icon: GridFourIcon,
+    content: LayoutSettings,
+  },
+];
 
 const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) => {
   const mediaQueryLg = cssConfig.media.md;
@@ -53,8 +77,9 @@ const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) =>
       showSetting={showSetting}
       hideSettingByTabName={hideSettingByTabName}
       resetSelection={resetSelection}
-      children={children}
-    />
+    >
+      {children}
+    </MobileSettingModal>
   ) : (
     <DesktopSettingModal
       open={open}
@@ -64,8 +89,9 @@ const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) =>
       showSetting={showSetting}
       hideSettingByTabName={hideSettingByTabName}
       resetSelection={resetSelection}
-      children={children}
-    />
+    >
+      {children}
+    </DesktopSettingModal>
   );
 };
 

package/src/Prebuilt/components/Settings/{SwitchWithLabel.jsx → SwitchWithLabel.tsx}

@@ -3,7 +3,21 @@ import { Label } from '../../../Label';
 import { Flex } from '../../../Layout';
 import { Switch } from '../../../Switch';
 
-const SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) => {
+const SwitchWithLabel = ({
+  label,
+  icon,
+  id,
+  onChange,
+  checked,
+  hide = false,
+}: {
+  label: string;
+  icon?: React.ReactNode;
+  id: string;
+  onChange: (value: boolean) => void;
+  checked: boolean;
+  hide?: boolean;
+}) => {
   return (
     <Flex
       align="center"