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

frontend: enhance share link component

Browse Source
This commit is contained in:
Carlos Santos 2025-09-08 12:26:57 +02:00
parent ab04935d2b
commit ef31b9bada
3 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,8 +89,9 @@
<ng-container *ovLayoutAdditionalElements> <ng-container *ovLayoutAdditionalElements>
@if (features().canModerateRoom && remoteParticipants.length === 0) { @if (features().canModerateRoom && remoteParticipants.length === 0) {
<div class="main-share-meeting-link-container fade-in-delayed-more"> <div class="main-share-meeting-link-container fade-in-delayed-more OV_big">
<ov-share-meeting-link <ov-share-meeting-link
class="main-share-meeting-link"
[title]="'Start collaborating'" [title]="'Start collaborating'"
[subtitle]="'Share this link to bring others into the meeting'" [subtitle]="'Share this link to bring others into the meeting'"
[titleSize]="'xl'" [titleSize]="'xl'"

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

@ -250,6 +250,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: var(--ov-meet-radius-md); border-radius: var(--ov-meet-radius-md);
.main-share-meeting-link {
max-width: 100%;
}
} }
// Responsive adjustments // Responsive adjustments

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

@ -55,9 +55,10 @@ import {
RecordingStopRequestedEvent, RecordingStopRequestedEvent,
RemoteParticipant, RemoteParticipant,
Room, Room,
RoomEvent RoomEvent,
Track
} from 'openvidu-components-angular'; } from 'openvidu-components-angular';
import { Subject, takeUntil } from 'rxjs'; import { combineLatest, Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector: 'app-meeting', selector: 'app-meeting',
@ -273,22 +274,41 @@ export class MeetingComponent implements OnInit {
await this.roomService.loadRoomConfig(this.roomId); await this.roomService.loadRoomConfig(this.roomId);
this.showMeeting = true; this.showMeeting = true;
// Subscribe to remote participants updates combineLatest([
this.componentParticipantService.remoteParticipants$ this.componentParticipantService.remoteParticipants$,
this.componentParticipantService.localParticipant$
])
.pipe(takeUntil(this.destroy$)) .pipe(takeUntil(this.destroy$))
.subscribe((participants) => { .subscribe(([participants, local]) => {
this.remoteParticipants = participants as CustomParticipantModel[]; this.remoteParticipants = participants as CustomParticipantModel[];
}); this.localParticipant = local as CustomParticipantModel;
this.componentParticipantService.localParticipant$
.pipe(takeUntil(this.destroy$)) this.updateVideoPinState();
.subscribe((participant) => {
this.localParticipant = participant as CustomParticipantModel;
}); });
} catch (error) { } catch (error) {
console.error('Error accessing meeting:', error); console.error('Error accessing meeting:', error);
} }
} }
/**
* Centralized logic for managing video pinning based on
* remote participants and local screen sharing state.
*/
private updateVideoPinState(): void {
if (!this.localParticipant) return;
const hasRemote = this.remoteParticipants.length > 0;
const isSharing = this.localParticipant.isScreenShareEnabled;
if (hasRemote && isSharing) {
// Pin the local screen share to appear bigger
this.localParticipant.setVideoPinnedBySource(Track.Source.ScreenShare, true);
} else {
// Unpin everything if no remote participants or not sharing
this.localParticipant.setAllVideoPinned(false);
}
}
/** /**
* Generates a participant token for joining a meeting. * Generates a participant token for joining a meeting.
* *