File

projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts

Description

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.

Example :
<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.

Example :
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
    }

}

Metadata

results matching ""

    No results matching ""