list file attachments

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

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {LogoComponent} from './logo.component';
+
+describe('LogoComponent', () => {
+  let component: LogoComponent;
+  let fixture: ComponentFixture<LogoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LogoComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-logo',
+  templateUrl: './logo.component.html',
+  styleUrls: ['./logo.component.less']
+})
+export class LogoComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -1,5 +1,20 @@
-<div *ngIf="song" [style.font-size.px]="zoom" class="fullscreen">
-  <app-song-text [fullscreen]="true" [index]="index" [showSwitch]="false" [text]="song.text"
+<div *ngIf="song" [style.font-size.px]="zoom" class="fullscreen background">
+
+
+  <div @songSwitch [class.blur]="songId==='title'" [class.hide]="songId!=='title' && songId!=='empty'"
+       class="start fullscreen logo">
+    <app-logo></app-logo>
+  </div>
+
+  <div *ngIf="songId==='title'" @songSwitch class="start fullscreen">
+    <div>{{showType|showType}}</div>
+    <div class="date">{{date|date:'dd.MM.yyyy'}}</div>
+  </div>
+
+  <app-song-text *ngIf="songId!=='title' && songId!=='empty'" @songSwitch [fullscreen]="true" [index]="index"
+                 [showSwitch]="false" [text]="song.text"
                  chordMode="hide"></app-song-text>
-  <app-legal [config]="config$|async" [song]="song"></app-legal>
+  <app-legal *ngIf="songId!=='title' && songId!=='empty'" @songSwitch [config]="config$|async"
+             [song]="song"></app-legal>
+
 </div>

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

@@ -8,15 +8,52 @@
   left: 0;
   bottom: 0;
   right: 0;
-  background: black;
   z-index: 1;
+  display: flex;
+  cursor: none;
+}
 
+.background {
+  background: black;
   padding: 50px;
 
   color: white;
 
-  display: flex;
   flex-direction: column;
   justify-content: space-between;
   transition: 300ms all ease-in-out;
 }
+
+.start {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 3em;
+  box-sizing: border-box;
+  text-shadow: 0 0 10px black, 0 0 20px black, 0 0 40px black;
+
+  .date {
+    font-size: 0.6em;
+  }
+}
+
+.logo {
+  transform: scale(0.9);
+  opacity: 1;
+  filter: blur(0px);
+  transition: all 5s ease-in-out;
+}
+
+.blur {
+  filter: blur(10px);
+  opacity: 0.5;
+}
+
+.hide {
+  filter: blur(30px);
+  opacity: 0.1;
+  transform: scale(0.8) translateY(-10%);
+}

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

@@ -8,16 +8,22 @@ import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {Config} from '../../../services/config';
 import {Observable} from 'rxjs';
 import {ConfigService} from '../../../services/config.service';
