adding presentation background

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

@@ -15,27 +15,29 @@
     </mat-form-field>
 
     <ng-container *ngIf="!progress">
-      <div *ngIf="show" class="song-parts padding-bottom">
-        <div
-          (click)="onSectionClick('title', -1)"
-          [class.active]="show.presentationSongId === 'title'"
-          class="song-part"
-        >
-          <div class="head">Veranstaltung</div>
-        </div>
-        <div
-          (click)="onSectionClick('empty', -1)"
-          [class.active]="show.presentationSongId === 'empty'"
-          class="song-part"
-        >
-          <div class="head">Leer</div>
+      <div class="song">
+        <div *ngIf="show" class="song-parts">
+          <div
+            (click)="onSectionClick('title', -1)"
+            [class.active]="show.presentationSongId === 'title'"
+            class="song-part"
+          >
+            <div class="head">Veranstaltung</div>
+          </div>
+          <div
+            (click)="onSectionClick('empty', -1)"
+            [class.active]="show.presentationSongId === 'empty'"
+            class="song-part"
+          >
+            <div class="head">Leer</div>
+          </div>
         </div>
       </div>
 
       <div *ngFor="let song of presentationSongs; trackBy: trackBy" @fade class="song">
         <div *ngIf="show"
-          [class.active]="show.presentationSongId === song.id"
-          class="title song-part"
+             [class.active]="show.presentationSongId === song.id"
+             class="title song-part"
         >
           <div (click)="onSectionClick(song.id, -1)" class="head">
             {{ song.title }}
@@ -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,14 +72,17 @@ 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.show = show;
-    });
+    this.showService
+      .read$(change)
+      .pipe(debounceTime(100))
+      .subscribe(show => {
+        this.show = show;
+      });
 
     combineLatest([this.showService.read$(change), this.showSongService.list$(change)]).subscribe(([show, list]) => {
       this.showSongs = list;
@@ -106,7 +109,11 @@ export class RemoteComponent {
       });
   }
 
-  public async onZoom(zoom: number): Promise<void> {
-    if (this.currentShowId != null) await this.showService.update$(this.currentShowId, {presentationZoom: zoom});
+  public async onZoom(presentationZoom: number): Promise<void> {
+    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});
   }
 }