adding presentation background

2022-08-14 22:11:54 +02:00
parent a02e740c0f
commit e9846b29e5
41 changed files with 212 additions and 104 deletions
--- a/src/app/modules/presentation/monitor/legal/legal.component.less
+++ b/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;
--- a/src/app/modules/presentation/monitor/monitor.component.html
+++ b/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"
  >
--- a/src/app/modules/presentation/monitor/monitor.component.less
+++ b/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;
+  }
 }
--- a/src/app/modules/presentation/monitor/monitor.component.ts
+++ b/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)
--- a/src/app/modules/presentation/remote/remote.component.html
+++ b/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
--- a/src/app/modules/presentation/remote/remote.component.less
+++ b/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;
  }
--- a/src/app/modules/presentation/remote/remote.component.ts
+++ b/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});
  }
 }