projects/openvidu-components-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.
OnInit
OnDestroy
AfterViewInit
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | ov-toolbar |
| styleUrls | ./toolbar.component.scss |
| templateUrl | ./toolbar.component.html |
| onAudioEnabledChanged |
Type : EventEmitter<boolean>
|
|
This event is emitted when the video state changes, providing information about if the video is enabled (true) or disabled (false). |
| onBroadcastingStopRequested |
Type : EventEmitter<BroadcastingStopRequestedEvent>
|
|
Provides event notifications that fire when stop broadcasting has been requested. It provides the BroadcastingStopRequestedEvent payload as event data. |
| onFullscreenEnabledChanged |
Type : EventEmitter<boolean>
|
|
This event is emitted when the fullscreen state changes, providing information about if the fullscreen is enabled (true) or disabled (false). |
| onRecordingStartRequested |
Type : EventEmitter<RecordingStartRequestedEvent>
|
|
This event is fired when the user clicks on the start recording button. It provides the RecordingStartRequestedEvent payload as event data. |
| onRecordingStopRequested |
Type : EventEmitter<RecordingStopRequestedEvent>
|
|
Provides event notifications that fire when stop recording has been requested. It provides the RecordingStopRequestedEvent payload as event data. |
| onRoomDisconnected |
Type : EventEmitter<void>
|
|
This event is emitted when the room has been disconnected. |
| onVideoEnabledChanged |
Type : EventEmitter<boolean>
|
|
This event is emitted when the video state changes, providing information about if the video is enabled (true) or disabled (false). |
With these kind of directives you can replace the default ToolbarComponent with your own component. You can also add your own components to the default ones.
| 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 |
With the following directives you can modify the default User Interface with the aim of fully customizing your videoconference application.
| Parameter | Type | Reference |
|---|---|---|
| screenshareButton | boolean |
ToolbarScreenshareButtonDirective |
| recordingButton | boolean |
ToolbarRecordingButtonDirective |
| broadcastingButton | boolean |
ToolbarBroadcastingButtonDirective |
| fullscreenButton | boolean |
ToolbarFullscreenButtonDirective |
| backgroundEffectsButton | boolean |
ToolbarBackgroundEffectsButtonDirective |
| settingsButton | boolean |
ToolbarSettingsButtonDirective |
| leaveButton | boolean |
ToolbarLeaveButtonDirective |
| participantsPanelButton | boolean |
ToolbarParticipantsPanelButtonDirective |
| chatPanelButton | boolean |
ToolbarChatPanelButtonDirective |
| activitiesPanelButton | boolean |
ToolbarActivitiesPanelButtonDirective |
| displayRoomName | boolean |
ToolbarDisplayRoomNameDirective |
| displayLogo | boolean |
ToolbarDisplayLogoDirective |