show mediasoup-client handler name in room top-left corner

versatica · Jun 16, 2023 · c288a64 · c288a64
1 parent 61f1713
commit c288a64
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 6 deletions.
diff --git a/app/lib/RoomClient.js b/app/lib/RoomClient.js
@@ -2251,6 +2251,10 @@ export default class RoomClient
 					handlerName : this._handlerName
 				});
 
+			store.dispatch(stateActions.setRoomMediasoupClientHandler(
+				this._mediasoupDevice.handlerName
+			));
+
 			const routerRtpCapabilities =
 				await this._protoo.request('getRouterRtpCapabilities');
 

diff --git a/app/lib/components/PeerView.jsx b/app/lib/components/PeerView.jsx
@@ -452,7 +452,6 @@ export default class PeerView extends React.Component
 				<audio
 					ref='audioElem'
 					autoPlay
-					playsInline
 					muted={isMe || audioMuted}
 					controls={false}
 				/>

diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx
@@ -37,6 +37,10 @@ class Room extends React.Component
 						<p className={classnames('text', room.state)}>{room.state}</p>
 					</div>
 
+					<div className='mediasoup-client-handler-name'>
+						<p className='text'><span className='label'>handler: </span>{room.mediasoupClientHandler}</p>
+					</div>
+
 					<div className='room-link-wrapper'>
 						<div className='room-link'>
 							<a

diff --git a/app/lib/redux/reducers/room.js b/app/lib/redux/reducers/room.js
@@ -1,10 +1,11 @@
 const initialState =
 {
-	url             : null,
-	state           : 'new', // new/connecting/connected/disconnected/closed,
-	activeSpeakerId : null,
-	statsPeerId     : null,
-	faceDetection   : false
+	url                    : null,
+	state                  : 'new', // new/connecting/connected/disconnected/closed,
+	mediasoupClientHandler : undefined,
+	activeSpeakerId        : null,
+	statsPeerId            : null,
+	faceDetection          : false
 };
 
 const room = (state = initialState, action) =>
@@ -28,6 +29,13 @@ const room = (state = initialState, action) =>
 				return { ...state, state: roomState, activeSpeakerId: null, statsPeerId: null };
 		}
 
+		case 'SET_ROOM_MEDIASOUP_CLIENT_HANDLER':
+		{
+			const { mediasoupClientHandler } = action.payload;
+
+			return { ...state, mediasoupClientHandler };
+		}
+
 		case 'SET_ROOM_ACTIVE_SPEAKER':
 		{
 			const { peerId } = action.payload;
@@ -67,7 +75,9 @@ const room = (state = initialState, action) =>
 		}
 
 		default:
+		{
 			return state;
+		}
 	}
 };
 

diff --git a/app/lib/redux/stateActions.js b/app/lib/redux/stateActions.js
@@ -14,6 +14,14 @@ export const setRoomState = (state) =>
 	};
 };
 
+export const setRoomMediasoupClientHandler = (mediasoupClientHandler) =>
+{
+	return {
+		type    : 'SET_ROOM_MEDIASOUP_CLIENT_HANDLER',
+		payload : { mediasoupClientHandler }
+	};
+};
+
 export const setRoomActiveSpeaker = (peerId) =>
 {
 	return {

diff --git a/app/stylus/components/Room.styl b/app/stylus/components/Room.styl
@@ -88,6 +88,53 @@
 		}
 	}
 
+	> .mediasoup-client-handler-name {
+		position: fixed;
+		z-index: 100;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		border-radius: 25px;
+		background-color: $COLOR_BG_1;
+
+		+desktop() {
+			top: 55px;
+			left: 20px;
+			height: 18px;
+			width: 124px;
+		}
+
+		+mobile() {
+			top: 40px;
+			left: 10px;
+			height: 18px;
+			width: 110px;
+		}
+
+		> .text {
+			flex: 100 0 auto;
+			user-select: none;
+			pointer-events: none;
+			text-align: center;
+			font-family: 'Roboto';
+			font-weight: 400;
+			color: rgba(#fff, 0.75);
+
+			+desktop() {
+				font-size: 10px;
+			}
+
+			+mobile() {
+				font-size: 9px;
+			}
+
+			> span.label {
+				color: rgba(#fff, 0.45);
+			}
+		}
+	}
+
 	> .room-link-wrapper {
 		pointer-events: none;
 		position: absolute;