From 88a574aa80337c6de60b7b2ee76cf891aac5a407 Mon Sep 17 00:00:00 2001 From: benjamin Date: Fri, 3 Jan 2025 21:01:56 +0100 Subject: [PATCH] show next song in page view --- firebase.json | 2 +- .../modules/shows/show/show.component.html | 1 + .../modules/shows/show/show.component.less | 11 ++++++ src/app/modules/shows/show/show.component.ts | 12 +++++-- .../song-text/song-text.component.html | 3 +- .../song-text/song-text.component.less | 7 ++++ .../song-text/song-text.component.ts | 9 +++++ src/custom-theme.scss | 35 ------------------- 8 files changed, 41 insertions(+), 39 deletions(-) diff --git a/firebase.json b/firebase.json index da5e83a..b4a76d4 100644 --- a/firebase.json +++ b/firebase.json @@ -4,7 +4,7 @@ "indexes": "firestore.indexes.json" }, "hosting": { - "public": "dist/wgenerator", + "public": "dist/wgenerator/browser", "ignore": [ "firebase.json", "**/.*", diff --git a/src/app/modules/shows/show/show.component.html b/src/app/modules/shows/show/show.component.html index ac2547f..2f3805b 100644 --- a/src/app/modules/shows/show/show.component.html +++ b/src/app/modules/shows/show/show.component.html @@ -52,6 +52,7 @@ [showText]="true" [show]="show" > +
{{next}}
diff --git a/src/app/modules/shows/show/show.component.less b/src/app/modules/shows/show/show.component.less index 43ac644..f57fde9 100644 --- a/src/app/modules/shows/show/show.component.less +++ b/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; + } +} diff --git a/src/app/modules/shows/show/show.component.ts b/src/app/modules/shows/show/show.component.ts index f0858d5..98dba68 100644 --- a/src/app/modules/shows/show/show.component.ts +++ b/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 { diff --git a/src/app/widget-modules/components/song-text/song-text.component.html b/src/app/widget-modules/components/song-text/song-text.component.html index 6d7446c..c42d1e2 100644 --- a/src/app/widget-modules/components/song-text/song-text.component.html +++ b/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) }}
diff --git a/src/app/widget-modules/components/song-text/song-text.component.less b/src/app/widget-modules/components/song-text/song-text.component.less index 6258c19..993a656 100644 --- a/src/app/widget-modules/components/song-text/song-text.component.less +++ b/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; +} diff --git a/src/app/widget-modules/components/song-text/song-text.component.ts b/src/app/widget-modules/components/song-text/song-text.component.ts index 5fff08f..5ca1a00 100644 --- a/src/app/widget-modules/components/song-text/song-text.component.ts +++ b/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('#'); + } } diff --git a/src/custom-theme.scss b/src/custom-theme.scss index 185173a..159ee5a 100644 --- a/src/custom-theme.scss +++ b/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