ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: implement OnPush change detection strategy and optimize change detection calls in prejoin component

master
Carlos Santos 2025-05-05 14:35:51 +02:00
parent 0074b28d3a
commit a8c2459d5f
1 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
View File

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