From 000f21b9ddad1d6afc4fd40b5d5165c085b93874 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Thu, 24 Feb 2022 10:20:32 +0100
Subject: [PATCH] openvidu-components: Used OnPush change detection strategy

---
 .../lib/components/session/session.component.ts   | 15 ++++-----------
 .../lib/components/toolbar/toolbar.component.ts   | 12 ++++++++++--
 2 files changed, 14 insertions(+), 13 deletions(-)

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 638e2064..0ad6eb60 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
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ContentChild, EventEmitter, HostListener, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, HostListener, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
 import { Subscriber, Session, StreamEvent, StreamPropertyChangedEvent, SessionDisconnectedEvent, ConnectionEvent } from 'openvidu-browser';
 
 import { VideoType } from '../../models/video-type.model';
@@ -21,9 +21,10 @@ import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.ser
 @Component({
 	selector: 'ov-session',
 	templateUrl: './session.component.html',
-	styleUrls: ['./session.component.css']
+	styleUrls: ['./session.component.css'],
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SessionComponent implements OnInit, AfterViewInit {
+export class SessionComponent implements OnInit {
 	@ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef<any>;
 	@ContentChild('panel', { read: TemplateRef }) panelTemplate: TemplateRef<any>;
 	@ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef<any>;
@@ -112,12 +113,6 @@ export class SessionComponent implements OnInit, AfterViewInit {
 		this._session.emit(this.session);
 	}
 
-	ngAfterViewInit(): void {
-		this.layoutService.initialize();
-		this.layoutService.update();
-
-	}
-
 	ngOnDestroy() {
 		// Reconnecting session is received in Firefox
 		// To avoid 'Connection lost' message uses session.off()
@@ -125,7 +120,6 @@ export class SessionComponent implements OnInit, AfterViewInit {
 		this.participantService.clear();
 		this.session = null;
 		this.sessionScreen = null;
-		this.layoutService.clear();
 		this.isChatPanelOpened = false;
 		this.isParticipantsPanelOpened = false;
 		if (this.menuSubscription) this.menuSubscription.unsubscribe();
@@ -238,7 +232,6 @@ export class SessionComponent implements OnInit, AfterViewInit {
 		this.session.on('streamDestroyed', (event: StreamEvent) => {
 			const connectionId = event.stream.connection.connectionId;
 			this.participantService.removeConnectionByConnectionId(connectionId);
-			// event.preventDefault();
 		});
 	}
 
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
index ac14fa66..697cca81 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
@@ -1,4 +1,6 @@
 import {
+	ChangeDetectionStrategy,
+	ChangeDetectorRef,
 	Component,
 	ContentChild,
 	EventEmitter,
@@ -28,7 +30,8 @@ import { MenuType } from '../../models/menu.model';
 @Component({
 	selector: 'ov-toolbar',
 	templateUrl: './toolbar.component.html',
-	styleUrls: ['./toolbar.component.css']
+	styleUrls: ['./toolbar.component.css'],
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ToolbarComponent implements OnInit, OnDestroy {
 	@ContentChild('centeredButtons', { read: TemplateRef }) centeredButtonsTemplate: TemplateRef<any>;
@@ -71,7 +74,8 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 		protected openviduService: OpenViduService,
 		protected oVDevicesService: DeviceService,
 		protected actionService: ActionService,
-		protected loggerSrv: LoggerService
+		protected loggerSrv: LoggerService,
+		private cd: ChangeDetectorRef
 	) {
 		this.log = this.loggerSrv.get('ToolbarComponent');
 	}
@@ -292,18 +296,22 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 				this.unreadMessages++;
 			}
 			this.messageList = messages;
+			this.cd.markForCheck();
 		});
 	}
 	protected subscribeToUserMediaProperties() {
 		this.screenShareStateSubscription = this.participantService.screenShareState.subscribe((active) => {
 			this.isScreenShareActive = active;
+			this.cd.markForCheck();
 		});
 
 		this.webcamVideoStateSubscription = this.participantService.webcamVideoActive.subscribe((active) => {
 			this.isWebcamVideoActive = active;
+			this.cd.markForCheck();
 		});
 		this.webcamAudioStateSubscription = this.participantService.webcamAudioActive.subscribe((active) => {
 			this.isWebcamAudioActive = active;
+			this.cd.markForCheck();
 		});
 	}
 }