activated typescript strict mode

src/app/modules/presentation/monitor/legal/legal.component.html

@@ -1,12 +1,14 @@
-<p *ngIf="song.artist">{{ song.artist }}</p>
-<p *ngIf="song.label">{{ song.label }}</p>
-<p *ngIf="song.termsOfUse" class="terms-of-use">{{ song.termsOfUse }}</p>
-<p *ngIf="song.origin">{{ song.origin }}</p>
+<ng-container *ngIf="song">
+  <p *ngIf="song.artist">{{ song.artist }}</p>
+  <p *ngIf="song.label">{{ song.label }}</p>
+  <p *ngIf="song.termsOfUse" class="terms-of-use">{{ song.termsOfUse }}</p>
+  <p *ngIf="song.origin">{{ song.origin }}</p>
 
-<div *ngIf="song.legalOwnerId">
-  <p *ngIf="song.legalOwner === 'CCLI' && config">
-    CCLI-Liednummer {{ song.legalOwnerId }}, CCLI-Lizenznummer
-    {{ config.ccliLicenseId }}
-  </p>
-  <p *ngIf="song.legalOwner !== 'CCLI'">Liednummer {{ song.legalOwnerId }}</p>
-</div>
+  <div *ngIf="song.legalOwnerId">
+    <p *ngIf="song.legalOwner === 'CCLI' && config">
+      CCLI-Liednummer {{ song.legalOwnerId }}, CCLI-Lizenznummer
+      {{ config.ccliLicenseId }}
+    </p>
+    <p *ngIf="song.legalOwner !== 'CCLI'">Liednummer {{ song.legalOwnerId }}</p>
+  </div>
+</ng-container>

src/app/modules/presentation/monitor/legal/legal.component.ts

@@ -8,6 +8,6 @@ import {Config} from '../../../../services/config';
   styleUrls: ['./legal.component.less'],
 })
 export class LegalComponent {
-  @Input() public song: Song;
-  @Input() public config: Config;
+  @Input() public song: Song | null = null;
+  @Input() public config: Config | null = null;
 }

src/app/modules/presentation/monitor/monitor.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="song" [style.font-size.px]="zoom" class="fullscreen background">
+<div *ngIf="song && showType" [style.font-size.px]="zoom" class="fullscreen background">
   <div
     @songSwitch
     [class.blur]="songId === 'title'"

src/app/modules/presentation/monitor/monitor.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {distinctUntilChanged, map, switchMap, tap} from 'rxjs/operators';
+import {distinctUntilChanged, filter, map, switchMap, tap} from 'rxjs/operators';
 import {ShowService} from '../../shows/services/show.service';
 import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
@@ -10,6 +10,7 @@ import {ConfigService} from '../../../services/config.service';
 import {songSwitch} from '../../../widget-modules/components/song-text/animation';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Show} from '../../shows/services/show';
