From bd74184799deda693bf9b0dc8760ba6df9851611 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Mon, 22 Sep 2025 19:22:28 +0200
Subject: [PATCH] ov-components: enhance pre-join component for mobile support
 and viewport handling

---
 .../pre-join/pre-join.component.html          |  2 +-
 .../pre-join/pre-join.component.scss          | 33 +++++++++++++++++++
 .../components/pre-join/pre-join.component.ts |  8 +++--
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
index 54930231..367e3fe3 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
@@ -1,4 +1,4 @@
-<div class="prejoin-container" id="prejoin-container" [class.name-error]="!!_error">
+<div class="prejoin-container" id="prejoin-container" [class.mobile]="viewportService.isMobile()" [class.name-error]="!!_error">
 	<!-- Top Language Toolbar -->
 	<div class="top-toolbar" *ngIf="!isMinimal">
 		<ov-lang-selector [compact]="false" class="language-selector" (onLangChanged)="onLangChanged.emit($event)"> </ov-lang-selector>
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
index 73e67fa5..421b1ded 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
@@ -293,6 +293,39 @@
 		}
 	}
 
+	.prejoin-container.mobile {
+		padding: 0;
+		.prejoin-main {
+			max-width: none;
+			width: 100%;
+			height: 100vh;
+			max-height: none;
+			border-radius: 0;
+			display: flex;
+			flex-direction: column;
+
+			.configuration-section {
+				padding: 20px 10px;
+				justify-content: center;
+				gap: 18px;
+			}
+		}
+
+		.video-preview-section {
+			flex: 1;
+			height: 50vh;
+			display: flex;
+			flex-direction: column;
+
+			.video-preview-container {
+				flex: 1;
+				height: 75vh;
+				aspect-ratio: unset;
+				border-radius: 0;
+			}
+		}
+	}
+
 	@keyframes slideInFromRight {
 		from {
 			opacity: 0;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
index 7d497fe6..4bc2ff63 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
@@ -16,6 +16,7 @@ import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.servic
 import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
 import { LoggerService } from '../../services/logger/logger.service';
 import { OpenViduService } from '../../services/openvidu/openvidu.service';
+import { ViewportService } from '../../services/viewport/viewport.service';
 import { TranslateService } from '../../services/translate/translate.service';
 import { LocalTrack, Track } from 'livekit-client';
 import { CustomDevice } from '../../models/device.model';
@@ -74,7 +75,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 	@Output() onReadyToJoin = new EventEmitter<any>();
 
 	_error: string | undefined;
-	windowSize: number;
+	windowSize!: number;
 	isLoading = true;
 	participantName: string | undefined = '';
 
@@ -95,7 +96,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 	audioTrack: LocalTrack | undefined;
 	isVideoEnabled: boolean = false;
 	hasVideoDevices: boolean = true;
-	private tracks: LocalTrack[];
+	private tracks: LocalTrack[] = [];
 	private log: ILogger;
 	private destroy$ = new Subject<void>();
 	private shouldRemoveTracksWhenComponentIsDestroyed: boolean = true;
@@ -111,7 +112,8 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 		private cdkSrv: CdkOverlayService,
 		private openviduService: OpenViduService,
 		private translateService: TranslateService,
-		private changeDetector: ChangeDetectorRef
+		private changeDetector: ChangeDetectorRef,
+		protected viewportService: ViewportService
 	) {
 		this.log = this.loggerSrv.get('PreJoinComponent');
 	}