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 8c6242a2..e1e421c2 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 @@ -49,14 +49,13 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit { protected subscribeToParticipants() { this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((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.localParticipant = p; this.layoutService.update(); this.cd.markForCheck(); }); this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => { - this.remoteParticipants = [...participants]; + this.remoteParticipants = participants; 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.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts index dcea75f2..9f89df78 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts @@ -1,17 +1,20 @@ -import { Component, Input } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core'; import { ParticipantAbstractModel } from '../../../../models/participant.model'; @Component({ selector: 'ov-participant-panel-item', templateUrl: './participant-panel-item.component.html', - styleUrls: ['./participant-panel-item.component.css'] + styleUrls: ['./participant-panel-item.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush + }) export class ParticipantPanelItemComponent { @Input() - set participant( p: ParticipantAbstractModel) { + set participant(p: ParticipantAbstractModel) { this._participant = p; } + _participant: ParticipantAbstractModel; constructor() {} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css index e0ec0517..e381b608 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css @@ -27,6 +27,8 @@ } .scrollable { + height: calc(100% - 60px); + max-height: calc(100% - 60px); overflow: auto; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html index 3f0bc91e..abfae45c 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html @@ -8,14 +8,14 @@
-
+
-
+
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 f9fcc698..50822f64 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 @@ -1,8 +1,9 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core'; -import { ParticipantAbstractModel, ParticipantModel } from '../../../../models/participant.model'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnDestroy, OnInit, TemplateRef } from '@angular/core'; +import { ParticipantAbstractModel } from '../../../../models/participant.model'; import { ParticipantService } from '../../../../services/participant/participant.service'; import { SidenavMenuService } from '../../../..//services/sidenav-menu/sidenav-menu.service'; import { ParticipantPanelItemDirective } from '../../../../directives/openvidu-angular.directive'; +import { Subscription } from 'rxjs'; @Component({ selector: 'ov-participants-panel', @@ -10,9 +11,12 @@ import { ParticipantPanelItemDirective } from '../../../../directives/openvidu-a styleUrls: ['./participants-panel.component.css'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class ParticipantsPanelComponent implements OnInit { +export class ParticipantsPanelComponent implements OnInit, OnDestroy { localParticipant: any; remoteParticipants: ParticipantAbstractModel[] = []; + + private localParticipantSubs: Subscription; + private remoteParticipantsSubs: Subscription; @ContentChild('participantPanelItem', { read: TemplateRef }) participantPanelItemTemplate: TemplateRef; @ContentChild(ParticipantPanelItemDirective) @@ -28,22 +32,34 @@ export class ParticipantsPanelComponent implements OnInit { protected participantService: ParticipantService, protected menuService: SidenavMenuService, private cd: ChangeDetectorRef - ) {} + ) { + + } ngOnInit(): void { - this.participantService.localParticipantObs.subscribe((p: ParticipantModel) => { + + this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p: ParticipantAbstractModel) => { this.localParticipant = p; // Mark for re-rendering using an impure pipe 'streamsTypesEnabled' this.cd.markForCheck(); }); - this.participantService.remoteParticipantsObs.subscribe((p: ParticipantModel[]) => { - this.remoteParticipants = p; + this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((p: ParticipantAbstractModel[]) => { + // Workaround which forc the objects references update + // After one entirely day trying to make it works, this is the only way + p.forEach((par, index) => { + this.remoteParticipants[index] = Object.create(par); + }); // Mark for re-rendering using an impure pipe 'streamsTypesEnabled' this.cd.markForCheck(); }); } + ngOnDestroy() { + if (this.localParticipantSubs) this.localParticipantSubs.unsubscribe(); + if (this.remoteParticipantsSubs) this.remoteParticipantsSubs.unsubscribe; + } + close() { this.menuService.closeMenu(); } 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 a15499f6..3e34fd88 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 @@ -33,7 +33,7 @@ export abstract class ParticipantAbstractModel { 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, + connected: model ? model.connected : true, type: model ? model.type : VideoType.CAMERA, streamManager: model ? model.streamManager : null, videoEnlarged: model ? model.videoEnlarged : false, 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 5dd3328d..b6b31a0f 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,15 +1,13 @@ import { Pipe, PipeTransform } from '@angular/core'; import { StreamModel, ParticipantAbstractModel } from '../models/participant.model'; -@Pipe({ name: 'streams', pure: true }) +@Pipe({ name: 'streams' }) export class ParticipantStreamsPipe implements PipeTransform { constructor() {} transform(participants: ParticipantAbstractModel[] | ParticipantAbstractModel): StreamModel[] { let streams: StreamModel[] = []; - console.log('STREAM PIPE') - debugger - if(Object.keys(participants).length > 0){ + if(participants && Object.keys(participants).length > 0){ if (Array.isArray(participants)) { participants.forEach((p) => { streams = streams.concat(p.getAvailableConnections()); @@ -23,11 +21,12 @@ export class ParticipantStreamsPipe implements PipeTransform { } } -@Pipe({ name: 'streamTypesEnabled', pure: false }) +@Pipe({ name: 'streamTypesEnabled' }) export class StreamTypesEnabledPipe implements PipeTransform { constructor() {} transform(participant: ParticipantAbstractModel): string { - return `(${participant?.getConnectionTypesActive().toString().replace(',', ', ')})`; + const activeStreams = participant?.getConnectionTypesActive().toString(); + return `(${activeStreams.replace(',', ', ')})`; } } 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 5be13c3f..cf4f873b 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 @@ -174,7 +174,7 @@ export class ParticipantService { } updateLocalParticipant() { - this._localParticipant.next(this.localParticipant); + this._localParticipant.next(Object.assign(Object.create(this.localParticipant),this.localParticipant)); } /** @@ -188,7 +188,7 @@ export class ParticipantService { type, videoEnlarged: type === VideoType.SCREEN, streamManager: subscriber, - connected: true, + connected: true, connectionId }; @@ -287,7 +287,7 @@ export class ParticipantService { } updateRemoteParticipants() { - this._remoteParticipants.next(this.remoteParticipants); + this._remoteParticipants.next([...this.remoteParticipants]); } protected getTypeConnectionData(data: string): VideoType {