Improved audit results, lazy load youtube

Salma Alam-Naylor · Salma Alam-Naylor · commit 5e6e438a5265 · 2020-06-04T21:30:57.000+01:00
diff --git a/apps/fretonator-web/src/app/common/chips/__snapshots__/chips.component.spec.ts.snap b/apps/fretonator-web/src/app/common/chips/__snapshots__/chips.component.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`ChipsComponent should match the snapshot 1`] = `
     >
       <app-chip>
         <a
-          aria-label="note | createChipLink: noteExtender: mode"
+          aria-label="A Ionian (Major)"
           class="chip"
           href="/a/natural/ionian"
         >
@@ -19,7 +19,7 @@ exports[`ChipsComponent should match the snapshot 1`] = `
       </app-chip>
       <app-chip>
         <a
-          aria-label="note | createChipLink: noteExtender: mode"
+          aria-label="B flat Mixolydian"
           class="chip chip--round"
           href="/b/flat/mixolydian"
         >
@@ -28,7 +28,7 @@ exports[`ChipsComponent should match the snapshot 1`] = `
       </app-chip>
       <app-chip>
         <a
-          aria-label="note | createChipLink: noteExtender: mode"
+          aria-label="F sharp Minor Pentatonic"
           class="chip"
           href="/f/sharp/minorPentatonic"
         >
diff --git a/apps/fretonator-web/src/app/common/chips/chip/chip.component.html b/apps/fretonator-web/src/app/common/chips/chip/chip.component.html
@@ -1,6 +1,6 @@
 <a
   [routerLink]="['/', note, noteExtender, mode]"
-  aria-label="note | createChipLink: noteExtender: mode"
+  [attr.aria-label]="note | createChipLinkTitle: noteExtender: mode"
   class="chip"
   [class.chip--active]="selected"
   [class.chip--round]="rounded"
diff --git a/apps/fretonator-web/src/app/common/chips/chip/create-chip-link-title.pipe.ts b/apps/fretonator-web/src/app/common/chips/chip/create-chip-link-title.pipe.ts
@@ -9,12 +9,12 @@ export class CreateChipLinkTitlePipe implements PipeTransform {
   constructor(public generateFretMapService: FretMapService) {}
   transform(
     note: string,
-    noteExtender: NoteExtenderString,
+    noteExtender: string,
     mode: Mode
   ): string {
     return this.generateFretMapService.convertFretMapConfigurationToDisplayString(
       note,
-      noteExtender,
+      noteExtender as NoteExtenderString,
       mode
     );
   }
diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html
@@ -12,9 +12,8 @@ <h4 class="scaleMap__title">Degrees</h4>
       <button class="scaleDegrees__toggle"
               aria-label="Scale Degrees Info Toggle"
               aria-controls="scaleMapInfo"
-              role="switch"
               type="button"
-              [attr.aria-checked]="showScaleMapInfo"
+              [attr.aria-expanded]="showScaleMapInfo"
               (click)="toggleScaleMapInfo()">{{scaleDegreesToggleText}}
       </button>
     </div>
@@ -39,7 +38,6 @@ <h2 class="scaleMapInfo__title">About Scale Degrees
       <button class="scaleMapInfo__close"
               aria-label="Scale Degrees Info Toggle"
               aria-controls="scaleMapInfo"
-              role="switch"
               type="button"
               (click)="toggleScaleMapInfo()">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
diff --git a/apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap b/apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap
@@ -26,11 +26,10 @@ exports[`HeaderComponent should match snapshot 1`] = `
       </app-logo-with-text>
     </a>
     <button
-      aria-checked="false"
       aria-controls="headerLinks"
+      aria-expanded="false"
       aria-label="Menu Toggle"
       class="hamburger"
-      role="switch"
       type="button"
     >
       <span
diff --git a/apps/fretonator-web/src/app/common/header/header.component.html b/apps/fretonator-web/src/app/common/header/header.component.html
@@ -10,10 +10,9 @@
   <button class="hamburger"
           [class.is__open]="isMenuVisible"
           (click)="toggleMenu()"
-          [attr.aria-checked]="isMenuVisible"
+          [attr.aria-expanded]="isMenuVisible"
           aria-label="Menu Toggle"
           aria-controls="headerLinks"
