add song usage (experimental)

.run/build.run.xml

@@ -1,12 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="build" type="js.build_tools.npm" nameIsGenerated="true">
-    <package-json value="$PROJECT_DIR$/package.json"/>
-    <command value="run"/>
-    <scripts>
-      <script value="build"/>
-    </scripts>
-    <node-interpreter value="project"/>
-    <envs/>
-    <method v="2"/>
-  </configuration>
-</component>

.run/deploy.run.xml

@@ -1,12 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="deploy" type="js.build_tools.npm" nameIsGenerated="true">
-    <package-json value="$PROJECT_DIR$/package.json"/>
-    <command value="run"/>
-    <scripts>
-      <script value="deploy"/>
-    </scripts>
-    <node-interpreter value="project"/>
-    <envs/>
-    <method v="2"/>
-  </configuration>
-</component>

angular.json

@@ -15,15 +15,12 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": {
+            "outputPath": "dist/wgenerator",
-              "base": "dist/wgenerator"
-            },
             "index": "src/index.html",
-            "polyfills": [
+            "main": "src/main.ts",
-              "src/polyfills.ts"
+            "polyfills": "src/polyfills.ts",
-            ],
             "tsConfig": "tsconfig.app.json",
             "aot": false,
             "assets": [
@@ -45,16 +42,15 @@
               "src/styles/shadow.less"
             ],
             "scripts": [],
+            "vendorChunk": true,
             "extractLicenses": false,
+            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
             "namedChunks": true,
             "allowedCommonJsDependencies": [
-              "lodash",
+              "lodash", "docx"
-              "docx",
+            ]
-              "qrcode"
-            ],
-            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -70,6 +66,8 @@
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -82,25 +80,26 @@
                   "maximumError": "10kb"
                 }
               ],
-              "serviceWorker": "ngsw-config.json"
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             }
           }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "buildTarget": "wgenerator:build"
+            "browserTarget": "wgenerator:build"
           },
           "configurations": {
             "production": {
-              "buildTarget": "wgenerator:build:production"
+              "browserTarget": "wgenerator:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "buildTarget": "wgenerator:build"
+            "browserTarget": "wgenerator:build"
           }
         },
         "test": {
@@ -148,13 +147,5 @@
     "schematicCollections": [
       "@angular-eslint/schematics"
     ]
-  },
-  "schematics": {
-    "@angular-eslint/schematics:application": {
-      "setParserOptionsProject": true
-    },
-    "@angular-eslint/schematics:library": {
-      "setParserOptionsProject": true
-    }
   }
 }

firebase.json

@@ -4,7 +4,7 @@
     "indexes": "firestore.indexes.json"
   },
   "hosting": {
-    "public": "dist/wgenerator/browser",
+    "public": "dist/wgenerator",
     "ignore": [
       "firebase.json",
       "**/.*",

firestore.rules

@@ -17,10 +17,6 @@ service cloud.firestore {
       allow read: if request.auth.uid != null;
     }
 
-    match /guest/{guestId} {
-      allow read: if true;
-      allow write: if request.auth.uid != null;
-    }
     match /songs/{song} {
       allow read: if request.auth.uid != null;
       allow write: if request.auth.uid != null;

package.json

@@ -1,70 +1,75 @@
 {
   "name": "wgenerator",
-  "version": "1.6",
+  "version": "1.3",
   "scripts": {
     "start": "ng serve",
     "build": "ng build",
     "deploy": "ng build --configuration production && firebase deploy",
     "test": "ng test",
     "lint": "ng lint --fix",
-    "update": "ng update @angular/cdk @angular/cli @angular/core @angular/material && ncu -u && npm i && npm fix"
+    "postinstall": "ngcc"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.0.5",
+    "@angular/animations": "^14.2.10",
-    "@angular/cdk": "^19.0.4",
+    "@angular/cdk": "^14.2.6",
-    "@angular/common": "^19.0.5",
+    "@angular/common": "^14.2.10",
-    "@angular/compiler": "^19.0.5",
+    "@angular/compiler": "^14.2.10",
-    "@angular/core": "^19.0.5",
+    "@angular/core": "^14.2.10",
-    "@angular/fire": "^18.0.1",
+    "@angular/fire": "^7.4.1",
-    "@angular/forms": "^19.0.5",
+    "@angular/forms": "^14.2.10",
-    "@angular/material": "^19.0.4",
+    "@angular/material": "^14.2.6",
-    "@angular/platform-browser": "^19.0.5",
+    "@angular/platform-browser": "^14.2.10",
-    "@angular/platform-browser-dynamic": "^19.0.5",
+    "@angular/platform-browser-dynamic": "^14.2.10",
-    "@angular/router": "^19.0.5",
+    "@angular/router": "^14.2.10",
-    "@angular/service-worker": "^19.0.5",
+    "@angular/service-worker": "^14.2.10",
-    "@fortawesome/angular-fontawesome": "^0.14.1",
+    "@fortawesome/angular-fontawesome": "^0.11.1",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.2",
-    "docx": "^8.5.0",
+    "docx": "^7.4.1",
-    "firebase": "^10.8.0",
+    "firebase": "^9.6.10",
     "lodash": "^4.17.21",
-    "ngx-mat-select-search": "^7.0.5",
+    "ngx-mat-select-search": "^4.2.1",
-    "qrcode": "^1.5.3",
+    "ngx-perfect-scrollbar": "^10.1.1",
-    "rxfire": "^6.0.5",
+    "rxfire": "^6.0.3",
-    "rxjs": "~7.8.1",
+    "rxjs": "~7.5.6",
-    "swiper": "^11.0.6",
+    "swiper": "^9.3.2",
-    "tslib": "^2.6.2",
+    "tslib": "^2.4.0",
-    "zone.js": "~0.15.0"
+    "uuid": "^8.3.2",
+    "zone.js": "~0.11.8"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1900.6",
+    "@angular-devkit/architect": "0.1402.9",
-    "@angular-devkit/build-angular": "^19.0.6",
+    "@angular-devkit/build-angular": "^14.2.9",
-    "@angular-eslint/builder": "19.0.2",
+    "@angular-eslint/builder": "14.1.2",
-    "@angular-eslint/eslint-plugin": "19.0.2",
+    "@angular-eslint/eslint-plugin": "14.1.2",
-    "@angular-eslint/eslint-plugin-template": "19.0.2",
+    "@angular-eslint/eslint-plugin-template": "14.1.2",
-    "@angular-eslint/schematics": "19.0.2",
+    "@angular-eslint/schematics": "14.1.2",
-    "@angular-eslint/template-parser": "19.0.2",
+    "@angular-eslint/template-parser": "14.1.2",
-    "@angular/cli": "^19.0.6",
+    "@angular/cli": "^14.2.9",
-    "@angular/compiler-cli": "^19.0.5",
+    "@angular/compiler-cli": "^14.2.10",
-    "@angular/language-service": "^19.0.5",
+    "@angular/language-service": "^14.2.10",
-    "@types/jasmine": "~5.1.4",
+    "@types/jasmine": "~4.0.3",
-    "@types/jasminewd2": "~2.0.13",
+    "@types/jasminewd2": "~2.0.10",
-    "@types/lodash": "^4.14.202",
+    "@types/lodash": "^4.14.182",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@typescript-eslint/parser": "^5.33.0",
-    "eslint": "^8.57.0",
+    "eslint": "^8.22.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^4.2.1",
-    "firebase-tools": "^13.3.1",
+    "firebase-tools": "^11.6.0",
-    "jasmine-core": "~5.1.2",
+    "fuzzy": "^0.1.3",
+    "inquirer": "^9.1.0",
+    "inquirer-autocomplete-prompt": "^2.0.0",
+    "jasmine-core": "~4.3.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.2",
+    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
+    "karma-chrome-launcher": "~3.1.1",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.1.0",
+    "karma-jasmine-html-reporter": "^2.0.0",
-    "prettier": "^3.2.5",
+    "prettier": "^2.7.1",
-    "typescript": "~5.5.4"
+    "protractor": "~7.0.0",
+    "typescript": "~4.7.4"
   }
 }

src/app/animations.ts

@@ -25,7 +25,7 @@ export const fader = trigger('fader', [
           transform: 'scale(1) translateY(-10px)',
         }),
       ],
-      {optional: true},
+      {optional: true}
     ),
     // Animate the new page in
     query(
@@ -36,10 +36,10 @@ export const fader = trigger('fader', [
           style({
             opacity: 1,
             transform: 'scale(1) translateY(0)',
-          }),
+          })
         ),
       ],
-      {optional: true},
+      {optional: true}
     ),
   ]),
 ]);

src/app/app-routing.module.ts

@@ -54,11 +54,9 @@ const routes: Routes = [
   imports: [
     RouterModule.forRoot(routes, {
       preloadingStrategy: PreloadAllModules,
-      scrollPositionRestoration: 'enabled',
+      relativeLinkResolution: 'legacy',
-      // relativeLinkResolution: 'legacy',
     }),
   ],
   exports: [RouterModule],
 })
-export class AppRoutingModule {
+export class AppRoutingModule {}
-}

src/app/app.component.html

@@ -1,6 +1,12 @@
 <app-navigation></app-navigation>
-
+<perfect-scrollbar
-<div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
+  #scrollbar
-  <router-outlet #o="outlet"></router-outlet>
+  (psScrollY)="onScoll($event)"
-</div>
+  [perfectScrollbar]
-
+  class="scroll"
+  style="max-height: calc(100vh); width: 100%; overflow: hidden"
+>
+  <div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
+    <router-outlet #o="outlet"></router-outlet>
+  </div>
+</perfect-scrollbar>

src/app/app.component.less

@@ -1,3 +1,10 @@
 h1 {
   color: red;
 }
+
+
+.manager {
+  //display: grid;
+  //grid-template-columns: 1fr 1fr;
+  //transition: all 1s ease-in-out;
+}

src/app/app.component.spec.ts

