Improved audit results, lazy load youtube

whitep4nth3r · Jun 4, 2020 · 5e6e438 · 5e6e438
1 parent b53a2df
commit 5e6e438
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 63 deletions.
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/...tonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap b/...tonator-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