From 1cd58c19b9f70a3ca2be65338e7d1a2eed899e35 Mon Sep 17 00:00:00 2001
From: juancarmore <juancar_more2@hotmail.com>
Date: Fri, 6 Jun 2025 17:15:33 +0200
Subject: [PATCH] frontend: update video room component to include access room
 title and add recordings card with navigation

---
 .../video-room/video-room.component.html      | 81 +++++++++++--------
 .../video-room/video-room.component.scss      | 34 +++++++-
 .../pages/video-room/video-room.component.ts  |  6 ++
 3 files changed, 85 insertions(+), 36 deletions(-)

diff --git a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html
index 46510ed..7297a84 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html
@@ -1,41 +1,52 @@
 @if (!showRoom) {
 	<div class="form-container">
-		<mat-card class="form-card">
-			<h2 class="form-title">What is your name?</h2>
-			<form [formGroup]="participantForm" (ngSubmit)="accessRoom()">
-				<mat-form-field appearance="outline" class="full-width">
-					<mat-label>Name</mat-label>
-					<input
-						id="participant-name-input"
-						matInput
-						placeholder="Enter your name"
-						formControlName="name"
-						required
-					/>
-					@if (participantForm.get('name')?.hasError('minlength')) {
-						<mat-error> The name must be at least <strong>4 characters</strong> </mat-error>
-					}
-					@if (participantForm.get('name')?.hasError('required')) {
-						<mat-error> The name is <strong>required</strong> </mat-error>
-					}
-					@if (participantForm.get('name')?.hasError('participantExists')) {
-						<mat-error>
-							The name is already taken. <strong> Please choose another name </strong>
-						</mat-error>
-					}
-				</mat-form-field>
+		<div class="card-wrapper">
+			<mat-card class="form-card">
+				<h2 class="form-title">
+					Access room <strong>{{ roomId }}</strong>
+				</h2>
+				<form [formGroup]="participantForm" (ngSubmit)="accessRoom()">
+					<mat-form-field appearance="outline" class="full-width">
+						<mat-label>Name</mat-label>
+						<input
+							id="participant-name-input"
+							matInput
+							placeholder="Enter your name"
+							formControlName="name"
+							required
+						/>
+						@if (participantForm.get('name')?.hasError('minlength')) {
+							<mat-error> The name must be at least <strong>4 characters</strong> </mat-error>
+						}
+						@if (participantForm.get('name')?.hasError('required')) {
+							<mat-error> The name is <strong>required</strong> </mat-error>
+						}
+						@if (participantForm.get('name')?.hasError('participantExists')) {
+							<mat-error>
+								The name is already taken. <strong> Please choose another name </strong>
+							</mat-error>
+						}
+					</mat-form-field>
 
-				<button
-					mat-raised-button
-					color="primary"
-					id="participant-name-submit"
-					class="full-width"
-					[disabled]="participantForm.invalid"
-				>
-					Continue
-				</button>
-			</form>
-		</mat-card>
+					<button
+						mat-raised-button
+						color="primary"
+						id="participant-name-submit"
+						class="full-width"
+						[disabled]="participantForm.invalid"
+					>
+						Continue to room
+					</button>
+				</form>
+			</mat-card>
+
+			<mat-card class="recordings-card">
+				<div class="recordings-content">
+					<h3>View recordings</h3>
+					<button mat-stroked-button color="accent" (click)="goToRecordings()">Go to recordings</button>
+				</div>
+			</mat-card>
+		</div>
 	</div>
 } @else {
 	<ov-videoconference
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss
index 5ce78a8..2c27e5b 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss
+++ b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss
@@ -4,20 +4,52 @@
 	align-items: center;
 	height: 100vh;
 	background-color: var(--ov-background-color);
+	padding: 20px;
 }
 
-.form-card {
+.card-wrapper {
+	display: flex;
+	gap: 40px;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: flex-start;
+}
+
+.form-card{
 	width: 400px;
 	padding: 20px;
 	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 	border-radius: var(--ov-surface-radius);
 	background-color: var(--ov-surface-color);
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.recordings-card {
+	padding: 16px;
+	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+	border-radius: var(--ov-surface-radius);
+	background-color: var(--ov-surface-color);
+	width: fit-content;
+	align-self: center;
+}
+
+.recordings-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
 }
 
 .form-title {
 	text-align: center;
 	margin-bottom: 20px;
 	color: var(--ov-text-surface-color);
+
+	strong {
+		font-style: italic;
+	}
 }
 
 .full-width {
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.ts
index 2f24f26..f5b70a9 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.ts
@@ -212,6 +212,12 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
 		return { publisherSecret, moderatorSecret };
 	}
 
+	goToRecordings() {
+		this.router.navigate([`room/${this.roomId}/recordings`], {
+			queryParams: { secret: this.roomSecret }
+		});
+	}
+
 	onParticipantConnected(event: ParticipantModel) {
 		const message: OutboundEventMessage = {
 			event: WebComponentEvent.JOIN,