add dynamic text for presentation

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

@@ -10,9 +10,9 @@
 
   <div
     [@songSwitch]="songId"
-    [class.blur]="songId === 'title'"
+    [class.blur]="songId === 'title' || songId === 'dynamicText'"
     [class.no-logo]="presentationBackground!=='none'"
-    [class.hide]="songId !== 'title' && songId !== 'empty'"
+    [class.hide]="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
     class="start fullscreen logo"
   >
     <app-logo></app-logo>
@@ -23,6 +23,11 @@
     <div class="date">{{ date | date: "dd.MM.yyyy" }}</div>
   </div>
 
+  <div *ngIf="songId === 'dynamicText'" @songSwitch class="start fullscreen">
+    <div>{{ presentationDynamicCaption }}</div>
+    <div class="date">{{ presentationDynamicText }}</div>
+  </div>
+
   <app-song-text
     [header]="song.title"
     *ngIf="songId !== 'title' && songId !== 'empty'"

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

@@ -73,6 +73,8 @@
 
 .start {
   display: flex;
+  padding: 0 30px;
+  text-align: center;
   width: 100%;
   height: 100%;
   align-items: center;

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

@@ -26,6 +26,8 @@ export class MonitorComponent implements OnInit {
   public songId: string | null = null;
   public index: number | null = null;
   public showType: string | null = null;
+  public presentationDynamicCaption: string | null = null;
+  public presentationDynamicText: string | null = null;
   public date: Date | null = null;
   public config$: Observable<Config | null>;
   public presentationBackground: PresentationBackground = 'none';
@@ -60,6 +62,8 @@ export class MonitorComponent implements OnInit {
           this.date = _.date.toDate();
           this.index = _.presentationSection;
           this.presentationBackground = _.presentationBackground;
+          this.presentationDynamicCaption = _.presentationDynamicCaption;
+          this.presentationDynamicText = _.presentationDynamicText;
           this.zoom = _.presentationZoom ?? 30;
           if (this.songId !== _.presentationSongId) this.songId = 'empty';
           setTimeout(() => (this.songId = _.presentationSongId), 600);

src/app/modules/presentation/presentation.module.ts

@@ -18,6 +18,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
 import {LogoComponent} from './monitor/logo/logo.component';
 import {SelectComponent} from './select/select.component';
+import {MatInputModule} from '@angular/material/input';
 
 @NgModule({
   declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent, SelectComponent],
@@ -37,6 +38,7 @@ import {SelectComponent} from './select/select.component';
     FormsModule,
     AddSongModule,
     ReactiveFormsModule,
+    MatInputModule,
   ],
 })
 export class PresentationModule {}

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

@@ -49,6 +49,32 @@
         </div>
       </div>
 
+      <div class="song">
+        <div *ngIf="show"
+             [class.active]="show.presentationSongId === 'dynamicText'"
+             class="title song-part"
+        >
+          <div (click)="onSectionClick('dynamicText', -1, show.id)" class="head">
+            Freier Text
+          </div>
+        </div>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Überschrift</mat-label>
+          <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption" autocomplete="off" id="dynamic-caption"
+                 matInput
+                 type="text">
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Text</mat-label>
+          <textarea (ngModelChange)="onDynamicText($event, show.id)" [ngModel]="show.presentationDynamicText"
+                    autocomplete="off" id="dynamic-text"
+                    matInput></textarea>
+        </mat-form-field>
+
+      </div>
+
       <div *ngIf="show" class="div-bottom">
 
         <button routerLink="/presentation/monitor" mat-button>

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

@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
-import {combineLatest} from 'rxjs';
+import {combineLatest, Subject} from 'rxjs';
 import {PresentationBackground, Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
 import {SongService} from '../../songs/services/song.service';
@@ -7,7 +7,7 @@ import {faDesktop, faFolderOpen} 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 {filter, map} from 'rxjs/operators';
+import {debounceTime, filter, map} from 'rxjs/operators';
 import {fade} from '../../../animations';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Section} from '../../songs/services/section';
@@ -40,24 +40,7 @@ export class RemoteComponent {
     return item.id;
   }
 
-  public constructor(
+  public presentationDynamicCaptionChanged$ = new Subject<{presentationDynamicCaption: string; showId: string}>();
-    private showService: ShowService,
-    private showSongService: ShowSongService,
-    private songService: SongService,
-    private textRenderingService: TextRenderingService,
-    private globalSettingsService: GlobalSettingsService,
-    private cRef: ChangeDetectorRef
-  ) {
-    globalSettingsService.get$
-      .pipe(
-        filter(_ => !!_),
-        map(_ => _ as GlobalSettings),
-        map(_ => _.currentShow)
-      )
-      .subscribe(_ => {
-        void this.onShowChanged(_);
-      });
-  }
 
   public onShowChanged(change: string): void {
     combineLatest([this.showService.read$(change), this.showSongService.list$(change)]).subscribe(([show, list]) => {
@@ -91,4 +74,37 @@ export class RemoteComponent {
   public async onBackground(presentationBackground: PresentationBackground, showId: string): Promise<void> {
     await this.showService.update$(showId, {presentationBackground});
   }
+  public presentationDynamicTextChanged$ = new Subject<{presentationDynamicText: string; showId: string}>();
+
+  public constructor(
+    private showService: ShowService,
+    private showSongService: ShowSongService,
+    private songService: SongService,
+    private textRenderingService: TextRenderingService,
+    private globalSettingsService: GlobalSettingsService,
+    private cRef: ChangeDetectorRef
+  ) {
+    globalSettingsService.get$
+      .pipe(
+        filter(_ => !!_),
+        map(_ => _ as GlobalSettings),
+        map(_ => _.currentShow)
+      )
+      .subscribe(_ => {
+        void this.onShowChanged(_);
+      });
+
+    this.presentationDynamicCaptionChanged$
+      .pipe(debounceTime(1000))
+      .subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicCaption: _.presentationDynamicCaption}));
+    this.presentationDynamicTextChanged$.pipe(debounceTime(1000)).subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicText: _.presentationDynamicText}));
+  }
+
+  public onDynamicCaption(presentationDynamicCaption: string, showId: string): void {
+    this.presentationDynamicCaptionChanged$.next({presentationDynamicCaption, showId});
+  }
+
+  public onDynamicText(presentationDynamicText: string, showId: string): void {
+    this.presentationDynamicTextChanged$.next({presentationDynamicText, showId});
+  }
 }

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

@@ -15,6 +15,8 @@ export interface Show {
   order: string[];
 
   presentationSongId: string;
+  presentationDynamicCaption: string;
+  presentationDynamicText: string;
   presentationSection: number;
   presentationZoom: number;
   presentationBackground: PresentationBackground;