linting

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

@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component, Input, inject} from '@angular/core';
-import {ReactiveFormsModule, UntypedFormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {filterSong} from '../../../services/filter.helper';
 import {MatFormField, MatLabel, MatOption, MatSelect, MatSelectChange} from '@angular/material/select';
 import {Song} from '../../../modules/songs/services/song';
@@ -25,7 +25,7 @@ export class AddSongComponent {
   @Input() public showSongs: ShowSong[] | null = null;
   @Input() public show: Show | null = null;
   @Input() public addedLive = false;
-  public filteredSongsControl = new UntypedFormControl();
+  public filteredSongsControl = new FormControl<string>('', {nonNullable: true});
 
   public filteredSongs(): Song[] {
     if (!this.songs) return [];
@@ -44,7 +44,7 @@ export class AddSongComponent {
         return 0;
       });
 
-    const filterValue = this.filteredSongsControl.value as string;
+    const filterValue = this.filteredSongsControl.value;
     return filterValue ? songs.filter(_ => filterSong(_, filterValue)) : songs;
   }
 

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts

@@ -1,4 +1,5 @@
-import {Component, inject} from '@angular/core';
+import {Component, DestroyRef, inject} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
@@ -10,13 +11,14 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 })
 export class FilterComponent {
   private router = inject(Router);
+  private destroyRef = inject(DestroyRef);
 
   public value = '';
 
   public constructor() {
     const activatedRoute = inject(ActivatedRoute);
 
-    activatedRoute.queryParams.subscribe((params: Params) => {
+    activatedRoute.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params: Params) => {
       const typedParams = params as {q: string};
       if (typedParams.q) this.value = typedParams.q;
     });

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

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren, inject} from '@angular/core';
+import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, ViewChildren, inject} from '@angular/core';
 import {TextRenderingService} from '../../../modules/songs/services/text-rendering.service';
 import {faGripLines} from '@fortawesome/free-solid-svg-icons';
 import {songSwitch} from './animation';
@@ -27,7 +27,7 @@ interface DisplaySegment {
   animations: [songSwitch],
   imports: [MatIconButton, FaIconComponent],
 })
-export class SongTextComponent implements OnInit {
+export class SongTextComponent implements OnInit, OnDestroy {
   private textRenderingService = inject(TextRenderingService);
   private elRef = inject<ElementRef<HTMLElement>>(ElementRef);
   private cRef = inject(ChangeDetectorRef);
@@ -47,6 +47,7 @@ export class SongTextComponent implements OnInit {
   private invalidChordIssuesByLine = new Map<number, ChordValidationIssue[]>();
   private iText = '';
   private iTranspose: TransposeMode | null = null;
+  private offsetIntervalId: ReturnType<typeof setInterval> | null = null;
 
   @Input()
   public set chordMode(value: ChordMode) {
@@ -73,7 +74,7 @@ export class SongTextComponent implements OnInit {
   }
 
   public ngOnInit(): void {
-    setInterval(() => {
+    this.offsetIntervalId = setInterval(() => {
       if (!this.fullscreen || this.index === -1 || !this.viewSections?.toArray()[this.index]) {
         this.offset = 0;
         this.cRef.markForCheck();
@@ -84,6 +85,12 @@ export class SongTextComponent implements OnInit {
     }, 100);
   }
 
+  public ngOnDestroy(): void {
+    if (this.offsetIntervalId) {
+      clearInterval(this.offsetIntervalId);
+    }
+  }
+
   public getLines(section: Section): Line[] {
     return section.lines.filter(_ => {
       if (_.type !== LineType.chord) {

src/app/widget-modules/guards/role.guard.ts

@@ -2,7 +2,7 @@ import {Injectable, inject} from '@angular/core';
 import {ActivatedRouteSnapshot, Router, UrlTree} from '@angular/router';
 import {Observable} from 'rxjs';
 import {UserService} from '../../services/user/user.service';
-import {map} from 'rxjs/operators';
+import {map, take} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -18,8 +18,11 @@ export class RoleGuard {
     }
 
     return this.userService.user$.pipe(
+      take(1),
       map(user => {
-        if (!user) return false;
+        if (!user) {
+          return this.router.createUrlTree(['brand', 'new-user']);
+        }
         const roles = user.role?.split(';') ?? [];
         if (roles.indexOf('admin') !== -1) {
           return true;

src/app/widget-modules/pipes/section-type-translator/section-type.pipe.ts

@@ -13,6 +13,8 @@ export class SectionTypePipe implements PipeTransform {
         return 'Refrain';
       case SectionType.Bridge:
         return 'Bridge';
+      case SectionType.Comment:
+        return 'Kommentar';
     }
   }
 }