src/lib/directives/template/openvidu-angular.directive.ts
The *ovAdditionalPanels directive allows to add more extra panels to the PanelComponent. In this example we've added a new panel besides the defaults.
As we want to toggle this new panel as the others, we need to add a new button in the ToolbarComponent using the ToolbarAdditionalPanelButtonsDirective.
You can run the sample here.
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
<button (click)="toggleMyPanel('my-panel')">MY PANEL</button>
<button (click)="toggleMyPanel('my-panel2')">OTHER PANEL</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 for listening the panel status and update our boolean variables
(showExternalPanel and showExternalPanel2) for show and hide our panels.
export class AdditionalPanelsDirectiveComponent implements OnInit {
tokens: TokenModel;
sessionId = 'chat-panel-directive-example';
OPENVIDU_URL = 'https://localhost:4443';
OPENVIDU_SECRET = 'MY_SECRET';
showExternalPanel: boolean = false;
showExternalPanel2: boolean = false;
constructor(private httpClient: HttpClient, private panelService: PanelService) {}
ngOnInit() {
this.subscribeToPanelToggling();
}
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';
});
}
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
};
}
toggleMyPanel(type: string) {
this.panelService.togglePanel(type);
}
}| Selector | [ovAdditionalPanels] |