fix key events and add time to fullscreen

src/app/modules/shows/show/show.component.html

@@ -19,8 +19,8 @@
         <app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon"
                          matTooltip="Vergrößern"></app-menu-button>
         <app-menu-button (click)="useSwiper=!useSwiper;fullscreen(useSwiper)" @fade
-                         [icon]="useSwiper ? faFileLines : faFile" class="btn-delete btn-icon"
+                         [icon]="useSwiper ? faRestore : faMaximize" class="btn-delete btn-icon"
-                         matTooltip="Swiper umschalten"></app-menu-button>
+                         matTooltip="Vollbild"></app-menu-button>
       </div>
     </div>
     <div (cdkDropListDropped)="drop($event, show)" *ngIf="showSongs && !useSwiper"
@@ -53,6 +53,7 @@
           [showText]="true"
           [show]="show"
         ></app-song>
+        <div class="time">{{ currentTime | date: 'HH:mm' }}</div>
         <div *ngIf="getNextSong(orderedShowSongs(show), i) as next" class="next-song">{{ next }}
           <fa-icon [icon]="faNextSong"></fa-icon>
         </div>

src/app/modules/shows/show/show.component.less

@@ -60,3 +60,10 @@
     padding: 6px;
   }
 }
+
+.time {
+  color: #0008;
+  position: fixed;
+  bottom: 0;
+  left: 10px;
+}

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

@@ -14,12 +14,12 @@ import {
   faBox,
   faBoxOpen,
   faChevronRight,
-  faFile,
   faFileDownload,
-  faFileLines,
   faLock,
   faMagnifyingGlassMinus,
   faMagnifyingGlassPlus,
+  faMaximize,
+  faMinimize,
   faSliders,
   faUnlock,
   faUser,
@@ -101,9 +101,10 @@ export class ShowComponent implements OnInit, OnDestroy {
   public faZoomOut = faMagnifyingGlassMinus;
   public useSwiper = false;
   public textSize = 1;
-  public faFileLines = faFileLines;
+  public faRestore = faMinimize;
-  public faFile = faFile;
+  public faMaximize = faMaximize;
   public faNextSong = faChevronRight;
+  public currentTime: Date;
   private subs: Subscription[] = [];
 
   public constructor(
@@ -119,6 +120,10 @@ export class ShowComponent implements OnInit, OnDestroy {
   ) {}
 
   public ngOnInit(): void {
+    this.currentTime = new Date();
+    setInterval(() => {
+      this.currentTime = new Date();
+    }, 10000);
     this.show$ = this.activatedRoute.params.pipe(
       map(param => param as {showId: string}),
       map(param => param.showId),
@@ -223,6 +228,7 @@ export class ShowComponent implements OnInit, OnDestroy {
 
   @HostListener('document:keydown', ['$event'])
   public handleKeyboardEvent(event: KeyboardEvent) {
+    if (!this.useSwiper) return;
     const swiperEl = document.querySelector('swiper-container') as unknown as Swiper;
     switch (event.code) {
       case 'ArrowRight':
@@ -237,6 +243,7 @@ export class ShowComponent implements OnInit, OnDestroy {
   }
 
   public fullscreen(useSwiper: boolean) {
+    this.textSize = useSwiper ? 2 : 1;
     if (useSwiper) openFullscreen();
     else closeFullscreen();
   }