openvidu-components: Fixed layout bug.

The layout has a bad UX. The root element is created with the entire layout width and it has a weird UX behaviour. Custom class with no width and height has been added and removed dynamically when stream container is present.

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

@@ -22,9 +22,6 @@
    * http://opensource.org/licenses/MIT
    */
 
-  .custom-class {
-	min-height: 0px !important;
-  }
 
   /**
    * OT Base styles
@@ -38,9 +35,7 @@
 	padding: 0;
 	border: 0;
 	font-size: 100%;
-	font-family: 'Ubuntu', sans-serif;
 	vertical-align: baseline;
-	transition: all .1s linear;
   }
 
   .OT_dialog-centering {
@@ -220,9 +215,11 @@
   .OT_publisher,
   .OT_subscriber {
 	position: relative;
-	min-width: 48px;
+	min-width: 0px;
-	min-height: 48px;
+	min-height: 0px;
 	margin: 1px;
+	transition-duration: 0.1s;
+	transition-timing-function: ease-in-out;
   }
 
   .OT_publisher .OT_video-element,
@@ -231,20 +228,10 @@
 	position: absolute;
 	width: 100%;
 	height: 100%;
-
 	-webkit-transform-origin: 0 0;
-
 	transform-origin: 0 0;
   }
 
-  /* Styles that are applied when the video element should be mirrored */
-  .OT_publisher.OT_mirrored .OT_video-element {
-	-webkit-transform: scale(-1, 1);
-	transform: scale(-1, 1);
-	-webkit-transform-origin: 50% 50%;
-	transform-origin: 50% 50%;
-  }
-
   .OT_subscriber_error {
 	background-color: #000;
 	color: #fff;

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

@@ -1,7 +1,6 @@
 <div id="layout" class="layout">
 	<div
 		class="OT_root OT_publisher"
-		id="localUser"
 		*ngFor="let stream of localParticipant | streams"
 		[ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }"
 	>

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

@@ -1,3 +1,10 @@
+   /* Fixes layout bug. The OT_root is created with the entire layout width and it has a weird UX behaviour */
+   .no-size {
+	height: 0px !important;
+	width: 0px !important;
+  }
+
+
 .nickname {
 	padding: 0px;
 	position: absolute;

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

@@ -1,6 +1,6 @@
 <div
 	*ngIf="this._stream"
-	class="OT_widget-container"
+	class="OT_widget-container no-size"
 	[id]="'container-' + this._stream.streamManager?.stream?.streamId"
 	#streamContainer
 >

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

@@ -46,14 +46,6 @@ export class StreamComponent implements OnInit {
 		protected cdkSrv: CdkOverlayService
 	) {}
 
-	// @HostListener('document:fullscreenchange', ['$event'])
-	// @HostListener('document:webkitfullscreenchange', ['$event'])
-	// @HostListener('document:mozfullscreenchange', ['$event'])
-	// @HostListener('document:MSFullscreenChange', ['$event'])
-	// onFullscreenHandler(event) {
-	// 	this.isFullscreenEnabled = !this.isFullscreenEnabled;
-	// }
-
 	@ViewChild('streamContainer', { static: false, read: ElementRef })
 	set streamContainer(streamContainer: ElementRef) {
 		setTimeout(() => {
@@ -62,6 +54,10 @@ export class StreamComponent implements OnInit {
 				if (this._stream.type === VideoType.SCREEN) {
 					this.toggleVideoEnlarged(true);
 				}
+				// Remove 'no-size' css class for showing the element in the view.
+				// This is a workaround for fixing a layout bug which provide a bad UX with each new elements created.
+				//
+				this.documentService.removeNoSizeElementClass(this._streamContainer.nativeElement);
 			}
 		}, 0);
 	}

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

@@ -1,3 +1,4 @@
+import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
 import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { StreamManager } from 'openvidu-browser';
 import { VideoType } from '../../models/video-type.model';
@@ -43,7 +44,7 @@ export class VideoComponent implements AfterViewInit {
 
 	@Input()
 	set streamManager(streamManager: StreamManager) {
-		setTimeout(() => {
+		if(streamManager) {
 			this._streamManager = streamManager;
 			if (!!this._videoElement && this._streamManager) {
 				this.type = <VideoType>this._streamManager?.stream?.typeOfVideo;
@@ -55,6 +56,6 @@ export class VideoComponent implements AfterViewInit {
 				}
 				this._streamManager.addVideoElement(this._videoElement.nativeElement);
 			}
-		});
+		}
 	}
 }

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

@@ -2,7 +2,8 @@ export enum LayoutClass {
 	ROOT_ELEMENT = 'OT_root',
 	BIG_ELEMENT = 'OV_big',
 	SMALL_ELEMENT = 'OV_small',
-	SIDENAV_CONTAINER = 'sidenav-container'
+	SIDENAV_CONTAINER = 'sidenav-container',
+	NO_SIZE_ELEMENT = 'no-size'
 }
 
 export enum SidenavMode {

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

@@ -55,6 +55,11 @@ export class DocumentService {
 		}
 	}
 
+
+	removeNoSizeElementClass(element: HTMLElement | Element) {
+		element?.classList.remove(LayoutClass.NO_SIZE_ELEMENT);
+	}
+
 	removeBigElementClass(element: HTMLElement | Element) {
 		element?.classList.remove(LayoutClass.BIG_ELEMENT);
 	}

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

@@ -46,7 +46,7 @@ export class LayoutService {
 			bigMaxRatio: 9 / 16, // The narrowest ratio to use for the big elements (default 2x3)
 			bigMinRatio: 9 / 16, // The widest ratio to use for the big elements (default 16x9)
 			bigFirst: true, // Whether to place the big one in the top left (true) or bottom right
-			animate: true // Whether you want to animate the transitions. Invalid property, to disable it remove   transition: all .1s linear;
+			animate: true // Whether you want to animate the transitions. Deprecated property, to disable it remove the transaction property on OT_publisher css class
 		};
 		return options;
 	}

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

@@ -162,13 +162,7 @@ export class OpenViduService {
 
 	async initPublisher(targetElement: string | HTMLElement, properties: PublisherProperties): Promise<Publisher> {
 		this.log.d('Initializing publisher with properties: ', properties);
-
+		return await this.OV.initPublisherAsync(targetElement, properties);
-		const publisher = await this.OV.initPublisherAsync(targetElement, properties);
-		// this.participantService.setMyCameraPublisher(publisher);
-		publisher.once('streamPlaying', () => {
-			(<HTMLElement>publisher.videos[0].video).parentElement.classList.remove('custom-class');
-		});
-		return publisher;
 	}
 
 	//TODO: This method is used by republishTrack. Check if it's neecessary