openvidu-components: Updated library config

openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html

@@ -43,9 +43,6 @@
 
 
 	<div class="status-icons">
-		<!-- <div id="statusMic" *ngIf="!this._stream.streamManager?.stream?.audioActive">
-			<mat-icon>mic_off</mat-icon>
-		</div> -->
 
 		<button mat-icon-button id="statusMic" *ngIf="!this._stream.streamManager?.stream?.audioActive" disabled>
 			<mat-icon>mic_off</mat-icon>
@@ -54,11 +51,6 @@
 
 	<div class="videoButtons">
 
-		<!-- Custom stream notifications -->
-		<ng-container *ngIf="notificationTemplate">
-			<ng-container *ngTemplateOutlet="notificationTemplate; context: { stream: _stream }"></ng-container>
-		</ng-container>
-
 		<button mat-icon-button (click)="toggleVideoMenu($event)" matTooltip="Settings" aria-label="Video settings menu">
 			<mat-icon>more_vert</mat-icon>
 		</button>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts

@@ -22,8 +22,6 @@ import { ParticipantService } from '../../services/participant/participant.servi
 	styleUrls: ['./stream.component.css']
 })
 export class StreamComponent implements OnInit {
-	@ContentChild('notification', { read: TemplateRef }) notificationTemplate: TemplateRef<any>;
-
 	videoSizeIconEnum = VideoSizeIcon;
 	videoTypeEnum = VideoType;
 	videoSizeIcon: VideoSizeIcon = VideoSizeIcon.BIG;

openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css

@@ -15,7 +15,7 @@
 	align-items: center;
 }
 
-#media-buttons-container button, ::ng-deep #media-buttons-container>.ng-star-inserted {
+#media-buttons-container > *, ::ng-deep #media-buttons-container > * {
 	width: 40px;
 	height: 40px;
 	background-color: var(--ov-secondary-color);
@@ -26,7 +26,7 @@
 	background-color: var(--ov-warn-color) !important;
 }
 
