projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.ts
The *ovParticipantPanelItem directive allows you to customize the default participant panel item template within the ParticipantsPanelComponent.
With the ovParticipantPanelItem directive, you can access the participant object from its context using the let
keyword and referencing the participant
variable as follows: *ovParticipantPanelItem="let participant"
. This allows you to access the ParticipantModel object.
In the example below, we demonstrate how to replace the participant panel item template with just a few lines of code.
Example :import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { lastValueFrom } from 'rxjs';
import { MatIcon } from '@angular/material/icon';
import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
import { MatIconButton } from '@angular/material/button';
import { OpenViduComponentsModule } from 'openvidu-components-angular';
@Component({
selector: 'app-root',
template: `
<!-- OpenVidu Video Conference Component -->
<ov-videoconference
[token]="token"
[livekitUrl]="LIVEKIT_URL"
(onTokenRequested)="onTokenRequested($event)"
>
<!-- Participant Panel Items -->
<div *ovParticipantPanelItem="let participant" style="display: flex">
<p>{{ participant.name }}</p>
<!-- More Options Menu -->
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<!-- Menu Content -->
<mat-menu #menu="matMenu">
<button mat-menu-item>Button 1</button>
<button mat-menu-item>Button 2</button>
</mat-menu>
</div>
</ov-videoconference>
`,
styles: [],
standalone: true,
imports: [
OpenViduComponentsModule,
MatIconButton,
MatMenuTrigger,
MatIcon,
MatMenu,
MatMenuItem,
],
})
export class AppComponent {
// For local development, leave these variables empty
// For production, configure them with correct URLs depending on your deployment
APPLICATION_SERVER_URL = '';
LIVEKIT_URL = '';
// Define the name of the room and initialize the token variable
roomName = 'participant-panel-item';
token!: string;
constructor(private httpClient: HttpClient) {
this.configureUrls();
}
private configureUrls() {
// If APPLICATION_SERVER_URL is not configured, use default value from local development
if (!this.APPLICATION_SERVER_URL) {
if (window.location.hostname === 'localhost') {
this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
} else {
this.APPLICATION_SERVER_URL =
'https://' + window.location.hostname + ':6443/';
}
}
// If LIVEKIT_URL is not configured, use default value from local development
if (!this.LIVEKIT_URL) {
if (window.location.hostname === 'localhost') {
this.LIVEKIT_URL = 'ws://localhost:7880/';
} else {
this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
}
}
}
// Function to request a token when a participant joins the room
async onTokenRequested(participantName: string) {
const { token } = await this.getToken(this.roomName, participantName);
this.token = token;
}
// Function to get a token from the server
getToken(roomName: string, participantName: string): Promise<any> {
try {
// Send a POST request to the server to obtain a token
return lastValueFrom(
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
roomName,
participantName,
})
);
} catch (error: any) {
// Handle errors, e.g., if the server is not reachable
if (error.status === 404) {
throw {
status: error.status,
message:
'Cannot connect with the backend. ' + error.url + ' not found',
};
}
throw error;
}
}
}
For a detailed tutorial on customizing participant panel items, please visit this link.
Selector | [ovParticipantPanelItem] |
Properties |
|
constructor(template: TemplateRef
|
|||||||||
Parameters :
|
Public template |
Type : TemplateRef<any>
|
Public viewContainer |
Type : ViewContainerRef
|