From dd8c5638df6ff03c50753f4fb7574a702760b6d5 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Mon, 22 Sep 2025 15:06:43 +0200
Subject: [PATCH] frontend: update meeting component for mobile link copying
 and improve leave button styling

---
 .../recording-lists.component.ts              |  1 -
 .../lib/pages/meeting/meeting.component.html  | 42 ++++++++++++-------
 .../lib/pages/meeting/meeting.component.scss  |  7 +---
 .../lib/pages/meeting/meeting.component.ts    | 13 ++++--
 4 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts
index 1060bc4..18b58b6 100644
--- a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts
@@ -14,7 +14,6 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { ViewportService } from '@lib/services';
 import { MeetRecordingInfo, MeetRecordingStatus } from '@lib/typings/ce';
 import { formatBytes, formatDurationToHMS } from '@lib/utils';
 import { ViewportService } from 'openvidu-components-angular';
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 6457aad..2783e9d 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
@@ -41,16 +41,27 @@
 		<ng-container *ovToolbarAdditionalButtons>
 			<!-- Copy Link Button -->
 			@if (features().canModerateRoom) {
-				<button
-					id="copy-speaker-link"
-					mat-icon-button
-					(click)="copySpeakerLink()"
-					[disableRipple]="true"
-					matTooltip="Copy the meeting link"
-				>
-					<mat-icon>link</mat-icon>
-				</button>
+				@if (isMobile) {
+					<button id="copy-speaker-link" mat-menu-item (click)="copySpeakerLink()" [disableRipple]="true">
+						<mat-icon>link</mat-icon>
+						<span class="button-text">Copy meeting link</span>
+					</button>
+				} @else {
+					<button
+						id="copy-speaker-link"
+						mat-icon-button
+						(click)="copySpeakerLink()"
+						[disableRipple]="true"
+						matTooltip="Copy the meeting link"
+					>
+						<mat-icon>link</mat-icon>
+					</button>
+				}
+			}
+		</ng-container>
 
+		<ng-container *ovToolbarLeaveButton>
+			@if (features().canModerateRoom) {
 				<!-- Leave Button -->
 				<button
 					id="leave-btn"
@@ -59,6 +70,7 @@
 					matTooltip="Leave options"
 					[disableRipple]="true"
 					class="custom-leave-btn"
+					[class.mobile-btn]="isMobile"
 				>
 					<mat-icon>call_end</mat-icon>
 				</button>
@@ -112,9 +124,9 @@
 						<ov-participant-panel-item [participant]="participant">
 							<ng-container *ovParticipantPanelParticipantBadge>
 								<span class="moderator-badge">
-									<mat-icon matTooltip="Moderator" class="material-symbols-outlined"
-										>shield_person</mat-icon
-									>
+									<mat-icon matTooltip="Moderator" class="material-symbols-outlined">
+										shield_person
+									</mat-icon>
 								</span>
 							</ng-container>
 						</ov-participant-panel-item>
@@ -124,9 +136,9 @@
 							@if (participant.isModerator()) {
 								<ng-container *ovParticipantPanelParticipantBadge>
 									<span class="moderator-badge">
-										<mat-icon matTooltip="Moderator" class="material-symbols-outlined"
-											>shield_person</mat-icon
-										>
+										<mat-icon matTooltip="Moderator" class="material-symbols-outlined">
+											shield_person
+										</mat-icon>
 									</span>
 								</ng-container>
 							}
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 0616496..3c51df4 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
@@ -294,15 +294,12 @@
 // Custom leave button styling (existing functionality)
 ::ng-deep {
 	#media-buttons-container .custom-leave-btn {
-		&:hover {
-			background-color: var(--ov-meet-color-error) !important;
-		}
 		text-align: center;
 		background-color: var(--ov-meet-color-error) !important;
 		color: #fff !important;
 		border-radius: var(--ov-meet-radius-md) !important;
-		width: 65px !important;
-		margin: 0px !important;
+		width: 65px;
+		margin: 6px !important;
 	}
 }
 
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 59bdec7..761cf2a 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
@@ -46,6 +46,7 @@ import {
 	ApiDirectiveModule,
 	ParticipantService as ComponentParticipantService,
 	DataPacket_Kind,
+	LeaveButtonDirective,
 	OpenViduComponentsUiModule,
 	OpenViduService,
 	ParticipantLeftEvent,
@@ -56,7 +57,8 @@ import {
 	RemoteParticipant,
 	Room,
 	RoomEvent,
-	Track
+	Track,
+	ViewportService
 } from 'openvidu-components-angular';
 import { combineLatest, Subject, takeUntil } from 'rxjs';
 
@@ -67,7 +69,7 @@ import { combineLatest, Subject, takeUntil } from 'rxjs';
 	standalone: true,
 	imports: [
 		OpenViduComponentsUiModule,
-		ApiDirectiveModule,
+		// ApiDirectiveModule,
 		CommonModule,
 		MatFormFieldModule,
 		MatInputModule,
@@ -125,7 +127,8 @@ export class MeetingComponent implements OnInit {
 		protected ovComponentsParticipantService: ComponentParticipantService,
 		protected navigationService: NavigationService,
 		protected notificationService: NotificationService,
-		protected clipboard: Clipboard
+		protected clipboard: Clipboard,
+		protected viewportService: ViewportService
 	) {
 		this.features = this.featureConfService.features;
 	}
@@ -138,6 +141,10 @@ export class MeetingComponent implements OnInit {
 		return window.location.origin.replace('http://', '').replace('https://', '');
 	}
 
+	get isMobile(): boolean {
+		return this.viewportService.isMobile();
+	}
+
 	async ngOnInit() {
 		this.roomId = this.roomService.getRoomId();
 		this.roomSecret = this.roomService.getRoomSecret();