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] |