openvidu-components: Updated participant model

Moved local and nickname properties to Participant Model from Stream Model

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html

@@ -1,13 +1,19 @@
 <mat-list>
 	<mat-list-item>
 		<mat-icon matListAvatar class="participant-avatar">person</mat-icon>
-		<h3 matLine class="participant-nickname">{{ _participant | nickname }}</h3>
+		<h3 matLine class="participant-nickname">{{ _participant.nickname }}</h3>
 		<p matLine class="participant-subtitle">{{ _participant | streamsEnabled }}</p>
 		<!-- <p matLine>
 			<span class="participant-subtitle"></span>
 		</p> -->
 
-		<button mat-icon-button id="action-btn" [class.warn-btn]="_participant.isMutedForcibly" (click)="toggleMuteForcibly()">
+		<button
+			mat-icon-button
+			id="action-btn"
+			*ngIf="!_participant.local"
+			[class.warn-btn]="_participant.isMutedForcibly"
+			(click)="toggleMuteForcibly()"
+		>
 			<mat-icon *ngIf="!_participant.isMutedForcibly">volume_up</mat-icon>
 			<mat-icon *ngIf="_participant.isMutedForcibly">volume_off</mat-icon>
 		</button>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts

@@ -197,7 +197,7 @@ export class SessionComponent implements OnInit {
 
 				//Sending nicnkanme signal to new participants
 				if (this.openviduService.needSendNicknameSignal()) {
-					const data = { clientData: this.participantService.getWebcamNickname() };
+					const data = { clientData: this.participantService.getMyNickname() };
 					this.openviduService.sendSignal(Signal.NICKNAME_CHANGED, [event.connection], data);
 				}
 			}

openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html

@@ -6,7 +6,9 @@
 >
 	<div class="nickname" [class.fullscreen]="isFullscreen" *ngIf="showNickname">
 		<div (click)="toggleNicknameForm()" class="nicknameContainer" selected *ngIf="!toggleNickname">
-			<span id="nickname">{{ this._stream.nickname }}</span>
+			<span id="nickname" *ngIf="this._stream.type === 'CAMERA'">{{ this._stream.participant.nickname }}</span>
+			<span id="nickname" *ngIf="this._stream.type === 'SCREEN'">{{ this._stream.participant.nickname }}_SCREEN</span>
+
 			<span *ngIf="_stream.local || (_stream.streamManager && !_stream.streamManager?.remote)"> (edit)</span>
 		</div>
 		<div *ngIf="toggleNickname && !this._stream.streamManager?.remote" [class.fullscreen]="isFullscreen" id="dialogNickname">
@@ -36,7 +38,7 @@
 	<ov-video
 		(dblclick)="toggleVideoEnlarged()"
 		[streamManager]="_stream.streamManager"
-		[mutedSound]="_stream.participant.isMutedForcibly"
+		[mutedSound]="_stream?.participant?.isMutedForcibly"
 	></ov-video>
 
 

openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts

