neoris/openvidu-meet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: Update moderation tooltips and move display properties interface

Browse Source
This commit is contained in:
CSantosM 2026-01-21 17:01:23 +01:00
parent 5cdc49d90c
commit ed057612a0
3 changed files with 16 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
meet-ce/frontend/projects/shared-meet-components/src/lib/domains/meeting/customization/meeting-participant-item/meeting-participant-item.component.html
View File

@ -7,7 +7,7 @@
<ng-container *ovParticipantPanelParticipantBadge>
@if (ctx.showModeratorBadge) {
<span class="moderator-badge" [attr.id]="'moderator-badge-' + participantContext.sid">
<mat-icon [matTooltip]="moderatorBadgeTooltip" class="material-symbols-outlined">
<mat-icon [matTooltip]="'Moderator'" class="material-symbols-outlined">
shield_person
</mat-icon>
</span>
@ -26,7 +26,7 @@
<button
mat-icon-button
(click)="onMakeModeratorClick(participantContext, localParticipant)"
[matTooltip]="makeModeratorTooltip"
[matTooltip]="'Make participant moderator'"
class="make-moderator-btn"
[attr.id]="'make-moderator-btn-' + participantContext.sid"
>
@ -39,7 +39,7 @@
<button
mat-icon-button
(click)="onUnmakeModeratorClick(participantContext, localParticipant)"
[matTooltip]="unmakeModeratorTooltip"
[matTooltip]="'Unmake participant moderator'"
class="remove-moderator-btn"
[attr.id]="'remove-moderator-btn-' + participantContext.sid"
>
@ -52,7 +52,7 @@
<button
mat-icon-button
(click)="onKickParticipantClick(participantContext, localParticipant)"
[matTooltip]="kickParticipantTooltip"
[matTooltip]="'Kick participant'"
class="force-disconnect-btn"
[attr.id]="'kick-participant-btn-' + participantContext.sid"
>

19
meet-ce/frontend/projects/shared-meet-components/src/lib/domains/meeting/customization/meeting-participant-item/meeting-participant-item.component.ts
View File

@ -5,20 +5,9 @@ import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MeetRoomMemberRole } from '@openvidu-meet/typings';
import { LoggerService, OpenViduComponentsUiModule } from 'openvidu-components-angular';
import { CustomParticipantModel } from '../../models';
import { CustomParticipantModel, ParticipantDisplayProperties } from '../../models/custom-participant.model';
import { MeetingService } from '../../services/meeting.service';
/**
* Interface for computed participant display properties
*/
export interface ParticipantDisplayProperties {
showModeratorBadge: boolean;
showModerationControls: boolean;
showMakeModeratorButton: boolean;
showUnmakeModeratorButton: boolean;
showKickButton: boolean;
}
/**
* Reusable component for displaying participant panel items with moderation controls.
* This component receives context from the template (participant, localParticipant).
@ -37,12 +26,6 @@ export class MeetingParticipantItemComponent {
protected loggerService = inject(LoggerService);
protected log = this.loggerService.get('OpenVidu Meet - MeetingParticipantItem');
// Tooltips (could be made configurable in the future if needed)
protected readonly moderatorBadgeTooltip = 'Moderator';
protected readonly makeModeratorTooltip = 'Make participant moderator';
protected readonly unmakeModeratorTooltip = 'Unmake participant moderator';
protected readonly kickParticipantTooltip = 'Kick participant';
/**
* Get or compute display properties for a participant
*/

11
meet-ce/frontend/projects/shared-meet-components/src/lib/domains/meeting/models/custom-participant.model.ts
View File

@ -1,6 +1,17 @@
import { MeetRoomMemberRole, MeetRoomMemberTokenMetadata } from '@openvidu-meet/typings';
import { ParticipantModel, ParticipantProperties } from 'openvidu-components-angular';
/**
* Interface for computed participant display properties
*/
export interface ParticipantDisplayProperties {
showModeratorBadge: boolean;
showModerationControls: boolean;
showMakeModeratorButton: boolean;
showUnmakeModeratorButton: boolean;
showKickButton: boolean;
}
// Represents a participant in the application.
export class CustomParticipantModel extends ParticipantModel {
// Indicates the original role of the participant.