-
-
-
-
-
-
-
-
-
-
-
+} @else {
+ @if (viewportService.orientation() === 'landscape') {
+
+
+
+ screen_rotation
+ {{ 'ROOM.LANDSCAPE_WARNING' | translate }}
+
+
+ }
+
+}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss
index f408a794..820d8d9c 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss
@@ -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%;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts
index dc0a9260..9d54ef4e 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts
@@ -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
;
- @ContentChild('panel', { read: TemplateRef }) panelTemplate: TemplateRef;
- @ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef;
+ @ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef | undefined;
+ @ContentChild('panel', { read: TemplateRef }) panelTemplate: TemplateRef | undefined;
+ @ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef | 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 = new EventEmitter();
- 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();
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json
index cecaa623..47b83028 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json
@@ -22,7 +22,8 @@
"POWERED_BY": "动力 b"
},
"ROOM": {
- "JOINING": "正在加入房间..."
+ "JOINING": "正在加入房间...",
+ "LANDSCAPE_WARNING": "请将设备旋转到纵向以获得最佳体验"
},
"PREJOIN": {
"NICKNAME_SECTION": "设置你的绰号",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json
index cbc1771a..5ad0e75a 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json
@@ -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",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json
index 623295a5..2bd1f0b0 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json
@@ -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",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json
index cf927b3f..da4189aa 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json
@@ -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",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json
index 14d0c4b8..d5b6e0f5 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json
@@ -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",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json
index 925f7c3a..6498ec0e 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json
@@ -22,7 +22,8 @@
"POWERED_BY": "द्वारा संचालित"
},
"ROOM": {
- "JOINING": "कक्ष में शामिल हो रहा है..."
+ "JOINING": "कक्ष में शामिल हो रहा है...",
+ "LANDSCAPE_WARNING": "कृपया बेहतर अनुभव के लिए अपने डिवाइस को पोर्ट्रेट मोड में घुमाएँ"
},
"PREJOIN": {
"NICKNAME_SECTION": "अपना निकनेम सेट करें",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json
index b7ad1053..258743ff 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json
@@ -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",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json
index 8525b613..06a38bf7 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json
@@ -22,7 +22,8 @@
"POWERED_BY": "Powered by"
},
"ROOM": {
- "JOINING": "ルームに参加しています..."
+ "JOINING": "ルームに参加しています...",
+ "LANDSCAPE_WARNING": "より良い体験のために、デバイスを縦向きに回転させてください"
},
"PREJOIN": {
"NICKNAME_SECTION": "ニックネームを設定してください",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json
index 159a3cdb..2ff2676b 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json
@@ -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",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json
index f563f01b..dfffae04 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json
@@ -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",