presentation zoom and legal info

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

@@ -0,0 +1,14 @@
+<div *ngIf="song.legalOwnerId">
+  <p *ngIf="song.legalType==='CCLI'">CCLI-Liednummer {{song.legalOwnerId}}</p>
+  <p *ngIf="song.legalType!=='CCLI'">Liednummer {{song.legalOwnerId}}</p>
+</div>
+
+<p *ngIf="song.artist">{{song.artist}}</p>
+<p *ngIf="song.label">{{song.label}}</p>
+<p *ngIf="song.termsOfUse" class="terms-of-use">{{song.termsOfUse}}</p>
+<p *ngIf="song.origin">{{song.origin}}</p>
+
+<div *ngIf="song.legalLicenseId">
+  <p *ngIf="song.legalType==='CCLI'">CCLI-Lizenznummer {{song.legalLicenseId}}</p>
+  <p *ngIf="song.legalType!=='CCLI'">Lizenznummer {{song.legalLicenseId}}</p>
+</div>

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

@@ -0,0 +1,10 @@
+p {
+  font-size: 15px;
+  margin: 10px 0 0 0;
+
+  &.terms-of-use {
+    font-size: 13px;
+    font-style: italic;
+    margin: 0;
+  }
+}

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

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

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

@@ -0,0 +1,11 @@
+import {Component, Input} from '@angular/core';
+import {Song} from '../../../songs/services/song';
+
+@Component({
+  selector: 'app-legal',
+  templateUrl: './legal.component.html',
+  styleUrls: ['./legal.component.less']
+})
+export class LegalComponent {
+  @Input() public song: Song;
+}

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

@@ -1,5 +1,6 @@
-<div class="fullscreen">
+<div [style.font-size.px]="zoom" class="fullscreen">
 
   <app-song-text [showSwitch]="false" [text]="song.text" chordMode="hide"></app-song-text>
 
+  <app-legal [song]="song"></app-legal>
 </div>

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

@@ -10,5 +10,8 @@
   padding: 50px;
 
   color: white;
-  font-size: 30px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }

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

@@ -14,6 +14,7 @@ import {Song} from '../../songs/services/song';
 export class MonitorComponent implements OnInit {
   public song: Song;
   private index: number;
+  private zoom: number;
   private sections: Section[];
 
   constructor(
@@ -29,6 +30,7 @@ export class MonitorComponent implements OnInit {
       map(_ => _.showId),
       switchMap(_ => this.showService.read$(_)),
       tap(_ => this.index = _.presentationSection),
+      tap(_ => this.zoom = _.presentationZoom ?? 30),
       switchMap(_ => this.songService.read(_.presentationSongId))
     ).subscribe(_ => {
       this.song = _;