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 = _;

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

@@ -10,10 +10,13 @@ import {MatSelectModule} from '@angular/material/select';
 import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 import {SectionTypeTranslatorModule} from '../../widget-modules/pipes/section-type-translator/section-type-translator.module';
 import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
+import {LegalComponent} from './monitor/legal/legal.component';
+import {MatButtonModule} from '@angular/material/button';
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 
 
 @NgModule({
-  declarations: [MonitorComponent, RemoteComponent],
+  declarations: [MonitorComponent, RemoteComponent, LegalComponent],
   imports: [
     CommonModule,
     PresentationRoutingModule,
@@ -22,7 +25,9 @@ import {SongTextModule} from '../../widget-modules/components/song-text/song-tex
     MatSelectModule,
     ShowTypeTranslaterModule,
     SectionTypeTranslatorModule,
-    SongTextModule
+    SongTextModule,
+    MatButtonModule,
+    FontAwesomeModule
   ]
 })
 export class PresentationModule {

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

@@ -11,7 +11,7 @@
 
     <div *ngFor="let song of presentationSongs" class="song">
       <div class="title">{{song.title}}</div>
-      <div *ngIf="show$|async as show" class="song-parts">
+      <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">
@@ -21,8 +21,19 @@
       </div>
     </div>
 
-    <a [routerLink]="'/presentation/monitor/' + currentShowId">Presenter öffnen</a>
+    <div *ngIf="show">
+      <button [routerLink]="'/presentation/monitor/' + currentShowId" mat-icon-button>
+        <fa-icon [icon]="faDesktop"></fa-icon>
+      </button>
 
+      <button (click)="onZoomIn()" mat-icon-button>
+        <fa-icon [icon]="faZoomIn"></fa-icon>
+      </button>
+      {{show.presentationZoom}}px
+      <button (click)="onZoomOut()" mat-icon-button>
+        <fa-icon [icon]="faZoomOut"></fa-icon>
+      </button>
+    </div>
   </app-card>
 
 

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

@@ -7,6 +7,9 @@ import {ShowSongService} from '../../shows/services/show-song.service';
 import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
 import {Section, TextRenderingService} from '../../songs/services/text-rendering.service';
+import {faSearchPlus} from '@fortawesome/free-solid-svg-icons/faSearchPlus';
+import {faSearchMinus} from '@fortawesome/free-solid-svg-icons/faSearchMinus';
+import {faDesktop} from '@fortawesome/free-solid-svg-icons/faDesktop';
 
 export interface PresentationSong {
   id: string;
@@ -21,11 +24,15 @@ export interface PresentationSong {
 })
 export class RemoteComponent {
   public shows$: Observable<Show[]>;
-  public show$: Observable<Show>;
+  public show: Show;
   public songs: Song[];
   public presentationSongs: PresentationSong[];
   public currentShowId: string;
 
+  public faZoomIn = faSearchPlus;
+  public faZoomOut = faSearchMinus;
+  public faDesktop = faDesktop;
+
   constructor(
     private showDataService: ShowDataService,
     private showSongService: ShowSongService,
@@ -38,7 +45,7 @@ export class RemoteComponent {
 
   public onShowChanged(change: MatSelectChange): void {
     this.currentShowId = change.value;
-    this.show$ = this.showDataService.read$(change.value);
+    this.showDataService.read$(change.value).subscribe(_ => this.show = _);
     this.showSongService.list$(change.value).subscribe(_ => {
       this.presentationSongs = _
         .map(song => this.songs.filter(f => f.id == song.songId)[0])
@@ -60,4 +67,17 @@ export class RemoteComponent {
       presentationSection: index
     })
   }
+
+  public async onZoomIn() {
+    debugger
+    await this.showDataService.update(this.currentShowId, {
+      presentationZoom: (this.show.presentationZoom ?? 30) + 2,
+    });
+  }
+
+  public async onZoomOut() {
+    await this.showDataService.update(this.currentShowId, {
+      presentationZoom: (this.show.presentationZoom ?? 30) - 2,
+    });
+  }
 }