Skip to content

Commit 5e6e438

Browse files
author
Salma Alam-Naylor
committed
Improved audit results, lazy load youtube
1 parent b53a2df commit 5e6e438

File tree

12 files changed

+59
-63
lines changed

12 files changed

+59
-63
lines changed

apps/fretonator-web/src/app/common/chips/__snapshots__/chips.component.spec.ts.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ exports[`ChipsComponent should match the snapshot 1`] = `
1010
>
1111
<app-chip>
1212
<a
13-
aria-label="note | createChipLink: noteExtender: mode"
13+
aria-label="A Ionian (Major)"
1414
class="chip"
1515
href="/a/natural/ionian"
1616
>
@@ -19,7 +19,7 @@ exports[`ChipsComponent should match the snapshot 1`] = `
1919
</app-chip>
2020
<app-chip>
2121
<a
22-
aria-label="note | createChipLink: noteExtender: mode"
22+
aria-label="B flat Mixolydian"
2323
class="chip chip--round"
2424
href="/b/flat/mixolydian"
2525
>
@@ -28,7 +28,7 @@ exports[`ChipsComponent should match the snapshot 1`] = `
2828
</app-chip>
2929
<app-chip>
3030
<a
31-
aria-label="note | createChipLink: noteExtender: mode"
31+
aria-label="F sharp Minor Pentatonic"
3232
class="chip"
3333
href="/f/sharp/minorPentatonic"
3434
>

apps/fretonator-web/src/app/common/chips/chip/chip.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<a
22
[routerLink]="['/', note, noteExtender, mode]"
3-
aria-label="note | createChipLink: noteExtender: mode"
3+
[attr.aria-label]="note | createChipLinkTitle: noteExtender: mode"
44
class="chip"
55
[class.chip--active]="selected"
66
[class.chip--round]="rounded"

apps/fretonator-web/src/app/common/chips/chip/create-chip-link-title.pipe.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ export class CreateChipLinkTitlePipe implements PipeTransform {
99
constructor(public generateFretMapService: FretMapService) {}
1010
transform(
1111
note: string,
12-
noteExtender: NoteExtenderString,
12+
noteExtender: string,
1313
mode: Mode
1414
): string {
1515
return this.generateFretMapService.convertFretMapConfigurationToDisplayString(
1616
note,
17-
noteExtender,
17+
noteExtender as NoteExtenderString,
1818
mode
1919
);
2020
}

apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,8 @@ <h4 class="scaleMap__title">Degrees</h4>
1212
<button class="scaleDegrees__toggle"
1313
aria-label="Scale Degrees Info Toggle"
1414
aria-controls="scaleMapInfo"
15-
role="switch"
1615
type="button"
17-
[attr.aria-checked]="showScaleMapInfo"
16+
[attr.aria-expanded]="showScaleMapInfo"
1817
(click)="toggleScaleMapInfo()">{{scaleDegreesToggleText}}
1918
</button>
2019
</div>
@@ -39,7 +38,6 @@ <h2 class="scaleMapInfo__title">About Scale Degrees
3938
<button class="scaleMapInfo__close"
4039
aria-label="Scale Degrees Info Toggle"
4140
aria-controls="scaleMapInfo"
42-
role="switch"
4341
type="button"
4442
(click)="toggleScaleMapInfo()">
4543
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">

apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,10 @@ exports[`HeaderComponent should match snapshot 1`] = `
2626
</app-logo-with-text>
2727
</a>
2828
<button
29-
aria-checked="false"
3029
aria-controls="headerLinks"
30+
aria-expanded="false"
3131
aria-label="Menu Toggle"
3232
class="hamburger"
33-
role="switch"
3433
type="button"
3534
>
3635
<span

apps/fretonator-web/src/app/common/header/header.component.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,9 @@
1010
<button class="hamburger"
1111
[class.is__open]="isMenuVisible"
1212
(click)="toggleMenu()"
13-
[attr.aria-checked]="isMenuVisible"
13+
[attr.aria-expanded]="isMenuVisible"
1414
aria-label="Menu Toggle"
1515
aria-controls="headerLinks"
16-
role="switch"
1716
type="button">
1817
<span class="hamburger__box">
1918
<span class="hamburger__inner"></span>

apps/fretonator-web/src/app/common/video-loader/video-loader.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ <h3 class="videoLoader__title">Try a jam track</h3>
77
</div>
88

99
<div class="videoLoader__video">
10-
<app-video-server *ngIf="!isBrowser"
10+
<app-video-server *ngIf="!showVideo"
1111
[youTubeId]="jamTrack.youTubeId"
1212
class="videoLoader__content"></app-video-server>
13-
<app-video-browser *ngIf="isBrowser"
13+
<app-video-browser *ngIf="showVideo"
1414
[youTubeId]="jamTrack.youTubeId"
1515
[title]="jamTrack.title"
1616
class="videoLoader__content"></app-video-browser>

apps/fretonator-web/src/app/common/video-loader/video-loader.component.spec.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import { VideoLoaderModule } from './video-loader.module';
66
import { JamTracksData } from '../../data/jamTracks';
77

