diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css
index ae5f341e..d165c77c 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css
+++ b/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 {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
index c7b72989..bd41673d 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
@@ -7,15 +7,22 @@
-->
-
+
+
+
+
+
+
+
+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts
index 9f89df78..9fb3b58d 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts
+++ b/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;
+ @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);
}
-
}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
index 62860180..8d398511 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
@@ -82,7 +82,13 @@
-
+
+
+
+
+
+
+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
index 73536158..3b90470e 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
+++ b/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;
openviduAngularParticipantsPanelTemplate: TemplateRef;
openviduAngularParticipantPanelItemTemplate: TemplateRef;
+ openviduAngularParticipantPanelItemElementsTemplate: TemplateRef;
openviduAngularLayoutTemplate: TemplateRef;
openviduAngularStreamTemplate: TemplateRef;
@@ -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');
}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts
index ecb5507c..c0faac07 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts
+++ b/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 {}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
index dc20ac24..44cbd793 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
+++ b/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, public viewContainer: ViewContainerRef) {}
}
+@Directive({
+ selector: '[ovParticipantPanelItemElements]'
+})
+export class ParticipantPanelItemElementsDirective {
+ constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {}
+}
+
@Directive({
selector: '[ovLayout]'
})