From e2d61483f112b32e703a8a5fa22f3c2c021bbbd6 Mon Sep 17 00:00:00 2001
From: juancarmore <juancar_more2@hotmail.com>
Date: Wed, 3 Sep 2025 16:45:25 +0200
Subject: [PATCH] frontend: update meeting component to improve closed room
 state

---
 .../lib/pages/meeting/meeting.component.html  | 73 +++++++++++--------
 .../lib/pages/meeting/meeting.component.scss  | 30 ++++++--
 .../lib/pages/meeting/meeting.component.ts    |  5 --
 3 files changed, 64 insertions(+), 44 deletions(-)

diff --git a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html
index d288e55..f862892 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html
@@ -208,7 +208,6 @@
 				<mat-icon class="ov-room-icon room-icon">video_chat</mat-icon>
 				<div class="room-info">
 					<h1 class="room-title">{{ roomName }}</h1>
-					<p class="room-subtitle">Choose how you want to proceed</p>
 				</div>
 			</div>
 
@@ -222,43 +221,53 @@
 							<mat-card-title>{{ roomClosed ? 'Room Closed' : 'Join Meeting' }}</mat-card-title>
 							<mat-card-subtitle>{{
 								roomClosed
-									? 'This room is currently closed and not accepting new participants'
+									? 'This room is not available for meetings'
 									: 'Enter the room and start connecting'
 							}}</mat-card-subtitle>
 						</div>
 					</mat-card-header>
 
 					<mat-card-content class="card-content">
-						<form [formGroup]="participantForm" (ngSubmit)="submitAccessMeeting()" class="join-form">
-							<mat-form-field appearance="outline" class="name-field">
-								<mat-label>Your display name</mat-label>
-								<input
-									id="participant-name-input"
-									matInput
-									placeholder="Enter your name"
-									formControlName="name"
-									required
-								/>
-								<mat-icon matSuffix class="ov-action-icon">person</mat-icon>
-								@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>
-								}
-							</mat-form-field>
+						@if (!roomClosed) {
+							<form [formGroup]="participantForm" (ngSubmit)="submitAccessMeeting()" class="join-form">
+								<mat-form-field appearance="outline" class="name-field">
+									<mat-label>Your display name</mat-label>
+									<input
+										id="participant-name-input"
+										matInput
+										placeholder="Enter your name"
+										formControlName="name"
+										required
+									/>
+									<mat-icon matSuffix class="ov-action-icon">person</mat-icon>
+									@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>
+									}
+								</mat-form-field>
 
-							<button
-								mat-raised-button
-								color="primary"
-								id="participant-name-submit"
-								type="submit"
-								class="join-button"
-								[disabled]="participantForm.invalid || roomClosed"
-							>
-								<span>Join Meeting</span>
-							</button>
-						</form>
+								<button
+									mat-raised-button
+									color="primary"
+									id="participant-name-submit"
+									type="submit"
+									class="join-button"
+									[disabled]="participantForm.invalid"
+								>
+									<span>Join Meeting</span>
+								</button>
+							</form>
+						} @else {
+							<div class="room-closed-message">
+								<mat-icon class="warning-icon">warning</mat-icon>
+								<p>
+									Sorry, this room is closed. You cannot join at this time. Please contact the meeting
+									organizer for more information.
+								</p>
+							</div>
+						}
 					</mat-card-content>
 				</mat-card>
 
@@ -296,7 +305,7 @@
 			</div>
 
 			<!-- Room URL Badge -->
-			@if (features().canModerateRoom) {
+			@if (!roomClosed && features().canModerateRoom) {
 				<ov-share-meeting-link
 					[meetingUrl]="hostname + '/room/' + roomId"
 					(copyClicked)="copySpeakerLink()"
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss
index 76e1bbb..aee9de9 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss
+++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss
@@ -31,13 +31,6 @@
 			color: var(--ov-meet-text-primary);
 			line-height: var(--ov-meet-line-height-tight);
 		}
-
-		.room-subtitle {
-			margin: var(--ov-meet-spacing-xs) 0 0 0;
-			font-size: var(--ov-meet-font-size-lg);
-			color: var(--ov-meet-text-secondary);
-			line-height: var(--ov-meet-line-height-normal);
-		}
 	}
 }
 
@@ -145,11 +138,34 @@
 	}
 }
 
+.room-closed-message {
+	@include ov-flex-center;
+	flex-direction: column;
+	gap: var(--ov-meet-spacing-md);
+	text-align: center;
+
+	.warning-icon {
+		@include ov-icon(xl);
+		color: var(--ov-meet-color-warning);
+	}
+
+	p {
+		margin: 0;
+		font-size: var(--ov-meet-font-size-md);
+		color: var(--ov-meet-text-secondary);
+		line-height: var(--ov-meet-line-height-relaxed);
+	}
+}
+
 // Secondary Card - Recordings styling
 .secondary-card {
 	.card-header {
 		background: linear-gradient(135deg, var(--ov-meet-surface-color) 0%, var(--ov-meet-color-accent) 180%);
 	}
+
+	.card-content {
+		text-align: center;
+	}
 }
 
 // Join Form - Form styling
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts
index ef3a288..d7ab8de 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts
@@ -223,11 +223,6 @@ export class MeetingComponent implements OnInit {
 		if (participantName) {
 			this.participantForm.get('name')?.setValue(participantName);
 		}
-
-		// Disable the form if the room is closed
-		if (this.roomClosed) {
-			this.participantForm.disable();
-		}
 	}
 
 	async goToRecordings() {