adding presentation background

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

@@ -5,7 +5,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background: #000c;
+  background: #000e;
   padding: 50px;
   box-sizing: border-box;
   box-shadow: 0px 0px 26px 10px #000;

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

@@ -1,7 +1,17 @@
+<div class="fullscreen background"></div>
 <div *ngIf="song && showType" [style.font-size.px]="zoom" class="fullscreen background">
+
+  <div class="bg-blue fullscreen bg-image" [class.visible]="presentationBackground==='blue'"></div>
+  <div class="bg-green fullscreen bg-image" [class.visible]="presentationBackground==='green'"></div>
+  <div class="bg-leder fullscreen bg-image" [class.visible]="presentationBackground==='leder'"></div>
+  <div class="bg-praise fullscreen bg-image" [class.visible]="presentationBackground==='praise'"></div>
+  <div class="bg-bible fullscreen bg-image" [class.visible]="presentationBackground==='bible'"></div>
+
+
   <div
     [@songSwitch]="songId"
     [class.blur]="songId === 'title'"
+    [class.no-logo]="presentationBackground!=='none'"
     [class.hide]="songId !== 'title' && songId !== 'empty'"
     class="start fullscreen logo"
   >

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

@@ -21,7 +21,54 @@
 
   flex-direction: column;
   justify-content: space-between;
