P2P update

Have now moved the decision making of P2P producing down to the media level instead of inside the thunks. We might want to clone tracks instead of sharing one track among all the producers.

.eslintrc

@@ -1,6 +1,6 @@
 {
 	"extends": [ "plugin:@typescript-eslint/recommended" ],
-	"plugins": ["react", "@typescript-eslint" ],
+	"plugins": [ "react", "@typescript-eslint" ],
 	"env": {
 		"browser": true,
 		"es6": true
@@ -155,4 +155,4 @@
 		"valid-typeof": 2,
 		"yoda": 2
 	}
-}
+}

Dockerfile

@@ -5,8 +5,6 @@ WORKDIR /app
 COPY . .
 
 RUN yarn install --frozen-lockfile
-RUN yarn add --dev eslint-config-react-app
-RUN yarn add --dev eslint-plugin-import
 RUN yarn build
 
 FROM steebchen/nginx-spa:stable

src/components/noiseslider/NoiseSlider.tsx

@@ -6,8 +6,6 @@ import { settingsActions } from '../../store/slices/settingsSlice';
 import { ServiceContext } from '../../store/store';
 import { VolumeWatcher } from '../../utils/volumeWatcher';
 import { noiseSuppressionLabel } from '../translated/translatedComponents';
-import type { Producer } from 'mediasoup-client/lib/types';
-import type { Producer as PeerProducer } from 'ortc-p2p/src/types';
 
 const StyledSlider = styled(Slider)(() => ({
 	'.MuiSlider-root': {
@@ -43,14 +41,10 @@ const NoiseSlider = (): JSX.Element => {
 	const [ sliderValue, setSliderValue ] = useState<number>(noiseThreshold);
 
 	useEffect(() => {
-		let producer: Producer | PeerProducer | undefined;
 		let volumeWatcher: VolumeWatcher | undefined;
 
 		if (micEnabled)
-			producer = mediaService.producers['mic'];
-
-		if (producer)
-			volumeWatcher = producer.appData.volumeWatcher as VolumeWatcher | undefined;
+			volumeWatcher = mediaService.mediaSenders['mic'].volumeWatcher;
 
 		const onVolumeChange = ({ volume }: { volume: number }): void => {
 			setVolume(volume);
@@ -63,7 +57,7 @@ const NoiseSlider = (): JSX.Element => {
 		};
 	}, []);
 
-	const handleSliderChange = (event: Event, value: number | number[]): void => {
+	const handleSliderChange = (_event: Event, value: number | number[]): void => {
 		setSliderValue(value as number);
 	};
 
@@ -72,14 +66,10 @@ const NoiseSlider = (): JSX.Element => {
 		value: number | number[]
 	): void => {
 		if (sliderValue !== noiseThreshold) {
-			let producer: Producer | PeerProducer | undefined;
 			let hark: Harker | undefined;
 
 			if (micEnabled)
-				producer = mediaService.producers['mic'];
-
-			if (producer)
-				hark = (producer.appData.volumeWatcher as VolumeWatcher | undefined)?.hark;
+				hark = mediaService.mediaSenders['mic'].volumeWatcher?.hark;
 
 			hark?.setThreshold(value as number);
 			dispatch(settingsActions.setNoiseThreshold(value as number));

src/components/unmutealert/UnmuteAlert.tsx

@@ -2,7 +2,6 @@ import { Alert, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useContext, useEffect, useState } from 'react';
 import { ServiceContext } from '../../store/store';
-import { VolumeWatcher } from '../../utils/volumeWatcher';
 import { mutedPTTLabel } from '../translated/translatedComponents';
 import { useAppSelector } from '../../store/hooks';
 
@@ -31,11 +30,7 @@ const UnmuteAlert = (): JSX.Element => {
 	const audioMuted = useAppSelector((state) => state.me.audioMuted);
 
 	useEffect(() => {
-		const producer = mediaService.producers['mic'];
-		let volumeWatcher: VolumeWatcher | undefined;
-
-		if (producer)
-			volumeWatcher = producer.appData.volumeWatcher as VolumeWatcher;
+		const volumeWatcher = mediaService.mediaSenders['mic'].volumeWatcher;
 
 		const onVolumeChange = ({ scaledVolume }: { scaledVolume: number }): void => {
 			setSpeaking(Boolean(scaledVolume));

src/components/videoview/VideoView.tsx

@@ -61,12 +61,12 @@ const VideoView = ({
 
 	useEffect(() => {
 		let media: Consumer | PeerConsumer | undefined;
-		let track: MediaStreamTrack | undefined;
+		let track: MediaStreamTrack | null = null;
 
 		if (previewTrack)
 			track = mediaService.previewWebcamTrack;
 		else if (source)
-			track = mediaService.tracks[source];
+			track = mediaService.mediaSenders[source].track;
 		else if (consumer)
 			media = mediaService.getConsumer(consumer.id);
 

src/components/volume/Volume.tsx

@@ -1,11 +1,9 @@
 import { styled } from '@mui/material';
 import type { Consumer } from 'mediasoup-client/lib/Consumer';
-import type { Producer } from 'mediasoup-client/lib/Producer';
 import { useContext, useEffect, useState } from 'react';
 import { StateConsumer } from '../../store/slices/consumersSlice';
 import { ServiceContext } from '../../store/store';
 import { VolumeWatcher } from '../../utils/volumeWatcher';
-import type { Producer as PeerProducer } from 'ortc-p2p/src/types';
 import type { Consumer as PeerConsumer } from 'ortc-p2p/src/types';
 
 type VolumeBarProps = {
@@ -50,13 +48,13 @@ const Volume = ({
 	const [ volume, setVolume ] = useState<number>(0);
 
 	useEffect(() => {
-		let media: Consumer | PeerConsumer | Producer | PeerProducer | undefined;
+		let media: Consumer | PeerConsumer | undefined;
 		let volumeWatcher: VolumeWatcher | undefined;
 
 		if (consumer)
 			media = mediaService.getConsumer(consumer.id);
 		else
-			media = mediaService.producers['mic'];
+			volumeWatcher = mediaService.mediaSenders['mic'].volumeWatcher;
 
 		if (media)
 			volumeWatcher = media.appData.volumeWatcher as VolumeWatcher | undefined;