diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html index ebc2e54c..ffffd7c8 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html @@ -1,13 +1,19 @@ person -

{{ _participant | nickname }}

+

{{ _participant.nickname }}

{{ _participant | streamsEnabled }}

- diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts index 616e5674..541ad097 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts +++ b/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); } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html index 6fb61964..5ecfb18f 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html @@ -6,7 +6,9 @@ >
- {{ this._stream.nickname }} + {{ this._stream.participant.nickname }} + {{ this._stream.participant.nickname }}_SCREEN + (edit)
@@ -36,7 +38,7 @@ diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts index d636a5cf..a40e7059 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts +++ b/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; } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts index fb58f121..2427b406 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts +++ b/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 = 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) => { - if (conn.type === VideoType.CAMERA) { - conn.nickname = nickname; - } else { - conn.nickname = `${nickname}_${conn.type}`; - } - }); + this.nickname = nickname; + // this.streams.forEach((conn) => { + // if (conn.type === VideoType.CAMERA) { + // conn.nickname = nickname; + // } else { + // conn.nickname = `${nickname}_${conn.type}`; + // } + // }); } - getCameraNickname(): string { - return this.getCameraConnection()?.nickname; + getNickname() { + return this.nickname; } - getScreenNickname(): string { - return this.getScreenConnection()?.nickname; - } + // getCameraNickname(): string { + // return this.getCameraConnection()?.nickname; + // } + + // getScreenNickname(): string { + // return this.getScreenConnection()?.nickname; + // } setCameraPublisher(publisher: Publisher) { const cameraConnection = this.getCameraConnection(); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts index 0fe4ef35..4cd2b10e 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts +++ b/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, diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/participant.pipe.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/participant.pipe.ts index 7847373f..6f5f9d6a 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/participant.pipe.ts +++ b/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(); - } -} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/chat/chat.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/chat/chat.service.ts index 4217db30..28184a3b 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/chat/chat.service.ts +++ b/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); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts index d6ac44ab..5ae10377 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts +++ b/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 { 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) { - signalOptions.data = JSON.stringify({ clientData: this.participantService.getScreenNickname() }); - this.getScreenSession()?.signal(signalOptions); - } + // TODO: Check if it is necessary + // if (type === Signal.NICKNAME_CHANGED && !!this.getScreenSession().connection) { + // 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 { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts index d2376fea..c998f6c6 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts +++ b/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 { - return this.localParticipant.getCameraNickname(); + getMyNickname(): string { + return this.localParticipant.nickname; } + // getWebcamNickname(): string { + // return this.localParticipant.getCameraNickname(); + // } - getScreenNickname(): string { - return this.localParticipant.getScreenNickname(); - } + // getScreenNickname(): string { + // 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); } }