Skip to content

Commit 9a79dd9

Browse files
sergelegersergeleger
committed
fix: replaced deprecated ngIf and ngFor directives
1 parent 192cb91 commit 9a79dd9

8 files changed

Lines changed: 483 additions & 464 deletions

File tree

‎packages/studio-web/src/app/demo/demo.component.html‎

Lines changed: 63 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,69 @@
11
<section>
2-
<div class="container" *ngIf="studioService.render$ | async">
3-
<div class="row">
4-
<div class="col col-md-6 col-lg-9">
5-
<h2
6-
id="readalong-congratulations"
7-
i18n="Congratulations message"
8-
class="subtitle"
9-
>
10-
Congratulations! Here's your ReadAlong!
11-
</h2>
2+
@if (studioService.render$ | async) {
3+
<div class="container">
4+
<div class="row">
5+
<div class="col col-md-6 col-lg-9">
6+
<h2
7+
id="readalong-congratulations"
8+
i18n="Congratulations message"
9+
class="subtitle"
10+
>
11+
Congratulations! Here's your ReadAlong!
12+
</h2>
13+
</div>
14+
<div class="col col-md-6 col-lg-3">
15+
<ras-shared-download
16+
(downloadButtonClicked)="download($event)"
17+
></ras-shared-download>
18+
</div>
1219
</div>
13-
<div class="col col-md-6 col-lg-3">
14-
<ras-shared-download
15-
(downloadButtonClicked)="download($event)"
16-
></ras-shared-download>
17-
</div>
18-
</div>
1920

20-
<div class="row"></div>
21+
<div class="row"></div>
2122

22-
<div class="row" *ngIf="studioService.b64Inputs$ | async as b64Inputs">
23-
<div *ngIf="b64Inputs[0] && b64Inputs[1] && rasAsDataURL()">
24-
<read-along
25-
id="readalong"
26-
[language]="language"
27-
#readalong
28-
*ngIf="studioService.render$ | async"
29-
mode="EDIT"
30-
href="{{ rasAsDataURL() }}"
31-
audio="{{ b64Inputs[0] }}"
32-
class="hydrated"
33-
>
34-
<input
35-
#title
36-
[(ngModel)]="studioService.slots.title"
37-
[ngStyle]="{
38-
'width.ch': studioService.slots.title.length,
39-
'min-width.ch': 20,
40-
}"
41-
style="border: none"
42-
placeholder="Enter your title here"
43-
slot="read-along-header"
44-
data-test-id="ra-header"
45-
/>
46-
<input
47-
#subtitle
48-
[(ngModel)]="studioService.slots.subtitle"
49-
[ngStyle]="{
50-
'width.ch': studioService.slots.subtitle.length,
51-
'min-width.ch': 20,
52-
}"
53-
style="border: none"
54-
placeholder="Enter your subtitle here"
55-
slot="read-along-subheader"
56-
data-test-id="ra-subheader"
57-
/>
58-
</read-along>
59-
</div>
23+
@if (studioService.b64Inputs$ | async; as b64Inputs) {
24+
<div class="row">
25+
@if (b64Inputs[0] && b64Inputs[1] && rasAsDataURL()) {
26+
<div>
27+
@if (studioService.render$ | async) {
28+
<read-along
29+
id="readalong"
30+
[language]="language"
31+
#readalong
32+
mode="EDIT"
33+
href="{{ rasAsDataURL() }}"
34+
audio="{{ b64Inputs[0] }}"
35+
class="hydrated"
36+
>
37+
<input
38+
#title
39+
[(ngModel)]="studioService.slots.title"
40+
[ngStyle]="{
41+
'width.ch': studioService.slots.title.length,
42+
'min-width.ch': 20,
43+
}"
44+
style="border: none"
45+
placeholder="Enter your title here"
46+
slot="read-along-header"
47+
data-test-id="ra-header"
48+
/>
49+
<input
50+
#subtitle
51+
[(ngModel)]="studioService.slots.subtitle"
52+
[ngStyle]="{
53+
'width.ch': studioService.slots.subtitle.length,
54+
'min-width.ch': 20,
55+
}"
56+
style="border: none"
57+
placeholder="Enter your subtitle here"
58+
slot="read-along-subheader"
59+
data-test-id="ra-subheader"
60+
/>
61+
</read-along>
62+
}
63+
</div>
64+
}
65+
</div>
66+
}
6067
</div>
61-
</div>
68+
}
6269
</section>