+import {GlobalSettings} from '../../../services/global-settings';
 
 @Component({
   selector: 'app-monitor',
@@ -18,14 +19,14 @@ import {Show} from '../../shows/services/show';
   animations: [songSwitch],
 })
 export class MonitorComponent implements OnInit {
-  public song: Song;
-  public zoom: number;
-  public currentShowId: string;
-  public songId: string;
-  public index: number;
-  public showType: string;
-  public date: Date;
-  public config$: Observable<Config>;
+  public song: Song | null = null;
+  public zoom = 10;
+  public currentShowId: string | null = null;
+  public songId: string | null = null;
+  public index: number | null = null;
+  public showType: string | null = null;
+  public date: Date | null = null;
+  public config$: Observable<Config | null>;
 
   // private sections: Section[];
 
@@ -42,18 +43,28 @@ export class MonitorComponent implements OnInit {
   public ngOnInit(): void {
     this.globalSettingsService.get$
       .pipe(
+        filter(_ => !!_),
+        map(_ => _ as GlobalSettings),
         map(_ => _.currentShow),
         distinctUntilChanged(),
-        tap(_ => (this.currentShowId = _)),
-        switchMap(_ => this.showService.read$(_)),
-        tap(_ => (this.showType = _.showType)),
-        tap(_ => (this.date = _.date.toDate())),
-        tap(_ => (this.songId = _.presentationSongId)),
-        tap(_ => (this.index = _.presentationSection)),
-        tap(_ => (this.zoom = _.presentationZoom ?? 30)),
-        switchMap((_: Show) => this.songService.read$(_.presentationSongId))
+        tap(_ => (this.currentShowId = _))
       )
-      .subscribe((_: Song) => {
+      .pipe(
+        switchMap(_ => this.showService.read$(_)),
+        filter(_ => !!_),
+        map(_ => _ as Show),
+        tap<Show>(_ => (this.showType = _.showType)),
+        tap<Show>(_ => (this.date = _.date.toDate())),
+        tap<Show>(_ => (this.songId = _.presentationSongId)),
+        tap<Show>(_ => (this.index = _.presentationSection)),
+        tap<Show>(_ => (this.zoom = _.presentationZoom ?? 30))
+      )
+      .pipe(
+        switchMap((_: Show) => this.songService.read$(_.presentationSongId)),
+        filter(_ => !!_),
+        map(_ => _ as Song)
+      )
+      .subscribe(_ => {
         this.song = _;
         // this.sections = this.textRenderingService.parse(_.text, null);
       });

src/app/modules/presentation/remote/remote.component.html

@@ -33,7 +33,7 @@
       </div>
 
       <div *ngFor="let song of presentationSongs" @fade class="song">
-        <div
+        <div *ngIf="show"
           [class.active]="show.presentationSongId === song.id"
           class="title song-part"
         >

src/app/modules/presentation/remote/remote.component.ts

@@ -9,11 +9,12 @@ import {ShowService} from '../../shows/services/show.service';
 import {ShowSong} from '../../shows/services/show-song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {FormControl} from '@angular/forms';
-import {distinctUntilChanged, map} from 'rxjs/operators';
+import {distinctUntilChanged, filter, map} from 'rxjs/operators';
 import {fade} from '../../../animations';
 import {delay} from '../../../services/delay';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Section} from '../../songs/services/section';
+import {GlobalSettings} from '../../../services/global-settings';
 
 export interface PresentationSong {
   id: string;
@@ -29,11 +30,11 @@ export interface PresentationSong {
 })
 export class RemoteComponent {
   public shows$: Observable<Show[]>;
-  public show: Show;
-  public showSongs: ShowSong[];
-  public songs: Song[];
-  public presentationSongs: PresentationSong[];
-  public currentShowId: string;
+  public show: Show | null = null;
+  public showSongs: ShowSong[] = [];
+  public songs: Song[] = [];
+  public presentationSongs: PresentationSong[] = [];
+  public currentShowId: string | null = null;
   public progress = false;
 
   public faDesktop = faDesktop;
@@ -51,6 +52,8 @@ export class RemoteComponent {
 
     globalSettingsService.get$
       .pipe(
+        filter(_ => !!_),
+        map(_ => _ as GlobalSettings),
         map(_ => _.currentShow),
         distinctUntilChanged()
       )
@@ -88,13 +91,14 @@ export class RemoteComponent {
   }
 
   public async onSectionClick(id: string, index: number): Promise<void> {
-    await this.showService.update$(this.currentShowId, {
-      presentationSongId: id,
-      presentationSection: index,
-    });
+    if (this.currentShowId != null)
+      await this.showService.update$(this.currentShowId, {
+        presentationSongId: id,
+        presentationSection: index,
+      });
   }
 
   public async onZoom(zoom: number): Promise<void> {
-    await this.showService.update$(this.currentShowId, {presentationZoom: zoom});
+    if (this.currentShowId != null) await this.showService.update$(this.currentShowId, {presentationZoom: zoom});
   }
 }