frontend: update recording components to display roomName instead of roomId

frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html

@@ -115,7 +115,7 @@
 					<th mat-header-cell *matHeaderCellDef class="room-header">Room</th>
 					<td mat-cell *matCellDef="let recording" class="room-cell">
 						<div class="room-info">
-							<!-- <span class="room-name">{{ recording.roomName }}</span> -->
+							<span class="room-name">{{ recording.roomName }}</span>
 							<span class="room-id">{{ recording.roomId }}</span>
 							<!-- @if (recording.filename) {
 								<span class="filename">{{ recording.filename }}</span>

frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts

@@ -44,11 +44,16 @@ export class RoomRecordingsComponent implements OnInit {
 
 	async ngOnInit() {
 		this.roomId = this.route.snapshot.paramMap.get('room-id')!;
-		const parts = this.roomId.split('-');
-		this.roomName = parts.slice(0, -1).join('-');
-
 		this.canDeleteRecordings = this.recordingService.canDeleteRecordings();
 		await this.loadRecordings();
+
+		// Set room name based on recordings or roomId
+		if (this.recordings()) {
+			this.roomName = this.recordings()[0].roomName;
+		} else {
+			const parts = this.roomId.split('-');
+			this.roomName = parts.slice(0, -1).join('-');
+		}
 	}
 
 	async goBackToRoom() {

frontend/projects/shared-meet-components/src/lib/pages/view-recording/view-recording.component.html

@@ -45,7 +45,7 @@
 					</div>
 					<div class="header-info">
 						<div class="recording-info">
-							<h1 class="recording-title">{{ recording.roomId }}</h1>
+							<h1 class="recording-title">{{ recording.roomName }}</h1>
 							<div class="recording-metadata">
 								<span class="recording-date">
 									<mat-icon class="ov-action-icon">schedule</mat-icon>