update tslint -> eslint

src/app/widget-modules/components/song-text/animation.ts

@@ -1,20 +1,13 @@
 import {animate, state, style, transition, trigger} from '@angular/animations';
 
-export const songSwitch =     // the fade-in/fade-out animation.
-  trigger('songSwitch', [
+export const songSwitch = trigger('songSwitch', [
+  // the fade-in/fade-out animation.
+  // the "in" style determines the "resting" state of the element when it is visible.
+  state('in', style({opacity: 1})),
 
-    // the "in" style determines the "resting" state of the element when it is visible.
-    state('in', style({opacity: 1})),
+  // fade in when created. this could also be written as transition('void => *')
+  transition(':enter', [style({opacity: 0}), animate(1200, style({opacity: 0})), animate(1200, style({opacity: 1}))]),
 
-    // fade in when created. this could also be written as transition('void => *')
-    transition(':enter', [
-      style({opacity: 0}),
-      animate(1200, style({opacity: 0})),
-      animate(1200, style({opacity: 1})),
-    ]),
-
-    // fade out when destroyed. this could also be written as transition('void => *')
-    transition(':leave',
-      animate(1200, style({opacity: 0}))
-    )
-  ]);
+  // fade out when destroyed. this could also be written as transition('void => *')
+  transition(':leave', animate(1200, style({opacity: 0}))),
+]);

src/app/widget-modules/components/song-text/song-text.component.html

@@ -1,33 +1,70 @@
-<div (click)="onClick()" *ngIf="sections && !fullscreen" [class.chords]="_chordMode!=='hide'"
-     class="song-text">
-
-  <button (click)="onChordClick()" *ngIf="showSwitch" class="menu" mat-icon-button>
+<div
+  (click)="onClick()"
+  *ngIf="sections && !fullscreen"
+  [class.chords]="iChordMode !== 'hide'"
+  class="song-text"
+>
+  <button
+    (click)="onChordClick()"
+    *ngIf="showSwitch"
+    class="menu"
+    mat-icon-button
+  >
     <fa-icon [icon]="faLines"></fa-icon>
   </button>
 
-
   <div [class.offset]="fullscreen" [style.top.px]="offset + 50">
-    <div #section *ngFor="let section of sections; let i = index" [class.chorus]="section.type===1" class="section">
-      <div *ngFor="let line of getLines(section)" [class.chord]="line.type===0" [class.disabled]="checkDisabled(i)"
-           class="line">{{line.text}}</div>
+    <div
+      #section
+      *ngFor="let section of sections; let i = index"
+      [class.chorus]="section.type === 1"
+      class="section"
+    >
+      <div
+        *ngFor="let line of getLines(section)"
+        [class.chord]="line.type === 0"
+        [class.disabled]="checkDisabled(i)"
+        class="line"
+      >
+        {{ line.text }}
+      </div>
     </div>
   </div>
 
   <ng-content></ng-content>
 </div>
 
-<div (click)="onClick()" *ngIf="sections && fullscreen" [@songSwitch]="sections" [class.chords]="_chordMode!=='hide'"
-     class="song-text">
-
-  <button (click)="onChordClick()" *ngIf="showSwitch" class="menu" mat-icon-button>
+<div
+  (click)="onClick()"
+  *ngIf="sections && fullscreen"
+  [@songSwitch]="sections"
+  [class.chords]="iChordMode !== 'hide'"
+  class="song-text"
+>
+  <button
+    (click)="onChordClick()"
+    *ngIf="showSwitch"
+    class="menu"
+    mat-icon-button
+  >
     <fa-icon [icon]="faLines"></fa-icon>
   </button>
 
-
   <div [class.offset]="fullscreen" [style.top.px]="offset + 50">
-    <div #section *ngFor="let section of sections; let i = index" [class.chorus]="section.type===1" class="section">
-      <div *ngFor="let line of getLines(section)" [class.chord]="line.type===0" [class.disabled]="checkDisabled(i)"
-           class="line">{{line.text}}</div>
+    <div
+      #section
+      *ngFor="let section of sections; let i = index"
+      [class.chorus]="section.type === 1"
+      class="section"
+    >
+      <div
+        *ngFor="let line of getLines(section)"
+        [class.chord]="line.type === 0"
+        [class.disabled]="checkDisabled(i)"
+        class="line"
+      >
+        {{ line.text }}
+      </div>
     </div>
   </div>
 