-  transition: 300ms all ease-in-out;
+  transition: 30ms all ease-in-out;
+}
+
+.bg-image {
+  z-index: 0;
+  opacity: 0;
+  background-size: cover;
+  transition: 5000ms opacity ease-in-out;
+}
+
+.bg-blue {
+  background-image: url("/assets/bg-dark-blue.jpg");
+  filter: blur(10px);
+  &.visible {
+    opacity: 0.5;
+  }
+}
+
+.bg-green {
+  background-image: url("/assets/bg-dark-green.jpg");
+  filter: blur(5px);
+  &.visible {
+    opacity: 0.9;
+  }
+}
+
+.bg-leder {
+  background-image: url("/assets/bg-leder.jpg");
+  filter: blur(5px);
+  &.visible {
+    opacity: 0.4;
+  }
+}
+
+.bg-praise {
+  background-image: url("/assets/bg-praise.jpg");
+  filter: blur(8px);
+  &.visible {
+    opacity: 0.2;
+  }
+}
+
+.bg-bible {
+  background-image: url("/assets/bg-bible.jpg");
+  filter: blur(8px);
+  &.visible {
+    opacity: 0.2;
+  }
 }
 
 .start {
@@ -56,4 +103,7 @@
   filter: blur(30px);
   opacity: 0.1;
   transform: scale(0.8) translateY(-10%);
+  &.no-logo {
+    opacity: 0;
+  }
 }

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

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {distinctUntilChanged, filter, map, switchMap, tap} from 'rxjs/operators';
+import {debounceTime, 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';
@@ -9,7 +9,7 @@ import {Observable} from 'rxjs';
 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 {PresentationBackground, Show} from '../../shows/services/show';
 import {GlobalSettings} from '../../../services/global-settings';
 import {ShowSongService} from '../../shows/services/show-song.service';
 
@@ -28,6 +28,7 @@ export class MonitorComponent implements OnInit {
   public showType: string | null = null;
   public date: Date | null = null;
   public config$: Observable<Config | null>;
+  public presentationBackground: PresentationBackground = 'none';
 
   public constructor(
     private showService: ShowService,
@@ -43,6 +44,7 @@ export class MonitorComponent implements OnInit {
   public ngOnInit(): void {
     this.globalSettingsService.get$
       .pipe(
+        debounceTime(100),
         filter(_ => !!_),
         map(_ => _ as GlobalSettings),
         map(_ => _.currentShow),
@@ -53,16 +55,15 @@ export class MonitorComponent implements OnInit {
         switchMap(_ => this.showService.read$(_)),
         filter(_ => !!_),
         map(_ => _ as Show),
-        tap<Show>(_ => (this.showType = _.showType)),
-        tap<Show>(_ => (this.date = _.date.toDate())),
         tap<Show>(_ => {
+          this.showType = _.showType;
+          this.date = _.date.toDate();
+          this.index = _.presentationSection;
+          this.presentationBackground = _.presentationBackground;
+          this.zoom = _.presentationZoom ?? 30;
           if (this.songId !== _.presentationSongId) this.songId = 'empty';
           setTimeout(() => (this.songId = _.presentationSongId), 300);
         }),
-        tap<Show>(_ => (this.index = _.presentationSection)),
-        tap<Show>(_ => (this.zoom = _.presentationZoom ?? 30))
-      )
-      .pipe(
         switchMap((_: Show) => this.showSongService.read$(_.id, _.presentationSongId)),
         filter(_ => !!_),
         map(_ => _ as Song)

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

@@ -15,7 +15,8 @@
     </mat-form-field>
 
     <ng-container *ngIf="!progress">
-      <div *ngIf="show" class="song-parts padding-bottom">
+      <div class="song">
+        <div *ngIf="show" class="song-parts">
           <div
             (click)="onSectionClick('title', -1)"
             [class.active]="show.presentationSongId === 'title'"
@@ -31,6 +32,7 @@
             <div class="head">Leer</div>
           </div>
         </div>
+      </div>
 
       <div *ngFor="let song of presentationSongs; trackBy: trackBy" @fade class="song">
         <div *ngIf="show"
@@ -60,9 +62,26 @@
       </div>
 
       <div *ngIf="show" class="div-bottom">
-        <a routerLink="/presentation/monitor" target="_blank">
+
+        <button routerLink="/presentation/monitor" mat-button>
           <fa-icon [icon]="faDesktop"></fa-icon>
-        </a>
+          Präsentation starten
+        </button>
+
+
+        <mat-form-field appearance="outline">
+          <mat-label>Hintergrund</mat-label>
+          <mat-select
+            [ngModel]="show.presentationBackground"
+            (ngModelChange)="onBackground($event)">
+            <mat-option value="none">kein Hintergrund</mat-option>
+            <mat-option value="blue">Sternenhimmel</mat-option>
+            <mat-option value="green">Blätter</mat-option>
+            <mat-option value="leder">Leder</mat-option>
+            <mat-option value="praise">Lobpreis</mat-option>
+            <mat-option value="bible">Bibel</mat-option>
+          </mat-select>
+        </mat-form-field>
 
         <mat-slider
           (ngModelChange)="onZoom($event)"
@@ -72,8 +91,10 @@
           [step]="2"
           [thumbLabel]="true"
           color="primary"
+          class="zoom-slider"
         >
         </mat-slider>
+
       </div>
 
       <app-add-song

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

@@ -1,12 +1,20 @@
 @import "../../../../styles/shadow";
 
 .song {
-  background: #fff5;
+  background: #fff;
   width: 100%;
   padding: 10px;
   border-radius: 8px;
   margin-bottom: 10px;
   box-sizing: border-box;
+
+  @media screen and (max-width: 860px) {
+    width: 100vw;
+    padding: 10px 20px;
+    border-radius: 0;
+    box-sizing: border-box;
+    margin: 0 -20px 10px;
+  }
 }
 
 .title {
@@ -35,19 +43,23 @@
   overflow: hidden;
   transition: 300ms all ease-in-out;
   cursor: pointer;
-  // .card-1;
+  outline: 0.5px solid #f4f4f4;
 
   &:hover {
     .card-1;
+    outline: 0px solid transparent;
   }
 
   &.active {
     .card-2;
+    outline: 0px solid transparent;
 
     .head {
       background: #4286f4;
       color: white;
-      border-bottom: 0.5px solid #4286f4;
+    }
+
+    .fragment {
     }
   }
 }
@@ -55,7 +67,6 @@
 .head {
   transition: 300ms all ease-in-out;
   background: #f4f4f4;
-  border-bottom: 0.5px solid #ddd;
   padding: 10px;
   font-weight: bold;
 }
@@ -66,9 +77,21 @@
 
 .div-bottom {
   display: grid;
-  grid-template-columns: 60px auto;
+  gap: 20px;
+  grid-template-columns: min-content min-content auto;
+
+  @media screen and (max-width: 860px) {
+    gap: 0;
+    grid-template-columns: auto;
+  }
+
+  ::ng-deep.mat-form-field-wrapper {
+    margin: 0;
+    padding: 0;
+  }
 }
 
+
 .padding-bottom {
   padding-bottom: 20px;
 }
@@ -77,6 +100,7 @@ a {
   font-size: 30px;
   padding: 10px;
   transition: all 300ms ease-in-out;
+
   &:hover {
     color: #4286f4;
   }

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

@@ -1,15 +1,15 @@
 import {Component} from '@angular/core';
 import {combineLatest, Observable} from 'rxjs';
-import {Show} from '../../shows/services/show';
+import {PresentationBackground, Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
 import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
-import {faDesktop} from '@fortawesome/free-solid-svg-icons/faDesktop';
+import {faDesktop} from '@fortawesome/free-solid-svg-icons';
 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, filter, map} from 'rxjs/operators';
+import {debounceTime, distinctUntilChanged, filter, map} from 'rxjs/operators';
 import {fade} from '../../../animations';
 import {delay} from '../../../services/delay';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
@@ -72,12 +72,15 @@ export class RemoteComponent {
     this.progress = true;
     if (updateShow) {
       await this.showService.update$(change, {presentationSongId: 'empty'});
-      await delay(1200);
+      await delay(200);
       await this.globalSettingsService.set({currentShow: change});
       await this.showService.update$(change, {presentationSongId: 'title'});
     }
     this.currentShowId = change;
-    this.showService.read$(change).subscribe(show => {
+    this.showService
+      .read$(change)
+      .pipe(debounceTime(100))
+      .subscribe(show => {
         this.show = show;
       });
 
@@ -106,7 +109,11 @@ export class RemoteComponent {
       });
   }
 
-  public async onZoom(zoom: number): Promise<void> {
+  public async onZoom(presentationZoom: number): Promise<void> {
-    if (this.currentShowId != null) await this.showService.update$(this.currentShowId, {presentationZoom: zoom});
+    if (this.currentShowId != null) await this.showService.update$(this.currentShowId, {presentationZoom});
+  }
+
+  public async onBackground(presentationBackground: PresentationBackground): Promise<void> {
+    if (this.currentShowId != null) await this.showService.update$(this.currentShowId, {presentationBackground});
   }
 }

src/app/modules/shows/new/new.component.ts

@@ -5,7 +5,7 @@ import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
-import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
+import {faSave} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-new',
@@ -36,7 +36,7 @@ export class NewComponent implements OnInit {
       return;
     }
 
-    const id = await this.showService.new$(this.form.value);
+    const id = await this.showService.new$(this.form.value as Partial<Show>);
     await this.router.navigateByUrl(`/shows/${id ?? ''}`);
   }
 }

src/app/modules/shows/services/show.ts

@@ -1,6 +1,8 @@
 import firebase from 'firebase/compat/app';
 import Timestamp = firebase.firestore.Timestamp;
 
+export type PresentationBackground = 'none' | 'blue' | 'green' | 'leder' | 'praise';
+
 export interface Show {
   id: string;
   showType: string;
@@ -15,4 +17,5 @@ export interface Show {
   presentationSongId: string;
   presentationSection: number;
   presentationZoom: number;
+  presentationBackground: PresentationBackground;
 }

src/app/modules/shows/show/show.component.html

@@ -8,7 +8,7 @@
     <i>{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von
       <app-user-name [userId]="show.owner"></app-user-name>
     </i>
-    <p *ngIf="!show.published">
+    <p >
       <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
     </p>
     <div *ngIf="showSongs" class="song-list" cdkDropList [cdkDropListDisabled]="show.published"

src/app/modules/shows/show/show.component.ts

@@ -9,13 +9,7 @@ import {Song} from '../../songs/services/song';
 import {ShowSongService} from '../services/show-song.service';
 import {ShowSong} from '../services/show-song';
 import {DocxService} from '../services/docx.service';
-import {faBox} from '@fortawesome/free-solid-svg-icons/faBox';
+import {faBox, faBoxOpen, faExternalLinkAlt, faFileDownload, faLock, faUser, faUsers} from '@fortawesome/free-solid-svg-icons';
-import {faBoxOpen} from '@fortawesome/free-solid-svg-icons/faBoxOpen';
-import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
-import {faLock} from '@fortawesome/free-solid-svg-icons/faLock';
-import {faFileDownload} from '@fortawesome/free-solid-svg-icons/faFileDownload';
-import {faUser} from '@fortawesome/free-solid-svg-icons/faUser';
-import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers';
 import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 
 @Component({

src/app/modules/shows/show/song/song.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="iSong && iSong && show">
-  <div @fade *ngIf="show.published" class="title published">{{ iSong.title }}</div>
+  <div @fade *ngIf="show.published" class="title published">{{ iSong.key }} - {{ iSong.title }}</div>
 
   <div @fade *ngIf="!show.published" class="song">
     <span class="title">{{ iSong.title }}</span>
@@ -31,7 +31,7 @@
 
   <app-song-text
     (chordModeChanged)="onChordModeChanged($event)"
-    *ngIf="!edit && (showText || show.published)"
+    *ngIf="!edit && (showText )"
     [chordMode]="iSong.chordMode"
     [showSwitch]="!show.published"
     [text]="iSong.text"

src/app/modules/shows/show/song/song.component.ts

@@ -1,14 +1,11 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {faTrash} from '@fortawesome/free-solid-svg-icons/faTrash';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
 import {FormControl} from '@angular/forms';
 import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
 import {Show} from '../../services/show';
-import {faPenToSquare} from '@fortawesome/free-solid-svg-icons/faPenToSquare';
+import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons';
-import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
-import {faEraser} from '@fortawesome/free-solid-svg-icons/faEraser';
 import {fade} from '../../../../animations';
 
 @Component({

src/app/modules/songs/services/song.service.ts

@@ -8,15 +8,20 @@ import Timestamp = firebase.firestore.Timestamp;
 
 // declare let importCCLI: any;
 
+export type SongType = 'Praise' | 'Worship' | 'Misc';
+export type SongStatus = 'draft' | 'set' | 'final';
+export type SongLegalOwner = 'CCLI' | 'other';
+export type SongLegalType = 'open' | 'allowed';
+
 @Injectable({
   providedIn: 'root',
 })
 export class SongService {
-  public static TYPES = ['Praise', 'Worship'];
+  public static TYPES: SongType[] = ['Praise', 'Worship', 'Misc'];
-  public static STATUS = ['draft', 'set', 'final'];
+  public static STATUS: SongStatus[] = ['draft', 'set', 'final'];
 
-  public static LEGAL_OWNER = ['CCLI', 'other'];
+  public static LEGAL_OWNER: SongLegalOwner[] = ['CCLI', 'other'];
-  public static LEGAL_TYPE = ['open', 'allowed'];
+  public static LEGAL_TYPE: SongLegalType[] = ['open', 'allowed'];
 
   // private list: Song[];
 

src/app/modules/songs/services/song.ts

@@ -1,4 +1,5 @@
 import firebase from 'firebase/compat/app';
+import {SongLegalOwner, SongLegalType, SongStatus, SongType} from './song.service';
 import Timestamp = firebase.firestore.Timestamp;
 
 export interface Song {
@@ -10,12 +11,12 @@ export interface Song {
   tempo: number;
   text: string;
   title: string;
-  type: string;
+  type: SongType;
   flags: string;
-  status: string;
+  status: SongStatus;
 
-  legalType: string;
+  legalType: SongLegalType;
-  legalOwner: string;
+  legalOwner: SongLegalOwner;
   legalOwnerId: string;
 
   artist: string;

src/app/modules/songs/song-list/list-item/list-item.component.ts

@@ -1,8 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {Song} from '../../services/song';
-import {faBalanceScaleRight} from '@fortawesome/free-solid-svg-icons/faBalanceScaleRight';
+import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-solid-svg-icons';
-import {faPencilRuler} from '@fortawesome/free-solid-svg-icons/faPencilRuler';
-import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
 
 @Component({
   selector: 'app-list-item',

src/app/modules/songs/song/edit/edit-file/file/file.component.ts

@@ -1,7 +1,7 @@
 import {Component, Input} from '@angular/core';
 import {Observable} from 'rxjs';
 import {File} from '../../../../services/file';
-import {faTrashAlt} from '@fortawesome/free-solid-svg-icons/faTrashAlt';
+import {faTrashAlt} from '@fortawesome/free-solid-svg-icons';
 import {FileService} from '../../../../services/file.service';
 
 @Component({

src/app/modules/songs/song/edit/edit-song/edit-song.component.ts

@@ -8,9 +8,7 @@ import {first, map, switchMap} from 'rxjs/operators';
 import {KEYS} from '../../../services/key.helper';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {MatChipInputEvent} from '@angular/material/chips';
-import {faTimesCircle} from '@fortawesome/free-solid-svg-icons/faTimesCircle';
+import {faExternalLinkAlt, faSave, faTimesCircle} from '@fortawesome/free-solid-svg-icons';
-import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
-import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
 import {MatDialog} from '@angular/material/dialog';
 import {SaveDialogComponent} from './save-dialog/save-dialog.component';
 
@@ -54,8 +52,8 @@ export class EditSongComponent implements OnInit {
         this.song = song;
         if (!song) return;
         this.form = this.editService.createSongForm(song);
-        this.form.controls.flags.valueChanges.subscribe(_ => this.onFlagsChanged(_));
+        this.form.controls.flags.valueChanges.subscribe(_ => this.onFlagsChanged(_ as string));
-        this.onFlagsChanged(this.form.controls.flags.value);
+        this.onFlagsChanged(this.form.controls.flags.value as string);
       });
   }
 

src/app/modules/songs/song/new/new.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
+import {faSave} from '@fortawesome/free-solid-svg-icons';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {SongService} from '../../services/song.service';
 import {Song} from '../../services/song';

src/app/modules/songs/song/song.component.ts

@@ -8,8 +8,7 @@ import {FileDataService} from '../services/file-data.service';
 import {File} from '../services/file';
 import {UserService} from '../../../services/user/user.service';
 import {User} from '../../../services/user/user';
-import {faEdit} from '@fortawesome/free-solid-svg-icons/faEdit';
+import {faEdit, faTrash} from '@fortawesome/free-solid-svg-icons';
-import {faTrash} from '@fortawesome/free-solid-svg-icons/faTrash';
 
 @Component({
   selector: 'app-song',

src/app/modules/user/info/info.component.ts

@@ -3,7 +3,7 @@ import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user/user';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
-import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
+import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons';
 import {RolePipe} from './role.pipe';
 import {roles} from '../../../services/user/roles';
 

src/app/modules/user/info/users/user/user.component.ts

@@ -2,7 +2,7 @@ import {Component, Input} from '@angular/core';
 import {User} from '../../../../../services/user/user';
 import {UserService} from '../../../../../services/user/user.service';
 import {ROLE_TYPES} from '../../../../../services/user/roles';
-import {faTimes} from '@fortawesome/free-solid-svg-icons/faTimes';
+import {faTimes} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-user',

src/app/modules/user/login/login.component.ts

@@ -2,8 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
-import {faSignInAlt} from '@fortawesome/free-solid-svg-icons/faSignInAlt';
+import {faSignInAlt, faUserPlus} from '@fortawesome/free-solid-svg-icons';
-import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus';
 
 @Component({
   selector: 'app-login',

src/app/modules/user/new/new.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 import {UserService} from '../../../services/user/user.service';
-import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus';
+import {faUserPlus} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-new',

src/app/modules/user/password/password.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
-import {faWindowRestore} from '@fortawesome/free-solid-svg-icons/faWindowRestore';
+import {faWindowRestore} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-password',

src/app/services/filter.helper.ts

@@ -3,13 +3,13 @@ import {Song} from '../modules/songs/services/song';
 export function filterSong(song: Song, filterValue: string): boolean {
   if (!filterValue) return true;
 
-  const textMatch = !!song.text && normalize(song.text).indexOf(normalize(filterValue)) !== -1;
+  const textMatch = !!song.text && normalize(song.text)?.indexOf(normalize(filterValue)) !== -1;
-  const titleMatch = !!song.title && normalize(song.title).indexOf(normalize(filterValue)) !== -1;
+  const titleMatch = !!song.title && normalize(song.title)?.indexOf(normalize(filterValue)) !== -1;
-  const artistMatch = !!song.title && normalize(song.artist).indexOf(normalize(filterValue)) !== -1;
+  const artistMatch = !!song.title && normalize(song.artist)?.indexOf(normalize(filterValue)) !== -1;
 
   return textMatch || titleMatch || artistMatch;
 }
 
 function normalize(input: string): string {
-  return input.toLowerCase().replace(/[\s?!.,']/g, '');
+  return input?.toLowerCase().replace(/[\s?!.,']/g, '');
 }

src/app/widget-modules/components/card/card.component.less

@@ -3,7 +3,7 @@
 .card {
   margin: 20px;
   border-radius: 8px;
-  background: #fffb;
+  background: #fffe;
   backdrop-filter: blur(12px);
   overflow: hidden;
   width: 800px;
@@ -11,8 +11,8 @@
 
   @media screen and (max-width: 860px) {
     width: 100vw;
-    border-radius: 0px;
+    border-radius: 0;
-    background: #fffa;
+    background: #fffe;
     margin: 0;
   }
 

src/app/widget-modules/components/card/card.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import {faTimes} from '@fortawesome/free-solid-svg-icons/faTimes';
+import {faTimes} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-card',

src/app/widget-modules/components/list-header/list-header.component.ts

@@ -1,6 +1,5 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {faFilter} from '@fortawesome/free-solid-svg-icons/faFilter';
+import {faFilter, faPlus} from '@fortawesome/free-solid-svg-icons';
-import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus';
 import {fade} from '../../../animations';
 
 @Component({

src/app/widget-modules/components/menu-button/menu-button.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {IconProp} from '@fortawesome/fontawesome-svg-core';
-import {faCross} from '@fortawesome/free-solid-svg-icons/faCross';
+import {faCross} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-menu-button',

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

@@ -27,7 +27,7 @@
 
 .line {
   opacity: 1;
-  transition: 1000ms all ease-in-out;
+  transition: 100ms all ease-in-out;
 
   &.disabled {
     opacity: 0.5;
@@ -65,7 +65,7 @@
   left: 40px;
   right: 40px;
 
-  transition: 1000ms all ease-in-out;
+  transition: 1000ms top ease-in-out;
 }
 
 .error {

src/app/widget-modules/pipes/legal-owner-translator/legal-owner.pipe.ts

@@ -1,10 +1,11 @@
 import {Pipe, PipeTransform} from '@angular/core';
+import {SongLegalOwner} from '../../../modules/songs/services/song.service';
 
 @Pipe({
   name: 'legalOwner',
 })
 export class LegalOwnerPipe implements PipeTransform {
-  public transform(legalOwnerKey: string): string {
+  public transform(legalOwnerKey: SongLegalOwner): string {
     switch (legalOwnerKey) {
       case 'CCLI':
         return 'CCLI';

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

@@ -1,10 +1,11 @@
 import {Pipe, PipeTransform} from '@angular/core';
+import {SongLegalType} from '../../../modules/songs/services/song.service';
 
 @Pipe({
   name: 'legalType',
 })
 export class LegalTypePipe implements PipeTransform {
-  public transform(legalTypeKey: string): string {
+  public transform(legalTypeKey: SongLegalType): string {
     switch (legalTypeKey) {
       case 'open':
         return 'Klärung erforderlich ';

src/app/widget-modules/pipes/song-type-translater/song-type.pipe.ts

@@ -1,15 +1,18 @@
 import {Pipe, PipeTransform} from '@angular/core';
+import {SongType} from '../../../modules/songs/services/song.service';
 
 @Pipe({
   name: 'songType',
 })
 export class SongTypePipe implements PipeTransform {
-  public transform(songTypeKey: string): string {
+  public transform(songTypeKey: SongType): string {
     switch (songTypeKey) {
       case 'Worship':
         return 'Anbetung';
       case 'Praise':
         return 'Lobpreis';
+      case 'Misc':
+        return 'sonstiges';
       default:
         return '';
     }

src/styles/styles.less

@@ -18,11 +18,8 @@ body {
   overscroll-behavior-y: none;
   color: #333;
 
-  background: #373b44; /* fallback for old browsers */
-  background: -webkit-linear-gradient(to bottom, #373b44, @primary-color); /* Chrome 10-25, Safari 5.1-6 */
-  background: linear-gradient(to bottom, #373b44, @primary-color); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   background-attachment: fixed;
-  background: url("/assets/background.png");
+  background-image: url("/assets/background.jpg");
   background-size: cover;
 }