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

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/Components/Footer/Components/OptionButton.tsx

@@ -20,6 +20,9 @@ import {
   Box,
   Chip,
   Typography,
+  Collapse,
+  RadioGroup,
+  Radio,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import GeneralSettingsDialog from './GeneralSettingsDialog.tsx';
@@ -138,9 +141,6 @@ function OptionButton(props: OptionButtonProps) {
   const [diagnosticDialogOpen, setDiagnosticDialogOpen] = React.useState<boolean>(false);
   const [generalSettingsDialogOpen, setGeneralSettingsDialogOpen] = React.useState<boolean>(false);
   const [recordingModalOpen, setRecordingModalOpen] = React.useState<boolean>(false);
-  const [recordSeparately, setRecordSeparately] = React.useState<boolean>(() => {
-    return localStorage.getItem('recordSeparately') === 'true';
-  });
   const [localRecordingChecked, setLocalRecordingChecked] = React.useState<boolean>(() => {
     return localStorage.getItem('localRecordingChecked') === 'true';
   });
@@ -149,10 +149,9 @@ function OptionButton(props: OptionButtonProps) {
       return localStorage.getItem('serverSideRecordingChecked') === 'true';
     },
   );
-
-  React.useEffect(() => {
-    localStorage.setItem('recordSeparately', String(recordSeparately));
-  }, [recordSeparately]);
+  const [serverRecordingMode, setServerRecordingMode] = React.useState<'grid' | 'separate'>(() => {
+    return localStorage.getItem('serverRecordingMode') === 'separate' ? 'separate' : 'grid';
+  });
 
   React.useEffect(() => {
     localStorage.setItem('localRecordingChecked', String(localRecordingChecked));
@@ -161,6 +160,10 @@ function OptionButton(props: OptionButtonProps) {
   React.useEffect(() => {
     localStorage.setItem('serverSideRecordingChecked', String(serverSideRecordingChecked));
   }, [serverSideRecordingChecked]);
+
+  React.useEffect(() => {
+    localStorage.setItem('serverRecordingMode', serverRecordingMode);
+  }, [serverRecordingMode]);
   const [_hovered, setHovered] = React.useState<boolean>(false);
   const theme = useTheme();
   const themeContext = React.useContext(ThemeContext);
@@ -294,13 +297,8 @@ function OptionButton(props: OptionButtonProps) {
   };
 
   const handleRecordingConfirm = (): void => {
-    // Recording each participant separately is itself a server-side capability,
-    // so it must enable server recording even if "Cloud recording" wasn't checked.
-    props?.startRecord?.(
-      recordSeparately,
-      serverSideRecordingChecked || recordSeparately,
-      localRecordingChecked,
-    );
+    const recordSeparately = serverSideRecordingChecked && serverRecordingMode === 'separate';
+    props?.startRecord?.(recordSeparately, serverSideRecordingChecked, localRecordingChecked);
     if (localRecordingChecked && props.startLocalRecording) {
       props.startLocalRecording();
     }
@@ -423,49 +421,55 @@ function OptionButton(props: OptionButtonProps) {
               label={
                 <Box sx={{ pt: 1 }}>
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Typography fontWeight={600}>{t('Grid recording')}</Typography>
+                    <Typography fontWeight={600}>{t('Server-side recording')}</Typography>
                     <Chip label={t('SERVER-SIDE')} size="small" />
                   </Box>
                   <Typography variant="body2" color="text.secondary">
                     {t(
-                      'Records the meeting grid view as a single MP4 file, stored on Red5 Cloud. Best for sharing, long sessions, and high quality regardless of your connection.',
+                      'Recorded on Red5 Cloud as an MP4 file, independent of your device and connection. Best for sharing and long sessions.',
                     )}
                   </Typography>
                 </Box>
               }
             />
-          </Box>
-          <Box
-            sx={{
-              border: '1px solid',
-              borderColor: recordSeparately ? 'error.main' : 'divider',
-              borderRadius: 2,
-              p: 1,
-              mb: 1.5,
-            }}
-          >
-            <FormControlLabel
-              sx={{ alignItems: 'flex-start', width: '100%', m: 0 }}
-              control={
-                <Checkbox
-                  checked={recordSeparately}
-                  onChange={(e) => setRecordSeparately(e.target.checked)}
+            <Collapse in={serverSideRecordingChecked}>
+              <RadioGroup
+                value={serverRecordingMode}
+                onChange={(e) => setServerRecordingMode(e.target.value as 'grid' | 'separate')}
+                sx={{ pl: 4, pr: 1, pb: 0.5 }}
+              >
+                <FormControlLabel
+                  value="grid"
+                  control={<Radio size="small" />}
+                  sx={{ alignItems: 'flex-start', width: '100%', m: 0, mt: 1 }}
+                  label={
+                    <Box>
+                      <Typography fontWeight={500}>{t('Grid recording')}</Typography>
+                      <Typography variant="body2" color="text.secondary">
+                        {t('Records the meeting grid view as a single MP4 file.')}
+                      </Typography>
+                    </Box>
+                  }
                 />
-              }
-              label={
-                <Box sx={{ pt: 1 }}>
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Typography fontWeight={600}>{t('Record participants separately')}</Typography>
-                    <Chip label={t('SERVER-SIDE')} size="small" />
-                  </Box>
-                  <Typography variant="body2" color="text.secondary">
-                    {t(
-                      "Records each participant's audio and video as an independent MP4 file, stored on Red5 Cloud.",
-                    )}
-                  </Typography>
-                </Box>
-              }
-            />
+                <FormControlLabel
+                  value="separate"
+                  control={<Radio size="small" />}
+                  sx={{ alignItems: 'flex-start', width: '100%', m: 0, mt: 1.5 }}
+                  label={
+                    <Box>
+                      <Typography fontWeight={500}>
+                        {t('Record participants separately')}
+                      </Typography>
+                      <Typography variant="body2" color="text.secondary">
+                        {t(
+                          "Records each participant's audio and video as an independent MP4 file.",
+                        )}
+                      </Typography>
+                    </Box>
+                  }
+                />
+              </RadioGroup>
+            </Collapse>
           </Box>
           <Box
             sx={{
@@ -504,7 +508,7 @@ function OptionButton(props: OptionButtonProps) {
           <Button
             onClick={handleRecordingConfirm}
             variant="contained"
-            disabled={!serverSideRecordingChecked && !recordSeparately && !localRecordingChecked}
+            disabled={!serverSideRecordingChecked && !localRecordingChecked}
           >
             {t('Start Recording')}
           </Button>

src/hooks/useRecording.ts

@@ -10,10 +10,15 @@ import { ConferenceClient } from 'red5pro-conference-sdk';
 import { ConferenceEvents } from 'red5pro-conference-sdk';
 import { MediabunnyRecorder } from '../utils/MediabunnyRecorder';
 import { createCompositeStream } from '../utils/compositeStream';
+import { withTimeout, TimeoutError } from '../utils/withTimeout';
 import JSZip from 'jszip';
 import { S3Client } from '@aws-sdk/client-s3';
 import { Upload } from '@aws-sdk/lib-storage';
 
+// Some browsers (notably Safari) can hang indefinitely while flushing WebCodecs
+// encoders on stop(); cap the wait so the UI never gets stuck showing "recording".
+const RECORDER_STOP_TIMEOUT_MS = 15000;
+
 // Type definitions
 type MessageVariant = 'info' | 'success' | 'error' | 'warning';
 
@@ -741,12 +746,20 @@ export const useRecording = (
     }
 
     try {
-      const blob = await mediabunnyRecorderRef.current.stop();
+      const blob = await withTimeout(
+        mediabunnyRecorderRef.current.stop(),
+        RECORDER_STOP_TIMEOUT_MS,
+        'Timed out stopping local recording',
+      );
 
       // Stop the local-only recorder alongside the composite one
       if (localOnlyRecorderRef.current) {
         try {
-          const localOnlyBlob = await localOnlyRecorderRef.current.stop();
+          const localOnlyBlob = await withTimeout(
+            localOnlyRecorderRef.current.stop(),
+            RECORDER_STOP_TIMEOUT_MS,
+            'Timed out stopping local-only recording',
+          );
           if (localOnlyBlob) {
             localOnlyRecordedSegmentsRef.current.push(localOnlyBlob);
           }
@@ -808,7 +821,12 @@ export const useRecording = (
       currentRecordingStreamRef.current = null;
       localStreamRef.current = null;
       if (displayMessageRef.current) {
-        displayMessageRef.current('Failed to stop local recording', 'error');
+        displayMessageRef.current(
+          error instanceof TimeoutError
+            ? 'Stopping local recording took too long and was aborted'
+            : 'Failed to stop local recording',
+          'error',
+        );
       }
       return null;
     }

src/hooks/useVirtualBackground.ts

@@ -4,6 +4,13 @@ import { useState, useCallback, useEffect, useRef, MutableRefObject } from 'reac
 import { getVirtualBackgroundConfigs } from '../utils/conferenceConfig';
 import { VirtualBackgroundTypes } from 'red5pro-conference-sdk';
 import log from 'loglevel';
+import { withTimeout } from '../utils/withTimeout';
+
+// Some browsers (notably Safari, which falls back to an OffscreenCanvas/WASM
+// segmentation pipeline instead of insertable streams) can hang indefinitely
+// when initializing or applying a virtual background. Cap the wait so the UI
+// never gets stuck reporting the effect as enabled when it isn't working.
+const VIRTUAL_BACKGROUND_TIMEOUT_MS = 15000;
 
 // Type definitions
 type VirtualBackgroundType = 'none' | 'blur' | 'slight-blur' | 'color' | 'image';
@@ -152,7 +159,11 @@ export const useVirtualBackground = (
       const status = conferenceClientRef.current.getVirtualBackgroundStatus();
 
       if (!status.isInitialized) {
-        await conferenceClientRef.current.initializeVirtualBackground();
+        await withTimeout(
+          conferenceClientRef.current.initializeVirtualBackground(),
+          VIRTUAL_BACKGROUND_TIMEOUT_MS,
+          'Timed out initializing virtual background',
+        );
         log.log('Virtual background initialized');
         setIsVirtualBackgroundInitialized(true);
       }
@@ -204,7 +215,11 @@ export const useVirtualBackground = (
 
         // Handle disable case
         if (type === VirtualBackgroundTypes.NONE) {
-          await conferenceClientRef.current.disableVirtualBackground();
+          await withTimeout(
+            conferenceClientRef.current.disableVirtualBackground(),
+            VIRTUAL_BACKGROUND_TIMEOUT_MS,
+            'Timed out disabling virtual background',
+          );
           setSelectedBackgroundMode('');
           return true;
         }
@@ -233,14 +248,22 @@ export const useVirtualBackground = (
         }
 
         // Apply the background
-        await conferenceClientRef.current[action](config.type, config.options);
+        await withTimeout(
+          conferenceClientRef.current[action](config.type, config.options),
+          VIRTUAL_BACKGROUND_TIMEOUT_MS,
+          `Timed out applying virtual background (${action})`,
+        );
         setSelectedBackgroundMode(type);
 
         log.log(`Virtual background ${action} successful: ${type}`);
         return true;
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
         log.error('Failed to handle background replacement:', error);
+        // Ensure the UI never reports the effect as enabled when the apply call
+        // hung/failed and the SDK never actually produced the processed frame.
+        setIsVirtualBackgroundEnabled(false);
+        setSelectedBackgroundMode('');
         if (showWarningRef.current) {
           showWarningRef.current('Failed to apply virtual background: ' + errorMessage);
         }

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({

src/utils/MediabunnyRecorder.ts

@@ -149,9 +149,6 @@ export class MediabunnyRecorder {
         this.recordedBlob = new Blob([this.target.buffer], { type: 'video/mp4' });
       }
 
-      this._isRecording = false;
-      this._isPaused = false;
-
       if (this.onstop && this.recordedBlob) {
         this.onstop(this.recordedBlob);
       }
@@ -163,6 +160,10 @@ export class MediabunnyRecorder {
       }
       throw error;
     } finally {
+      // Reset regardless of outcome so callers never see a stuck "recording" state
+      // if finalize() throws or is abandoned via a timeout.
+      this._isRecording = false;
+      this._isPaused = false;
       this.cleanup();
     }
   }

src/utils/withTimeout.ts

@@ -0,0 +1,27 @@
+/**
+ * Races a promise against a timeout so a hung Safari media API call
+ * (WebCodecs encoder flush, WASM/OffscreenCanvas segmentation, etc.)
+ * can't leave callers awaiting forever.
+ */
+export class TimeoutError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'TimeoutError';
+  }
+}
+
+export function withTimeout<T>(promise: Promise<T>, ms: number, message: string): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    const timer = setTimeout(() => reject(new TimeoutError(message)), ms);
+    promise.then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      (error) => {
+        clearTimeout(timer);
+        reject(error);
+      },
+    );
+  });
+}