ov-components: introduce isVideoconferenceHost utility function and update clear logic in directives

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/activities-panel.directive.ts

@@ -1,6 +1,10 @@
 import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
 import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
 
+function isVideoconferenceHost(elementRef: ElementRef): boolean {
+	return elementRef.nativeElement?.tagName?.toLowerCase() === 'ov-videoconference';
+}
+
 /**
  * The **recordingActivity** directive allows show/hide the recording activity in {@link ActivitiesPanelComponent}.
  *
@@ -41,8 +45,10 @@ export class ActivitiesPanelRecordingActivityDirective implements AfterViewInit,
 		this.update(this.recordingActivityValue);
 	}
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	clear() {
 		this.recordingActivityValue = true;
 		this.update(true);
@@ -93,8 +99,10 @@ export class ActivitiesPanelBroadcastingActivityDirective implements AfterViewIn
 		this.update(this.broadcastingActivityValue);
 	}
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	clear() {
 		this.broadcastingActivityValue = true;
 		this.update(true);

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts

@@ -4,6 +4,10 @@ import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy, O
 import { ParticipantModel } from '../../models/participant.model';
 import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
 
+function isVideoconferenceHost(elementRef: ElementRef): boolean {
+	return elementRef.nativeElement?.tagName?.toLowerCase() === 'ov-videoconference';
+}
+
 /**
  * Load default OpenVidu logo if custom one is not exist
  * @internal
@@ -70,8 +74,10 @@ export class LayoutRemoteParticipantsDirective {
 	) {}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 
 	ngAfterViewInit() {
 		this.update(this._ovRemoteParticipants);
@@ -117,8 +123,10 @@ export class ToolbarBrandingLogoDirective implements AfterViewInit, OnDestroy {
 	}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	private clear() {
 		this._brandingLogo = '';
 		this.update(this._brandingLogo);
@@ -153,8 +161,10 @@ export class PrejoinDisplayParticipantName implements OnDestroy {
 	) {}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 
 	private clear() {
 		this.update(true);
@@ -333,7 +343,7 @@ export class ToolbarViewRecordingsButtonDirective implements AfterViewInit, OnDe
 	}
 	private clear() {
 		this.viewRecordingsValue = false;
-		this.update(true);
+		this.update(this.viewRecordingsValue);
 	}
 
 	private update(value: boolean) {
@@ -469,7 +479,7 @@ export class RecordingActivityShowRecordingsListDirective implements AfterViewIn
 	}
 
 	private clear() {
-		this._value = true;
+		this._value = false;
 		this.update(this._value);
 	}
 

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/participant-panel-item.directive.ts

@@ -1,6 +1,10 @@
 import { Directive, AfterViewInit, OnDestroy, Input, ElementRef } from '@angular/core';
 import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
 
+function isVideoconferenceHost(elementRef: ElementRef): boolean {
+	return elementRef.nativeElement?.tagName?.toLowerCase() === 'ov-videoconference';
+}
+
 /**
  * The **muteButton** directive allows show/hide the muted button in participant panel item component.
  *
@@ -41,8 +45,10 @@ export class ParticipantPanelItemMuteButtonDirective implements AfterViewInit, O
 		this.update(this.muteValue);
 	}
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	clear() {
 		this.muteValue = true;
 		this.update(true);

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/stream.directive.ts

@@ -1,6 +1,10 @@
 import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
 import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
 
+function isVideoconferenceHost(elementRef: ElementRef): boolean {
+	return elementRef.nativeElement?.tagName?.toLowerCase() === 'ov-videoconference';
+}
+
 /**
  * The **displayParticipantName** directive allows show/hide the participants name in stream component.
  *
@@ -38,8 +42,10 @@ export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnD
 	) {}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 
 	ngAfterViewInit() {
 		this.update(this.displayParticipantNameValue);
@@ -94,8 +100,10 @@ export class StreamDisplayAudioDetectionDirective implements AfterViewInit, OnDe
 		this.update(this.displayAudioDetectionValue);
 	}
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 
 	update(value: boolean) {
 		this.libService.updateStreamConfig({ displayAudioDetection: value });
@@ -146,8 +154,10 @@ export class StreamVideoControlsDirective implements AfterViewInit, OnDestroy {
 	}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 
 	update(value: boolean) {
 		this.libService.updateStreamConfig({ videoControls: value });

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/toolbar.directive.ts

@@ -2,6 +2,10 @@ import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular
 import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
 import { ToolbarAdditionalButtonsPosition } from '../../models/toolbar.model';
 
+function isVideoconferenceHost(elementRef: ElementRef): boolean {
+	return elementRef.nativeElement?.tagName?.toLowerCase() === 'ov-videoconference';
+}
+
 /**
  * The **cameraButton** directive allows show/hide the camera toolbar button.
  *
@@ -53,8 +57,10 @@ export class ToolbarCameraButtonDirective implements AfterViewInit, OnDestroy {
 	}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 
 	private clear() {
 		this.cameraValue = true;
@@ -117,8 +123,10 @@ export class ToolbarMicrophoneButtonDirective implements AfterViewInit, OnDestro
 	}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 
 	private clear() {
 		this.microphoneValue = true;
@@ -181,8 +189,10 @@ export class ToolbarScreenshareButtonDirective implements AfterViewInit, OnDestr
 	}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 
 	private clear() {
 		this.screenshareValue = true;
@@ -243,8 +253,10 @@ export class ToolbarRecordingButtonDirective implements AfterViewInit, OnDestroy
 	}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	private clear() {
 		this.recordingValue = true;
 		this.update(true);
@@ -305,8 +317,10 @@ export class ToolbarBroadcastingButtonDirective implements AfterViewInit, OnDest
 	}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	private clear() {
 		this.broadcastingValue = true;
 		this.update(true);
@@ -366,8 +380,10 @@ export class ToolbarFullscreenButtonDirective implements AfterViewInit, OnDestro
 		this.update(this.fullscreenValue);
 	}
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	private clear() {
 		this.fullscreenValue = true;
 		this.update(true);
@@ -427,8 +443,10 @@ export class ToolbarBackgroundEffectsButtonDirective implements AfterViewInit, O
 		this.update(this.backgroundEffectsValue);
 	}
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	private clear() {
 		this.backgroundEffectsValue = true;
 		this.update(true);
@@ -547,8 +565,10 @@ export class ToolbarSettingsButtonDirective implements AfterViewInit, OnDestroy
 		this.update(this.settingsValue);
 	}
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	private clear() {
 		this.settingsValue = true;
 		this.update(true);
@@ -609,8 +629,10 @@ export class ToolbarLeaveButtonDirective implements AfterViewInit, OnDestroy {
 	}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	private clear() {
 		this.leaveValue = true;
 		this.update(true);
@@ -672,8 +694,10 @@ export class ToolbarParticipantsPanelButtonDirective implements AfterViewInit, O
 	}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	private clear() {
 		this.participantsPanelValue = true;
 		this.update(true);
@@ -733,8 +757,10 @@ export class ToolbarChatPanelButtonDirective implements AfterViewInit, OnDestroy
 	}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	private clear() {
 		this.toolbarChatPanelValue = true;
 		this.update(true);
@@ -794,8 +820,10 @@ export class ToolbarActivitiesPanelButtonDirective implements AfterViewInit, OnD
 	}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	private clear() {
 		this.toolbarActivitiesPanelValue = true;
 		this.update(true);
@@ -856,8 +884,10 @@ export class ToolbarDisplayRoomNameDirective implements AfterViewInit, OnDestroy
 	}
 
 	ngOnDestroy(): void {
+		if (isVideoconferenceHost(this.elementRef)) {
 			this.clear();
 		}
+	}
 	private clear() {
 		this.displayRoomValue = true;
 		this.update(true);