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