88
xdescribe('VideoLoaderComponent', () => {
9-
10-
9+
1110
@Component({
1211
selector: 'app-video-loader',
1312
template: `
Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
1-
import { Component, Inject, Input, OnInit, PLATFORM_ID } from '@angular/core';
2-
import { isPlatformBrowser } from '@angular/common';
1+
import { Component, HostListener, Input } from '@angular/core';
32
import { JamTrack } from '../../util/types';
43

54
@Component({
65
selector: 'app-video-loader',
76
templateUrl: './video-loader.component.html',
87
styleUrls: ['./video-loader.component.scss']
98
})
10-
export class VideoLoaderComponent implements OnInit {
9+
export class VideoLoaderComponent {
1110
@Input() jamTrack: JamTrack;
12-
isBrowser = false;
11+
showVideo = false;
1312

14-
constructor(@Inject(PLATFORM_ID) private platformId) { }
15-
16-
ngOnInit(): void {
17-
this.isBrowser = isPlatformBrowser(this.platformId);
13+
@HostListener('window:scroll')
14+
onScroll() {
15+
this.showVideo = true;
1816
}
19-
2017
}

apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ exports[`HomeIndexComponent should create 1`] = `
8686
selectedcolor="default"
8787
>
8888
<a
89-
aria-label="note | createChipLink: noteExtender: mode"
89+
aria-label="A Ionian (Major)"
9090
class="chip chip--round"
9191
href="/a/natural/ionian"
9292
>
@@ -98,7 +98,7 @@ exports[`HomeIndexComponent should create 1`] = `
9898
selectedcolor="default"
9999
>
100100
<a
101-
aria-label="note | createChipLink: noteExtender: mode"
101+
aria-label="B Ionian (Major)"
102102
class="chip chip--round"
103103
href="/b/natural/ionian"
104104
>
@@ -110,7 +110,7 @@ exports[`HomeIndexComponent should create 1`] = `
110110
selectedcolor="default"
111111
>
112112
<a
113-
aria-label="note | createChipLink: noteExtender: mode"
113+
aria-label="C Ionian (Major)"
114114
class="chip chip--active chip--round"
115115
href="/c/natural/ionian"
116116
>
@@ -122,7 +122,7 @@ exports[`HomeIndexComponent should create 1`] = `
122122
selectedcolor="default"
123123
>
124124
<a
125-
aria-label="note | createChipLink: noteExtender: mode"
125+
aria-label="D Ionian (Major)"
126126
class="chip chip--round"
127127
href="/d/natural/ionian"
128128
>
@@ -134,7 +134,7 @@ exports[`HomeIndexComponent should create 1`] = `
134134
selectedcolor="default"
135135
>
136136
<a
137-
aria-label="note | createChipLink: noteExtender: mode"
137+
aria-label="E Ionian (Major)"
138138
class="chip chip--round"
139139
href="/e/natural/ionian"
140140
>
@@ -146,7 +146,7 @@ exports[`HomeIndexComponent should create 1`] = `
146146
selectedcolor="default"
147147
>
148148
<a
149-
aria-label="note | createChipLink: noteExtender: mode"
149+
aria-label="F Ionian (Major)"
150150
class="chip chip--round"
151151
href="/f/natural/ionian"
152152
>
@@ -158,7 +158,7 @@ exports[`HomeIndexComponent should create 1`] = `
158158
selectedcolor="default"
159159
>
160160
<a
161-
aria-label="note | createChipLink: noteExtender: mode"
161+
aria-label="G Ionian (Major)"
162162
class="chip chip--round"
163163
href="/g/natural/ionian"
164164
>
@@ -177,7 +177,7 @@ exports[`HomeIndexComponent should create 1`] = `
177177
selectedcolor="grey"
178178
>
179179
<a
180-
aria-label="note | createChipLink: noteExtender: mode"
180+
aria-label="C Ionian (Major)"
181181
class="chip chip--active chip--round chip--grey"
182182
href="/c/natural/ionian"
183183
>
@@ -190,7 +190,7 @@ exports[`HomeIndexComponent should create 1`] = `
190190
selectedcolor="grey"
191191
>
192192
<a
193-
aria-label="note | createChipLink: noteExtender: mode"
193+
aria-label="C sharp Ionian (Major)"
194194
class="chip chip--round chip--grey"
195195
href="/c/sharp/ionian"
196196
>
@@ -217,7 +217,7 @@ exports[`HomeIndexComponent should create 1`] = `
217217
selectedcolor="default"
218218
>
219219
<a
220-
aria-label="note | createChipLink: noteExtender: mode"
220+
aria-label="C Ionian (Major)"
221221
class="chip chip--active"
222222
href="/c/natural/ionian"
223223
>
@@ -228,7 +228,7 @@ exports[`HomeIndexComponent should create 1`] = `
228228
selectedcolor="default"
229229
>
230230
<a
231-
aria-label="note | createChipLink: noteExtender: mode"
231+
aria-label="C Dorian"
232232
class="chip"
233233
href="/c/natural/dorian"
234234
>
@@ -239,7 +239,7 @@ exports[`HomeIndexComponent should create 1`] = `
239239
selectedcolor="default"
240240
>
241241
<a
242-
aria-label="note | createChipLink: noteExtender: mode"
242+
aria-label="C Phrygian"
243243
class="chip"
244244
href="/c/natural/phrygian"
245245
>
@@ -250,7 +250,7 @@ exports[`HomeIndexComponent should create 1`] = `
250250
selectedcolor="default"
251251
>
252252
<a
253-
aria-label="note | createChipLink: noteExtender: mode"
253+
aria-label="C Lydian"
254254
class="chip"
255255
href="/c/natural/lydian"
256256
>
@@ -261,7 +261,7 @@ exports[`HomeIndexComponent should create 1`] = `
261261
selectedcolor="default"
262262
>
263263
<a
264-
aria-label="note | createChipLink: noteExtender: mode"
264+
aria-label="C Mixolydian"
265265
class="chip"
266266
href="/c/natural/mixolydian"
267267
>
@@ -272,7 +272,7 @@ exports[`HomeIndexComponent should create 1`] = `
272272
selectedcolor="default"
273273
>
274274
<a
275-
aria-label="note | createChipLink: noteExtender: mode"
275+
aria-label="C Aolian (Minor)"
276276
class="chip"
277277
href="/c/natural/aolian"
278278
>
@@ -283,7 +283,7 @@ exports[`HomeIndexComponent should create 1`] = `
283283
selectedcolor="default"
284284
>
285285
<a
286-
aria-label="note | createChipLink: noteExtender: mode"
286+
aria-label="C Locrian"
287287
class="chip"
288288
href="/c/natural/locrian"
289289
>
@@ -294,7 +294,7 @@ exports[`HomeIndexComponent should create 1`] = `
294294
selectedcolor="default"
295295
>
296296
<a
297-
aria-label="note | createChipLink: noteExtender: mode"
297+
aria-label="C Harmonic Minor"
298298
class="chip"
299299
href="/c/natural/harmonicMinor"
300300
>
@@ -305,7 +305,7 @@ exports[`HomeIndexComponent should create 1`] = `
305305
selectedcolor="default"
306306
>
307307
<a
308-
aria-label="note | createChipLink: noteExtender: mode"
308+
aria-label="C Phrygian Dominant"
309309
class="chip"
310310
href="/c/natural/phrygianDominant"
311311
>
@@ -316,7 +316,7 @@ exports[`HomeIndexComponent should create 1`] = `
316316
selectedcolor="default"
317317
>
318318
<a
319-
aria-label="note | createChipLink: noteExtender: mode"
319+
aria-label="C Major Pentatonic"
320320
class="chip"
321321
href="/c/natural/majorPentatonic"
322322
>
@@ -327,7 +327,7 @@ exports[`HomeIndexComponent should create 1`] = `
327327
selectedcolor="default"
328328
>
329329
<a
330-
aria-label="note | createChipLink: noteExtender: mode"
330+
aria-label="C Minor Pentatonic"
331331
class="chip"
332332
href="/c/natural/minorPentatonic"
333333
>
@@ -1057,11 +1057,10 @@ exports[`HomeIndexComponent should create 1`] = `
10571057
</span>
10581058
</div>
10591059
<button
1060-
aria-checked="false"
10611060
aria-controls="scaleMapInfo"
1061+
aria-expanded="false"
10621062
aria-label="Scale Degrees Info Toggle"
10631063
class="scaleDegrees__toggle"
1064-
role="switch"
10651064
type="button"
10661065
>
10671066
What is this?
@@ -1381,20 +1380,28 @@ exports[`HomeIndexComponent should create 1`] = `
13811380
class="videoLoader__video"
13821381
>
13831382
1384-
1385-
<app-video-browser
1383+
<app-video-server
13861384
class="videoLoader__content"
13871385
>
1388-
<iframe
1389-
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
1390-
allowfullscreen=""
1391-
frameborder="0"
1392-
height="100%"
1393-
src="https://www.youtube.com/embed/oMZz2FeV8q4"
1394-
title="C Ionian (Major) Jam Track"
1395-
width="100%"
1396-
/>
1397-
</app-video-browser>
1386+
<div
1387+
class="videoServer__container"
1388+
>
1389+
<h3
1390+
class="videoServer__title"
1391+
>
1392+
View on YouTube
1393+
</h3>
1394+
<a
1395+
class="videoServer__link"
1396+
href="https://www.youtube.com/watch?v=oMZz2FeV8q4"
1397+
rel="nofollow noopener noreferrer"
1398+
target="_blank"
1399+
>
1400+
https://www.youtube.com/watch?v=oMZz2FeV8q4
1401+
</a>
1402+
</div>
1403+
</app-video-server>
1404+
13981405
</div>
13991406
</div>
14001407
</app-video-loader>

0 commit comments

Comments
 (0)