-.active-btn {
+.active-btn, ::ng-deep .active-btn {
 	background-color: var(--ov-tertiary-color) !important;
 }
 

openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html

@@ -61,10 +61,8 @@
 			<mat-icon *ngIf="!isFullscreenEnabled" matTooltip="Fullscreen">fullscreen</mat-icon>
 		</button>
 
-		<!-- Custom centered buttons -->
-		<ng-container *ngIf="centeredButtonsTemplate">
-			<ng-container *ngTemplateOutlet="centeredButtonsTemplate"></ng-container>
-		</ng-container>
+		<!-- Custom toolbar buttons -->
+		<ng-content select="[toolbar-btn]"></ng-content>
 
 		<!-- Leave session button -->
 		<button mat-icon-button (click)="leaveSession()" id="leave-btn">

openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts

@@ -102,11 +102,8 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 
 		this.subscribeToUserMediaProperties();
 		this.subscribeToReconnection();
-
-		if(!this.libraryConfigSrv.isUsingProLibrary()){
-			this.subscribeToMenuToggling();
-			this.subscribeToChatMessages();
-		}
+		this.subscribeToMenuToggling();
+		this.subscribeToChatMessages();
 	}
 
 	toggleMicrophone() {

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

@@ -9,8 +9,6 @@ import { StreamDirective } from '../../directives/stream/stream.directive';
 export class VideoconferenceComponent implements OnInit {
 	streamTemplate: TemplateRef<any>;
 
-	// @ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef<any>;
-
 	@ContentChild(StreamDirective)
 	set customStream(customStream: StreamDirective) {
 		if (customStream) {

openvidu-components-angular/projects/openvidu-angular/src/lib/config/lib.config.ts

@@ -1,6 +1,7 @@
 export interface LibConfig {
-	environment: {
-		production: boolean;
-		useProdLibrary?: boolean
-	};
+	production?: boolean,
+	participantFactory?: ParticipantFactoryFunction,
+
 }
+
+export type ParticipantFactoryFunction = (connWrapper: any, participantId: string) => any;

openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts

@@ -144,9 +144,9 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
 	entryComponents: [DialogTemplateComponent]
 })
 export class OpenviduAngularModule {
-	static forRoot(environment): ModuleWithProviders<OpenviduAngularModule> {
+	static forRoot(config): ModuleWithProviders<OpenviduAngularModule> {
 		// console.log(`${library.name} config: ${environment}`);
-		const libConfig: LibConfig = { environment };
+		const libConfig: LibConfig = config;
 		return {
 			ngModule: OpenviduAngularModule,
 			providers: [LibraryConfigService, { provide: 'LIB_CONFIG', useValue: libConfig }]

openvidu-components-angular/projects/openvidu-angular/src/lib/services/library-config/library-config.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable } from '@angular/core';
-import { LibConfig } from '../../config/lib.config';
+import { LibConfig, ParticipantFactoryFunction } from '../../config/lib.config';
 
 // import { version } from '../../../../package.json';
 
@@ -10,8 +10,7 @@ export class LibraryConfigService {
 	constructor(@Inject('LIB_CONFIG') config: LibConfig) {
 		this.configuration = config;
 		console.log(this.configuration);
-		this.isUsingProLibrary() ? console.log('Using PRO library') : console.log('Using CE library');
-		if(this.isProduction()) console.log('Production Mode');
+		if(this.isProduction()) console.log('OpenVidu Angular Production Mode');
 		// console.log(version)
 	}
 
@@ -19,10 +18,14 @@ export class LibraryConfigService {
 		return this.configuration;
 	}
 	isProduction(): boolean {
-		return this.configuration?.environment?.production;
+		return this.configuration?.production;
 	}
 
-	isUsingProLibrary(): boolean {
-		return !!this.configuration?.environment?.useProdLibrary;
+	hasParticipantFactory(): boolean {
+		return typeof this.getConfig().participantFactory === "function";
+	}
+
+	getParticipantFactory(): ParticipantFactoryFunction {
+		return this.getConfig().participantFactory;
 	}
 }

openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts

@@ -4,6 +4,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { ILogger } from '../../models/logger.model';
 import { StreamModel, ParticipantAbstractModel, ParticipantModel } from '../../models/participant.model';
 import { VideoType } from '../../models/video-type.model';
+import { LibraryConfigService } from '../library-config/library-config.service';
 import { LoggerService } from '../logger/logger.service';
 
 @Injectable({
@@ -29,7 +30,7 @@ export class ParticipantService {
 
 	protected log: ILogger;
 
-	constructor(protected loggerSrv: LoggerService) {
+	constructor(protected libraryConfigSrv: LibraryConfigService, protected loggerSrv: LoggerService) {
 		this.log = this.loggerSrv.get('ParticipantService');
 
 		this.localParticipantObs = this._localParticipant.asObservable();
@@ -42,6 +43,9 @@ export class ParticipantService {
 		this.updateLocalParticipant();
 	}
 
+	getLocalParticipant(): ParticipantAbstractModel {
+		return this.localParticipant;
+	}
 	getMyParticipantId(): string {
 		return this.localParticipant.id;
 	}
@@ -189,7 +193,7 @@ export class ParticipantService {
 		return this.localParticipant.isScreenAudioActive();
 	}
 
-	protected updateLocalParticipant() {
+	updateLocalParticipant() {
 		// Cloning localParticipant object for not applying changes on the global variable
 		let participantsWithConnectionAvailable: ParticipantAbstractModel = Object.assign(this.newParticipant(), this.localParticipant);
 		const availableConnections = participantsWithConnectionAvailable.getAvailableConnections();
@@ -299,7 +303,11 @@ export class ParticipantService {
 	updateRemoteParticipants() {
 		this._remoteParticipants.next(this.remoteParticipants);
 	}
-	protected newParticipant(steramModel?: StreamModel, participantId?: string) {
-		return new ParticipantModel(steramModel, participantId);
+	protected newParticipant(streamModel?: StreamModel, participantId?: string) {
+
+		if(this.libraryConfigSrv.hasParticipantFactory()){
+			return this.libraryConfigSrv.getParticipantFactory().apply(this, [streamModel, participantId]);
+		}
+		return new ParticipantModel(streamModel, participantId);
 	}
 }