@@ -9,7 +9,7 @@ describe('AppComponent', () => {
         imports: [RouterTestingModule],
         declarations: [AppComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   it('should create the app', () => {

src/app/app.component.ts

@@ -1,6 +1,7 @@
-import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core';
 import {fader} from './animations';
 import {ScrollService} from './services/scroll.service';
+import {PerfectScrollbarComponent} from 'ngx-perfect-scrollbar';
 import {register} from 'swiper/element/bundle';
 
 @Component({
@@ -9,10 +10,14 @@ import {register} from 'swiper/element/bundle';
   styleUrls: ['./app.component.less'],
   animations: [fader],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
 })
 export class AppComponent implements OnInit {
+  @ViewChild('scrollbar', {static: false}) public scrollbar: PerfectScrollbarComponent | null = null;
+
   public constructor(private scrollService: ScrollService) {
+    scrollService.restoreScrollPosition$.subscribe(pos => {
+      if (this.scrollbar && pos) this.scrollbar.directiveRef?.scrollTo(0, pos, 300);
+    });
     register();
   }
 

src/app/app.module.ts

@@ -15,6 +15,7 @@ import {AngularFireAuthModule} from '@angular/fire/compat/auth';
 import {AngularFireAuthGuardModule} from '@angular/fire/compat/auth-guard';
 import {MAT_DATE_LOCALE} from '@angular/material/core';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
 
 @NgModule({
   declarations: [AppComponent],
@@ -36,9 +37,9 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
     AngularFireAuthModule,
     AngularFireAuthGuardModule,
     FontAwesomeModule,
+    PerfectScrollbarModule,
   ],
   providers: [{provide: MAT_DATE_LOCALE, useValue: 'de-DE'}],
   bootstrap: [AppComponent],
 })
-export class AppModule {
+export class AppModule {}
-}

src/app/modules/brand/brand.component.html

@@ -1,4 +1,4 @@
 <div class="brand">
   <app-logo></app-logo>
-  <div class="copyright">© 2019 - 2024 - Benjamin Ifland</div>
+  <div class="copyright">© 2019 - 2023 - Benjamin Ifland</div>
 </div>

src/app/modules/brand/brand.component.spec.ts

@@ -11,7 +11,7 @@ describe('BrandComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [BrandComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

src/app/modules/brand/brand.component.ts

@@ -4,7 +4,5 @@ import {Component} from '@angular/core';
   selector: 'app-brand',
   templateUrl: './brand.component.html',
   styleUrls: ['./brand.component.less'],
-  standalone: false,
 })
-export class BrandComponent {
+export class BrandComponent {}
-}

src/app/modules/brand/brand.module.ts

@@ -21,5 +21,4 @@ const routes: Routes = [
   declarations: [BrandComponent, NewUserComponent],
   imports: [CommonModule, RouterModule.forChild(routes), LogoModule],
 })
-export class BrandModule {
+export class BrandModule {}
-}

src/app/modules/brand/new-user/new-user.component.spec.ts

@@ -11,7 +11,7 @@ describe('NewUserComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [NewUserComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

src/app/modules/brand/new-user/new-user.component.ts

@@ -7,7 +7,6 @@ import {User} from '../../../services/user/user';
   selector: 'app-new-user',
   templateUrl: './new-user.component.html',
   styleUrls: ['./new-user.component.less'],
-  standalone: false,
 })
 export class NewUserComponent {
   public user$: Observable<User | null> | null = null;

src/app/modules/guest/guest-show-data.service.ts

@@ -1,23 +0,0 @@
-import {Injectable} from '@angular/core';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {map} from 'rxjs/operators';
-import {DbService} from 'src/app/services/db.service';
-import {GuestShow} from './guest-show';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class GuestShowDataService {
-  public list$: BehaviorSubject<GuestShow[]> = new BehaviorSubject<GuestShow[]>([]);
-  private collection = 'guest';
-
-  public constructor(private dbService: DbService) {
-    this.dbService.col$<GuestShow>(this.collection).subscribe(_ => this.list$.next(_));
-  }
-
-  public read$: (id: string) => Observable<GuestShow | null> = (id: string): Observable<GuestShow | null> => this.list$.pipe(map(_ => _.find(s => s.id === id) || null));
-  public update$: (id: string, data: Partial<GuestShow>) => Promise<void> = async (id: string, data: Partial<GuestShow>): Promise<void> =>
-    await this.dbService.doc(this.collection + '/' + id).update(data);
-  public add: (data: Partial<GuestShow>) => Promise<string> = async (data: Partial<GuestShow>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
-  public delete: (id: string) => Promise<void> = async (id: string): Promise<void> => await this.dbService.doc(this.collection + '/' + id).delete();
-}

src/app/modules/guest/guest-show.service.ts

@@ -1,33 +0,0 @@
-import {Injectable} from '@angular/core';
-import {Show} from '../shows/services/show';
-import {Song} from '../songs/services/song';
-import {GuestShowDataService} from './guest-show-data.service';
-import {ShowService} from '../shows/services/show.service';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class GuestShowService {
-  public constructor(
-    private showService: ShowService,
-    private guestShowDataService: GuestShowDataService,
-  ) {
-  }
-
-  public async share(show: Show, songs: Song[]): Promise<string> {
-    const data = {
-      showType: show.showType,
-      date: show.date,
-      songs: songs,
-    };
-
-    if (!show.shareId) {
-      const shareId = await this.guestShowDataService.add(data);
-      await this.showService.update$(show.id, {shareId});
-    } else {
-      await this.guestShowDataService.update$(show.shareId, data);
-    }
-
-    return window.location.protocol + '//' + window.location.host + '/guest/' + show.shareId;
-  }
-}

src/app/modules/guest/guest-show.ts

@@ -1,10 +0,0 @@
-import firebase from 'firebase/compat/app';
-import {Song} from '../songs/services/song';
-import Timestamp = firebase.firestore.Timestamp;
-
-export interface GuestShow {
-  id: string;
-  showType: string;
-  date: Timestamp;
-  songs: Song[];
-}

src/app/modules/guest/guest.component.html

@@ -1,25 +1,11 @@
-<div *ngIf="show$|async as show" class="page">
+<div *ngIf="songs$ | async as songs" class="view">
-  <div class="title">
+<!--  <swiper>-->
-    <div class="left">{{ show.showType|showType }}</div>
+<!--    <div *ngFor="let song of songs" class="song">-->
-    <div class="right">{{ show.date.toDate() | date: 'dd.MM.yyyy' }}</div>
+<!--      <app-song-text-->
-  </div>
+<!--        [showSwitch]="false"-->
-
+<!--        [text]="song"-->
-  <div class="view">
+<!--        chordMode="hide"-->
-    <swiper-container scrollbar="true">
+<!--      ></app-song-text>-->
-      <swiper-slide *ngFor="let song of show.songs; let i = index; trackBy: trackBy"
+<!--    </div>-->
-                    class="song-swipe">
+<!--  </swiper>-->
-        <div class="song-title">{{ song.title }}</div>
-
-        <div class="legal">
-          <p *ngIf="song.artist">{{ song.artist }}</p>
-        </div>
-
-        <app-song-text
-          [text]="song.text"
-        ></app-song-text>
-      </swiper-slide>
-    </swiper-container>
-  </div>
 </div>
-
-

src/app/modules/guest/guest.component.less

@@ -1,49 +1,12 @@
-.page {
-  background: #0009;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  backdrop-filter: blur(8px);
-
-  --swiper-scrollbar-bg-color: #fff3;
-  --swiper-scrollbar-drag-bg-color: #fff9;
-  --swiper-scrollbar-sides-offset: 20px;
-  --swiper-scrollbar-top: 100px;
-  --swiper-scrollbar-bottom: auto;
-}
-
-.title {
-  color: white;
-  padding: 70px 20px 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .left {
-    font-size: 1.8em;
-    color: #fff;
-  }
-}
-
-.song-title {
-  padding: 20px 20px 0;
-  font-size: 1.3em;
-}
-
-.legal {
-  padding: 0 20px;
-  font-size: 0.6em;
-  color: #fff9;
-}
-
 .view {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
+  background: #0003;
+  backdrop-filter: blur(10px);
+  z-index: 1;
   color: white;
 }
 
@@ -51,9 +14,3 @@ app-song-text {
   margin: 20px;
   display: block;
 }
-
-.song-swipe {
-  margin-top: 100px;
-  margin-bottom: 50px;
-  min-height: calc(100vh - 150px);
-}

src/app/modules/guest/guest.component.spec.ts

@@ -11,7 +11,7 @@ describe('GuestComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [GuestComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

src/app/modules/guest/guest.component.ts

@@ -1,29 +1,32 @@
 import {Component} from '@angular/core';
-import {GuestShowDataService} from './guest-show-data.service';
+import {SongService} from '../songs/services/song.service';
-import {ActivatedRoute} from '@angular/router';
+import {GlobalSettingsService} from '../../services/global-settings.service';
-import {map, switchMap} from 'rxjs/operators';
+import {Observable} from 'rxjs';
-import {Song} from '../songs/services/song';
+import {filter, map, switchMap} from 'rxjs/operators';
-import {ConfigService} from '../../services/config.service';
+import {ShowSongService} from '../shows/services/show-song.service';
+import {GlobalSettings} from '../../services/global-settings';
+import {ShowService} from '../shows/services/show.service';
 
 @Component({
   selector: 'app-guest',
   templateUrl: './guest.component.html',
   styleUrls: ['./guest.component.less'],
-  standalone: false,
 })
 export class GuestComponent {
-  public show$ = this.currentRoute.params.pipe(
+  public songs$: Observable<string[]> = this.globalSettingsService.get$.pipe(
-    map(param => param.id as string),
+    filter(_ => !!_),
-    switchMap(id => this.service.read$(id)),
+    map(_ => _ as GlobalSettings),
+    map(_ => _.currentShow),
+    switchMap(_ => this.showSongService.list$(_).pipe(map(l => ({showSongs: l, currentShow: _})))),
+    switchMap(_ => this.showService.read$(_.currentShow).pipe(map(l => ({showSongs: _.showSongs, show: l})))),
+    filter(_ => !!_.showSongs),
+    map(_ => (_?.show ? _.show.order.map(o => _.showSongs.find(f => f.id === o) ?? _.showSongs[0]).map(m => m.text) : []))
   );
-  public config$ = this.configService.get$();
 
   public constructor(
-    private currentRoute: ActivatedRoute,
+    private songService: SongService,
-    private service: GuestShowDataService,
+    private showService: ShowService,
-    private configService: ConfigService,
+    private globalSettingsService: GlobalSettingsService,
-  ) {
+    private showSongService: ShowSongService
-  }
+  ) {}
-
-  public trackBy = (index: number, show: Song) => show.id;
 }

src/app/modules/guest/guest.module.ts

@@ -1,23 +1,11 @@
-import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
+import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {GuestComponent} from './guest.component';
 import {RouterModule} from '@angular/router';
-import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
+import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
-import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
 
 @NgModule({
   declarations: [GuestComponent],
-  imports: [
+  imports: [CommonModule, RouterModule.forChild([{path: '', component: GuestComponent}]), SongTextModule],
-    CommonModule,
-    RouterModule.forChild([
-      {
-        path: ':id',
-        component: GuestComponent,
-      },
-    ]),
-    SongTextComponent,
-    ShowTypeTranslaterModule,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class GuestModule {}

src/app/modules/presentation/monitor/legal/legal.component.spec.ts

@@ -11,7 +11,7 @@ describe('LegalComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [LegalComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

src/app/modules/presentation/monitor/legal/legal.component.ts

@@ -6,7 +6,6 @@ import {Config} from '../../../../services/config';
   selector: 'app-legal',
   templateUrl: './legal.component.html',
   styleUrls: ['./legal.component.less'],
-  standalone: false,
 })
 export class LegalComponent {
   @Input() public song: Song | null = null;

src/app/modules/presentation/monitor/logo/logo.component.spec.ts

@@ -11,7 +11,7 @@ describe('LogoComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [LogoComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

src/app/modules/presentation/monitor/logo/logo.component.ts

@@ -4,7 +4,5 @@ import {Component} from '@angular/core';
   selector: 'app-logo',
   templateUrl: './logo.component.html',
   styleUrls: ['./logo.component.less'],
-  standalone: false,
 })
-export class LogoComponent {
+export class LogoComponent {}
-}

src/app/modules/presentation/monitor/monitor.component.html

@@ -1,18 +1,18 @@
 <div class="fullscreen background"></div>
 <div *ngIf="song && showType" [style.font-size.px]="zoom" class="fullscreen background">
 
-  <div [class.visible]="presentationBackground==='blue'" class="bg-blue fullscreen bg-image"></div>
+  <div class="bg-blue fullscreen bg-image" [class.visible]="presentationBackground==='blue'"></div>
-  <div [class.visible]="presentationBackground==='green'" class="bg-green fullscreen bg-image"></div>
+  <div class="bg-green fullscreen bg-image" [class.visible]="presentationBackground==='green'"></div>
-  <div [class.visible]="presentationBackground==='leder'" class="bg-leder fullscreen bg-image"></div>
+  <div class="bg-leder fullscreen bg-image" [class.visible]="presentationBackground==='leder'"></div>
-  <div [class.visible]="presentationBackground==='praise'" class="bg-praise fullscreen bg-image"></div>
+  <div class="bg-praise fullscreen bg-image" [class.visible]="presentationBackground==='praise'"></div>
-  <div [class.visible]="presentationBackground==='bible'" class="bg-bible fullscreen bg-image"></div>
+  <div class="bg-bible fullscreen bg-image" [class.visible]="presentationBackground==='bible'"></div>
 
 
   <div
     [@songSwitch]="songId"
     [class.blur]="songId === 'title' || songId === 'dynamicText'"
-    [class.hide]="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
     [class.no-logo]="presentationBackground!=='none'"
+    [class.hide]="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
     class="start fullscreen logo"
   >
     <app-logo></app-logo>
@@ -29,13 +29,12 @@
   </div>
 
   <app-song-text
+    [header]="song.title"
     *ngIf="songId !== 'title' && songId !== 'empty'"
     [@songSwitch]="songId"
     [fullscreen]="true"
-    [header]="song.title"
     [index]="index??0"
     [showSwitch]="false"
-    [showComments]="false"
     [text]="song.text"
     chordMode="hide"
   ></app-song-text>

src/app/modules/presentation/monitor/monitor.component.less

@@ -34,7 +34,6 @@
 .bg-blue {
   background-image: url("/assets/bg-dark-blue.jpg");
   filter: blur(10px);
-
   &.visible {
     opacity: 0.5;
   }
@@ -43,7 +42,6 @@
 .bg-green {
   background-image: url("/assets/bg-dark-green.jpg");
   filter: blur(5px);
-
   &.visible {
     opacity: 0.9;
   }
@@ -52,7 +50,6 @@
 .bg-leder {
   background-image: url("/assets/bg-leder.jpg");
   filter: blur(5px);
-
   &.visible {
     opacity: 0.4;
   }
@@ -61,7 +58,6 @@
 .bg-praise {
   background-image: url("/assets/bg-praise.jpg");
   filter: blur(8px);
-
   &.visible {
     opacity: 0.2;
   }
@@ -70,7 +66,6 @@
 .bg-bible {
   background-image: url("/assets/bg-bible.jpg");
   filter: blur(8px);
-
   &.visible {
     opacity: 0.2;
   }

src/app/modules/presentation/monitor/monitor.component.spec.ts

@@ -11,7 +11,7 @@ describe('MonitorComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [MonitorComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

src/app/modules/presentation/monitor/monitor.component.ts

@@ -19,7 +19,6 @@ import {openFullscreen} from '../../../services/fullscreen';
   templateUrl: './monitor.component.html',
   styleUrls: ['./monitor.component.less'],
   animations: [songSwitch],
-  standalone: false,
 })
 export class MonitorComponent implements OnInit {
   public song: Song | null = null;
@@ -41,7 +40,7 @@ export class MonitorComponent implements OnInit {
     private textRenderingService: TextRenderingService,
     private globalSettingsService: GlobalSettingsService,
     private configService: ConfigService,
-    private cRef: ChangeDetectorRef,
+    private cRef: ChangeDetectorRef
   ) {
     this.config$ = configService.get$();
   }
@@ -55,7 +54,7 @@ export class MonitorComponent implements OnInit {
         map(_ => _ as GlobalSettings),
         map(_ => _.currentShow),
         distinctUntilChanged(),
-        tap(_ => (this.currentShowId = _)),
+        tap(_ => (this.currentShowId = _))
       )
       .pipe(
         switchMap(_ => this.showService.read$(_)),
@@ -77,7 +76,7 @@ export class MonitorComponent implements OnInit {
         }),
         switchMap((_: Show) => this.showSongService.read$(_.id, _.presentationSongId)),
         filter(_ => !!_),
-        map(_ => _ as Song),
+        map(_ => _ as Song)
       )
       .subscribe(_ => {
         this.song = _;

src/app/modules/presentation/presentation-routing.module.ts

@@ -28,5 +28,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class PresentationRoutingModule {
+export class PresentationRoutingModule {}
-}

src/app/modules/presentation/presentation.module.ts

@@ -9,17 +9,17 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
 import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 import {SectionTypeTranslatorModule} from '../../widget-modules/pipes/section-type-translator/section-type-translator.module';
+import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
 import {LegalComponent} from './monitor/legal/legal.component';
 import {MatButtonModule} from '@angular/material/button';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MatSliderModule} from '@angular/material/slider';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
 import {LogoComponent} from './monitor/logo/logo.component';
 import {SelectComponent} from './select/select.component';
 import {MatInputModule} from '@angular/material/input';
 import {UserNameModule} from '../../services/user/user-name/user-name.module';
-import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
-import {AddSongComponent} from '../../widget-modules/components/add-song/add-song.component';
 
 @NgModule({
   declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent, SelectComponent],
@@ -32,12 +32,12 @@ import {AddSongComponent} from '../../widget-modules/components/add-song/add-son
     MatSelectModule,
     ShowTypeTranslaterModule,
     SectionTypeTranslatorModule,
-    SongTextComponent,
+    SongTextModule,
     MatButtonModule,
     FontAwesomeModule,
     MatSliderModule,
     FormsModule,
-    AddSongComponent,
+    AddSongModule,
     ReactiveFormsModule,
     MatInputModule,
     UserNameModule,

src/app/modules/presentation/remote/remote.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="show" @fade>
-  <app-card [closeIcon]="faIcon" [heading]="show.showType | showType"
+  <app-card [heading]="show.showType | showType" [subheading]="show.date.toDate() | date:'dd.MM.yyyy'"
-            [subheading]="show.date.toDate() | date:'dd.MM.yyyy'" closeLink="/presentation/select">
+            closeLink="/presentation/select" [closeIcon]="faIcon">
 
     <ng-container *ngIf="!progress">
       <div class="song">
@@ -61,8 +61,7 @@
 
         <mat-form-field appearance="outline">
           <mat-label>Überschrift</mat-label>
-          <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption"
+          <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption" autocomplete="off" id="dynamic-caption"
-                 autocomplete="off" id="dynamic-caption"
                  matInput
                  type="text">
         </mat-form-field>
@@ -78,7 +77,7 @@
 
       <div *ngIf="show" class="div-bottom">
 
-        <button class="btn-start-presentation" mat-button routerLink="/presentation/monitor">
+        <button routerLink="/presentation/monitor" mat-button>
           <fa-icon [icon]="faDesktop"></fa-icon>
           Präsentation starten
         </button>
@@ -87,8 +86,8 @@
         <mat-form-field appearance="outline">
           <mat-label>Hintergrund</mat-label>
           <mat-select
-            (ngModelChange)="onBackground($event, show.id)"
+            [ngModel]="show.presentationBackground"
-            [ngModel]="show.presentationBackground">
+            (ngModelChange)="onBackground($event, show.id)">
             <mat-option value="none">kein Hintergrund</mat-option>
             <mat-option value="blue">Sternenhimmel</mat-option>
             <mat-option value="green">Blätter</mat-option>
@@ -99,27 +98,25 @@
         </mat-form-field>
 
         <mat-slider
-          #slider
+          (ngModelChange)="onZoom($event, show.id)"
           [max]="100"
           [min]="10"
+          [ngModel]="show.presentationZoom"
           [step]="2"
-          class="zoom-slider"
+          [thumbLabel]="true"
           color="primary"
-          ngDefaultControl
+          class="zoom-slider"
-        ><input (ngModelChange)="onZoom($event, show.id)"
+        >
-                [ngModel]="show.presentationZoom"
-                matSliderThumb>
         </mat-slider>
 
-
       </div>
 
       <app-add-song
         *ngIf="show"
         [addedLive]="true"
         [showSongs]="showSongs"
-        [show]="show"
         [songs]="songs$|async"
+        [show]="show"
       ></app-add-song>
     </ng-container>
   </app-card>

src/app/modules/presentation/remote/remote.component.less

@@ -47,17 +47,21 @@
   outline: 0.5px solid #eee;
 
   &:hover {
-    outline: 0.5px solid var(--color-primary-light);
+    .card-1;
+    outline: 0 solid transparent;
   }
 
   &.active {
-    outline: 0.5px solid var(--color-primary);
+    .card-2;
+    outline: 0 solid transparent;
 
     .head {
-      background-color: var(--color-primary);
+      background: #4286f4;
       color: white;
     }
 
+    .fragment {
+    }
   }
 }
 
@@ -75,11 +79,7 @@
 .div-bottom {
   display: grid;
   gap: 20px;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: min-content min-content auto;
-
-  .btn-start-presentation {
-    height: 56px;
-  }
 
   @media screen and (max-width: 860px) {
     gap: 10px;

src/app/modules/presentation/remote/remote.component.spec.ts

@@ -11,7 +11,7 @@ describe('RemoteComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [RemoteComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

src/app/modules/presentation/remote/remote.component.ts

@@ -12,7 +12,6 @@ import {fade} from '../../../animations';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Section} from '../../songs/services/section';
 import {GlobalSettings} from '../../../services/global-settings';
-import {LineType} from '../../songs/services/line-type';
 
 export interface PresentationSong {
   id: string;
@@ -26,7 +25,6 @@ export interface PresentationSong {
   styleUrls: ['./remote.component.less'],
   animations: [fade],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
 })
 export class RemoteComponent {
   public show: Show | null = null;
@@ -37,37 +35,13 @@ export class RemoteComponent {
   public faIcon = faFolderOpen;
 
   public faDesktop = faDesktop;
-  public presentationDynamicCaptionChanged$ = new Subject<{presentationDynamicCaption: string; showId: string}>();
-  public presentationDynamicTextChanged$ = new Subject<{presentationDynamicText: string; showId: string}>();
-
-  public constructor(
-    private showService: ShowService,
-    private showSongService: ShowSongService,
-    private songService: SongService,
-    private textRenderingService: TextRenderingService,
-    globalSettingsService: GlobalSettingsService,
-    private cRef: ChangeDetectorRef,
-  ) {
-    globalSettingsService.get$
-      .pipe(
-        filter(_ => !!_),
-        map(_ => _.currentShow),
-      )
-      .subscribe(_ => {
-        this.onShowChanged(_);
-        this.cRef.markForCheck();
-      });
-
-    this.presentationDynamicCaptionChanged$
-      .pipe(debounceTime(1000))
-      .subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicCaption: _.presentationDynamicCaption}));
-    this.presentationDynamicTextChanged$.pipe(debounceTime(1000)).subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicText: _.presentationDynamicText}));
-  }
 
   public trackBy(index: number, item: PresentationSong): string {
     return item.id;
   }
 
+  public presentationDynamicCaptionChanged$ = new Subject<{presentationDynamicCaption: string; showId: string}>();
+
   public onShowChanged(change: string): void {
     combineLatest([this.showService.read$(change), this.showSongService.list$(change)]).subscribe(([show, list]) => {
       this.showSongs = list;
@@ -75,7 +49,7 @@ export class RemoteComponent {
       const presentationSongs = list.map(song => ({
         id: song.id,
         title: song.title,
-        sections: this.textRenderingService.parse(song.text, null, false),
+        sections: this.textRenderingService.parse(song.text, null),
       }));
       this.presentationSongs = show?.order.map(_ => presentationSongs.filter(f => f.id === _)[0]) ?? [];
       this.cRef.markForCheck();
@@ -83,7 +57,7 @@ export class RemoteComponent {
   }
 
   public getFirstLine(section: Section): string {
-    return section.lines.filter(_ => _.type === LineType.text)[0].text;
+    return section.lines.filter(_ => _.type === 1)[0].text;
   }
 
   public async onSectionClick(id: string, index: number, showId: string): Promise<void> {
@@ -100,6 +74,32 @@ export class RemoteComponent {
   public async onBackground(presentationBackground: PresentationBackground, showId: string): Promise<void> {
     await this.showService.update$(showId, {presentationBackground});
   }
+  public presentationDynamicTextChanged$ = new Subject<{presentationDynamicText: string; showId: string}>();
+
+  public constructor(
+    private showService: ShowService,
+    private showSongService: ShowSongService,
+    private songService: SongService,
+    private textRenderingService: TextRenderingService,
+    private globalSettingsService: GlobalSettingsService,
+    private cRef: ChangeDetectorRef
+  ) {
+    globalSettingsService.get$
+      .pipe(
+        filter(_ => !!_),
+        map(_ => _ as GlobalSettings),
+        map(_ => _.currentShow)
+      )
+      .subscribe(_ => {
+        this.onShowChanged(_);
+        this.cRef.markForCheck();
+      });
+
+    this.presentationDynamicCaptionChanged$
+      .pipe(debounceTime(1000))
+      .subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicCaption: _.presentationDynamicCaption}));
+    this.presentationDynamicTextChanged$.pipe(debounceTime(1000)).subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicText: _.presentationDynamicText}));
+  }
 
   public onDynamicCaption(presentationDynamicCaption: string, showId: string): void {
     this.presentationDynamicCaptionChanged$.next({presentationDynamicCaption, showId});

src/app/modules/presentation/select/select.component.html

@@ -1,11 +1,11 @@
 <div *ngIf="shows$ | async as shows" @fade>
-  <app-card *ngIf="visible" heading="Bitte eine Veranstaltung auswählen">
+  <app-card heading="Bitte eine Veranstaltung auswählen" *ngIf="visible">
     <p *ngIf="!shows.length">
       Es ist derzeit keine Veranstaltung vorhanden
     </p>
 
     <div *ngIf="shows.length>0" class="list">
-      <button (click)="selectShow(show)" *ngFor="let show of shows" mat-stroked-button>
+      <button mat-stroked-button *ngFor="let show of shows" (click)="selectShow(show)">
         <app-user-name [userId]="show.owner"></app-user-name>
         ,
         {{ show.showType | showType }},

src/app/modules/presentation/select/select.component.ts

@@ -11,17 +11,15 @@ import {fade} from '../../../animations';
   templateUrl: './select.component.html',
   styleUrls: ['./select.component.less'],
   animations: [fade],
-  standalone: false,
 })
 export class SelectComponent implements OnInit {
+  public constructor(private showService: ShowService, private globalSettingsService: GlobalSettingsService, private router: Router) {}
   public visible = false;
+
   public shows$ = this.showService
     .list$(true)
     .pipe(map(_ => _.filter(_ => _.date.toDate() > new Date(new Date().setMonth(new Date().getMonth() - 1))).sort((a, b) => (b.date < a.date ? -1 : b.date > a.date ? 1 : 0))));
 
-  public constructor(private showService: ShowService, private globalSettingsService: GlobalSettingsService, private router: Router) {
-  }
-
   public async selectShow(show: Show) {
     this.visible = false;
 

src/app/modules/presentation/services/presentation.service.ts

@@ -3,5 +3,4 @@ import {Injectable} from '@angular/core';
 @Injectable({
   providedIn: 'root',
 })
-export class PresentationService {
+export class PresentationService {}
-}

src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.ts

@@ -4,7 +4,5 @@ import {Component} from '@angular/core';
   selector: 'app-archive-dialog',
   templateUrl: './archive-dialog.component.html',
   styleUrls: ['./archive-dialog.component.less'],
-  standalone: false,
 })
-export class ArchiveDialogComponent {
+export class ArchiveDialogComponent {}
-}

src/app/modules/shows/dialog/share-dialog/share-dialog.component.html

@@ -1,13 +0,0 @@
-<div mat-dialog-content>
-  <a [href]="data.url">{{ data.url }}</a>
-  <div [style.background-image]="'url('+qrCode+')'" alt="qrcode" class="qrcode">
-  </div>
-</div>
-<div mat-dialog-actions>
-  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>
-    Schließen
-  </button>
-  <button (click)="share()" mat-button>
-    Teilen
-  </button>
-</div>

src/app/modules/shows/dialog/share-dialog/share-dialog.component.less

@@ -1,7 +0,0 @@
-.qrcode {
-  width: 300px;
-  height: 300px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-}

src/app/modules/shows/dialog/share-dialog/share-dialog.component.ts

@@ -1,47 +0,0 @@
-import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
-import {MatButton} from '@angular/material/button';
-import QRCode from 'qrcode';
-import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
-import {Show} from '../../services/show';
-
-export interface ShareDialogData {
-  url: string;
-  show: Show;
-}
-
-@Component({
-  selector: 'app-share-dialog',
-  imports: [MatButton, MatDialogActions, MatDialogContent, MatDialogClose],
-  templateUrl: './share-dialog.component.html',
-  styleUrl: './share-dialog.component.less',
-})
-export class ShareDialogComponent {
-  public qrCode: string;
-
-  public constructor(@Inject(MAT_DIALOG_DATA) public data: ShareDialogData) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
-    QRCode.toDataURL(data.url, {
-      type: 'image/jpeg',
-      quality: 0.92,
-      width: 1280,
-      height: 1280,
-      color: {
-        dark: '#010414',
-        light: '#ffffff',
-      },
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-return
-    }).then(_ => (this.qrCode = _));
-  }
-
-  public async share() {
-    if (navigator.clipboard) await navigator.clipboard.writeText(this.data.url);
-
-    if (navigator.share)
-      await navigator.share({
-        title: new ShowTypePipe().transform(this.data.show.showType),
-        text: new ShowTypePipe().transform(this.data.show.showType) + ' am ' + this.data.show.date.toDate().toLocaleString('de'),
-        url: this.data.url,
-      });
-  }
-}

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

@@ -6,21 +6,19 @@
         <mat-select formControlName="showType">
           <mat-optgroup label="öffentlich">
             <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
-                key | showType
+              key | showType
-              }}
+              }}</mat-option>
-            </mat-option>
           </mat-optgroup>
           <mat-optgroup label="privat">
             <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
-                key | showType
+              key | showType
-              }}
+              }}</mat-option>
-            </mat-option>
           </mat-optgroup>
         </mat-select>
       </mat-form-field>
       <mat-form-field appearance="outline">
         <mat-label>Datum</mat-label>
