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

openvidu-components: Updated API directives

pull/707/head
csantosm 2022-03-08 17:47:37 +01:00
parent 4d659581b7
commit 1ee9486143
5 changed files with 174 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html
View File

@ -1,6 +1,6 @@
<div id="layout" class="layout"> <div id="layout" class="layout">
<div <div
class="OT_root OT_publisher ovStream" class="OT_root OT_publisher"
*ngFor="let stream of localParticipant | streams" *ngFor="let stream of localParticipant | streams"
[ngClass]="{ OV_big: stream.videoEnlarged }" [ngClass]="{ OV_big: stream.videoEnlarged }"
> >
@ -9,7 +9,7 @@
<div <div
*ngFor="let stream of remoteParticipants | streams" *ngFor="let stream of remoteParticipants | streams"
class="OT_root OT_publisher ovStream" class="OT_root OT_publisher"
id="remote-participant" id="remote-participant"
[ngClass]="{ OV_big: stream.videoEnlarged }" [ngClass]="{ OV_big: stream.videoEnlarged }"
> >

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html
View File

@ -19,7 +19,7 @@
</mat-sidenav-content> </mat-sidenav-content>
</mat-sidenav-container> </mat-sidenav-container>
<div id="footer-container" class="ovToolbar"> <div id="footer-container">
<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container> <ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
</div> </div>
</div> </div>

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

