show next song in page view

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

@@ -52,6 +52,7 @@
           [showText]="true"
           [show]="show"
         ></app-song>
+        <div class="next-song" *ngIf="getNextSong(orderedShowSongs(show), i) as next">{{next}}<fa-icon [icon]="faNextSong"></fa-icon></div>
       </swiper-slide>
     </swiper-container>
 

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

@@ -49,3 +49,14 @@
   top: 12px;
   z-index: 5;
 }
+
+.next-song {
+  color: #0008;
+  position: fixed;
+  bottom: 0;
+  right: 10px;
+
+  fa-icon {
+    padding: 6px;
+  }
+}

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

@@ -13,14 +13,15 @@ import {
   faArrowUpRightFromSquare,
   faBox,
   faBoxOpen,
-  faExternalLinkAlt,
+  faChevronRight,
   faFile,
   faFileDownload,
   faFileLines,
   faLock,
   faMagnifyingGlassMinus,
   faMagnifyingGlassPlus,
-  faSliders, faUnlock,
+  faSliders,
+  faUnlock,
   faUser,
   faUsers,
 } from '@fortawesome/free-solid-svg-icons';
@@ -61,6 +62,7 @@ export class ShowComponent implements OnInit, OnDestroy {
   public textSize = 1;
   public faFileLines = faFileLines;
   public faFile = faFile;
+  public faNextSong = faChevronRight;
   private subs: Subscription[] = [];
 
   public constructor(
@@ -198,6 +200,12 @@ export class ShowComponent implements OnInit, OnDestroy {
     if (useSwiper) openFullscreen();
     else closeFullscreen();
   }
+
+  public getNextSong(showSongs: ShowSong[], i: number): string {
+    if (!showSongs || showSongs.length === 0) return '';
+    const song = showSongs[i + 1];
+    return song?.title ?? '';
+  }
 }
 
 export interface Swiper {