@100mslive/roomkit-react 0.1.4 → 0.1.6-alpha.0

package/src/Prebuilt/components/HMSVideo/PlayButton.jsx

@@ -6,7 +6,7 @@ export const PlayButton = ({ onClick, isPaused }) => {
   return (
     <Tooltip title={isPaused ? 'Play' : 'Pause'} side="top">
       <IconButton onClick={onClick} data-testid="play_pause_btn">
-        {isPaused ? <PlayIcon width={32} height={32} /> : <PauseIcon width={32} height={32} />}
+        {isPaused ? <PlayIcon width={20} height={20} /> : <PauseIcon width={20} height={20} />}
       </IconButton>
     </Tooltip>
   );

package/src/Prebuilt/components/HMSVideo/VideoTime.jsx

@@ -22,9 +22,9 @@ export const VideoTime = ({ hlsPlayer }) => {
     <Text
       css={{
         minWidth: '$16',
-      }}
-      variant={{
-        '@sm': 'xs',
+        c: '$on_surface_medium',
+        display: 'flex',
+        justifyContent: 'center',
       }}
     >
       {videoTime}

package/src/Prebuilt/components/HMSVideo/VolumeControl.jsx

@@ -1,18 +1,33 @@
 import React, { useState } from 'react';
-import { SpeakerIcon } from '@100mslive/react-icons';
+import { VolumeOneIcon, VolumeTwoIcon, VolumeZeroIcon } from '@100mslive/react-icons';
 import { Flex, Slider } from '../../../';
 
 export const VolumeControl = ({ hlsPlayer }) => {
   const [volume, setVolume] = useState(hlsPlayer?.volume ?? 100);
+  const [showSlider, setShowSlider] = useState(false);
 
   return (
-    <Flex align="center" css={{ color: '$on_primary_high' }}>
-      <SpeakerIcon
-        style={{ cursor: 'pointer' }}
+    <Flex
+      align="center"
+      css={{ color: '$on_primary_high' }}
+      onMouseOver={event => {
+        event.stopPropagation();
+        setShowSlider(true);
+      }}
+      onMouseLeave={event => {
+        event.stopPropagation();
+        setShowSlider(false);
+      }}
+    >
+      <VolumeIcon
+        volume={volume}
         onClick={() => {
-          setVolume(0);
-          if (hlsPlayer) {
-            hlsPlayer.setVolume(0);
+          if (volume > 0) {
+            setVolume(0);
+            hlsPlayer?.setVolume(0);
+          } else {
+            setVolume(100);
+            hlsPlayer?.setVolume(100);
           }
         }}
       />
@@ -23,17 +38,31 @@ export const VolumeControl = ({ hlsPlayer }) => {
           cursor: 'pointer',
           '@sm': { w: '$14' },
           '@xs': { w: '$14' },
+          opacity: showSlider ? '1' : '0',
+          display: showSlider ? '' : 'none',
+          transition: `all .2s ease .5s`,
         }}
         min={0}
         max={100}
         step={1}
         value={[volume]}
         onValueChange={volume => {
-          hlsPlayer.setVolume(volume);
-          setVolume(volume);
+          hlsPlayer.setVolume(volume[0]);
+          setVolume(volume[0]);
         }}
         thumbStyles={{ w: '$6', h: '$6' }}
       />
     </Flex>
   );
 };
+
+const VolumeIcon = ({ volume, onClick }) => {
+  if (volume === 0) {
+    return <VolumeZeroIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />;
+  }
+  return volume < 50 ? (
+    <VolumeOneIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />
+  ) : (
+    <VolumeTwoIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />
+  );
+};

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

@@ -1,17 +1,19 @@
 import React from 'react';
 import { useMedia } from 'react-use';
 import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
-import { config as cssConfig, Flex } from '../../../';
+import { config as cssConfig, Flex } from '../../..';
+// @ts-ignore: No implicit any
 import { Logo, SpeakerTag } from './HeaderComponents';
+// @ts-ignore: No implicit any
 import { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';
+// @ts-ignore: No implicit any
 import { AudioOutputActions, CamaraFlipActions } from './common';
 
-export const ConferencingHeader = () => {
+export const Header = () => {
   const roomState = useHMSStore(selectRoomState);
   const isMobile = useMedia(cssConfig.media.md);
-  const isPreview = roomState === HMSRoomState.Preview;
-  // no header if there in preview
-  if (isPreview) {
+  // Header should be present only inside the call - not in preview, leave room states
+  if (roomState !== HMSRoomState.Connected) {
     return <></>;
   }
   return (
@@ -35,12 +37,12 @@ export const ConferencingHeader = () => {
         }}
       >
         <StreamActions />
-        {isMobile && (
+        {isMobile ? (
           <>
             <CamaraFlipActions />
             <AudioOutputActions />
           </>
-        )}
+        ) : null}
       </Flex>
     </Flex>
   );

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

@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useMedia } from 'react-use';
 import { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';
 import { VolumeOneIcon } from '@100mslive/react-icons';
 import { config as cssConfig, Flex, styled, Text, textEllipsis, VerticalDivider } from '../../../';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
-import { isStreamingKit } from '../../common/utils';
 
 export const SpeakerTag = () => {
   const dominantSpeaker = useHMSStore(selectDominantSpeaker);
@@ -40,9 +39,19 @@ export const Logo = () => {
   const logo = roomLayout?.logo?.url;
   const isMobile = useMedia(cssConfig.media.md);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const [hideImage, setHideImage] = useState(false);
   // Hide logo for now as there is not enough space
-  if (isConnected && isMobile && isStreamingKit()) {
+  if (isConnected && isMobile) {
     return null;
   }
-  return logo ? <LogoImg src={logo} alt="Brand Logo" /> : null;
+  return logo && !hideImage ? (
+    <LogoImg
+      src={logo}
+      alt="Brand Logo"
+      onError={e => {
+        e.target.onerror = null;
+        setHideImage(true);
+      }}
+    />
+  ) : null;
 };

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

@@ -13,13 +13,11 @@ import {
 import { AlertTriangleIcon, CrossIcon, RecordIcon } from '@100mslive/react-icons';
 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';
 import { ToastManager } from '../Toast/ToastManager';
 import { AdditionalRoomState, getRecordingText } from './AdditionalRoomState';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { formatTime } from '../../common/utils';
-import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants';
+import { APP_DATA } from '../../common/constants';
 
 export const LiveStatus = () => {
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
@@ -112,7 +110,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();
@@ -161,62 +158,38 @@ 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) {
+          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);
+        }
+      }}
+    >
+      {recordingStarted ? <Loading size={24} color="currentColor" /> : <RecordIcon />}
+      <Text as="span" css={{ '@md': { display: 'none' }, color: 'currentColor' }}>
+        {recordingStarted ? 'Starting' : 'Start'} Recording
+      </Text>
+    </Button>
   );
 };
 

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

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

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

@@ -39,6 +39,10 @@ const OptionsSection = styled(IconButton, {
 });
 
 export const IconButtonWithOptions = ({
+  disabled = false,
+  onDisabledClick = () => {
+    return;
+  },
   tooltipMessage = '',
   icon,
   options = [],
@@ -47,8 +51,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 +64,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,122 @@
+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';
+// @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 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 aspectRatio =
+    videoTrack?.width && videoTrack?.height
+      ? videoTrack.width / videoTrack.height
+      : isMobile
+      ? defaultMobileAspectRatio
+      : desktopAspectRatio;
+  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}>
+      <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
+          />
+        )}
+      </Box>
+    </Draggable>
+  );
+};

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

