From a4c2955dd437c1e8e994215a80254c924f8a3308 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Fri, 14 Oct 2022 14:46:32 +0200
Subject: [PATCH] openvidu-components: Fixed UI glitches on iPhones

---
 .../components/session/session.component.html |  2 +-
 .../components/session/session.component.ts   | 50 ++++++++++---------
 .../lib/components/stream/stream.component.ts |  2 +-
 .../components/toolbar/toolbar.component.ts   | 35 ++++++-------
 4 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html
index 6a9bb0f8..b2200a99 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html
@@ -1,4 +1,4 @@
-<div id="session-container">
+<div id="session-container" *ngIf="!preparing" @sessionAnimation>
 	<mat-sidenav-container #container #videoContainer class="sidenav-container">
 		<mat-sidenav
 			#sidenav
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
index 5623e5b8..f2d85b7a 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
@@ -1,7 +1,5 @@
 import {
-	ChangeDetectionStrategy,
-	ChangeDetectorRef,
-	Component,
+	ChangeDetectionStrategy, ChangeDetectorRef, Component,
 	ContentChild,
 	ElementRef,
 	EventEmitter,
@@ -13,35 +11,32 @@ import {
 	ViewChild
 } from '@angular/core';
 import {
-	Subscriber,
-	Session,
-	StreamEvent,
-	StreamPropertyChangedEvent,
-	SessionDisconnectedEvent,
 	ConnectionEvent,
-	RecordingEvent
+	RecordingEvent, Session, SessionDisconnectedEvent, StreamEvent,
+	StreamPropertyChangedEvent, Subscriber
 } from 'openvidu-browser';
 
-import { VideoType } from '../../models/video-type.model';
 import { ILogger } from '../../models/logger.model';
+import { VideoType } from '../../models/video-type.model';
 
+import { animate, style, transition, trigger } from '@angular/animations';
+import { MatDrawerContainer, MatSidenav } from '@angular/material/sidenav';
+import { skip, Subscription } from 'rxjs';
+import { SidenavMode } from '../../models/layout.model';
+import { PanelType } from '../../models/panel.model';
+import { Signal } from '../../models/signal.model';
+import { ActionService } from '../../services/action/action.service';
 import { ChatService } from '../../services/chat/chat.service';
+import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
+import { LayoutService } from '../../services/layout/layout.service';
 import { LoggerService } from '../../services/logger/logger.service';
 import { OpenViduService } from '../../services/openvidu/openvidu.service';
-import { TokenService } from '../../services/token/token.service';
-import { ActionService } from '../../services/action/action.service';
-import { Signal } from '../../models/signal.model';
-import { ParticipantService } from '../../services/participant/participant.service';
-import { MatDrawerContainer, MatSidenav } from '@angular/material/sidenav';
-import { SidenavMode } from '../../models/layout.model';
-import { LayoutService } from '../../services/layout/layout.service';
-import { Subscription, skip } from 'rxjs';
-import { PanelType } from '../../models/panel.model';
 import { PanelEvent, PanelService } from '../../services/panel/panel.service';
-import { RecordingService } from '../../services/recording/recording.service';
-import { TranslateService } from '../../services/translate/translate.service';
-import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
+import { ParticipantService } from '../../services/participant/participant.service';
 import { PlatformService } from '../../services/platform/platform.service';
+import { RecordingService } from '../../services/recording/recording.service';
+import { TokenService } from '../../services/token/token.service';
+import { TranslateService } from '../../services/translate/translate.service';
 
 /**
  * @internal
@@ -51,6 +46,11 @@ import { PlatformService } from '../../services/platform/platform.service';
 	selector: 'ov-session',
 	templateUrl: './session.component.html',
 	styleUrls: ['./session.component.css'],
+	animations: [
+		trigger('sessionAnimation', [
+			transition(':enter', [style({ opacity: 0 }), animate('400ms', style({ opacity: 1 }))]),
+		])
+	],
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SessionComponent implements OnInit {
@@ -69,6 +69,7 @@ export class SessionComponent implements OnInit {
 	sidenavMode: SidenavMode = SidenavMode.SIDE;
 	settingsPanelOpened: boolean;
 	drawer: MatDrawerContainer;
+	preparing: boolean = true;
 
 	protected readonly SIDENAV_WIDTH_LIMIT_MODE = 790;
 
@@ -91,7 +92,8 @@ export class SessionComponent implements OnInit {
 		protected panelService: PanelService,
 		private recordingService: RecordingService,
 		private translateService: TranslateService,
-		private platformService: PlatformService
+		private platformService: PlatformService,
+		private cd: ChangeDetectorRef
 	) {
 		this.log = this.loggerSrv.get('SessionComponent');
 	}
@@ -171,6 +173,8 @@ export class SessionComponent implements OnInit {
 				await this.openviduService.publishVideo(true);
 			}
 		}
+		this.preparing = false;
+		this.cd.markForCheck();
 	}
 
 	ngOnDestroy() {
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 04ecda61..c3c39acc 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
@@ -59,7 +59,7 @@ import { StorageService } from '../../services/storage/storage.service';
 	styleUrls: ['./stream.component.css'],
 	animations: [
 		trigger('posterAnimation', [
-			transition(':enter', [style({ opacity: 0 }), animate('400ms', style({ opacity: 1 }))]),
+			transition(':enter', [style({ opacity: 0 }), animate('100ms', style({ opacity: 1 }))]),
 			transition(':leave', [style({ opacity: 1 }), animate('200ms', style({ opacity: 0 }))]),
 		])
 	]
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
index b810ed5c..c37cddf6 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
@@ -12,34 +12,34 @@ import {
 	TemplateRef,
 	ViewChild
 } from '@angular/core';
-import { first, skip, Subscription } from 'rxjs';
-import { TokenService } from '../../services/token/token.service';
+import { skip, Subscription } from 'rxjs';
 import { ChatService } from '../../services/chat/chat.service';
-import { PanelEvent, PanelService } from '../../services/panel/panel.service';
 import { DocumentService } from '../../services/document/document.service';
+import { PanelEvent, PanelService } from '../../services/panel/panel.service';
+import { TokenService } from '../../services/token/token.service';
 
-import { OpenViduService } from '../../services/openvidu/openvidu.service';
-import { LoggerService } from '../../services/logger/logger.service';
-import { ILogger } from '../../models/logger.model';
+import { MediaChange } from '@angular/flex-layout';
+import { MatMenuTrigger } from '@angular/material/menu';
 import { Session } from 'openvidu-browser';
-import { ActionService } from '../../services/action/action.service';
-import { DeviceService } from '../../services/device/device.service';
-import { ChatMessage } from '../../models/chat.model';
-import { ParticipantService } from '../../services/participant/participant.service';
-import { PanelType } from '../../models/panel.model';
-import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
 import {
 	ToolbarAdditionalButtonsDirective,
 	ToolbarAdditionalPanelButtonsDirective
 } from '../../directives/template/openvidu-angular.directive';
+import { ChatMessage } from '../../models/chat.model';
+import { ILogger } from '../../models/logger.model';
+import { PanelType } from '../../models/panel.model';
 import { OpenViduRole, ParticipantAbstractModel } from '../../models/participant.model';
-import { PlatformService } from '../../services/platform/platform.service';
-import { MatMenuTrigger } from '@angular/material/menu';
-import { RecordingService } from '../../services/recording/recording.service';
 import { RecordingInfo, RecordingStatus } from '../../models/recording.model';
-import { TranslateService } from '../../services/translate/translate.service';
-import { MediaChange } from '@angular/flex-layout';
+import { ActionService } from '../../services/action/action.service';
+import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
+import { DeviceService } from '../../services/device/device.service';
 import { LayoutService } from '../../services/layout/layout.service';
+import { LoggerService } from '../../services/logger/logger.service';
+import { OpenViduService } from '../../services/openvidu/openvidu.service';
+import { ParticipantService } from '../../services/participant/participant.service';
+import { PlatformService } from '../../services/platform/platform.service';
+import { RecordingService } from '../../services/recording/recording.service';
+import { TranslateService } from '../../services/translate/translate.service';
 
 /**
  *
@@ -706,6 +706,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 	private subscribeToScreenSize() {
 		this.screenSizeSub = this.documentService.screenSizeObs.subscribe((change: MediaChange[]) => {
 			this.screenSize = change[0].mqAlias;
+			this.cd.markForCheck();
 		});
 	}