From 53927b05a7da1b4a5a8007c445cdbf3d492672a2 Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Thu, 11 Dec 2025 17:21:28 +0100 Subject: [PATCH] Refactor template syntax to use @if directives for conditional rendering - Updated panel.component.html to replace *ngIf with @if for chat, participants, background effects, settings, activities, and external panels. - Modified participants-panel.component.html to use @if for local and remote participants rendering. - Changed settings-panel.component.html to utilize @if for menu options based on visibility conditions. - Refactored pre-join.component.html to implement @if for participant name input and error message display. - Adjusted session.component.html to use @if for toolbar template rendering. - Updated audio-devices.component.html and video-devices.component.html to replace *ngIf with @if for dropdown icons. - Refactored stream.component.html to use @if for participant name and audio wave display. - Modified toolbar-media-buttons.component.html and toolbar-panel-buttons.component.html to implement @if for button visibility. - Updated toolbar.component.html to use @if for recording time display. - Refactored videoconference.component.html to replace *ngIf with @if for pre-join and template rendering. --- .../admin-dashboard.component.html | 92 +++---- .../admin-login/admin-login.component.html | 68 ++--- .../components/layout/layout.component.html | 70 ++--- .../activities-panel.component.html | 40 +-- .../broadcasting-activity.component.html | 38 +-- .../chat-panel/chat-panel.component.html | 24 +- .../lib/components/panel/panel.component.html | 25 +- .../participants-panel.component.html | 24 +- .../settings-panel.component.html | 146 ++++++----- .../pre-join/pre-join.component.html | 76 +++--- .../components/session/session.component.html | 8 +- .../audio-devices.component.html | 8 +- .../video-devices.component.html | 8 +- .../components/stream/stream.component.html | 189 ++++++++------ .../lib/components/stream/stream.component.ts | 6 +- .../toolbar-media-buttons.component.html | 27 +- .../toolbar-panel-buttons.component.html | 240 +++++++++--------- .../components/toolbar/toolbar.component.html | 4 +- .../videoconference.component.html | 19 +- 19 files changed, 606 insertions(+), 506 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.html index 17f1b7695..255fbf1d4 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.html @@ -19,12 +19,16 @@ autocomplete="off" [(ngModel)]="searchValue" > - - + @if (searchValue) { + + } + @if (!searchValue) { + + } + @if (recording.status === recordingStatusEnum.READY) { + + } - - + download + + } + @if (recording.status === recordingStatusEnum.READY || recording.status === recordingStatusEnum.FAILED) { + + }
@@ -145,7 +144,8 @@
- + } +
-
- - - + @if (!loading) { + + +
+ + {{ 'ADMIN.USERNAME' | translate }} + + @if (loginForm.get('username')?.hasError('required')) { + + {{ 'ADMIN.USERNAME_REQUIRED' | translate }} + + } + + + {{ 'ADMIN.PASSWORD' | translate }} + + @if (loginForm.get('password')?.hasError('required')) { + + {{ 'ADMIN.PASSWORD_REQUIRED' | translate }} + + } + +
+ +
+
+ + + } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.html index 7b4da5f33..1b9a66d0e 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.html @@ -1,45 +1,47 @@
-
- -
+ @for (track of localParticipant.tracks; track track) { +
+ +
+ } @if (layoutAdditionalElementsTemplate) { } -
- -
+ @for (track of remoteParticipants | tracks; track track) { +
+ +
+ }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.html index a663b4d18..9f620a7e0 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.html @@ -8,25 +8,27 @@
- - + @if (showRecordingActivity) { + + } + @if (showBroadcastingActivity) { + + }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html index cac42c815..b9a797651 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html @@ -73,28 +73,30 @@ /> - + @if (broadcastingStatus === broadcastingStatusEnum.STARTED) { + + }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.html index 8b3903655..8a2024993 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.html @@ -11,17 +11,23 @@
-
-
-
-

{{ 'PANEL.CHAT.YOU' | translate }}

-

{{ data.participantName }}

-
-
-

