fix key events and add time to fullscreen

.run/start.run.xml

@@ -1,12 +1,15 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="start" type="js.build_tools.npm" nameIsGenerated="true">
-    <package-json value="$PROJECT_DIR$/package.json"/>
-    <command value="run"/>
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
     <scripts>
-      <script value="start"/>
+      <script value="start" />
     </scripts>
-    <node-interpreter value="project"/>
-    <envs/>
-    <method v="2"/>
+    <node-interpreter value="project" />
+    <envs />
+    <EXTENSION ID="com.intellij.lang.javascript.buildTools.npm.rc.StartBrowserRunConfigurationExtension">
+      <browser name="98ca6316-2f89-46d9-a9e5-fa9e2b0625b3" start="true" with-js-debugger="true" url="http://localhost.4200" />
+    </EXTENSION>
+    <method v="2" />
   </configuration>
 </component>

src/app/modules/shows/services/docx.service.ts

@@ -213,7 +213,7 @@ export class DocxService {
             sections: Section[];
           }
       );
-    const songs = show.order.map(_ => songsLoaded.filter(f => f.showSong.id === _)[0]);
+    const songs = show.order.map(_ => songsLoaded.find(f => f.showSong.id === _)).filter(_ => !!_);
     return {songs, show, user, config};
   }
 

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"
-                         matTooltip="Swiper umschalten"></app-menu-button>
+                         [icon]="useSwiper ? faRestore : faMaximize" class="btn-delete btn-icon"
+                         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 faFile = faFile;
+  public faRestore = faMinimize;
+  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();
   }