diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/index.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/index.ts index be3bb0bd..db3e37f5 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/index.ts +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/index.ts @@ -1,6 +1,7 @@ -export * from './meeting-toolbar-buttons/meeting-toolbar-buttons.component'; -export * from './meeting-share-link-panel/meeting-share-link-panel.component'; -export * from './meeting-participant-panel-item/meeting-participant-panel-item.component'; -export * from './meeting-layout/meeting-layout.component'; -export * from './meeting-settings-panel/meeting-settings-panel.component'; -export * from './meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component'; +export * from './meeting-toolbar-leave-button/meeting-toolbar-leave-button.component'; +export * from './meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component'; +export * from './meeting-invite-panel/meeting-invite-panel.component'; +export * from './meeting-participant-item/meeting-participant-item.component'; +export * from './meeting-custom-layout/meeting-custom-layout.component'; +export * from './meeting-settings-extensions/meeting-settings-extensions.component'; +export * from './meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component'; diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.html similarity index 100% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.html rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.html diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.scss similarity index 100% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.scss rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.scss diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.spec.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.spec.ts similarity index 97% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.spec.ts rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.spec.ts index 5b489c0c..c8547bc9 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.spec.ts +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.spec.ts @@ -7,13 +7,13 @@ import { ParticipantService, OpenViduService } from 'openvidu-components-angular'; -import { MeetingLayoutComponent } from './meeting-layout.component'; +import { MeetingCustomLayoutComponent } from './meeting-custom-layout.component'; import { MeetLayoutService } from '../../../services/layout.service'; import { MeetLayoutMode } from '../../../models/layout.model'; describe('MeetingLayoutComponent', () => { - let component: MeetingLayoutComponent; - let fixture: ComponentFixture; + let component: MeetingCustomLayoutComponent; + let fixture: ComponentFixture; let mockLayoutService: jasmine.SpyObj; let mockParticipantService: jasmine.SpyObj; let mockOpenViduService: jasmine.SpyObj; @@ -56,7 +56,7 @@ describe('MeetingLayoutComponent', () => { }); await TestBed.configureTestingModule({ - imports: [MeetingLayoutComponent], + imports: [MeetingCustomLayoutComponent], providers: [ { provide: MeetLayoutService, useValue: mockLayoutService }, { provide: ParticipantService, useValue: mockParticipantService }, @@ -65,7 +65,7 @@ describe('MeetingLayoutComponent', () => { ] }).compileComponents(); - fixture = TestBed.createComponent(MeetingLayoutComponent); + fixture = TestBed.createComponent(MeetingCustomLayoutComponent); component = fixture.componentInstance; }); diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.ts similarity index 96% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.ts rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.ts index 0e107ef4..4539d504 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.ts +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.ts @@ -15,19 +15,19 @@ import { MeetingService } from '../../../services/meeting/meeting.service'; * active speakers to maximize client-side performance and scalability. */ @Component({ - selector: 'ov-meeting-layout', + selector: 'ov-meeting-custom-layout', imports: [OpenViduComponentsUiModule, ShareMeetingLinkComponent], - templateUrl: './meeting-layout.component.html', - styleUrl: './meeting-layout.component.scss' + templateUrl: './meeting-custom-layout.component.html', + styleUrl: './meeting-custom-layout.component.scss' }) -export class MeetingLayoutComponent { +export class MeetingCustomLayoutComponent { private readonly loggerSrv = inject(LoggerService); protected readonly layoutService = inject(MeetLayoutService); protected readonly openviduService = inject(OpenViduService); protected meetingContextService = inject(MeetingContextService); protected meetingService = inject(MeetingService); protected readonly destroyRef = inject(DestroyRef); - private readonly log: ILogger = this.loggerSrv.get('MeetingLayoutComponent'); + private readonly log: ILogger = this.loggerSrv.get('MeetingCustomLayoutComponent'); protected readonly linkOverlayTitle = 'Start collaborating'; protected readonly linkOverlaySubtitle = 'Share this link to bring others into the meeting'; protected readonly linkOverlayTitleSize: 'sm' | 'md' | 'lg' | 'xl' = 'xl'; diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.html similarity index 100% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.html rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.html diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.scss similarity index 100% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.scss rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.scss diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.ts similarity index 86% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.ts rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.ts index 9b6a2335..80ec3874 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.ts +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.ts @@ -10,16 +10,16 @@ import { LoggerService } from 'openvidu-components-angular'; * inside the participants panel. */ @Component({ - selector: 'ov-meeting-share-link-panel', - templateUrl: './meeting-share-link-panel.component.html', - styleUrls: ['./meeting-share-link-panel.component.scss'], + selector: 'ov-meeting-invite-panel', + templateUrl: './meeting-invite-panel.component.html', + styleUrls: ['./meeting-invite-panel.component.scss'], imports: [CommonModule, ShareMeetingLinkComponent] }) -export class MeetingShareLinkPanelComponent { +export class MeetingInvitePanelComponent { protected meetingContextService = inject(MeetingContextService); protected meetingService = inject(MeetingService); protected loggerService = inject(LoggerService); - protected log = this.loggerService.get('OpenVidu Meet - MeetingShareLinkPanel'); + protected log = this.loggerService.get('OpenVidu Meet - MeetingInvitePanel'); /** * Computed signal to determine if the share link should be shown diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.html similarity index 100% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.html rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.html diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.scss similarity index 100% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.scss rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.scss diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.ts similarity index 93% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.ts rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.ts index 8cb4d2c3..5f335621 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.ts +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.ts @@ -24,18 +24,18 @@ export interface ParticipantDisplayProperties { * This component receives context from the template (participant, localParticipant). */ @Component({ - selector: 'ov-meeting-participant-panel-item', - templateUrl: './meeting-participant-panel-item.component.html', - styleUrls: ['./meeting-participant-panel-item.component.scss'], + selector: 'ov-meeting-participant-item', + templateUrl: './meeting-participant-item.component.html', + styleUrls: ['./meeting-participant-item.component.scss'], imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule, OpenViduComponentsUiModule] }) -export class MeetingParticipantPanelItemComponent { +export class MeetingParticipantItemComponent { // Template reference for the component's template @ViewChild('template', { static: true }) template!: TemplateRef; protected meetingService: MeetingService = inject(MeetingService); protected loggerService = inject(LoggerService); - protected log = this.loggerService.get('OpenVidu Meet - ParticipantPanelItem'); + protected log = this.loggerService.get('OpenVidu Meet - MeetingParticipantItem'); // Tooltips (could be made configurable in the future if needed) protected readonly moderatorBadgeTooltip = 'Moderator'; diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.html similarity index 100% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.html rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.html diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.scss similarity index 100% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.scss rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.scss diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.spec.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.spec.ts similarity index 52% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.spec.ts rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.spec.ts index 48cf8846..d67d9156 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.spec.ts +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { MeetingSettingsPanelComponent } from './meeting-settings-panel.component'; +import { MeetingSettingsExtensionsComponent } from './meeting-settings-extensions.component'; describe('MeetingSettingsPanelComponent', () => { - let component: MeetingSettingsPanelComponent; - let fixture: ComponentFixture; + let component: MeetingSettingsExtensionsComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MeetingSettingsPanelComponent] + imports: [MeetingSettingsExtensionsComponent] }) .compileComponents(); - fixture = TestBed.createComponent(MeetingSettingsPanelComponent); + fixture = TestBed.createComponent(MeetingSettingsExtensionsComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.ts similarity index 90% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.ts rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.ts index 795251ec..bd992d0d 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.ts +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.ts @@ -15,7 +15,7 @@ import { MeetingContextService } from '../../../services/meeting/meeting-context * Component for additional settings in the Settings Panel. */ @Component({ - selector: 'ov-meeting-settings-panel', + selector: 'ov-meeting-settings-extensions', imports: [ CommonModule, MatIconModule, @@ -26,10 +26,10 @@ import { MeetingContextService } from '../../../services/meeting/meeting-context MatSelectModule, FormsModule ], - templateUrl: './meeting-settings-panel.component.html', - styleUrl: './meeting-settings-panel.component.scss' + templateUrl: './meeting-settings-extensions.component.html', + styleUrl: './meeting-settings-extensions.component.scss' }) -export class MeetingSettingsPanelComponent { +export class MeetingSettingsExtensionsComponent { private readonly layoutService = inject(MeetLayoutService); protected readonly meetingContextService = inject(MeetingContextService); diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.html new file mode 100644 index 00000000..7353b467 --- /dev/null +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.html @@ -0,0 +1,21 @@ + +@if (showCopyLinkButton()) { + @if (isMobile()) { + + + } @else { + + + } +} diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.scss new file mode 100644 index 00000000..408d6661 --- /dev/null +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.scss @@ -0,0 +1 @@ +// Additional toolbar buttons styling diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.ts new file mode 100644 index 00000000..81945ae8 --- /dev/null +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.ts @@ -0,0 +1,52 @@ +import { Component, inject, computed } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { MeetingContextService } from '../../../services/meeting/meeting-context.service'; +import { MeetingService } from '../../../services/meeting/meeting.service'; +import { LoggerService } from 'openvidu-components-angular'; + +/** + * Component for extra toolbar buttons (like copy meeting link). + * These buttons can appear inside the "More Options" menu on mobile. + */ +@Component({ + selector: 'ov-meeting-toolbar-extra-buttons', + templateUrl: './meeting-toolbar-extra-buttons.component.html', + styleUrls: ['./meeting-toolbar-extra-buttons.component.scss'], + imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule] +}) +export class MeetingToolbarExtraButtonsComponent { + protected meetingContextService = inject(MeetingContextService); + protected meetingService = inject(MeetingService); + protected loggerService = inject(LoggerService); + protected log = this.loggerService.get('OpenVidu Meet - MeetingToolbarExtraButtons'); + protected readonly copyLinkTooltip = 'Copy the meeting link'; + protected readonly copyLinkText = 'Copy meeting link'; + + /** + * Whether to show the copy link button + */ + protected showCopyLinkButton = computed(() => { + return this.meetingContextService.canModerateRoom(); + }); + + /** + * Whether the device is mobile (affects button style) + */ + protected isMobile = computed(() => { + return this.meetingContextService.isMobile(); + }); + + onCopyLinkClick(): void { + const room = this.meetingContextService.meetRoom(); + if (!room) { + this.log.e('Cannot copy link: meeting room is undefined'); + return; + } + + this.meetingService.copyMeetingSpeakerLink(room); + } +} diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-buttons/meeting-toolbar-buttons.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.html similarity index 57% rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-buttons/meeting-toolbar-buttons.component.html rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.html index 801ef20a..d3865f67 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-buttons/meeting-toolbar-buttons.component.html +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.html @@ -1,24 +1,4 @@ - -@if (showCopyLinkButton()) { - @if (isMobile()) { - - } @else { - - } -} - - + @if (showLeaveMenu()) {