-        <input [matDatepicker]="picker" formControlName="date" matInput />
+        <input [matDatepicker]="picker" formControlName="date" matInput/>
         <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
         <mat-datepicker #picker touchUi></mat-datepicker>
       </mat-form-field>

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

@@ -7,14 +7,11 @@ import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
 import {map, switchMap} from 'rxjs/operators';
-import firebase from 'firebase/compat/app';
-import Timestamp = firebase.firestore.Timestamp;
 
 @Component({
   selector: 'app-edit',
   templateUrl: './edit.component.html',
   styleUrls: ['./edit.component.less'],
-  standalone: false,
 })
 export class EditComponent implements OnInit {
   public shows$: Observable<Show[]>;
@@ -39,7 +36,7 @@ export class EditComponent implements OnInit {
         map(param => param as {showId: string}),
         map(param => param.showId),
         switchMap((showId: string) => this.showService.read$(showId)),
-        take(1),
+        take(1)
       )
       .subscribe(show => {
         this.form.setValue({
@@ -59,9 +56,9 @@ export class EditComponent implements OnInit {
     await this.showService.update$(
       this.form.value.id as string,
       {
-        date: Timestamp.fromDate(this.form.value.date),
+        date: this.form.value.date,
         showType: this.form.value.showType,
-      } as Partial<Show>,
+      } as Partial<Show>
     );
     await this.router.navigateByUrl(`/shows/${this.form.value.id ?? ''}`);
   }

src/app/modules/shows/list/filter/filter-values.ts

@@ -1,5 +1,3 @@
 export interface FilterValues {
   time: number;
-  owner: string;
-  showType: string;
 }

src/app/modules/shows/list/filter/filter.component.html

@@ -5,37 +5,8 @@
       <mat-label>Zeitraum</mat-label>
       <mat-select formControlName="time">
         <mat-option *ngFor="let time of times" [value]="time.key">{{
-            time.value
+          time.value
-          }}
+          }}</mat-option>
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-
-    <mat-form-field appearance="outline">
-      <mat-label>Ersteller</mat-label>
-      <mat-select formControlName="owner">
-        <mat-option *ngFor="let owner of owners" [value]="owner.key">{{
-            owner.value
-          }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-
-    <mat-form-field appearance="outline">
-      <mat-label>Art der Veranstaltung</mat-label>
-      <mat-select formControlName="showType">
-        <mat-optgroup label="öffentlich">
-          <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
-              key | showType
-            }}
-          </mat-option>
-        </mat-optgroup>
-        <mat-optgroup label="privat">
-          <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
-              key | showType
-            }}
-          </mat-option>
-        </mat-optgroup>
       </mat-select>
     </mat-form-field>
 

