projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
The *ovAdditionalPanels directive allows to add more extra panels to the PanelComponent. In this example we add a new panel alongside the default ones.
To mimic the toggling behavior of the default panels, we need to add a new button in the ToolbarComponent using the ToolbarAdditionalPanelButtonsDirective.
You can run the associated tutorial here.
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
<button mat-icon-button (click)="toggleMyPanel('my-panel')">
<mat-icon>360</mat-icon>
</button>
<button mat-icon-button (click)="toggleMyPanel('my-panel2')">
<mat-icon>star</mat-icon>
</button>
</div>
<div *ovAdditionalPanels id="my-panels">
<div id="my-panel1" *ngIf="showExternalPanel">
<h2>NEW PANEL</h2>
<p>This is my new additional panel</p>
</div>
<div id="my-panel2" *ngIf="showExternalPanel2">
<h2>NEW PANEL 2</h2>
<p>This is other new panel</p>
</div>
</div>
</ov-videoconference>We need to subscribe to the panelOpenedObs Observable to listen to the panel status and update our boolean variables
(showExternalPanel and showExternalPanel2) in charge of showing or hiding them.
export class AdditionalPanelsDirectiveComponent implements OnInit {
sessionId = "toolbar-additionalbtn-directive-example";
tokens!: TokenModel;
showExternalPanel: boolean = false;
showExternalPanel2: boolean = false;
constructor(
private httpClient: HttpClient,
private panelService: PanelService
) { }
async ngOnInit() {
this.subscribeToPanelToggling();
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken(),
};
}
subscribeToPanelToggling() {
this.panelService.panelOpenedObs.subscribe(
(ev: { opened: boolean; type?: PanelType | string }) => {
this.showExternalPanel = ev.opened && ev.type === "my-panel";
this.showExternalPanel2 = ev.opened && ev.type === "my-panel2";
}
);
}
toggleMyPanel(type: string) {
this.panelService.togglePanel(type);
}
async getToken(): Promise<string> {
// Returns an OpeVidu token
}
}| Selector | [ovAdditionalPanels] |