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);
     });