mirror of https://github.com/OpenVidu/openvidu.git
ov-components: add landscape orientation warning and improve loading animations
Carlos Santos
parent
d48e44ea55
commit
f11f0933b4
|
|
@ -1,16 +1,26 @@
|
|||
<div id="spinner" *ngIf="loading" @sessionAnimation>
|
||||
@if (loading) {
|
||||
<div id="spinner" [@inOutAnimation]>
|
||||
<mat-spinner [diameter]="50"></mat-spinner>
|
||||
<span>{{ 'ROOM.JOINING' | translate }}</span>
|
||||
</div>
|
||||
|
||||
<div id="session-container" *ngIf="!loading" @sessionAnimation>
|
||||
</div>
|
||||
} @else {
|
||||
@if (viewportService.orientation() === 'landscape') {
|
||||
<!-- Landscape orientation warning -->
|
||||
<div id="landscape-warning" [@inOutAnimation]>
|
||||
<div class="warning-message">
|
||||
<mat-icon class="warning-icon">screen_rotation</mat-icon>
|
||||
<span>{{ 'ROOM.LANDSCAPE_WARNING' | translate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div id="session-container" [@inOutAnimation]>
|
||||
<mat-sidenav-container #container #videoContainer class="sidenav-container">
|
||||
<mat-sidenav
|
||||
#sidenav
|
||||
mode="{{ sidenavMode }}"
|
||||
position="end"
|
||||
class="sidenav-menu"
|
||||
[ngClass]="{big: settingsPanelOpened}"
|
||||
[ngClass]="{ big: settingsPanelOpened }"
|
||||
fixedInViewport="true"
|
||||
fixedTopGap="0"
|
||||
fixedBottomGap="0"
|
||||
|
|
@ -28,4 +38,5 @@
|
|||
<div id="footer-container" *ngIf="toolbarTemplate">
|
||||
<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,40 @@
|
|||
/* min-width: 400px; */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#landscape-warning {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--ov-background-color);
|
||||
opacity: 95%;
|
||||
align-content: space-evenly;
|
||||
text-align: center;
|
||||
color: var(--ov-text-primary-color);
|
||||
|
||||
.warning-message {
|
||||
display: inline-grid;
|
||||
display: -moz-inline-grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 50px;
|
||||
margin: auto;
|
||||
margin-bottom: 10px;
|
||||
animation: boomerang 1.2s ease-in-out infinite alternate;
|
||||
|
||||
@keyframes boomerang {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#spinner {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ import {
|
|||
import { ParticipantLeftEvent, ParticipantLeftReason, ParticipantModel } from '../../models/participant.model';
|
||||
import { RecordingStatus } from '../../models/recording.model';
|
||||
import { TemplateManagerService, SessionTemplateConfiguration } from '../../services/template/template-manager.service';
|
||||
import { ViewportService } from '../../services/viewport/viewport.service';
|
||||
|
||||
/**
|
||||
* @internal
|
||||
|
|
@ -58,14 +59,19 @@ import { TemplateManagerService, SessionTemplateConfiguration } from '../../serv
|
|||
selector: 'ov-session',
|
||||
templateUrl: './session.component.html',
|
||||
styleUrls: ['./session.component.scss'],
|
||||
animations: [trigger('sessionAnimation', [transition(':enter', [style({ opacity: 0 }), animate('50ms', style({ opacity: 1 }))])])],
|
||||
animations: [
|
||||
trigger('inOutAnimation', [
|
||||
transition(':enter', [style({ opacity: 0 }), animate('200ms', style({ opacity: 1 }))]),
|
||||
transition(':leave', [animate('200ms', style({ opacity: 0 }))])
|
||||
])
|
||||
],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone: false
|
||||
})
|
||||
export class SessionComponent implements OnInit, OnDestroy {
|
||||
@ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef<any>;
|
||||
@ContentChild('panel', { read: TemplateRef }) panelTemplate: TemplateRef<any>;
|
||||
@ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef<any>;
|
||||
@ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef<any> | undefined;
|
||||
@ContentChild('panel', { read: TemplateRef }) panelTemplate: TemplateRef<any> | undefined;
|
||||
@ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef<any> | undefined;
|
||||
/**
|
||||
* Provides event notifications that fire when Room is created for the local participant.
|
||||
*/
|
||||
|
|
@ -97,7 +103,7 @@ export class SessionComponent implements OnInit, OnDestroy {
|
|||
*/
|
||||
@Output() onParticipantLeft: EventEmitter<ParticipantLeftEvent> = new EventEmitter<ParticipantLeftEvent>();
|
||||
|
||||
room: Room;
|
||||
room!: Room;
|
||||
sideMenu: MatSidenav;
|
||||
sidenavMode: SidenavMode = SidenavMode.SIDE;
|
||||
settingsPanelOpened: boolean;
|
||||
|
|
@ -131,7 +137,8 @@ export class SessionComponent implements OnInit, OnDestroy {
|
|||
// private captionService: CaptionService,
|
||||
private backgroundService: VirtualBackgroundService,
|
||||
private cd: ChangeDetectorRef,
|
||||
private templateManagerService: TemplateManagerService
|
||||
private templateManagerService: TemplateManagerService,
|
||||
protected viewportService: ViewportService
|
||||
) {
|
||||
this.log = this.loggerSrv.get('SessionComponent');
|
||||
this.setupTemplates();
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
"POWERED_BY": "动力 b"
|
||||
},
|
||||
"ROOM": {
|
||||
"JOINING": "正在加入房间..."
|
||||
"JOINING": "正在加入房间...",
|
||||
"LANDSCAPE_WARNING": "请将设备旋转到纵向以获得最佳体验"
|
||||
},
|
||||
"PREJOIN": {
|
||||
"NICKNAME_SECTION": "设置你的绰号",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
"POWERED_BY": "Unterstützt von"
|
||||
},
|
||||
"ROOM": {
|
||||
"JOINING": "Raum beitreten..."
|
||||
"JOINING": "Raum beitreten...",
|
||||
"LANDSCAPE_WARNING": "Bitte drehen Sie Ihr Gerät für eine bessere Erfahrung in den Hochformatmodus"
|
||||
},
|
||||
"PREJOIN": {
|
||||
"NICKNAME_SECTION": "Legen Sie Ihren Spitznamen fest",
|
||||
|
|
|
|||
|
|
@ -34,7 +34,8 @@
|
|||
"PREPARING": "Preparing room..."
|
||||
},
|
||||
"ROOM": {
|
||||
"JOINING": "Joining room..."
|
||||
"JOINING": "Joining room...",
|
||||
"LANDSCAPE_WARNING": "Please rotate your device to portrait for a better experience"
|
||||
},
|
||||
"TOOLBAR": {
|
||||
"MUTE_AUDIO": "Mute your audio",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
"POWERED_BY": "Construido por"
|
||||
},
|
||||
"ROOM": {
|
||||
"JOINING": "Uniéndose a la sala..."
|
||||
"JOINING": "Uniéndose a la sala...",
|
||||
"LANDSCAPE_WARNING": "Por favor, gira tu dispositivo a modo retrato para una mejor experiencia"
|
||||
},
|
||||
"PREJOIN": {
|
||||
"NICKNAME_SECTION": "Elige tu nombre",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
"POWERED_BY": "Alimenté par"
|
||||
},
|
||||
"ROOM": {
|
||||
"JOINING": "Rejoindre la salle..."
|
||||
"JOINING": "Rejoindre la salle...",
|
||||
"LANDSCAPE_WARNING": "Veuillez faire pivoter votre appareil en mode portrait pour une meilleure expérience"
|
||||
},
|
||||
"PREJOIN": {
|
||||
"NICKNAME_SECTION": "Définir votre surnom",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
"POWERED_BY": "द्वारा संचालित"
|
||||
},
|
||||
"ROOM": {
|
||||
"JOINING": "कक्ष में शामिल हो रहा है..."
|
||||
"JOINING": "कक्ष में शामिल हो रहा है...",
|
||||
"LANDSCAPE_WARNING": "कृपया बेहतर अनुभव के लिए अपने डिवाइस को पोर्ट्रेट मोड में घुमाएँ"
|
||||
},
|
||||
"PREJOIN": {
|
||||
"NICKNAME_SECTION": "अपना निकनेम सेट करें",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
"POWERED_BY": "Offerto da"
|
||||
},
|
||||
"ROOM": {
|
||||
"JOINING": "Unendosi alla stanza..."
|
||||
"JOINING": "Unendosi alla stanza...",
|
||||
"LANDSCAPE_WARNING": "Per una migliore esperienza, ruota il dispositivo in modalità verticale"
|
||||
},
|
||||
"PREJOIN": {
|
||||
"NICKNAME_SECTION": "Imposta il tuo soprannome",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
"POWERED_BY": "Powered by"
|
||||
},
|
||||
"ROOM": {
|
||||
"JOINING": "ルームに参加しています..."
|
||||
"JOINING": "ルームに参加しています...",
|
||||
"LANDSCAPE_WARNING": "より良い体験のために、デバイスを縦向きに回転させてください"
|
||||
},
|
||||
"PREJOIN": {
|
||||
"NICKNAME_SECTION": "ニックネームを設定してください",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
"POWERED_BY": "Aangedreven door"
|
||||
},
|
||||
"ROOM": {
|
||||
"JOINING": "De ruimte betreden..."
|
||||
"JOINING": "De ruimte betreden...",
|
||||
"LANDSCAPE_WARNING": "Draai uw apparaat voor een betere ervaring naar portretmodus"
|
||||
},
|
||||
"PREJOIN": {
|
||||
"NICKNAME_SECTION": "Stel je bijnaam in",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
"POWERED_BY": "Distribuído por"
|
||||
},
|
||||
"ROOM": {
|
||||
"JOINING": "Entrando na sala..."
|
||||
"JOINING": "Entrando na sala...",
|
||||
"LANDSCAPE_WARNING": "Por favor, gire seu dispositivo para o modo retrato para uma melhor experiência"
|
||||
},
|
||||
"PREJOIN": {
|
||||
"NICKNAME_SECTION": "Defina seu apelido",
|
||||
|
|
|
|||
Loading…
Reference in New Issue