mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Improved components cutomization
Custom structural directives have been added for improving the components customization. These improvements now allow add custom child components inside of a custom parent component. Besides, the conditional logic has been moved from view to model for improving maintainabilitypull/707/head
csantosm
parent
c24a6d4cd0
commit
b437547501
|
|
@ -3,6 +3,7 @@ import { Subscription } from 'rxjs';
|
|||
import { ParticipantService } from '../../services/participant/participant.service';
|
||||
import { ParticipantAbstractModel } from '../../models/participant.model';
|
||||
import { LayoutService } from '../../services/layout/layout.service';
|
||||
import { StreamDirective } from '../../directives/openvidu-angular.directive';
|
||||
|
||||
@Component({
|
||||
selector: 'ov-layout',
|
||||
|
|
@ -12,6 +13,15 @@ import { LayoutService } from '../../services/layout/layout.service';
|
|||
export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||
@ContentChild('stream', { read: TemplateRef }) streamTemplate: TemplateRef<any>;
|
||||
|
||||
@ContentChild(StreamDirective)
|
||||
set externalStream (externalStream: StreamDirective) {
|
||||
// This directive will has value only when STREAM component tagget with '*ovStream' directive
|
||||
// is inside of the layout component tagged with '*ovLayout' directive
|
||||
if(externalStream) {
|
||||
this.streamTemplate = externalStream.template;
|
||||
}
|
||||
}
|
||||
|
||||
localParticipant: ParticipantAbstractModel;
|
||||
remoteParticipants: ParticipantAbstractModel[] = [];
|
||||
protected localParticipantSubs: Subscription;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
<!-- CHAT panel -->
|
||||
<ng-content select="[chatPanel]" *ngIf="isChatPanelOpened"></ng-content>
|
||||
<ng-container *ngIf="isChatPanelOpened">
|
||||
<ng-container *ngTemplateOutlet="chatPanelTemplate"></ng-container>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<!-- PARTICIPANTS panel -->
|
||||
<ng-content select="[participantsPanel]" *ngIf="isParticipantsPanelOpened"></ng-content>
|
||||
<ng-container *ngIf="isParticipantsPanelOpened">
|
||||
<ng-container *ngTemplateOutlet="participantsPanelTemplate"></ng-container>
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Component, ContentChild, OnInit, TemplateRef } from '@angular/core';
|
||||
import { skip, Subscription } from 'rxjs';
|
||||
import { ChatPanelDirective, ParticipantsPanelDirective } from '../../directives/openvidu-angular.directive';
|
||||
import { MenuType } from '../../models/menu.model';
|
||||
import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.service';
|
||||
|
||||
|
|
@ -12,6 +13,24 @@ export class PanelComponent implements OnInit {
|
|||
@ContentChild('participantsPanel', { read: TemplateRef }) participantsPanelTemplate: TemplateRef<any>;
|
||||
@ContentChild('chatPanel', { read: TemplateRef }) chatPanelTemplate: TemplateRef<any>;
|
||||
|
||||
@ContentChild(ParticipantsPanelDirective)
|
||||
set externalParticipantPanel(externalParticipantsPanel: ParticipantsPanelDirective) {
|
||||
// This directive will has value only when PARTICIPANTS PANEL component tagged with '*ovParticipantsPanel'
|
||||
// is inside of the PANEL component tagged with '*ovPanel'
|
||||
if (externalParticipantsPanel) {
|
||||
this.participantsPanelTemplate = externalParticipantsPanel.template;
|
||||
}
|
||||
}
|
||||
|
||||
@ContentChild(ChatPanelDirective)
|
||||
set externalChatPanel(externalChatPanel: ChatPanelDirective) {
|
||||
// This directive will has value only when CHAT PANEL component tagged with '*ovChatPanel'
|
||||
// is inside of the PANEL component tagged with '*ovPanel'
|
||||
if (externalChatPanel) {
|
||||
this.chatPanelTemplate = externalChatPanel.template;
|
||||
}
|
||||
}
|
||||
|
||||
isParticipantsPanelOpened: boolean;
|
||||
isChatPanelOpened: boolean;
|
||||
menuSubscription: Subscription;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<mat-list>
|
||||
<mat-list-item>
|
||||
<mat-icon matListAvatar class="participant-avatar">person</mat-icon>
|
||||
<h3 matLine class="participant-nickname">{{ participant | nickname }}</h3>
|
||||
<p matLine class="participant-subtitle">{{ participant | streamsEnabled }}</p>
|
||||
<h3 matLine class="participant-nickname">{{ _participant | nickname }}</h3>
|
||||
<p matLine class="participant-subtitle">{{ _participant | streamsEnabled }}</p>
|
||||
<!-- <p matLine>
|
||||
<span class="participant-subtitle"></span>
|
||||
</p> -->
|
||||
</mat-list-item>
|
||||
<mat-divider *ngIf="showDividerLine"></mat-divider>
|
||||
</mat-list>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { ParticipantAbstractModel } from '../../../../models/participant.model';
|
||||
|
||||
@Component({
|
||||
|
|
@ -6,11 +6,13 @@ import { ParticipantAbstractModel } from '../../../../models/participant.model';
|
|||
templateUrl: './participant-panel-item.component.html',
|
||||
styleUrls: ['./participant-panel-item.component.css']
|
||||
})
|
||||
export class ParticipantPanelItemComponent implements OnInit {
|
||||
@Input() participant: ParticipantAbstractModel;
|
||||
@Input() showDividerLine: boolean;
|
||||
export class ParticipantPanelItemComponent {
|
||||
|
||||
@Input()
|
||||
set participant( p: ParticipantAbstractModel) {
|
||||
this._participant = p;
|
||||
}
|
||||
_participant: ParticipantAbstractModel;
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,18 +9,15 @@
|
|||
<div class="scrollable">
|
||||
|
||||
<div class="local-participant-container">
|
||||
<ov-participant-panel-item
|
||||
[participant]="localParticipant"
|
||||
[showDividerLine]="true"
|
||||
></ov-participant-panel-item>
|
||||
<ng-container *ngTemplateOutlet="participantPanelItemTemplate; context: { $implicit: localParticipant }"></ng-container>
|
||||
<mat-divider *ngIf="true"></mat-divider>
|
||||
</div>
|
||||
|
||||
<div class="remote-participants-container" *ngIf="remoteParticipants.length > 0">
|
||||
<ov-participant-panel-item
|
||||
*ngFor="let participant of remoteParticipants; let lastItem = last"
|
||||
[participant]="participant"
|
||||
[showDividerLine]="!lastItem"
|
||||
></ov-participant-panel-item>
|
||||
|
||||
<div *ngFor="let participant of remoteParticipants; let lastItem = last">
|
||||
<ng-container *ngTemplateOutlet="participantPanelItemTemplate; context: { $implicit: participant }"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
|
||||
import { ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core';
|
||||
import { ParticipantAbstractModel, ParticipantModel } from '../../../../models/participant.model';
|
||||
import { ParticipantService } from '../../../../services/participant/participant.service';
|
||||
import { SidenavMenuService } from '../../../..//services/sidenav-menu/sidenav-menu.service';
|
||||
import { ParticipantPanelItemDirective } from '../../../../directives/openvidu-angular.directive';
|
||||
|
||||
@Component({
|
||||
selector: 'ov-participants-panel',
|
||||
|
|
@ -11,8 +12,22 @@ import { SidenavMenuService } from '../../../..//services/sidenav-menu/sidenav-m
|
|||
export class ParticipantsPanelComponent implements OnInit {
|
||||
localParticipant: any;
|
||||
remoteParticipants: ParticipantAbstractModel[] = [];
|
||||
@ContentChild('participantPanelItem', { read: TemplateRef }) participantPanelItemTemplate: TemplateRef<any>;
|
||||
|
||||
constructor(protected participantService: ParticipantService, protected menuService: SidenavMenuService, private cd: ChangeDetectorRef) {}
|
||||
@ContentChild(ParticipantPanelItemDirective)
|
||||
set externalParticipantPanelItem(externalParticipantPanelItem: ParticipantPanelItemDirective) {
|
||||
// This directive will has value only when PARTICIPANT PANEL ITEM component tagged with '*ovParticipantPanelItem'
|
||||
// is inside of the PARTICIPANTS PANEL component tagged with '*ovParticipantsPanel'
|
||||
if (externalParticipantPanelItem) {
|
||||
this.participantPanelItemTemplate = externalParticipantPanelItem.template;
|
||||
}
|
||||
}
|
||||
|
||||
constructor(
|
||||
protected participantService: ParticipantService,
|
||||
protected menuService: SidenavMenuService,
|
||||
private cd: ChangeDetectorRef
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.participantService.localParticipantObs.subscribe((p: ParticipantModel) => {
|
||||
|
|
|
|||
|
|
@ -9,30 +9,17 @@
|
|||
fixedTopGap="0"
|
||||
fixedBottomGap="0"
|
||||
>
|
||||
|
||||
<!-- OPENVIDU PANEL -->
|
||||
<ng-content select="[panel]"></ng-content>
|
||||
|
||||
<ng-container *ngTemplateOutlet="panelTemplate"></ng-container>
|
||||
</mat-sidenav>
|
||||
|
||||
<mat-sidenav-content class="sidenav-main">
|
||||
<!-- OPENVIDU LAYOUT -->
|
||||
<ng-container *ngIf="layoutTemplate">
|
||||
<div id="layout-container">
|
||||
<ng-container *ngTemplateOutlet="layoutTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div id="layout-container">
|
||||
<ng-container *ngTemplateOutlet="layoutTemplate"></ng-container>
|
||||
</div>
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
|
||||
<!-- OPENVIDU TOOLBAR -->
|
||||
<div id="footer-container">
|
||||
<span #toolbarRef>
|
||||
<!-- Custom toolbar -->
|
||||
<ng-content select="[toolbar]"></ng-content>
|
||||
</span>
|
||||
|
||||
<!-- Default toolbar if custom toolbar is not injected -->
|
||||
<ov-toolbar *ngIf="toolbarRef.childNodes.length === 0"></ov-toolbar>
|
||||
<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@ import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.ser
|
|||
styleUrls: ['./session.component.css']
|
||||
})
|
||||
export class SessionComponent implements OnInit, AfterViewInit {
|
||||
@ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef<any>;
|
||||
@ContentChild('panel', { read: TemplateRef }) panelTemplate: TemplateRef<any>;
|
||||
@ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef<any>;
|
||||
|
||||
@Input() tokens: { webcam: string; screen: string };
|
||||
|
|
|
|||
|
|
@ -15,54 +15,69 @@
|
|||
|
||||
<div id="session-container" *ngIf="joinSessionClicked && isSessionAlive && !error">
|
||||
<ov-session [tokens]="_tokens">
|
||||
<ng-content select="[toolbar]" toolbar></ng-content>
|
||||
<ng-template #toolbar>
|
||||
<ng-container *ngIf="openviduAngularToolbarTemplate">
|
||||
<ng-container *ngTemplateOutlet="openviduAngularToolbarTemplate"></ng-container>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
|
||||
<!-- OPENVIDU PANEL -->
|
||||
<span #panelRef panel>
|
||||
<!-- Custom panel -->
|
||||
<ng-content select="[panel]"></ng-content>
|
||||
</span>
|
||||
|
||||
<!-- Default panel if the custom one is not injected -->
|
||||
<ov-panel *ngIf="panelRef.childNodes.length === 0" panel>
|
||||
<span #chatPanelRef chatPanel>
|
||||
<!-- Custom CHAT panel -->
|
||||
<ng-content select="[chatPanel]"></ng-content>
|
||||
</span>
|
||||
|
||||
<!-- Default CHAT PANEL if the custom one is not injected -->
|
||||
<ov-chat-panel *ngIf="chatPanelRef.childNodes.length === 0" chatPanel></ov-chat-panel>
|
||||
|
||||
<span #participantsPanelRef participantsPanel>
|
||||
<!-- Custom PARTICIPANTS panel -->
|
||||
<ng-content select="[participantsPanel]"></ng-content>
|
||||
</span>
|
||||
|
||||
<!-- Default PARTICIPANTS PANEL if the custom one is not injected -->
|
||||
<ov-participants-panel *ngIf="participantsPanelRef.childNodes.length === 0" participantsPanel></ov-participants-panel>
|
||||
</ov-panel>
|
||||
<ng-template #panel>
|
||||
<ng-container *ngIf="openviduAngularPanelTemplate">
|
||||
<ng-container *ngTemplateOutlet="openviduAngularPanelTemplate"></ng-container>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #layout>
|
||||
<!-- Custom layout -->
|
||||
<span #layoutRef layout>
|
||||
<ng-content select="[layout]"></ng-content>
|
||||
</span>
|
||||
|
||||
<!-- Default layout if custom layout is not injected -->
|
||||
<ov-layout *ngIf="layoutRef.childNodes.length === 0" layout>
|
||||
<ng-template #stream let-stream>
|
||||
<!-- Custom stream component -->
|
||||
<ng-container *ngIf="streamTemplate; else defaultStream">
|
||||
<ng-container *ngTemplateOutlet="streamTemplate; context: { $implicit: stream }"> </ng-container>
|
||||
</ng-container>
|
||||
|
||||
<!-- Default stream component if custom one is not injected -->
|
||||
<ng-template #defaultStream>
|
||||
<ov-stream [stream]="stream"></ov-stream>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</ov-layout>
|
||||
<ng-container *ngIf="openviduAngularLayoutTemplate">
|
||||
<ng-container *ngTemplateOutlet="openviduAngularLayoutTemplate"></ng-container>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</ov-session>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #defaultToolbar>
|
||||
<ov-toolbar></ov-toolbar>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #defaultPanel>
|
||||
<ov-panel>
|
||||
<ng-template #chatPanel>
|
||||
<ng-container *ngTemplateOutlet="openviduAngularChatPanelTemplate"></ng-container>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #participantsPanel>
|
||||
<ng-container *ngTemplateOutlet="openviduAngularParticipantsPanelTemplate"></ng-container>
|
||||
</ng-template>
|
||||
</ov-panel>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #defaultChatPanel>
|
||||
<ov-chat-panel></ov-chat-panel>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #defaultParticipantsPanel>
|
||||
<ov-participants-panel>
|
||||
<ng-template #participantPanelItem let-participant>
|
||||
<ng-container
|
||||
*ngTemplateOutlet="openviduAngularParticipantPanelItemTemplate; context: { $implicit: participant }"
|
||||
></ng-container>
|
||||
</ng-template>
|
||||
</ov-participants-panel>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #defaultParticipantPanelItem let-participant>
|
||||
<ov-participant-panel-item [participant]="participant"></ov-participant-panel-item>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #defaultLayout>
|
||||
<ov-layout>
|
||||
<ng-template #stream let-stream>
|
||||
<ng-container *ngTemplateOutlet="openviduAngularStreamTemplate; context: { $implicit: stream }"> </ng-container>
|
||||
</ng-template>
|
||||
</ov-layout>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #defaultStream let-stream>
|
||||
<ov-stream [stream]="stream"></ov-stream>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,47 @@
|
|||
import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
|
||||
import { StreamDirective } from '../../directives/stream/stream.directive';
|
||||
import { AfterViewInit, Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
|
||||
import {
|
||||
ChatPanelDirective,
|
||||
LayoutDirective,
|
||||
PanelDirective,
|
||||
ParticipantPanelItemDirective,
|
||||
ParticipantsPanelDirective,
|
||||
StreamDirective,
|
||||
ToolbarDirective
|
||||
} from '../../directives/openvidu-angular.directive';
|
||||
import { ILogger } from '../../models/logger.model';
|
||||
import { LoggerService } from '../../services/logger/logger.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ov-videoconference',
|
||||
templateUrl: './videoconference.component.html',
|
||||
styleUrls: ['./videoconference.component.css']
|
||||
})
|
||||
export class VideoconferenceComponent implements OnInit {
|
||||
streamTemplate: TemplateRef<any>;
|
||||
export class VideoconferenceComponent implements OnInit, AfterViewInit {
|
||||
//Toolbar
|
||||
@ContentChild(ToolbarDirective) externalToolbar: ToolbarDirective;
|
||||
// Panels
|
||||
@ContentChild(PanelDirective) externalPanel: PanelDirective;
|
||||
@ContentChild(ChatPanelDirective) externalChatPanel: ChatPanelDirective;
|
||||
@ContentChild(ParticipantsPanelDirective) externalParticipantsPanel: ParticipantsPanelDirective;
|
||||
@ContentChild(ParticipantPanelItemDirective) externalParticipantPanelItem: ParticipantPanelItemDirective;
|
||||
@ContentChild(LayoutDirective) externalLayout: LayoutDirective;
|
||||
@ContentChild(StreamDirective) externalStream: StreamDirective;
|
||||
|
||||
@ContentChild(StreamDirective)
|
||||
set customStream(customStream: StreamDirective) {
|
||||
if (customStream) {
|
||||
this.streamTemplate = customStream.template;
|
||||
}
|
||||
}
|
||||
@ViewChild('defaultToolbar', { static: false, read: TemplateRef }) defaultToolbarTemplate: TemplateRef<any>;
|
||||
@ViewChild('defaultPanel', { static: false, read: TemplateRef }) defaultPanelTemplate: TemplateRef<any>;
|
||||
@ViewChild('defaultChatPanel', { static: false, read: TemplateRef }) defaultChatPanelTemplate: TemplateRef<any>;
|
||||
@ViewChild('defaultParticipantsPanel', { static: false, read: TemplateRef }) defaultParticipantsPanelTemplate: TemplateRef<any>;
|
||||
@ViewChild('defaultParticipantPanelItem', { static: false, read: TemplateRef }) defaultParticipantPanelItemTemplate: TemplateRef<any>;
|
||||
@ViewChild('defaultLayout', { static: false, read: TemplateRef }) defaultLayoutTemplate: TemplateRef<any>;
|
||||
@ViewChild('defaultStream', { static: false, read: TemplateRef }) defaultStreamTemplate: TemplateRef<any>;
|
||||
|
||||
openviduAngularToolbarTemplate: TemplateRef<any>;
|
||||
openviduAngularPanelTemplate: TemplateRef<any>;
|
||||
openviduAngularChatPanelTemplate: TemplateRef<any>;
|
||||
openviduAngularParticipantsPanelTemplate: TemplateRef<any>;
|
||||
openviduAngularParticipantPanelItemTemplate: TemplateRef<any>;
|
||||
openviduAngularLayoutTemplate: TemplateRef<any>;
|
||||
openviduAngularStreamTemplate: TemplateRef<any>;
|
||||
|
||||
@Input() sessionName: string;
|
||||
@Input() userName: string;
|
||||
|
|
@ -24,7 +51,7 @@ export class VideoconferenceComponent implements OnInit {
|
|||
if (!tokens || (!tokens.webcam && !tokens.screen)) {
|
||||
//No tokens received
|
||||
// throw new Error('No tokens received');
|
||||
console.warn('No tokens received');
|
||||
this.log.w('No tokens received');
|
||||
} else {
|
||||
if (tokens.webcam || tokens.screen) {
|
||||
this._tokens = {
|
||||
|
|
@ -37,9 +64,6 @@ export class VideoconferenceComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
// @Input() openviduServerUrl: string;
|
||||
// @Input() openviduSecret: string;
|
||||
|
||||
@Output() onJoinClicked = new EventEmitter<any>();
|
||||
@Output() onCloseClicked = new EventEmitter<any>();
|
||||
|
||||
|
|
@ -50,7 +74,68 @@ export class VideoconferenceComponent implements OnInit {
|
|||
error: boolean = false;
|
||||
errorMessage: string = '';
|
||||
|
||||
constructor() {}
|
||||
private log: ILogger;
|
||||
|
||||
constructor(private loggerSrv: LoggerService) {
|
||||
this.log = this.loggerSrv.get('VideoconferenceComponent');
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
if (this.externalToolbar) {
|
||||
this.openviduAngularToolbarTemplate = this.externalToolbar.template;
|
||||
this.log.d('Setting EXTERNAL TOOLBAR');
|
||||
} else {
|
||||
this.openviduAngularToolbarTemplate = this.defaultToolbarTemplate;
|
||||
this.log.d('Setting DEFAULT TOOLBAR');
|
||||
}
|
||||
|
||||
if (this.externalPanel) {
|
||||
this.openviduAngularPanelTemplate = this.externalPanel.template;
|
||||
this.log.d('Setting EXTERNAL PANEL');
|
||||
} else {
|
||||
this.log.d('Setting DEFAULT PANEL');
|
||||
|
||||
if (this.externalParticipantsPanel) {
|
||||
this.openviduAngularParticipantsPanelTemplate = this.externalParticipantsPanel.template;
|
||||
this.log.d('Setting EXTERNAL PARTICIPANTS PANEL');
|
||||
} else {
|
||||
this.log.d('Setting DEFAULT PARTICIPANTS PANEL');
|
||||
if (this.externalParticipantPanelItem) {
|
||||
this.openviduAngularParticipantPanelItemTemplate = this.externalParticipantPanelItem.template;
|
||||
this.log.d('Setting EXTERNAL P ITEM');
|
||||
} else {
|
||||
this.openviduAngularParticipantPanelItemTemplate = this.defaultParticipantPanelItemTemplate;
|
||||
this.log.d('Setting DEFAULT P ITEM');
|
||||
}
|
||||
this.openviduAngularParticipantsPanelTemplate = this.defaultParticipantsPanelTemplate;
|
||||
}
|
||||
|
||||
if (this.externalChatPanel) {
|
||||
this.openviduAngularChatPanelTemplate = this.externalChatPanel.template;
|
||||
this.log.d('Setting EXTERNAL CHAT PANEL');
|
||||
} else {
|
||||
this.openviduAngularChatPanelTemplate = this.defaultChatPanelTemplate;
|
||||
this.log.d('Setting DEFAULT CHAT PANEL');
|
||||
}
|
||||
this.openviduAngularPanelTemplate = this.defaultPanelTemplate;
|
||||
}
|
||||
|
||||
if (this.externalLayout) {
|
||||
this.openviduAngularLayoutTemplate = this.externalLayout.template;
|
||||
this.log.d('Setting EXTERNAL LAYOUT');
|
||||
} else {
|
||||
this.log.d('Setting DEAFULT LAYOUT');
|
||||
|
||||
if (this.externalStream) {
|
||||
this.openviduAngularStreamTemplate = this.externalStream.template;
|
||||
this.log.d('Setting EXTERNAL STREAM');
|
||||
} else {
|
||||
this.openviduAngularStreamTemplate = this.defaultStreamTemplate;
|
||||
this.log.d('Setting DEFAULT STREAM');
|
||||
}
|
||||
this.openviduAngularLayoutTemplate = this.defaultLayoutTemplate;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
|
|
@ -61,12 +146,4 @@ export class VideoconferenceComponent implements OnInit {
|
|||
this.isSessionAlive = false;
|
||||
this.closeClicked = true;
|
||||
}
|
||||
|
||||
onMicClicked() {}
|
||||
|
||||
onCamClicked() {}
|
||||
|
||||
onScreenShareClicked() {}
|
||||
|
||||
onSpeakerLayoutClicked() {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import { OpenviduAngularDirective } from './openvidu-angular.directive';
|
||||
|
||||
describe('OpenviduAngularDirective', () => {
|
||||
it('should create an instance', () => {
|
||||
const directive = new OpenviduAngularDirective();
|
||||
expect(directive).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[ovToolbar]'
|
||||
})
|
||||
export class ToolbarDirective {
|
||||
constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[ovPanel]'
|
||||
})
|
||||
export class PanelDirective {
|
||||
constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[ovChatPanel]'
|
||||
})
|
||||
export class ChatPanelDirective {
|
||||
constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[ovParticipantsPanel]'
|
||||
})
|
||||
export class ParticipantsPanelDirective {
|
||||
constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[ovParticipantPanelItem]'
|
||||
})
|
||||
export class ParticipantPanelItemDirective {
|
||||
constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[ovLayout]'
|
||||
})
|
||||
export class LayoutDirective {
|
||||
constructor(public template: TemplateRef<any>, public container: ViewContainerRef) {}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[ovStream]'
|
||||
})
|
||||
export class StreamDirective {
|
||||
constructor(public template: TemplateRef<any>, public container: ViewContainerRef) {}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { StreamDirective } from './stream.directive';
|
||||
|
||||
describe('StreamDirective', () => {
|
||||
it('should create an instance', () => {
|
||||
const directive = new StreamDirective();
|
||||
expect(directive).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Directive, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[ovStream]'
|
||||
})
|
||||
export class StreamDirective implements OnInit {
|
||||
constructor(public template: TemplateRef<any>, public container: ViewContainerRef) {}
|
||||
|
||||
ngOnInit() {}
|
||||
}
|
||||
|
|
@ -36,7 +36,6 @@ import { StreamComponent } from './components/stream/stream.component';
|
|||
import { DialogTemplateComponent } from './components/material/dialog.component';
|
||||
|
||||
import { LinkifyPipe } from './pipes/linkify.pipe';
|
||||
import { TooltipListPipe } from './pipes/tooltip-list.pipe';
|
||||
import { StreamsEnabledPipe, NicknamePipe, ParticipantStreamsPipe } from './pipes/participant.pipe';
|
||||
|
||||
import { OpenViduAngularConfig } from './config/openvidu-angular.config';
|
||||
|
|
@ -58,12 +57,12 @@ import { ParticipantPanelItemComponent } from './components/panel/participants-p
|
|||
import { ParticipantsPanelComponent } from './components/panel/participants-panel/participants-panel/participants-panel.component';
|
||||
import { VideoconferenceComponent } from './components/videoconference/videoconference.component';
|
||||
import { PanelComponent } from './components/panel/panel.component';
|
||||
import { StreamDirective } from './directives/stream/stream.directive';
|
||||
import { AudioWaveComponent } from './components/audio-wave/audio-wave.component';
|
||||
|
||||
import { ChatPanelDirective, LayoutDirective, PanelDirective, ParticipantPanelItemDirective, ParticipantsPanelDirective, StreamDirective, ToolbarDirective } from './directives/openvidu-angular.directive';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
StreamDirective,
|
||||
UserSettingsComponent,
|
||||
VideoComponent,
|
||||
ToolbarComponent,
|
||||
|
|
@ -73,7 +72,6 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
|
|||
StreamComponent,
|
||||
DialogTemplateComponent,
|
||||
LinkifyPipe,
|
||||
TooltipListPipe,
|
||||
ParticipantStreamsPipe,
|
||||
StreamsEnabledPipe,
|
||||
NicknamePipe,
|
||||
|
|
@ -82,6 +80,13 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
|
|||
VideoconferenceComponent,
|
||||
AudioWaveComponent,
|
||||
PanelComponent,
|
||||
ToolbarDirective,
|
||||
PanelDirective,
|
||||
ChatPanelDirective,
|
||||
ParticipantsPanelDirective,
|
||||
ParticipantPanelItemDirective,
|
||||
LayoutDirective,
|
||||
StreamDirective
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
|
@ -130,6 +135,9 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
|
|||
VideoconferenceComponent,
|
||||
UserSettingsComponent,
|
||||
ToolbarComponent,
|
||||
PanelComponent,
|
||||
ParticipantsPanelComponent,
|
||||
ParticipantPanelItemComponent,
|
||||
ChatPanelComponent,
|
||||
SessionComponent,
|
||||
LayoutComponent,
|
||||
|
|
@ -137,7 +145,15 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
|
|||
VideoComponent,
|
||||
AudioWaveComponent,
|
||||
ParticipantStreamsPipe,
|
||||
StreamsEnabledPipe,
|
||||
NicknamePipe,
|
||||
CommonModule,
|
||||
ToolbarDirective,
|
||||
PanelDirective,
|
||||
ChatPanelDirective,
|
||||
ParticipantsPanelDirective,
|
||||
ParticipantPanelItemDirective,
|
||||
LayoutDirective,
|
||||
StreamDirective
|
||||
],
|
||||
entryComponents: [DialogTemplateComponent]
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export class StreamsEnabledPipe implements PipeTransform {
|
|||
constructor() {}
|
||||
|
||||
transform(participant: ParticipantAbstractModel): string {
|
||||
return `(${participant.getConnectionTypesEnabled().toString().replace(',', ', ')})`;
|
||||
return `(${participant?.getConnectionTypesEnabled().toString().replace(',', ', ')})`;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -31,6 +31,6 @@ export class StreamsEnabledPipe implements PipeTransform {
|
|||
export class NicknamePipe implements PipeTransform {
|
||||
constructor() {}
|
||||
transform(participant: ParticipantAbstractModel): string {
|
||||
return participant.getCameraNickname();
|
||||
return participant?.getCameraNickname();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,82 +0,0 @@
|
|||
// import { Pipe, PipeTransform } from '@angular/core';
|
||||
// import { SettingsModel } from '../models/settings.model';
|
||||
|
||||
// @Pipe({ name: 'hasChat', pure: true })
|
||||
// export class HasChatPipe implements PipeTransform {
|
||||
// constructor() {}
|
||||
// transform(ovSettings: SettingsModel): boolean {
|
||||
// return !ovSettings || ovSettings.hasChat();
|
||||
// }
|
||||
// }
|
||||
|
||||
// @Pipe({ name: 'hasAudio', pure: true })
|
||||
// export class HasAudioPipe implements PipeTransform {
|
||||
// constructor() {}
|
||||
// transform(ovSettings: SettingsModel): boolean {
|
||||
// return !ovSettings || ovSettings.hasAudio();
|
||||
// }
|
||||
// }
|
||||
|
||||
// @Pipe({ name: 'hasVideo', pure: true })
|
||||
// export class HasVideoPipe implements PipeTransform {
|
||||
// constructor() {}
|
||||
// transform(ovSettings: SettingsModel): boolean {
|
||||
// return !ovSettings || ovSettings.hasVideo();
|
||||
// }
|
||||
// }
|
||||
|
||||
// @Pipe({ name: 'isAutoPublish', pure: true })
|
||||
// export class IsAutoPublishPipe implements PipeTransform {
|
||||
// constructor() {}
|
||||
// transform(ovSettings: SettingsModel): boolean {
|
||||
// return !ovSettings || ovSettings.isAutoPublish();
|
||||
// }
|
||||
// }
|
||||
|
||||
// @Pipe({ name: 'hasScreenSharing', pure: true })
|
||||
// export class HasScreenSharingPipe implements PipeTransform {
|
||||
// constructor() {}
|
||||
// transform(ovSettings: SettingsModel): boolean {
|
||||
// return !ovSettings || ovSettings.hasScreenSharing();
|
||||
// }
|
||||
// }
|
||||
|
||||
// @Pipe({ name: 'hasFullscreen', pure: true })
|
||||
// export class HasFullscreenPipe implements PipeTransform {
|
||||
// constructor() {}
|
||||
// transform(ovSettings: SettingsModel): boolean {
|
||||
// return !ovSettings || ovSettings.hasFullscreen();
|
||||
// }
|
||||
// }
|
||||
|
||||
// @Pipe({ name: 'hasLayoutSpeaking', pure: true })
|
||||
// export class HasLayoutSpeakingPipe implements PipeTransform {
|
||||
// constructor() {}
|
||||
// transform(ovSettings: SettingsModel): boolean {
|
||||
// return !ovSettings || ovSettings.hasLayoutSpeaking();
|
||||
// }
|
||||
// }
|
||||
|
||||
// @Pipe({ name: 'hasExit', pure: true })
|
||||
// export class HasExitPipe implements PipeTransform {
|
||||
// constructor() {}
|
||||
// transform(ovSettings: SettingsModel): boolean {
|
||||
// return !ovSettings || ovSettings.hasExit();
|
||||
// }
|
||||
// }
|
||||
|
||||
// @Pipe({ name: 'hasToolbar', pure: true })
|
||||
// export class HasToolbarPipe implements PipeTransform {
|
||||
// constructor() {}
|
||||
// transform(ovSettings: SettingsModel): boolean {
|
||||
// return !ovSettings || ovSettings.hasToolbar();
|
||||
// }
|
||||
// }
|
||||
|
||||
// @Pipe({ name: 'hasFooter', pure: true })
|
||||
// export class HasFooterPipe implements PipeTransform {
|
||||
// constructor() {}
|
||||
// transform(ovSettings: SettingsModel): boolean {
|
||||
// return !ovSettings || ovSettings.hasFooter();
|
||||
// }
|
||||
// }
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
@Pipe({ name: 'tooltipList', pure: true })
|
||||
export class TooltipListPipe implements PipeTransform {
|
||||
transform(lines: string[]): string {
|
||||
let list = '';
|
||||
lines.forEach((line) => {
|
||||
list += '• ' + line + '\n';
|
||||
});
|
||||
|
||||
return list;
|
||||
}
|
||||
}
|
||||
|
|
@ -24,8 +24,10 @@ export * from './lib/services/storage/storage.service';
|
|||
export * from './lib/components/videoconference/videoconference.component';
|
||||
export * from './lib/components/user-settings/user-settings.component';
|
||||
export * from './lib/components/toolbar/toolbar.component';
|
||||
export * from './lib/components/panel/panel.component';
|
||||
export * from './lib/components/panel/chat-panel/chat-panel.component';
|
||||
export * from './lib/components/panel/participants-panel/participants-panel/participants-panel.component';
|
||||
export * from './lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component';
|
||||
export * from './lib/components/session/session.component';
|
||||
export * from './lib/components/layout/layout.component';
|
||||
export * from './lib/components/stream/stream.component';
|
||||
|
|
@ -43,4 +45,4 @@ export * from './lib/models/notification-options.model';
|
|||
export * from './lib/pipes/participant.pipe';
|
||||
|
||||
// Directives
|
||||
export * from './lib/directives/stream/stream.directive';
|
||||
export * from './lib/directives/openvidu-angular.directive';
|
||||
Loading…
Reference in New Issue