From 37375186d4dbe78f3cf91be4f97b34c309326d3e Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Thu, 31 Jul 2025 16:18:42 +0200 Subject: [PATCH] frontend: Added share link into the layout when only one participant is joined - enhance share meeting link component with dynamic title, subtitle, and additional info --- .../share-meeting-link.component.html | 16 +++++++- .../share-meeting-link.component.scss | 37 ++++++++++++++++++- .../share-meeting-link.component.ts | 13 ++++--- .../lib/pages/meeting/meeting.component.html | 15 ++++++++ .../lib/pages/meeting/meeting.component.scss | 8 ++++ .../lib/pages/meeting/meeting.component.ts | 17 +++++++++ .../src/assets/styles/_tokens-themes.scss | 2 +- 7 files changed, 98 insertions(+), 10 deletions(-) diff --git a/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.html b/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.html index 78b58ee..ec14867 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.html +++ b/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.html @@ -1,5 +1,13 @@ -
-
Invite others with this meeting link
+
+ @if (title) { +
{{ title }}
+ } + + @if (subtitle) { +
+ {{ subtitle }} +
+ }
{{ meetingUrl }} @@ -7,4 +15,8 @@ content_copy
+ + @if (additionalInfo) { +
{{ additionalInfo }}
+ }
diff --git a/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.scss b/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.scss index ee8bbcc..565803a 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.scss @@ -6,8 +6,41 @@ 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); + color: var(--ov-meet-text-on-surface); margin-bottom: var(--ov-meet-spacing-sm); + + &.sm { + font-size: var(--ov-meet-font-size-sm); + } + &.md { + font-size: var(--ov-meet-font-size-md); + } + &.lg { + font-size: var(--ov-meet-font-size-lg); + } + &.xl { + font-size: var(--ov-meet-font-size-xl); + } + + &.light { + font-weight: var(--ov-meet-font-weight-light); + } + &.semibold { + font-weight: var(--ov-meet-font-weight-semibold); + } + &.bold { + font-weight: var(--ov-meet-font-weight-bold); + } + &.normal { + font-weight: var(--ov-meet-font-weight-normal); + } + } + + .meeting-url-badge-subtitle{ + text-align: center; + font-size: var(--ov-meet-font-size-md); + color: var(--ov-meet-text-on-surface); + margin: var(--ov-meet-spacing-sm); } .meeting-url-badge-container { @include ov-flex-center; @@ -29,7 +62,7 @@ .meeting-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); + color: var(--ov-meet-text-on-surface); font-weight: var(--ov-meet-font-weight-medium); letter-spacing: 0.025em; user-select: none; diff --git a/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.ts b/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.ts index 8df4514..3c65647 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.ts @@ -1,6 +1,4 @@ -import { Component } from '@angular/core'; -import { Input } from '@angular/core'; -import { Output, EventEmitter } from '@angular/core'; +import { Component, Input, Output, EventEmitter } from '@angular/core'; import { MatButtonModule, MatIconButton } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; @@ -12,6 +10,11 @@ import { MatIconModule } from '@angular/material/icon'; styleUrl: './share-meeting-link.component.scss' }) export class ShareMeetingLinkComponent { - @Input() meetingUrl!: string; - @Output() copyClicked = new EventEmitter(); + @Input() meetingUrl!: string; + @Input() title: string = 'Invite others with this meeting link'; + @Input() titleSize: 'sm' | 'md' | 'lg' | 'xl' = 'sm'; + @Input() titleWeight: 'light' | 'semibold' | 'bold' | 'normal' = 'normal'; + @Input() subtitle?: string; + @Input() additionalInfo?: string; + @Output() copyClicked = new EventEmitter(); } 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 41fa9da..8e96529 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 @@ -100,6 +100,21 @@ >
+ + + @if (remoteParticipants.length === 0) { +
+ +
+ } + } } @else { 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 b87a61d..7e08b54 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 @@ -218,6 +218,14 @@ padding: 10px; } +.main-share-meeting-link-container { + background-color: var(--ov-meet-surface-color); + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--ov-meet-radius-md); +} + // Responsive adjustments @include ov-mobile-down { .room-access-container { 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 1318117..6a71f22 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 @@ -44,12 +44,14 @@ import { ParticipantLeftEvent, ParticipantLeftReason, ParticipantModel, + ParticipantService, RecordingStartRequestedEvent, RecordingStopRequestedEvent, RemoteParticipant, Room, RoomEvent } from 'openvidu-components-angular'; +import { Subject, takeUntil } from 'rxjs'; @Component({ selector: 'app-meeting', @@ -89,11 +91,14 @@ export class MeetingComponent implements OnInit { participantName = ''; participantToken = ''; participantRole: ParticipantRole = ParticipantRole.PUBLISHER; + remoteParticipants: ParticipantModel[] = []; showMeeting = false; features: Signal; meetingEndedByMe = false; + private destroy$ = new Subject(); + constructor( protected route: ActivatedRoute, protected navigationService: NavigationService, @@ -104,6 +109,7 @@ export class MeetingComponent implements OnInit { protected meetingService: MeetingService, protected openviduService: OpenViduService, protected participantService: ParticipantTokenService, + protected componentParticipantService: ParticipantService, protected appDataService: AppDataService, protected wcManagerService: WebComponentManagerService, protected sessionStorageService: SessionStorageService, @@ -128,6 +134,11 @@ export class MeetingComponent implements OnInit { await this.initializeParticipantName(); } + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } + /** * Sets the back button text based on the application mode and user role */ @@ -238,6 +249,12 @@ export class MeetingComponent implements OnInit { await this.addParticipantNameToUrl(); await this.roomService.loadPreferences(this.roomId); this.showMeeting = true; + // Subscribe to remote participants updates for showing/hiding the share meeting link component + this.componentParticipantService.remoteParticipants$ + .pipe(takeUntil(this.destroy$)) + .subscribe((participants) => { + this.remoteParticipants = participants; + }); } catch (error) { console.error('Error accessing meeting:', error); } diff --git a/frontend/src/assets/styles/_tokens-themes.scss b/frontend/src/assets/styles/_tokens-themes.scss index 8b9e777..28e237e 100644 --- a/frontend/src/assets/styles/_tokens-themes.scss +++ b/frontend/src/assets/styles/_tokens-themes.scss @@ -19,7 +19,7 @@ --ov-meet-text-on-primary: #ffffff; --ov-meet-text-on-secondary: #ffffff; --ov-meet-text-on-accent: #ffffff; - --ov-meet-text-on-surface: #212121; + --ov-meet-text-on-surface: #494949; --ov-meet-text-on-background: #212121; // === SHADOWS - LIGHT THEME ===