@ -1,42 +1,29 @@
import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core'; import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service'; import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
const VIDEOCONFERENCE_COMPONENT_NAME = 'ov-videoconference';
const OV_STREAM_CLASS = 'ovStream';
@Directive({ @Directive({
selector: 'ov-videoconference[streamDisplayParticipantName], [displayParticipantName]' selector: 'ov-videoconference[streamDisplayParticipantName], ov-stream[displayParticipantName]'
}) })
export class StreamDisplayParticipantNameDirective implements AfterViewInit { export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnDestroy {
@Input() set streamDisplayParticipantName(value: boolean) { @Input() set streamDisplayParticipantName(value: boolean) {
this.displayParticipantNameValue = value; this.displayParticipantNameValue = value;
this.update(this.displayParticipantNameValue); this.update(this.displayParticipantNameValue);
} }
@Input() set displayParticipantName(value: boolean) { @Input() set displayParticipantName(value: boolean) {
const element = <HTMLElement>this.elementRef.nativeElement; this.displayParticipantNameValue = value;
// Checking if element is injected inside of an element with ovToolbar class this.update(this.displayParticipantNameValue);
const isExternalComponentInput = element.parentElement?.classList.contains(OV_STREAM_CLASS);
if (isExternalComponentInput) {
this.displayParticipantNameValue = value;
this.update(this.displayParticipantNameValue);
}
} }
displayParticipantNameValue: boolean; displayParticipantNameValue: boolean;
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() { ngOnDestroy(): void {
const element = <HTMLElement>this.elementRef.nativeElement; this.clear();
// Checking if 'screenButton' attribute is in the 'ov-videoconference' element }
const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
// Checking if element is injected inside of an element with ovToolbar class
const isExternalComponentInput = element.parentElement?.classList.contains(OV_STREAM_CLASS);
if (isGlobalInput || isExternalComponentInput) { ngAfterViewInit() {
this.update(this.displayParticipantNameValue); this.update(this.displayParticipantNameValue);
}
} }
update(value: boolean) { update(value: boolean) {
@ -44,25 +31,23 @@ export class StreamDisplayParticipantNameDirective implements AfterViewInit {
this.libService.displayParticipantName.next(value); this.libService.displayParticipantName.next(value);
} }
} }
clear() {
this.update(true);
}
} }
@Directive({ @Directive({
selector: 'ov-videoconference[streamDisplayAudioDetection], [displayAudioDetection]' selector: 'ov-videoconference[streamDisplayAudioDetection], ov-stream[displayAudioDetection]'
}) })
export class StreamDisplayAudioDetectionDirective implements AfterViewInit { export class StreamDisplayAudioDetectionDirective implements AfterViewInit, OnDestroy {
@Input() set streamDisplayAudioDetection(value: boolean) { @Input() set streamDisplayAudioDetection(value: boolean) {
this.displayAudioDetectionValue = value; this.displayAudioDetectionValue = value;
this.update(this.displayAudioDetectionValue); this.update(this.displayAudioDetectionValue);
} }
@Input() set displayAudioDetection(value: boolean) { @Input() set displayAudioDetection(value: boolean) {
const element = <HTMLElement>this.elementRef.nativeElement; this.displayAudioDetectionValue = value;
// Checking if element is injected inside of an element with ovToolbar class this.update(this.displayAudioDetectionValue);
const isExternalComponentInput = element.parentElement?.classList.contains(OV_STREAM_CLASS);
if (isExternalComponentInput) {
this.displayAudioDetectionValue = value;
this.update(this.displayAudioDetectionValue);
}
} }
displayAudioDetectionValue: boolean; displayAudioDetectionValue: boolean;
@ -70,15 +55,10 @@ export class StreamDisplayAudioDetectionDirective implements AfterViewInit {
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() { ngAfterViewInit() {
const element = <HTMLElement>this.elementRef.nativeElement; this.update(this.displayAudioDetectionValue);
// Checking if 'screenButton' attribute is in the 'ov-videoconference' element }
const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME; ngOnDestroy(): void {
// Checking if element is injected inside of an element with ovToolbar class this.clear();
const isExternalComponentInput = element.parentElement?.classList.contains(OV_STREAM_CLASS);
if (isGlobalInput || isExternalComponentInput) {
this.update(this.displayAudioDetectionValue);
}
} }
update(value: boolean) { update(value: boolean) {
@ -86,25 +66,22 @@ export class StreamDisplayAudioDetectionDirective implements AfterViewInit {
this.libService.displayAudioDetection.next(value); this.libService.displayAudioDetection.next(value);
} }
} }
clear() {
this.update(true);
}
} }
@Directive({ @Directive({
selector: 'ov-videoconference[streamSettingsButton], [settingsButton]' selector: 'ov-videoconference[streamSettingsButton], ov-stream[settingsButton]'
}) })
export class StreamSettingsButtonDirective implements AfterViewInit { export class StreamSettingsButtonDirective implements AfterViewInit, OnDestroy {
@Input() set streamSettingsButton(value: boolean) { @Input() set streamSettingsButton(value: boolean) {
this.settingsValue = value; this.settingsValue = value;
this.update(this.settingsValue); this.update(this.settingsValue);
} }
@Input() set settingsButton(value: boolean) { @Input() set settingsButton(value: boolean) {
const element = <HTMLElement>this.elementRef.nativeElement; this.settingsValue = value;
// Checking if element is injected inside of an element with ovToolbar class this.update(this.settingsValue);
const isExternalComponentInput = element.parentElement?.classList.contains(OV_STREAM_CLASS);
if (isExternalComponentInput) {
this.settingsValue = value;
this.update(this.settingsValue);
}
} }
settingsValue: boolean; settingsValue: boolean;
@ -112,15 +89,11 @@ export class StreamSettingsButtonDirective implements AfterViewInit {
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() { ngAfterViewInit() {
const element = <HTMLElement>this.elementRef.nativeElement; this.update(this.settingsValue);
// Checking if 'screenButton' attribute is in the 'ov-videoconference' element }
const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
// Checking if element is injected inside of an element with ovToolbar class
const isExternalComponentInput = element.parentElement?.classList.contains(OV_STREAM_CLASS);
if (isGlobalInput || isExternalComponentInput) { ngOnDestroy(): void {
this.update(this.settingsValue); this.clear();
}
} }
update(value: boolean) { update(value: boolean) {
@ -128,4 +101,8 @@ export class StreamSettingsButtonDirective implements AfterViewInit {
this.libService.settingsButton.next(value); this.libService.settingsButton.next(value);
} }
} }
clear() {
this.update(true);
}
} }

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

@ -1,26 +1,17 @@
import { AfterViewInit, Directive, ElementRef, HostListener, Input } from '@angular/core'; import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service'; import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
const VIDEOCONFERENCE_COMPONENT_NAME = 'ov-videoconference';
const OV_TOOLBAR_CLASS = 'ovToolbar';
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarScreenshareButton], [screenshareButton]' selector: 'ov-videoconference[toolbarScreenshareButton], ov-toolbar[screenshareButton]'
}) })
export class ToolbarScreenshareButtonDirective implements AfterViewInit { export class ToolbarScreenshareButtonDirective implements AfterViewInit, OnDestroy {
@Input() set toolbarScreenshareButton(value: boolean) { @Input() set toolbarScreenshareButton(value: boolean) {
this.screenshareValue = value; this.screenshareValue = value;
this.update(this.screenshareValue); this.update(this.screenshareValue);
} }
@Input() set screenshareButton(value: boolean) { @Input() set screenshareButton(value: boolean) {
const element = <HTMLElement>this.elementRef.nativeElement; this.screenshareValue = value;
// Checking if element is injected inside of an element with ovToolbar class this.update(this.screenshareValue);
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
if (isExternalComponentInput) {
this.screenshareValue = value;
this.update(this.screenshareValue);
}
} }
screenshareValue: boolean = true; screenshareValue: boolean = true;
@ -28,16 +19,15 @@ export class ToolbarScreenshareButtonDirective implements AfterViewInit {
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() { ngAfterViewInit() {
const element = <HTMLElement>this.elementRef.nativeElement; this.update(this.screenshareValue);
// We need to distinguish where the directive is being used }
// Checking if 'screenButton' attribute is in the 'ov-videoconference' element
const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
// Checking if element is injected inside of an element with ovToolbar class
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
if (isGlobalInput || isExternalComponentInput) { ngOnDestroy(): void {
this.update(this.screenshareValue); this.clear();
} }
clear() {
this.screenshareValue = true;
this.update(true);
} }
update(value: boolean) { update(value: boolean) {
@ -48,22 +38,16 @@ export class ToolbarScreenshareButtonDirective implements AfterViewInit {
} }
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarFullscreenButton], [fullscreenButton]' selector: 'ov-videoconference[toolbarFullscreenButton], ov-toolbar[fullscreenButton]'
}) })
export class ToolbarFullscreenButtonDirective implements AfterViewInit { export class ToolbarFullscreenButtonDirective implements AfterViewInit, OnDestroy {
@Input() set toolbarFullscreenButton(value: boolean) { @Input() set toolbarFullscreenButton(value: boolean) {
this.fullscreenValue = value; this.fullscreenValue = value;
this.update(this.fullscreenValue); this.update(this.fullscreenValue);
} }
@Input() set fullscreenButton(value: boolean) { @Input() set fullscreenButton(value: boolean) {
const element = <HTMLElement>this.elementRef.nativeElement; this.fullscreenValue = value;
// Checking if element is injected inside of an element with ovToolbar class this.update(this.fullscreenValue);
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
if (isExternalComponentInput) {
this.fullscreenValue = value;
this.update(this.fullscreenValue);
}
} }
fullscreenValue: boolean = true; fullscreenValue: boolean = true;
@ -71,16 +55,14 @@ export class ToolbarFullscreenButtonDirective implements AfterViewInit {
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() { ngAfterViewInit() {
const element = <HTMLElement>this.elementRef.nativeElement; this.update(this.fullscreenValue);
// We need to distinguish where the directive is being used }
// Checking if 'screenButton' attribute is in the 'ov-videoconference' element ngOnDestroy(): void {
const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME; this.clear();
// Checking if element is injected inside of an element with ovToolbar class }
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS); clear() {
this.fullscreenValue = true;
if (isGlobalInput || isExternalComponentInput) { this.update(true);
this.update(this.fullscreenValue);
}
} }
update(value: boolean) { update(value: boolean) {
@ -91,38 +73,32 @@ export class ToolbarFullscreenButtonDirective implements AfterViewInit {
} }
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarLeaveButton], [leaveButton]' selector: 'ov-videoconference[toolbarLeaveButton], ov-toolbar[leaveButton]'
}) })
export class ToolbarLeaveButtonDirective implements AfterViewInit { export class ToolbarLeaveButtonDirective implements AfterViewInit, OnDestroy {
@Input() set toolbarLeaveButton(value: boolean) { @Input() set toolbarLeaveButton(value: boolean) {
this.leaveValue = value; this.leaveValue = value;
this.update(this.leaveValue); this.update(this.leaveValue);
} }
@Input() set leaveButton(value: boolean) { @Input() set leaveButton(value: boolean) {
const element = <HTMLElement>this.elementRef.nativeElement; this.leaveValue = value;
// Checking if element is injected inside of an element with ovToolbar class this.update(this.leaveValue);
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
if (isExternalComponentInput) {
this.leaveValue = value;
this.update(this.leaveValue);
}
} }
leaveValue: boolean; leaveValue: boolean = true;
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() { ngAfterViewInit() {
const element = <HTMLElement>this.elementRef.nativeElement; this.update(this.leaveValue);
// Checking if 'screenButton' attribute is in the 'ov-videoconference' element }
const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
// Checking if element is injected inside of an element with ovToolbar class
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
if (isGlobalInput || isExternalComponentInput) { ngOnDestroy(): void {
this.update(this.leaveValue); this.clear();
} }
clear() {
this.leaveValue = true;
this.update(true);
} }
update(value: boolean) { update(value: boolean) {
@ -133,38 +109,32 @@ export class ToolbarLeaveButtonDirective implements AfterViewInit {
} }
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarParticipantsPanelButton], [participantsPanelButton]' selector: 'ov-videoconference[toolbarParticipantsPanelButton], ov-toolbar[participantsPanelButton]'
}) })
export class ToolbarParticipantsPanelButtonDirective implements AfterViewInit { export class ToolbarParticipantsPanelButtonDirective implements AfterViewInit, OnDestroy {
@Input() set toolbarParticipantsPanelButton(value: boolean) { @Input() set toolbarParticipantsPanelButton(value: boolean) {
this.participantsPanelValue = value; this.participantsPanelValue = value;
this.update(this.participantsPanelValue); this.update(this.participantsPanelValue);
} }
@Input() set participantsPanelButton(value: boolean) { @Input() set participantsPanelButton(value: boolean) {
const element = <HTMLElement>this.elementRef.nativeElement; this.participantsPanelValue = value;
// Checking if element is injected inside of an element with ovToolbar class this.update(this.participantsPanelValue);
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
if (isExternalComponentInput) {
this.participantsPanelValue = value;
this.update(this.participantsPanelValue);
}
} }
participantsPanelValue: boolean; participantsPanelValue: boolean = true;
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() { ngAfterViewInit() {
const element = <HTMLElement>this.elementRef.nativeElement; this.update(this.participantsPanelValue);
// Checking if 'screenButton' attribute is in the 'ov-videoconference' element }
const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
// Checking if element is injected inside of an element with ovToolbar class
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
if (isGlobalInput || isExternalComponentInput) { ngOnDestroy(): void {
this.update(this.participantsPanelValue); this.clear();
} }
clear() {
this.participantsPanelValue = true;
this.update(true);
} }
update(value: boolean) { update(value: boolean) {
@ -175,37 +145,31 @@ export class ToolbarParticipantsPanelButtonDirective implements AfterViewInit {
} }
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarChatPanelButton], [chatPanelButton]' selector: 'ov-videoconference[toolbarChatPanelButton], ov-toolbar[chatPanelButton]'
}) })
export class ToolbarChatPanelButtonDirective implements AfterViewInit { export class ToolbarChatPanelButtonDirective implements AfterViewInit, OnDestroy {
@Input() set toolbarChatPanelButton(value: boolean) { @Input() set toolbarChatPanelButton(value: boolean) {
this.toolbarChatPanelValue = value; this.toolbarChatPanelValue = value;
this.update(this.toolbarChatPanelValue); this.update(this.toolbarChatPanelValue);
} }
@Input() set chatPanelButton(value: boolean) { @Input() set chatPanelButton(value: boolean) {
const element = <HTMLElement>this.elementRef.nativeElement; this.toolbarChatPanelValue = value;
// Checking if element is injected inside of an element with ovToolbar class this.update(this.toolbarChatPanelValue);
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
if (isExternalComponentInput) {
this.toolbarChatPanelValue = value;
this.update(this.toolbarChatPanelValue);
}
} }
toolbarChatPanelValue: boolean; toolbarChatPanelValue: boolean = true;
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() { ngAfterViewInit() {
const element = <HTMLElement>this.elementRef.nativeElement; this.update(this.toolbarChatPanelValue);
// Checking if 'screenButton' attribute is in the 'ov-videoconference' element }
const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
// Checking if element is injected inside of an element with ovToolbar class
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
if (isGlobalInput || isExternalComponentInput) { ngOnDestroy(): void {
this.update(this.toolbarChatPanelValue); this.clear();
} }
clear() {
this.toolbarChatPanelValue = true;
this.update(true);
} }
update(value: boolean) { update(value: boolean) {
@ -216,38 +180,32 @@ export class ToolbarChatPanelButtonDirective implements AfterViewInit {
} }
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarDisplaySessionName], [displaySessionName]' selector: 'ov-videoconference[toolbarDisplaySessionName], ov-toolbar[displaySessionName]'
}) })
export class ToolbarDisplaySessionNameDirective implements AfterViewInit { export class ToolbarDisplaySessionNameDirective implements AfterViewInit, OnDestroy {
@Input() set toolbarDisplaySessionName(value: boolean) { @Input() set toolbarDisplaySessionName(value: boolean) {
this.displaySessionValue = value; this.displaySessionValue = value;
this.update(this.displaySessionValue); this.update(this.displaySessionValue);
} }
@Input() set displaySessionName(value: boolean) { @Input() set displaySessionName(value: boolean) {
const element = <HTMLElement>this.elementRef.nativeElement; this.displaySessionValue = value;
// Checking if element is injected inside of an element with ovToolbar class this.update(this.displaySessionValue);
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
if (isExternalComponentInput) {
this.displaySessionValue = value;
this.update(this.displaySessionValue);
}
} }
displaySessionValue: boolean; displaySessionValue: boolean = true;
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() { ngAfterViewInit() {
const element = <HTMLElement>this.elementRef.nativeElement; this.update(this.displaySessionValue);
// Checking if 'screenButton' attribute is in the 'ov-videoconference' element }
const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
// Checking if element is injected inside of an element with ovToolbar class
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
if (isGlobalInput || isExternalComponentInput) { ngOnDestroy(): void {
this.update(this.displaySessionValue); this.clear();
} }
clear() {
this.displaySessionValue = true;
this.update(true);
} }
update(value: boolean) { update(value: boolean) {
@ -258,38 +216,32 @@ export class ToolbarDisplaySessionNameDirective implements AfterViewInit {
} }
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarDisplayLogo], [displayLogo]' selector: 'ov-videoconference[toolbarDisplayLogo], ov-toolbar[displayLogo]'
}) })
export class ToolbarDisplayLogoDirective implements AfterViewInit { export class ToolbarDisplayLogoDirective implements AfterViewInit, OnDestroy {
@Input() set toolbarDisplayLogo(value: boolean) { @Input() set toolbarDisplayLogo(value: boolean) {
this.displayLogoValue = value; this.displayLogoValue = value;
this.update(this.displayLogoValue); this.update(this.displayLogoValue);
} }
@Input() set displayLogo(value: boolean) { @Input() set displayLogo(value: boolean) {
const element = <HTMLElement>this.elementRef.nativeElement; this.displayLogoValue = value;
// Checking if element is injected inside of an element with ovToolbar class this.update(this.displayLogoValue);
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
if (isExternalComponentInput) {
this.displayLogoValue = value;
this.update(this.displayLogoValue);
}
} }
displayLogoValue: boolean; displayLogoValue: boolean = true;
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() { ngAfterViewInit() {
const element = <HTMLElement>this.elementRef.nativeElement; this.update(this.displayLogoValue);
// Checking if 'screenButton' attribute is in the 'ov-videoconference' element }
const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
// Checking if element is injected inside of an element with ovToolbar class
const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
if (isGlobalInput || isExternalComponentInput) { ngOnDestroy(): void {
this.update(this.displayLogoValue); this.clear();
} }
clear() {
this.displayLogoValue = true;
this.update(true);
} }
update(value: boolean) { update(value: boolean) {
@ -316,4 +268,4 @@ export class LogoDirective {
const element = <HTMLImageElement>this.elementRef.nativeElement; const element = <HTMLImageElement>this.elementRef.nativeElement;
element.src = this.ovLogo || this.defaultLogo; element.src = this.ovLogo || this.defaultLogo;
} }
} }

51
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts
View File

@ -1,32 +1,67 @@
import { Directive, Input, ElementRef } from '@angular/core'; import { Directive, Input, ElementRef, OnDestroy } from '@angular/core';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service'; import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
@Directive({ @Directive({
selector: 'ov-videoconference[minimal]' selector: 'ov-videoconference[minimal]'
}) })
export class MinimalDirective { export class MinimalDirective implements OnDestroy {
@Input() set minimal(value: boolean) { @Input() set minimal(value: boolean) {
this.libService.minimal.next(value); this.update(value);
} }
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngOnDestroy(): void {
this.clear();
}
clear() {
this.update(false);
}
update(value: boolean) {
if (this.libService.minimal.getValue() !== value) {
this.libService.minimal.next(value);
}
}
} }
@Directive({ @Directive({
selector: 'ov-videoconference[videoMuted]' selector: 'ov-videoconference[videoMuted]'
}) })
export class VideoMutedDirective { export class VideoMutedDirective implements OnDestroy {
@Input() set videoMuted(value: boolean) { @Input() set videoMuted(value: boolean) {
this.libService.videoMuted.next(value); this.update(value);
} }
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngOnDestroy(): void {
this.clear();
}
clear() {
this.update(false);
}
update(value: boolean) {
if (this.libService.videoMuted.getValue() !== value) {
this.libService.videoMuted.next(value);
}
}
} }
@Directive({ @Directive({
selector: 'ov-videoconference[audioMuted]' selector: 'ov-videoconference[audioMuted]'
}) })
export class AudioMutedDirective { export class AudioMutedDirective implements OnDestroy {
@Input() set audioMuted(value: boolean) { @Input() set audioMuted(value: boolean) {
this.libService.audioMuted.next(value); this.update(value);
} }
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
}
ngOnDestroy(): void {
this.clear();
}
clear() {
this.update(false);
}
update(value: boolean) {
if (this.libService.audioMuted.getValue() !== value) {
this.libService.audioMuted.next(value);
}
}
}