src/app/modules/shows/list/filter/filter.component.less

@@ -1,5 +1,5 @@
 .third {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
   column-gap: 20px;
 }

src/app/modules/shows/list/filter/filter.component.ts

@@ -4,26 +4,16 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {FilterValues} from './filter-values';
 import {Show} from '../../services/show';
-import {ShowService} from '../../services/show.service';
-import {distinctUntilChanged, map} from 'rxjs/operators';
-import {combineLatest, Observable} from 'rxjs';
-import {dynamicSort, onlyUnique} from '../../../../services/filter.helper';
-import {UserService} from '../../../../services/user/user.service';
-import {isEqual} from 'lodash';
 
 @Component({
   selector: 'app-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.less'],
-  standalone: false,
 })
 export class FilterComponent {
   @Input() public route = '/shows/';
   @Input() public shows: Show[] = [];
 
-  public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
-  public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
-
   public filterFormGroup: UntypedFormGroup;
   public times: KeyValue<number, string>[] = [
     {key: 1, value: 'letzter Monat'},
@@ -32,19 +22,9 @@ export class FilterComponent {
     {key: 99999, value: 'alle'},
   ];
 
-  public owners: {key: string; value: string}[] = [];
+  public constructor(private router: Router, activatedRoute: ActivatedRoute, fb: UntypedFormBuilder) {
-
-  public constructor(
-    private router: Router,
-    private showService: ShowService,
-    private userService: UserService,
-    activatedRoute: ActivatedRoute,
-    fb: UntypedFormBuilder,
-  ) {
     this.filterFormGroup = fb.group({
       time: 1,
-      owner: null,
-      showType: null,
     });
 
     activatedRoute.queryParams.subscribe(params => {
@@ -53,34 +33,8 @@ export class FilterComponent {
     });
 
     this.filterFormGroup.controls.time.valueChanges.subscribe(_ => void this.filerValueChanged('time', _ as number));
-    this.filterFormGroup.controls.owner.valueChanges.subscribe(_ => void this.filerValueChanged('owner', _ as string));
-    this.filterFormGroup.controls.showType.valueChanges.subscribe(_ => void this.filerValueChanged('showType', _ as string));
-
-    this.owners$().subscribe(owners => (this.owners = owners));
   }
 
-  public owners$ = (): Observable<{key: string; value: string}[]> => {
-    return combineLatest([
-      this.showService.list$().pipe(
-        map(shows => {
-          return shows.map(show => show.owner).filter(onlyUnique);
-        }),
-      ),
-      this.userService.users$,
-    ]).pipe(
-      map(([owners, users]) => {
-        return owners
-          .map(ownerId => ({
-            key: ownerId,
-            value: users.find(user => user.id === ownerId)?.name,
-          }))
-          .sort(dynamicSort('value'));
-      }),
-      distinctUntilChanged(isEqual),
-      map(_ => _ as {key: string; value: string}[]),
-    );
-  };
-
   private async filerValueChanged<T>(key: string, value: T): Promise<void> {
     const route = this.router.createUrlTree([this.route], {
       queryParams: {[key]: value},

src/app/modules/shows/list/list-item/list-item.component.html

@@ -1,7 +1,5 @@
-<div *ngIf="show" class="list-item">
+<div class="list-item" *ngIf="show">
   <div>{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
-  <div>
+  <div><app-user-name [userId]="show.owner"></app-user-name></div>
-    <app-user-name [userId]="show.owner"></app-user-name>
-  </div>
   <div>{{ show.showType | showType }}</div>
 </div>

src/app/modules/shows/list/list-item/list-item.component.spec.ts

@@ -11,7 +11,7 @@ describe('ListItemComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [ListItemComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

src/app/modules/shows/list/list-item/list-item.component.ts

@@ -5,7 +5,6 @@ import {Show} from '../../services/show';
   selector: 'app-list-item',
   templateUrl: './list-item.component.html',
   styleUrls: ['./list-item.component.less'],
-  standalone: false,
 })
 export class ListItemComponent {
   @Input() public show: Show | null = null;

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

@@ -1,5 +1,5 @@
 <div>
-  <!--  <app-list-header *appRole="['leader']"></app-list-header>-->
+<!--  <app-list-header *appRole="['leader']"></app-list-header>-->
   <app-list-header *appRole="['leader']">
     <app-filter *ngIf="shows$ | async as shows" [shows]="publicShows$ | async"></app-filter>
   </app-list-header>
@@ -9,7 +9,7 @@
       <app-card
         *ngIf="shows.length > 0"
         [padding]="false"
-        heading="Meine Veranstaltungen"
+        heading="meine Veranstaltungen"
       >
         <app-list-item
           *ngFor="let show of shows | sortBy: 'desc':'date'"
@@ -24,7 +24,7 @@
     <app-card
       *ngIf="shows.length > 0"
       [padding]="false"
-      heading="Veröffentlichte Veranstaltungen"
+      heading="veröffentlichte Veranstaltungen"
     >
       <app-list-item
         *ngFor="let show of shows | sortBy: 'desc':'date'; trackBy: trackBy"

src/app/modules/shows/list/list.component.spec.ts

@@ -11,7 +11,7 @@ describe('ListComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [ListComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

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

@@ -12,7 +12,6 @@ import {map} from 'rxjs/operators';
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.less'],
   animations: [fade],
-  standalone: false,
 })
 export class ListComponent {
   public shows$ = this.showService.list$();
@@ -22,32 +21,20 @@ export class ListComponent {
       const filterValues = params as FilterValues;
       if (!filterValues?.time) return 1;
       return +filterValues.time;
-    }),
+    })
-  );
-  public owner$ = this.activatedRoute.queryParams.pipe(
-    map(params => {
-      const filterValues = params as FilterValues;
-      return filterValues?.owner;
-    }),
   );
 
-  public publicShows$ = combineLatest([this.shows$, this.lastMonths$, this.owner$]).pipe(
+  public publicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
-    map(([shows, lastMonths, owner]) =>
+    map(_ =>
-      shows
+      _[0].filter(f => {
-        .filter(f => {
+        const d = new Date();
-          const d = new Date();
+        d.setMonth(d.getMonth() - _[1]);
-          d.setMonth(d.getMonth() - lastMonths);
+        return f.published && f.date.toDate() >= d;
-          return f.published && f.date.toDate() >= d;
+      })
-        })
+    )
-        .filter(show => !owner || show.owner === owner),
-    ),
   );
 
-  public constructor(
+  public constructor(private showService: ShowService, private activatedRoute: ActivatedRoute) {}
-    private showService: ShowService,
-    private activatedRoute: ActivatedRoute,
-  ) {
-  }
 
   public trackBy = (index: number, show: unknown) => (show as Show).id;
 }

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

@@ -6,21 +6,19 @@
         <mat-select formControlName="showType">
           <mat-optgroup label="öffentlich">
             <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
-                key | showType
+              key | showType
-              }}
+              }}</mat-option>
-            </mat-option>
           </mat-optgroup>
           <mat-optgroup label="privat">
             <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
