frontend: refactor DisconnectedComponent to enhance disconnect reason handling and update back button logic

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

@@ -9,19 +9,19 @@
 		</div>
 
 		<div class="disconnect-message">
-			<h1 id="disconnect-title" class="disconnect-title">Meeting Ended</h1>
+			<h1 id="disconnect-title" class="disconnect-title">{{ disconnectedTitle }}</h1>
 			<p class="disconnect-subtitle">
-				{{ disconnectReason || 'You have successfully left the video conference' }}
+				{{ disconnectReason }}
 			</p>
 		</div>
 
 		<div class="disconnect-footer">
 			<p class="footer-text">Thank you for using OpenVidu Meet</p>
-			@if (isAdmin) {
+			@if (showBackButton) {
 				<div class="quick-actions fade-in-delayed-more">
-					<button mat-button class="quick-action-button" (click)="goToConsole()">
+					<button mat-button class="quick-action-button" (click)="goBack()">
 						<mat-icon>arrow_back</mat-icon>
-						<span>Back to Console</span>
+						<span>{{ backButtonText }}</span>
 					</button>
 				</div>
 			}

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

@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatCardModule } from '@angular/material/card';
+import { Component, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute } from '@angular/router';
-import { AuthService, NavigationService } from '@lib/services';
+import { AppDataService, AuthService, NavigationService, WebComponentManagerService } from '@lib/services';
+import { LeftEventReason } from '@lib/typings/ce';
 
 @Component({
 	selector: 'ov-disconnected',
@@ -14,54 +15,116 @@ import { AuthService, NavigationService } from '@lib/services';
 	styleUrl: './disconnected.component.scss'
 })
 export class DisconnectedComponent implements OnInit {
-	disconnectReason?: string;
+	disconnectedTitle = 'You Left the Meeting';
+	disconnectReason = 'You have successfully left the meeting';
+
+	showBackButton = true;
+	backButtonText = 'Back';
 
 	constructor(
 		private route: ActivatedRoute,
 		protected authService: AuthService,
-		protected navService: NavigationService
+		protected navService: NavigationService,
+		protected appDataService: AppDataService,
+		protected wcManagerService: WebComponentManagerService
 	) {}
 
-	ngOnInit(): void {
+	ngOnInit() {
-		// Get disconnect reason from query parameters
+		this.setDisconnectReason();
-		this.getDisconnectReasonFromQueryParams();
+		this.setBackButtonText();
-	}
-
-	get isAdmin(): boolean {
-		return this.authService.isAdmin();
-	}
-
-	async goToConsole(): Promise<void> {
-		// Navigate to the admin console
-		await this.navService.redirectTo('/overview', false);
 	}
 
 	/**
 	 * Retrieves the disconnect reason from URL query parameters
 	 */
-	private getDisconnectReasonFromQueryParams(): void {
+	private setDisconnectReason() {
 		const reason = this.route.snapshot.queryParams['reason'];
 		if (reason) {
-			// Map technical reasons to user-friendly messages
+			const { title, message } = this.mapReasonToTitleAndMessage(reason);
-			this.disconnectReason = this.mapReasonToUserMessage(reason);
+			this.disconnectedTitle = title;
+			this.disconnectReason = message;
 		}
 	}
 
 	/**
-	 * Maps technical disconnect reasons to user-friendly messages
+	 * Maps technical disconnect reasons to user-friendly titles and messages
 	 */
-	private mapReasonToUserMessage(reason: string): string {
+	private mapReasonToTitleAndMessage(reason: string): { title: string; message: string } {
-		const reasonMap: { [key: string]: string } = {
+		const reasonMap: { [key in LeftEventReason]: { title: string; message: string } } = {
-			disconnect: 'You have successfully disconnected from the meeting',
+			[LeftEventReason.VOLUNTARY_LEAVE]: {
-			forceDisconnectByUser: 'You were removed from the meeting by meeting host',
+				title: 'You Left the Meeting',
-			forceDisconnectByServer: 'Your connection was terminated by the server',
+				message: 'You have successfully left the meeting'
-			sessionClosedByServer: 'The meeting was ended by the host',
+			},
-			networkDisconnect: 'Connection lost due to network connectivity issues',
+			[LeftEventReason.PARTICIPANT_KICKED]: {
-			openviduDisconnect: 'The meeting ended due to technical difficulties',
+				title: 'Kicked from Meeting',
-			roomDeleted: 'The meeting room has been deleted',
+				message: 'You were kicked from the meeting by a moderator'
-			browserClosed: 'The meeting ended when your browser was closed'
+			},
+			[LeftEventReason.MEETING_ENDED]: {
+				title: 'Meeting Ended',
+				message: 'The meeting was ended by a moderator'
+			},
+			[LeftEventReason.MEETING_ENDED_BY_SELF]: {
+				title: 'Meeting Ended',
+				message: 'You have successfully ended the meeting'
+			},
+			[LeftEventReason.NETWORK_DISCONNECT]: {
+				title: 'Disconnected from Meeting',
+				message: 'Connection lost due to network connectivity issues'
+			},
+			[LeftEventReason.SERVER_SHUTDOWN]: {
+				title: 'Disconnected from Meeting',
+				message: 'Connection lost due to server shutdown'
+			},
+			[LeftEventReason.UNKNOWN]: {
+				title: 'Disconnected from Meeting',
+				message: 'Some unexpected error occurred, please try again later'
+			}
 		};
 
-		return reasonMap[reason] || reasonMap['disconnect'];
+		const normalizedReason = Object.values(LeftEventReason).find((enumValue) => enumValue === reason) as
+			| LeftEventReason
+			| undefined;
+		return reasonMap[normalizedReason ?? LeftEventReason.UNKNOWN];
+	}
+
+	/**
+	 * Sets the back button text based on the application mode and user role
+	 */
+	private async setBackButtonText() {
+		const isStandaloneMode = this.appDataService.isStandaloneMode();
+		const redirection = this.navService.getLeaveRedirectURL();
+		const isAdmin = await this.authService.isAdmin();
+
+		if (isStandaloneMode && !redirection && !isAdmin) {
+			// If in standalone mode, no redirection URL and not an admin, hide the back button
+			this.showBackButton = false;
+			return;
+		}
+
+		this.showBackButton = true;
+		this.backButtonText = isStandaloneMode && !redirection && isAdmin ? 'Back to Console' : 'Back';
+	}
+
+	/**
+	 * Handles the back button click event and navigates accordingly
+	 * If in embedded mode, it closes the WebComponentManagerService
+	 * If in standalone mode, it navigates to the redirect URL or to the admin console
+	 */
+	async goBack() {
+		if (this.appDataService.isEmbeddedMode()) {
+			this.wcManagerService.close();
+			return;
+		}
+
+		// Standalone mode handling
+		const redirectTo = this.navService.getLeaveRedirectURL();
+		if (redirectTo) {
+			// Navigate to the specified redirect URL
+			await this.navService.redirectTo(redirectTo);
+			return;
+		}
+
+		// Navigate to the admin console
+		await this.navService.navigateTo('/overview', undefined, true);
 	}
 }