From 1bf3ce1bc91666cd0adc5d38e4f932469ada6c00 Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Thu, 24 Feb 2022 13:02:00 +0100 Subject: [PATCH] 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. --- .../components/layout/layout.component.css | 21 ++++--------------- .../components/layout/layout.component.html | 1 - .../components/stream/stream.component.css | 7 +++++++ .../components/stream/stream.component.html | 2 +- .../lib/components/stream/stream.component.ts | 12 ++++------- .../lib/components/video/video.component.ts | 5 +++-- .../src/lib/models/layout.model.ts | 3 ++- .../lib/services/document/document.service.ts | 5 +++++ .../src/lib/services/layout/layout.service.ts | 2 +- .../lib/services/openvidu/openvidu.service.ts | 8 +------ 10 files changed, 28 insertions(+), 38 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.css index 73b24935..1027a0cd 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.css +++ b/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-height: 48px; + min-width: 0px; + 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; diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html index cdf2de43..ca9c8403 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html @@ -1,7 +1,6 @@
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css index 359f99a4..dd1b3647 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css +++ b/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; diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html index eec326e4..c0773def 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html @@ -1,6 +1,6 @@
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts index 33f1abe7..8ff084e1 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts +++ b/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); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts index 60e38e4d..5ac50ef1 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts +++ b/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 = this._streamManager?.stream?.typeOfVideo; @@ -55,6 +56,6 @@ export class VideoComponent implements AfterViewInit { } this._streamManager.addVideoElement(this._videoElement.nativeElement); } - }); + } } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/layout.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/layout.model.ts index daa0bada..d8755be3 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/layout.model.ts +++ b/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 { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/document/document.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/document/document.service.ts index 0e3f1fd3..3dcf8332 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/document/document.service.ts +++ b/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); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/layout/layout.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/layout/layout.service.ts index 08320213..50d1e508 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/layout/layout.service.ts +++ b/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; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts index 43771661..301cf5cf 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts +++ b/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 { this.log.d('Initializing publisher with properties: ', properties); - - const publisher = await this.OV.initPublisherAsync(targetElement, properties); - // this.participantService.setMyCameraPublisher(publisher); - publisher.once('streamPlaying', () => { - (publisher.videos[0].video).parentElement.classList.remove('custom-class'); - }); - return publisher; + return await this.OV.initPublisherAsync(targetElement, properties); } //TODO: This method is used by republishTrack. Check if it's neecessary