+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts
index d6c5e215..578c8c7d 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts
@@ -1,30 +1,48 @@
-import { AfterViewInit, Component, OnDestroy, OnInit, Type, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+ AfterViewInit,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ ContentChild,
+ OnDestroy,
+ OnInit,
+ TemplateRef
+} from '@angular/core';
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 { LibraryComponents } from '../../config/lib.config';
-import { LibraryConfigService } from '../../services/library-config/library-config.service';
+import { StreamDirective } from '../../directives/template/openvidu-angular.directive';
+import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
@Component({
selector: 'ov-layout',
templateUrl: './layout.component.html',
- styleUrls: ['./layout.component.css']
+ styleUrls: ['./layout.component.css'],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
- _localStreamComponent: Type
;
- _remoteStreamComponent: Type;
+ @ContentChild('stream', { read: TemplateRef }) streamTemplate: TemplateRef;
+
+ @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;
protected remoteParticipantsSubs: Subscription;
- protected updateLayoutInterval: NodeJS.Timer;
constructor(
- protected libraryConfigSrv: LibraryConfigService,
protected layoutService: LayoutService,
- protected participantService: ParticipantService
+ protected participantService: ParticipantService,
+ private libService: OpenViduAngularConfigService,
+ private cd: ChangeDetectorRef
) {}
@ViewChild('localStream', { static: false, read: ViewContainerRef })
@@ -56,24 +74,35 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
this.subscribeToParticipants();
}
- ngAfterViewInit() {}
+ ngAfterViewInit() {
+ let timeout: number = 0;
+ // if (this.libService.isWebcomponent()) {
+ // timeout = 0;
+ // }
+
+ this.layoutService.initialize(timeout);
+ this.layoutService.update(timeout);
+ }
ngOnDestroy() {
this.localParticipant = null;
this.remoteParticipants = [];
if (this.localParticipantSubs) this.localParticipantSubs.unsubscribe();
if (this.remoteParticipantsSubs) this.remoteParticipantsSubs.unsubscribe();
+ this.layoutService.clear();
}
protected subscribeToParticipants() {
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
this.localParticipant = p;
this.layoutService.update();
+ this.cd.markForCheck();
});
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
- this.remoteParticipants = [...participants];
+ this.remoteParticipants = participants;
this.layoutService.update();
+ this.cd.markForCheck();
});
}
}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css
index b2b64bd1..fc1a9fc0 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css
@@ -1,9 +1,9 @@
#chat-container {
margin: 20px;
background-color: var(--ov-light-color);
- border-radius: 5px;
- height: -webkit-fill-available;
- height: -moz-available;
+ border-radius: var(--ov-panel-radius);
+ max-height: calc(100% - 40px);
+ min-height: calc(100% - 40px);
}
.header-container {
@@ -19,6 +19,7 @@
.header-container button {
margin-left: auto;
+ border-radius: var(--ov-buttons-radius);
}
.text-container{
@@ -43,7 +44,7 @@
background-color: var(--ov-light-dark-color);
padding: 10px;
margin: 10px;
- border-radius: 5px;
+ border-radius: var(--ov-panel-radius);
}
.input-container textarea {
@@ -89,14 +90,17 @@
.msg-content {
position: relative;
- border-radius: 5px;
+ border-radius: var(--ov-panel-radius);
padding: 8px;
color: #000000;
width: auto;
max-width: 95%;
font-size: 13px;
word-break: break-all;
+ }
+ #send-btn {
+ border-radius: var(--ov-buttons-radius);
}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.html
index 1a97e6f2..b7414b3e 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.html
@@ -6,7 +6,7 @@
+
Messages will be removed at the end of the session
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
index a885dce2..04ae58a0 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs';
import { ChatMessage } from '../../../models/chat.model';
import { MenuType } from '../../../models/menu.model';
@@ -8,7 +8,8 @@ import { SidenavMenuService } from '../../../services/sidenav-menu/sidenav-menu.
@Component({
selector: 'ov-chat-panel',
templateUrl: './chat-panel.component.html',
- styleUrls: ['./chat-panel.component.css']
+ styleUrls: ['./chat-panel.component.css'],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChatPanelComponent implements OnInit, AfterViewInit {
@ViewChild('chatScroll') chatScroll: ElementRef;
@@ -19,7 +20,7 @@ export class ChatPanelComponent implements OnInit, AfterViewInit {
private chatMessageSubscription: Subscription;
- constructor(private chatService: ChatService, private menuService: SidenavMenuService) {}
+ constructor(private chatService: ChatService, private menuService: SidenavMenuService, private cd: ChangeDetectorRef) {}
@HostListener('document:keydown.escape', ['$event'])
onKeydownHandler(event: KeyboardEvent) {
@@ -52,8 +53,10 @@ export class ChatPanelComponent implements OnInit, AfterViewInit {
}
sendMessage(): void {
- this.chatService.sendMessage(this.message);
- this.message = '';
+ if(!!this.message) {
+ this.chatService.sendMessage(this.message);
+ this.message = '';
+ }
}
scrollToBottom(): void {
@@ -73,6 +76,7 @@ export class ChatPanelComponent implements OnInit, AfterViewInit {
this.messageList = messages;
if (this.menuService.isMenuOpened()) {
this.scrollToBottom();
+ this.cd.markForCheck();
}
});
}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html
index 4d33588b..74eb725a 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html
@@ -1,5 +1,12 @@
+
+
+
+
-
+
+
+
+
+
-
\ No newline at end of file
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts
index a54aee94..14950363 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts
@@ -1,43 +1,41 @@
-import { Component, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core';
import { skip, Subscription } from 'rxjs';
-import { LibraryComponents } from '../../config/lib.config';
+import { ChatPanelDirective, ParticipantsPanelDirective } from '../../directives/template/openvidu-angular.directive';
import { MenuType } from '../../models/menu.model';
-import { LibraryConfigService } from '../../services/library-config/library-config.service';
import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.service';
@Component({
selector: 'ov-panel',
templateUrl: './panel.component.html',
- styleUrls: ['./panel.component.css']
+ styleUrls: ['./panel.component.css'],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
-export class PanelComponent implements OnInit, OnDestroy {
+export class PanelComponent implements OnInit {
+ @ContentChild('participantsPanel', { read: TemplateRef }) participantsPanelTemplate: TemplateRef
;
+ @ContentChild('chatPanel', { read: TemplateRef }) chatPanelTemplate: TemplateRef;
+
+ @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;
-
- @ViewChild('chat', { static: false, read: ViewContainerRef })
- set chat(reference: ViewContainerRef) {
- setTimeout(() => {
- if (reference) {
- const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.CHAT_PANEL);
- reference.clear();
- reference.createComponent(component);
- }
- }, 0);
- }
-
- @ViewChild('participants', { static: false, read: ViewContainerRef })
- set participants(reference: ViewContainerRef) {
- setTimeout(() => {
- if (reference) {
- const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.PARTICIPANTS_PANEL);
- reference.clear();
- reference.createComponent(component);
- }
- }, 0);
- }
-
- constructor(protected libraryConfigSrv: LibraryConfigService, protected menuService: SidenavMenuService) {}
+ constructor(protected menuService: SidenavMenuService, private cd: ChangeDetectorRef) {}
ngOnInit(): void {
this.subscribeToPanelToggling();
@@ -46,6 +44,7 @@ export class PanelComponent implements OnInit, OnDestroy {
this.menuSubscription = this.menuService.menuOpenedObs.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.cd.markForCheck();
});
}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-item/participant-item.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-item/participant-item.component.css
deleted file mode 100644
index 4391e21a..00000000
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-item/participant-item.component.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.participant-subtitle {
- font-style: italic;
- font-size: 11px !important;
-}
-.participant-nickname {
- font-weight: bold !important;
-}
-.participant-action-buttons{
- display: flex;
- padding-top: 0px;
-}
-
-mat-list-item {
- height: max-content !important;
- padding-bottom: 10px !important;
-}
-
-mat-list {
- padding: 3px;
-}
-
-.participant-avatar {
- display: contents;
-}
-
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-item/participant-item.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-item/participant-item.component.html
deleted file mode 100644
index 3879bd05..00000000
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-item/participant-item.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
- person
- {{ name }}
- {{ connections }}
-
-
-
-
\ No newline at end of file
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-item/participant-item.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-item/participant-item.component.ts
deleted file mode 100644
index a921937f..00000000
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-item/participant-item.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
- selector: 'ov-participant-item',
- templateUrl: './participant-item.component.html',
- styleUrls: ['./participant-item.component.css']
-})
-export class ParticipantItemComponent implements OnInit {
- @Input() name: string;
- @Input() connections: string;
- @Input() showDividerLine: boolean;
-
- constructor() {}
-
- ngOnInit(): void {}
-}
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
new file mode 100644
index 00000000..951b7aa8
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
@@ -0,0 +1,28 @@
+
+
+ person
+ {{ _participant.nickname }}
+ {{ _participant | streamTypesEnabled }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.spec.ts
new file mode 100644
index 00000000..5386dbec
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParticipantPanelItemComponent } from './participant-panel-item.component';
+
+describe('ParticipantPanelItemComponent', () => {
+ let component: ParticipantPanelItemComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ParticipantPanelItemComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ParticipantPanelItemComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
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
new file mode 100644
index 00000000..b5b4a01b
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts
@@ -0,0 +1,52 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ParticipantPanelItemElementsDirective } from '../../../../directives/template/openvidu-angular.directive';
+import { ParticipantAbstractModel } from '../../../../models/participant.model';
+import { OpenViduAngularConfigService } from '../../../../services/config/openvidu-angular.config.service';
+
+@Component({
+ selector: 'ov-participant-panel-item',
+ templateUrl: './participant-panel-item.component.html',
+ styleUrls: ['./participant-panel-item.component.css'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ParticipantPanelItemComponent implements OnInit, OnDestroy {
+ @ContentChild('participantPanelItemElements', { read: TemplateRef }) participantPanelItemElementsTemplate: TemplateRef;
+ showMuteButton: boolean = true;
+ private muteButtonSub: Subscription;
+
+ @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) {
+ this._participant = p;
+ }
+
+ _participant: ParticipantAbstractModel;
+ constructor(private libService: OpenViduAngularConfigService, private cd: ChangeDetectorRef) {}
+
+ ngOnInit(): void {
+ this.subscribeToParticipantPanelItemDirectives();
+ }
+ ngOnDestroy(): void {
+ if (this.muteButtonSub) this.muteButtonSub.unsubscribe();
+ }
+
+ toggleMuteForcibly() {
+ this._participant.setMutedForcibly(!this._participant.isMutedForcibly);
+ }
+
+ private subscribeToParticipantPanelItemDirectives() {
+ this.muteButtonSub = this.libService.participantItemMuteButton.subscribe((value: boolean) => {
+ this.showMuteButton = value;
+ this.cd.markForCheck();
+ });
+ }
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css
index a4109f88..ed5b7984 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css
@@ -1,9 +1,9 @@
.participants-container {
margin: 20px;
background-color: var(--ov-light-color);
- border-radius: 5px;
- height: -webkit-fill-available;
- height: -moz-available;
+ border-radius: var(--ov-panel-radius);
+ max-height: calc(100% - 40px);
+ min-height: calc(100% - 40px);
}
.header-container {
@@ -19,6 +19,7 @@
.header-container button {
margin-left: auto;
+ border-radius: var(--ov-buttons-radius);
}
.local-participant-container, .remote-participants-container {
@@ -26,6 +27,8 @@
}
.scrollable {
+ height: calc(100% - 60px);
+ max-height: calc(100% - 60px);
overflow: auto;
}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html
index 0507c950..36bf3a12 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html
@@ -1,4 +1,4 @@
-