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

ov-components: add landscape orientation warning and improve loading animations

master
Carlos Santos 2025-09-22 12:39:07 +02:00
parent d48e44ea55
commit f11f0933b4
13 changed files with 110 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,31 +1,42 @@
<div id="spinner" *ngIf="loading" @sessionAnimation>
<mat-spinner [diameter]="50"></mat-spinner>
<span>{{ 'ROOM.JOINING' | translate }}</span>
</div>
<div id="session-container" *ngIf="!loading" @sessionAnimation>
<mat-sidenav-container #container #videoContainer class="sidenav-container">
<mat-sidenav
#sidenav
mode="{{ sidenavMode }}"
position="end"
class="sidenav-menu"
[ngClass]="{big: settingsPanelOpened}"
fixedInViewport="true"
fixedTopGap="0"
fixedBottomGap="0"
>
<ng-container *ngTemplateOutlet="panelTemplate"></ng-container>
</mat-sidenav>
<mat-sidenav-content class="sidenav-main">
<div id="layout-container" #layoutContainer>
<ng-container *ngTemplateOutlet="layoutTemplate"></ng-container>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
<div id="footer-container" *ngIf="toolbarTemplate">
<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
@if (loading) {
<div id="spinner" [@inOutAnimation]>
<mat-spinner [diameter]="50"></mat-spinner>
<span>{{ 'ROOM.JOINING' | translate }}</span>
</div>
</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 }"
fixedInViewport="true"
fixedTopGap="0"
fixedBottomGap="0"
>
<ng-container *ngTemplateOutlet="panelTemplate"></ng-container>
</mat-sidenav>
<mat-sidenav-content class="sidenav-main">
<div id="layout-container" #layoutContainer>
<ng-container *ngTemplateOutlet="layoutTemplate"></ng-container>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
<div id="footer-container" *ngIf="toolbarTemplate">
<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
</div>
</div>
}

34
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss
View File

@ -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%;

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

@ -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();
@ -236,11 +243,11 @@ export class SessionComponent implements OnInit, OnDestroy {
this.subscribeToVirtualBackground();
// if (this.libService.isRecordingEnabled()) {
// this.subscribeToRecordingEvents();
// this.subscribeToRecordingEvents();
// }
// if (this.libService.isBroadcastingEnabled()) {
// this.subscribeToBroadcastingEvents();
// this.subscribeToBroadcastingEvents();
// }
try {
await this.participantService.connect();

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json
View File

@ -22,7 +22,8 @@
"POWERED_BY": "动力 b"
},
"ROOM": {
"JOINING": "正在加入房间..."
"JOINING": "正在加入房间...",
"LANDSCAPE_WARNING": "请将设备旋转到纵向以获得最佳体验"
},
"PREJOIN": {
"NICKNAME_SECTION": "设置你的绰号",

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json
View File

@ -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",

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json
View File

@ -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",

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json
View File

@ -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",

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json
View File

@ -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",

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json
View File

@ -22,7 +22,8 @@
"POWERED_BY": "द्वारा संचालित"
},
"ROOM": {
"JOINING": "कक्ष में शामिल हो रहा है..."
"JOINING": "कक्ष में शामिल हो रहा है...",
"LANDSCAPE_WARNING": "कृपया बेहतर अनुभव के लिए अपने डिवाइस को पोर्ट्रेट मोड में घुमाएँ"
},
"PREJOIN": {
"NICKNAME_SECTION": "अपना निकनेम सेट करें",

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json
View File

@ -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",

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json
View File

@ -22,7 +22,8 @@
"POWERED_BY": "Powered by"
},
"ROOM": {
"JOINING": "ルームに参加しています..."
"JOINING": "ルームに参加しています...",
"LANDSCAPE_WARNING": "より良い体験のために、デバイスを縦向きに回転させてください"
},
"PREJOIN": {
"NICKNAME_SECTION": "ニックネームを設定してください",

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json
View File

@ -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",

3
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json
View File

@ -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",