Add recording state

src/components/participantlist/ListPeer.tsx

@@ -11,6 +11,7 @@ import MicUnMutedIcon from '@mui/icons-material/MicNoneOutlined';
 import WebcamIcon from '@mui/icons-material/VideocamOutlined';
 import MoreButton from '../controlbuttons/MoreButton';
 import { roomSessionsActions } from '../../store/slices/roomSessionsSlice';
+import RecordIcon from '../recordicon/RecordIcon';
 
 interface ListPeerProps {
 	peer: Peer;
@@ -75,6 +76,7 @@ const ListPeer = ({ peer, isModerator }: ListPeerProps): JSX.Element => {
 				else dispatch(roomSessionsActions.selectPeer({ sessionId: peer.sessionId, peerId: peer.id }));
 			}}>
 				<PeerAvatar src={peer.picture ?? '/images/buddy.svg'} />
+				{ peer.recording && <RecordIcon color='error' /> }
 				{ peer.raisedHand &&
 					<IconButton
 						disabled={!isModerator || peer.raisedHandInProgress}

src/components/recordicon/RecordIcon.tsx

@@ -0,0 +1,13 @@
+import { styled } from '@mui/material';
+import { memo } from 'react';
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+
+export default memo(styled(FiberManualRecordIcon)({
+	'&': {
+		animation: 'blink 1.5s ease-in-out infinite'
+	},
+	'@keyframes blink': {
+		from: { opacity: 1 },
+		to: { opacity: 0 },
+	}
+}));

src/components/topbar/TopBar.tsx

@@ -2,7 +2,7 @@ import { AppBar, Chip, Toolbar, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useEffect, useState } from 'react';
 import { useAppSelector, usePermissionSelector } from '../../store/hooks';
-import { lobbyPeersLengthSelector, roomSessionCreationTimestampSelector } from '../../store/selectors';
+import { lobbyPeersLengthSelector, roomSessionCreationTimestampSelector, someoneIsRecordingSelector } from '../../store/selectors';
 import edumeetConfig from '../../utils/edumeetConfig';
 import { permissions } from '../../utils/roles';
 import LobbyButton from '../controlbuttons/LobbyButton';
@@ -13,6 +13,7 @@ import SettingsButton from '../controlbuttons/SettingsButton';
 import LeaveButton from '../textbuttons/LeaveButton';
 import { formatDuration } from '../../utils/formatDuration';
 import LogoutButton from '../controlbuttons/LogoutButton';
+import RecordIcon from '../recordicon/RecordIcon';
 
 interface TopBarProps {
 	fullscreenEnabled: boolean;
@@ -77,6 +78,7 @@ const TopBar = ({ fullscreenEnabled, fullscreen, onFullscreen }: TopBarProps): R
 	const roomCreationTimestamp = useAppSelector(roomSessionCreationTimestampSelector);
 	const [ meetingDuration, setMeetingDuration ] = useState<number>(0);
 	const loggedIn = useAppSelector((state) => state.permissions.loggedIn);
+	const someoneIsRecording = useAppSelector(someoneIsRecordingSelector);
 
 	useEffect(() => {
 		if (roomCreationTimestamp) {
@@ -111,6 +113,7 @@ const TopBar = ({ fullscreenEnabled, fullscreen, onFullscreen }: TopBarProps): R
 				</TopBarDiv>
 				<TopBarDiv grow={1} />
 				<TopBarDiv marginRight={1}>
+					{ someoneIsRecording && <RecordIcon color='error' /> }
 					{ fullscreenEnabled && <FullscreenButton type='iconbutton' fullscreen={fullscreen} onClick={onFullscreen} /> }
 					<SettingsButton type='iconbutton' />
 					{ canLock && <LockButton type='iconbutton' /> }

src/store/actions/recordingActions.tsx

@@ -30,7 +30,7 @@ let mimeType: string;
 export const startRecording = (): AppThunk<Promise<void>> => async (
 	dispatch,
 	getState,
-	{ mediaService }
+	{ mediaService, signalingService }
 ) => {
 	mimeType = getState().settings.preferredRecorderMimeType;
 
@@ -118,6 +118,8 @@ export const startRecording = (): AppThunk<Promise<void>> => async (
 		recorderStream = new MediaStream([ mixedAudioTrack, screenVideotrack ]);
 		recorder = new MediaRecorder(recorderStream, { mimeType });
 
+		signalingService.notify('recording', { recording: true });
+
 		recorder.addEventListener('error', (event) => {
 			logger.error('recording.error', event);
 
@@ -144,26 +146,24 @@ export const startRecording = (): AppThunk<Promise<void>> => async (
 	}
 };
 
-export const stopRecording = (): AppThunk<Promise<void>> => async (dispatch) => {
+export const stopRecording = (): AppThunk<void> => (
+	dispatch,
+	_getState,
+	{ signalingService }
+) => {
 	logger.debug('stopRecording()');
 
+	signalingService.notify('recording', { recording: false });
+
 	try {
 		recorder?.stop();
 		screenStream?.getTracks().forEach((track) => track.stop());
 		recorderStream?.getTracks().forEach((track) => track.stop());
 		audioContext?.close();
 		audioDestination?.disconnect();
-
-		// Give some time for last recording chunks to come through
-		setTimeout(async () => {
-			try {
-				await writableStream?.close();
-			} catch (error) {
-				logger.error('stopRecorder() [error:%o]', error);
-			}
-		}, RECORDING_SLICE_SIZE);
+		writableStream?.close();
 	} catch (error) {
-		logger.error('stopRecorder() [error:%o]', error);
+		logger.error('stopRecording() [error:%o]', error);
 	}
 
 	dispatch(roomActions.updateRoom({ recording: false }));

src/store/middlewares/peerMiddleware.tsx

@@ -36,7 +36,8 @@ const createPeerMiddleware = ({
 									displayName,
 									picture,
 									raisedHand,
-									raisedHandTimestamp
+									raisedHandTimestamp,
+									recording,
 								} = notification.data;
 
 								dispatch(peersActions.addPeer({
@@ -46,6 +47,7 @@ const createPeerMiddleware = ({
 									picture,
 									raisedHand,
 									raisedHandTimestamp,
+									recording,
 									transcripts: [],
 								}));
 
@@ -70,13 +72,15 @@ const createPeerMiddleware = ({
 
 							case 'changeDisplayName':
 							case 'changePicture':
+							case 'recording':
 							case 'raisedHand': {
 								const {
 									peerId,
 									displayName,
 									picture,
 									raisedHand,
-									raisedHandTimestamp
+									raisedHandTimestamp,
+									recording,
 								} = notification.data;
 
 								dispatch(
@@ -85,7 +89,8 @@ const createPeerMiddleware = ({
 										displayName,
 										picture,
 										raisedHand,
-										raisedHandTimestamp
+										raisedHandTimestamp,
+										recording,
 									})
 								);
 

src/store/selectors.tsx

@@ -24,6 +24,7 @@ const hideNonVideoSelector: Selector<boolean> = (state) => state.settings.hideNo
 const hideSelfViewSelector: Selector<boolean> = (state) => state.settings.hideSelfView;
 const devicesSelector: Selector<MediaDevice[]> = (state) => state.me.devices;
 const headlessSelector: Selector<boolean | undefined> = (state) => state.room.headless;
+const recordingSelector: Selector<boolean | undefined> = (state) => state.room.recording;
 
 export const isMobileSelector: Selector<boolean> = (state) => state.me.browser.platform === 'mobile';
 
@@ -338,6 +339,12 @@ export const raisedHandsSelector = createSelector(
 	(peers) => peers.reduce((a, b) => (a + (b.raisedHand ? 1 : 0)), 0)
 );
 
+export const someoneIsRecordingSelector = createSelector(
+	sessionIdPeersSelector,
+	recordingSelector,
+	(peers, recording) => recording || peers.some((peer) => peer.recording)
+);
+
 /**
  * Returns the one state consumer that is currently in fullscreen
  * in the main window.

src/store/slices/peersSlice.tsx

@@ -17,6 +17,7 @@ export interface Peer {
 	raisedHandInProgress?: boolean;
 	raisedHand?: boolean;
 	raisedHandTimestamp?: number;
+	recording?: boolean;
 	transcripts?: Transcript[];
 }
 
@@ -61,7 +62,8 @@ const peersSlice = createSlice({
 					kickInProgress,
 					raisedHandInProgress,
 					raisedHand,
-					raisedHandTimestamp
+					raisedHandTimestamp,
+					recording,
 				} = action.payload;
 
 				if (displayName)
@@ -88,6 +90,8 @@ const peersSlice = createSlice({
 					peer.raisedHand = raisedHand;
 				if (raisedHandTimestamp !== undefined)
 					peer.raisedHandTimestamp = raisedHandTimestamp;
+				if (recording !== undefined)
+					peer.recording = recording;
 			}
 		}),
 		updateTranscript: ((state, action: PayloadAction<PeerTranscript>) => {
@@ -136,4 +140,4 @@ const peersSlice = createSlice({
 });
 
 export const peersActions = peersSlice.actions;
-export default peersSlice;
+export default peersSlice;