ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Fixed UI glitches on iPhones

pull/748/head
Carlos Santos 2022-10-14 14:46:32 +02:00
parent 92fd9cd634
commit a4c2955dd4
4 changed files with 47 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html
View File

@ -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-container #container #videoContainer class="sidenav-container">
<mat-sidenav <mat-sidenav
#sidenav #sidenav

50
openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
View File

@ -1,7 +1,5 @@
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy, ChangeDetectorRef, Component,
ChangeDetectorRef,
Component,
ContentChild, ContentChild,
ElementRef, ElementRef,
EventEmitter, EventEmitter,
@ -13,35 +11,32 @@ import {
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
import { import {
Subscriber,
Session,
StreamEvent,
StreamPropertyChangedEvent,
SessionDisconnectedEvent,
ConnectionEvent, ConnectionEvent,
RecordingEvent RecordingEvent, Session, SessionDisconnectedEvent, StreamEvent,
StreamPropertyChangedEvent, Subscriber
} from 'openvidu-browser'; } from 'openvidu-browser';
import { VideoType } from '../../models/video-type.model';
import { ILogger } from '../../models/logger.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 { 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 { LoggerService } from '../../services/logger/logger.service';
import { OpenViduService } from '../../services/openvidu/openvidu.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 { PanelEvent, PanelService } from '../../services/panel/panel.service';
import { RecordingService } from '../../services/recording/recording.service'; import { ParticipantService } from '../../services/participant/participant.service';
import { TranslateService } from '../../services/translate/translate.service';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
import { PlatformService } from '../../services/platform/platform.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 * @internal
@ -51,6 +46,11 @@ import { PlatformService } from '../../services/platform/platform.service';
selector: 'ov-session', selector: 'ov-session',
templateUrl: './session.component.html', templateUrl: './session.component.html',
styleUrls: ['./session.component.css'], styleUrls: ['./session.component.css'],
animations: [
trigger('sessionAnimation', [
transition(':enter', [style({ opacity: 0 }), animate('400ms', style({ opacity: 1 }))]),
])
],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class SessionComponent implements OnInit { export class SessionComponent implements OnInit {
@ -69,6 +69,7 @@ export class SessionComponent implements OnInit {
sidenavMode: SidenavMode = SidenavMode.SIDE; sidenavMode: SidenavMode = SidenavMode.SIDE;
settingsPanelOpened: boolean; settingsPanelOpened: boolean;
drawer: MatDrawerContainer; drawer: MatDrawerContainer;
preparing: boolean = true;
protected readonly SIDENAV_WIDTH_LIMIT_MODE = 790; protected readonly SIDENAV_WIDTH_LIMIT_MODE = 790;
@ -91,7 +92,8 @@ export class SessionComponent implements OnInit {
protected panelService: PanelService, protected panelService: PanelService,
private recordingService: RecordingService, private recordingService: RecordingService,
private translateService: TranslateService, private translateService: TranslateService,
private platformService: PlatformService private platformService: PlatformService,
private cd: ChangeDetectorRef
) { ) {
this.log = this.loggerSrv.get('SessionComponent'); this.log = this.loggerSrv.get('SessionComponent');
} }
@ -171,6 +173,8 @@ export class SessionComponent implements OnInit {
await this.openviduService.publishVideo(true); await this.openviduService.publishVideo(true);
} }
} }
this.preparing = false;
this.cd.markForCheck();
} }
ngOnDestroy() { ngOnDestroy() {

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

@ -59,7 +59,7 @@ import { StorageService } from '../../services/storage/storage.service';
styleUrls: ['./stream.component.css'], styleUrls: ['./stream.component.css'],
animations: [ animations: [
trigger('posterAnimation', [ 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 }))]), transition(':leave', [style({ opacity: 1 }), animate('200ms', style({ opacity: 0 }))]),
]) ])
] ]

35
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
View File

@ -12,34 +12,34 @@ import {
TemplateRef, TemplateRef,
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
import { first, skip, Subscription } from 'rxjs'; import { skip, Subscription } from 'rxjs';
import { TokenService } from '../../services/token/token.service';
import { ChatService } from '../../services/chat/chat.service'; import { ChatService } from '../../services/chat/chat.service';
import { PanelEvent, PanelService } from '../../services/panel/panel.service';
import { DocumentService } from '../../services/document/document.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 { MediaChange } from '@angular/flex-layout';
import { LoggerService } from '../../services/logger/logger.service'; import { MatMenuTrigger } from '@angular/material/menu';
import { ILogger } from '../../models/logger.model';
import { Session } from 'openvidu-browser'; 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 { import {
ToolbarAdditionalButtonsDirective, ToolbarAdditionalButtonsDirective,
ToolbarAdditionalPanelButtonsDirective ToolbarAdditionalPanelButtonsDirective
} from '../../directives/template/openvidu-angular.directive'; } 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 { 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 { RecordingInfo, RecordingStatus } from '../../models/recording.model';
import { TranslateService } from '../../services/translate/translate.service'; import { ActionService } from '../../services/action/action.service';
import { MediaChange } from '@angular/flex-layout'; import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
import { DeviceService } from '../../services/device/device.service';
import { LayoutService } from '../../services/layout/layout.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() { private subscribeToScreenSize() {
this.screenSizeSub = this.documentService.screenSizeObs.subscribe((change: MediaChange[]) => { this.screenSizeSub = this.documentService.screenSizeObs.subscribe((change: MediaChange[]) => {
this.screenSize = change[0].mqAlias; this.screenSize = change[0].mqAlias;
this.cd.markForCheck();
}); });
} }