Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/OpenVidu/openvidu into fe…
Browse files Browse the repository at this point in the history
…ature/custom-ice-servers
  • Loading branch information
cruizba committed Feb 7, 2022
2 parents ad778ff + 3143557 commit 3274db8
Show file tree
Hide file tree
Showing 36 changed files with 464 additions and 171 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -251,9 +251,7 @@ export class OpenViduLogger {
* @hidden
*/
warn(...args: any[]) {
if (!this.isProdMode) {
this.defaultConsoleLogger.warn.apply(this.defaultConsoleLogger.logger, arguments);
}
this.defaultConsoleLogger.warn.apply(this.defaultConsoleLogger.logger, arguments);
if (this.isJSNLogSetup) {
JL().warn(arguments);
}
Expand Down
22 changes: 22 additions & 0 deletions openvidu-components-angular/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions openvidu-components-angular/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@angular/router": "13.0.0",
"autolinker": "3.14.3",
"buffer": "^6.0.3",
"ng-dynamic-component": "10.1.0",
"openvidu-browser": "2.21.0-beta1",
"rxjs": "7.4.0",
"tslib": "2.3.1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"@angular/flex-layout": "^13.0.0-beta.36",
"autolinker": "^3.14.3",
"buffer": "^6.0.3",
"openvidu-browser": "^2.20.0"
"openvidu-browser": "^2.20.0",
"ng-dynamic-component": "^10.1.0"
},
"dependencies": {
"tslib": "^2.3.0"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,35 +1,22 @@
<div id="layout" class="bounds">
<!-- Custom local participant -->
<ng-container *ngIf="customLocalParticipantTemplate; else defaultLocalParticipant">
<ng-container *ngTemplateOutlet="customLocalParticipantTemplate"></ng-container>
</ng-container>
<div
class="OT_root OT_publisher"
id="localUser"
*ngFor="let connection of localParticipant | connections"
[ngClass]="{ OV_small: !connection.streamManager?.stream?.videoActive }"
>
<ng-template #localStream [ngComponentOutlet]="_localStreamComponent" [ndcDynamicInputs]="{ participant: connection }">
</ng-template>
</div>

<!-- Default local participant if custom participant is not injected -->
<ng-template #defaultLocalParticipant>
<div
class="OT_root OT_publisher"
id="localUser"
*ngFor="let connection of localParticipant | connections"
[ngClass]="{ OV_small: !connection.streamManager?.stream?.videoActive }"
>
<ov-stream [participant]="connection" [videoEnlarged]="connection.videoEnlarged"></ov-stream>
</div>
</ng-template>

<!-- Custom remote participant -->
<ng-container *ngIf="customRemoteParticipantsTemplate; else defaultRemoteParticipants">
<ng-container *ngTemplateOutlet="customRemoteParticipantsTemplate"></ng-container>
</ng-container>

<!-- Default remote participants if custom participants is not injected -->
<ng-template #defaultRemoteParticipants>
<div
*ngFor="let connection of remoteParticipants | connections"
class="OT_root OT_publisher"
id="remote-participant"
[ngClass]="{ OV_small: !connection.streamManager?.stream?.videoActive }"
>
<ov-stream [participant]="connection" [videoEnlarged]="connection.videoEnlarged"></ov-stream>
</div>
</ng-template>
<div
*ngFor="let connection of remoteParticipants | connections"
class="OT_root OT_publisher"
id="remote-participant"
[ngClass]="{ OV_small: !connection.streamManager?.stream?.videoActive }"
>
<!-- Dynamic ov-stream component injected -->
<ng-template #remoteStream [ngComponentOutlet]="_remoteStreamComponent" [ndcDynamicInputs]="{ participant: connection }">
</ng-template>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,28 +1,59 @@
import { AfterViewInit, Component, ContentChild, OnDestroy, OnInit, TemplateRef } from '@angular/core';
import { AfterViewInit, Component, OnDestroy, OnInit, Type, ViewChild, ViewContainerRef } 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';

@Component({
selector: 'ov-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
@ContentChild('customLocalParticipant', { read: TemplateRef }) customLocalParticipantTemplate: TemplateRef<any>;
@ContentChild('customRemoteParticipants', { read: TemplateRef }) customRemoteParticipantsTemplate: TemplateRef<any>;
_localStreamComponent: Type<any>;
_remoteStreamComponent: Type<any>;

localParticipant: ParticipantAbstractModel;
remoteParticipants: ParticipantAbstractModel[] = [];
protected localParticipantSubs: Subscription;
protected remoteParticipantsSubs: Subscription;
protected updateLayoutInterval: NodeJS.Timer;

constructor(protected layoutService: LayoutService, protected participantService: ParticipantService) {}
constructor(
protected libraryConfigSrv: LibraryConfigService,
protected layoutService: LayoutService,
protected participantService: ParticipantService
) {}

@ViewChild('localStream', { static: false, read: ViewContainerRef })
set stream(reference: ViewContainerRef) {
setTimeout(() => {
if (reference) {
const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.STREAM);
//reference.clear();
this._localStreamComponent = component;
// reference.createComponent(component);
}
}, 0);
}

@ViewChild('remoteStream', { static: false, read: ViewContainerRef })
set remoteStream(reference: ViewContainerRef) {
setTimeout(() => {
if (reference) {

const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.STREAM);
// reference.clear();
this._remoteStreamComponent = component;
// reference.createComponent(component);
}
}, 0);
}

ngOnInit(): void {
this.subscribeToUsers();
this.subscribeToParticipants();
}

ngAfterViewInit() {}
Expand All @@ -34,7 +65,7 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
if (this.remoteParticipantsSubs) this.remoteParticipantsSubs.unsubscribe();
}

protected subscribeToUsers() {
protected subscribeToParticipants() {
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
this.localParticipant = p;
this.layoutService.update();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ChatService } from '../../services/chat/chat.service';
import { ChatServiceMock } from '../../services/chat/chat.service.mock';
import { ChatService } from '../../../services/chat/chat.service';
import { ChatServiceMock } from '../../../services/chat/chat.service.mock';

import { ChatPanelComponent } from './chat-panel.component';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs';
import { ChatMessage } from '../../models/chat.model';
import { MenuType } from '../../models/menu.model';
import { ChatService } from '../../services/chat/chat.service';
import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.service';
import { ChatMessage } from '../../../models/chat.model';
import { MenuType } from '../../../models/menu.model';
import { ChatService } from '../../../services/chat/chat.service';
import { SidenavMenuService } from '../../../services/sidenav-menu/sidenav-menu.service';

@Component({
selector: 'ov-chat-panel',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@


<ng-container *ngIf="isChatPanelOpened" #chat></ng-container>

<ng-container *ngIf="isParticipantsPanelOpened" #participants></ng-container>
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { PanelComponent } from './panel.component';

describe('PanelComponent', () => {
let component: PanelComponent;
let fixture: ComponentFixture<PanelComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ PanelComponent ]
})
.compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(PanelComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { Component, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { skip, Subscription } from 'rxjs';
import { LibraryComponents } from '../../config/lib.config';
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']
})
export class PanelComponent implements OnInit, OnDestroy {
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) {}

ngOnInit(): void {
this.subscribeToPanelToggling();
}
subscribeToPanelToggling() {
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;
});
}

ngOnDestroy() {
this.isChatPanelOpened = false;
this.isParticipantsPanelOpened = false;
if (this.menuSubscription) this.menuSubscription.unsubscribe();
}
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ChangeDetectorRef, Component, OnInit } 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 { ParticipantAbstractModel, ParticipantModel } from '../../../../models/participant.model';
import { ParticipantService } from '../../../../services/participant/participant.service';
import { SidenavMenuService } from '../../../../services/sidenav-menu/sidenav-menu.service';