src/app/widget-modules/components/song-text/song-text.component.spec.ts

@@ -6,12 +6,13 @@ describe('SongTextComponent', () => {
   let component: SongTextComponent;
   let fixture: ComponentFixture<SongTextComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [SongTextComponent]
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        declarations: [SongTextComponent],
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SongTextComponent);
@@ -20,6 +21,6 @@ describe('SongTextComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/widget-modules/components/song-text/song-text.component.ts

@@ -23,18 +23,16 @@ export class SongTextComponent implements OnInit {
   @Input() public showSwitch = false;
   @Input() public transpose: TransposeMode = null;
   @Output() public chordModeChanged = new EventEmitter<ChordMode>();
-  @ViewChildren('section') viewSections: QueryList<ElementRef>;
+  @ViewChildren('section') public viewSections: QueryList<ElementRef<HTMLElement>>;
   public faLines = faGripLines;
   public offset = 0;
+  public iChordMode: ChordMode = 'hide';
 
-  constructor(private textRenderingService: TextRenderingService, private elRef: ElementRef) {
-  }
-
-  public _chordMode: ChordMode = 'hide';
+  public constructor(private textRenderingService: TextRenderingService, private elRef: ElementRef<HTMLElement>) {}
 
   @Input()
   public set chordMode(value: ChordMode) {
-    this._chordMode = value ?? 'hide';
+    this.iChordMode = value ?? 'hide';
   }
 
   @Input()
@@ -42,23 +40,20 @@ export class SongTextComponent implements OnInit {
     this.sections = null;
     this.offset = 0;
     if (this.fullscreen) {
-      setTimeout(() =>
-        this.sections = this.textRenderingService.parse(value, this.transpose).sort((a, b) => a.type - b.type), 100);
+      setTimeout(() => (this.sections = this.textRenderingService.parse(value, this.transpose).sort((a, b) => a.type - b.type)), 100);
     } else {
       this.sections = this.textRenderingService.parse(value, this.transpose).sort((a, b) => a.type - b.type);
     }
   }
 
-
   public ngOnInit(): void {
     setInterval(() => {
-        if (!this.fullscreen || this.index === -1 || !this.viewSections.toArray()[this.index]) {
-          this.offset = 0;
-          return;
-        }
-        this.offset = -this.viewSections.toArray()[this.index].nativeElement.offsetTop;
+      if (!this.fullscreen || this.index === -1 || !this.viewSections.toArray()[this.index]) {
+        this.offset = 0;
+        return;
       }
-      , 100);
+      this.offset = -this.viewSections.toArray()[this.index].nativeElement.offsetTop;
+    }, 100);
   }
 
   public getLines(section: Section): Line[] {
@@ -67,7 +62,7 @@ export class SongTextComponent implements OnInit {
         return true;
       }
 
-      switch (this._chordMode) {
+      switch (this.iChordMode) {
         case 'show':
           return true;
         case 'hide':
@@ -86,7 +81,8 @@ export class SongTextComponent implements OnInit {
   }
 
   public onClick(): void {
-    scrollTo(0, this.elRef.nativeElement.offsetTop - 20);
+    const nativeElement = this.elRef.nativeElement;
+    scrollTo(0, nativeElement.offsetTop - 20);
   }
 
   public checkDisabled(i: number): boolean {
@@ -94,7 +90,7 @@ export class SongTextComponent implements OnInit {
   }
 
   private getNextChordMode(): ChordMode {
-    switch (this._chordMode) {
+    switch (this.iChordMode) {
       case 'show':
         return 'hide';
       case 'hide':

src/app/widget-modules/components/song-text/song-text.module.ts

@@ -4,15 +4,9 @@ import {SongTextComponent} from './song-text.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MatButtonModule} from '@angular/material/button';
 
-
 @NgModule({
   declarations: [SongTextComponent],
   exports: [SongTextComponent],
-  imports: [
-    CommonModule,
-    FontAwesomeModule,
-    MatButtonModule
-  ]
+  imports: [CommonModule, FontAwesomeModule, MatButtonModule],
 })
-export class SongTextModule {
-}
+export class SongTextModule {}