projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
The ToolbarComponent is hosted inside of the VideoconferenceComponent. It is in charge of displaying the participants controlls for handling the media, panels and more videoconference features.
This component allows us to show or hide certain HTML elements with the following Angular attribute directives with the aim of fully customizing the ToolbarComponent.
| Name | Type | Reference |
|---|---|---|
| screenshareButton | boolean |
ToolbarScreenshareButtonDirective |
| fullscreenButton | boolean |
ToolbarFullscreenButtonDirective |
| backgroundEffectsButton | boolean |
ToolbarBackgroundEffectsButtonDirective |
| leaveButton | boolean |
ToolbarLeaveButtonDirective |
| chatPanelButton | boolean |
ToolbarChatPanelButtonDirective |
| participantsPanelButton | boolean |
ToolbarParticipantsPanelButtonDirective |
| displayLogo | boolean |
ToolbarDisplayLogoDirective |
| displaySessionName | boolean |
ToolbarDisplaySessionNameDirective |
See all API Directives
The ToolbarComponent can be replaced with a custom component. It provides us the following Angular structural directives for doing this.
| Directive | Reference |
|---|---|
| *ovToolbar | ToolbarDirective |
It is also providing us a way to add additional buttons to the default toolbar. It will recognise the following directive in a child element.
| Directive | Reference |
|---|---|
| *ovToolbarAdditionalButtons | ToolbarAdditionalButtonsDirective |
| *ovToolbarAdditionalPanelButtons | ToolbarAdditionalPanelButtonsDirective |
See all OpenVidu Angular Directives
OnInit
OnDestroy
AfterViewInit
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | ov-toolbar |
| styleUrls | ./toolbar.component.css |
| templateUrl | ./toolbar.component.html |
| onActivitiesPanelButtonClicked |
Type : EventEmitter<void>
|
|
Provides event notifications that fire when activities panel button has been clicked. |
| onCameraButtonClicked |
Type : EventEmitter<void>
|
|
Provides event notifications that fire when camera toolbar button has been clicked. |
| onChatPanelButtonClicked |
Type : EventEmitter<void>
|
|
Provides event notifications that fire when chat panel button has been clicked. |
| onFullscreenButtonClicked |
Type : EventEmitter<void>
|
|
Provides event notifications that fire when fullscreen toolbar button has been clicked. |
| onLeaveButtonClicked |
Type : EventEmitter<void>
|
|
Provides event notifications that fire when leave button has been clicked. |
| onMicrophoneButtonClicked |
Type : EventEmitter<void>
|
|
Provides event notifications that fire when microphone toolbar button has been clicked. |
| onParticipantsPanelButtonClicked |
Type : EventEmitter<void>
|
|
Provides event notifications that fire when participants panel button has been clicked. |
| onScreenshareButtonClicked |
Type : EventEmitter<void>
|
|
Provides event notifications that fire when screenshare toolbar button has been clicked. |
| onStartBroadcastingClicked |
Type : EventEmitter<void>
|
|
Provides event notifications that fire when start broadcasting button has been clicked. |
| onStartRecordingClicked |
Type : EventEmitter<void>
|
|
Provides event notifications that fire when start recording button has been clicked. |
| onStopBroadcastingClicked |
Type : EventEmitter<void>
|
|
Provides event notifications that fire when stop broadcasting button has been clicked. |
| onStopRecordingClicked |
Type : EventEmitter<void>
|
|
Provides event notifications that fire when stop recording button has been clicked. |