@100mslive/roomkit-react 0.1.6 → 0.1.7

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.6",
+  "version": "0.1.7",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.15",
-    "@100mslive/hms-virtual-background": "1.11.15",
-    "@100mslive/react-icons": "0.8.15",
-    "@100mslive/react-sdk": "0.8.15",
+    "@100mslive/hls-player": "0.1.16",
+    "@100mslive/hms-virtual-background": "1.11.16",
+    "@100mslive/react-icons": "0.8.16",
+    "@100mslive/react-sdk": "0.8.16",
     "@100mslive/types-prebuilt": "0.12.0",
     "@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": "0578f113babef7488a788837c63f7f8a7aa246e3"
+  "gitHead": "c06edac3e71481de08e948ffe0affaf705564ad1"
 }

package/src/Input/Input.tsx

@@ -20,7 +20,7 @@ export const Input = styled('input', {
     border: '1px solid transparent',
   },
   '&::placeholder': {
-    color: '$on_surface_low',
+    color: '$on_surface_medium',
   },
   variants: {
     alert_error_default: {

package/src/Prebuilt/common/hooks.js

@@ -12,7 +12,6 @@ import {
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { useRoomLayout } from '../provider/roomLayoutProvider';
-import { isInternalRole } from './utils';
 
 /**
  * Hook to execute a callback when alone in room(after a certain 5d of time)
@@ -53,7 +52,7 @@ export const useWhenAloneInRoom = (thresholdMs = 5 * 60 * 1000) => {
 };
 
 export const useFilteredRoles = () => {
-  const roles = useHMSStore(selectAvailableRoleNames).filter(role => !isInternalRole(role));
+  const roles = useHMSStore(selectAvailableRoleNames);
   return roles;
 };
 

package/src/Prebuilt/common/utils.js

@@ -56,8 +56,6 @@ export const isScreenshareSupported = () => {
   return typeof navigator.mediaDevices.getDisplayMedia !== 'undefined';
 };
 
-export const isInternalRole = role => role && role.startsWith('__internal');
-
 export const metadataPayloadParser = payload => {
   try {
     const data = window.atob(payload);
@@ -90,3 +88,10 @@ export const formatTime = timeInSeconds => {
   const hour = hours !== 0 ? `${hours < 10 ? '0' : ''}${hours}:` : '';
   return `${hour}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 };
+
+export const getAttributeBoxSize = (width, height) => {
+  if (!width || !height) {
+    return '';
+  }
+  return width < 180 || height < 180 ? 'small' : 'medium';
+};

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

@@ -24,6 +24,7 @@ import { Tooltip } from '../../../Tooltip';
 import emptyChat from '../../images/empty-chat.svg';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
+import { useUnreadCount } from './useUnreadCount';
 
 const formatTime = date => {
   if (!(date instanceof Date)) {
@@ -192,119 +193,127 @@ const SenderName = styled(Text, {
   fontWeight: '$semiBold',
 });
 
-const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPin }) => {
-  const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
-  const rowRef = useRef(null);
-  useEffect(() => {
-    if (rowRef.current) {
-      setRowHeight(index, rowRef.current.clientHeight);
-    }
-  }, [index, setRowHeight]);
-  const isMobile = useMedia(cssConfig.media.md);
-  const { elements } = useRoomLayoutConferencingScreen();
-  const isOverlay = elements?.chat?.is_overlay && isMobile;
-  const hmsActions = useHMSActions();
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const permissions = useHMSStore(selectPermissions);
-  const messageType = getMessageType({
-    roles: message.recipientRoles,
-    receiver: message.recipientPeer,
-  });
-  // show pin action only if peer has remove others permission and the message is of broadcast type
-  const showPinAction = permissions.removeOthers && !messageType && elements?.chat?.allow_pinning_messages;
+const ChatMessage = React.memo(
+  ({ index, style = {}, message, setRowHeight, isLast = false, unreadCount = 0, scrollToBottom, onPin }) => {
+    const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
+    const rowRef = useRef(null);
+    useEffect(() => {
+      if (rowRef.current) {
+        setRowHeight(index, rowRef.current.clientHeight);
+      }
+    }, [index, setRowHeight]);
+    const isMobile = useMedia(cssConfig.media.md);
+    const { elements } = useRoomLayoutConferencingScreen();
+    const isOverlay = elements?.chat?.is_overlay && isMobile;
+    const hmsActions = useHMSActions();
+    const localPeerId = useHMSStore(selectLocalPeerID);
+    const permissions = useHMSStore(selectPermissions);
+    const messageType = getMessageType({
+      roles: message.recipientRoles,
+      receiver: message.recipientPeer,
+    });
+    // show pin action only if peer has remove others permission and the message is of broadcast type
+    const showPinAction = permissions.removeOthers && !messageType && elements?.chat?.allow_pinning_messages;
 
-  useEffect(() => {
-    if (message.id && !message.read && inView) {
-      hmsActions.setMessageRead(true, message.id);
-    }
-  }, [message.read, hmsActions, inView, message.id]);
+    useEffect(() => {
+      if (message.id && !message.read && inView) {
+        hmsActions.setMessageRead(true, message.id);
+      }
+    }, [message.read, hmsActions, inView, message.id]);
 
-  return (
-    <Box
-      ref={ref}
-      as="div"
-      css={{ mb: '$10', pr: '$10', mt: '$8', '&:hover .chat_actions': { opacity: 1 } }}
-      style={style}
-    >
-      <Flex
-        ref={rowRef}
-        align="center"
-        css={{
-          flexWrap: 'wrap',
-          // Theme independent color, token should not be used for transparent chat
-          bg: messageType ? (isOverlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
-          r: messageType ? '$1' : undefined,
-          px: messageType ? '$4' : '$2',
-          py: messageType ? '$4' : 0,
-          userSelect: 'none',
-        }}
-        key={message.time}
-        data-testid="chat_msg"
+    useEffect(() => {
+      if (isLast && inView && unreadCount >= 1) {
+        scrollToBottom(1);
+      }
+    }, [inView, isLast, scrollToBottom, unreadCount]);
+
+    return (
+      <Box
+        ref={ref}
+        as="div"
+        css={{ mb: '$10', pr: '$10', mt: '$8', '&:hover .chat_actions': { opacity: 1 } }}
+        style={style}
       >
-        <Text
+        <Flex
+          ref={rowRef}
+          align="center"
           css={{
-            color: isOverlay ? '#FFF' : '$on_surface_high',
-            fontWeight: '$semiBold',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            width: '100%',
+            flexWrap: 'wrap',
+            // Theme independent color, token should not be used for transparent chat
+            bg: messageType ? (isOverlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
+            r: messageType ? '$1' : undefined,
+            px: messageType ? '$4' : '$2',
+            py: messageType ? '$4' : 0,
+            userSelect: 'none',
           }}
-          as="div"
+          key={message.time}
+          data-testid="chat_msg"
         >
-          <Flex align="baseline">
-            {message.senderName === 'You' || !message.senderName ? (
-              <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
-                {message.senderName || 'Anonymous'}
-              </SenderName>
-            ) : (
-              <Tooltip title={message.senderName} side="top" align="start">
+          <Text
+            css={{
+              color: isOverlay ? '#FFF' : '$on_surface_high',
+              fontWeight: '$semiBold',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              width: '100%',
+            }}
+            as="div"
+          >
+            <Flex align="baseline">
+              {message.senderName === 'You' || !message.senderName ? (
                 <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
-                  {message.senderName}
+                  {message.senderName || 'Anonymous'}
                 </SenderName>
-              </Tooltip>
-            )}
-            {!isOverlay ? (
-              <Text
-                as="span"
-                variant="xs"
-                css={{
-                  ml: '$4',
-                  color: '$on_surface_medium',
-                  flexShrink: 0,
-                }}
-              >
-                {formatTime(message.time)}
-              </Text>
-            ) : null}
-          </Flex>
-          <MessageType
-            hasCurrentUserSent={message.sender === localPeerId}
-            receiver={message.recipientPeer}
-            roles={message.recipientRoles}
-          />
-          {!isOverlay ? <ChatActions onPin={onPin} showPinAction={showPinAction} /> : null}
-        </Text>
-        <Text
-          variant="sm"
-          css={{
-            w: '100%',
-            mt: '$2',
-            wordBreak: 'break-word',
-            whiteSpace: 'pre-wrap',
-            userSelect: 'all',
-            color: isOverlay ? '#FFF' : '$on_surface_high',
-          }}
-          onClick={e => e.stopPropagation()}
-        >
-          <AnnotisedMessage message={message.message} />
-        </Text>
-      </Flex>
-    </Box>
-  );
-});
+              ) : (
+                <Tooltip title={message.senderName} side="top" align="start">
+                  <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
+                    {message.senderName}
+                  </SenderName>
+                </Tooltip>
+              )}
+              {!isOverlay ? (
+                <Text
+                  as="span"
+                  variant="xs"
+                  css={{
+                    ml: '$4',
+                    color: '$on_surface_medium',
+                    flexShrink: 0,
+                  }}
+                >
+                  {formatTime(message.time)}
+                </Text>
+              ) : null}
+            </Flex>
+            <MessageType
+              hasCurrentUserSent={message.sender === localPeerId}
+              receiver={message.recipientPeer}
+              roles={message.recipientRoles}
+            />
+            {!isOverlay ? <ChatActions onPin={onPin} showPinAction={showPinAction} /> : null}
+          </Text>
+          <Text
+            variant="sm"
+            css={{
+              w: '100%',
+              mt: '$2',
+              wordBreak: 'break-word',
+              whiteSpace: 'pre-wrap',
+              userSelect: 'all',
+              color: isOverlay ? '#FFF' : '$on_surface_high',
+            }}
+            onClick={e => e.stopPropagation()}
+          >
+            <AnnotisedMessage message={message.message} />
+          </Text>
+        </Flex>
+      </Box>
+    );
+  },
+);
 const ChatList = React.forwardRef(
-  ({ width, height, setRowHeight, getRowHeight, messages, scrollToBottom }, listRef) => {
+  ({ width, height, setRowHeight, getRowHeight, messages, unreadCount = 0, scrollToBottom }, listRef) => {
     const { setPinnedMessage } = useSetPinnedMessage();
     useLayoutEffect(() => {
       if (listRef.current && listRef.current.scrollToItem) {
@@ -331,6 +340,9 @@ const ChatList = React.forwardRef(
             key={messages[index].id}
             message={messages[index]}
             setRowHeight={setRowHeight}
+            unreadCount={unreadCount}
+            isLast={index >= messages.length - 2}
+            scrollToBottom={scrollToBottom}
             onPin={() => setPinnedMessage(messages[index])}
           />
         )}
@@ -338,7 +350,7 @@ const ChatList = React.forwardRef(
     );
   },
 );
-const VirtualizedChatMessages = React.forwardRef(({ messages, scrollToBottom }, listRef) => {
+const VirtualizedChatMessages = React.forwardRef(({ messages, unreadCount = 0, scrollToBottom }, listRef) => {
   const rowHeights = useRef({});
 
   function getRowHeight(index) {
@@ -377,6 +389,7 @@ const VirtualizedChatMessages = React.forwardRef(({ messages, scrollToBottom },
             getRowHeight={getRowHeight}
             scrollToBottom={scrollToBottom}
             ref={listRef}
+            unreadCount={unreadCount}
           />
         )}
       </AutoSizer>
@@ -394,6 +407,7 @@ export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, list
   messages = useMemo(() => messages?.filter(message => message.type === 'chat') || [], [messages]);
   const isMobile = useMedia(cssConfig.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
+  const unreadCount = useUnreadCount({ role, peerId });
 
   if (messages.length === 0 && !(isMobile && elements?.chat?.is_overlay)) {
     return (
@@ -425,7 +439,12 @@ export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, list
 
   return (
     <Fragment>
-      <VirtualizedChatMessages messages={messages} scrollToBottom={scrollToBottom} ref={listRef} />
+      <VirtualizedChatMessages
+        messages={messages}
+        scrollToBottom={scrollToBottom}
+        unreadCount={unreadCount}
+        ref={listRef}
+      />
     </Fragment>
   );
 });

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

@@ -151,6 +151,7 @@ export const ChatFooter = ({
               c: '$on_surface_high',
               '&:valid ~ .send-msg': { color: '$on_surface_high' },
               '& ~ .send-msg': { color: '$on_surface_low' },
+              '&::placeholder': { color: '$on_surface_medium' },
             }}
             placeholder="Send a message...."
             ref={inputRef}

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

@@ -6,6 +6,7 @@ import {
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
 import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
+import { useAVToggle } from '@100mslive/react-sdk';
 import { config as cssConfig, Footer as AppFooter } from '../../..';
 // @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
@@ -41,6 +42,8 @@ export const Footer = ({
   const isOverlayChat = !!elements?.chat?.is_overlay;
   const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
 
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
 
@@ -91,7 +94,7 @@ export const Footer = ({
       >
         {isMobile ? (
           <>
-            {screenType === 'hls_live_streaming' ? <RaiseHand /> : null}
+            {noAVPermissions ? <RaiseHand /> : null}
             {elements?.chat && <ChatToggle />}
             <MoreSettings elements={elements} screenType={screenType} />
           </>

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

@@ -1,11 +1,12 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import { useDebounce, useMedia } from 'react-use';
 import {
+  selectHandRaisedPeers,
+  selectHasPeerHandRaised,
   selectIsPeerAudioEnabled,
   selectLocalPeerID,
   selectPeerCount,
   selectPeerMetadata,
-  selectPeersByCondition,
   selectPermissions,
   useHMSActions,
   useHMSStore,
@@ -27,7 +28,7 @@ import { RoleAccordion } from './RoleAccordion';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 import { useParticipants } from '../../common/hooks';
-import { isInternalRole } from '../../common/utils';
+import { getFormattedCount } from '../../common/utils';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const ParticipantList = () => {
@@ -35,7 +36,7 @@ export const ParticipantList = () => {
   const { participants, isConnected, peerCount } = useParticipants(filter);
   const peersOrderedByRoles = {};
 
-  const handRaisedPeers = useHMSStore(selectPeersByCondition(peer => JSON.parse(peer.metadata || '{}')?.isHandRaised));
+  const handRaisedPeers = useHMSStore(selectHandRaisedPeers);
 
   participants.forEach(participant => {
     if (peersOrderedByRoles[participant.roleName] === undefined) {
@@ -107,7 +108,7 @@ export const ParticipantCount = () => {
     >
       <PeopleIcon />
       <Text variant="sm" css={{ mx: '$4', c: 'inherit' }}>
-        {peerCount}
+        {getFormattedCount(peerCount)}
       </Text>
     </IconButton>
   );
@@ -176,7 +177,7 @@ export const Participant = ({ peer, isConnected }) => {
  * shows settings to change for a participant like changing their role
  */
 const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
-  const isHandRaised = useHMSStore(selectPeerMetadata(peerId))?.isHandRaised;
+  const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
   const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
   const shouldShowMoreActions = canChangeRole;
   const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
@@ -209,9 +210,7 @@ const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
         </Flex>
       ) : null}
 
-      {shouldShowMoreActions && !isInternalRole(role) && !isLocal ? (
-        <ParticipantMoreActions peerId={peerId} role={role} />
-      ) : null}
+      {shouldShowMoreActions && !isLocal ? <ParticipantMoreActions peerId={peerId} role={role} /> : null}
     </Flex>
   );
 });