+ @for (data of messageList; track data) { +
+
+
+ @if (data.isLocal) { +

{{ 'PANEL.CHAT.YOU' | translate }}

+ } + @if (!data.isLocal) { +

{{ data.participantName }}

+ } +
+
+

+
-
+ }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.html index 29455aeef..75c8509ab 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.html @@ -1,30 +1,29 @@ - +@if (isChatPanelOpened) { - - +} - +@if (isParticipantsPanelOpened) { - +} - +@if (isBackgroundEffectsPanelOpened) { - +} - +@if (isSettingsPanelOpened) { - +} - +@if (isActivitiesPanelOpened) { - +} - +@if (additionalPanelsTemplate && isExternalPanelOpened) { - +} diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html index fb3e9aa18..b2f1a9d52 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html @@ -7,17 +7,25 @@
-
- - -
+ @if (localParticipant) { +
+ + @if (true) { + + } +
+ } -
-
- + @if (remoteParticipants.length > 0) { +
+ @for (participant of this.remoteParticipants; track participant.identity) { +
+ +
+ }
-
+ }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html index 452e5121d..4e0dcd9b3 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html @@ -24,32 +24,40 @@ [matTooltipDisabled]="!shouldHideMenuText" > manage_accounts -
{{ 'PANEL.SETTINGS.GENERAL' | translate }}
- - - videocam -
{{ 'PANEL.SETTINGS.VIDEO' | translate }}
- - - mic -
{{ 'PANEL.SETTINGS.AUDIO' | translate }}
+ @if (!shouldHideMenuText) { +
{{ 'PANEL.SETTINGS.GENERAL' | translate }}
+ } + @if (showCameraButton) { + + videocam + @if (!shouldHideMenuText) { +
{{ 'PANEL.SETTINGS.VIDEO' | translate }}
+ } + + } + @if (showMicrophoneButton) { + + mic + @if (!shouldHideMenuText) { +
{{ 'PANEL.SETTINGS.AUDIO' | translate }}
+ } + + } - @if (generalAdditionalElementsTemplate) { -
- -
- } -
-
- -
-
- -
+ @if (showThemeSelector) { +
+ + + routine +
{{ 'PANEL.SETTINGS.THEME' | translate }}
+ + + +
+ } + + @if (generalAdditionalElementsTemplate) { +
+ +
+ } +
+ } + @if (showCameraButton && selectedOption === settingsOptions.VIDEO) { +
+ +
+ } + @if (showMicrophoneButton && selectedOption === settingsOptions.AUDIO) { +
+ +
+ } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html index 4a843869e..284e9eea2 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html @@ -41,27 +41,31 @@
-
- - -
+ @if (showCameraButton) { +
+ + +
+ } -
- - -
+ @if (showMicrophoneButton) { +
+ + +
+ }
@@ -93,22 +97,26 @@
-
- - -
+ @if (showParticipantName) { +
+ + +
+ } -
- error_outline - {{ _error }} -
+ @if (!!_error) { +
+ error_outline + {{ _error }} +
+ }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.html index 499a6866e..05fa86ef3 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.html @@ -29,8 +29,10 @@ - + @if (toolbarTemplate) { + + }
} diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.html index c95fb3771..b3f1b074d 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.html @@ -56,7 +56,9 @@ > mic {{ microphoneSelected?.label || 'No microphone selected' }} - expand_more + @if (microphones.length > 1) { + expand_more + }
} @else { @@ -91,7 +93,9 @@ (click)="onMicrophoneSelected({ value: microphone })" [class.selected]="microphone.device === microphoneSelected.device" > - check + @if (microphone.device === microphoneSelected.device) { + check + } {{ microphone.label }} } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html index dd65e256a..e222e4753 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html @@ -55,7 +55,9 @@ > videocam {{ cameraSelected?.label || 'No camera selected' }} - expand_more + @if (cameras.length > 1) { + expand_more + }
} @else { @@ -87,7 +89,9 @@ (click)="onCameraSelected({ value: camera })" [class.selected]="camera.device === cameraSelected?.device" > - check + @if (camera.device === cameraSelected?.device) { + check + } {{ camera.label }} } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html index 0ef95f53b..5dc268c1e 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html @@ -1,83 +1,112 @@ -
+@if (_track.participant) {
-
- {{ _track.participant.name }} - _SCREEN -
-
- -
- -
- - - - @if (!_track.participant.hasEncryptionError) { -
- - - -
- -
-
- - - + @if ((!isMinimal && showParticipantName && !_track.isAudioTrack) || (_track.isAudioTrack && _track.participant.onlyHasAudioTracks)) { +
+
+ {{ _track.participant.name }} + @if (_track.isScreenTrack) { + _SCREEN + } +
-
- } -
+ } + + @if (!isMinimal && showAudioDetection && _track.participant.isSpeaking && _track.isCameraTrack) { +
+ +
+ } + + + + @if (!_track.participant.hasEncryptionError) { +
+ @if (!_track.participant?.isMicrophoneEnabled) { + + } + @if (_track.isMutedForcibly) { + + } + @if (_track.isPinned) { + + } +
+ } + + @if (!isMinimal && showVideoControls && mouseHovering && !_track.participant.hasEncryptionError) { +
+
+ + @if (!_track.participant.isLocal) { + + } + @if (_track.participant.isLocal) { + + } +
+
+ } +
+} + diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts index a7b1054de..4eb9931f2 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts @@ -11,6 +11,7 @@ import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.servic import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service'; import { LayoutService } from '../../services/layout/layout.service'; import { ParticipantService } from '../../services/participant/participant.service'; +import { TranslatePipe } from '../../pipes/translate.pipe'; /** * The **StreamComponent** is hosted inside of the {@link LayoutComponent}. @@ -21,7 +22,7 @@ import { ParticipantService } from '../../services/participant/participant.servi templateUrl: './stream.component.html', styleUrls: ['./stream.component.scss'], standalone: true, - imports: [CommonModule, AppMaterialModule, AudioWaveComponent, MediaElementComponent] + imports: [CommonModule, AppMaterialModule, AudioWaveComponent, MediaElementComponent, TranslatePipe] }) export class StreamComponent implements OnInit, OnDestroy { /** @@ -193,21 +194,18 @@ export class StreamComponent implements OnInit, OnDestroy { .pipe(takeUntil(this.destroy$)) .subscribe((value: boolean) => { this.showParticipantName = value; - // this.cd.markForCheck(); }); this.libService.displayAudioDetection$ .pipe(takeUntil(this.destroy$)) .subscribe((value: boolean) => { this.showAudioDetection = value; - // this.cd.markForCheck(); }); this.libService.streamVideoControls$ .pipe(takeUntil(this.destroy$)) .subscribe((value: boolean) => { this.showVideoControls = value; - // this.cd.markForCheck(); }); } } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.html index f2c3bba7e..e7d86fa53 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.html @@ -159,17 +159,22 @@ } - + @if (!isMinimal && showCaptionsButton) { + + } @if (showAdditionalButtonsInsideMenu() && additionalButtonsPosition === 'afterMenu') { diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.html index 510a85487..d5a4cd49f 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.html @@ -1,128 +1,136 @@ - -
+@if (shouldShowCollapsed) { + @if (visibleButtonsCount > 0) { +
+ + + + + + @if (!isMinimal && showActivitiesPanelButton) { + + } + + + @if (!isMinimal && showParticipantsPanelButton) { + + } + + + @if (!isMinimal && showChatPanelButton) { + + } + + + @if (toolbarAdditionalPanelButtonsTemplate) { + + } + +
+ } +} @else { + + @if (!isMinimal && showActivitiesPanelButton) { + } - - - - + } + + + @if (!isMinimal && showChatPanelButton) { + + chat + + + } - - - - - - - - - - - -
- + + @if (toolbarAdditionalPanelButtonsTemplate) { + + } +} - - - - - - - - - - - - - - diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html index cdbe146fc..48ac774f3 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html @@ -21,7 +21,9 @@
radio_button_checked REC - | {{ recordingTime | date: 'H:mm:ss' }} + @if (recordingTime) { + | {{ recordingTime | date: 'H:mm:ss' }} + }
} diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html index 0a64f08ef..32895b31f 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html @@ -8,10 +8,9 @@ } @else if (componentState.showPrejoin) {
- + @if (openviduAngularPreJoinTemplate) { - - + } @else { - + }
} @else if (componentState.error?.hasError) { @@ -44,21 +43,21 @@ (onParticipantLeft)="_onParticipantLeft($event)" > - + @if (openviduAngularToolbarTemplate) { - + } - + @if (openviduAngularPanelTemplate) { - + } - + @if (openviduAngularLayoutTemplate) { - + }