-                key | showType
+              key | showType
-              }}
+              }}</mat-option>
-            </mat-option>
           </mat-optgroup>
         </mat-select>
       </mat-form-field>
       <mat-form-field appearance="outline">
         <mat-label>Datum</mat-label>
-        <input [matDatepicker]="picker" formControlName="date" matInput />
+        <input [matDatepicker]="picker" formControlName="date" matInput/>
         <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
         <mat-datepicker #picker touchUi></mat-datepicker>
       </mat-form-field>

src/app/modules/shows/new/new.component.spec.ts

@@ -11,7 +11,7 @@ describe('NewComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [NewComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

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

@@ -11,7 +11,6 @@ import {faSave} from '@fortawesome/free-solid-svg-icons';
   selector: 'app-new',
   templateUrl: './new.component.html',
   styleUrls: ['./new.component.less'],
-  standalone: false,
 })
 export class NewComponent implements OnInit {
   public shows$: Observable<Show[]>;
@@ -23,11 +22,7 @@ export class NewComponent implements OnInit {
   });
   public faSave = faSave;
 
-  public constructor(
+  public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
-    private showService: ShowService,
-    showDataService: ShowDataService,
-    private router: Router,
-  ) {
     this.shows$ = showDataService.list$;
   }
 

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

@@ -30,9 +30,10 @@ export class DocxService {
   public constructor(
     private showService: ShowService,
     private showSongService: ShowSongService,
+    private songService: SongService,
     private textRenderingService: TextRenderingService,
     private userService: UserService,
-    private configService: ConfigService,
+    private configService: ConfigService
   ) {}
 
   public async create(showId: string, options: DownloadOptions = {}): Promise<void> {
@@ -93,14 +94,7 @@ export class DocxService {
     });
   }
 
-  private renderSongs(
+  private renderSongs(songs: {showSong: ShowSong; sections: Section[]}[], options: DownloadOptions, config: Config): Paragraph[] {
-    songs: {
-      showSong: ShowSong;
-      sections: Section[];
-    }[],
-    options: DownloadOptions,
-    config: Config
-  ): Paragraph[] {
     return songs.reduce((p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.showSong, song.sections, options, config)], []);
   }
 
@@ -205,15 +199,7 @@ export class DocxService {
         sections,
       };
     });
-    const songsLoaded = (await Promise.all(songsAsync))
+    const songsLoaded = (await Promise.all(songsAsync)).filter(_ => !!_).map(_ => _ as {showSong: ShowSong; sections: Section[]});
-      .filter(_ => !!_)
-      .map(
-        _ =>
-          _ as {
-            showSong: ShowSong;
-            sections: Section[];
-          }
-      );
     const songs = show.order.map(_ => songsLoaded.filter(f => f.showSong.id === _)[0]);
     return {songs, show, user, config};
   }

