frontend: update video room component to include access room title and add recordings card with navigation

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">
+		<div class="card-wrapper">
-			<h2 class="form-title">What is your name?</h2>
+			<mat-card class="form-card">
-			<form [formGroup]="participantForm" (ngSubmit)="accessRoom()">
+				<h2 class="form-title">
-				<mat-form-field appearance="outline" class="full-width">
+					Access room <strong>{{ roomId }}</strong>
-					<mat-label>Name</mat-label>
+				</h2>
-					<input
+				<form [formGroup]="participantForm" (ngSubmit)="accessRoom()">
-						id="participant-name-input"
+					<mat-form-field appearance="outline" class="full-width">
-						matInput
+						<mat-label>Name</mat-label>
-						placeholder="Enter your name"
+						<input
-						formControlName="name"
+							id="participant-name-input"
-						required
+							matInput
-					/>
+							placeholder="Enter your name"
-					@if (participantForm.get('name')?.hasError('minlength')) {
+							formControlName="name"
-						<mat-error> The name must be at least <strong>4 characters</strong> </mat-error>
+							required
-					}
+						/>
-					@if (participantForm.get('name')?.hasError('required')) {
+						@if (participantForm.get('name')?.hasError('minlength')) {
-						<mat-error> The name is <strong>required</strong> </mat-error>
+							<mat-error> The name must be at least <strong>4 characters</strong> </mat-error>
-					}
+						}
-					@if (participantForm.get('name')?.hasError('participantExists')) {
+						@if (participantForm.get('name')?.hasError('required')) {
-						<mat-error>
+							<mat-error> The name is <strong>required</strong> </mat-error>
-							The name is already taken. <strong> Please choose another name </strong>
+						}
-						</mat-error>
+						@if (participantForm.get('name')?.hasError('participantExists')) {
-					}
+							<mat-error>
-				</mat-form-field>
+								The name is already taken. <strong> Please choose another name </strong>
+							</mat-error>
+						}
+					</mat-form-field>
 
-				<button
+					<button
-					mat-raised-button
+						mat-raised-button
-					color="primary"
+						color="primary"
-					id="participant-name-submit"
+						id="participant-name-submit"
-					class="full-width"
+						class="full-width"
-					[disabled]="participantForm.invalid"
+						[disabled]="participantForm.invalid"
-				>
+					>
-					Continue
+						Continue to room
-				</button>
+					</button>
-			</form>
+				</form>
-		</mat-card>
+			</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

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 {

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,