Merge branch 'epic/AC-DC' into TTS-269

Author: Void-Spectra

src/Components/ExternalStreamsDrawer.tsx

@@ -13,14 +13,15 @@ import {
   ListItemText,
   ListItemSecondaryAction,
   CircularProgress,
+  Tooltip,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import CloseDrawerButton from './DrawerButton';
 import { getRed5DrawerStyle } from '../styles/themeUtil';
 import { SvgIcon } from './SvgIcon';
 import { ExternalStream } from '../hooks/useExternalStreams';
 
-import { parseMetaData } from '../utils/utils';
+import { parseMetaData, truncateText } from '../utils/utils';
 import { MetaDataKeys } from '../constants/metaDataKeys';
 
 interface ExternalStreamsDrawerProps {
@@ -179,10 +180,12 @@ const ExternalStreamsDrawer = React.memo<ExternalStreamsDrawerProps>((props) =>
                       },
                     }}
                   >
-                    <ListItemText
-                      primary={stream.streamName}
-                      secondary={isJoined ? t('Joined') : null}
-                    />
+                    <Tooltip title={stream.streamName} placement="top">
+                      <ListItemText
+                        primary={truncateText(stream.streamName, 8)}
+                        secondary={isJoined ? t('Joined') : null}
+                      />
+                    </Tooltip>
                     <ListItemSecondaryAction>
                       <Button
                         variant={isJoined ? 'outlined' : 'contained'}

src/pages/LeftTheRoom/LeftTheRoom.tsx

@@ -138,13 +138,13 @@ function LeftTheRoom({
                 )}
 
                 {hasRecording && (
-                  <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, margin: '21px' }}>
+                  <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 2 }}>
                     <Button
                       size="small"
                       color="primary"
                       variant="outlined"
                       onClick={() => downloadLocalRecording?.()}
-                      sx={{ whiteSpace: 'nowrap', width: '100%' }}
+                      sx={{ width: '100%' }}
                     >
                       {t('Download Recording')}
                     </Button>
@@ -155,7 +155,7 @@ function LeftTheRoom({
                         variant="contained"
                         startIcon={<ReplayIcon />}
                         onClick={() => retryUploadLocalRecording?.()}
-                        sx={{ whiteSpace: 'nowrap', width: '100%' }}
+                        sx={{ width: '100%' }}
                       >
                         {t('Retry Upload')}
                       </Button>

src/pages/Meeting/MeetingPage.tsx

@@ -143,6 +143,7 @@ const MeetingPage = React.memo<MeetingPageProps>((props) => {
     props.isMyCamTurnedOff,
     props.isRaiseHand,
     props.currentConferenceClient,
+    props.selectedBackgroundMode,
   ]);
 
   const keyboardShortcuts = useKeyboardShortcuts({