openvidu-components: Fixed layout when is webcomponent

When webcomponent, the layout need more time for initilizating and showing the videos.

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

@@ -1,9 +1,19 @@
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnDestroy, OnInit, TemplateRef } 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 { StreamDirective } from '../../directives/template/openvidu-angular.directive';
+import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
 
 @Component({
 	selector: 'ov-layout',
@@ -28,15 +38,25 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
 	protected localParticipantSubs: Subscription;
 	protected remoteParticipantsSubs: Subscription;
 
-	constructor(protected layoutService: LayoutService, protected participantService: ParticipantService, private cd: ChangeDetectorRef) {}
+	constructor(
+		protected layoutService: LayoutService,
+		protected participantService: ParticipantService,
+		private libService: OpenViduAngularConfigService,
+		private cd: ChangeDetectorRef
+	) {}
 
 	ngOnInit(): void {
 		this.subscribeToParticipants();
 	}
 
 	ngAfterViewInit() {
-		this.layoutService.initialize();
+		let timeout: number = null;
-		this.layoutService.update();
+		if (this.libService.isWebcomponent()) {
+			timeout = 0;
+		}
+
+		this.layoutService.initialize(timeout);
+		this.layoutService.update(timeout);
 	}
 
 	ngOnDestroy() {

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

@@ -15,7 +15,7 @@
 	align-items: center;
 }
 #media-buttons-container {
-	max-height: 100%;
+	max-height: 100% !important;
 }
 
 #media-buttons-container > *, ::ng-deep #media-buttons-container > * {

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

@@ -1,6 +1,7 @@
 export interface OpenViduAngularConfig {
 	production?: boolean,
 	participantFactory?: ParticipantFactoryFunction,
+	webcomponent?: boolean
 
 }
 

openvidu-components-angular/projects/openvidu-angular/src/lib/models/layout.model.ts

@@ -141,7 +141,7 @@ export class OpenViduLayout {
 	}
 
 	getLayoutContainer(): HTMLElement {
-		return this.layoutContainer
+		return this.layoutContainer;
 	}
 
 	/**

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

@@ -70,6 +70,10 @@ export class OpenViduAngularConfigService {
 		return this.configuration?.production;
 	}
 
+	isWebcomponent(): boolean {
+		return this.configuration?.webcomponent;
+	}
+
 	hasParticipantFactory(): boolean {
 		return typeof this.getConfig().participantFactory === "function";
 	}

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

@@ -17,23 +17,25 @@ export class LayoutService {
 	}
 
 	initialize(timeout: number = null) {
-		if (!!timeout) {
+		if (typeof timeout === 'number' && timeout >= 0) {
 			setTimeout(() => {
 				this._initialize();
+				this.sendLayoutWidthEvent();
 			}, timeout);
 		} else {
 			this._initialize();
-		}
 			this.sendLayoutWidthEvent();
 		}
+	}
 
 	private _initialize() {
 		this.openviduLayout = new OpenViduLayout();
 		this.openviduLayoutOptions = this.getOptions();
-		this.openviduLayout.initLayoutContainer(document.getElementById('layout'), this.openviduLayoutOptions);
+		const element = document.getElementById('layout');
+		this.openviduLayout.initLayoutContainer(element, this.openviduLayoutOptions);
 	}
 
-	getOptions(): OpenViduLayoutOptions {
+	private getOptions(): OpenViduLayoutOptions {
 		const options = {
 			maxRatio: 3 / 2, // The narrowest ratio that will be used (default 2x3)
 			minRatio: 9 / 16, // The widest ratio that will be used (default 16x9)
@@ -51,17 +53,18 @@ export class LayoutService {
 		return options;
 	}
 
-	update(timeout?: number) {
+	update(timeout: number = null) {
+		const updateAux = () => {
 			if (!!this.openviduLayout) {
-			if (!timeout) {
 				this.openviduLayout.updateLayout();
-			} else {
-				setTimeout(() => {
-					this.openviduLayout.updateLayout();
-				}, timeout);
-			}
 				this.sendLayoutWidthEvent();
 			}
+		};
+		if (typeof timeout === 'number' && timeout >= 0) {
+			setTimeout(() => updateAux(), timeout);
+		} else {
+			updateAux();
+		}
 	}
 
 	getLayout() {
@@ -74,7 +77,7 @@ export class LayoutService {
 
 	private sendLayoutWidthEvent() {
 		const sidenavLayoutElement = this.documentService.getHTMLElementByClassName(
-			this.openviduLayout.getLayoutContainer(),
+			this.openviduLayout?.getLayoutContainer(),
 			LayoutClass.SIDENAV_CONTAINER
 		);
 		if (sidenavLayoutElement && sidenavLayoutElement.clientWidth) {

openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss

@@ -74,3 +74,10 @@ $openvidu-components-theme: mat.define-light-theme((
 
 html, body { height: 100%; overflow: hidden;}
 body { margin: 0; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;}
+
+#poster-text {
+	padding: 0px !important;
+}
+ov-chat-panel .text-info {
+	margin: 3px auto !important;
+}

openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts

@@ -5,23 +5,23 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { OpenviduWebComponentComponent } from './openvidu-webcomponent.component';
 
-import { OpenviduAngularModule, VideoconferenceComponent } from 'openvidu-angular';
+import { OpenViduAngularModule, VideoconferenceComponent } from 'openvidu-angular';
 import { environment } from '../../environments/environment';
 
 import { createCustomElement } from '@angular/elements';
 
 @NgModule({
 	declarations: [OpenviduWebComponentComponent],
-	imports: [CommonModule, BrowserModule, BrowserAnimationsModule, OpenviduAngularModule.forRoot(environment)],
+	imports: [CommonModule, BrowserModule, BrowserAnimationsModule, OpenViduAngularModule.forRoot(environment)],
 	// exports: [OpenviduWebComponentComponent],
-	providers: [{ provide: APP_BASE_HREF, useValue: '/' }, VideoconferenceComponent]
+	providers: [{ provide: APP_BASE_HREF, useValue: '/' }, VideoconferenceComponent],
 })
 export class OpenviduWebComponentModule implements DoBootstrap {
 	constructor(private injector: Injector) {}
 
 	ngDoBootstrap(): void {
 		const element = createCustomElement(OpenviduWebComponentComponent, {
-			injector: this.injector
+			injector: this.injector,
 		});
 
 		customElements.define('openvidu-webcomponent', element);

openvidu-components-angular/src/environments/environment.prod.ts

@@ -1,3 +1,6 @@
 export const environment = {
-  production: true
+  production: true,
+  // The webcomponent build will use this environment.
+  // Wee need this flag for settings a delay in the layout for correct behaviour
+  webcomponent: true
 };

openvidu-components-angular/src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  webcomponent: true
 };
 
 /*