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

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

@@ -0,0 +1,47 @@
+// @ts-check
+import React from 'react';
+import { Flex, Text } from '../../../../';
+
+export const StatusIndicator = ({ isLive, shouldShowTimer }) => {
+  return (
+    <Flex align="center">
+      <Flex
+        css={{
+          backgroundColor: isLive ? '$alert_error_default' : '$secondary_default',
+          p: '$2 $4',
+          borderRadius: shouldShowTimer ? '$0 0 0 $0' : '$0',
+        }}
+      >
+        <Text
+          variant="caption"
+          css={{
+            fontWeight: '$semiBold',
+            color: '$on_surface_high',
+          }}
+        >
+          {isLive ? 'LIVE' : 'ENDED'}
+        </Text>
+      </Flex>
+
+      {shouldShowTimer ? (
+        <Flex
+          css={{
+            borderRadius: '0 $0 $0 0',
+            p: '$2 $4',
+            backgroundColor: '$background_default',
+          }}
+        >
+          <Text
+            variant="caption"
+            css={{
+              fontWeight: '$semiBold',
+              color: '$on_surface_high',
+            }}
+          >
+            0:32
+          </Text>
+        </Flex>
+      ) : null}
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Polls/common/VoteCount.jsx

@@ -0,0 +1,28 @@
+// @ts-check
+import React from 'react';
+import { Flex, Text } from '../../../../';
+
+export const VoteCount = ({ isQuiz, voteCount, isCorrectAnswer }) => {
+  return (
+    <Flex css={{ alignItems: 'center' }}>
+      {isQuiz && (
+        <Text
+          variant="xs"
+          css={{
+            p: '$2',
+            mr: '$2',
+            color: isCorrectAnswer ? '$alert_success' : '$alert_error_default',
+            borderRadius: '$1',
+            border: `1px solid ${isCorrectAnswer ? '$alert_success' : '$alert_error_default'}`,
+          }}
+        >
+          {isCorrectAnswer ? 'Correct' : 'Incorrect'}
+        </Text>
+      )}
+      <Text variant="sm" css={{ color: '$on_surface_medium' }}>
+        {voteCount}&nbsp;
+        {voteCount === 1 ? 'vote' : 'votes'}
+      </Text>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Polls/common/VoteProgress.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Progress } from '../../../../';
+
+export const VoteProgress = ({ option, totalResponses }) => {
+  const showProgress = typeof option.voteCount === 'number' && typeof totalResponses === 'number' && totalResponses > 0;
+  const progressValue = (100 * option.voteCount) / totalResponses;
+
+  return showProgress ? (
+    <Progress.Root value={progressValue}>
+      <Progress.Content
+        style={{
+          transform: `translateX(-${100 - progressValue}%)`,
+        }}
+      />
+    </Progress.Root>
+  ) : null;
+};

package/src/Prebuilt/components/Polls/common/VoterList.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Avatar, Flex, Text } from '../../../../';
+
+export const VoterList = ({ voters }) => {
+  return voters.map((voter, index) => (
+    <Flex align="center" key={`${voter}-${index}`} css={{ gap: '$4', py: '$2' }}>
+      <Avatar
+        name={voter}
+        css={{
+          position: 'relative',
+          transform: 'unset',
+          fontSize: '$tiny',
+          size: '$9',
+          p: '$4',
+        }}
+      />
+      <Text variant="xs" css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>
+        {voter}
+      </Text>
+    </Flex>
+  ));
+};

package/src/Prebuilt/components/Polls/common/Votes.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Avatar, Box, Flex, Text, Tooltip } from '../../../../';
+import { VoterList } from './VoterList';
+
+// Shows number of votes, avatars of voters and list of voters on hover
+export const Votes = ({ voters }) => {
+  const hiddenVotersCount = voters.length > 2 ? voters.length - 2 : 0;
+
+  return (
+    <Flex align="center" css={{ gap: '$4' }}>
+      <Text variant="sm" css={{ color: '$on_surface_medium' }}>
+        {voters.length}&nbsp;
+        {voters.length && voters.length !== 1 ? 'votes' : 'votes'}
+      </Text>
+      <Tooltip
+        side="bottom"
+        align="start"
+        disabled={hiddenVotersCount === 0}
+        boxCss={{
+          backgroundColor: '$surface_brighter',
+          borderRadius: '$1',
+          p: '$4 $6',
+          top: '$2',
+          zIndex: '20',
+          minWidth: '$44',
+        }}
+        title={<VoterList voters={voters} />}
+      >
+        <Flex align="center">
+          {voters.length
+            ? voters.slice(0, 2).map((voter, index) => (
+                <Avatar
+                  name={voter}
+                  css={{
+                    position: 'relative',
+                    transform: 'unset',
+                    left: `${index * -1}px`,
+                    fontSize: '$tiny',
+                    size: '$9',
+                    p: '$4',
+                    zIndex: '5',
+                  }}
+                />
+              ))
+            : null}
+          {hiddenVotersCount ? (
+            <Box
+              css={{
+                backgroundColor: '$secondary_default',
+                borderRadius: '$round',
+                position: 'relative',
+                left: '-$2',
+                p: '$2 $3',
+              }}
+            >
+              <Text
+                variant="caption"
+                css={{
+                  fontWeight: '$semiBold',
+                  color: '$on_surface_high',
+                  fontSize: '$tiny',
+                }}
+              >
+                +{hiddenVotersCount}
+              </Text>
+            </Box>
+          ) : null}
+        </Flex>
+      </Tooltip>
+    </Flex>
+  );
+};

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

@@ -27,10 +27,11 @@ const PreviewForm = ({
     e.preventDefault();
   };
   const isMobile = useMedia(cssConfig.media.md);
-  const { isHLSRunning } = useRecordingStreaming();
+  const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = layout?.screens?.preview?.default?.elements || {};
-  const showGoLive = joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning;
+  const showGoLive =
+    joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning && !isRTMPRunning;
 
   return (
     <Form

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

@@ -1,5 +1,5 @@
-import React, { Fragment, Suspense, useCallback, useEffect, useState } from 'react';
-import { useMedia } from 'react-use';
+import React, { Fragment, Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import { useMeasure, useMedia } from 'react-use';
 import {
   HMSRoomState,
   selectIsLocalVideoEnabled,
@@ -11,9 +11,7 @@ import {
   useParticipants,
   usePreviewJoin,
   useRecordingStreaming,
-  // @ts-ignore: No implicit Any
 } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
 import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Avatar, Box, config as cssConfig, Flex, flexCenter, styled, StyledVideoTile, Text, Video } from '../../..';
 import { AudioLevel } from '../../../AudioLevel';
@@ -31,7 +29,6 @@ import TileConnection from '../Connection/TileConnection';
 import FullPageProgress from '../FullPageProgress';
 // @ts-ignore: No implicit Any
 import { Logo } from '../Header/HeaderComponents';
-import { PrebuiltAudioIndicator } from '../PrebuiltTileElements';
 // @ts-ignore: No implicit Any
 import SettingsModal from '../Settings/SettingsModal';
 // @ts-ignore: No implicit Any
@@ -41,7 +38,7 @@ import { useAuthToken, useUISettings } from '../AppData/useUISettings';
 // @ts-ignore: No implicit Any
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 // @ts-ignore: No implicit Any
-import { getFormattedCount } from '../../common/utils';
+import { calculateAvatarAndAttribBoxSize, getFormattedCount } from '../../common/utils';
 // @ts-ignore: No implicit Any
 import { UI_SETTINGS } from '../../common/constants';
 
@@ -56,13 +53,24 @@ const getParticipantChipContent = (peerCount = 0) => {
   return `${formattedNum} other${parseInt(formattedNum) === 1 ? '' : 's'} in the session`;
 };
 
+const useLocalTileAspectRatio = () => {
+  const localPeer = useHMSStore(selectLocalPeer);
+  const videoTrack = useHMSStore(selectVideoTrackByID(localPeer?.videoTrack));
+  const isMobile = useMedia(cssConfig.media.md);
+  let aspectRatio = 0;
+  if (videoTrack?.width && videoTrack?.height) {
+    aspectRatio = videoTrack.width / videoTrack.height;
+  } else {
+    aspectRatio = isMobile ? 9 / 16 : 16 / 9;
+  }
+  return aspectRatio;
+};
+
 const PreviewJoin = ({
-  onJoin,
   skipPreview,
   initialName,
   asRole,
 }: {
-  onJoin: () => void;
   skipPreview?: boolean;
   initialName?: string;
   asRole?: string;
@@ -102,16 +110,11 @@ const PreviewJoin = ({
       name,
     });
     join();
-    onJoin && onJoin();
-  }, [join, name, setPreviewPreference, onJoin]);
+  }, [join, name, setPreviewPreference]);
   const roomLayout = useRoomLayout();
 
   const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};
-  const localPeer = useHMSStore(selectLocalPeer);
-  const videoTrack = useHMSStore(selectVideoTrackByID(localPeer?.videoTrack));
-  const isMobile = useMedia(cssConfig.media.md);
-  const aspectRatio =
-    videoTrack?.width && videoTrack?.height ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
+  const aspectRatio = useLocalTileAspectRatio();
   useEffect(() => {
     if (authToken) {
       if (skipPreview) {
@@ -204,13 +207,16 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
   const trackSelector = selectVideoTrackByID(localPeer?.videoTrack);
   const track = useHMSStore(trackSelector);
   const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
-  const videoTrack = useHMSStore(selectVideoTrackByID(localPeer?.videoTrack));
-  const isMobile = useMedia(cssConfig.media.md);
-  const aspectRatio =
-    videoTrack?.width && videoTrack?.height ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
+  const aspectRatio = useLocalTileAspectRatio();
+  const [ref, { width: calculatedWidth, height: calculatedHeight }] = useMeasure<HTMLDivElement>();
+  const [avatarSize, attribBoxSize] = useMemo(
+    () => calculateAvatarAndAttribBoxSize(calculatedWidth, calculatedHeight),
+    [calculatedWidth, calculatedHeight],
+  );
 
   return (
     <StyledVideoTile.Container
+      ref={ref}
       css={{
         bg: '$surface_default',
         aspectRatio,
@@ -235,22 +241,21 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
 
           {!isVideoOn ? (
             <StyledVideoTile.AvatarContainer>
-              <Avatar name={name} data-testid="preview_avatar_tile" size="medium" />
+              <Avatar name={name} data-testid="preview_avatar_tile" size={avatarSize} />
             </StyledVideoTile.AvatarContainer>
           ) : null}
         </>
-      ) : !error ? (
-        <FullPageProgress />
       ) : null}
+      {!localPeer && !error ? <FullPageProgress /> : null}
 
       {showMuteIcon ? (
-        <PrebuiltAudioIndicator>
-          <MicOffIcon height={16} width={16} />
-        </PrebuiltAudioIndicator>
+        <StyledVideoTile.AudioIndicator size={attribBoxSize}>
+          <MicOffIcon />
+        </StyledVideoTile.AudioIndicator>
       ) : (
-        <PrebuiltAudioIndicator>
+        <StyledVideoTile.AudioIndicator size={attribBoxSize}>
           <AudioLevel trackId={localPeer?.audioTrack} />
-        </PrebuiltAudioIndicator>
+        </StyledVideoTile.AudioIndicator>
       )}
     </StyledVideoTile.Container>
   );

package/src/Prebuilt/components/Preview/{PreviewContainer.tsx → PreviewScreen.tsx}

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import { useSearchParam } from 'react-use';
 import { Flex } from '../../..';
 import { useHMSPrebuiltContext } from '../../AppContext';
@@ -14,25 +13,16 @@ import { useAuthToken } from '../AppData/useUISettings';
 // @ts-ignore: No implicit Any
 import { QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';
 
-const PreviewContainer = () => {
-  const navigate = useNavigate();
+export const PreviewScreen = () => {
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const skipPreview = !isPreviewScreenEnabled;
   const previewAsRole = useSearchParam(QUERY_PARAM_PREVIEW_AS_ROLE);
   const { userName } = useHMSPrebuiltContext();
   const initialName = userName || (skipPreview ? 'Beam' : '');
-  const { roomId: urlRoomId, role: userRole } = useParams(); // from the url
   const authToken = useAuthToken();
   const roomLayout = useRoomLayout();
   const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};
 
-  const onJoin = () => {
-    let meetingURL = `/meeting/${urlRoomId}`;
-    if (userRole) {
-      meetingURL += `/${userRole}`;
-    }
-    navigate(meetingURL);
-  };
   return (
     <Flex direction="column" css={{ size: '100%' }}>
       <Flex
@@ -41,12 +31,7 @@ const PreviewContainer = () => {
         align="center"
       >
         {authToken && Object.keys(previewHeader).length > 0 ? (
-          <PreviewJoin
-            initialName={initialName}
-            skipPreview={skipPreview}
-            asRole={previewAsRole ?? undefined}
-            onJoin={onJoin}
-          />
+          <PreviewJoin initialName={initialName} skipPreview={skipPreview} asRole={previewAsRole ?? undefined} />
         ) : (
           <FullPageProgress />
         )}
@@ -54,5 +39,3 @@ const PreviewContainer = () => {
     </Flex>
   );
 };
-
-export default PreviewContainer;

package/src/Prebuilt/components/RaiseHand.jsx

@@ -9,7 +9,7 @@ export const RaiseHand = () => {
   const { isHandRaised, toggleHandRaise } = useMyMetadata();
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
-      <IconButton active={!isHandRaised} onClick={async () => await toggleHandRaise()}>
+      <IconButton data-testid="hand_raise_btn" active={!isHandRaised} onClick={async () => await toggleHandRaise()}>
         <HandIcon />
       </IconButton>
     </Tooltip>

package/src/Prebuilt/components/RoleChangeModal.jsx

@@ -9,7 +9,6 @@ import { Box, Flex } from '../../Layout';
 import { Dialog } from '../../Modal';
 import { Text } from '../../Text';
 import { Tooltip } from '../../Tooltip';
-import { PrebuiltDialogPortal } from './PrebuiltDialogPortal';
 import { useDropdownSelection } from './hooks/useDropdownSelection';
 import { useFilteredRoles } from '../common/hooks';
 import { textEllipsis } from '../../utils';
@@ -48,7 +47,7 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => {
   const peerNameMaxWidth = 200;
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
           <Dialog.Title css={{ p: 0 }} asChild>
@@ -180,7 +179,7 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => {
             </Box>
           </Flex>
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { useMedia } from 'react-use';
 import { Box, Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
 import { Sheet } from '../../../Sheet';
-import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 
 export const RequestPrompt = ({
   open = true,
@@ -35,7 +34,7 @@ export const RequestPrompt = ({
 
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content css={{ p: '$10' }}>
           <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
@@ -44,7 +43,7 @@ export const RequestPrompt = ({
           <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
           <RequestActions actionText={actionText} onAction={onAction} />
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };

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

@@ -9,7 +9,6 @@ import { Sheet } from '../../../Sheet';
 import { Tabs } from '../../../Tabs';
 import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
-import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { settingContent, settingsList } from './common.js';
 
 const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) => {
@@ -187,7 +186,7 @@ const DesktopSettingModal = ({
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Trigger asChild>{children}</Dialog.Trigger>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -257,7 +256,7 @@ const DesktopSettingModal = ({
             </IconButton>
           </Dialog.Close>
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };

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

@@ -2,13 +2,24 @@ import React, { useState } from 'react';
 import { selectPermissions, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { AlertTriangleIcon } from '@100mslive/react-icons';
 import { Button, Dialog, Flex, Text } from '../../../';
-import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { ResolutionInput } from '../Streaming/ResolutionInput';
-import { getResolution } from '../Streaming/RTMPStreaming';
 import { ToastManager } from '../Toast/ToastManager';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants';
 
+export function getResolution(recordingResolution) {
+  const resolution = {};
+  if (recordingResolution.width) {
+    resolution.width = recordingResolution.width;
+  }
+  if (recordingResolution.height) {
+    resolution.height = recordingResolution.height;
+  }
+  if (Object.keys(resolution).length > 0) {
+    return resolution;
+  }
+}
+
 const StartRecording = ({ open, onOpenChange }) => {
   const permissions = useHMSStore(selectPermissions);
   const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
@@ -22,7 +33,7 @@ const StartRecording = ({ open, onOpenChange }) => {
   if (isBrowserRecordingOn) {
     return (
       <Dialog.Root open={open} onOpenChange={onOpenChange}>
-        <PrebuiltDialogPortal>
+        <Dialog.Portal>
           <Dialog.Content
             css={{
               width: 'min(400px,80%)',
@@ -67,7 +78,7 @@ const StartRecording = ({ open, onOpenChange }) => {
               </Button>
             </Flex>
           </Dialog.Content>
-        </PrebuiltDialogPortal>
+        </Dialog.Portal>
       </Dialog.Root>
     );
   }

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -151,7 +151,7 @@ export const SidePaneTabs = React.memo<{
                     color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
                   }}
                 >
-                  Participants <ParticipantCount count={peerCount} />
+                  Participants &nbsp; <ParticipantCount count={peerCount} />
                 </Tabs.Trigger>
               </Tabs.List>
               <Tabs.Content value={SIDE_PANE_OPTIONS.PARTICIPANTS} css={{ p: 0 }}>

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -15,7 +15,6 @@ import { Dialog } from '../../Modal';
 import { Switch } from '../../Switch';
 import { Text } from '../../Text';
 import { DialogDropdownTrigger } from '../primitives/DropdownTrigger';
-import { PrebuiltDialogPortal } from './PrebuiltDialogPortal';
 import { useSetUiSettings } from './AppData/useUISettings';
 import { useDropdownSelection } from './hooks/useDropdownSelection';
 import { UI_SETTINGS } from '../common/constants';
@@ -40,7 +39,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
 
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -119,7 +118,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
             <TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
           )}
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/Streaming/Common.jsx

@@ -37,36 +37,46 @@ export const StreamCard = ({ title, subtitle, Icon, imgSrc = '', css = {}, onCli
   );
 };
 
-export const ContentHeader = ({ onBack, title, content }) => {
+export const ContentHeader = ({ onBack, onClose, title = '', content }) => {
   return (
-    <Flex css={{ w: '100%', py: '$8', px: '$10', cursor: 'pointer' }}>
-      <Text
-        css={{ p: '$2', bg: '$surface_bright', r: '$round', alignSelf: 'center' }}
-        onClick={onBack}
-        data-testid="go_back"
-      >
-        <ChevronLeftIcon width={16} height={16} />
-      </Text>
-      <Box css={{ flex: '1 1 0', mx: '$8' }}>
+    <Flex
+      css={{ w: '100%', py: '$8', px: '$10', cursor: 'pointer', borderBottom: '1px solid $border_bright', mb: '$8' }}
+    >
+      {onBack ? (
         <Text
-          variant="tiny"
           css={{
-            textTransform: 'uppercase',
-            fontWeight: '$semiBold',
-            color: '$on_surface_medium',
+            alignSelf: 'center',
+            mr: '$8',
           }}
+          onClick={onBack}
+          data-testid="go_back"
         >
-          {title}
+          <ChevronLeftIcon />
         </Text>
+      ) : null}
+      <Box css={{ flex: '1 1 0' }}>
+        {title ? (
+          <Text
+            variant="tiny"
+            css={{
+              textTransform: 'uppercase',
+              fontWeight: '$semiBold',
+              color: '$on_surface_medium',
+            }}
+          >
+            {title}
+          </Text>
+        ) : null}
         <Text variant="h6">{content}</Text>
       </Box>
-      <IconButton onClick={onBack} css={{ alignSelf: 'flex-start' }} data-testid="close_stream_section">
-        <CrossIcon width={16} height={16} />
-      </IconButton>
+      {onClose ? (
+        <IconButton onClick={onClose} css={{ alignSelf: 'flex-start' }} data-testid="close_stream_section">
+          <CrossIcon />
+        </IconButton>
+      ) : null}
     </Flex>
   );
 };
-
 export const Container = ({ children, rounded = false }) => {
   return (
     <Box
@@ -76,7 +86,7 @@ export const Container = ({ children, rounded = false }) => {
         position: 'absolute',
         top: 0,
         left: 0,
-        bg: '$surface_default',
+        bg: '$surface_dim',
         transform: 'translateX(10%)',
         animation: `${slideLeftAndFade('10%')} 100ms ease-out forwards`,
         display: 'flex',
@@ -125,7 +135,7 @@ export const ErrorText = ({ error }) => {
     return null;
   }
   return (
-    <Text variant="sm" css={{ mb: '$8', color: '$alert_error_default' }}>
+    <Text variant="sm" css={{ my: '$4', color: '$alert_error_default' }}>
       {error}
     </Text>
   );

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

@@ -19,15 +19,14 @@ export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge
   const [page, setPage] = useState(0);
   const activeSharePeer = peersSharing[page];
   const isMobile = useMedia(cssConfig.media.md);
-  const secondaryPeers = useMemo(
-    () =>
-      isMobile
-        ? activeSharePeer
-          ? [activeSharePeer, ...peers.filter(p => p.id !== activeSharePeer?.id)]
-          : peers //keep active sharing peer as first tile
-        : peers.filter(p => p.id !== activeSharePeer?.id),
-    [activeSharePeer, peers, isMobile],
-  );
+  const secondaryPeers = useMemo(() => {
+    if (isMobile) {
+      return activeSharePeer
+        ? [activeSharePeer, ...peers.filter(p => p.id !== activeSharePeer?.id)] //keep active sharing peer as first tile
+        : peers;
+    }
+    return peers.filter(p => p.id !== activeSharePeer?.id);
+  }, [activeSharePeer, peers, isMobile]);
   useEffect(() => {
     setActiveScreenSharePeer(isMobile ? '' : activeSharePeer?.id);
     return () => {