@@ -1,31 +1,36 @@
 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: () => void;
+  stopStream: () => Promise<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 +41,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();
+              }
+            }}
           >
             <Tooltip title="Leave Room">
               <Box>
@@ -60,7 +70,7 @@ export const DesktopLeaveRoom = ({
                 },
               }}
             >
-              <MenuTriggerButton variant="danger" data-testid="leave_end_dropdown_trigger">
+              <MenuTriggerButton data-testid="leave_end_dropdown_trigger">
                 <VerticalMenuIcon />
               </MenuTriggerButton>
             </Dropdown.Trigger>
@@ -102,7 +112,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();
+            }
+          }}
+          key="LeaveRoom"
+          data-testid="leave_room_btn"
+        >
           <Tooltip title="Leave Room">
             <Box>
               <ExitIcon style={{ transform: 'rotate(180deg)' }} />
@@ -119,11 +139,23 @@ export const DesktopLeaveRoom = ({
               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,22 @@
 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,
+  stopStream,
+  leaveRoom,
+  isModal = false,
+  isStreamingOn = false,
+}: {
+  setShowEndStreamAlert: (value: boolean) => void;
+  stopStream: () => Promise<void>;
+  leaveRoom: () => void;
+  isModal?: boolean;
+  isStreamingOn: boolean;
+}) => {
   return (
     <Box>
       <Flex
@@ -18,7 +28,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 +37,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
@@ -49,7 +59,7 @@ export const EndSessionContent = ({ setShowEndStreamAlert, stopStream, leaveRoom
           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',
+});