@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.1

package/src/Prebuilt/components/Header/{StreamActions.jsx → StreamActions.tsx}

@@ -11,28 +11,31 @@ import {
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { AlertTriangleIcon, CrossIcon, RecordIcon } from '@100mslive/react-icons';
-import { Box, Button, config as cssConfig, Flex, HorizontalDivider, Loading, Popover, Text, Tooltip } from '../../../';
+import { Box, Button, config as cssConfig, Flex, HorizontalDivider, Loading, Popover, Text, Tooltip } from '../../..';
 import { Sheet } from '../../../Sheet';
-import { ResolutionInput } from '../Streaming/ResolutionInput';
-import { getResolution } from '../Streaming/RTMPStreaming';
+// @ts-ignore
 import { ToastManager } from '../Toast/ToastManager';
+// @ts-ignore
 import { AdditionalRoomState, getRecordingText } from './AdditionalRoomState';
+// @ts-ignore
 import { useSetAppDataByKey } from '../AppData/useUISettings';
+// @ts-ignore
 import { formatTime } from '../../common/utils';
-import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants';
+// @ts-ignore
+import { APP_DATA } from '../../common/constants';
 
 export const LiveStatus = () => {
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
   const hlsState = useHMSStore(selectHLSState);
   const isMobile = useMedia(cssConfig.media.md);
-  const intervalRef = useRef(null);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
   const [liveTime, setLiveTime] = useState(0);
 
   const startTimer = useCallback(() => {
     intervalRef.current = setInterval(() => {
-      if (hlsState?.running) {
-        setLiveTime(Date.now() - hlsState?.variants[0]?.startedAt.getTime());
+      if (hlsState?.running && hlsState?.variants[0]?.startedAt) {
+        setLiveTime(Date.now() - hlsState.variants[0].startedAt.getTime());
       }
     }, 1000);
   }, [hlsState?.running, hlsState?.variants]);
@@ -92,6 +95,7 @@ export const RecordingStatus = () => {
 
   return (
     <Tooltip
+      boxCss={{ zIndex: 1 }}
       title={getRecordingText({
         isBrowserRecordingOn,
         isServerRecordingOn,
@@ -112,7 +116,6 @@ export const RecordingStatus = () => {
 
 const StartRecording = () => {
   const permissions = useHMSStore(selectPermissions);
-  const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
   const [open, setOpen] = useState(false);
   const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
@@ -133,7 +136,7 @@ const StartRecording = () => {
         </Popover.Trigger>
         <Popover.Portal>
           <Popover.Content align="end" sideOffset={8} css={{ w: '$64' }}>
-            <Text variant="body" css={{ color: '$on_surface_medium' }}>
+            <Text variant="body1" css={{ color: '$on_surface_medium' }}>
               Are you sure you want to end the recording?
             </Text>
             <Button
@@ -145,8 +148,9 @@ const StartRecording = () => {
                 try {
                   await hmsActions.stopRTMPAndRecording();
                 } catch (error) {
+                  const err = error as Error;
                   ToastManager.addToast({
-                    title: error.message,
+                    title: err.message,
                     variant: 'error',
                   });
                 }
@@ -161,62 +165,39 @@ const StartRecording = () => {
     );
   }
   return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
-      <Popover.Trigger asChild>
-        <Button
-          data-testid="start_recording"
-          variant="standard"
-          icon
-          disabled={recordingStarted || isStreamingOn}
-          onClick={() => setOpen(true)}
-        >
-          {recordingStarted ? <Loading size={24} color="currentColor" /> : <RecordIcon />}
-          <Text as="span" css={{ '@md': { display: 'none' }, color: 'currentColor' }}>
-            {recordingStarted ? 'Starting' : 'Start'} Recording
-          </Text>
-        </Button>
-      </Popover.Trigger>
-      <Popover.Content align="end" sideOffset={8} css={{ w: '$64' }}>
-        <ResolutionInput
-          testId="recording_resolution"
-          css={{ flexDirection: 'column', alignItems: 'start' }}
-          onResolutionChange={setResolution}
-        />
-        <Button
-          data-testid="start_recording_confirm"
-          variant="primary"
-          icon
-          css={{ ml: 'auto' }}
-          type="submit"
-          disabled={recordingStarted || isStreamingOn}
-          onClick={async () => {
-            try {
-              setRecordingState(true);
-              await hmsActions.startRTMPOrRecording({
-                resolution: getResolution(resolution),
-                record: true,
-              });
-            } catch (error) {
-              if (error.message.includes('stream already running')) {
-                ToastManager.addToast({
-                  title: 'Recording already running',
-                  variant: 'error',
-                });
-              } else {
-                ToastManager.addToast({
-                  title: error.message,
-                  variant: 'error',
-                });
-              }
-              setRecordingState(false);
-            }
-            setOpen(false);
-          }}
-        >
-          Start
-        </Button>
-      </Popover.Content>
-    </Popover.Root>
+    <Button
+      data-testid="start_recording"
+      variant="standard"
+      icon
+      disabled={recordingStarted || isStreamingOn}
+      onClick={async () => {
+        try {
+          setRecordingState(true);
+          await hmsActions.startRTMPOrRecording({
+            record: true,
+          });
+        } catch (error) {
+          const err = error as Error;
+          if (err.message.includes('stream already running')) {
+            ToastManager.addToast({
+              title: 'Recording already running',
+              variant: 'error',
+            });
+          } else {
+            ToastManager.addToast({
+              title: err.message,
+              variant: 'error',
+            });
+          }
+          setRecordingState(false);
+        }
+      }}
+    >
+      {recordingStarted ? <Loading size={24} color="currentColor" /> : <RecordIcon />}
+      <Text as="span" css={{ '@md': { display: 'none' }, color: 'currentColor' }}>
+        {recordingStarted ? 'Starting' : 'Start'} Recording
+      </Text>
+    </Button>
   );
 };
 
@@ -242,7 +223,13 @@ export const StreamActions = () => {
   );
 };
 
-export const StopRecordingInSheet = ({ onStopRecording, onClose }) => {
+export const StopRecordingInSheet = ({
+  onStopRecording,
+  onClose,
+}: {
+  onStopRecording: () => void;
+  onClose: () => void;
+}) => {
   return (
     <Sheet.Root open={true}>
       <Sheet.Content>

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

@@ -25,11 +25,13 @@ export const CamaraFlipActions = () => {
 
   const videoTrackId = useHMSStore(selectLocalVideoTrackID);
   const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
-
+  if (!videoInput || !videoInput?.length || !localVideoTrack?.facingMode) {
+    return null;
+  }
   return (
     <Box>
       <IconButton
-        disabled={!videoInput?.length || !isVideoOn || !localVideoTrack?.facingMode}
+        disabled={!isVideoOn}
         onClick={async () => {
           try {
             await actions.switchCamera();
@@ -117,6 +119,7 @@ const AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, ch
           {outputDevices.map(audioDevice => {
             return (
               <SelectWithLabel
+                key={audioDevice.deviceId}
                 label={audioDevice.label}
                 id={audioDevice.deviceId}
                 checked={audioDevice.deviceId === outputSelected}

package/src/Prebuilt/components/Header/index.tsx

@@ -0,0 +1 @@
+export { Header } from './Header';

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx

@@ -14,6 +14,10 @@ const IconSection = styled(IconButton, {
   borderTopRightRadius: 0,
   borderColor: '$border_default',
   borderBottomRightRadius: 0,
+  position: 'relative',
+  '&:not([disabled]):focus-visible': {
+    zIndex: 1,
+  },
   '@md': {
     mx: 0,
     borderTopRightRadius: '$1',
@@ -30,8 +34,9 @@ const OptionsSection = styled(IconButton, {
   borderColor: '$border_default',
   borderBottomLeftRadius: 0,
   borderLeftWidth: 0,
+  position: 'relative',
   '&:not([disabled]):focus-visible': {
-    boxShadow: 'none',
+    zIndex: 1,
   },
   '@md': {
     display: 'none',
@@ -39,6 +44,10 @@ const OptionsSection = styled(IconButton, {
 });
 
 export const IconButtonWithOptions = ({
+  disabled = false,
+  onDisabledClick = () => {
+    return;
+  },
   tooltipMessage = '',
   icon,
   options = [],
@@ -47,8 +56,9 @@ export const IconButtonWithOptions = ({
     return;
   },
 }) => {
-  const bgCss = { backgroundColor: active ? '$transparent' : '$secondary_dim' };
-  const iconCss = { color: active ? '$on_surface_high' : '$on_primary_high' };
+  const bgCss = { backgroundColor: disabled ? '$surface_brighter' : active ? '$transparent' : '$secondary_dim' };
+  const iconCss = { color: disabled ? '$on_surface_low' : active ? '$on_surface_high' : '$on_primary_high' };
+
   return (
     <Flex>
       <IconSection css={bgCss} onClick={onClick}>
@@ -59,7 +69,16 @@ export const IconButtonWithOptions = ({
         </Tooltip>
       </IconSection>
       <Dropdown.Root>
-        <Dropdown.Trigger asChild>
+        <Dropdown.Trigger
+          asChild
+          // onClick does not work
+          onPointerDown={e => {
+            if (disabled) {
+              e.preventDefault();
+              onDisabledClick();
+            }
+          }}
+        >
           <OptionsSection css={bgCss}>
             <Tooltip title="View Options">
               <Box css={iconCss}>

package/src/Prebuilt/components/InsetTile.tsx

@@ -0,0 +1,128 @@
+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 { ExpandIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../Layout';
+import { Text } from '../../Text';
+import { config as cssConfig } from '../../Theme';
+// @ts-ignore: No implicit Any
+import IconButton from '../IconButton';
+// @ts-ignore: No implicit Any
+import { AudioVideoToggle } from './AudioVideoToggle';
+// @ts-ignore: No implicit Any
+import VideoTile from './VideoTile';
+// @ts-ignore: No implicit Any
+import { useSetAppDataByKey } from './AppData/useUISettings';
+import { useVideoTileContext } from './hooks/useVideoTileLayout';
+// @ts-ignore: No implicit Any
+import { APP_DATA } from '../common/constants';
+
+const MinimisedTile = ({ setMinimised }: { setMinimised: (value: boolean) => void }) => {
+  return (
+    <Flex align="center" css={{ gap: '$6', r: '$1', bg: '$surface_default', p: '$4', color: '$on_surface_high' }}>
+      <AudioVideoToggle hideOptions={true} />
+      <Text>You</Text>
+      <IconButton
+        className="__cancel-drag-event"
+        onClick={() => setMinimised(false)}
+        css={{ bg: 'transparent', border: 'transparent' }}
+      >
+        <ExpandIcon />
+      </IconButton>
+    </Flex>
+  );
+};
+
+const insetHeightPx = 180;
+const insetMaxWidthPx = 240;
+const defaultMobileAspectRatio = 9 / 16;
+const desktopAspectRatio = 1 / defaultMobileAspectRatio;
+
+export const InsetTile = () => {
+  const isMobile = useMedia(cssConfig.media.md);
+  const isLandscape = useMedia(cssConfig.media.ls);
+  const localPeer = useHMSStore(selectLocalPeer);
+  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
+  const videoTrack = useHMSStore(selectVideoTrackByID(localPeer?.videoTrack));
+  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
+  const videoTileProps = useVideoTileContext();
+  let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
+  if (videoTrack?.width && videoTrack?.height && !isMobile) {
+    aspectRatio = videoTrack.width / videoTrack.height;
+  }
+  let height = insetHeightPx;
+  let width = height * aspectRatio;
+  // Convert to 16/9 in landscape mode with a max width of 240
+  if (isLandscape && width > insetMaxWidthPx) {
+    width = 240;
+    height = width / aspectRatio;
+  }
+
+  const nodeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const node = nodeRef.current;
+    if (!node || !window.ResizeObserver) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.target === node.parentElement) {
+          // reset to original position on resize
+          node.style.transform = `translate(0,0)`;
+        }
+      });
+    });
+    node.parentElement && resizeObserver.observe(node.parentElement);
+    return () => {
+      node?.parentElement && resizeObserver?.unobserve(node.parentElement);
+      resizeObserver?.disconnect();
+    };
+  }, []);
+
+  if (!isAllowedToPublish.video && !isAllowedToPublish.audio) {
+    return null;
+  }
+
+  return (
+    <Draggable bounds="parent" nodeRef={nodeRef} cancel=".__cancel-drag-event">
+      <Box
+        ref={nodeRef}
+        css={{
+          position: 'absolute',
+          bottom: 0,
+          right: 0,
+          zIndex: 11,
+          boxShadow: '0 0 8px 0 rgba(0,0,0,0.3)',
+          r: '$2',
+          ...(!minimised
+            ? {
+                aspectRatio: aspectRatio,
+                h: height,
+              }
+            : {}),
+        }}
+      >
+        {minimised ? (
+          <MinimisedTile setMinimised={setMinimised} />
+        ) : (
+          <VideoTile
+            peerId={localPeer?.id}
+            trackid={localPeer?.videoTrack}
+            rootCSS={{
+              size: '100%',
+              padding: 0,
+            }}
+            width={width}
+            height={height}
+            containerCSS={{ background: '$surface_default' }}
+            canMinimise
+            isDragabble
+            {...videoTileProps}
+          />
+        )}
+      </Box>
+    </Draggable>
+  );
+};

package/src/Prebuilt/components/{MoreSettings/SplitComponents/DesktopLeaveRoom.jsx → Leave/DesktopLeaveRoom.tsx}

@@ -1,31 +1,34 @@
 import React, { Fragment, useState } from 'react';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { ExitIcon, StopIcon, VerticalMenuIcon } from '@100mslive/react-icons';
-import { Dropdown } from '../../../../Dropdown';
-import { Box, Flex } from '../../../../Layout';
-import { Dialog } from '../../../../Modal';
-import { Tooltip } from '../../../../Tooltip';
-import { EndSessionContent } from '../../EndSessionContent';
-import { LeaveCard } from '../../LeaveCard';
-import { useDropdownList } from '../../hooks/useDropdownList';
-import { useShowStreamingUI } from '../../../common/hooks';
+import { Dropdown } from '../../../Dropdown';
+import { Box, Flex } from '../../../Layout';
+import { Dialog } from '../../../Modal';
+import { Tooltip } from '../../../Tooltip';
+import { EndSessionContent } from './EndSessionContent';
+import { LeaveIconButton, MenuTriggerButton } from './LeaveAtoms';
+import { LeaveCard } from './LeaveCard';
+import { LeaveSessionContent } from './LeaveSessionContent';
+// @ts-ignore: No implicit Any
+import { useDropdownList } from '../hooks/useDropdownList';
 
 export const DesktopLeaveRoom = ({
-  menuTriggerButton: MenuTriggerButton,
-  leaveIconButton: LeaveIconButton,
   leaveRoom,
-  stopStream,
+  screenType,
+}: {
+  leaveRoom: (args: { endstream: boolean }) => void;
+  screenType: keyof ConferencingScreen;
 }) => {
   const [open, setOpen] = useState(false);
+  const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
   const [showEndStreamAlert, setShowEndStreamAlert] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
-  const showStreamingUI = useShowStreamingUI();
+  const showStream = permissions?.hlsStreaming && isStreamingOn;
 
-  const showStream = showStreamingUI && isStreamingOn;
-
-  useDropdownList({ open, name: 'LeaveRoom' });
+  useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: 'LeaveRoom' });
 
   if (!permissions || !isConnected) {
     return null;
@@ -36,14 +39,19 @@ export const DesktopLeaveRoom = ({
       {permissions.hlsStreaming ? (
         <Flex>
           <LeaveIconButton
-            variant="danger"
             key="LeaveRoom"
             data-testid="leave_room_btn"
             css={{
               borderTopRightRadius: 0,
               borderBottomRightRadius: 0,
             }}
-            onClick={leaveRoom}
+            onClick={() => {
+              if (screenType === 'hls_live_streaming') {
+                setShowLeaveRoomAlert(true);
+              } else {
+                leaveRoom({ endstream: false });
+              }
+            }}
           >
             <Tooltip title="Leave Room">
               <Box>
@@ -60,12 +68,20 @@ export const DesktopLeaveRoom = ({
                 },
               }}
             >
-              <MenuTriggerButton variant="danger" data-testid="leave_end_dropdown_trigger">
+              <MenuTriggerButton data-testid="leave_end_dropdown_trigger">
                 <VerticalMenuIcon />
               </MenuTriggerButton>
             </Dropdown.Trigger>
             <Dropdown.Content css={{ p: 0, w: '$100' }} alignOffset={-50} sideOffset={10}>
-              <Dropdown.Item css={{ bg: '$surface_default' }} onClick={leaveRoom} data-testid="just_leave_btn">
+              <Dropdown.Item
+                css={{
+                  bg: '$surface_dim',
+                  color: '$on_surface_low',
+                  '&:hover': { bg: '$surface_default', color: '$on_surface_high' },
+                }}
+                onClick={() => leaveRoom({ endstream: false })}
+                data-testid="just_leave_btn"
+              >
                 <LeaveCard
                   title={showStream ? 'Leave Stream' : 'Leave Session'}
                   subtitle={`Others will continue after you leave. You can join the ${
@@ -73,14 +89,20 @@ export const DesktopLeaveRoom = ({
                   } again.`}
                   bg=""
                   titleColor="$on_surface_high"
-                  subtitleColor="$on_surface_low"
                   icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
-                  onClick={leaveRoom}
+                  onClick={() => leaveRoom({ endstream: false })}
                   css={{ p: 0 }}
                 />
               </Dropdown.Item>
               {isStreamingOn && permissions?.hlsStreaming ? (
-                <Dropdown.Item css={{ bg: '$alert_error_dim' }} data-testid="end_room_btn">
+                <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 ${
@@ -88,7 +110,6 @@ export const DesktopLeaveRoom = ({
                     } will end for everyone. You can't undo this action.`}
                     bg=""
                     titleColor="$alert_error_brighter"
-                    subtitleColor="$alert_error_bright"
                     icon={<StopIcon height={24} width={24} />}
                     onClick={() => {
                       setOpen(false);
@@ -102,7 +123,17 @@ export const DesktopLeaveRoom = ({
           </Dropdown.Root>
         </Flex>
       ) : (
-        <LeaveIconButton onClick={leaveRoom} variant="danger" key="LeaveRoom" data-testid="leave_room_btn">
+        <LeaveIconButton
+          onClick={() => {
+            if (screenType === 'hls_live_streaming') {
+              setShowLeaveRoomAlert(true);
+            } else {
+              leaveRoom({ endstream: false });
+            }
+          }}
+          key="LeaveRoom"
+          data-testid="leave_room_btn"
+        >
           <Tooltip title="Leave Room">
             <Box>
               <ExitIcon style={{ transform: 'rotate(180deg)' }} />
@@ -117,13 +148,24 @@ export const DesktopLeaveRoom = ({
           <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
             <EndSessionContent
               setShowEndStreamAlert={setShowEndStreamAlert}
-              stopStream={stopStream}
               leaveRoom={leaveRoom}
+              isStreamingOn={isStreamingOn}
               isModal
             />
           </Dialog.Content>
         </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}
     </Fragment>
   );
 };

package/src/Prebuilt/components/{EndSessionContent.jsx → Leave/EndSessionContent.tsx}

@@ -1,12 +1,20 @@
 import React from 'react';
 import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../Button';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
-import { useShowStreamingUI } from '../common/hooks';
+import { Button } from '../../../Button';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
 
-export const EndSessionContent = ({ setShowEndStreamAlert, stopStream, leaveRoom, isModal = false }) => {
-  const showStreamingUI = useShowStreamingUI();
+export const EndSessionContent = ({
+  setShowEndStreamAlert,
+  leaveRoom,
+  isModal = false,
+  isStreamingOn = false,
+}: {
+  setShowEndStreamAlert: (value: boolean) => void;
+  leaveRoom: (args: { endstream: boolean }) => void;
+  isModal?: boolean;
+  isStreamingOn: boolean;
+}) => {
   return (
     <Box>
       <Flex
@@ -18,7 +26,7 @@ export const EndSessionContent = ({ setShowEndStreamAlert, stopStream, leaveRoom
       >
         <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />
         <Text variant="lg" css={{ color: 'inherit', fontWeight: '$semiBold' }}>
-          End {showStreamingUI ? 'Stream' : 'Session'}
+          End {isStreamingOn ? 'Stream' : 'Session'}
         </Text>
         {isModal ? null : (
           <Box css={{ color: '$on_surface_high', ml: 'auto' }} onClick={() => setShowEndStreamAlert(false)}>
@@ -27,7 +35,7 @@ export const EndSessionContent = ({ setShowEndStreamAlert, stopStream, leaveRoom
         )}
       </Flex>
       <Text variant="sm" css={{ color: '$on_surface_medium', mb: '$8', mt: '$4' }}>
-        The {showStreamingUI ? 'stream' : 'session'} will end for everyone. You can't undo this action.
+        The {isStreamingOn ? 'stream' : 'session'} will end for everyone. You can't undo this action.
       </Text>
       <Flex align="center" justify="between" css={{ w: '100%', gap: '$8' }}>
         <Button
@@ -42,14 +50,13 @@ export const EndSessionContent = ({ setShowEndStreamAlert, stopStream, leaveRoom
           variant="danger"
           css={{ w: '100%' }}
           onClick={async () => {
-            await stopStream();
-            leaveRoom();
+            await leaveRoom({ endstream: true });
             setShowEndStreamAlert(false);
           }}
           id="stopStream"
           data-testid="stop_stream_btn"
         >
-          End {showStreamingUI ? 'Stream' : 'Session'}
+          End {isStreamingOn ? 'Stream' : 'Session'}
         </Button>
       </Flex>
     </Box>

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

@@ -0,0 +1,26 @@
+import { IconButton } from '../../../IconButton';
+import { styled } from '../../../Theme';
+
+export const LeaveIconButton = styled(IconButton, {
+  color: '$on_primary_high',
+  h: '$14',
+  px: '$4',
+  r: '$1',
+  bg: '$alert_error_default',
+  '&:not([disabled]):hover': {
+    bg: '$alert_error_bright',
+  },
+  '&:not([disabled]):active': {
+    bg: '$alert_error_default',
+  },
+  '@md': {
+    mx: 0,
+  },
+});
+
+export const MenuTriggerButton = styled(LeaveIconButton, {
+  borderLeft: '1px solid $alert_error_dim',
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+  px: '$2',
+});