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
]
})