diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html index 5edfb8ae..746fec95 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html @@ -18,6 +18,11 @@ {{ 'PANEL.PARTICIPANTS.YOU' | translate }} + + +
+ +
@@ -62,15 +67,5 @@
- - - diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss index d3317db5..1586373d 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss @@ -209,6 +209,30 @@ } } + // Participant badges container + .participant-badges { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; + + // Badge styling + ::ng-deep .badge { + // Badge variants + &.moderator { + color: var(--ov-warning-color, #f57c00); + } + + &.speaker { + color: var(--ov-primary-color, #1976d2); + } + + &.host { + color: var(--ov-success-color, #4caf50); + } + } + } + // After local participant content area .after-local-content { margin-top: 12px; diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts index 35fc5026..7576c276 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core'; import { Subscription } from 'rxjs'; import { ParticipantPanelItemElementsDirective } from '../../../../directives/template/openvidu-components-angular.directive'; -// import { ParticipantPanelAfterLocalParticipantDirective } from '../../../../directives/template/internals.directive'; +import { ParticipantPanelParticipantBadgeDirective } from '../../../../directives/template/internals.directive'; import { ParticipantModel } from '../../../../models/participant.model'; import { OpenViduComponentsConfigService } from '../../../../services/config/directive-config.service'; import { ParticipantService } from '../../../../services/participant/participant.service'; @@ -42,16 +42,16 @@ export class ParticipantPanelItemComponent implements OnInit, OnDestroy { } } - // /** - // * @ignore - // */ - // @ContentChild(ParticipantPanelAfterLocalParticipantDirective) - // set externalAfterLocalParticipant(afterLocalParticipant: ParticipantPanelAfterLocalParticipantDirective) { - // this._externalAfterLocalParticipant = afterLocalParticipant; - // if (afterLocalParticipant) { - // this.updateTemplatesAndMarkForCheck(); - // } - // } + /** + * @ignore + */ + @ContentChild(ParticipantPanelParticipantBadgeDirective) + set externalParticipantBadge(participantBadge: ParticipantPanelParticipantBadgeDirective) { + this._externalParticipantBadge = participantBadge; + if (participantBadge) { + this.updateTemplatesAndMarkForCheck(); + } + } /** * @internal @@ -61,7 +61,7 @@ export class ParticipantPanelItemComponent implements OnInit, OnDestroy { // Store directive references for template setup private _externalItemElements?: ParticipantPanelItemElementsDirective; - // private _externalAfterLocalParticipant?: ParticipantPanelAfterLocalParticipantDirective; + private _externalParticipantBadge?: ParticipantPanelParticipantBadgeDirective; /** * The participant to be displayed @@ -119,11 +119,11 @@ export class ParticipantPanelItemComponent implements OnInit, OnDestroy { } /** - * Gets the template for content after local participant + * Gets the template for local participant badge */ - // get afterLocalParticipantTemplate(): TemplateRef | undefined { - // return this._externalAfterLocalParticipant?.template; - // } + get participantBadgeTemplate(): TemplateRef | undefined { + return this._externalParticipantBadge?.template; + } /** * Checks if the current participant is the local participant @@ -146,21 +146,12 @@ export class ParticipantPanelItemComponent implements OnInit, OnDestroy { return !!this.participantPanelItemElementsTemplate; } - /** - * Checks if after local participant content is available - */ - // get hasAfterLocalContent(): boolean { - // return this.isLocalParticipant && !!this.afterLocalParticipantTemplate; - // } - /** * @internal * Sets up all templates using the template manager service */ private setupTemplates(): void { - this.templateConfig = this.templateManagerService.setupParticipantPanelItemTemplates( - this._externalItemElements - ); + this.templateConfig = this.templateManagerService.setupParticipantPanelItemTemplates(this._externalItemElements); // Apply templates to component properties for backward compatibility this.applyTemplateConfiguration(); diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/internals.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/internals.directive.ts index 8b266599..74fabe38 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/internals.directive.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/internals.directive.ts @@ -194,7 +194,6 @@ export class PreJoinDirective { ) {} } - /** * The ***ovParticipantPanelAfterLocalParticipant** directive allows you to inject custom HTML or Angular templates * immediately after the local participant item in the participant panel. @@ -249,4 +248,37 @@ export class LayoutAdditionalElementsDirective { public template: TemplateRef, public container: ViewContainerRef ) {} -} \ No newline at end of file +} + +/** + * The ***ovParticipantPanelParticipantBadge** directive allows you to inject custom badges or indicators + * in the participant panel. + * This enables you to add role indicators, status badges, or other visual elements. + * + * Usage example: + * ```html + * + *
+ * + * + * + * + * admin_panel_settings + * Moderator + * + * + * + *
+ *
+ * ``` + */ +@Directive({ + selector: '[ovParticipantPanelParticipantBadge]', + standalone: false +}) +export class ParticipantPanelParticipantBadgeDirective { + constructor( + public template: TemplateRef, + public container: ViewContainerRef + ) {} +} diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.module.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.module.ts index 25a55519..ea096455 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.module.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.module.ts @@ -14,7 +14,12 @@ import { ActivitiesPanelDirective, BackgroundEffectsPanelDirective } from './openvidu-components-angular.directive'; -import { LayoutAdditionalElementsDirective, ParticipantPanelAfterLocalParticipantDirective, PreJoinDirective } from './internals.directive'; +import { + LayoutAdditionalElementsDirective, + ParticipantPanelAfterLocalParticipantDirective, + ParticipantPanelParticipantBadgeDirective, + PreJoinDirective +} from './internals.directive'; @NgModule({ declarations: [ @@ -32,7 +37,8 @@ import { LayoutAdditionalElementsDirective, ParticipantPanelAfterLocalParticipan ActivitiesPanelDirective, PreJoinDirective, ParticipantPanelAfterLocalParticipantDirective, - LayoutAdditionalElementsDirective + LayoutAdditionalElementsDirective, + ParticipantPanelParticipantBadgeDirective // BackgroundEffectsPanelDirective ], exports: [ @@ -50,7 +56,8 @@ import { LayoutAdditionalElementsDirective, ParticipantPanelAfterLocalParticipan ActivitiesPanelDirective, PreJoinDirective, ParticipantPanelAfterLocalParticipantDirective, - LayoutAdditionalElementsDirective + LayoutAdditionalElementsDirective, + ParticipantPanelParticipantBadgeDirective // BackgroundEffectsPanelDirective ] })