frontend: update room-related terminology from roomIdPrefix to roomName across components and services

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

@@ -109,16 +109,17 @@
 				</ng-container>
 			}
 
-			<!-- Room ID Column -->
+			<!-- Room Info Column -->
 			@if (showRoomInfo) {
-				<ng-container matColumnDef="roomId">
+				<ng-container matColumnDef="roomInfo">
-					<th mat-header-cell *matHeaderCellDef class="room-header">Room ID</th>
+					<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-id">{{ recording.roomId }}</span>
-							@if (recording.filename) {
+							<!-- @if (recording.filename) {
-								<!-- <span class="filename">{{ recording.filename }}</span> -->
+								<span class="filename">{{ recording.filename }}</span>
-							}
+							} -->
 						</div>
 					</td>
 				</ng-container>
@@ -262,7 +263,13 @@
 	<!-- Load More Section -->
 	@if (showLoadMore) {
 		<div class="load-more-container" id="load-more-container">
-			<button mat-button class="load-more-btn" (click)="loadMoreRecordings()" [disabled]="loading" id="load-more-btn">
+			<button
+				mat-button
+				class="load-more-btn"
+				(click)="loadMoreRecordings()"
+				[disabled]="loading"
+				id="load-more-btn"
+			>
 				<mat-icon>expand_more</mat-icon>
 				<span>Load More Recordings</span>
 			</button>

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

@@ -87,13 +87,17 @@
 .room-info {
 	@extend .ov-info-display;
 
-	.room-id {
+	.room-name {
 		@extend .primary-text;
 	}
 
-	.filename {
+	.room-id {
 		@extend .secondary-text, .monospace-text;
 	}
+
+	// .filename {
+	// 	@extend .secondary-text, .monospace-text;
+	// }
 }
 
 // Status badge

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

@@ -111,7 +111,7 @@ export class RecordingListsComponent implements OnInit, OnChanges {
 	someSelected = signal(false);
 
 	// Table configuration
-	displayedColumns: string[] = ['select', 'roomId', 'status', 'startDate', 'duration', 'size', 'actions'];
+	displayedColumns: string[] = ['select', 'roomInfo', 'status', 'startDate', 'duration', 'size', 'actions'];
 
 	// Status options using enum values
 	statusOptions = [
@@ -188,7 +188,7 @@ export class RecordingListsComponent implements OnInit, OnChanges {
 			this.displayedColumns.push('select');
 		}
 		if (this.showRoomInfo) {
-			this.displayedColumns.push('roomId');
+			this.displayedColumns.push('roomInfo');
 		}
 
 		this.displayedColumns.push('status', 'startDate', 'duration', 'size', 'actions');

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

@@ -14,7 +14,7 @@
 				<input
 					matInput
 					[formControl]="nameFilterControl"
-					placeholder="Search by room ID or prefix"
+					placeholder="Search by room name"
 					id="search-input"
 				/>
 				<mat-icon matSuffix>search</mat-icon>
@@ -110,11 +110,12 @@
 				</ng-container>
 			}
 
-			<!-- Room ID Column -->
+			<!-- Room Name Column -->
-			<ng-container matColumnDef="roomId">
+			<ng-container matColumnDef="roomName">
-				<th mat-header-cell *matHeaderCellDef class="room-header" id="room-id-header">Room ID</th>
+				<th mat-header-cell *matHeaderCellDef class="room-header" id="room-name-header">Room Name</th>
-				<td mat-cell *matCellDef="let room" class="room-cell" id="room-id-cell-{{ room.roomId }}">
+				<td mat-cell *matCellDef="let room" class="room-cell" id="room-name-cell-{{ room.roomId }}">
 					<div class="room-info" id="room-info-{{ room.roomId }}">
+						<span class="room-name" id="room-name-{{ room.roomId }}">{{ room.roomName }}</span>
 						<span class="room-id" id="room-id-{{ room.roomId }}">{{ room.roomId }}</span>
 					</div>
 				</td>

frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.scss

@@ -114,9 +114,13 @@
 .room-info {
 	@extend .ov-info-display;
 
-	.room-id {
+	.room-name {
 		@extend .primary-text;
 	}
+
+	.room-id {
+		@extend .secondary-text, .monospace-text;
+	}
 }
 
 .status-badge {

frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.ts

@@ -119,7 +119,7 @@ export class RoomsListsComponent implements OnInit, OnChanges {
 	someSelected = signal(false);
 
 	// Table configuration
-	displayedColumns: string[] = ['select', 'roomId', 'status', 'creationDate', 'autoDeletion', 'actions'];
+	displayedColumns: string[] = ['select', 'roomName', 'status', 'creationDate', 'autoDeletion', 'actions'];
 
 	// Status options
 	statusOptions = [
@@ -171,7 +171,7 @@ export class RoomsListsComponent implements OnInit, OnChanges {
 			this.displayedColumns.push('select');
 		}
 
-		this.displayedColumns.push('roomId', 'status', 'creationDate', 'autoDeletion', 'actions');
+		this.displayedColumns.push('roomName', 'status', 'creationDate', 'autoDeletion', 'actions');
 	}
 
 	// ===== SELECTION METHODS =====

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

@@ -80,7 +80,7 @@ export class RecordingsComponent implements OnInit {
 				nextPageToken: this.nextPageToken
 			};
 
-			// Apply room name filter if provided
+			// Apply room ID filter if provided
 			if (filters?.nameFilter) {
 				recordingFilters.roomId = filters.nameFilter;
 			}

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.html

@@ -5,7 +5,7 @@
 		<div class="page-title-group">
 			<h2 class="page-title">Create Room</h2>
 			<p class="page-description">
-				Create a new video room with optional name prefix. For advanced options, use the room wizard.
+				Create a new room by just providing a name. For advanced options, use the room wizard.
 			</p>
 		</div>
 	</header>
@@ -13,14 +13,14 @@
 	<!-- Form Section -->
 	<main class="page-content">
 		<form [formGroup]="roomCreationForm" class="room-basic-creation-form" (ngSubmit)="onCreateRoom()">
-			<!-- Room Prefix Field -->
+			<!-- Room Field -->
 			<mat-form-field appearance="outline" class="form-field">
-				<mat-label>Room Name Prefix</mat-label>
+				<mat-label>Room Name</mat-label>
-				<input matInput formControlName="roomIdPrefix" placeholder="e.g. demo-room" />
+				<input matInput formControlName="roomName" placeholder="e.g. Demo Room" />
 				<mat-icon matSuffix class="ov-settings-icon">label</mat-icon>
-				<mat-hint>Optional prefix for room names. Leave empty for default naming.</mat-hint>
+				<mat-hint>Enter a custom room name, or leave blank to use the default name "Room".</mat-hint>
-				@if (roomCreationForm.get('roomIdPrefix')?.hasError('maxlength')) {
+				@if (roomCreationForm.get('roomName')?.hasError('maxlength')) {
-					<mat-error> Room name prefix cannot exceed 50 characters </mat-error>
+					<mat-error>Room name cannot exceed 50 characters</mat-error>
 				}
 			</mat-form-field>
 

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnDestroy, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, Output } from '@angular/core';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -25,15 +25,13 @@ export class RoomBasicCreationComponent implements OnDestroy {
 	@Output() createRoom = new EventEmitter<string | undefined>();
 	@Output() openAdvancedMode = new EventEmitter<void>();
 
-	roomCreationForm: FormGroup;
+	roomCreationForm = new FormGroup({
+		roomName: new FormControl('Room', [Validators.maxLength(50)])
+	});
 
 	private destroy$ = new Subject<void>();
 
-	constructor(private fb: FormBuilder) {
+	constructor() {
-		this.roomCreationForm = this.fb.group({
-			roomIdPrefix: ['', [Validators.maxLength(50)]]
-		});
-
 		this.roomCreationForm.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
 			// Optional: Save form data to local storage or service if needed
 		});
@@ -47,7 +45,7 @@ export class RoomBasicCreationComponent implements OnDestroy {
 	onCreateRoom() {
 		if (this.roomCreationForm.valid) {
 			const formValue = this.roomCreationForm.value;
-			this.createRoom.emit(formValue.roomIdPrefix || undefined);
+			this.createRoom.emit(formValue.roomName || undefined);
 		}
 	}
 

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.ts

@@ -89,8 +89,8 @@ export class RoomWizardComponent implements OnInit {
 		if (!this.roomId) return;
 
 		try {
-			const { roomIdPrefix, autoDeletionDate, preferences } = await this.roomService.getRoom(this.roomId);
+			const { roomName, autoDeletionDate, preferences } = await this.roomService.getRoom(this.roomId);
-			this.existingRoomData = { roomIdPrefix, autoDeletionDate, preferences };
+			this.existingRoomData = { roomName, autoDeletionDate, preferences };
 			if (this.existingRoomData) {
 				this.isBasicCreation.set(false);
 			}
@@ -127,13 +127,13 @@ export class RoomWizardComponent implements OnInit {
 		await this.navigationService.navigateTo('rooms', undefined, true);
 	}
 
-	async createRoom(roomIdPrefix?: string) {
+	async createRoom(roomName?: string) {
 		try {
 			// Call the room service to create a new room
-			const { moderatorRoomUrl } = await this.roomService.createRoom({ roomIdPrefix });
+			const { moderatorRoomUrl } = await this.roomService.createRoom({ roomName });
 			await this.navigationService.redirectTo(moderatorRoomUrl);
 		} catch (error) {
-			const errorMessage = `Failed to create room ${roomIdPrefix}`;
+			const errorMessage = `Failed to create room ${roomName}`;
 			this.notificationService.showSnackbar(errorMessage);
 			console.error(errorMessage, error);
 		} finally {

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.html

@@ -5,7 +5,7 @@
 		<div class="step-title-group">
 			<h3 class="step-title">Room Details</h3>
 			<p class="step-description">
-				Configure your room's details including name prefix and automatic deletion date
+				Configure your room's details including name and automatic deletion date
 			</p>
 		</div>
 	</header>
@@ -13,14 +13,14 @@
 	<!-- Form Section -->
 	<main class="step-content">
 		<form [formGroup]="roomDetailsForm" class="room-details-form">
-			<!-- Room Prefix Field -->
+			<!-- Room Field -->
 			<mat-form-field appearance="outline" class="form-field">
-				<mat-label>Room Name Prefix</mat-label>
+				<mat-label>Room Name</mat-label>
-				<input matInput formControlName="roomIdPrefix" placeholder="e.g. demo-room" />
+				<input matInput formControlName="roomName" placeholder="e.g. Demo Room" />
 				<mat-icon matSuffix class="ov-settings-icon">label</mat-icon>
-				<mat-hint>Optional prefix for room names. Leave empty for default naming.</mat-hint>
+				<mat-hint>Enter a custom room name, or leave blank to use the default name "Room".</mat-hint>
-				@if (roomDetailsForm.get('roomIdPrefix')?.hasError('maxlength')) {
+				@if (roomDetailsForm.get('roomName')?.hasError('maxlength')) {
-					<mat-error> Room name prefix cannot exceed 50 characters </mat-error>
+					<mat-error>Room name cannot exceed 50 characters</mat-error>
 				}
 			</mat-form-field>
 

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.ts

@@ -66,7 +66,7 @@ export class RoomWizardRoomDetailsComponent implements OnDestroy {
 		}
 
 		const stepData: Partial<MeetRoomOptions> = {
-			roomIdPrefix: formValue.roomIdPrefix,
+			roomName: formValue.roomName,
 			autoDeletionDate: autoDeletionDateTime
 		};
 

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts

@@ -163,7 +163,7 @@ export class RoomsComponent implements OnInit {
 	// 		const searchStr = filter.toLowerCase();
 	// 		return (
 	// 			data.roomId.toLowerCase().includes(searchStr) ||
-	// 			data.roomIdPrefix?.toLowerCase().includes(searchStr) ||
+	// 			data.roomName.toLowerCase().includes(searchStr) ||
 	// 			false ||
 	// 			(data.markedForDeletion ? 'inactive' : 'active').includes(searchStr)
 	// 		);

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

@@ -125,7 +125,7 @@
 			<div class="room-header">
 				<mat-icon class="ov-room-icon room-icon">video_chat</mat-icon>
 				<div class="room-info">
-					<h1 class="room-title">{{ roomId }}</h1>
+					<h1 class="room-title">{{ roomName }}</h1>
 					<p class="room-subtitle">Choose how you want to proceed</p>
 				</div>
 			</div>

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

@@ -121,6 +121,10 @@ export class MeetingComponent implements OnInit {
 		this.features = this.featureConfService.features;
 	}
 
+	get roomName(): string {
+		return this.room?.roomName || 'Room';
+	}
+
 	get hostname(): string {
 		return window.location.origin.replace('http://', '').replace('https://', '');
 	}
@@ -128,6 +132,7 @@ export class MeetingComponent implements OnInit {
 	async ngOnInit() {
 		this.roomId = this.roomService.getRoomId();
 		this.roomSecret = this.roomService.getRoomSecret();
+		this.room = await this.roomService.getRoom(this.roomId);
 
 		await this.setBackButtonText();
 		await this.checkForRecordings();
@@ -270,10 +275,9 @@ export class MeetingComponent implements OnInit {
 		try {
 			const { token, role } = await this.participantTokenService.generateToken({
 				roomId: this.roomId,
-				participantName: this.participantName,
+				secret: this.roomSecret,
-				secret: this.roomSecret
+				participantName: this.participantName
 			});
-			// The components library needs the token to be set in the 'onTokenRequested' method
 			this.participantToken = token;
 			this.participantRole = role;
 		} catch (error: any) {
@@ -398,23 +402,15 @@ export class MeetingComponent implements OnInit {
 	}
 
 	async copyModeratorLink() {
-		await this.loadRoomIfAbsent();
 		this.clipboard.copy(this.room!.moderatorRoomUrl);
 		this.notificationService.showSnackbar('Moderator link copied to clipboard');
 	}
 
 	async copyPublisherLink() {
-		await this.loadRoomIfAbsent();
 		this.clipboard.copy(this.room!.publisherRoomUrl);
 		this.notificationService.showSnackbar('Publisher link copied to clipboard');
 	}
 
-	private async loadRoomIfAbsent() {
-		if (!this.room) {
-			this.room = await this.roomService.getRoom(this.roomId);
-		}
-	}
-
 	async onRecordingStartRequested(event: RecordingStartRequestedEvent) {
 		try {
 			await this.recManagerService.startRecording(event.roomName);

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

@@ -12,8 +12,8 @@
 			<div class="room-info">
 				<h1 class="room-title">
 					Recordings for room
-					<span class="room-id">
+					<span class="room-name">
-						{{ roomId }}
+						{{ roomName }}
 					</span>
 				</h1>
 			</div>

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

@@ -35,7 +35,7 @@
 			color: var(--ov-meet-text-primary);
 			line-height: var(--ov-meet-line-height-tight);
 
-			.room-id {
+			.room-name {
 				font-weight: var(--ov-meet-font-weight-semibold);
 				color: var(--ov-meet-text-primary);
 			}

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

@@ -19,6 +19,7 @@ import { ILogger, LoggerService } from 'openvidu-components-angular';
 export class RoomRecordingsComponent implements OnInit {
 	recordings = signal<MeetRecordingInfo[]>([]);
 	roomId = '';
+	roomName = '';
 	canDeleteRecordings = false;
 
 	isLoading = false;
@@ -43,6 +44,9 @@ 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();
 	}

frontend/projects/shared-meet-components/src/lib/services/room.service.ts

@@ -20,7 +20,6 @@ import { LoggerService } from 'openvidu-components-angular';
 export class RoomService {
 	protected readonly ROOMS_API = `${HttpService.API_PATH_PREFIX}/rooms`;
 	protected readonly INTERNAL_ROOMS_API = `${HttpService.INTERNAL_API_PATH_PREFIX}/rooms`;
-	protected readonly MEETINGS_API = `${HttpService.INTERNAL_API_PATH_PREFIX}/meetings`;
 
 	protected roomId: string = '';
 	protected roomSecret: string = '';
@@ -212,7 +211,6 @@ export class RoomService {
 		this.roomPreferences = preferences;
 	}
 
-
 	/**
 	 * Retrieves the role and permissions for a specified room and secret.
 	 *

frontend/projects/shared-meet-components/src/lib/services/wizard-state.service.ts

@@ -72,8 +72,8 @@ export class RoomWizardStateService {
 				isVisible: true,
 				formGroup: this.formBuilder.group(
 					{
-						roomIdPrefix: [
+						roomName: [
-							{ value: initialRoomOptions.roomIdPrefix || '', disabled: editMode },
+							{ value: initialRoomOptions.roomName || 'Room', disabled: editMode },
 							editMode ? [] : [Validators.maxLength(50)]
 						],
 						autoDeletionDate: [
@@ -198,8 +198,8 @@ export class RoomWizardStateService {
 				};
 
 				// Only update fields that are explicitly provided
-				if ('roomIdPrefix' in stepData) {
+				if ('roomName' in stepData) {
-					updatedOptions.roomIdPrefix = stepData.roomIdPrefix;
+					updatedOptions.roomName = stepData.roomName;
 				}
 				if ('autoDeletionDate' in stepData) {
 					updatedOptions.autoDeletionDate = stepData.autoDeletionDate;