ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-elements: Added participant panel item elements directive 

Allowed to add html elements to participants item
pull/707/head
csantosm 2022-03-10 12:33:49 +01:00
parent 115e9131d0
commit 412a95ea43
7 changed files with 66 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {

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

@ -7,15 +7,22 @@
<span class="participant-subtitle"></span>
</p> -->
<button
mat-icon-button
id="action-btn"
*ngIf="!_participant.local"
[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>
</button>
<div class="participant-action-buttons">
<button
mat-icon-button
id="action-btn"
*ngIf="!_participant.local"
[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>
</button>
<!-- External item elements -->
<ng-container *ngIf="participantPanelItemElementsTemplate">
<ng-container *ngTemplateOutlet="participantPanelItemElementsTemplate"></ng-container>
</ng-container>
</div>
</mat-list-item>
</mat-list>

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

@ -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);
}
}

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

@ -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>

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

@ -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');
}

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

@ -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 {}

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

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