src/app/modules/shows/services/show-data.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {BehaviorSubject, Observable} from 'rxjs';
+import {BehaviorSubject, firstValueFrom, Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
 import {Show} from './show';
 import {map} from 'rxjs/operators';
@@ -8,14 +8,14 @@ import {map} from 'rxjs/operators';
   providedIn: 'root',
 })
 export class ShowDataService {
-  public list$ = new BehaviorSubject<Show[]>([]);
   private collection = 'shows';
 
   public constructor(private dbService: DbService) {
     this.dbService.col$<Show>(this.collection).subscribe(_ => this.list$.next(_));
   }
 
-  public listRaw$ = () => this.dbService.col$<Show>(this.collection);
+  public list$ = new BehaviorSubject<Show[]>([]);
+  public list = () => firstValueFrom(this.dbService.col$<Show>(this.collection));
 
   public read$ = (showId: string): Observable<Show | null> => this.list$.pipe(map(_ => _.find(s => s.id === showId) || null));
 

src/app/modules/shows/services/show-song-data.service.ts

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {DbService} from '../../../services/db.service';
-import {Observable} from 'rxjs';
+import {firstValueFrom, Observable} from 'rxjs';
 import {ShowSong} from './show-song';
 import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
 
@@ -11,10 +11,11 @@ export class ShowSongDataService {
   private collection = 'shows';
   private subCollection = 'songs';
 
-  public constructor(private dbService: DbService) {
+  public constructor(private dbService: DbService) {}
-  }
 
   public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
+  public list = (showId: string): Promise<ShowSong[]> => firstValueFrom(this.list$(showId));
+
   public read$ = (showId: string, songId: string): Observable<ShowSong | null> => this.dbService.doc$(`${this.collection}/${showId}/${this.subCollection}/${songId}`);
   public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> =>
     await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).update(data);

src/app/modules/shows/services/show-song.service.ts

@@ -1,10 +1,12 @@
 import {Injectable} from '@angular/core';
 import {ShowSongDataService} from './show-song-data.service';
-import {firstValueFrom, Observable} from 'rxjs';
+import {firstValueFrom, forkJoin, mergeMap, Observable} from 'rxjs';
 import {ShowSong} from './show-song';
 import {SongDataService} from '../../songs/services/song-data.service';
 import {UserService} from '../../../services/user/user.service';
 import {ShowService} from './show.service';
+import {map, switchMap} from 'rxjs/operators';
+import {ShowDataService} from './show-data.service';
 
 @Injectable({
   providedIn: 'root',
@@ -15,8 +17,8 @@ export class ShowSongService {
     private songDataService: SongDataService,
     private userService: UserService,
     private showService: ShowService,
-  ) {
+    private showDataService: ShowDataService
-  }
+  ) {}
 
   public async new$(showId: string, songId: string, addedLive = false): Promise<string | null> {
     const song = await firstValueFrom(this.songDataService.read$(songId));
@@ -30,7 +32,6 @@ export class ShowSongService {
       chordMode: user.chordMode,
       addedLive,
     };
-    await this.userService.incSongCount(songId);
     return await this.showSongDataService.add(showId, data);
   }
 
@@ -40,15 +41,47 @@ export class ShowSongService {
   public list$ = (showId: string): Observable<ShowSong[]> => this.showSongDataService.list$(showId);
   public list = (showId: string): Promise<ShowSong[]> => firstValueFrom(this.list$(showId));
 
-  public async delete$(showId: string, showSongId: string, index: number): Promise<void> {
+  public async delete$(showId: string, songId: string, index: number): Promise<void> {
-    const showSong = await this.read(showId, showSongId);
+    await this.showSongDataService.delete(showId, songId);
-    await this.showSongDataService.delete(showId, showSongId);
     const show = await firstValueFrom(this.showService.read$(showId));
     if (!show) return;
     const order = show.order;
     order.splice(index, 1);
     await this.showService.update$(showId, {order});
-    await this.userService.decSongCount(showSong.songId);
+  }
+
+  public countSongUsage$(songId: string) {
+    return this.userService.user$.pipe(
+      switchMap(user =>
+        this.showService.list$().pipe(
+          map(shows => {
+            const myShows = shows.filter(_ => _.owner === user?.id);
+            return myShows.map(show => this.list$(show.id));
+          }),
+          mergeMap(songs => forkJoin(songs)),
+          map(songs => songs.reduce((pn, u) => [...pn, ...u], [])),
+          map(songs => songs.reduce((count, song) => (song.songId === songId ? 1 : 0), 0))
+        )
+      )
+    );
+  }
+
+  public async countSongUsage(songId: string) {
+    // return 0; // todo
+
+    const user = await this.userService.currentUser();
+    const userId = user?.id;
+    if (!userId) return null;
+    const shows = await this.showDataService.list();
+    let count = 0;
+    for (const show of shows.filter(_ => _.owner === userId)) {
+      const songs = await this.showSongDataService.list(show.id);
+      for (const song of songs) {
+        if (song.songId === songId) count++;
+      }
+    }
+
+    return count;
   }
 
   public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> => await this.showSongDataService.update$(showId, songId, data);

src/app/modules/shows/services/show.service.spec.ts

@@ -9,7 +9,7 @@ describe('ShowService', () => {
     () =>
       void TestBed.configureTestingModule({
         providers: [{provide: ShowDataService, useValue: mockShowDataService}],
-      }),
+      })
   );
 
   ShowService.SHOW_TYPE_PUBLIC.forEach(type => {

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

@@ -25,14 +25,14 @@ export class ShowService {
     return this.userService.user$.pipe(
       switchMap(
         () => this.showDataService.list$,
-        (user: User | null, shows: Show[]) => ({user, shows}),
+        (user: User | null, shows: Show[]) => ({user, shows})
       ),
       map(s =>
         s.shows
           .sort((a, b) => a.date.toMillis() - b.date.toMillis())
           .filter(_ => !_.archived)
-          .filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)),
+          .filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
-      ),
+      )
     );
   }
 

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

@@ -13,7 +13,6 @@ export interface Show {
   published: boolean;
   archived: boolean;
   order: string[];
-  shareId: string;
 
   presentationSongId: string;
   presentationDynamicCaption: string;

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

@@ -6,7 +6,7 @@
       show.date.toDate() | date: 'dd.MM.yyyy'
     }} - {{ getStatus(show) }}"
   >
-    <p *ngIf="!useSwiper">{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
+    <p *ngIf="!useSwiper">{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von
       <app-user-name [userId]="show.owner"></app-user-name>
     </p>
     <div class="head">
@@ -14,35 +14,34 @@
         <mat-checkbox *ngIf="!useSwiper" [(ngModel)]="showText">Text anzeigen</mat-checkbox>
       </div>
       <div [class.floating]="useSwiper">
-        <app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon"
+        <app-menu-button @fade (click)="onZoomOut()" [icon]="faZoomOut" class="btn-delete btn-icon"
                          matTooltip="Verkleinern"></app-menu-button>
-        <app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon"
+        <app-menu-button @fade (click)="onZoomIn()" [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>
       </div>
     </div>
-    <div (cdkDropListDropped)="drop($event, show)" *ngIf="showSongs && !useSwiper" [cdkDropListDisabled]="show.published || showText"
+    <div *ngIf="showSongs && !useSwiper" [cdkDropListDisabled]="show.published || showText" cdkDropList
+         class="song-list"
          [style.cursor]="!(show.published || showText) ? 'drag' : 'inherit'"
          [style.font-size]="textSize + 'em'"
-         cdkDropList
+         (cdkDropListDropped)="drop($event, show)">
-         class="song-list">
+      <div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" class="song-row" cdkDrag>
-      <div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" cdkDrag class="song-row">
         <app-song
-          [fullscreen]="useSwiper"
-          [index]="i"
-          [showId]="showId"
           [showSong]="song"
+          [showId]="showId"
           [showText]="showText"
           [show]="show"
+          [fullscreen]="useSwiper"
+          [index]="i"
         ></app-song>
       </div>
     </div>
 
     <swiper-container *ngIf="useSwiper" scrollbar="true">
-      <swiper-slide *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy"
+      <swiper-slide *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" [style.font-size]="textSize + 'em'"
-                    [style.font-size]="textSize + 'em'"
                     class="song-swipe">
         <app-song
           [fullscreen]="true"
@@ -52,14 +51,13 @@
           [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>
 
     <app-add-song
       *ngIf="songs && !show.published && !useSwiper"
-      [showSongs]="showSongs"
       [show]="show"
+      [showSongs]="showSongs"
       [songs]="songs"
     ></app-add-song>
 
@@ -78,10 +76,7 @@
           <app-button (click)="onPublish(false)" *ngIf="show.published" [icon]="faUnpublish">
             Veröffentlichung zurückziehen
           </app-button>
-          <app-button (click)="onShare(show)" *ngIf="show.published" [icon]="faShare">
+          <app-button (click)="onChange(show.id)" [icon]="faSliders" *ngIf="!show.published">
-            Teilen
-          </app-button>
-          <app-button (click)="onChange(show.id)" *ngIf="!show.published" [icon]="faSliders">
             Ändern
           </app-button>
         </ng-container>

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

@@ -49,14 +49,3 @@
   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.spec.ts

@@ -11,7 +11,7 @@ describe('ShowComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [ShowComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

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

@@ -10,10 +10,9 @@ import {ShowSongService} from '../services/show-song.service';
 import {ShowSong} from '../services/show-song';
 import {DocxService} from '../services/docx.service';
 import {
-  faArrowUpRightFromSquare,
   faBox,
   faBoxOpen,
-  faChevronRight,
+  faExternalLinkAlt,
   faFile,
   faFileDownload,
   faFileLines,
@@ -21,7 +20,6 @@ import {
   faMagnifyingGlassMinus,
   faMagnifyingGlassPlus,
   faSliders,
-  faUnlock,
   faUser,
   faUsers,
 } from '@fortawesome/free-solid-svg-icons';
@@ -30,15 +28,12 @@ import {fade} from '../../../animations';
 import {MatDialog} from '@angular/material/dialog';
 import {ArchiveDialogComponent} from '../dialog/archive-dialog/archive-dialog.component';
 import {closeFullscreen, openFullscreen} from '../../../services/fullscreen';
-import {GuestShowService} from '../../guest/guest-show.service';
-import {ShareDialogComponent} from '../dialog/share-dialog/share-dialog.component';
 
 @Component({
   selector: 'app-show',
   templateUrl: './show.component.html',
   styleUrls: ['./show.component.less'],
   animations: [fade],
-  standalone: false,
 })
 export class ShowComponent implements OnInit, OnDestroy {
   public show$: Observable<Show | null> | null = null;
@@ -49,21 +44,18 @@ export class ShowComponent implements OnInit, OnDestroy {
 
   public faBox = faBox;
   public faBoxOpen = faBoxOpen;
-  public faPublish = faUnlock;
+  public faPublish = faExternalLinkAlt;
   public faUnpublish = faLock;
-  public faShare = faArrowUpRightFromSquare;
   public faDownload = faFileDownload;
   public faSliders = faSliders;
   public faUser = faUser;
   public faUsers = faUsers;
   public faZoomIn = faMagnifyingGlassPlus;
   public faZoomOut = faMagnifyingGlassMinus;
-  public useSwiper = false;
+  public faPage = faFile;
-  public textSize = 1;
+  public faLines = faFileLines;
-  public faFileLines = faFileLines;
-  public faFile = faFile;
-  public faNextSong = faChevronRight;
   private subs: Subscription[] = [];
+  public useSwiper = false;
 
   public constructor(
     private activatedRoute: ActivatedRoute,
@@ -73,17 +65,15 @@ export class ShowComponent implements OnInit, OnDestroy {
     private docxService: DocxService,
     private router: Router,
     private cRef: ChangeDetectorRef,
-    public dialog: MatDialog,
+    public dialog: MatDialog
-    private guestShowService: GuestShowService,
+  ) {}
-  ) {
-  }
 
   public ngOnInit(): void {
     this.show$ = this.activatedRoute.params.pipe(
       map(param => param as {showId: string}),
       map(param => param.showId),
       tap((_: string) => (this.showId = _)),
-      switchMap((showId: string) => this.showService.read$(showId)),
+      switchMap((showId: string) => this.showService.read$(showId))
     );
     this.subs.push(
       this.activatedRoute.params
@@ -91,7 +81,7 @@ export class ShowComponent implements OnInit, OnDestroy {
           map(param => param as {showId: string}),
           map(param => param.showId),
           switchMap(showId => this.showSongService.list$(showId)),
-          filter(_ => !!_ && _.length > 0),
+          filter(_ => !!_ && _.length > 0)
         )
         .subscribe(_ => {
           this.showSongs = _;
@@ -103,7 +93,7 @@ export class ShowComponent implements OnInit, OnDestroy {
         .subscribe(_ => {
           this.songs = _;
           this.cRef.markForCheck();
-        }),
+        })
     );
   }
 
@@ -111,6 +101,8 @@ export class ShowComponent implements OnInit, OnDestroy {
     this.subs.forEach(_ => _.unsubscribe());
   }
 
+  public textSize = 1;
+
   public onZoomIn() {
     this.textSize += 0.1;
   }
@@ -136,11 +128,6 @@ export class ShowComponent implements OnInit, OnDestroy {
     if (this.showId != null) await this.showService.update$(this.showId, {published});
   }
 
-  public onShare = async (show: Show): Promise<void> => {
-    const url = await this.guestShowService.share(show, this.orderedShowSongs(show));
-    this.dialog.open(ShareDialogComponent, {data: {url, show}});
-  };
-
   public getStatus(show: Show): string {
     if (show.published) {
       return 'veröffentlicht';
@@ -175,12 +162,15 @@ export class ShowComponent implements OnInit, OnDestroy {
     return show.order.map(_ => list.filter(f => f.id === _)[0]);
   }
 
-  public trackBy = (_: number, show: ShowSong) => show.id;
+  public trackBy = (index: number, show: ShowSong) => show.id;
 
   public async onChange(showId: string) {
     await this.router.navigateByUrl('/shows/' + showId + '/edit');
   }
 
+  public faFileLines = faFileLines;
+  public faFile = faFile;
+
   @HostListener('document:keydown', ['$event'])
   public handleKeyboardEvent(event: KeyboardEvent) {
     const swiperEl = document.querySelector('swiper-container') as unknown as Swiper;
@@ -200,12 +190,6 @@ 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/modules/shows/show/song/song.component.html

@@ -7,10 +7,9 @@
   <div *ngIf="!show.published && !fullscreen" class="song">
     <span class="title">{{ iSong.title }}</span>
     <span *ngIf="!edit" class="keys">
-      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span><span
+      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
-      (click)="openKeySelect()">{{ iSong.key }}</span>
+      <mat-form-field *ngIf="keys" appearance="standard" class="keys">
-      <mat-form-field (click)="option.open()" *ngIf="keys" class="transpose">
+        <mat-select [formControl]="keyFormControl">
-        <mat-select #option [formControl]="keyFormControl">
           <mat-option *ngFor="let key of keys" [value]="key">{{ key }}</mat-option>
         </mat-select>
       </mat-form-field>
@@ -23,11 +22,10 @@
 
   <mat-form-field *ngIf="edit" appearance="outline">
     <mat-label>Songtext</mat-label>
-    <textarea [cdkTextareaAutosize]="true"
+    <textarea matTooltip="Tonart ändern"
+              [cdkTextareaAutosize]="true"
               [formControl]="editSongControl"
-              class="edit"
               matInput
-              matTooltip="Tonart ändern"
     ></textarea>
   </mat-form-field>
   <div *ngIf="edit">Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>

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

@@ -17,18 +17,8 @@
 }
 
 .keys {
-  position: relative;
+  width: 40px;
-  margin-right: 10px;
+  margin: -24px 0 -20px 0;
-  cursor: pointer;
-
-  &:hover {
-    color: var(--color-primary);
-  }
-}
-
-.transpose {
-  height: 0;
-  position: absolute;
 }
 
 .btn-up {
@@ -64,7 +54,6 @@
   grid-area: delete;
   justify-content: flex-end;
 }
-
 .btn-edit {
   grid-area: edit;
   justify-content: flex-end;
@@ -78,6 +67,6 @@ button {
 
 }
 
-textarea.edit {
+textarea {
   font-family: 'Ubuntu Mono', monospace;
 }

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

@@ -11,7 +11,7 @@ describe('SongComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [SongComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

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

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
@@ -7,14 +7,12 @@ import {ChordMode} from '../../../../widget-modules/components/song-text/song-te
 import {Show} from '../../services/show';
 import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons';
 import {fade} from '../../../../animations';
-import {MatSelect} from '@angular/material/select';
 
 @Component({
   selector: 'app-song',
   templateUrl: './song.component.html',
   styleUrls: ['./song.component.less'],
   animations: [fade],
-  standalone: false,
 })
 export class SongComponent implements OnInit {
   @Input() public show: Show | null = null;
@@ -22,6 +20,7 @@ export class SongComponent implements OnInit {
   @Input() public showText: boolean | null = null;
   @Input() public index = -1;
   @Input() public fullscreen = false;
+
   public keys: string[] = [];
   public faDelete = faTrash;
   public faEdit = faPenToSquare;
@@ -31,10 +30,8 @@ export class SongComponent implements OnInit {
   public iSong: ShowSong | null = null;
   public edit = false;
   public editSongControl = new UntypedFormControl();
-  @ViewChild('option') private keyOptions: MatSelect;
 
-  public constructor(private showSongService: ShowSongService) {
+  public constructor(private showSongService: ShowSongService) {}
-  }
 
   @Input()
   public set showSong(song: ShowSong) {
@@ -78,8 +75,4 @@ export class SongComponent implements OnInit {
       chordMode: value,
     });
   }
-
-  public openKeySelect(): void {
-    this.keyOptions.open();
-  }
 }

src/app/modules/shows/shows-routing.module.ts

@@ -29,5 +29,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class ShowsRoutingModule {
+export class ShowsRoutingModule {}
-}

src/app/modules/shows/shows.module.ts

@@ -21,7 +21,9 @@ import {ShowComponent} from './show/show.component';
 import {SongComponent} from './show/song/song.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MenuButtonModule} from '../../widget-modules/components/menu-button/menu-button.module';
+import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
 import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
+import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
 import {ButtonModule} from '../../widget-modules/components/button/button.module';
 import {OwnerModule} from '../../services/user/owner.module';
 import {UserNameModule} from '../../services/user/user-name/user-name.module';
@@ -34,8 +36,6 @@ import {FilterComponent} from './list/filter/filter.component';
 import {EditComponent} from './edit/edit.component';
 import {ArchiveDialogComponent} from './dialog/archive-dialog/archive-dialog.component';
 import {MatDialogModule} from '@angular/material/dialog';
-import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
-import {AddSongComponent} from '../../widget-modules/components/add-song/add-song.component';
 
 @NgModule({
   declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent, ArchiveDialogComponent],
@@ -57,9 +57,9 @@ import {AddSongComponent} from '../../widget-modules/components/add-song/add-son
     FontAwesomeModule,
     MenuButtonModule,
     FormsModule,
-    SongTextComponent,
+    SongTextModule,
     NgxMatSelectSearchModule,
-    AddSongComponent,
+    AddSongModule,
     ButtonModule,
     OwnerModule,
     UserNameModule,

src/app/modules/songs/services/file-data.service.ts

@@ -8,8 +8,7 @@ import {DbService} from '../../../services/db.service';
   providedIn: 'root',
 })
 export class FileDataService {
-  public constructor(private db: DbService) {
+  public constructor(private db: DbService) {}
-  }
 
   public async set(songId: string, file: FileServer): Promise<string> {
     const songRef = this.db.doc('songs/' + songId);

src/app/modules/songs/services/file.service.ts

@@ -7,8 +7,7 @@ import {FileDataService} from './file-data.service';
   providedIn: 'root',
 })
 export class FileService {
-  public constructor(private storage: AngularFireStorage, private fileDataService: FileDataService) {
+  public constructor(private storage: AngularFireStorage, private fileDataService: FileDataService) {}
-  }
 
   public getDownloadUrl(path: string): Observable<string> {
     const ref = this.storage.ref(path);

src/app/modules/songs/services/section-type.ts

@@ -2,5 +2,4 @@ export enum SectionType {
   Verse,
   Chorus,
   Bridge,
-  Comment,
 }

src/app/modules/songs/services/song-data.service.spec.ts

@@ -19,7 +19,7 @@ describe('SongDataService', () => {
     () =>
       void TestBed.configureTestingModule({
         providers: [{provide: AngularFirestore, useValue: mockAngularFirestore}],
-      }),
+      })
   );
 
   it('should be created', () => {
@@ -34,6 +34,6 @@ describe('SongDataService', () => {
       service.list$().subscribe(s => {
         void expect(s[0].title).toEqual('title1');
       });
-    }),
+    })
   );
 });

src/app/modules/songs/services/song-data.service.ts

@@ -8,14 +8,14 @@ import {map} from 'rxjs/operators';
   providedIn: 'root',
 })
 export class SongDataService {
-  public list$ = new BehaviorSubject<Song[]>([]);
   private collection = 'songs';
 
   public constructor(private dbService: DbService) {
     this.dbService.col$<Song>(this.collection).subscribe(_ => this.list$.next(_));
   }
-  // public list$ = (): Observable<Song[]> => this.dbService.col$(this.collection);
 
+  public list$ = new BehaviorSubject<Song[]>([]);
+  // public list$ = (): Observable<Song[]> => this.dbService.col$(this.collection);
   //public read$ = (songId: string): Observable<Song | null> => this.dbService.doc$(this.collection + '/' + songId);
   public read$ = (songId: string): Observable<Song | null> => this.list$.pipe(map(_ => _.find(s => s.id === songId) || null));
   public update$ = async (songId: string, data: Partial<Song>): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).update(data);

src/app/modules/songs/services/song-list.resolver.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-
+import {Resolve} from '@angular/router';
 import {Observable} from 'rxjs';
 import {SongService} from './song.service';
 import {Song} from './song';
@@ -8,9 +8,8 @@ import {filter} from 'rxjs/operators';
 @Injectable({
   providedIn: 'root',
 })
-export class SongListResolver {
+export class SongListResolver implements Resolve<Song[]> {
-  public constructor(private songService: SongService) {
+  public constructor(private songService: SongService) {}
-  }
 
   public resolve(): Observable<Song[]> {
     return this.songService.list$().pipe(filter(_ => _.length > 0));

src/app/modules/songs/services/song.service.spec.ts

@@ -15,7 +15,7 @@ describe('SongService', () => {
     () =>
       void TestBed.configureTestingModule({
         providers: [{provide: SongDataService, useValue: mockSongDataService}],
-      }),
+      })
   );
 
   it('should be created', () => {
@@ -30,6 +30,6 @@ describe('SongService', () => {
       service.list$().subscribe(s => {
         void expect(s[0].title).toEqual('title1');
       });
-    }),
+    })
   );
 });

src/app/modules/songs/services/song.service.ts

@@ -25,10 +25,7 @@ export class SongService {
 
   // private list: Song[];
 
-  public constructor(
+  public constructor(private songDataService: SongDataService, private userService: UserService) {
-    private songDataService: SongDataService,
-    private userService: UserService,
-  ) {
     // importCCLI = (songs: Song[]) => this.updateFromCLI(songs);
   }
 

src/app/modules/songs/services/text-rendering.service.ts

@@ -15,11 +15,11 @@ export class TextRenderingService {
 
   public constructor(private transposeService: TransposeService) {}
 
-  public parse(text: string, transpose: TransposeMode | null, withComments = true): Section[] {
+  public parse(text: string, transpose: TransposeMode | null): Section[] {
     if (!text) {
       return [];
     }
-    const arrayOfLines = text.split(/\r?\n/).filter(_ => _ && (!_.startsWith('#') || withComments));
+    const arrayOfLines = text.split(/\r?\n/).filter(_ => _);
     const indices = {
       [SectionType.Bridge]: 0,
       [SectionType.Chorus]: 0,

src/app/modules/songs/song-list/filter/filter.component.html

@@ -1,7 +1,7 @@
 <div [formGroup]="filterFormGroup">
   <mat-form-field appearance="outline">
     <mat-label>Titel oder Text</mat-label>
-    <input formControlName="q" matInput />
+    <input formControlName="q" matInput/>
   </mat-form-field>
 
   <div class="third">
@@ -10,9 +10,8 @@
       <mat-select formControlName="type">
         <mat-option [value]="null">- kein Filter -</mat-option>
         <mat-option *ngFor="let type of types" [value]="type">{{
-            type | songType
+          type | songType
-          }}
+          }}</mat-option>
-        </mat-option>
       </mat-select>
     </mat-form-field>
 
@@ -21,9 +20,8 @@
       <mat-select formControlName="key">
         <mat-option [value]="null">- kein Filter -</mat-option>
         <mat-option *ngFor="let key of keys" [value]="key">{{
-            key | key
+          key | key
-          }}
+          }}</mat-option>
-        </mat-option>
       </mat-select>
     </mat-form-field>
 
@@ -32,9 +30,8 @@
       <mat-select formControlName="legalType">
         <mat-option [value]="null">- kein Filter -</mat-option>
         <mat-option *ngFor="let key of legalType" [value]="key">{{
-            key | legalType
+          key | legalType
-          }}
+          }}</mat-option>
-        </mat-option>
       </mat-select>
     </mat-form-field>
 
@@ -43,9 +40,8 @@
       <mat-select formControlName="flag">
         <mat-option [value]="null">- kein Filter -</mat-option>
         <mat-option *ngFor="let flag of getFlags()" [value]="flag">{{
-            flag
+          flag
-          }}
+          }}</mat-option>
-        </mat-option>
       </mat-select>
     </mat-form-field>
   </div>

src/app/modules/songs/song-list/filter/filter.component.spec.ts

@@ -11,7 +11,7 @@ describe('FilterComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [FilterComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

src/app/modules/songs/song-list/filter/filter.component.ts

@@ -10,7 +10,6 @@ import {KEYS} from '../../services/key.helper';
   selector: 'app-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.less'],
-  standalone: false,
 })
 export class FilterComponent {
   public filterFormGroup: UntypedFormGroup;

src/app/modules/songs/song-list/song-list.component.html

@@ -9,19 +9,11 @@
       <div>{{ song.title }}</div>
       <div>
         <ng-container *appRole="['contributor']">
-          <div *ngIf="song.status === 'draft'" class="warning">
+          <div *ngIf="song.status === 'draft'" class="warning"><fa-icon [icon]="faDraft"></fa-icon></div>
-            <fa-icon [icon]="faDraft"></fa-icon>
+          <div *ngIf="song.status === 'set'" class="neutral"><fa-icon [icon]="faDraft"></fa-icon></div>
-          </div>
+          <div *ngIf="song.status === 'final'" class="success"><fa-icon [icon]="faFinal"></fa-icon></div>
-          <div *ngIf="song.status === 'set'" class="neutral">
-            <fa-icon [icon]="faDraft"></fa-icon>
-          </div>
-          <div *ngIf="song.status === 'final'" class="success">
-            <fa-icon [icon]="faFinal"></fa-icon>
-          </div>
         </ng-container>
-        <div *ngIf="song.legalType === 'open'" class="warning">
+        <div *ngIf="song.legalType === 'open'" class="warning" ><fa-icon [icon]="faLegal"></fa-icon></div>
-          <fa-icon [icon]="faLegal"></fa-icon>
-        </div>
       </div>
       <div>{{ song.key }}</div>
     </div>

src/app/modules/songs/song-list/song-list.component.less

@@ -29,7 +29,7 @@
 }
 
 .neutral, .warning, .success {
-  width: 30px;
+    width: 30px;
 }
 
 .neutral {

src/app/modules/songs/song-list/song-list.component.spec.ts

@@ -22,7 +22,7 @@ describe('SongListComponent', () => {
         providers: [{provide: SongService, useValue: mockSongService}],
         schemas: [NO_ERRORS_SCHEMA],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {

src/app/modules/songs/song-list/song-list.component.ts

@@ -16,30 +16,28 @@ import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-sol
   styleUrls: ['./song-list.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [fade],
-  standalone: false,
 })
 export class SongListComponent implements OnInit, OnDestroy {
-  public anyFilterActive = false;
   public songs$: Observable<Song[]> | null = combineLatest([
     this.activatedRoute.queryParams.pipe(map(_ => _ as FilterValues)),
     this.activatedRoute.data.pipe(
       map(data => data.songList as Song[]),
-      map(songs => songs.sort((a, b) => a.number - b.number)),
+      map(songs => songs.sort((a, b) => a.number - b.number))
     ),
   ]).pipe(
     map(_ => {
       const songs = _[1];
       const filter = _[0];
       this.anyFilterActive = this.checkIfFilterActive(filter);
-      return songs.filter(song => this.filter(song, filter)).sort((a, b) => a.title?.localeCompare(b.title));
+      return songs.filter(song => this.filter(song, filter)).sort((a, b) => a.title.localeCompare(b.title));
-    }),
+    })
   );
+  public anyFilterActive = false;
   public faLegal = faBalanceScaleRight;
   public faDraft = faPencilRuler;
   public faFinal = faCheck;
 
-  public constructor(private songService: SongService, private activatedRoute: ActivatedRoute, private scrollService: ScrollService) {
+  public constructor(private songService: SongService, private activatedRoute: ActivatedRoute, private scrollService: ScrollService) {}
-  }
 
   public ngOnInit(): void {
     setTimeout(() => this.scrollService.restoreScrollPositionFor('songlist'), 100);
@@ -50,8 +48,6 @@ export class SongListComponent implements OnInit, OnDestroy {
     this.scrollService.storeScrollPositionFor('songlist');
   }
 
-  public trackBy = (index: number, show: Song) => show.id;
-
   private filter(song: Song, filter: FilterValues): boolean {
     let baseFilter = filterSong(song, filter.q);
     baseFilter = baseFilter && (!filter.type || filter.type === song.type);
@@ -78,4 +74,6 @@ export class SongListComponent implements OnInit, OnDestroy {
 
     return flagStrings.indexOf(flag) !== -1;
   }
+
+  public trackBy = (index: number, show: Song) => show.id;
 }

src/app/modules/songs/song-list/song-list.module.ts

@@ -3,9 +3,7 @@ import {CommonModule} from '@angular/common';
 import {SongListComponent} from './song-list.component';
 import {CardModule} from '../../../widget-modules/components/card/card.module';
 import {RouterModule} from '@angular/router';
-import {
+import {LegalTypeTranslatorModule} from '../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
-  LegalTypeTranslatorModule,
-} from '../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
 import {ListHeaderModule} from '../../../widget-modules/components/list-header/list-header.module';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
@@ -39,5 +37,4 @@ import {KeyTranslatorModule} from '../../../widget-modules/pipes/key-translator/
     KeyTranslatorModule,
   ],
 })
-export class SongListModule {
+export class SongListModule {}
-}

src/app/modules/songs/song/edit/edit-file/edit-file.component.html

@@ -11,7 +11,7 @@
   </div>
   <div class="upload">
     <label>
-      <input (change)="detectFiles($event)" type="file" />
+      <input (change)="detectFiles($event)" type="file"/>
     </label>
 
     <button

src/app/modules/songs/song/edit/edit-file/edit-file.component.spec.ts

@@ -11,7 +11,7 @@ describe('EditFileComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [EditFileComponent],
       }).compileComponents();
-    }),
+    })
   );
 
   beforeEach(() => {