ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Updated participant model 

Moved local and nickname properties to Participant Model from Stream Model
pull/707/head
csantosm 2022-02-28 13:48:58 +01:00
parent 5f22072f71
commit 8f2d598236
10 changed files with 67 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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);
}
}

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

@ -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>

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

@ -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;
}
}

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

@ -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) => {
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();

4
openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
View File

@ -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,

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

@ -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();
}
}

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

@ -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);

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

@ -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) {
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 {

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

@ -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);
}
}