Merge branch 'main' into 4.x-compose

src/components/videoconsumer/VideoConsumer.tsx

@@ -22,9 +22,10 @@ const VideoConsumer = ({
 	consumer,
 	style
 }: VideoConsumerProps): JSX.Element => {
-	const { peerId } = consumer;
+	const { peerId, source } = consumer;
 	const { micConsumer } = usePeerConsumers(peerId);
 	const peer = usePeer(peerId);
+	const contain = source === 'screen';
 
 	const isMobile = useAppSelector(isMobileSelector);
 	const activeSpeaker = useAppSelector(activeSpeakerIdSelector) === peerId;
@@ -37,7 +38,7 @@ const VideoConsumer = ({
 			width={style.width}
 			height={style.height}
 		>
-			<VideoView consumer={consumer} />
+			<VideoView consumer={consumer} contain={contain} />
 			{ micConsumer && <Volume consumer={micConsumer} /> }
 			{ !headless &&
 				<>
@@ -56,4 +57,4 @@ const VideoConsumer = ({
 	);
 };
 
-export default VideoConsumer;
+export default VideoConsumer;

src/services/fileService.tsx

@@ -5,33 +5,39 @@ const logger = new Logger('FileService');
 
 export class FileService {
 	private webTorrent?: WebTorrent.Instance;
-	// private tracker = getTrackerUrl();
+	public tracker?: string;
+	public iceServers: RTCIceServer[] = [];
+	private initialized = false;
 
 	public getTorrent(magnetURI: string) {
 		return this.webTorrent?.get(magnetURI) || undefined;
 	}
 
-	public async init(
-		iceServers?: RTCIceServer[]
-	): Promise<void> {
+	private async init(): Promise<void> {
+		if (this.initialized) return;
+
 		logger.debug('init()');
 
+		this.initialized = true;
+
 		const Torrent = await import('webtorrent');
 
 		this.webTorrent = new Torrent.default({
 			tracker: {
 				rtcConfig: {
-					iceServers: iceServers
+					iceServers: this.iceServers,
 				}
 			},
 		});
 	}
 
 	public async sendFiles(files: FileList): Promise<string> {
+		await this.init();
+
 		return new Promise((resolve) => {
 			this.webTorrent?.seed(
 				files,
-				{ /* TODO: announceList: [ [ this.tracker ] ] */ },
+				this.tracker ? { announceList: [ [ this.tracker ] ] } : undefined,
 				(newTorrent) => resolve(newTorrent.magnetURI)
 			);
 		});

src/services/mediaService.tsx

@@ -93,6 +93,7 @@ export class MediaService extends EventEmitter {
 	private signalingService: SignalingService;
 
 	private mediasoup?: Device;
+	public iceServers: RTCIceServer[] = [];
 	private sendTransport: Transport | undefined;
 	private recvTransport: Transport | undefined;
 	private producers: Map<string, Producer> = new Map();
@@ -620,11 +621,9 @@ export class MediaService extends EventEmitter {
 		dataProducer?.close();
 	}
 
-	public async createTransports(
-		iceServers?: RTCIceServer[]
-	): Promise<{
-		sendTransport: Transport | undefined;
-		recvTransport: Transport | undefined;
+	public async createTransports(): Promise<{
+		sendTransport?: Transport;
+		recvTransport?: Transport;
 	}> {
 		if (!this.mediasoup) {
 			const Mediasoup = await import('mediasoup-client');
@@ -634,13 +633,15 @@ export class MediaService extends EventEmitter {
 
 		try {
 			if (!this.mediasoup.loaded) {
-				const { routerRtpCapabilities } = await this.signalingService.sendRequest('getRouterRtpCapabilities');
+				const { routerRtpCapabilities, iceServers } = await this.signalingService.sendRequest('getRouterRtpCapabilities');
+
+				this.iceServers = iceServers;
 
 				await this.mediasoup.load({ routerRtpCapabilities });
 			}
 
-			this.sendTransport = await this.createTransport('createSendTransport', iceServers);
-			this.recvTransport = await this.createTransport('createRecvTransport', iceServers);
+			this.sendTransport = await this.createTransport('createSendTransport');
+			this.recvTransport = await this.createTransport('createRecvTransport');
 		} catch (error) {
 			logger.error('error on starting mediasoup transports [error:%o]', error);
 
@@ -654,8 +655,7 @@ export class MediaService extends EventEmitter {
 	}
 
 	private async createTransport(
-		creator: 'createSendTransport' | 'createRecvTransport',
-		iceServers?: RTCIceServer[]
+		creator: 'createSendTransport' | 'createRecvTransport'
 	): Promise<Transport> {
 		if (!this.mediasoup) {
 			const Mediasoup = await import('mediasoup-client');
@@ -682,7 +682,7 @@ export class MediaService extends EventEmitter {
 			iceCandidates,
 			dtlsParameters,
 			sctpParameters,
-			iceServers
+			iceServers: this.iceServers,
 		});
 
 		// eslint-disable-next-line no-shadow

src/store/actions/roomActions.tsx

@@ -6,8 +6,7 @@ import { peersActions } from '../slices/peersSlice';
 import { permissionsActions } from '../slices/permissionsSlice';
 import { roomActions } from '../slices/roomSlice';
 import { signalingActions } from '../slices/signalingSlice';
-import { webrtcActions } from '../slices/webrtcSlice';
-import { AppThunk } from '../store';
+import { AppThunk, fileService } from '../store';
 import { updateMic, updateWebcam } from './mediaActions';
 import { initialRoomSession, roomSessionsActions } from '../slices/roomSessionsSlice';
 import { getSignalingUrl } from '../../utils/signalingHelpers';
@@ -53,9 +52,10 @@ export const joinRoom = (): AppThunk<Promise<void>> => async (
 ): Promise<void> => {
 	logger.debug('joinRoom()');
 
-	await mediaService.createTransports(getState().webrtc.iceServers);
-	
+	await mediaService.createTransports();
+
 	if (!mediaService.mediaCapabilities) throw new Error('Media capabilities not set!');
+
 	dispatch(meActions.setMediaCapabilities(mediaService.mediaCapabilities));
 
 	const rtpCapabilities = mediaService.rtpCapabilities;
@@ -77,6 +77,9 @@ export const joinRoom = (): AppThunk<Promise<void>> => async (
 		rtpCapabilities,
 	});
 
+	fileService.tracker = tracker;
+	fileService.iceServers = mediaService.iceServers;
+
 	batch(() => {
 		dispatch(roomActions.setMode(roomMode));
 		dispatch(permissionsActions.setLocked(Boolean(locked)));
@@ -85,7 +88,6 @@ export const joinRoom = (): AppThunk<Promise<void>> => async (
 		dispatch(lobbyPeersActions.addPeers(lobbyPeers));
 		dispatch(roomSessionsActions.addMessages({ sessionId, messages: chatHistory }));
 		dispatch(roomSessionsActions.addFiles({ sessionId, files: fileHistory }));
-		dispatch(webrtcActions.setTracker(tracker));
 
 		if (peers.length < 10) {
 			if (!getState().me.audioMuted) dispatch(updateMic({ start: true }));

src/store/middlewares/filesharingMiddleware.tsx

@@ -1,31 +1,22 @@
 import { Middleware } from '@reduxjs/toolkit';
 import { Logger } from 'edumeet-common';
-import { roomActions } from '../slices/roomSlice';
 import { signalingActions } from '../slices/signalingSlice';
-import { AppDispatch, MiddlewareOptions, RootState } from '../store';
+import { AppDispatch, MiddlewareOptions } from '../store';
 import { roomSessionsActions } from '../slices/roomSessionsSlice';
 
 const logger = new Logger('FilesharingMiddleware');
 
 const createFilesharingMiddleware = ({
-	fileService,
-	signalingService
+	signalingService,
 }: MiddlewareOptions): Middleware => {
 	logger.debug('createFilesharingMiddleware()');
 
 	const middleware: Middleware = ({
-		dispatch, getState
+		dispatch
 	}: {
 		dispatch: AppDispatch,
-		getState: () => RootState
 	}) =>
 		(next) => (action) => {
-			if (roomActions.setState.match(action) && action.payload === 'joined') {
-				const iceServers = getState().webrtc.iceServers;
-
-				fileService.init(iceServers);
-			}
-
 			if (signalingActions.connect.match(action)) {
 				signalingService.on('notification', (notification) => {
 					try {

src/store/middlewares/mediaMiddleware.tsx

@@ -29,7 +29,7 @@ const logger = new Logger('MediaMiddleware');
  * @returns {Middleware} Redux middleware.
  */
 const createMediaMiddleware = ({
-	mediaService
+	mediaService,
 }: MiddlewareOptions): Middleware => {
 	logger.debug('createMediaMiddleware()');
 

src/store/middlewares/roomMiddleware.tsx

@@ -2,7 +2,6 @@ import { Middleware } from '@reduxjs/toolkit';
 import { roomActions } from '../slices/roomSlice';
 import { signalingActions } from '../slices/signalingSlice';
 import { AppDispatch, MiddlewareOptions, RootState } from '../store';
-import { webrtcActions } from '../slices/webrtcSlice';
 import { joinRoom, leaveRoom } from '../actions/roomActions';
 import { batch } from 'react-redux';
 import { setDisplayName, setPicture } from '../actions/meActions';
@@ -39,8 +38,6 @@ const createRoomMiddleware = ({
 								const {
 									sessionId,
 									creationTimestamp,
-									turnServers,
-									rtcStatsOptions,
 									maxActiveVideos,
 									breakoutsEnabled,
 									chatEnabled,
@@ -59,8 +56,6 @@ const createRoomMiddleware = ({
 										...initialRoomSession,
 									}));
 									dispatch(meActions.setSessionId(sessionId));
-									dispatch(webrtcActions.setIceServers(turnServers));
-									dispatch(webrtcActions.setRTCStatsOptions(rtcStatsOptions));
 									dispatch(settingsActions.setMaxActiveVideos(maxActiveVideos));
 									dispatch(roomActions.updateRoom({
 										logo: settings.logo,

src/store/store.tsx

@@ -32,7 +32,6 @@ import roomSlice from './slices/roomSlice';
 import meSlice from './slices/meSlice';
 import consumersSlice from './slices/consumersSlice';
 import signalingSlice from './slices/signalingSlice';
-import webrtcSlice from './slices/webrtcSlice';
 import permissionsSlice from './slices/permissionsSlice';
 import lobbyPeersSlice from './slices/lobbyPeersSlice';
 import settingsSlice from './slices/settingsSlice';
@@ -113,7 +112,6 @@ const reducer = combineReducers({
 	settings: settingsSlice.reducer,
 	signaling: signalingSlice.reducer,
 	ui: uiSlice.reducer,
-	webrtc: webrtcSlice.reducer,
 	recording: recordingSlice.reducer,
 });
 

src/utils/deviceInfo.tsx

@@ -11,15 +11,12 @@ export interface DeviceInfo {
 }
 
 export const supportedBrowsers = {
-	'windows': {
-		'internet explorer': '>12',
-		'microsoft edge': '>18',
-	},
 	'safari': '>12',
 	'firefox': '>=60',
 	'chrome': '>=74',
 	'chromium': '>=74',
 	'opera': '>=62',
+	'edge': '>=79',
 	'samsung internet for android': '>=11.1.1.52',
 };
 
@@ -34,7 +31,7 @@ export const deviceInfo = (): DeviceInfo => {
 		flag = 'safari';
 	else if (browserInfo.satisfies({ opera: '>=0' }))
 		flag = 'opera';
-	else if (browserInfo.satisfies({ 'microsoft edge': '>=0' }))
+	else if (browserInfo.satisfies({ edge: '>=0' }))
 		flag = 'edge';
 	else
 		flag = 'unknown';