From a8c2459d5f330d9c779c4fc37f563f7ca883de93 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Mon, 5 May 2025 14:35:51 +0200
Subject: [PATCH] ov-components: implement OnPush change detection strategy and
 optimize change detection calls in prejoin component

---
 .../components/pre-join/pre-join.component.ts | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
index da10dadc..168b6a92 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
@@ -1,4 +1,14 @@
-import { ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	ChangeDetectorRef,
+	Component,
+	EventEmitter,
+	HostListener,
+	Input,
+	OnDestroy,
+	OnInit,
+	Output
+} from '@angular/core';
 import { Subscription } from 'rxjs';
 import { ILogger } from '../../models/logger.model';
 import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service';
@@ -18,6 +28,7 @@ import { StorageService } from '../../services/storage/storage.service';
 	selector: 'ov-pre-join',
 	templateUrl: './pre-join.component.html',
 	styleUrls: ['./pre-join.component.scss'],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	standalone: false
 })
 export class PreJoinComponent implements OnInit, OnDestroy {
@@ -35,7 +46,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 
 	windowSize: number;
 	isLoading = true;
-	participantName: string | undefined;
+	participantName: string | undefined = '';
 
 	/**
 	 * @ignore
@@ -78,12 +89,14 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 		this.subscribeToPrejoinDirectives();
 		await this.initializeDevices();
 		this.windowSize = window.innerWidth;
+		this.isLoading = false;
+		this.changeDetector.markForCheck();
 	}
 
-	ngAfterContentChecked(): void {
-		this.changeDetector.detectChanges();
-		this.isLoading = false;
-	}
+	// ngAfterContentChecked(): void {
+	// 	// this.changeDetector.detectChanges();
+	// 	this.isLoading = false;
+	// }
 
 	async ngOnDestroy() {
 		this.cdkSrv.setSelector('body');
@@ -139,25 +152,29 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 	private subscribeToPrejoinDirectives() {
 		this.minimalSub = this.libService.minimal$.subscribe((value: boolean) => {
 			this.isMinimal = value;
-			// this.cd.markForCheck();
+			this.changeDetector.markForCheck();
 		});
 		this.cameraButtonSub = this.libService.cameraButton$.subscribe((value: boolean) => {
 			this.showCameraButton = value;
+			this.changeDetector.markForCheck();
 		});
 		this.microphoneButtonSub = this.libService.microphoneButton$.subscribe((value: boolean) => {
 			this.showMicrophoneButton = value;
+			this.changeDetector.markForCheck();
 		});
 		this.displayLogoSub = this.libService.displayLogo$.subscribe((value: boolean) => {
 			this.showLogo = value;
-			// this.cd.markForCheck();
+			this.changeDetector.markForCheck();
 		});
 		this.libService.participantName$.subscribe((value: string) => {
-			console.warn('participantName', value);
-			if (value) this.participantName = value;
-			// this.cd.markForCheck();
+			if (value) {
+				this.participantName = value;
+				this.changeDetector.markForCheck();
+			}
 		});
 		this.displayParticipantNameSub = this.libService.prejoinDisplayParticipantName$.subscribe((value: boolean) => {
 			this.showParticipantName = value;
+			this.changeDetector.markForCheck();
 		});
 	}