@@ -60,7 +60,9 @@ export class StreamComponent implements OnInit {
 	set stream(stream: StreamModel) {
 		this._stream = stream;
 		this.checkVideoEnlarged();
-		this.nicknameFormControl = new FormControl(this._stream.nickname, [Validators.maxLength(25), Validators.required]);
+		if(this._stream.participant) {
+			this.nicknameFormControl = new FormControl(this._stream.participant.nickname, [Validators.maxLength(25), Validators.required]);
+		}
 	}
 
 	@ViewChild('nicknameInput')
@@ -104,7 +106,7 @@ export class StreamComponent implements OnInit {
 	}
 
 	toggleNicknameForm() {
-		if (this._stream.local) {
+		if (this._stream.participant.local) {
 			this.toggleNickname = !this.toggleNickname;
 		}
 	}

openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts

@@ -2,9 +2,7 @@ import { Publisher, StreamManager } from 'openvidu-browser';
 import { VideoType } from './video-type.model';
 
 export interface StreamModel {
-	local: boolean;
 	connected: boolean;
-	nickname: string;
 	type: VideoType;
 	streamManager: StreamManager;
 	videoEnlarged: boolean;
@@ -15,13 +13,17 @@ export interface StreamModel {
 export abstract class ParticipantAbstractModel {
 	streams: Map<VideoType, StreamModel> = new Map();
 	id: string;
+	local: boolean;
+	nickname: string;
 	isMutedForcibly: boolean;
 
-	constructor(model?: StreamModel, id?: string) {
+	constructor(model?: StreamModel, id?: string, local?: boolean, nickname?: string) {
+		this.id = id ? id : new Date().getTime().toString();
+		this.local = local ? local : true,
+		this.nickname = nickname ? nickname : 'OpenVidu_User',
+		this.isMutedForcibly = false;
 		let streamModel: StreamModel = {
-			local: model ? model.local : true,
 			connected: true,
-			nickname: model ? model.nickname : 'OpenVidu_User',
 			type: model ? model.type : VideoType.CAMERA,
 			streamManager: model ? model.streamManager : null,
 			videoEnlarged: model ? model.videoEnlarged : false,
@@ -29,11 +31,10 @@ export abstract class ParticipantAbstractModel {
 			participant: this
 		};
 		this.streams.set(streamModel.type, streamModel);
-		this.id = id ? id : new Date().getTime().toString();
-		this.isMutedForcibly = false;
 	}
 
 	addConnection(streamModel: StreamModel) {
+		streamModel.participant = this;
 		this.streams.set(streamModel.type, streamModel);
 	}
 
@@ -103,26 +104,32 @@ export abstract class ParticipantAbstractModel {
 	}
 
 	isLocal(): boolean {
-		return Array.from(this.streams.values()).every((conn) => conn.local);
+		return this.local;
+		// return Array.from(this.streams.values()).every((conn) => conn.local);
 	}
 
 	setNickname(nickname: string) {
-		this.streams.forEach((conn) => {
+		this.nickname = nickname;
-			if (conn.type === VideoType.CAMERA) {
+		// this.streams.forEach((conn) => {
-				conn.nickname = nickname;
+		// 	if (conn.type === VideoType.CAMERA) {
-			} else {
+		// 		conn.nickname = nickname;
-				conn.nickname = `${nickname}_${conn.type}`;
+		// 	} else {
-			}
+		// 		conn.nickname = `${nickname}_${conn.type}`;
-		});
+		// 	}
+		// });
 	}
 
-	getCameraNickname(): string {
+	getNickname() {
-		return this.getCameraConnection()?.nickname;
+		return this.nickname;
 	}
 
-	getScreenNickname(): string {
+	// getCameraNickname(): string {
-		return this.getScreenConnection()?.nickname;
+	// 	return this.getCameraConnection()?.nickname;
-	}
+	// }
+
+	// getScreenNickname(): string {
+	// 	return this.getScreenConnection()?.nickname;
+	// }
 
 	setCameraPublisher(publisher: Publisher) {
 		const cameraConnection = this.getCameraConnection();

openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts

@@ -36,7 +36,7 @@ import { StreamComponent } from './components/stream/stream.component';
 import { DialogTemplateComponent } from './components/material/dialog.component';
 
 import { LinkifyPipe } from './pipes/linkify.pipe';
-import { StreamsEnabledPipe, NicknamePipe, ParticipantStreamsPipe } from './pipes/participant.pipe';
+import { StreamsEnabledPipe, ParticipantStreamsPipe } from './pipes/participant.pipe';
 
 import { OpenViduAngularConfig } from './config/openvidu-angular.config';
 import { CdkOverlayContainer } from './config/custom-cdk-overlay';
@@ -74,7 +74,6 @@ import { ChatPanelDirective, LayoutDirective, PanelDirective, ParticipantPanelIt
 		LinkifyPipe,
 		ParticipantStreamsPipe,
 		StreamsEnabledPipe,
-		NicknamePipe,
 		ParticipantPanelItemComponent,
 		ParticipantsPanelComponent,
 		VideoconferenceComponent,
@@ -146,7 +145,6 @@ import { ChatPanelDirective, LayoutDirective, PanelDirective, ParticipantPanelIt
 		AudioWaveComponent,
 		ParticipantStreamsPipe,
 		StreamsEnabledPipe,
-		NicknamePipe,
 		CommonModule,
 		ToolbarDirective,
 		PanelDirective,

openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/participant.pipe.ts

@@ -26,11 +26,3 @@ export class StreamsEnabledPipe implements PipeTransform {
 		return `(${participant?.getConnectionTypesActive().toString().replace(',', ', ')})`;
 	}
 }
-
-@Pipe({ name: 'nickname', pure: false })
-export class NicknamePipe implements PipeTransform {
-	constructor() {}
-	transform(participant: ParticipantAbstractModel): string {
-		return participant?.getCameraNickname();
-	}
-}

openvidu-components-angular/projects/openvidu-angular/src/lib/services/chat/chat.service.ts

@@ -66,7 +66,7 @@ export class ChatService {
 		if (message !== '' && message !== ' ') {
 			const data = {
 				message: message,
-				nickname: this.participantService.getWebcamNickname()
+				nickname: this.participantService.getMyNickname()
 			};
 
 			this.openviduService.sendSignal(Signal.CHAT, undefined, data);

openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts

@@ -78,7 +78,7 @@ export class OpenViduService {
 
 	async connectSession(session: Session, token: string): Promise<void> {
 		if (!!token && session) {
-			const nickname = this.participantService.getWebcamNickname();
+			const nickname = this.participantService.getMyNickname();
 			const participantId = this.participantService.getMyParticipantId();
 			if (session === this.webcamSession) {
 				this.log.d('Connecting webcam session');
@@ -248,10 +248,11 @@ export class OpenViduService {
 		};
 		this.webcamSession.signal(signalOptions);
 
-		if (type === Signal.NICKNAME_CHANGED && !!this.getScreenSession().connection) {
+		// TODO: Check if it is necessary
-			signalOptions.data = JSON.stringify({ clientData: this.participantService.getScreenNickname() });
+		// if (type === Signal.NICKNAME_CHANGED && !!this.getScreenSession().connection) {
-			this.getScreenSession()?.signal(signalOptions);
+		// 	signalOptions.data = JSON.stringify({ clientData: this.participantService.getScreenNickname() });
-		}
+		// 	this.getScreenSession()?.signal(signalOptions);
+		// }
 	}
 
 	async replaceTrack(videoType: VideoType, props: PublisherProperties) {
@@ -353,7 +354,7 @@ export class OpenViduService {
 		} catch (error) {
 			this.log.e(error);
 		}
-		return oldNickname !== this.participantService.getWebcamNickname();
+		return oldNickname !== this.participantService.getMyNickname();
 	}
 
 	isMyOwnConnection(connectionId: string): boolean {

openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts

@@ -82,11 +82,9 @@ export class ParticipantService {
 		this.log.d('Enabling screen publisher');
 
 		const steramModel: StreamModel = {
-			local: true,
 			type: VideoType.SCREEN,
 			videoEnlarged: true,
 			streamManager: screenPublisher,
-			nickname: `${this.localParticipant.getCameraNickname()}_${VideoType.SCREEN}`,
 			connected: true,
 			connectionId: null
 		};
@@ -115,13 +113,16 @@ export class ParticipantService {
 		}
 	}
 
-	getWebcamNickname(): string {
+	getMyNickname(): string {
-		return this.localParticipant.getCameraNickname();
+		return this.localParticipant.nickname;
 	}
+	// getWebcamNickname(): string {
+	// 	return this.localParticipant.getCameraNickname();
+	// }
 
-	getScreenNickname(): string {
+	// getScreenNickname(): string {
-		return this.localParticipant.getScreenNickname();
+	// 	return this.localParticipant.getScreenNickname();
-	}
+	// }
 
 
 	toggleMyVideoEnlarged(connectionId: string) {
@@ -195,11 +196,9 @@ export class ParticipantService {
 
 		const type: VideoType = this.getTypeConnectionData(data);
 		const streamModel: StreamModel = {
-			local: false,
 			type,
 			videoEnlarged: type === VideoType.SCREEN,
 			streamManager: subscriber,
-			nickname: this.getNicknameFromConnectionData(data),
 			connected: true,
 			connectionId
 		};
@@ -219,7 +218,9 @@ export class ParticipantService {
 			}
 		} else {
 			this.log.w('Creating new participant with id: ', participantId);
-			const remoteParticipant = this.newParticipant(streamModel, participantId);
+			const nickname = this.getNicknameFromConnectionData(data);
+			const local = false;
+			const remoteParticipant = this.newParticipant(streamModel, participantId, local, nickname);
 			this.remoteParticipants.push(remoteParticipant);
 		}
 		this.updateRemoteParticipants();
@@ -305,11 +306,11 @@ export class ParticipantService {
 		}
 	}
 
-	protected newParticipant(streamModel?: StreamModel, participantId?: string) {
+	protected newParticipant(streamModel?: StreamModel, participantId?: string, local?: boolean, nickname?: string) {
 
 		if(this.openviduAngularConfigSrv.hasParticipantFactory()){
-			return this.openviduAngularConfigSrv.getParticipantFactory().apply(this, [streamModel, participantId]);
+			return this.openviduAngularConfigSrv.getParticipantFactory().apply(this, [streamModel, participantId, local, nickname]);
 		}
-		return new ParticipantModel(streamModel, participantId);
+		return new ParticipantModel(streamModel, participantId, local, nickname);
 	}
 }