mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Allowed external panels
- Allowed injecting external panels and exported the panel service for toggling panels and subscribe to the panel status - Renamed menu to panel - Updated docspull/713/head
csantosm
parent
150657763c
commit
d7b81739e7
|
|
@ -10,7 +10,7 @@ import {
|
|||
} from '@angular/core';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { ChatMessage } from '../../../models/chat.model';
|
||||
import { MenuType } from '../../../models/menu.model';
|
||||
import { PanelType } from '../../../models/panel.model';
|
||||
import { ChatService } from '../../../services/chat/chat.service';
|
||||
import { PanelService } from '../../../services/panel/panel.service';
|
||||
|
||||
|
|
@ -65,14 +65,14 @@ export class ChatPanelComponent implements OnInit, AfterViewInit {
|
|||
/**
|
||||
* @ignore
|
||||
*/
|
||||
constructor(private chatService: ChatService, private PanelService: PanelService, private cd: ChangeDetectorRef) {}
|
||||
constructor(private chatService: ChatService, private panelService: PanelService, private cd: ChangeDetectorRef) {}
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
@HostListener('document:keydown.escape', ['$event'])
|
||||
onKeydownHandler(event: KeyboardEvent) {
|
||||
if (this.PanelService.isPanelOpened()) {
|
||||
if (this.panelService.isPanelOpened()) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
|
@ -119,13 +119,13 @@ export class ChatPanelComponent implements OnInit, AfterViewInit {
|
|||
}
|
||||
|
||||
close() {
|
||||
this.PanelService.togglePanel(MenuType.CHAT);
|
||||
this.panelService.togglePanel(PanelType.CHAT);
|
||||
}
|
||||
|
||||
private subscribeToMessages() {
|
||||
this.chatMessageSubscription = this.chatService.messagesObs.subscribe((messages: ChatMessage[]) => {
|
||||
this.messageList = messages;
|
||||
if (this.PanelService.isPanelOpened()) {
|
||||
if (this.panelService.isPanelOpened()) {
|
||||
this.scrollToBottom();
|
||||
this.cd.markForCheck();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,4 +9,9 @@
|
|||
<ng-container *ngTemplateOutlet="participantsPanelTemplate"></ng-container>
|
||||
</ng-container>
|
||||
|
||||
<!-- External additional panels -->
|
||||
<ng-container *ngIf="additionalPanelsTemplate && isExternalPanelOpened">
|
||||
<ng-container *ngTemplateOutlet="additionalPanelsTemplate"></ng-container>
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core';
|
||||
import { skip, Subscription } from 'rxjs';
|
||||
import { ChatPanelDirective, ParticipantsPanelDirective } from '../../directives/template/openvidu-angular.directive';
|
||||
import { MenuType } from '../../models/menu.model';
|
||||
import { ChatPanelDirective, AdditionalPanelsDirective, ParticipantsPanelDirective } from '../../directives/template/openvidu-angular.directive';
|
||||
import { PanelType } from '../../models/panel.model';
|
||||
import { PanelService } from '../../services/panel/panel.service';
|
||||
|
||||
/**
|
||||
|
|
@ -32,6 +32,7 @@ import { PanelService } from '../../services/panel/panel.service';
|
|||
* |:----------------------------------:|:---------------------------------------------:|
|
||||
* | ***ovChatPanel** | {@link ChatPanelDirective} |
|
||||
* | ***ovParticipantsPanel** | {@link ParticipantsPanelDirective} |
|
||||
* | ***ovAdditionalPanels** | {@link AdditionalPanelsDirective} |
|
||||
*
|
||||
* <p class="component-link-text">
|
||||
* <span class="italic">See all {@link OpenViduAngularDirectiveModule OpenVidu Angular Directives}</span>
|
||||
|
|
@ -57,6 +58,11 @@ export class PanelComponent implements OnInit {
|
|||
*/
|
||||
@ContentChild('chatPanel', { read: TemplateRef }) chatPanelTemplate: TemplateRef<any>;
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
@ContentChild('additionalPanels', { read: TemplateRef }) additionalPanelsTemplate: TemplateRef<any>;
|
||||
|
||||
@ContentChild(ParticipantsPanelDirective)
|
||||
set externalParticipantPanel(externalParticipantsPanel: ParticipantsPanelDirective) {
|
||||
// This directive will has value only when PARTICIPANTS PANEL component tagged with '*ovParticipantsPanel'
|
||||
|
|
@ -75,9 +81,23 @@ export class PanelComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
@ContentChild(AdditionalPanelsDirective)
|
||||
set externalAdditionalPanels(externalAdditionalPanels: AdditionalPanelsDirective) {
|
||||
// This directive will has value only when ADDITIONAL PANELS component tagged with '*ovPanelAdditionalPanels'
|
||||
// is inside of the PANEL component tagged with '*ovPanel'
|
||||
if (externalAdditionalPanels) {
|
||||
this.additionalPanelsTemplate = externalAdditionalPanels.template;
|
||||
}
|
||||
}
|
||||
|
||||
isParticipantsPanelOpened: boolean;
|
||||
isChatPanelOpened: boolean;
|
||||
private menuSubscription: Subscription;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
isExternalPanelOpened: boolean;
|
||||
private panelSubscription: Subscription;
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
|
|
@ -91,13 +111,14 @@ export class PanelComponent implements OnInit {
|
|||
ngOnDestroy() {
|
||||
this.isChatPanelOpened = false;
|
||||
this.isParticipantsPanelOpened = false;
|
||||
if (this.menuSubscription) this.menuSubscription.unsubscribe();
|
||||
if (this.panelSubscription) this.panelSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
private subscribeToPanelToggling() {
|
||||
this.menuSubscription = this.panelService.panelOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: MenuType }) => {
|
||||
this.isChatPanelOpened = ev.opened && ev.type === MenuType.CHAT;
|
||||
this.isParticipantsPanelOpened = ev.opened && ev.type === MenuType.PARTICIPANTS;
|
||||
this.panelSubscription = this.panelService.panelOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: PanelType | string }) => {
|
||||
this.isChatPanelOpened = ev.opened && ev.type === PanelType.CHAT;
|
||||
this.isParticipantsPanelOpened = ev.opened && ev.type === PanelType.PARTICIPANTS;
|
||||
this.isExternalPanelOpened = ev.opened && ev.type !== PanelType.PARTICIPANTS && ev.type !== PanelType.CHAT;
|
||||
this.cd.markForCheck();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@
|
|||
<ng-container *ngTemplateOutlet="participantPanelItemTemplate; context: { $implicit: participant }"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #defaultParticipantPanelItem let-participant>
|
||||
<ov-participant-panel-item [participant]="participant" id="default-participant-panel-item"></ov-participant-panel-item>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnDestroy, OnInit, TemplateRef } from '@angular/core';
|
||||
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
|
||||
import { ParticipantAbstractModel } from '../../../../models/participant.model';
|
||||
import { ParticipantService } from '../../../../services/participant/participant.service';
|
||||
import { PanelService } from '../../../..//services/panel/panel.service';
|
||||
|
|
@ -44,10 +44,15 @@ import { Subscription } from 'rxjs';
|
|||
styleUrls: ['./participants-panel.component.css'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ParticipantsPanelComponent implements OnInit, OnDestroy {
|
||||
export class ParticipantsPanelComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||
localParticipant: any;
|
||||
remoteParticipants: ParticipantAbstractModel[] = [];
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
@ViewChild('defaultParticipantPanelItem', { static: false, read: TemplateRef }) defaultParticipantPanelItemTemplate: TemplateRef<any>;
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
|
|
@ -70,7 +75,7 @@ export class ParticipantsPanelComponent implements OnInit, OnDestroy {
|
|||
*/
|
||||
constructor(
|
||||
protected participantService: ParticipantService,
|
||||
protected PanelService: PanelService,
|
||||
protected panelService: PanelService,
|
||||
private cd: ChangeDetectorRef
|
||||
) {}
|
||||
|
||||
|
|
@ -99,7 +104,16 @@ export class ParticipantsPanelComponent implements OnInit, OnDestroy {
|
|||
if (this.remoteParticipantsSubs) this.remoteParticipantsSubs.unsubscribe;
|
||||
}
|
||||
|
||||
ngAfterViewInit(){
|
||||
if(!this.participantPanelItemTemplate) {
|
||||
// the user has override the default participants panel but not the 'participant-panel-item'
|
||||
// so the default component must be injected
|
||||
this.participantPanelItemTemplate = this.defaultParticipantPanelItemTemplate
|
||||
this.cd.markForCheck();
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
this.PanelService.closeMenu();
|
||||
this.panelService.closePanel();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,10 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.mat-drawer.mat-drawer-side {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidenav-main {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import { MatSidenav } from '@angular/material/sidenav';
|
|||
import { SidenavMode } from '../../models/layout.model';
|
||||
import { LayoutService } from '../../services/layout/layout.service';
|
||||
import { Subscription, skip } from 'rxjs';
|
||||
import { MenuType } from '../../models/menu.model';
|
||||
import { PanelType } from '../../models/panel.model';
|
||||
import { PanelService } from '../../services/panel/panel.service';
|
||||
import { PlatformService } from '../../services/platform/platform.service';
|
||||
|
||||
|
|
@ -45,8 +45,6 @@ export class SessionComponent implements OnInit {
|
|||
@ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef<any>;
|
||||
|
||||
@Output() onSessionCreated = new EventEmitter<any>();
|
||||
// @Output() _publisher = new EventEmitter<any>();
|
||||
// @Output() _error = new EventEmitter<any>();
|
||||
|
||||
session: Session;
|
||||
sessionScreen: Session;
|
||||
|
|
@ -54,8 +52,6 @@ export class SessionComponent implements OnInit {
|
|||
sideMenu: MatSidenav;
|
||||
|
||||
sidenavMode: SidenavMode = SidenavMode.SIDE;
|
||||
isParticipantsPanelOpened: boolean;
|
||||
isChatPanelOpened: boolean;
|
||||
protected readonly SIDENAV_WIDTH_LIMIT_MODE = 790;
|
||||
|
||||
protected menuSubscription: Subscription;
|
||||
|
|
@ -73,8 +69,7 @@ export class SessionComponent implements OnInit {
|
|||
protected chatService: ChatService,
|
||||
protected tokenService: TokenService,
|
||||
protected layoutService: LayoutService,
|
||||
protected panelService: PanelService,
|
||||
private platformService: PlatformService
|
||||
protected panelService: PanelService
|
||||
) {
|
||||
this.log = this.loggerSrv.get('SessionComponent');
|
||||
}
|
||||
|
|
@ -126,8 +121,6 @@ export class SessionComponent implements OnInit {
|
|||
this.participantService.clear();
|
||||
this.session = null;
|
||||
this.sessionScreen = null;
|
||||
this.isChatPanelOpened = false;
|
||||
this.isParticipantsPanelOpened = false;
|
||||
if (this.menuSubscription) this.menuSubscription.unsubscribe();
|
||||
if (this.layoutWidthSubscription) this.layoutWidthSubscription.unsubscribe();
|
||||
}
|
||||
|
|
@ -153,10 +146,8 @@ export class SessionComponent implements OnInit {
|
|||
this.updateLayoutInterval = setInterval(() => this.layoutService.update(), 50);
|
||||
});
|
||||
|
||||
this.menuSubscription = this.panelService.panelOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: MenuType }) => {
|
||||
this.menuSubscription = this.panelService.panelOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean, type?: PanelType }) => {
|
||||
if (this.sideMenu) {
|
||||
this.isChatPanelOpened = ev.opened && ev.type === MenuType.CHAT;
|
||||
this.isParticipantsPanelOpened = ev.opened && ev.type === MenuType.PARTICIPANTS;
|
||||
ev.opened ? this.sideMenu.open() : this.sideMenu.close();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
mat-icon-button
|
||||
id="participants-panel-btn"
|
||||
*ngIf="!isMinimal && showParticipantsPanelButton"
|
||||
matTooltip="Show articipants"
|
||||
matTooltip="Participants"
|
||||
(click)="toggleParticipantsPanel()"
|
||||
[disabled]="isConnectionLost"
|
||||
[class.active-btn]="isParticipantsOpened"
|
||||
|
|
@ -85,6 +85,7 @@
|
|||
mat-icon-button
|
||||
id="chat-panel-btn"
|
||||
*ngIf="!isMinimal && showChatPanelButton"
|
||||
matTooltip="Chat"
|
||||
(click)="toggleChatPanel()"
|
||||
[disabled]="isConnectionLost"
|
||||
[class.active-btn]="isChatOpened"
|
||||
|
|
@ -99,5 +100,10 @@
|
|||
chat
|
||||
</mat-icon>
|
||||
</button>
|
||||
|
||||
<!-- External additional panel buttons -->
|
||||
<ng-container *ngIf="toolbarAdditionalPanelButtonsTemplate">
|
||||
<ng-container *ngTemplateOutlet="toolbarAdditionalPanelButtonsTemplate"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ import { ActionService } from '../../services/action/action.service';
|
|||
import { DeviceService } from '../../services/device/device.service';
|
||||
import { ChatMessage } from '../../models/chat.model';
|
||||
import { ParticipantService } from '../../services/participant/participant.service';
|
||||
import { MenuType } from '../../models/menu.model';
|
||||
import { PanelType } from '../../models/panel.model';
|
||||
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
|
||||
import { ToolbarAdditionalButtonsDirective } from '../../directives/template/openvidu-angular.directive';
|
||||
import { ToolbarAdditionalButtonsDirective, ToolbarAdditionalPanelButtonsDirective } from '../../directives/template/openvidu-angular.directive';
|
||||
import { ParticipantAbstractModel } from '../../models/participant.model';
|
||||
|
||||
/**
|
||||
|
|
@ -75,6 +75,7 @@ import { ParticipantAbstractModel } from '../../models/participant.model';
|
|||
* | **Directive** | **Reference** |
|
||||
* |:----------------------------------:|:---------------------------------------------:|
|
||||
* | ***ovToolbarAdditionalButtons** | {@link ToolbarAdditionalButtonsDirective} |
|
||||
* |***ovToolbarAdditionalPanelButtons** | {@link ToolbarAdditionalPanelButtonsDirective} |
|
||||
*
|
||||
* <p class="component-link-text">
|
||||
* <span class="italic">See all {@link OpenViduAngularDirectiveModule OpenVidu Angular Directives}</span>
|
||||
|
|
@ -95,6 +96,11 @@ export class ToolbarComponent implements OnInit, OnDestroy {
|
|||
*/
|
||||
@ContentChild('toolbarAdditionalButtons', { read: TemplateRef }) toolbarAdditionalButtonsTemplate: TemplateRef<any>;
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
@ContentChild('toolbarAdditionalPanelButtons', { read: TemplateRef }) toolbarAdditionalPanelButtonsTemplate: TemplateRef<any>;
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
|
|
@ -107,6 +113,18 @@ export class ToolbarComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
@ContentChild(ToolbarAdditionalPanelButtonsDirective)
|
||||
set externalAdditionalPanelButtons(externalAdditionalPanelButtons: ToolbarAdditionalPanelButtonsDirective) {
|
||||
// This directive will has value only when ADDITIONAL PANEL BUTTONS component tagget with '*ovToolbarAdditionalPanelButtons' directive
|
||||
// is inside of the TOOLBAR component tagged with '*ovToolbar' directive
|
||||
if (externalAdditionalPanelButtons) {
|
||||
this.toolbarAdditionalPanelButtonsTemplate = externalAdditionalPanelButtons.template;
|
||||
}
|
||||
}
|
||||
|
||||
@Output() onLeaveButtonClicked = new EventEmitter<any>();
|
||||
@Output() onCameraButtonClicked = new EventEmitter<any>();
|
||||
@Output() onMicrophoneButtonClicked = new EventEmitter<any>();
|
||||
|
|
@ -199,7 +217,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
|
|||
|
||||
private log: ILogger;
|
||||
private minimalSub: Subscription;
|
||||
private menuTogglingSubscription: Subscription;
|
||||
private panelTogglingSubscription: Subscription;
|
||||
private chatMessagesSubscription: Subscription;
|
||||
private localParticipantSubscription: Subscription;
|
||||
private screenshareButtonSub: Subscription;
|
||||
|
|
@ -269,7 +287,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (this.menuTogglingSubscription) this.menuTogglingSubscription.unsubscribe();
|
||||
if (this.panelTogglingSubscription) this.panelTogglingSubscription.unsubscribe();
|
||||
if (this.chatMessagesSubscription) this.chatMessagesSubscription.unsubscribe();
|
||||
if (this.localParticipantSubscription) this.localParticipantSubscription.unsubscribe();
|
||||
if (this.screenshareButtonSub) this.screenshareButtonSub.unsubscribe();
|
||||
|
|
@ -340,7 +358,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
|
|||
*/
|
||||
toggleParticipantsPanel() {
|
||||
this.onParticipantsPanelButtonClicked.emit();
|
||||
this.panelService.togglePanel(MenuType.PARTICIPANTS);
|
||||
this.panelService.togglePanel(PanelType.PARTICIPANTS);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -348,7 +366,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
|
|||
*/
|
||||
toggleChatPanel() {
|
||||
this.onChatPanelButtonClicked.emit();
|
||||
this.panelService.togglePanel(MenuType.CHAT);
|
||||
this.panelService.togglePanel(PanelType.CHAT);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -363,7 +381,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
|
|||
protected subscribeToReconnection() {
|
||||
this.session.on('reconnecting', () => {
|
||||
if (this.panelService.isPanelOpened()) {
|
||||
this.panelService.closeMenu();
|
||||
this.panelService.closePanel();
|
||||
}
|
||||
this.isConnectionLost = true;
|
||||
});
|
||||
|
|
@ -372,9 +390,9 @@ export class ToolbarComponent implements OnInit, OnDestroy {
|
|||
});
|
||||
}
|
||||
protected subscribeToMenuToggling() {
|
||||
this.menuTogglingSubscription = this.panelService.panelOpenedObs.subscribe((ev: { opened: boolean; type?: MenuType }) => {
|
||||
this.isChatOpened = ev.opened && ev.type === MenuType.CHAT;
|
||||
this.isParticipantsOpened = ev.opened && ev.type === MenuType.PARTICIPANTS;
|
||||
this.panelTogglingSubscription = this.panelService.panelOpenedObs.subscribe((ev: { opened: boolean; type?: PanelType }) => {
|
||||
this.isChatOpened = ev.opened && ev.type === PanelType.CHAT;
|
||||
this.isParticipantsOpened = ev.opened && ev.type === PanelType.PARTICIPANTS;
|
||||
if (this.isChatOpened) {
|
||||
this.unreadMessages = 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,6 +51,10 @@
|
|||
<ng-template #toolbarAdditionalButtons>
|
||||
<ng-container *ngTemplateOutlet="openviduAngularToolbarAdditionalButtonsTemplate"></ng-container>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #toolbarAdditionalPanelButtons>
|
||||
<ng-container *ngTemplateOutlet="openviduAngularToolbarAdditionalPanelButtonsTemplate"></ng-container>
|
||||
</ng-template>
|
||||
</ov-toolbar>
|
||||
</ng-template>
|
||||
|
||||
|
|
@ -63,6 +67,10 @@
|
|||
<ng-template #participantsPanel>
|
||||
<ng-container *ngTemplateOutlet="openviduAngularParticipantsPanelTemplate"></ng-container>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #additionalPanels>
|
||||
<ng-container *ngTemplateOutlet="openviduAngularAdditionalPanelsTemplate"></ng-container>
|
||||
</ng-template>
|
||||
</ov-panel>
|
||||
</ng-template>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,12 +15,14 @@ import { Subscription } from 'rxjs';
|
|||
import {
|
||||
ChatPanelDirective,
|
||||
LayoutDirective,
|
||||
AdditionalPanelsDirective,
|
||||
PanelDirective,
|
||||
ParticipantPanelItemDirective,
|
||||
ParticipantPanelItemElementsDirective,
|
||||
ParticipantsPanelDirective,
|
||||
StreamDirective,
|
||||
ToolbarAdditionalButtonsDirective,
|
||||
ToolbarAdditionalPanelButtonsDirective,
|
||||
ToolbarDirective
|
||||
} from '../../directives/template/openvidu-angular.directive';
|
||||
import { ILogger } from '../../models/logger.model';
|
||||
|
|
@ -79,11 +81,13 @@ import { TokenService } from '../../services/token/token.service';
|
|||
* It will recognise the following {@link https://angular.io/guide/structural-directives Angular structural directives}
|
||||
* in the elements added as children.
|
||||
*
|
||||
* | **Directive** | **Reference** |
|
||||
* |:----------------------------------:|:---------------------------------------------:|
|
||||
* | ***ovToolbar** | {@link ToolbarDirective} |
|
||||
* | **Directive** | **Reference** |
|
||||
* |:-----------------------------------:|:---------------------------------------------:|
|
||||
* | ***ovToolbar** | {@link ToolbarDirective} |
|
||||
* | ***ovToolbarAdditionalButtons** | {@link ToolbarAdditionalButtonsDirective} |
|
||||
* |***ovToolbarAdditionalPanelButtons** | {@link ToolbarAdditionalPanelButtonsDirective} |
|
||||
* | ***ovPanel** | {@link PanelDirective} |
|
||||
* | ***ovAdditionalPanels** | {@link AdditionalPanelsDirective} |
|
||||
* | ***ovChatPanel** | {@link ChatPanelDirective} |
|
||||
* | ***ovParticipantsPanel** | {@link ParticipantsPanelDirective} |
|
||||
* | ***ovParticipantPanelItem** | {@link ParticipantPanelItemDirective} |
|
||||
|
|
@ -112,6 +116,14 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
|
|||
* @internal
|
||||
*/
|
||||
@ContentChild(ToolbarAdditionalButtonsDirective) externalToolbarAdditionalButtons: ToolbarAdditionalButtonsDirective;
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
@ContentChild(ToolbarAdditionalPanelButtonsDirective) externalToolbarAdditionalPanelButtons: ToolbarAdditionalPanelButtonsDirective;
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
@ContentChild(AdditionalPanelsDirective) externalAdditionalPanels: AdditionalPanelsDirective;
|
||||
|
||||
// *** Panels ***
|
||||
|
||||
|
|
@ -183,6 +195,10 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
|
|||
* @internal
|
||||
*/
|
||||
openviduAngularToolbarAdditionalButtonsTemplate: TemplateRef<any>;
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
openviduAngularToolbarAdditionalPanelButtonsTemplate: TemplateRef<any>;
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
|
|
@ -195,6 +211,10 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
|
|||
* @internal
|
||||
*/
|
||||
openviduAngularParticipantsPanelTemplate: TemplateRef<any>;
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
openviduAngularAdditionalPanelsTemplate: TemplateRef<any>;
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
|
|
@ -346,20 +366,24 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
|
|||
*/
|
||||
ngAfterViewInit() {
|
||||
if (this.externalToolbar) {
|
||||
this.openviduAngularToolbarTemplate = this.externalToolbar.template;
|
||||
this.log.d('Setting EXTERNAL TOOLBAR');
|
||||
this.openviduAngularToolbarTemplate = this.externalToolbar.template;
|
||||
} else {
|
||||
this.log.d('Setting DEFAULT TOOLBAR');
|
||||
if (this.externalToolbarAdditionalButtons) {
|
||||
this.log.d('Setting EXTERNAL TOOLBAR ADDITIONAL BUTTONS');
|
||||
this.openviduAngularToolbarAdditionalButtonsTemplate = this.externalToolbarAdditionalButtons.template;
|
||||
}
|
||||
if (this.externalToolbarAdditionalPanelButtons) {
|
||||
this.log.d('Setting EXTERNAL TOOLBAR ADDITIONAL PANEL BUTTONS');
|
||||
this.openviduAngularToolbarAdditionalPanelButtonsTemplate = this.externalToolbarAdditionalPanelButtons.template;
|
||||
}
|
||||
this.openviduAngularToolbarTemplate = this.defaultToolbarTemplate;
|
||||
this.log.d('Setting DEFAULT TOOLBAR');
|
||||
}
|
||||
|
||||
if (this.externalPanel) {
|
||||
this.openviduAngularPanelTemplate = this.externalPanel.template;
|
||||
this.log.d('Setting EXTERNAL PANEL');
|
||||
this.openviduAngularPanelTemplate = this.externalPanel.template;
|
||||
} else {
|
||||
this.log.d('Setting DEFAULT PANEL');
|
||||
|
||||
|
|
@ -369,8 +393,8 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
|
|||
} else {
|
||||
this.log.d('Setting DEFAULT PARTICIPANTS PANEL');
|
||||
if (this.externalParticipantPanelItem) {
|
||||
this.openviduAngularParticipantPanelItemTemplate = this.externalParticipantPanelItem.template;
|
||||
this.log.d('Setting EXTERNAL P ITEM');
|
||||
this.openviduAngularParticipantPanelItemTemplate = this.externalParticipantPanelItem.template;
|
||||
} else {
|
||||
if (this.externalParticipantPanelItemElements) {
|
||||
this.log.d('Setting EXTERNAL PARTICIPANT PANEL ITEM ELEMENT');
|
||||
|
|
@ -383,27 +407,32 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
|
|||
}
|
||||
|
||||
if (this.externalChatPanel) {
|
||||
this.openviduAngularChatPanelTemplate = this.externalChatPanel.template;
|
||||
this.log.d('Setting EXTERNAL CHAT PANEL');
|
||||
this.openviduAngularChatPanelTemplate = this.externalChatPanel.template;
|
||||
} else {
|
||||
this.openviduAngularChatPanelTemplate = this.defaultChatPanelTemplate;
|
||||
this.log.d('Setting DEFAULT CHAT PANEL');
|
||||
this.openviduAngularChatPanelTemplate = this.defaultChatPanelTemplate;
|
||||
}
|
||||
|
||||
if (this.externalAdditionalPanels) {
|
||||
this.log.d('Setting EXTERNAL ADDITIONAL PANELS');
|
||||
this.openviduAngularAdditionalPanelsTemplate = this.externalAdditionalPanels.template;
|
||||
}
|
||||
this.openviduAngularPanelTemplate = this.defaultPanelTemplate;
|
||||
}
|
||||
|
||||
if (this.externalLayout) {
|
||||
this.openviduAngularLayoutTemplate = this.externalLayout.template;
|
||||
this.log.d('Setting EXTERNAL LAYOUT');
|
||||
this.openviduAngularLayoutTemplate = this.externalLayout.template;
|
||||
} else {
|
||||
this.log.d('Setting DEAFULT LAYOUT');
|
||||
|
||||
if (this.externalStream) {
|
||||
this.openviduAngularStreamTemplate = this.externalStream.template;
|
||||
this.log.d('Setting EXTERNAL STREAM');
|
||||
this.openviduAngularStreamTemplate = this.externalStream.template;
|
||||
} else {
|
||||
this.openviduAngularStreamTemplate = this.defaultStreamTemplate;
|
||||
this.log.d('Setting DEFAULT STREAM');
|
||||
this.openviduAngularStreamTemplate = this.defaultStreamTemplate;
|
||||
}
|
||||
this.openviduAngularLayoutTemplate = this.defaultLayoutTemplate;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@ import {
|
|||
ParticipantsPanelDirective,
|
||||
StreamDirective,
|
||||
ToolbarAdditionalButtonsDirective,
|
||||
ToolbarDirective
|
||||
ToolbarDirective,
|
||||
ToolbarAdditionalPanelButtonsDirective,
|
||||
AdditionalPanelsDirective
|
||||
} from './openvidu-angular.directive';
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -16,22 +18,26 @@ import {
|
|||
ChatPanelDirective,
|
||||
LayoutDirective,
|
||||
PanelDirective,
|
||||
AdditionalPanelsDirective,
|
||||
ParticipantPanelItemDirective,
|
||||
ParticipantsPanelDirective,
|
||||
StreamDirective,
|
||||
ToolbarDirective,
|
||||
ToolbarAdditionalButtonsDirective,
|
||||
ToolbarAdditionalPanelButtonsDirective,
|
||||
ParticipantPanelItemElementsDirective
|
||||
],
|
||||
exports: [
|
||||
ChatPanelDirective,
|
||||
LayoutDirective,
|
||||
PanelDirective,
|
||||
AdditionalPanelsDirective,
|
||||
ParticipantPanelItemDirective,
|
||||
ParticipantsPanelDirective,
|
||||
StreamDirective,
|
||||
ToolbarDirective,
|
||||
ToolbarAdditionalButtonsDirective,
|
||||
ToolbarAdditionalPanelButtonsDirective,
|
||||
ParticipantPanelItemElementsDirective
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -124,11 +124,35 @@ export class ToolbarAdditionalButtonsDirective {
|
|||
constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[ovToolbarAdditionalPanelButtons]'
|
||||
})
|
||||
export class ToolbarAdditionalPanelButtonsDirective {
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
|
||||
}
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: '[ovPanel]'
|
||||
})
|
||||
export class PanelDirective {
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
|
||||
}
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: '[ovAdditionalPanels]'
|
||||
})
|
||||
export class AdditionalPanelsDirective {
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
/**
|
||||
* @internal
|
||||
*/
|
||||
export enum MenuType {
|
||||
export enum PanelType {
|
||||
CHAT = 'chat',
|
||||
PARTICIPANTS = 'participants'
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@ import { LoggerService } from '../logger/logger.service';
|
|||
import { Signal } from '../../models/signal.model';
|
||||
import { PanelService } from '../panel/panel.service';
|
||||
import { ParticipantService } from '../participant/participant.service';
|
||||
import { MenuType } from '../../models/menu.model';
|
||||
import { PanelType } from '../../models/panel.model';
|
||||
|
||||
/**
|
||||
* @internal
|
||||
|
|
@ -77,6 +77,6 @@ export class ChatService {
|
|||
}
|
||||
|
||||
protected launchNotification(options: INotificationOptions) {
|
||||
this.actionService.launchNotification(options, this.panelService.togglePanel.bind(this.panelService, MenuType.CHAT));
|
||||
this.actionService.launchNotification(options, this.panelService.togglePanel.bind(this.panelService, PanelType.CHAT));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,69 +1,78 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { ILogger } from '../../models/logger.model';
|
||||
import { MenuType } from '../../models/menu.model';
|
||||
import { PanelType } from '../../models/panel.model';
|
||||
import { LoggerService } from '../logger/logger.service';
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class PanelService {
|
||||
panelOpenedObs: Observable<{ opened: boolean; type?: MenuType }>;
|
||||
panelOpenedObs: Observable<{ opened: boolean; type?: PanelType | string }>;
|
||||
protected log: ILogger;
|
||||
protected isChatPanelOpened: boolean = false;
|
||||
protected isParticipantsPanelOpened: boolean = false;
|
||||
protected _panelOpened = <BehaviorSubject<{ opened: boolean; type?: MenuType }>>new BehaviorSubject({ opened: false });
|
||||
protected isChatOpened: boolean = false;
|
||||
protected isParticipantsOpened: boolean = false;
|
||||
private isExternalOpened: boolean = false;
|
||||
private externalType: string;
|
||||
protected _panelOpened = <BehaviorSubject<{ opened: boolean; type?: PanelType | string }>>new BehaviorSubject({ opened: false });
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
constructor(protected loggerSrv: LoggerService) {
|
||||
this.log = this.loggerSrv.get('PanelService');
|
||||
this.panelOpenedObs = this._panelOpened.asObservable();
|
||||
}
|
||||
|
||||
isPanelOpened(): boolean {
|
||||
return this.isChatOpened() || this.isParticipantsOpened();
|
||||
}
|
||||
|
||||
togglePanel(type: MenuType) {
|
||||
togglePanel(type: PanelType | string) {
|
||||
this.log.d(`Toggling ${type} menu`);
|
||||
if (type === MenuType.CHAT) {
|
||||
if (this.isChatPanelOpened) {
|
||||
// Close chat and side menu
|
||||
this.isChatPanelOpened = false;
|
||||
this._panelOpened.next({ opened: false });
|
||||
} else {
|
||||
// Open chat
|
||||
this.isChatPanelOpened = true;
|
||||
this.isParticipantsPanelOpened = false;
|
||||
this._panelOpened.next({ opened: true, type: MenuType.CHAT });
|
||||
}
|
||||
} else if (type === MenuType.PARTICIPANTS) {
|
||||
if (this.isParticipantsPanelOpened) {
|
||||
// Close participants menu and side menu
|
||||
this.isParticipantsPanelOpened = false;
|
||||
this._panelOpened.next({ opened: false });
|
||||
} else {
|
||||
// Open participants menu
|
||||
this.isParticipantsPanelOpened = true;
|
||||
this.isChatPanelOpened = false;
|
||||
this._panelOpened.next({ opened: true, type: MenuType.PARTICIPANTS });
|
||||
}
|
||||
let opened: boolean;
|
||||
if (type === PanelType.CHAT) {
|
||||
this.isChatOpened = !this.isChatOpened;
|
||||
this.isParticipantsOpened = false;
|
||||
this.isExternalOpened = false;
|
||||
opened = this.isChatOpened;
|
||||
} else if (type === PanelType.PARTICIPANTS) {
|
||||
this.isParticipantsOpened = !this.isParticipantsOpened;
|
||||
this.isChatOpened = false;
|
||||
this.isExternalOpened = false;
|
||||
opened = this.isParticipantsOpened;
|
||||
} else {
|
||||
this.log.d('Toggling external panel');
|
||||
this.isChatOpened = false;
|
||||
this.isParticipantsOpened = false;
|
||||
// Open when is close or is opened with another type
|
||||
this.isExternalOpened = !this.isExternalOpened || this.externalType !== type;
|
||||
this.externalType = !this.isExternalOpened ? '' : type;
|
||||
opened = this.isExternalOpened;
|
||||
}
|
||||
|
||||
this._panelOpened.next({ opened, type });
|
||||
}
|
||||
|
||||
closeMenu() {
|
||||
this.isParticipantsPanelOpened = false;
|
||||
this.isChatPanelOpened = false;
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
isPanelOpened(): boolean {
|
||||
return this.isChatPanelOpened() || this.isParticipantsPanelOpened() || this.isExternalPanelOpened();
|
||||
}
|
||||
|
||||
closePanel(): void {
|
||||
this.isParticipantsOpened = false;
|
||||
this.isChatOpened = false;
|
||||
this.isExternalOpened = false;
|
||||
this._panelOpened.next({ opened: false });
|
||||
}
|
||||
|
||||
isChatOpened() {
|
||||
return this.isChatPanelOpened;
|
||||
isChatPanelOpened(): boolean {
|
||||
return this.isChatOpened;
|
||||
}
|
||||
|
||||
isParticipantsOpened() {
|
||||
return this.isParticipantsPanelOpened;
|
||||
isParticipantsPanelOpened(): boolean {
|
||||
return this.isParticipantsOpened;
|
||||
}
|
||||
|
||||
private isExternalPanelOpened(): boolean {
|
||||
return this.isExternalOpened;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue