From 948a64c5514ab7d979ad395c0e69574a156c4ef7 Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Wed, 23 Feb 2022 12:13:28 +0100 Subject: [PATCH] openvidu-components: Added OnPush detection strategy --- .../lib/components/layout/layout.component.ts | 16 ++++++++++------ .../panel/chat-panel/chat-panel.component.ts | 5 +++-- .../src/lib/components/panel/panel.component.ts | 8 +++++--- .../participants-panel.component.ts | 5 +++-- .../lib/components/stream/stream.component.ts | 1 - .../user-settings/user-settings.component.ts | 5 +++-- 6 files changed, 24 insertions(+), 16 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 da033354..62e625f2 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 @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, ContentChild, OnDestroy, OnInit, TemplateRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnDestroy, OnInit, TemplateRef } from '@angular/core'; import { Subscription } from 'rxjs'; import { ParticipantService } from '../../services/participant/participant.service'; import { ParticipantAbstractModel } from '../../models/participant.model'; @@ -8,9 +8,10 @@ import { StreamDirective } from '../../directives/openvidu-angular.directive'; @Component({ selector: 'ov-layout', templateUrl: './layout.component.html', - styleUrls: ['./layout.component.css'] + styleUrls: ['./layout.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush }) -export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit { +export class LayoutComponent implements OnInit, OnDestroy { @ContentChild('stream', { read: TemplateRef }) streamTemplate: TemplateRef; @ContentChild(StreamDirective) @@ -27,30 +28,33 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit { protected localParticipantSubs: Subscription; protected remoteParticipantsSubs: Subscription; - constructor(protected layoutService: LayoutService, protected participantService: ParticipantService) {} + constructor(protected layoutService: LayoutService, protected participantService: ParticipantService, private cd: ChangeDetectorRef) {} ngOnInit(): void { this.subscribeToUsers(); + this.layoutService.initialize(); + this.layoutService.update(); } - ngAfterViewInit() {} - ngOnDestroy() { this.localParticipant = null; this.remoteParticipants = []; if (this.localParticipantSubs) this.localParticipantSubs.unsubscribe(); if (this.remoteParticipantsSubs) this.remoteParticipantsSubs.unsubscribe(); + this.layoutService.clear(); } protected subscribeToUsers() { this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => { this.localParticipant = p; this.layoutService.update(); + this.cd.markForCheck(); }); this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => { this.remoteParticipants = [...participants]; this.layoutService.update(); + this.cd.markForCheck(); }); } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts index a885dce2..77e8fd17 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'; import { Subscription } from 'rxjs'; import { ChatMessage } from '../../../models/chat.model'; import { MenuType } from '../../../models/menu.model'; @@ -8,7 +8,8 @@ import { SidenavMenuService } from '../../../services/sidenav-menu/sidenav-menu. @Component({ selector: 'ov-chat-panel', templateUrl: './chat-panel.component.html', - styleUrls: ['./chat-panel.component.css'] + styleUrls: ['./chat-panel.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class ChatPanelComponent implements OnInit, AfterViewInit { @ViewChild('chatScroll') chatScroll: ElementRef; diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts index cfa965bd..bdb79501 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts @@ -1,4 +1,4 @@ -import { Component, ContentChild, OnInit, TemplateRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core'; import { skip, Subscription } from 'rxjs'; import { ChatPanelDirective, ParticipantsPanelDirective } from '../../directives/openvidu-angular.directive'; import { MenuType } from '../../models/menu.model'; @@ -7,7 +7,8 @@ import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.ser @Component({ selector: 'ov-panel', templateUrl: './panel.component.html', - styleUrls: ['./panel.component.css'] + styleUrls: ['./panel.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class PanelComponent implements OnInit { @ContentChild('participantsPanel', { read: TemplateRef }) participantsPanelTemplate: TemplateRef; @@ -34,7 +35,7 @@ export class PanelComponent implements OnInit { isParticipantsPanelOpened: boolean; isChatPanelOpened: boolean; menuSubscription: Subscription; - constructor(protected menuService: SidenavMenuService) {} + constructor(protected menuService: SidenavMenuService, private cd: ChangeDetectorRef) {} ngOnInit(): void { this.subscribeToPanelToggling(); @@ -43,6 +44,7 @@ export class PanelComponent implements OnInit { this.menuSubscription = this.menuService.menuOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: MenuType }) => { this.isChatPanelOpened = ev.opened && ev.type === MenuType.CHAT; this.isParticipantsPanelOpened = ev.opened && ev.type === MenuType.PARTICIPANTS; + this.cd.markForCheck(); }); } 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 65660d73..1259228c 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,4 +1,4 @@ -import { ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core'; import { ParticipantAbstractModel, ParticipantModel } from '../../../../models/participant.model'; import { ParticipantService } from '../../../../services/participant/participant.service'; import { SidenavMenuService } from '../../../..//services/sidenav-menu/sidenav-menu.service'; @@ -7,7 +7,8 @@ import { ParticipantPanelItemDirective } from '../../../../directives/openvidu-a @Component({ selector: 'ov-participants-panel', templateUrl: './participants-panel.component.html', - styleUrls: ['./participants-panel.component.css'] + styleUrls: ['./participants-panel.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class ParticipantsPanelComponent implements OnInit { localParticipant: any; 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 62cc0815..33f1abe7 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 @@ -4,7 +4,6 @@ import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu'; import { NicknameMatcher } from '../../matchers/nickname.matcher'; import { VideoSizeIcon } from '../../models/icon.model'; import { ScreenType, VideoType } from '../../models/video-type.model'; -import { Storage } from '../../models/storage.model'; import { DocumentService } from '../../services/document/document.service'; import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service'; import { OpenViduService } from '../../services/openvidu/openvidu.service'; diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts index 59d1dc64..fa79141c 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; import { FormControl, Validators } from '@angular/forms'; import { Subscription } from 'rxjs'; @@ -22,7 +22,8 @@ import { ParticipantAbstractModel } from '../../models/participant.model'; @Component({ selector: 'ov-user-settings', templateUrl: './user-settings.component.html', - styleUrls: ['./user-settings.component.css'] + styleUrls: ['./user-settings.component.css'], + // changeDetection: ChangeDetectionStrategy.OnPush }) export class UserSettingsComponent implements OnInit, OnDestroy { @ViewChild('bodyCard') bodyCard: ElementRef;