neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Carlos Santos 2025-09-22 15:06:43 +02:00
parent c310c984b1
commit dd8c5638df
4 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts
View File

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

42
frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html
View File

@ -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>
}

7
frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss
View File

@ -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;
}
}

13
frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts
View File

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