Fix simulcast support

app/src/RoomClient.js

@@ -1194,6 +1194,43 @@ export default class RoomClient
 			meActions.setMyRaiseHandStateInProgress(false));
 	}
 
+	async setMaxSendingSpatialLayer(spatialLayer)
+	{
+		logger.debug('setMaxSendingSpatialLayer() [spatialLayer:%s]', spatialLayer);
+
+		try
+		{
+			if (this._webcamProducer)
+				await this._webcamProducer.setMaxSpatialLayer(spatialLayer);
+			else if (this._screenSharingProducer)
+				await this._screenSharingProducer.setMaxSpatialLayer(spatialLayer);
+		}
+		catch (error)
+		{
+			logger.error('setMaxSendingSpatialLayer() | failed:"%o"', error);
+		}
+	}
+
+	async setConsumerPreferredLayers(consumerId, spatialLayer, temporalLayer)
+	{
+		logger.debug(
+			'setConsumerPreferredLayers() [consumerId:%s, spatialLayer:%s, temporalLayer:%s]',
+			consumerId, spatialLayer, temporalLayer);
+
+		try
+		{
+			await this.sendRequest(
+				'setConsumerPreferedLayers', { consumerId, spatialLayer, temporalLayer });
+
+			store.dispatch(consumerActions.setConsumerPreferredLayers(
+				consumerId, spatialLayer, temporalLayer));
+		}
+		catch (error)
+		{
+			logger.error('setConsumerPreferredLayers() | failed:"%o"', error);
+		}
+	}
+
 	async _loadDynamicImports()
 	{
 		({ default: WebTorrent } = await import(

app/src/components/Containers/Peer.js

@@ -145,16 +145,6 @@ const Peer = (props) =>
 		!screenConsumer.remotelyPaused
 	);
 
-	let videoProfile;
-
-	if (webcamConsumer)
-		videoProfile = webcamConsumer.profile;
-
-	let screenProfile;
-
-	if (screenConsumer)
-		screenProfile = screenConsumer.profile;
-
 	const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
 	const rootStyle =
@@ -325,11 +315,27 @@ const Peer = (props) =>
 						peer={peer}
 						displayName={peer.displayName}
 						showPeerInfo
+						consumerSpatialLayers={webcamConsumer ? webcamConsumer.spatialLayers : null}
+						consumerTemporalLayers={webcamConsumer ? webcamConsumer.temporalLayers : null}
+						consumerCurrentSpatialLayer={
+							webcamConsumer ? webcamConsumer.currentSpatialLayer : null
+						}
+						consumerCurrentTemporalLayer={
+							webcamConsumer ? webcamConsumer.currentTemporalLayer : null
+						}
+						consumerPreferredSpatialLayer={
+							webcamConsumer ? webcamConsumer.preferredSpatialLayer : null
+						}
+						consumerPreferredTemporalLayer={
+							webcamConsumer ? webcamConsumer.preferredTemporalLayer : null
+						}
+						videoMultiLayer={webcamConsumer && webcamConsumer.type !== 'simple'}
 						videoTrack={webcamConsumer && webcamConsumer.track}
 						videoVisible={videoVisible}
-						videoProfile={videoProfile}
 						audioCodec={micConsumer && micConsumer.codec}
 						videoCodec={webcamConsumer && webcamConsumer.codec}
+						audioScore={micConsumer ? micConsumer.score : null}
+						videoScore={webcamConsumer ? webcamConsumer.score : null}
 					>
 						<Volume id={peer.id} />
 					</VideoView>
@@ -456,9 +462,27 @@ const Peer = (props) =>
 							<VideoView
 								advancedMode={advancedMode}
 								videoContain
+								consumerSpatialLayers={
+									screenConsumer ? screenConsumer.spatialLayers : null
+								}
+								consumerTemporalLayers={
+									screenConsumer ? screenConsumer.temporalLayers : null
+								}
+								consumerCurrentSpatialLayer={
+									screenConsumer ? screenConsumer.currentSpatialLayer : null
+								}
+								consumerCurrentTemporalLayer={
+									screenConsumer ? screenConsumer.currentTemporalLayer : null
+								}
+								consumerPreferredSpatialLayer={
+									screenConsumer ? screenConsumer.preferredSpatialLayer : null
+								}
+								consumerPreferredTemporalLayer={
+									screenConsumer ? screenConsumer.preferredTemporalLayer : null
+								}
+								videoMultiLayer={screenConsumer && screenConsumer.type !== 'simple'}
 								videoTrack={screenConsumer && screenConsumer.track}
 								videoVisible={screenVisible}
-								videoProfile={screenProfile}
 								videoCodec={screenConsumer && screenConsumer.codec}
 							/>
 						</div>

app/src/components/VideoContainers/VideoView.js

@@ -137,7 +137,15 @@ class VideoView extends React.PureComponent
 			videoContain,
 			advancedMode,
 			videoVisible,
-			videoProfile,
+			videoMultiLayer,
+			// audioScore,
+			// videoScore,
+			// consumerSpatialLayers,
+			// consumerTemporalLayers,
+			consumerCurrentSpatialLayer,
+			consumerCurrentTemporalLayer,
+			consumerPreferredSpatialLayer,
+			consumerPreferredTemporalLayer,
 			audioCodec,
 			videoCodec,
 			onChangeDisplayName,
@@ -161,7 +169,19 @@ class VideoView extends React.PureComponent
 						<div className={classes.box}>
 							{ audioCodec && <p>{audioCodec}</p> }
 
-							{ videoCodec && <p>{videoCodec} {videoProfile}</p> }
+							{ videoCodec &&
+								<p>
+									{videoCodec}
+								</p>
+							}
+
+							{ videoMultiLayer &&
+								<p>
+									{`current spatial-temporal layers: ${consumerCurrentSpatialLayer} ${consumerCurrentTemporalLayer}`}
+									<br />
+									{`preferred spatial-temporal layers: ${consumerPreferredSpatialLayer} ${consumerPreferredTemporalLayer}`}
+								</p>
+							}
 
 							{ (videoVisible && videoWidth !== null) &&
 								<p>{videoWidth}x{videoHeight}</p>
@@ -202,7 +222,6 @@ class VideoView extends React.PureComponent
 					className={classnames(classes.video, {
 						hidden  : !videoVisible,
 						'isMe'  : isMe && !isScreen,
-						loading : videoProfile === 'none',
 						contain : videoContain
 					})}
 					autoPlay
@@ -293,20 +312,28 @@ class VideoView extends React.PureComponent
 
 VideoView.propTypes =
 {
-	isMe     : PropTypes.bool,
-	isScreen : PropTypes.bool,
-	displayName         : PropTypes.string,
-	showPeerInfo        : PropTypes.bool,
-	videoContain        : PropTypes.bool,
-	advancedMode        : PropTypes.bool,
-	videoTrack          : PropTypes.any,
-	videoVisible        : PropTypes.bool.isRequired,
-	videoProfile        : PropTypes.string,
-	audioCodec          : PropTypes.string,
-	videoCodec          : PropTypes.string,
-	onChangeDisplayName : PropTypes.func,
-	children            : PropTypes.object,
-	classes             : PropTypes.object.isRequired
+	isMe                           : PropTypes.bool,
+	isScreen                       : PropTypes.bool,
+	displayName                    : PropTypes.string,
+	showPeerInfo                   : PropTypes.bool,
+	videoContain                   : PropTypes.bool,
+	advancedMode                   : PropTypes.bool,
+	videoTrack                     : PropTypes.any,
+	videoVisible                   : PropTypes.bool.isRequired,
+	consumerSpatialLayers          : PropTypes.number,
+	consumerTemporalLayers         : PropTypes.number,
+	consumerCurrentSpatialLayer    : PropTypes.number,
+	consumerCurrentTemporalLayer   : PropTypes.number,
+	consumerPreferredSpatialLayer  : PropTypes.number,
+	consumerPreferredTemporalLayer : PropTypes.number,
+	videoMultiLayer                : PropTypes.bool,
+	audioScore                     : PropTypes.any,
+	videoScore                     : PropTypes.any,
+	audioCodec                     : PropTypes.string,
+	videoCodec                     : PropTypes.string,
+	onChangeDisplayName            : PropTypes.func,
+	children                       : PropTypes.object,
+	classes                        : PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(VideoView);