frontend: update meeting component for mobile link copying and improve leave button styling

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';

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
+				@if (isMobile) {
-					id="copy-speaker-link"
+					<button id="copy-speaker-link" mat-menu-item (click)="copySpeakerLink()" [disableRipple]="true">
-					mat-icon-button
+						<mat-icon>link</mat-icon>
-					(click)="copySpeakerLink()"
+						<span class="button-text">Copy meeting link</span>
-					[disableRipple]="true"
+					</button>
-					matTooltip="Copy the meeting link"
+				} @else {
-				>
+					<button
-					<mat-icon>link</mat-icon>
+						id="copy-speaker-link"
-				</button>
+						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"
+									<mat-icon matTooltip="Moderator" class="material-symbols-outlined">
-										>shield_person</mat-icon
+										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"
+										<mat-icon matTooltip="Moderator" class="material-symbols-outlined">
-											>shield_person</mat-icon
+											shield_person
-										>
+										</mat-icon>
 									</span>
 								</ng-container>
 							}

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;
+		width: 65px;
-		margin: 0px !important;
+		margin: 6px !important;
 	}
 }
 

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();