@Component({
selector: 'ov-participants-panel',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,36 +10,15 @@
fixedTopGap="0"
fixedBottomGap="0"
>
<!-- Custom menu content -->
<ng-container *ngIf="customPanelContentTemplate; else defaultPanelContent">
<ng-container *ngTemplateOutlet="customPanelContentTemplate"></ng-container>
</ng-container>

<!-- Default menu content if custom menu content is not injected -->
<ng-template #defaultPanelContent>
<ov-chat-panel *ngIf="isChatPanelOpened"></ov-chat-panel>
<ov-participants-panel *ngIf="isParticipantsPanelOpened"></ov-participants-panel>
</ng-template>
<ng-template #panel></ng-template>
</mat-sidenav>

<!-- OPENVIDU LAYOUT -->
<mat-sidenav-content class="sidenav-main">
<div id="layout-container">
<ng-content select="[layout]"></ng-content>
</div>
<!-- Dynamic layout injection -->
<ng-template #layout></ng-template>
</mat-sidenav-content>
</mat-sidenav-container>

<!-- Custom toolbar -->
<!-- <ng-container *ngIf="toolbarTemplate">
<div id="toolbar-container">
<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
</div>
</ng-container> -->

<ng-container *ngIf="toolbarTemplate">
<div id="footer-container">
<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
</div>
</ng-container>
<ng-template #toolbar></ng-template>
</div>
Loading

0 comments on commit 3274db8

Please sign in to comment.