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 {

src/app/widget-modules/components/song-text/song-text.component.html

@@ -24,8 +24,9 @@
         *ngFor="let line of getLines(section)"
         [class.chord]="line.type === 0"
         [class.disabled]="checkDisabled(i)"
+        [class.comment]="isComment(line.text)"
         class="line"
-      >{{ line.text }}
+      >{{ transform(line.text) }}
       </div>
     </div>
     <div *ngIf="sections.length===0" class="error">

src/app/widget-modules/components/song-text/song-text.component.less

@@ -72,3 +72,10 @@
   font-size: 1.2em;
   font-weight: bold;
 }
+
+.comment {
+  color: #00b;
+  border-left: 2px solid #00b;
+  padding-left: 6px;
+  font-style: italic;
+}

src/app/widget-modules/components/song-text/song-text.component.ts

@@ -124,4 +124,13 @@ export class SongTextComponent implements OnInit {
         return 'show';
     }
   }
+
+  public transform(text: string): string {
+    if (this.isComment(text)) text = text.slice(1);
+    return text.trim();
+  }
+
+  public isComment(text: string) {
+    return text.startsWith('#');
+  }
 }

src/custom-theme.scss

@@ -1,40 +1,5 @@
 @use '@angular/material' as mat;
 
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
-// Plus imports for other components in your app.
-
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
-//  The following line adds:
-//    1. Default typography styles for all components
-//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
-//  If you specify typography styles for the components you use elsewhere, you should delete this line.
-//  If you don't need the default component typographies but still want the hierarchy styles,
-//  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
-@include mat.all-component-typographies();
-@include mat.elevation-classes();
-@include mat.app-background();
-
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$wgenerator-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
-$wgenerator-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
-$wgenerator-warn: mat.m2-define-palette(mat.$m2-red-palette);
-
-// Create the theme object (a Sass map containing all of the palettes).
-$wgenerator-theme: mat.m2-define-light-theme($wgenerator-primary, $wgenerator-accent, $wgenerator-warn);
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($wgenerator-theme);
 
 
 // Custom Theming for Angular Material