+import {songSwitch} from '../../../widget-modules/components/song-text/animation';
 
 @Component({
   selector: 'app-monitor',
   templateUrl: './monitor.component.html',
-  styleUrls: ['./monitor.component.less']
+  styleUrls: ['./monitor.component.less'],
+  animations: [songSwitch]
 })
 export class MonitorComponent implements OnInit {
   public song: Song;
   public zoom: number;
+  public currentShowId: string;
+  public songId: string;
   public index: number;
+  public showType: string;
+  public date: Date;
   private sections: Section[];
   public config$: Observable<Config>;
 
@@ -35,11 +41,15 @@ export class MonitorComponent implements OnInit {
     this.globalSettingsService.get$.pipe(
       map(_ => _.currentShow),
       distinctUntilChanged(),
+      tap(_ => this.currentShowId = _),
       switchMap(_ => this.showService.read$(_)),
+      tap(_ => this.showType = _.showType),
+      tap(_ => this.date = _.date.toDate()),
+      tap(_ => this.songId = _.presentationSongId),
       tap(_ => this.index = _.presentationSection),
       tap(_ => this.zoom = _.presentationZoom ?? 30),
       switchMap(_ => this.songService.read$(_.presentationSongId))
-    ).subscribe(_ => {
+    ).subscribe((_: Song) => {
       this.song = _;
       this.sections = this.textRenderingService.parse(_.text);
     });

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

@@ -16,10 +16,11 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MatSliderModule} from '@angular/material/slider';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
+import {LogoComponent} from './monitor/logo/logo.component';
 
 
 @NgModule({
-  declarations: [MonitorComponent, RemoteComponent, LegalComponent],
+  declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent],
   imports: [
     CommonModule,
     PresentationRoutingModule,

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

@@ -12,39 +12,54 @@
       </mat-select>
     </mat-form-field>
 
-    <div *ngFor="let song of presentationSongs" @fade class="song">
-      <div [class.active]="show.presentationSongId===song.id" class="title song-part">
-        <div (click)="onSectionClick(song.id, -1)" class="head">{{song.title}}</div>
-      </div>
-      <div *ngIf="show" class="song-parts">
-        <div (click)="onSectionClick(song.id, i)" *ngFor="let section of song.sections; index as i"
-             [class.active]="show.presentationSongId===song.id && show.presentationSection===i"
+    <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">{{section.type|sectionType}} {{section.number + 1}}</div>
-          <div class="fragment">{{getFirstLine(section)}}</div>
+          <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 *ngIf="show" class="div-bottom">
-      <a routerLink="/presentation/monitor" target="_blank">
-        <fa-icon [icon]="faDesktop"></fa-icon>
-      </a>
+      <div *ngFor="let song of presentationSongs" @fade class="song">
+        <div [class.active]="show.presentationSongId===song.id" class="title song-part">
+          <div (click)="onSectionClick(song.id, -1)" class="head">{{song.title}}</div>
+        </div>
+        <div *ngIf="show" class="song-parts">
+          <div (click)="onSectionClick(song.id, i)" *ngFor="let section of song.sections; index as i"
+               [class.active]="show.presentationSongId===song.id && show.presentationSection===i"
+               class="song-part">
+            <div class="head">{{section.type|sectionType}} {{section.number + 1}}</div>
+            <div class="fragment">{{getFirstLine(section)}}</div>
+          </div>
+        </div>
+      </div>
 
-      <mat-slider
-        (ngModelChange)="onZoom($event)"
-        [max]="100"
-        [min]="10"
-        [ngModel]="show.presentationZoom"
-        [step]="2"
-        [thumbLabel]="true"
-      >
-      </mat-slider>
-    </div>
+      <div *ngIf="show" class="div-bottom">
+        <a routerLink="/presentation/monitor" target="_blank">
+          <fa-icon [icon]="faDesktop"></fa-icon>
+        </a>
+
+        <mat-slider
+          (ngModelChange)="onZoom($event)"
+          [max]="100"
+          [min]="10"
+          [ngModel]="show.presentationZoom"
+          [step]="2"
+          [thumbLabel]="true"
+        >
+        </mat-slider>
+      </div>
 
 
-    <app-add-song *ngIf="show" [addedLive]="true" [showId]="currentShowId" [showSongs]="showSongs"
-                  [songs]="songs"></app-add-song>
+      <app-add-song *ngIf="show" [addedLive]="true" [showId]="currentShowId" [showSongs]="showSongs"
+                    [songs]="songs"></app-add-song>
+    </ng-container>
   </app-card>
 
 

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

@@ -68,3 +68,7 @@
   display: grid;
   grid-template-columns: 40px auto;
 }
+
+.padding-bottom {
+  padding-bottom: 20px;
+}

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

@@ -12,6 +12,7 @@ import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {FormControl} from '@angular/forms';
 import {distinctUntilChanged, map} from 'rxjs/operators';
 import {fade} from '../../../animations';
+import {delay} from '../../../services/delay';
 
 export interface PresentationSong {
   id: string;
@@ -32,6 +33,7 @@ export class RemoteComponent {
   public songs: Song[];
   public presentationSongs: PresentationSong[];
   public currentShowId: string;
+  public progress = false;
 
   public faDesktop = faDesktop;
   public showControl = new FormControl();
@@ -49,12 +51,21 @@ export class RemoteComponent {
     globalSettingsService.get$.pipe(
       map(_ => _.currentShow),
       distinctUntilChanged()
-    ).subscribe(_ => this.showControl.setValue(_));
+    ).subscribe(_ => {
+      this.showControl.setValue(_, {emitEvent: false});
+      this.onShowChanged(_, false);
+    });
     this.showControl.valueChanges.subscribe(value => this.onShowChanged(value));
   }
 
-  public onShowChanged(change: string): void {
-    this.globalSettingsService.set({currentShow: change});
+  public async onShowChanged(change: string, updateShow = true): Promise<void> {
+    this.progress = true;
+    if (updateShow) {
+      await this.showService.update$(change, {presentationSongId: 'empty'});
+      await delay(1200);
+      await this.globalSettingsService.set({currentShow: change});
+      await this.showService.update$(change, {presentationSongId: 'title'});
+    }
     this.currentShowId = change;
     this.showService.read$(change).subscribe(_ => this.show = _);
     this.showSongService.list$(change).subscribe(_ => {
@@ -67,6 +78,8 @@ export class RemoteComponent {
           sections: this.textRenderingService.parse(song.text)
         }))
     });
+    await delay(500);
+    this.progress = false;
   }
 
   public getFirstLine(section: Section): string {