openvidu-elements: Added participant panel item elements directive

Allowed to add html elements to participants item

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css

@@ -5,9 +5,18 @@
 .participant-nickname {
 	font-weight: bold !important;
 }
+
 .participant-action-buttons{
 	display: flex;
-	padding-top: 0px;
+}
+
+ ::ng-deep .participant-action-buttons > *:not(#action-btn) {
+	display: contents;
+}
+
+::ng-deep .participant-action-buttons > *:not(#action-btn) > * {
+	margin: auto;
+
 }
 
 mat-list-item {

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html

@@ -7,15 +7,22 @@
 			<span class="participant-subtitle"></span>
 		</p> -->
 
-		<button
+		<div class="participant-action-buttons">
-			mat-icon-button
+			<button
-			id="action-btn"
+				mat-icon-button
-			*ngIf="!_participant.local"
+				id="action-btn"
-			[class.warn-btn]="_participant.isMutedForcibly"
+				*ngIf="!_participant.local"
-			(click)="toggleMuteForcibly()"
+				[class.warn-btn]="_participant.isMutedForcibly"
-		>
+				(click)="toggleMuteForcibly()"
-			<mat-icon *ngIf="!_participant.isMutedForcibly">volume_up</mat-icon>
+			>
-			<mat-icon *ngIf="_participant.isMutedForcibly">volume_off</mat-icon>
+				<mat-icon *ngIf="!_participant.isMutedForcibly">volume_up</mat-icon>
-		</button>
+				<mat-icon *ngIf="_participant.isMutedForcibly">volume_off</mat-icon>
+			</button>
+
+			<!-- External item elements  -->
+			<ng-container *ngIf="participantPanelItemElementsTemplate">
+				<ng-container *ngTemplateOutlet="participantPanelItemElementsTemplate"></ng-container>
+			</ng-container>
+		</div>
 	</mat-list-item>
 </mat-list>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, Input, TemplateRef } from '@angular/core';
