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)