‎packages/studio-web/src/app/editor/editor.component.html‎

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,13 @@ <h1 i18n="Welcome message for app editor" id="welcome-header">
2222
</button>
2323
</div>
2424
</div>
25-
<div class="col-4" *ngIf="editorService.uploadFormGroup.valid">
26-
<ras-shared-download
27-
(downloadButtonClicked)="download($event)"
28-
></ras-shared-download>
29-
</div>
25+
@if (editorService.uploadFormGroup.valid) {
26+
<div class="col-4">
27+
<ras-shared-download
28+
(downloadButtonClicked)="download($event)"
29+
></ras-shared-download>
30+
</div>
31+
}
3032
</div>
3133
<div class="row justify-content-center mb-6">
3234
<div class="col">
@@ -53,16 +55,6 @@ <h2 i18n="Title for upload box" class="title">
5355
</div>
5456
</div>
5557
</div>
56-
<!--div class="fluid-container">
57-
<div class="row flex-nowrap">
58-
<div class="col col-lg-7">
59-
60-
</div>
61-
<div class="col-12 bg-fade col-lg-5 pt-lg-5 d-lg-flex flex-row" *ngIf="rasFileIsLoaded">
62-
63-
64-
</div>
65-
</div></div-->
6658
<div
6759
class="d-flex justify-content-center flex-column flex-xl-row flex-xl-nowrap bg-light mt-3 full-height"
6860
>
@@ -85,28 +77,30 @@ <h2 i18n="Title for upload box" class="title">
8577
<div class="container">
8678
<div class="row justify-content-center mt-5 mb-5">
8779
<div class="col" id="audioToolbar">
88-
<mat-toolbar *ngIf="editorService.audioControl$.valid">
89-
<span i18n="Audio Toolbar">Audio Toolbar</span>
90-
<span class="example-spacer"></span>
91-
<span id="zoomControls">
92-
<button
93-
(click)="zoomIn()"
94-
mat-icon-button
95-
class="example-icon zoom-in-icon"
96-
aria-label="Zoom in icon for audio waveform"
80+
@if (editorService.audioControl$.valid) {
81+
<mat-toolbar>
82+
<span i18n="Audio Toolbar">Audio Toolbar</span>
83+
<span class="example-spacer"></span>
84+
<span id="zoomControls">
85+
<button
86+
(click)="zoomIn()"
87+
mat-icon-button
88+
class="example-icon zoom-in-icon"
89+
aria-label="Zoom in icon for audio waveform"
90+
>
91+
<mat-icon>zoom_in</mat-icon>
92+
</button>
93+
<button
94+
(click)="zoomOut()"
95+
mat-icon-button
96+
class="example-icon"
97+
aria-label="Zoom out icon for audio waveform"
98+
>
99+
<mat-icon>zoom_out</mat-icon>
100+
</button></span
97101
>
98-
<mat-icon>zoom_in</mat-icon>
99-
</button>
100-
<button
101-
(click)="zoomOut()"
102-
mat-icon-button
103-
class="example-icon"
104-
aria-label="Zoom out icon for audio waveform"
105-
>
106-
<mat-icon>zoom_out</mat-icon>
107-
</button></span
108-
>
109-
</mat-toolbar>
102+
</mat-toolbar>
103+
}
110104
<div
111105
class="pure-u-1"
112106
id="wavesurferContainer"

‎packages/studio-web/src/app/error-page/error-page.component.html‎

Lines changed: 49 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -323,49 +323,55 @@
323323
<g></g>
324324
</svg>
325325
</div>
326-
<div class="error__container" *ngIf="errorType === 'aligner'">
327-
<h1 i18n="Aligner error heading" class="title">Aligner Error</h1>
328-
<p i18n="Aligner error text">
329-
Failed to initialize the aligner. This may be the result of an
330-
incompatible browser. Please:
331-
<br />
332-
1. try updating your browser,<br />
333-
2. try with Chrome,<br />
334-
3. if the problem persists, please
335-
<a href="{{ contactLink }}"
336-
><mat-icon inline style="vertical-align: middle">mail</mat-icon> contact
337-
the developers</a
338-
>
339-
and send them a complete copy of the error message below:
340-
</p>
341-
<pre>{{ msg }}</pre>
342-
</div>
326+
@if (errorType === "aligner") {
327+
<div class="error__container">
328+
<h1 i18n="Aligner error heading" class="title">Aligner Error</h1>
329+
<p i18n="Aligner error text">
330+
Failed to initialize the aligner. This may be the result of an
331+
incompatible browser. Please:
332+
<br />
333+
1. try updating your browser,<br />
334+
2. try with Chrome,<br />
335+
3. if the problem persists, please
336+
<a href="{{ contactLink }}"
337+
><mat-icon inline style="vertical-align: middle">mail</mat-icon>
338+
contact the developers</a
339+
>
340+
and send them a complete copy of the error message below:
341+
</p>
342+
<pre>{{ msg }}</pre>
343+
</div>
344+
}
343345