+import { ParticipantPanelItemElementsDirective } from '../../../../directives/template/openvidu-angular.directive';
 import { ParticipantAbstractModel } from '../../../../models/participant.model';
 
 @Component({
@@ -6,9 +7,17 @@ import { ParticipantAbstractModel } from '../../../../models/participant.model';
 	templateUrl: './participant-panel-item.component.html',
 	styleUrls: ['./participant-panel-item.component.css'],
 	changeDetection: ChangeDetectionStrategy.OnPush
-
 })
 export class ParticipantPanelItemComponent {
+	@ContentChild('participantPanelItemElements', { read: TemplateRef }) participantPanelItemElementsTemplate: TemplateRef<any>;
+	@ContentChild(ParticipantPanelItemElementsDirective)
+	set externalItemElements(externalItemElements: ParticipantPanelItemElementsDirective) {
+		// This directive will has value only when ITEM ELEMENTS component tagget with '*ovParticipantPanelItemElements' directive
+		// is inside of the P PANEL ITEM component tagged with '*ovParticipantPanelItem' directive
+		if (externalItemElements) {
+			this.participantPanelItemElementsTemplate = externalItemElements.template;
+		}
+	}
 
 	@Input()
 	set participant(p: ParticipantAbstractModel) {
@@ -21,5 +30,4 @@ export class ParticipantPanelItemComponent {
 	toggleMuteForcibly() {
 		this._participant.setMutedForcibly(!this._participant.isMutedForcibly);
 	}
-
 }

openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html

@@ -82,7 +82,13 @@
 </ng-template>
 
 <ng-template #defaultParticipantPanelItem let-participant>
-	<ov-participant-panel-item [participant]="participant"></ov-participant-panel-item>
+	<ov-participant-panel-item [participant]="participant">
+
+		<ng-template #participantPanelItemElements>
+			<ng-container *ngTemplateOutlet="openviduAngularParticipantPanelItemElementsTemplate;  context: { $implicit: participant }"></ng-container>
+		</ng-template>
+
+	</ov-participant-panel-item>
 </ng-template>
 
 <ng-template #defaultLayout>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts

@@ -4,6 +4,7 @@ import {
 	LayoutDirective,
 	PanelDirective,
 	ParticipantPanelItemDirective,
+	ParticipantPanelItemElementsDirective,
 	ParticipantsPanelDirective,
 	StreamDirective,
 	ToolbarAdditionalButtonsDirective,
@@ -27,6 +28,8 @@ export class VideoconferenceComponent implements OnInit, AfterViewInit {
 	@ContentChild(ChatPanelDirective) externalChatPanel: ChatPanelDirective;
 	@ContentChild(ParticipantsPanelDirective) externalParticipantsPanel: ParticipantsPanelDirective;
 	@ContentChild(ParticipantPanelItemDirective) externalParticipantPanelItem: ParticipantPanelItemDirective;
+	@ContentChild(ParticipantPanelItemElementsDirective) externalParticipantPanelItemElements: ParticipantPanelItemElementsDirective;
+
 
 	// *** Layout ***
 	@ContentChild(LayoutDirective) externalLayout: LayoutDirective;
@@ -46,6 +49,7 @@ export class VideoconferenceComponent implements OnInit, AfterViewInit {
 	openviduAngularChatPanelTemplate: TemplateRef<any>;
 	openviduAngularParticipantsPanelTemplate: TemplateRef<any>;
 	openviduAngularParticipantPanelItemTemplate: TemplateRef<any>;
+	openviduAngularParticipantPanelItemElementsTemplate: TemplateRef<any>;
 	openviduAngularLayoutTemplate: TemplateRef<any>;
 	openviduAngularStreamTemplate: TemplateRef<any>;
 
@@ -110,7 +114,7 @@ export class VideoconferenceComponent implements OnInit, AfterViewInit {
 			this.log.d('Setting EXTERNAL TOOLBAR');
 		} else {
 			if (this.externalToolbarAdditionalButtons) {
-				this.log.d('Setting EXTERNAL TOOLBAR ADDITIONAL BUTTONS', this.externalToolbarAdditionalButtons.template);
+				this.log.d('Setting EXTERNAL TOOLBAR ADDITIONAL BUTTONS');
 				this.openviduAngularToolbarAdditionalButtonsTemplate = this.externalToolbarAdditionalButtons.template;
 			}
 			this.openviduAngularToolbarTemplate = this.defaultToolbarTemplate;
@@ -132,6 +136,10 @@ export class VideoconferenceComponent implements OnInit, AfterViewInit {
 					this.openviduAngularParticipantPanelItemTemplate = this.externalParticipantPanelItem.template;
 					this.log.d('Setting EXTERNAL P ITEM');
 				} else {
+					if (this.externalParticipantPanelItemElements) {
+						this.log.d('Setting EXTERNAL PARTICIPANT PANEL ITEM ELEMENT');
+						this.openviduAngularParticipantPanelItemElementsTemplate = this.externalParticipantPanelItemElements.template;
+					}
 					this.openviduAngularParticipantPanelItemTemplate = this.defaultParticipantPanelItemTemplate;
 					this.log.d('Setting DEFAULT P ITEM');
 				}

openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts

@@ -3,6 +3,7 @@ import {
 	ChatPanelDirective,
 	LayoutDirective,
 	PanelDirective,
+	ParticipantPanelItemElementsDirective,
 	ParticipantPanelItemDirective,
 	ParticipantsPanelDirective,
 	StreamDirective,
@@ -19,7 +20,8 @@ import {
 		ParticipantsPanelDirective,
 		StreamDirective,
 		ToolbarDirective,
-		ToolbarAdditionalButtonsDirective
+		ToolbarAdditionalButtonsDirective,
+		ParticipantPanelItemElementsDirective
 	],
 	exports: [
 		ChatPanelDirective,
@@ -29,7 +31,8 @@ import {
 		ParticipantsPanelDirective,
 		StreamDirective,
 		ToolbarDirective,
-		ToolbarAdditionalButtonsDirective
+		ToolbarAdditionalButtonsDirective,
+		ParticipantPanelItemElementsDirective
 	]
 })
 export class OpenViduAngularDirectiveModule {}

openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts

@@ -42,6 +42,13 @@ export class ParticipantPanelItemDirective {
 	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
 }
 
+@Directive({
+	selector: '[ovParticipantPanelItemElements]'
+})
+export class ParticipantPanelItemElementsDirective {
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
 @Directive({
 	selector: '[ovLayout]'
 })