-          role="switch"
           type="button">
     <span class="hamburger__box">
       <span class="hamburger__inner"></span>
diff --git a/apps/fretonator-web/src/app/common/video-loader/video-loader.component.html b/apps/fretonator-web/src/app/common/video-loader/video-loader.component.html
@@ -7,10 +7,10 @@ <h3 class="videoLoader__title">Try a jam track</h3>
   </div>
 
   <div class="videoLoader__video">
-    <app-video-server *ngIf="!isBrowser"
+    <app-video-server *ngIf="!showVideo"
                       [youTubeId]="jamTrack.youTubeId"
                       class="videoLoader__content"></app-video-server>
-    <app-video-browser *ngIf="isBrowser"
+    <app-video-browser *ngIf="showVideo"
                        [youTubeId]="jamTrack.youTubeId"
                        [title]="jamTrack.title"
                        class="videoLoader__content"></app-video-browser>
diff --git a/apps/fretonator-web/src/app/common/video-loader/video-loader.component.spec.ts b/apps/fretonator-web/src/app/common/video-loader/video-loader.component.spec.ts
@@ -6,8 +6,7 @@ import { VideoLoaderModule } from './video-loader.module';
 import { JamTracksData } from '../../data/jamTracks';
 
 xdescribe('VideoLoaderComponent', () => {
-
-
+  
   @Component({
     selector: 'app-video-loader',
     template: `
diff --git a/apps/fretonator-web/src/app/common/video-loader/video-loader.component.ts b/apps/fretonator-web/src/app/common/video-loader/video-loader.component.ts
@@ -1,20 +1,17 @@
-import { Component, Inject, Input, OnInit, PLATFORM_ID } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
+import { Component, HostListener, Input } from '@angular/core';
 import { JamTrack } from '../../util/types';
 
 @Component({
   selector: 'app-video-loader',
   templateUrl: './video-loader.component.html',
   styleUrls: ['./video-loader.component.scss']
 })
-export class VideoLoaderComponent implements OnInit {
+export class VideoLoaderComponent {
   @Input() jamTrack: JamTrack;
-  isBrowser = false;
+  showVideo = false;
 
-  constructor(@Inject(PLATFORM_ID) private platformId) { }
-
-  ngOnInit(): void {
-    this.isBrowser = isPlatformBrowser(this.platformId);
+  @HostListener('window:scroll')
+  onScroll() {
+    this.showVideo = true;
   }
-
 }
diff --git a/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap b/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap
@@ -86,7 +86,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="A Ionian (Major)"
                   class="chip chip--round"
                   href="/a/natural/ionian"
                 >
@@ -98,7 +98,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="B Ionian (Major)"
                   class="chip chip--round"
                   href="/b/natural/ionian"
                 >
@@ -110,7 +110,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C Ionian (Major)"
                   class="chip chip--active chip--round"
                   href="/c/natural/ionian"
                 >
@@ -122,7 +122,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="D Ionian (Major)"
                   class="chip chip--round"
                   href="/d/natural/ionian"
                 >
@@ -134,7 +134,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="E Ionian (Major)"
                   class="chip chip--round"
                   href="/e/natural/ionian"
                 >
@@ -146,7 +146,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="F Ionian (Major)"
                   class="chip chip--round"
                   href="/f/natural/ionian"
                 >
@@ -158,7 +158,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="G Ionian (Major)"
                   class="chip chip--round"
                   href="/g/natural/ionian"
                 >
@@ -177,7 +177,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="grey"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C Ionian (Major)"
                   class="chip chip--active chip--round chip--grey"
                   href="/c/natural/ionian"
                 >
@@ -190,7 +190,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="grey"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C sharp Ionian (Major)"
                   class="chip chip--round chip--grey"
                   href="/c/sharp/ionian"
                 >
@@ -217,7 +217,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C Ionian (Major)"
                   class="chip chip--active"
                   href="/c/natural/ionian"
                 >
@@ -228,7 +228,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C Dorian"
                   class="chip"
                   href="/c/natural/dorian"
                 >
@@ -239,7 +239,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C Phrygian"
                   class="chip"
                   href="/c/natural/phrygian"
                 >
@@ -250,7 +250,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C Lydian"
                   class="chip"
                   href="/c/natural/lydian"
                 >
@@ -261,7 +261,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C Mixolydian"
                   class="chip"
                   href="/c/natural/mixolydian"
                 >
@@ -272,7 +272,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C Aolian (Minor)"
                   class="chip"
                   href="/c/natural/aolian"
                 >
@@ -283,7 +283,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C Locrian"
                   class="chip"
                   href="/c/natural/locrian"
                 >
@@ -294,7 +294,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C Harmonic Minor"
                   class="chip"
                   href="/c/natural/harmonicMinor"
                 >
@@ -305,7 +305,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C Phrygian Dominant"
                   class="chip"
                   href="/c/natural/phrygianDominant"
                 >
@@ -316,7 +316,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C Major Pentatonic"
                   class="chip"
                   href="/c/natural/majorPentatonic"
                 >
@@ -327,7 +327,7 @@ exports[`HomeIndexComponent should create 1`] = `
                 selectedcolor="default"
               >
                 <a
-                  aria-label="note | createChipLink: noteExtender: mode"
+                  aria-label="C Minor Pentatonic"
                   class="chip"
                   href="/c/natural/minorPentatonic"
                 >
@@ -1057,11 +1057,10 @@ exports[`HomeIndexComponent should create 1`] = `
                     </span>
                   </div>
                   <button
-                    aria-checked="false"
                     aria-controls="scaleMapInfo"
+                    aria-expanded="false"
                     aria-label="Scale Degrees Info Toggle"
                     class="scaleDegrees__toggle"
-                    role="switch"
                     type="button"
                   >
                     What is this? 
@@ -1381,20 +1380,28 @@ exports[`HomeIndexComponent should create 1`] = `
               class="videoLoader__video"
             >
               
-              
-              <app-video-browser
+              <app-video-server
                 class="videoLoader__content"
               >
-                <iframe
-                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                  allowfullscreen=""
-                  frameborder="0"
-                  height="100%"
-                  src="https://www.youtube.com/embed/oMZz2FeV8q4"
-                  title="C Ionian (Major) Jam Track"
-                  width="100%"
-                />
-              </app-video-browser>
+                <div
+                  class="videoServer__container"
+                >
+                  <h3
+                    class="videoServer__title"
+                  >
+                    View on YouTube
+                  </h3>
+                  <a
+                    class="videoServer__link"
+                    href="https://www.youtube.com/watch?v=oMZz2FeV8q4"
+                    rel="nofollow noopener noreferrer"
+                    target="_blank"
+                  >
+                    https://www.youtube.com/watch?v=oMZz2FeV8q4
+                  </a>
+                </div>
+              </app-video-server>
+              
             </div>
           </div>
         </app-video-loader>
diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss
@@ -13,9 +13,6 @@
   width: 100%;
   padding-top: pxToRem($grid-unit * 4);
   padding-bottom: pxToRem($grid-unit * 6);
-  background-image: url('/assets/img/hero_bg.png');
-  background-position: center center;
-  background-size: cover;
 }
 
 .hero__inner {
diff --git a/apps/fretonator-web/src/assets/img/hero_bg.png b/apps/fretonator-web/src/assets/img/hero_bg.png

Original file line number	Diff line number	Diff line change
@@ -86,7 +86,7 @@ exports[`HomeIndexComponent should create 1`] = `
`86`	`86`	`selectedcolor="default"`
`87`	`87`	`>`
`88`	`88`	`<a`
`89`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`89`	`+ aria-label="A Ionian (Major)"`
`90`	`90`	`class="chip chip--round"`
`91`	`91`	`href="/a/natural/ionian"`
`92`	`92`	`>`
@@ -98,7 +98,7 @@ exports[`HomeIndexComponent should create 1`] = `
`98`	`98`	`selectedcolor="default"`
`99`	`99`	`>`
`100`	`100`	`<a`
`101`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`101`	`+ aria-label="B Ionian (Major)"`
`102`	`102`	`class="chip chip--round"`
`103`	`103`	`href="/b/natural/ionian"`
`104`	`104`	`>`
@@ -110,7 +110,7 @@ exports[`HomeIndexComponent should create 1`] = `
`110`	`110`	`selectedcolor="default"`
`111`	`111`	`>`
`112`	`112`	`<a`
`113`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`113`	`+ aria-label="C Ionian (Major)"`
`114`	`114`	`class="chip chip--active chip--round"`
`115`	`115`	`href="/c/natural/ionian"`
`116`	`116`	`>`
@@ -122,7 +122,7 @@ exports[`HomeIndexComponent should create 1`] = `
`122`	`122`	`selectedcolor="default"`
`123`	`123`	`>`
`124`	`124`	`<a`
`125`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`125`	`+ aria-label="D Ionian (Major)"`
`126`	`126`	`class="chip chip--round"`
`127`	`127`	`href="/d/natural/ionian"`
`128`	`128`	`>`
@@ -134,7 +134,7 @@ exports[`HomeIndexComponent should create 1`] = `
`134`	`134`	`selectedcolor="default"`
`135`	`135`	`>`
`136`	`136`	`<a`
`137`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`137`	`+ aria-label="E Ionian (Major)"`
`138`	`138`	`class="chip chip--round"`
`139`	`139`	`href="/e/natural/ionian"`
`140`	`140`	`>`
@@ -146,7 +146,7 @@ exports[`HomeIndexComponent should create 1`] = `
`146`	`146`	`selectedcolor="default"`
`147`	`147`	`>`
`148`	`148`	`<a`
`149`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`149`	`+ aria-label="F Ionian (Major)"`
`150`	`150`	`class="chip chip--round"`
`151`	`151`	`href="/f/natural/ionian"`
`152`	`152`	`>`
@@ -158,7 +158,7 @@ exports[`HomeIndexComponent should create 1`] = `
`158`	`158`	`selectedcolor="default"`
`159`	`159`	`>`
`160`	`160`	`<a`
`161`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`161`	`+ aria-label="G Ionian (Major)"`
`162`	`162`	`class="chip chip--round"`
`163`	`163`	`href="/g/natural/ionian"`
`164`	`164`	`>`
@@ -177,7 +177,7 @@ exports[`HomeIndexComponent should create 1`] = `
`177`	`177`	`selectedcolor="grey"`
`178`	`178`	`>`
`179`	`179`	`<a`
`180`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`180`	`+ aria-label="C Ionian (Major)"`
`181`	`181`	`class="chip chip--active chip--round chip--grey"`
`182`	`182`	`href="/c/natural/ionian"`
`183`	`183`	`>`
@@ -190,7 +190,7 @@ exports[`HomeIndexComponent should create 1`] = `
`190`	`190`	`selectedcolor="grey"`
`191`	`191`	`>`
`192`	`192`	`<a`
`193`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`193`	`+ aria-label="C sharp Ionian (Major)"`
`194`	`194`	`class="chip chip--round chip--grey"`
`195`	`195`	`href="/c/sharp/ionian"`
`196`	`196`	`>`
@@ -217,7 +217,7 @@ exports[`HomeIndexComponent should create 1`] = `
`217`	`217`	`selectedcolor="default"`
`218`	`218`	`>`
`219`	`219`	`<a`
`220`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`220`	`+ aria-label="C Ionian (Major)"`
`221`	`221`	`class="chip chip--active"`
`222`	`222`	`href="/c/natural/ionian"`
`223`	`223`	`>`
@@ -228,7 +228,7 @@ exports[`HomeIndexComponent should create 1`] = `
`228`	`228`	`selectedcolor="default"`
`229`	`229`	`>`
`230`	`230`	`<a`
`231`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`231`	`+ aria-label="C Dorian"`
`232`	`232`	`class="chip"`
`233`	`233`	`href="/c/natural/dorian"`
`234`	`234`	`>`
@@ -239,7 +239,7 @@ exports[`HomeIndexComponent should create 1`] = `
`239`	`239`	`selectedcolor="default"`
`240`	`240`	`>`
`241`	`241`	`<a`
`242`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`242`	`+ aria-label="C Phrygian"`
`243`	`243`	`class="chip"`
`244`	`244`	`href="/c/natural/phrygian"`
`245`	`245`	`>`
@@ -250,7 +250,7 @@ exports[`HomeIndexComponent should create 1`] = `
`250`	`250`	`selectedcolor="default"`
`251`	`251`	`>`
`252`	`252`	`<a`
`253`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`253`	`+ aria-label="C Lydian"`
`254`	`254`	`class="chip"`
`255`	`255`	`href="/c/natural/lydian"`
`256`	`256`	`>`
@@ -261,7 +261,7 @@ exports[`HomeIndexComponent should create 1`] = `
`261`	`261`	`selectedcolor="default"`
`262`	`262`	`>`
`263`	`263`	`<a`
`264`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`264`	`+ aria-label="C Mixolydian"`
`265`	`265`	`class="chip"`
`266`	`266`	`href="/c/natural/mixolydian"`
`267`	`267`	`>`
@@ -272,7 +272,7 @@ exports[`HomeIndexComponent should create 1`] = `
`272`	`272`	`selectedcolor="default"`
`273`	`273`	`>`
`274`	`274`	`<a`
`275`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`275`	`+ aria-label="C Aolian (Minor)"`
`276`	`276`	`class="chip"`
`277`	`277`	`href="/c/natural/aolian"`
`278`	`278`	`>`
@@ -283,7 +283,7 @@ exports[`HomeIndexComponent should create 1`] = `
`283`	`283`	`selectedcolor="default"`
`284`	`284`	`>`
`285`	`285`	`<a`
`286`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`286`	`+ aria-label="C Locrian"`
`287`	`287`	`class="chip"`
`288`	`288`	`href="/c/natural/locrian"`
`289`	`289`	`>`
@@ -294,7 +294,7 @@ exports[`HomeIndexComponent should create 1`] = `
`294`	`294`	`selectedcolor="default"`
`295`	`295`	`>`
`296`	`296`	`<a`
`297`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`297`	`+ aria-label="C Harmonic Minor"`
`298`	`298`	`class="chip"`
`299`	`299`	`href="/c/natural/harmonicMinor"`
`300`	`300`	`>`
@@ -305,7 +305,7 @@ exports[`HomeIndexComponent should create 1`] = `
`305`	`305`	`selectedcolor="default"`
`306`	`306`	`>`
`307`	`307`	`<a`
`308`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`308`	`+ aria-label="C Phrygian Dominant"`
`309`	`309`	`class="chip"`
`310`	`310`	`href="/c/natural/phrygianDominant"`
`311`	`311`	`>`
@@ -316,7 +316,7 @@ exports[`HomeIndexComponent should create 1`] = `
`316`	`316`	`selectedcolor="default"`
`317`	`317`	`>`
`318`	`318`	`<a`
`319`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`319`	`+ aria-label="C Major Pentatonic"`
`320`	`320`	`class="chip"`
`321`	`321`	`href="/c/natural/majorPentatonic"`
`322`	`322`	`>`
@@ -327,7 +327,7 @@ exports[`HomeIndexComponent should create 1`] = `
`327`	`327`	`selectedcolor="default"`
`328`	`328`	`>`
`329`	`329`	`<a`
`330`		`- aria-label="note \| createChipLink: noteExtender: mode"`
	`330`	`+ aria-label="C Minor Pentatonic"`
`331`	`331`	`class="chip"`
`332`	`332`	`href="/c/natural/minorPentatonic"`
`333`	`333`	`>`
@@ -1057,11 +1057,10 @@ exports[`HomeIndexComponent should create 1`] = `
`1057`	`1057`	`</span>`
`1058`	`1058`	`</div>`
`1059`	`1059`	`<button`
`1060`		`- aria-checked="false"`
`1061`	`1060`	`aria-controls="scaleMapInfo"`
	`1061`	`+ aria-expanded="false"`
`1062`	`1062`	`aria-label="Scale Degrees Info Toggle"`
`1063`	`1063`	`class="scaleDegrees__toggle"`
`1064`		`- role="switch"`
`1065`	`1064`	`type="button"`
`1066`	`1065`	`>`
`1067`	`1066`	`What is this?`
@@ -1381,20 +1380,28 @@ exports[`HomeIndexComponent should create 1`] = `
`1381`	`1380`	`class="videoLoader__video"`
`1382`	`1381`	`>`
`1383`	`1382`
`1384`		`-`
`1385`		`- <app-video-browser`
	`1383`	`+ <app-video-server`
`1386`	`1384`	`class="videoLoader__content"`
`1387`	`1385`	`>`
`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`	`+`
`1398`	`1405`	`</div>`
`1399`	`1406`	`</div>`
`1400`	`1407`	`</app-video-loader>`