@@ -328,7 +327,7 @@ export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false })
       <Input
         type="text"
         placeholder={placeholder || 'Search for participants'}
-        css={{ w: '100%', p: '$6', pl: '$14', mr: '$4', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
+        css={{ w: '100%', p: '$6', pl: '$16', mr: '$4', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
         value={value}
         onKeyDown={event => {
           event.stopPropagation();

package/src/Prebuilt/components/Header/ParticipantFilter.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, HandRaiseIcon, PeopleIcon } from '@100mslive/react-icons';
 import { Box, Dropdown, Flex, Text, textEllipsis } from '../../../';
-import { isInternalRole } from '../../common/utils';
 
 export const ParticipantFilter = ({ selection, onSelection, isConnected, roles }) => {
   const [open, setOpen] = useState(false);
@@ -53,17 +52,15 @@ export const ParticipantFilter = ({ selection, onSelection, isConnected, roles }
           value={{ metadata: { isHandRaised: true }, role: '' }}
         />
         <Dropdown.ItemSeparator />
-        {roles
-          .filter(role => !isInternalRole(role))
-          .map(role => (
-            <Item
-              key={role}
-              selected={selectionValue === role}
-              title={role}
-              value={{ metadata: { isHandRaised: false }, role }}
-              onSelection={onItemClick}
-            />
-          ))}
+        {roles.map(role => (
+          <Item
+            key={role}
+            selected={selectionValue === role}
+            title={role}
+            value={{ metadata: { isHandRaised: false }, role }}
+            onSelection={onItemClick}
+          />
+        ))}
       </Dropdown.Content>
     </Dropdown.Root>
   );

package/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx

@@ -29,6 +29,7 @@ export const DesktopLeaveRoom = ({
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
   const showStream = screenType !== 'hls_live_streaming' && isStreamingOn;
+  const showLeaveOptions = (permissions?.hlsStreaming && isStreamingOn) || permissions?.endRoom;
 
   useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: 'LeaveRoom' });
 
@@ -38,7 +39,7 @@ export const DesktopLeaveRoom = ({
 
   return (
     <Fragment>
-      {screenType !== 'hls_live_streaming' && (permissions?.hlsStreaming || permissions?.endRoom) ? (
+      {showLeaveOptions ? (
         <Flex>
           <LeaveIconButton
             key="LeaveRoom"
@@ -47,9 +48,7 @@ export const DesktopLeaveRoom = ({
               borderTopRightRadius: 0,
               borderBottomRightRadius: 0,
             }}
-            onClick={() => {
-              leaveRoom({ endstream: false });
-            }}
+            onClick={() => setShowLeaveRoomAlert(true)}
           >
             <Tooltip title="Leave Room">
               <Box>
@@ -74,7 +73,7 @@ export const DesktopLeaveRoom = ({
               <Dropdown.Item
                 css={{
                   bg: '$surface_dim',
-                  color: '$on_surface_low',
+                  color: '$on_surface_medium',
                   '&:hover': { bg: '$surface_default', color: '$on_surface_high' },
                 }}
                 onClick={() => leaveRoom({ endstream: false })}
@@ -92,42 +91,37 @@ export const DesktopLeaveRoom = ({
                   css={{ p: 0 }}
                 />
               </Dropdown.Item>
-              {permissions?.endRoom || permissions?.hlsStreaming ? (
-                <Dropdown.Item
-                  css={{
-                    bg: '$alert_error_dim',
-                    color: '$alert_error_bright',
-                    '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
+
+              <Dropdown.Item
+                css={{
+                  bg: '$alert_error_dim',
+                  color: '$alert_error_bright',
+                  '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
+                }}
+                data-testid="end_room_btn"
+              >
+                <LeaveCard
+                  title={showStream ? 'End Stream' : 'End Session'}
+                  subtitle={`The ${
+                    showStream ? 'stream' : 'session'
+                  } will end for everyone. You can't undo this action.`}
+                  bg=""
+                  titleColor="$alert_error_brighter"
+                  icon={<StopIcon height={24} width={24} />}
+                  onClick={() => {
+                    setOpen(false);
+                    setShowEndStreamAlert(true);
                   }}
-                  data-testid="end_room_btn"
-                >
-                  <LeaveCard
-                    title={showStream ? 'End Stream' : 'End Session'}
-                    subtitle={`The ${
-                      showStream ? 'stream' : 'session'
-                    } will end for everyone. You can't undo this action.`}
-                    bg=""
-                    titleColor="$alert_error_brighter"
-                    icon={<StopIcon height={24} width={24} />}
-                    onClick={() => {
-                      setOpen(false);
-                      setShowEndStreamAlert(true);
-                    }}
-                    css={{ p: 0 }}
-                  />
-                </Dropdown.Item>
-              ) : null}
+                  css={{ p: 0 }}
+                />
+              </Dropdown.Item>
             </Dropdown.Content>
           </Dropdown.Root>
         </Flex>
       ) : (
         <LeaveIconButton
           onClick={() => {
-            if (screenType === 'hls_live_streaming') {
-              setShowLeaveRoomAlert(true);
-            } else {
-              leaveRoom({ endstream: false });
-            }
+            setShowLeaveRoomAlert(true);
           }}
           key="LeaveRoom"
           data-testid="leave_room_btn"
@@ -154,16 +148,14 @@ export const DesktopLeaveRoom = ({
         </Dialog.Portal>
       </Dialog.Root>
 
-      {screenType === 'hls_live_streaming' ? (
-        <Dialog.Root open={showLeaveRoomAlert} modal={false}>
-          <Dialog.Portal>
-            <Dialog.Overlay />
-            <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
-              <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} isModal />
-            </Dialog.Content>
-          </Dialog.Portal>
-        </Dialog.Root>
-      ) : null}
+      <Dialog.Root open={showLeaveRoomAlert} modal={false}>
+        <Dialog.Portal>
+          <Dialog.Overlay />
+          <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
+            <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} isModal />
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
     </Fragment>
   );
 };