ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: refactor leave button implementation for improved template handling

master
Carlos Santos 2025-09-19 14:52:01 +02:00
parent 6da901e7bb
commit 4654c48f22
2 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.html
View File

@ -199,9 +199,6 @@
<!-- Leave session button --> <!-- Leave session button -->
@if (showLeaveButtonDirect()) { @if (showLeaveButtonDirect()) {
@if (toolbarLeaveButtonTemplate) {
<ng-container *ngTemplateOutlet="toolbarLeaveButtonTemplate"></ng-container>
} @else {
<button <button
mat-icon-button mat-icon-button
(click)="onLeaveClick()" (click)="onLeaveClick()"
@ -212,4 +209,7 @@
<mat-icon>call_end</mat-icon> <mat-icon>call_end</mat-icon>
</button> </button>
} }
@if (toolbarLeaveButtonTemplate) {
<ng-container *ngTemplateOutlet="toolbarLeaveButtonTemplate"></ng-container>
} }

7
openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/internals.directive.ts
View File

@ -223,13 +223,12 @@ export class ParticipantPanelAfterLocalParticipantDirective {
} }
/** /**
* The ***ovLeaveButton** directive allows you to replace the default leave button with a custom template. * The ***ovLeaveButton** directive allows you to inject a custom leave button template. You can use the toolbarLeaveButton = false for
* Use this directive to provide your own button, confirm dialogs, or any custom leave logic while keeping * replacing the default leave button with your custom one.
* the internal leave flow intact.
* *
* Usage example: * Usage example:
* ```html * ```html
* <ov-videoconference> * <ov-videoconference [toolbarLeaveButton]="false">
* <ng-container *ovLeaveButton> * <ng-container *ovLeaveButton>
* <button class="my-leave-button" (click)="customLeave()"> * <button class="my-leave-button" (click)="customLeave()">
* Leave meeting * Leave meeting