344-
<div class="error__container" *ngIf="errorType !== 'aligner' && msg !== null">
345-
<h1 i18n="Language error heading" class="title">Server Error</h1>
346-
<p i18n="Language error text">
347-
Failed to retrieve the list of languages from the server. Please
348-
<a href="{{ contactLink }}"
349-
><mat-icon inline style="vertical-align: middle">mail</mat-icon> contact
350-
the developers</a
351-
>
352-
and reload the page once the error is corrected.
353-
</p>
354-
<pre>{{ msg }}</pre>
355-
</div>
346+
@if (errorType !== "aligner" && msg !== null) {
347+
<div class="error__container">
348+
<h1 i18n="Language error heading" class="title">Server Error</h1>
349+
<p i18n="Language error text">
350+
Failed to retrieve the list of languages from the server. Please
351+
<a href="{{ contactLink }}"
352+
><mat-icon inline style="vertical-align: middle">mail</mat-icon>
353+
contact the developers</a
354+
>
355+
and reload the page once the error is corrected.
356+
</p>
357+
<pre>{{ msg }}</pre>
358+
</div>
359+
}
356360

357-
<div class="error__container" *ngIf="msg === null">
358-
<h1 i18n="404" class="MainTitle">
359-
Whoops! Looks like you're lost! You weren't supposed to see this page.
360-
Please go back to the home page by clicking below.
361-
</h1>
362-
<button
363-
i18n="Navigate home"
364-
mat-raised-button
365-
color="primary"
366-
(click)="goHome()"
367-
>
368-
Take me home!
369-
</button>
370-
</div>
361+
@if (msg === null) {
362+
<div class="error__container">
363+
<h1 i18n="404" class="MainTitle">
364+
Whoops! Looks like you're lost! You weren't supposed to see this page.
365+
Please go back to the home page by clicking below.
366+
</h1>
367+
<button
368+
i18n="Navigate home"
369+
mat-raised-button
370+
color="primary"
371+
(click)="goHome()"
372+
>
373+
Take me home!
374+
</button>
375+
</div>
376+
}
371377
</div>

‎packages/studio-web/src/app/privacy-dialog.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,24 +35,25 @@ <h1 i18n="Title for privacy dialog" mat-dialog-title>Privacy Policy</h1>
3535
style="display: flex; justify-content: space-evenly; margin-top: 1em"
3636
>
3737
<div>
38+
@if(analyticsExcluded) {
3839
<button
3940
color="accent"
40-
*ngIf="analyticsExcluded"
4141
(click)="toggleAnalytics()"
4242
i18n="Opt In Button"
4343
mat-raised-button
4444
>
4545
Opt in to Analytics
4646
</button>
47+
} @else {
4748
<button
4849
color="warn"
49-
*ngIf="!analyticsExcluded"
5050
(click)="toggleAnalytics()"
5151
i18n="Opt Out Button"
5252
mat-raised-button
5353
>
5454
Opt out of Analytics
5555
</button>
56+
}
5657
</div>
5758
<div>
5859
<button

‎packages/studio-web/src/app/shared/download/download.component.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@
55
data-test-id="download-formats"
66
[(ngModel)]="selectedOutputFormat"
77
>
8-
<mat-option *ngFor="let format of outputFormats" [value]="format.value">
9-
{{ format.display }}
10-
</mat-option>
8+
@for (format of outputFormats; track format.value) {
9+
<mat-option [value]="format.value">
10+
{{ format.display }}
11+
</mat-option>
12+
}
1113
</mat-select>
1214
</mat-form-field>
1315
<button

0 commit comments

Comments
 (0)