frontend: update meeting component to improve closed room state

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,13 +221,14 @@
 							<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">
+						@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>
@@ -254,11 +254,20 @@
 									id="participant-name-submit"
 									type="submit"
 									class="join-button"
-								[disabled]="participantForm.invalid || roomClosed"
+									[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()"

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

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() {