From 80e5334f42260af51ba3d077c264703d80471ce2 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Wed, 30 Jul 2025 17:46:53 +0200
Subject: [PATCH] frontend: allowed share room link to moderators in the
 prejoin page

---
 .../lib/pages/meeting/meeting.component.html  | 19 ++++++
 .../lib/pages/meeting/meeting.component.scss  | 66 +++++++++++++++++++
 .../lib/pages/meeting/meeting.component.ts    |  4 ++
 .../lib/services/participant-token.service.ts |  1 +
 4 files changed, 90 insertions(+)

diff --git a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html
index 6a7e372..430b5b4 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html
@@ -201,6 +201,25 @@
 				}
 			</div>
 
+			<!-- Room URL Badge -->
+			@if (features().canModerateRoom) {
+				<div class="room-url-badge fade-in-delayed-more">
+					<div class="room-url-badge-title">Invite others with this meeting link</div>
+
+					<div class="room-url-badge-container">
+						<span class="room-url-text">{{ hostname }}/{{ roomId }}</span>
+						<button
+							mat-icon-button
+							(click)="copyPublisherLink()"
+							class="copy-url-btn"
+							matTooltip="Copy room link"
+						>
+							<mat-icon>content_copy</mat-icon>
+						</button>
+					</div>
+				</div>
+			}
+
 			<!-- Quick Actions -->
 			@if (showBackButton) {
 				<div class="quick-actions fade-in-delayed-more">
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss
index 5d6af40..2faf1d9 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss
+++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss
@@ -195,6 +195,57 @@
 	margin-top: auto;
 }
 
+// Room URL Badge
+.room-url-badge {
+	margin: var(--ov-meet-spacing-sm) auto;
+	.room-url-badge-title {
+		text-align: center;
+		font-size: var(--ov-meet-font-size-sm);
+		font-weight: var(--ov-meet-font-weight-light);
+		color: var(--ov-meet-text-primary);
+		margin-bottom: var(--ov-meet-spacing-sm);
+	}
+	.room-url-badge-container {
+		@include ov-flex-center;
+		gap: var(--ov-meet-spacing-sm);
+		padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md);
+		background-color: var(--ov-meet-surface-color);
+		border: 1px solid var(--ov-meet-border-color-light);
+		border-radius: var(--ov-meet-radius-lg);
+		max-width: fit-content;
+		@include ov-theme-transition;
+
+		&:hover {
+			background-color: var(--ov-meet-surface-hover);
+			border-color: var(--ov-meet-border-color);
+		}
+
+		.room-url-text {
+			font-family: var(--ov-meet-font-family-mono, 'Roboto Mono', monospace);
+			font-size: var(--ov-meet-font-size-sm);
+			color: var(--ov-meet-text-secondary);
+			font-weight: var(--ov-meet-font-weight-medium);
+			letter-spacing: 0.025em;
+			user-select: all;
+			cursor: text;
+		}
+
+		.copy-url-btn {
+			@include ov-button-base;
+			width: 32px;
+			height: 32px;
+			min-width: 32px;
+			padding: 0;
+			color: var(--ov-meet-text-hint);
+			@include ov-theme-transition;
+
+			.mat-icon {
+				@include ov-icon(sm);
+			}
+		}
+	}
+}
+
 // Quick Actions - Footer actions
 .quick-actions {
 	@include ov-flex-center;
@@ -246,6 +297,21 @@
 			padding: var(--ov-meet-spacing-md);
 		}
 	}
+
+	.room-url-badge-container {
+		margin: var(--ov-meet-spacing-md) auto;
+		padding: var(--ov-meet-spacing-xs) var(--ov-meet-spacing-sm);
+
+		.room-url-text {
+			font-size: var(--ov-meet-font-size-xs);
+		}
+
+		.copy-url-btn {
+			width: 28px;
+			height: 28px;
+			min-width: 28px;
+		}
+	}
 }
 
 // Custom leave button styling (existing functionality)
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts
index 3ec8daa..e9b2eff 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts
@@ -122,6 +122,10 @@ export class MeetingComponent implements OnInit {
 		await this.initializeParticipantName();
 	}
 
+	get hostname(): string {
+		return window.location.origin.replace('http://', '').replace('https://', '');
+	}
+
 	/**
 	 * Sets the back button text based on the application mode and user role
 	 */
diff --git a/frontend/projects/shared-meet-components/src/lib/services/participant-token.service.ts b/frontend/projects/shared-meet-components/src/lib/services/participant-token.service.ts
index 03a10ef..fd33387 100644
--- a/frontend/projects/shared-meet-components/src/lib/services/participant-token.service.ts
+++ b/frontend/projects/shared-meet-components/src/lib/services/participant-token.service.ts
@@ -98,6 +98,7 @@ export class ParticipantTokenService {
 
 	setParticipantRole(participantRole: ParticipantRole): void {
 		this.participantRole = participantRole;
+		this.featureConfService.setParticipantRole(this.participantRole);
 	}
 
 	getParticipantRole(): ParticipantRole {