move volume indicator into the join dialog video box + remove outside…

… volume component
edumeet · Jan 8, 2025 · 71ddd76 · 71ddd76
1 parent 3cc418e
commit 71ddd76
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/src/components/mediapreview/MediaPreview.tsx b/src/components/mediapreview/MediaPreview.tsx
@@ -7,6 +7,7 @@ import MediaControls from '../mediacontrols/MediaControls';
 import VideoBox from '../videobox/VideoBox';
 import VideoView from '../videoview/VideoView';
 import { stopPreviewMic, stopPreviewWebcam, updatePreviewMic, updatePreviewWebcam } from '../../store/actions/mediaActions';
+import Volume from '../volume/Volume';
 
 interface MediaPreviewProps {
 	withControls?: boolean;
@@ -32,6 +33,8 @@ const MediaPreview = ({
 	const audioDevice = useAppSelector((state) => state.settings.selectedAudioDevice);
 	const videoDevice = useAppSelector((state) => state.settings.selectedVideoDevice);
 	const contain = useAppSelector((state) => state.settings.videoContainEnabled);
+	// We do not send it so the state is different on join dialog.
+	const micEnabled = useAppSelector((state) => state.me.previewMicTrackId);
 
 	useEffect(() => {
 		if (startAudio) dispatch(updatePreviewMic({ newDeviceId: audioDevice, updateSelection }));
@@ -67,9 +70,12 @@ const MediaPreview = ({
 							offColor='error'
 							disabledColor='default'
 						/>
+
 					</MediaControls>
 				)}
 				{ previewWebcamTrackId && <VideoView contain={contain} mirrored previewTrack /> }
+				{ micEnabled && <Volume /> }
+
 			</VideoBox>
 		</>
 	);

diff --git a/src/components/volume/Volume.tsx b/src/components/volume/Volume.tsx
@@ -5,6 +5,7 @@ import { StateConsumer } from '../../store/slices/consumersSlice';
 import { ServiceContext } from '../../store/store';
 import { VolumeWatcher } from '../../utils/volumeWatcher';
 import type { Consumer as PeerConsumer } from 'ortc-p2p/src/types';
+import hark from 'hark';
 
 type VolumeBarProps = {
 	small: number;
@@ -53,8 +54,23 @@ const Volume = ({
 
 		if (consumer)
 			media = mediaService.getConsumer(consumer.id);
-		else
+		else if (mediaService.mediaSenders['mic'].volumeWatcher)
 			volumeWatcher = mediaService.mediaSenders['mic'].volumeWatcher;
+		else if (mediaService.previewMicTrack) {
+			// We do not send it so the state is different on join dialog.
+			const harkStream = new MediaStream();
+
+			harkStream.addTrack(mediaService.previewMicTrack.clone());
+
+			const micHark = hark(harkStream, {
+				play: false,
+				interval: 50,
+				threshold: -60,
+				history: 100
+			});
+
+			volumeWatcher = new VolumeWatcher({ hark: micHark });
+		}
 
 		if (media)
 			volumeWatcher = media.appData.volumeWatcher as VolumeWatcher | undefined;
@@ -68,7 +84,7 @@ const Volume = ({
 		return () => {
 			volumeWatcher?.off('volumeChange', onVolumeChange);
 		};
-	}, [ consumer ]);
+	}, [ consumer, mediaService.previewMicTrack ]);
 
 	// Props workaround for: https://github.com/mui/material-ui/issues/25925
 	return (

diff --git a/src/views/join/Join.tsx b/src/views/join/Join.tsx
@@ -17,7 +17,6 @@ import { meActions } from '../../store/slices/meSlice';
 import AudioOutputChooser from '../../components/devicechooser/AudioOutputChooser';
 import { canSelectAudioOutput } from '../../store/selectors';
 import edumeetConfig from '../../utils/edumeetConfig';
-import MicVolume from '../../components/volume/MicVolume';
 
 interface JoinProps {
 	roomId: string;
@@ -73,8 +72,7 @@ const Join = ({ roomId }: JoinProps): React.JSX.Element => {
 					<AudioInputChooser />
 					{ showAudioOutputChooser && <AudioOutputChooser /> }
 					<VideoInputChooser />
-					<MicVolume />
-
+
 					<ChooserDiv>
 						<TextInputField
 							label={yourNameLabel()}