From 7af7b96a2d66d5acbfd3d9790ab2b8bf6b139df8 Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Wed, 2 Mar 2022 17:35:14 +0100 Subject: [PATCH] openvidu-components: Created participant from pre-join component * Refactored update local participant method * Refactored pipes --- .../lib/components/layout/layout.component.ts | 7 +++-- .../participant-panel-item.component.html | 2 +- .../participants-panel.component.ts | 4 +-- .../components/pre-join/pre-join.component.ts | 9 ++++-- .../src/lib/models/participant.model.ts | 20 +++++++++---- .../src/lib/openvidu-angular.module.ts | 6 ++-- .../src/lib/pipes/participant.pipe.ts | 23 ++++++++------ .../participant/participant.service.ts | 30 +++++++++---------- 8 files changed, 60 insertions(+), 41 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts index 392307c0..8c6242a2 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts @@ -31,7 +31,7 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit { constructor(protected layoutService: LayoutService, protected participantService: ParticipantService, private cd: ChangeDetectorRef) {} ngOnInit(): void { - this.subscribeToUsers(); + this.subscribeToParticipants(); } ngAfterViewInit() { @@ -47,9 +47,10 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit { this.layoutService.clear(); } - protected subscribeToUsers() { + protected subscribeToParticipants() { this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => { - this.localParticipant = p; + // We need to update the object reference doing a deep copy for update the view + this.localParticipant = Object.assign(Object.create(p), p) this.layoutService.update(); this.cd.markForCheck(); }); 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 ffffd7c8..c7b72989 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 @@ -2,7 +2,7 @@ person

{{ _participant.nickname }}

-

{{ _participant | streamsEnabled }}

+

{{ _participant | streamTypesEnabled }}

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts index 1259228c..f9fcc698 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts @@ -33,13 +33,13 @@ export class ParticipantsPanelComponent implements OnInit { ngOnInit(): void { this.participantService.localParticipantObs.subscribe((p: ParticipantModel) => { this.localParticipant = p; - // Mark for re-rendering using an impure pipe 'streamsEnabled' + // Mark for re-rendering using an impure pipe 'streamsTypesEnabled' this.cd.markForCheck(); }); this.participantService.remoteParticipantsObs.subscribe((p: ParticipantModel[]) => { this.remoteParticipants = p; - // Mark for re-rendering using an impure pipe 'streamsEnabled' + // Mark for re-rendering using an impure pipe 'streamsTypesEnabled' this.cd.markForCheck(); }); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts index 82309fb5..b25785c1 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts @@ -4,7 +4,7 @@ import { OpenViduErrorName } from 'openvidu-browser/lib/OpenViduInternal/Enums/O import { Subscription } from 'rxjs'; import { CustomDevice } from '../../models/device.model'; import { ILogger } from '../../models/logger.model'; -import { ParticipantAbstractModel } from '../../models/participant.model'; +import { ParticipantAbstractModel, ParticipantProperties } from '../../models/participant.model'; import { ActionService } from '../../services/action/action.service'; import { DeviceService } from '../../services/device/device.service'; import { LayoutService } from '../../services/layout/layout.service'; @@ -57,10 +57,15 @@ export class PreJoinComponent implements OnInit, OnDestroy { async ngOnInit() { await this.deviceSrv.initializeDevices(); + this.nickname = this.storageSrv.getNickname() || this.generateRandomNickname(); + const props: ParticipantProperties = { + local: true, + nickname: this.nickname + }; + this.participantService.initLocalParticipant(props); this.subscribeToLocalParticipantEvents(); this.openviduService.initialize(); - this.nickname = this.storageSrv.getNickname() || this.generateRandomNickname(); this.windowSize = window.innerWidth; this.setDevicesInfo(); if (this.hasAudioDevices || this.hasVideoDevices) { 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 44bb22ca..a15499f6 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 @@ -10,6 +10,14 @@ export interface StreamModel { participant?: ParticipantAbstractModel } +export interface ParticipantProperties { + local: boolean; + nickname: string; + id?: string; + colorProfile?: string; + isMutedForcibly?: boolean; +} + export abstract class ParticipantAbstractModel { streams: Map = new Map(); id: string; @@ -18,12 +26,12 @@ export abstract class ParticipantAbstractModel { colorProfile: string; isMutedForcibly: boolean; - constructor(model?: StreamModel, id?: string, local: boolean = true, nickname?: string) { - this.id = id ? id : new Date().getTime().toString(); - this.local = local, - this.nickname = nickname ? nickname : 'OpenVidu_User'; - this.colorProfile = `hsl(${Math.random()*360}, 100%, 80%)`; - this.isMutedForcibly = false; + constructor(props: ParticipantProperties, model?: StreamModel) { + this.id = props.id ? props.id : new Date().getTime().toString(); + this.local = props.local; + this.nickname = props.nickname; + this.colorProfile = !!props.colorProfile ? props.colorProfile : `hsl(${Math.random()*360}, 100%, 80%)`; + this.isMutedForcibly = typeof props.isMutedForcibly === 'boolean' ? props.isMutedForcibly : false; let streamModel: StreamModel = { connected: true, type: model ? model.type : VideoType.CAMERA, 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 235981cb..0b4383b3 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, ParticipantStreamsPipe } from './pipes/participant.pipe'; +import { StreamTypesEnabledPipe, ParticipantStreamsPipe } from './pipes/participant.pipe'; import { OpenViduAngularConfig } from './config/openvidu-angular.config'; import { CdkOverlayContainer } from './config/custom-cdk-overlay'; @@ -83,7 +83,7 @@ import { AvatarProfileComponent } from './components/avatar-profile/avatar-profi DialogTemplateComponent, LinkifyPipe, ParticipantStreamsPipe, - StreamsEnabledPipe, + StreamTypesEnabledPipe, ParticipantPanelItemComponent, ParticipantsPanelComponent, VideoconferenceComponent, @@ -157,7 +157,7 @@ import { AvatarProfileComponent } from './components/avatar-profile/avatar-profi AudioWaveComponent, PreJoinComponent, ParticipantStreamsPipe, - StreamsEnabledPipe, + StreamTypesEnabledPipe, 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 6f5f9d6a..5dd3328d 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 @@ -1,25 +1,30 @@ import { Pipe, PipeTransform } from '@angular/core'; import { StreamModel, ParticipantAbstractModel } from '../models/participant.model'; -@Pipe({ name: 'streams' }) +@Pipe({ name: 'streams', pure: true }) export class ParticipantStreamsPipe implements PipeTransform { constructor() {} transform(participants: ParticipantAbstractModel[] | ParticipantAbstractModel): StreamModel[] { let streams: StreamModel[] = []; - if (Array.isArray(participants)) { - participants.forEach((p) => { - streams = streams.concat(Array.from(p.streams.values())); - }); - } else { - streams = Array.from(participants.streams.values()); + console.log('STREAM PIPE') + debugger + if(Object.keys(participants).length > 0){ + if (Array.isArray(participants)) { + participants.forEach((p) => { + streams = streams.concat(p.getAvailableConnections()); + }); + } else { + + streams = participants.getAvailableConnections(); + } } return streams; } } -@Pipe({ name: 'streamsEnabled', pure: false }) -export class StreamsEnabledPipe implements PipeTransform { +@Pipe({ name: 'streamTypesEnabled', pure: false }) +export class StreamTypesEnabledPipe implements PipeTransform { constructor() {} transform(participant: ParticipantAbstractModel): string { 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 2b351b2b..5be13c3f 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 @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import { Publisher, Subscriber } from 'openvidu-browser'; import { BehaviorSubject, Observable } from 'rxjs'; import { ILogger } from '../../models/logger.model'; -import { StreamModel, ParticipantAbstractModel, ParticipantModel } from '../../models/participant.model'; +import { StreamModel, ParticipantAbstractModel, ParticipantModel, ParticipantProperties } from '../../models/participant.model'; import { VideoType } from '../../models/video-type.model'; import { OpenViduAngularConfigService } from '../config/openvidu-angular.config.service'; import { LoggerService } from '../logger/logger.service'; @@ -29,8 +29,10 @@ export class ParticipantService { this.localParticipantObs = this._localParticipant.asObservable(); this.remoteParticipantsObs = this._remoteParticipants.asObservable(); + } - this.localParticipant = this.newParticipant(); + initLocalParticipant(props: ParticipantProperties) { + this.localParticipant = this.newParticipant(props); this.updateLocalParticipant(); } @@ -131,7 +133,7 @@ export class ParticipantService { clear() { this.disableScreenUser(); - this.localParticipant = this.newParticipant(); + // this.localParticipant = this.newParticipant(); // this._screensharing.next(false); this.remoteParticipants = []; this._remoteParticipants = >new BehaviorSubject([]); @@ -172,12 +174,7 @@ export class ParticipantService { } updateLocalParticipant() { - // Cloning localParticipant object for not applying changes on the global variable - let participantsWithConnectionAvailable: ParticipantAbstractModel = Object.assign(this.newParticipant(), this.localParticipant); - const availableConnections = participantsWithConnectionAvailable.getAvailableConnections(); - const availableConnectionsMap = new Map(availableConnections.map((conn) => [conn.type, conn])); - participantsWithConnectionAvailable.streams = availableConnectionsMap; - this._localParticipant.next(participantsWithConnectionAvailable); + this._localParticipant.next(this.localParticipant); } /** @@ -210,9 +207,12 @@ export class ParticipantService { } } else { this.log.w('Creating new participant with id: ', participantId); - const nickname = this.getNicknameFromConnectionData(data); - const local = false; - const remoteParticipant = this.newParticipant(streamModel, participantId, local, nickname); + const props: ParticipantProperties = { + nickname: this.getNicknameFromConnectionData(data), + local: false, + id: participantId + } + const remoteParticipant = this.newParticipant(props, streamModel); this.remoteParticipants.push(remoteParticipant); } this.updateRemoteParticipants(); @@ -306,11 +306,11 @@ export class ParticipantService { } } - protected newParticipant(streamModel?: StreamModel, participantId?: string, local?: boolean, nickname?: string) { + protected newParticipant(props: ParticipantProperties, streamModel?: StreamModel) { if(this.openviduAngularConfigSrv.hasParticipantFactory()){ - return this.openviduAngularConfigSrv.getParticipantFactory().apply(this, [streamModel, participantId, local, nickname]); + return this.openviduAngularConfigSrv.getParticipantFactory().apply(this, [props, streamModel]); } - return new ParticipantModel(streamModel, participantId, local, nickname); + return new ParticipantModel(props, streamModel); } }