From a700fff91139a0de405c3b89fadd73f533b3101e Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Thu, 3 Jul 2025 12:44:22 +0200
Subject: [PATCH] frontend: add force disconnect functionality for participants
 in video room

---
 .../pages/video-room/video-room.component.html   | 16 +++++++++++++++-
 .../pages/video-room/video-room.component.scss   |  5 +++++
 .../lib/pages/video-room/video-room.component.ts |  4 ++++
 .../src/lib/services/room.service.ts             |  6 ++++++
 4 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html
index 8d5a4a4..4e9f0fe 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html
@@ -146,7 +146,6 @@
 				<mat-menu #leaveMenu="matMenu">
 					<button mat-menu-item (click)="leaveMeeting()" id="leave-option">
 						<mat-icon>logout</mat-icon>
-
 						<span>Leave meeting</span>
 					</button>
 					<mat-divider></mat-divider>
@@ -156,6 +155,21 @@
 					</button>
 				</mat-menu>
 			</div>
+
+			<!-- Participant Panel Item Elements -->
+			<div *ovParticipantPanelItemElements="let participant">
+				<!-- Leave Button for Local Participant -->
+				@if (!participant.isLocal) {
+					<button
+						mat-icon-button
+						(click)="forceDisconnectParticipant(participant)"
+						matTooltip="Disconnect participant"
+						class="force-disconnect-btn"
+					>
+						<mat-icon>call_end</mat-icon>
+					</button>
+				}
+			</div>
 		}
 	</ov-videoconference>
 }
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss
index ed44590..e74efac 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss
+++ b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss
@@ -263,3 +263,8 @@
 		margin: 0px !important;
 	}
 }
+
+// Custom force disconnect button
+.force-disconnect-btn {
+	color: var(--ov-meet-color-error)
+}
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.ts
index 3d8b935..c7ae0da 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.ts
@@ -146,6 +146,10 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
 		}
 	}
 
+	async forceDisconnectParticipant(participant: ParticipantModel) {
+		await this.roomService.kickParticipant(this.roomId, participant.identity);
+	}
+
 	/**
 	 * Initializes the participant name in the form control.
 	 *
diff --git a/frontend/projects/shared-meet-components/src/lib/services/room.service.ts b/frontend/projects/shared-meet-components/src/lib/services/room.service.ts
index af1af54..dac1747 100644
--- a/frontend/projects/shared-meet-components/src/lib/services/room.service.ts
+++ b/frontend/projects/shared-meet-components/src/lib/services/room.service.ts
@@ -243,4 +243,10 @@ export class RoomService {
 		const path = `${this.MEETINGS_API}/${roomId}`;
 		return this.httpService.deleteRequest(path);
 	}
+
+	async kickParticipant(roomId: string, participantId: string): Promise<void> {
+		const path = `${this.MEETINGS_API}/${roomId}/participants/${participantId}`;
+		await this.httpService.deleteRequest(path);
+		this.log.d(`Participant ${participantId} kicked from room ${roomId}`);
+	}
 }