frontend: Refactor room-related terminology from 'roomName' to 'roomId'

frontend/projects/shared-meet-components/src/lib/guards/auth.guard.ts

@@ -57,11 +57,11 @@ export const checkParticipantRoleAndAuthGuard: CanActivateFn = async (
 	let participantRole: ParticipantRole;
 
 	try {
-		const roomName = contextService.getRoomName();
+		const roomId = contextService.getRoomId();
 		const secret = contextService.getSecret();
-		const storageSecret = sessionStorageService.getModeratorSecret(roomName);
+		const storageSecret = sessionStorageService.getModeratorSecret(roomId);
 
-		participantRole = await httpService.getParticipantRole(roomName, storageSecret || secret);
+		participantRole = await httpService.getParticipantRole(roomId, storageSecret || secret);
 	} catch (error) {
 		console.error('Error getting participant role:', error);
 		return router.createUrlTree(['unauthorized'], { queryParams: { reason: 'unauthorized-participant' } });

frontend/projects/shared-meet-components/src/lib/guards/extract-query-params.guard.ts

@@ -4,13 +4,13 @@ import { ContextService } from '../services';
 
 export const extractQueryParamsGuard: CanActivateFn = (route: ActivatedRouteSnapshot) => {
 	const contextService = inject(ContextService);
-	const { roomName, participantName, secret, leaveRedirectUrl } = extractParams(route);
+	const { roomId, participantName, secret, leaveRedirectUrl } = extractParams(route);
 
 	if (isValidUrl(leaveRedirectUrl)) {
 		contextService.setLeaveRedirectUrl(leaveRedirectUrl);
 	}
 
-	contextService.setRoomName(roomName);
+	contextService.setRoomId(roomId);
 	contextService.setParticipantName(participantName);
 	contextService.setSecret(secret);
 
@@ -18,7 +18,7 @@ export const extractQueryParamsGuard: CanActivateFn = (route: ActivatedRouteSnap
 };
 
 const extractParams = (route: ActivatedRouteSnapshot) => ({
-	roomName: route.params['room-name'],
+	roomId: route.params['room-id'],
 	participantName: route.queryParams['participant-name'],
 	secret: route.queryParams['secret'],
 	leaveRedirectUrl: route.queryParams['leave-redirect-url']

frontend/projects/shared-meet-components/src/lib/guards/participant-name.guard.ts

@@ -6,13 +6,13 @@ import { ContextService } from '../services';
 export const checkParticipantNameGuard: CanActivateFn = (route, state) => {
 	const router = inject(Router);
 	const contextService = inject(ContextService);
-	const roomName = route.params['room-name'];
+	const roomId = route.params['room-id'];
 	const hasParticipantName = !!contextService.getParticipantName();
 
 	// Check if participant name exists in the service
 	if (!hasParticipantName) {
 		// Redirect to a page where the participant can input their participant name
-		const participantNameRoute = router.createUrlTree([`room/${roomName}/participant-name`], {
+		const participantNameRoute = router.createUrlTree([`room/${roomId}/participant-name`], {
 			queryParams: { originUrl: state.url, t: Date.now() }
 		});
 		return new RedirectCommand(participantNameRoute, {

frontend/projects/shared-meet-components/src/lib/guards/replace-moderator-secret.guard.ts

@@ -33,10 +33,10 @@ export const replaceModeratorSecretGuard: CanActivateFn = (route, _state) => {
 			)
 			.subscribe(async () => {
 				if (contextService.isModeratorParticipant()) {
-					const roomName = contextService.getRoomName();
+					const roomId = contextService.getRoomId();
-					const { moderatorSecret, publisherSecret } = await getUrlSecret(httpService, roomName);
+					const { moderatorSecret, publisherSecret } = await getUrlSecret(httpService, roomId);
 
-					sessionStorageService.setModeratorSecret(roomName, moderatorSecret);
+					sessionStorageService.setModeratorSecret(roomId, moderatorSecret);
 					// Replace secret in URL by the publisher secret
 					const queryParams = { ...route.queryParams, secret: publisherSecret };
 					const urlTree = router.createUrlTree([], { queryParams, queryParamsHandling: 'merge' });
@@ -55,12 +55,9 @@ export const replaceModeratorSecretGuard: CanActivateFn = (route, _state) => {
 
 const getUrlSecret = async (
 	httpService: HttpService,
-	roomName: string
+	roomId: string
 ): Promise<{ moderatorSecret: string; publisherSecret: string }> => {
-	const { moderatorRoomUrl, publisherRoomUrl } = await httpService.getRoom(
+	const { moderatorRoomUrl, publisherRoomUrl } = await httpService.getRoom(roomId);
-		roomName,
-		'moderatorRoomUrl,publisherRoomUrl'
-	);
 
 	const extractSecret = (urlString: string, type: string): string => {
 		const url = new URL(urlString);

frontend/projects/shared-meet-components/src/lib/guards/validate-room-access.guard.ts

@@ -14,15 +14,15 @@ export const validateRoomAccessGuard: CanActivateFn = async (
 	const router = inject(Router);
 	const sessionStorageService = inject(SessionStorageService);
 
-	const roomName = contextService.getRoomName();
+	const roomId = contextService.getRoomId();
 	const participantName = contextService.getParticipantName();
 	const secret = contextService.getSecret();
-	const storageSecret = sessionStorageService.getModeratorSecret(roomName);
+	const storageSecret = sessionStorageService.getModeratorSecret(roomId);
 
 	try {
 		// Generate a participant token
 		const response = await httpService.generateParticipantToken({
-			roomName,
+			roomId,
 			participantName,
 			secret: storageSecret || secret
 		});
@@ -34,7 +34,7 @@ export const validateRoomAccessGuard: CanActivateFn = async (
 			case 409:
 				// Participant already exists.
 				// Send a timestamp to force update the query params and show the error message in participant name input form
-				const participantNameRoute = router.createUrlTree([`room/${roomName}/participant-name`], {
+				const participantNameRoute = router.createUrlTree([`room/${roomId}/participant-name`], {
 					queryParams: { originUrl: state.url, accessError: 'participant-exists', t: Date.now() }
 				});
 				return new RedirectCommand(participantNameRoute, {

frontend/projects/shared-meet-components/src/lib/interceptors/http.interceptor.ts

@@ -46,12 +46,12 @@ export const httpInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, ne
 
 	const refreshParticipantToken = (firstError: HttpErrorResponse): Observable<HttpEvent<unknown>> => {
 		console.log('Refreshing participant token...');
-		const roomName = contextService.getRoomName();
+		const roomId = contextService.getRoomId();
 		const participantName = contextService.getParticipantName();
-		const storedSecret = sessionStorageService.getModeratorSecret(roomName);
+		const storedSecret = sessionStorageService.getModeratorSecret(roomId);
 		const secret = storedSecret || contextService.getSecret();
 
-		return from(httpService.refreshParticipantToken({ roomName, participantName, secret })).pipe(
+		return from(httpService.refreshParticipantToken({ roomId, participantName, secret })).pipe(
 			switchMap((data) => {
 				console.log('Participant token refreshed');
 				contextService.setToken(data.token);

frontend/projects/shared-meet-components/src/lib/models/context.model.ts

@@ -5,7 +5,7 @@ import {
 } from 'projects/shared-meet-components/src/public-api';
 
 export interface ContextData {
-	roomName: string;
+	roomId: string;
 	participantName: string;
 	secret: string;
 	token: string;

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

@@ -50,7 +50,7 @@
 				<div matListItemIcon class="list-icon-container">
 					<mat-icon class="list-icon">video_camera_front</mat-icon>
 				</div>
-				<div matListItemTitle class="item-title">{{ item.roomName }}</div>
+				<div matListItemTitle class="item-title">{{ item.roomId }}</div>
 				<div matListItemLine class="item-details">
 					<div>
 						<mat-icon class="icon">auto_delete</mat-icon>

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

@@ -1,8 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { RoomService, NotificationService } from '../../../services';
 import { DynamicGridComponent, ToggleCardComponent } from '../../../components';
-import { RoomPreferences } from '@lib/typings/ce';
+import { ILogger, LoggerService } from 'openvidu-components-angular';
-import { ILogger, LoggerService, Room } from 'openvidu-components-angular';
 import { MatCardModule } from '@angular/material/card';
 import { DatePipe } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
@@ -33,8 +32,7 @@ export class RoomsComponent implements OnInit {
 	recordingEnabled = false;
 	chatEnabled = false;
 	backgroundsEnabled = false;
-
+	protected log: ILogger;
-	protected log;
 
 	constructor(
 		protected loggerService: LoggerService,
@@ -56,12 +54,12 @@ export class RoomsComponent implements OnInit {
 	}
 
 	isInRoomForm(): boolean {
-		return this.route.snapshot.firstChild !== null; // Verifica si hay un hijo en la ruta
+		return this.route.snapshot.firstChild !== null; // Verify if the current route has a child route
 	}
 
 	async createRoom() {
 		//TODO: Go to room details page
-		await  this.router.navigate(['new'], { relativeTo: this.route });
+		await this.router.navigate(['new'], { relativeTo: this.route });
 		// try {
 		// 	const room = await this.roomService.createRoom();
 		// 	this.notificationService.showSnackbar('Room created');
@@ -73,14 +71,14 @@ export class RoomsComponent implements OnInit {
 		// }
 	}
 
-	openRoom(roomName: string) {
+	openRoom(roomId: string) {
-		window.open(`/${roomName}`, '_blank');
+		window.open(`/${roomId}`, '_blank');
 	}
 
-	deleteRoom(room: MeetRoom) {
+	deleteRoom({ roomId }: MeetRoom) {
 		try {
-			this.roomService.deleteRoom(room.roomName);
+			this.roomService.deleteRoom(roomId);
-			this.createdRooms = this.createdRooms.filter((r) => r.roomName !== room.roomName);
+			this.createdRooms = this.createdRooms.filter((r) => r.roomId !== roomId);
 			this.notificationService.showSnackbar('Room deleted');
 		} catch (error) {
 			this.notificationService.showAlert('Error deleting room');
@@ -88,10 +86,9 @@ export class RoomsComponent implements OnInit {
 		}
 	}
 
-	async onRoomClicked(room: MeetRoom) {
+	async onRoomClicked({ roomId }: MeetRoom) {
-		console.log('Room clicked:', room);
 		//TODO: Go to room details page
-		await this.router.navigate([room.roomName, 'edit'], { relativeTo: this.route });
+		await this.router.navigate([roomId, 'edit'], { relativeTo: this.route });
 	}
 
 	// async onRecordingToggle(enabled: boolean) {

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

@@ -173,7 +173,7 @@ input[type='submit'] {
 	border-radius: $loginBorderRadius;
 	padding: 0.85rem;
 }
-#room-name-input {
+#room-id-input {
 	border-radius: 0;
 }
 
@@ -222,7 +222,7 @@ input[type='submit'] {
 .login button[type='submit']:hover {
 	background-color: $loginSubmitHoverBackgroundColor;
 }
-#clear-room-name-btn {
+#clear-room-id-btn {
 	height: auto;
 	background-color: $loginInputBackgroundColor;
 	border-radius: 0;
@@ -231,7 +231,7 @@ input[type='submit'] {
 		vertical-align: middle;
 	}
 }
-#room-name-generator-btn {
+#room-id-generator-btn {
 	height: auto;
 	background-color: $loginInputBackgroundColor;
 	border-radius: $loginBorderRadius;

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

@@ -20,45 +20,39 @@
 		<div class="grid">
 			<form [formGroup]="roomForm" novalidate (ngSubmit)="goToVideoRoom()" id="form-room" class="form room-prefix">
 				<div class="form-field">
-					<label for="room-name-input" [ngClass]="{ error: roomForm.get('roomNamePrefix')?.invalid }">
+					<label for="room-id-input" [ngClass]="{ error: roomForm.get('roomIdPrefix')?.invalid }">
 						<mat-icon matTooltip="Room name prefix">video_camera_front</mat-icon>
-						<span class="hidden">Room name prefix</span></label
+						<span class="hidden">Room ID prefix</span></label
 					>
 					<input
-						formControlName="roomNamePrefix"
+						formControlName="roomIdPrefix"
 						autocomplete="off"
-						id="room-name-input"
+						id="room-id-input"
 						type="text"
-						name="roomNamePrefix"
+						name="roomIdPrefix"
 						class="form-input"
 						placeholder="Room name prefix"
 					/>
-					@if (roomForm.get('roomNamePrefix')?.value) {
+					@if (roomForm.get('roomIdPrefix')?.value) {
 						<button
 							matSuffix
 							mat-icon-button
 							aria-label="Clear"
-							id="clear-room-name-btn"
+							id="clear-room-id-btn"
-							(click)="clearRoomName()"
+							(click)="clearRoomId()"
 						>
 							<mat-icon>close</mat-icon>
 						</button>
 					}
 					<button
-						matTooltip="Generate room name prefix"
+						matTooltip="Generate room ID prefix"
 						mat-icon-button
-						id="room-name-generator-btn"
+						id="room-id-generator-btn"
-						(click)="generateRoomName($event)"
+						(click)="generateRoomId($event)"
 					>
 						<mat-icon>cached</mat-icon>
 					</button>
 				</div>
-				@if (roomForm.get('roomNamePrefix')?.hasError('required')) {
-					<div class="roomError" id="requiredNameError">Room name is required</div>
-				}
-				@if (roomForm.get('roomNamePrefix')?.hasError('minlength')) {
-					<div class="roomError" id="shortNameError">Room name is too short!</div>
-				}
 				<div class="form-field">
 					<button mat-button id="join-btn" type="submit" [disabled]="roomForm.invalid">JOIN</button>
 				</div>

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

@@ -174,7 +174,7 @@ input[type='submit'] {
 	padding: 0.85rem;
 }
 
-#room-name-input {
+#room-id-input {
 	border-radius: 0;
 }
 
@@ -223,7 +223,7 @@ input[type='submit'] {
 .room-prefix button[type='submit']:hover {
 	background-color: $formSubmitHoverBackgroundColor;
 }
-#clear-room-name-btn {
+#clear-room-id-btn {
 	height: auto;
 	background-color: $formInputBackgroundColor;
 	border-radius: 0;
@@ -232,7 +232,7 @@ input[type='submit'] {
 		vertical-align: middle;
 	}
 }
-#room-name-generator-btn {
+#room-id-generator-btn {
 	height: auto;
 	background-color: $formInputBackgroundColor;
 	border-radius: $formBorderRadius;

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, Validators, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
+import { FormGroup, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatIconButton, MatButton } from '@angular/material/button';
@@ -23,7 +23,7 @@ export class RoomCreatorComponent implements OnInit {
 	backgroundImageUrl = '';
 
 	roomForm = new FormGroup({
-		roomNamePrefix: new FormControl(this.getRandomName(), [Validators.required, Validators.minLength(6)])
+		roomIdPrefix: new FormControl(this.getRandomName(), [])
 	});
 	username = '';
 
@@ -45,13 +45,13 @@ export class RoomCreatorComponent implements OnInit {
 		}
 	}
 
-	generateRoomName(event: any) {
+	generateRoomId(event: any) {
 		event.preventDefault();
-		this.roomForm.get('roomNamePrefix')?.setValue(this.getRandomName());
+		this.roomForm.get('roomIdPrefix')?.setValue(this.getRandomName());
 	}
 
-	clearRoomName() {
+	clearRoomId() {
-		this.roomForm.get('roomNamePrefix')?.setValue('');
+		this.roomForm.get('roomIdPrefix')?.setValue('');
 	}
 
 	async logout() {
@@ -68,12 +68,12 @@ export class RoomCreatorComponent implements OnInit {
 			return;
 		}
 
-		const roomNamePrefix = this.roomForm.get('roomNamePrefix')?.value!.replace(/ /g, '-');
+		const roomIdPrefix = this.roomForm.get('roomIdPrefix')?.value!.replace(/ /g, '-');
 
 		try {
 			// TODO: Fix expiration date
 			const options: MeetRoomOptions = {
-				roomNamePrefix,
+				roomIdPrefix,
 				expirationDate: Date.now() + 3600 * 1000 // 1 hour
 			};
 
@@ -81,9 +81,9 @@ export class RoomCreatorComponent implements OnInit {
 
 			const accessRoomUrl = new URL(room.moderatorRoomUrl);
 			const secret = accessRoomUrl.searchParams.get('secret');
-			const roomName = accessRoomUrl.pathname;
+			const roomId = accessRoomUrl.pathname;
 
-			this.router.navigate([roomName], { queryParams: { secret } });
+			this.router.navigate([roomId], { queryParams: { secret } });
 		} catch (error) {
 			console.error('Error creating room ', error);
 		}

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

@@ -11,7 +11,7 @@ import {
 	OpenViduComponentsUiModule
 } from 'openvidu-components-angular';
 
-import { ChatPreferences, RecordingPreferences, VirtualBackgroundPreferences } from '@lib/typings/ce';
+import { MeetChatPreferences, MeetRecordingPreferences, MeetVirtualBackgroundPreferences } from '@lib/typings/ce';
 
 import { HttpService, WebComponentManagerService, ContextService, RoomService } from '../../services';
 import { OpenViduMeetMessage, WebComponentEventType } from 'webcomponent/src/types/message.type';
@@ -24,14 +24,14 @@ import { OpenViduMeetMessage, WebComponentEventType } from 'webcomponent/src/typ
 	imports: [OpenViduComponentsUiModule, ApiDirectiveModule, MatIcon]
 })
 export class VideoRoomComponent implements OnInit, OnDestroy {
-	roomName = '';
+	roomId = '';
 	participantName = '';
 	token = '';
 	serverError = '';
 	loading = true;
-	chatPreferences: ChatPreferences = { enabled: true };
+	chatPreferences: MeetChatPreferences = { enabled: true };
-	recordingPreferences: RecordingPreferences = { enabled: true };
+	recordingPreferences: MeetRecordingPreferences = { enabled: true };
-	virtualBackgroundPreferences: VirtualBackgroundPreferences = { enabled: true };
+	virtualBackgroundPreferences: MeetVirtualBackgroundPreferences = { enabled: true };
 	featureFlags = {
 		videoEnabled: true,
 		audioEnabled: true,
@@ -55,7 +55,7 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
 
 	async ngOnInit() {
 		try {
-			this.roomName = this.ctxService.getRoomName();
+			this.roomId = this.ctxService.getRoomId();
 			this.participantName = this.ctxService.getParticipantName();
 
 			if (this.ctxService.isEmbeddedMode()) {
@@ -102,7 +102,7 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
 		const message: OpenViduMeetMessage = {
 			eventType: WebComponentEventType.LOCAL_PARTICIPANT_CONNECTED,
 			payload: {
-				roomName: event.getProperties().room?.name,
+				roomId: event.getProperties().room?.name,
 				participantName: event.name
 			}
 		};
@@ -117,7 +117,7 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
 		const message: OpenViduMeetMessage = {
 			eventType: WebComponentEventType.LOCAL_PARTICIPANT_LEFT,
 			payload: {
-				roomName: event.roomName,
+				roomId: event.roomName,
 				participantName: event.participantName
 			}
 		};

frontend/projects/shared-meet-components/src/lib/routes/base-routes.ts

@@ -82,7 +82,7 @@ export const baseRoutes: Routes = [
 				component: RoomsComponent,
 				children: [
 					{ path: 'new', component: RoomFormComponent },
-					{ path: ':roomName/edit', component: RoomFormComponent }
+					{ path: ':roomId/edit', component: RoomFormComponent }
 				]
 			},
 			{
@@ -110,7 +110,7 @@ export const baseRoutes: Routes = [
 		]
 	},
 	{
-		path: 'room/:room-name',
+		path: 'room/:room-id',
 		component: VideoRoomComponent,
 		canActivate: [
 			runGuardsSerially(
@@ -124,7 +124,7 @@ export const baseRoutes: Routes = [
 		]
 	},
 	{
-		path: 'room/:room-name/participant-name',
+		path: 'room/:room-id/participant-name',
 		component: ParticipantNameFormComponent
 	},
 

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

@@ -12,7 +12,7 @@ import { AuthMode, HttpService, ParticipantRole } from 'projects/shared-meet-com
  */
 export class ContextService {
 	private context: ContextData = {
-		roomName: '',
+		roomId: '',
 		participantName: '',
 		secret: '',
 		token: '',
@@ -126,12 +126,12 @@ export class ContextService {
 		return this.context.leaveRedirectUrl;
 	}
 
-	getRoomName(): string {
+	getRoomId(): string {
-		return this.context.roomName;
+		return this.context.roomId;
 	}
 
-	setRoomName(roomName: string): void {
+	setRoomId(roomId: string): void {
-		this.context.roomName = roomName;
+		this.context.roomId = roomId;
 	}
 
 	getParticipantName(): string {

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

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { RoomPreferences } from '@lib/typings/ce';
+import { MeetRoomPreferences } from '@lib/typings/ce';
 import { LoggerService } from 'openvidu-components-angular';
 import { HttpService } from '../http/http.service';
 
@@ -9,7 +9,7 @@ import { HttpService } from '../http/http.service';
 // This service is used to store the global preferences of the application
 export class GlobalPreferencesService {
 	protected log;
-	protected roomPreferences: RoomPreferences | undefined;
+	protected roomPreferences: MeetRoomPreferences | undefined;
 
 	constructor(
 		protected loggerService: LoggerService,

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

@@ -4,7 +4,7 @@ import { MeetRoom, MeetRoomOptions } from 'projects/shared-meet-components/src/l
 import {
 	GlobalPreferences,
 	ParticipantRole,
-	RoomPreferences,
+	MeetRoomPreferences,
 	SecurityPreferencesDTO,
 	TokenOptions,
 	User
@@ -27,8 +27,8 @@ export class HttpService {
 		return this.postRequest(`${this.API_PATH_PREFIX}/${this.API_V1_VERSION}/rooms`, options);
 	}
 
-	deleteRoom(roomName: string): Promise<any> {
+	deleteRoom(roomId: string): Promise<any> {
-		return this.deleteRequest(`${this.API_PATH_PREFIX}/${this.API_V1_VERSION}/rooms/${roomName}`);
+		return this.deleteRequest(`${this.API_PATH_PREFIX}/${this.API_V1_VERSION}/rooms/${roomId}`);
 	}
 
 	listRooms(fields?: string): Promise<MeetRoom[]> {
@@ -39,17 +39,14 @@ export class HttpService {
 		return this.getRequest(path);
 	}
 
-	getRoom(roomName: string, fields?: string): Promise<MeetRoom> {
+	getRoom(roomId: string): Promise<MeetRoom> {
-		let path = `${this.API_PATH_PREFIX}/${this.API_V1_VERSION}/rooms/${roomName}`;
+		let path = `${this.API_PATH_PREFIX}/${this.API_V1_VERSION}/rooms/${roomId}`;
-		if (fields) {
-			path += `?fields=${encodeURIComponent(fields)}`;
-		}
 		return this.getRequest(path);
 	}
 
-	getParticipantRole(roomName: string, secret: string): Promise<ParticipantRole> {
+	getParticipantRole(roomId: string, secret: string): Promise<ParticipantRole> {
 		return this.getRequest(
-			`${this.INTERNAL_API_PATH_PREFIX}/${this.API_V1_VERSION}/rooms/${roomName}/participant-role?secret=${secret}`
+			`${this.INTERNAL_API_PATH_PREFIX}/${this.API_V1_VERSION}/rooms/${roomId}/participant-role?secret=${secret}`
 		);
 	}
 
@@ -79,9 +76,9 @@ export class HttpService {
 	/**
 	 * Retrieves the room preferences.
 	 *
-	 * @returns {Promise<RoomPreferences>} A promise that resolves to the room preferences.
+	 * @returns {Promise<MeetRoomPreferences>} A promise that resolves to the room preferences.
 	 */
-	getRoomPreferences(): Promise<RoomPreferences> {
+	getRoomPreferences(): Promise<MeetRoomPreferences> {
 		return this.getRequest(`${this.API_PATH_PREFIX}/${this.API_V1_VERSION}/preferences/room`);
 	}
 
@@ -91,7 +88,7 @@ export class HttpService {
 	 * @param preferences - The room preferences to be saved.
 	 * @returns A promise that resolves when the preferences have been successfully saved.
 	 */
-	saveRoomPreferences(preferences: RoomPreferences): Promise<any> {
+	saveRoomPreferences(preferences: MeetRoomPreferences): Promise<any> {
 		return this.putRequest(`${this.API_PATH_PREFIX}/preferences/room`, preferences);
 	}
 

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

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { RoomPreferences } from '@lib/typings/ce';
+import { MeetRoomPreferences } from '@lib/typings/ce';
 import { LoggerService } from 'openvidu-components-angular';
 import { HttpService } from '../http/http.service';
 import { MeetRoom, MeetRoomOptions } from 'projects/shared-meet-components/src/lib/typings/ce/room';
@@ -9,7 +9,7 @@ import { MeetRoom, MeetRoomOptions } from 'projects/shared-meet-components/src/l
 })
 export class RoomService {
 	protected log;
-	protected roomPreferences: RoomPreferences | undefined;
+	protected roomPreferences: MeetRoomPreferences | undefined;
 	constructor(
 		protected loggerService: LoggerService,
 		protected httpService: HttpService
@@ -20,26 +20,26 @@ export class RoomService {
 	async createRoom(): Promise<MeetRoom> {
 		// TODO: Improve expiration date
 		const options: MeetRoomOptions = {
-			roomNamePrefix: 'TestRoom-',
+			roomIdPrefix: 'TestRoom-',
 			expirationDate: Date.now() + 1000 * 60 * 60 // 1 hour from now
 		};
 		this.log.d('Creating room', options);
 		return this.httpService.createRoom(options);
 	}
 
-	async deleteRoom(roomName: string) {
+	async deleteRoom(roomId: string) {
-		return this.httpService.deleteRoom(roomName);
+		return this.httpService.deleteRoom(roomId);
 	}
 
 	async listRooms() {
 		return this.httpService.listRooms();
 	}
 
-	async getRoom(roomName: string) {
+	async getRoom(roomId: string) {
-		return this.httpService.getRoom(roomName);
+		return this.httpService.getRoom(roomId);
 	}
 
-	async getRoomPreferences(): Promise<RoomPreferences> {
+	async getRoomPreferences(): Promise<MeetRoomPreferences> {
 		if (!this.roomPreferences) {
 			this.log.d('Room preferences not found, fetching from server');
 			// Fetch the room preferences from the server
@@ -55,7 +55,7 @@ export class RoomService {
 	 * @param {RoomPreferences} preferences - The preferences to be saved.
 	 * @returns {Promise<void>} A promise that resolves when the preferences have been saved.
 	 */
-	async saveRoomPreferences(preferences: RoomPreferences): Promise<void> {
+	async saveRoomPreferences(preferences: MeetRoomPreferences): Promise<void> {
 		this.log.d('Saving room preferences', preferences);
 		await this.httpService.saveRoomPreferences(preferences);
 		this.roomPreferences = preferences;

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

@@ -13,30 +13,30 @@ export class SessionStorageService {
 	/**
 	 * Stores a moderator secret for a specific room.
 	 *
-	 * @param roomName The room name.
+	 * @param roomId The room ID.
 	 * @param secret The secret string.
 	 */
-	public setModeratorSecret(roomName: string, secret: string): void {
+	public setModeratorSecret(roomId: string, secret: string): void {
-		this.set(`moderator_secret_${roomName}`, secret);
+		this.set(`moderator_secret_${roomId}`, secret);
 	}
 
 	/**
 	 * Retrieves the moderator secret for a specific room.
 	 *
-	 * @param roomName The room name.
+	 * @param roomId The room ID.
 	 * @returns The stored secret or null if not found.
 	 */
-	public getModeratorSecret(roomName: string): string | null {
+	public getModeratorSecret(roomId: string): string | null {
-		return this.get<string>(`moderator_secret_${roomName}`) ?? null;
+		return this.get<string>(`moderator_secret_${roomId}`) ?? null;
 	}
 
 	/**
 	 * Removes the moderator secret for a specific room.
 	 *
-	 * @param roomName The room name.
+	 * @param roomId The room ID.
 	 */
-	public removeModeratorSecret(roomName: string): void {
+	public removeModeratorSecret(roomId: string): void {
-		this.remove(`moderator_secret_${roomName}`);
+		this.remove(`moderator_secret_${roomId}`);
 	}
 
 	/**

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

@@ -70,8 +70,8 @@ export class WebComponentManagerService {
 				case WebComponentActionType.END_MEETING:
 					// Moderator only
 					if (this.contextService.isModeratorParticipant()) {
-						const roomName = this.contextService.getRoomName();
+						const roomId = this.contextService.getRoomId();
-						await this.httpService.deleteRoom(roomName);
+						await this.httpService.deleteRoom(roomId);
 					}
 					break;
 				case WebComponentActionType.TOGGLE_CHAT: