mirror of https://github.com/OpenVidu/openvidu.git
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.pull/707/head
csantosm
parent
b52ca52e1d
commit
1bf3ce1bc9
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 }"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -162,13 +162,7 @@ export class OpenViduService {
|
|||
|
||||
async initPublisher(targetElement: string | HTMLElement, properties: PublisherProperties): Promise<Publisher> {
|
||||
this.log.d('Initializing publisher with properties: ', 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;
|
||||
return await this.OV.initPublisherAsync(targetElement, properties);
|
||||
}
|
||||
|
||||
//TODO: This method is used by republishTrack. Check if it's neecessary
|
||||
|
|
|
|||
Loading…
Reference in New Issue