add song usage (experimental)

.browserslistrc

@@ -1,7 +1,12 @@
-# Angular 21-supported baseline to avoid unsupported-browser build warnings.
-last 2 Chrome major versions
-last 2 Edge major versions
-last 2 Firefox major versions
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
 Firefox ESR
-last 2 Safari major versions
-last 2 iOS major versions
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

.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>

.run/start.run.xml

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

README.md

@@ -1,19 +1 @@
 # wgenerator
-
-## Admin migration
-
-If `songUsage` needs to be rebuilt from all existing shows, log in with a user that has the `admin` role and run this in the browser console:
-
-```js
-await window.wgeneratorAdmin.rebuildSongUsage()
-```
-
-The migration:
-
-- resets `songUsage` for all users
-- scans all shows and all `shows/{id}/songs` entries
-- rebuilds the per-user counters based on show ownership
-
-It returns a summary object with processed user, show and show-song counts.
-
-This is intended as a manual one-off migration and is read-heavy by design.

angular.json

@@ -15,15 +15,12 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": {
-              "base": "dist/wgenerator"
-            },
+            "outputPath": "dist/wgenerator",
             "index": "src/index.html",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
+            "main": "src/main.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",
-              "docx",
-              "qrcode"
-            ],
-            "browser": "src/main.ts"
+              "lodash", "docx"
+            ]
           },
           "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,37 +147,5 @@
     "schematicCollections": [
       "@angular-eslint/schematics"
     ]
-  },
-  "schematics": {
-    "@angular-eslint/schematics:application": {
-      "setParserOptionsProject": true
-    },
-    "@angular-eslint/schematics:library": {
-      "setParserOptionsProject": true
-    },
-    "@schematics/angular:component": {
-      "type": "component"
-    },
-    "@schematics/angular:directive": {
-      "type": "directive"
-    },
-    "@schematics/angular:service": {
-      "type": "service"
-    },
-    "@schematics/angular:guard": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:interceptor": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:module": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:pipe": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:resolver": {
-      "typeSeparator": "."
-    }
   }
 }

codex-session.json

@@ -1,76 +0,0 @@
-{
-  "updated_at": "2026-03-09",
-  "project": "wgenerator",
-  "summary": {
-    "css_theme": [
-      "LESS @-Variablen durch CSS-Custom-Properties ersetzt",
-      "natuerlichere Farbpalette auf Basis des Body-Gradients eingefuehrt",
-      "Material Icon Buttons auf die Primaerfarbe abgestimmt",
-      "mehrere harte Farben in normale App-Views auf Tokens umgestellt",
-      "Monitor-/Beamer-Ansicht bewusst kontrastreich belassen"
-    ],
-    "material_theme": [
-      "src/custom-theme.scss auf map-basierte Angular-Material-M2-Theme-Definition umgestellt",
-      "Warnung zu legacy define-light-theme-Signatur behoben"
-    ],
-    "transpose": [
-      "TransposeService auf Halbtonlogik umgebaut",
-      "unbekannte Akkorde rendern bewusst als X",
-      "dynamisches Rendern statt festem 100-Zeichen-Template",
-      "Tests fuer Enharmonik, B/H, X-Faelle und Key-Helper ergaenzt",
-      "key.helper Korrekturen: Gb-Mapping und D-Skala"
-    ],
-    "firebase_reads": [
-      "ConfigService und GlobalSettingsService auf Singleton-Streams umgestellt",
-      "read$ fuer shows, songs und guest wieder direkt ueber doc$ statt list$.find(...)",
-      "songUsage Login-Backfill entfernt",
-      "songUsage-Inkremente auf FieldValue.increment(...) umgestellt",
-      "Admin-Konsoleintrag window.wgeneratorAdmin.rebuildSongUsage() hinzugefuegt",
-      "showSongDataService.list$(showId) pro showId gecacht",
-      "monitor.component.ts entkoppelt, damit Show-Metadaten keine unnoetigen Song-Reads triggern"
-    ],
-    "shows_filter": [
-      "showType-Filter funktioniert wieder clientseitig",
-      "Zeitraumfilter fachlich auf heute minus n*30 Tage umgestellt",
-      "oeffentliche Shows werden fuer den Zeitraum serverseitig per Firestore-Query geladen",
-      "owner und showType filtern weiterhin clientseitig auf dem kleineren Resultset",
-      "Null-Fall im Filter-Template abgesichert"
-    ]
-  },
-  "important_files": [
-    "src/styles/styles.less",
-    "src/custom-theme.scss",
-    "src/app/modules/songs/services/transpose.service.ts",
-    "src/app/modules/songs/services/transpose.service.spec.ts",
-    "src/app/modules/songs/services/key.helper.ts",
-    "src/app/modules/songs/services/key.helper.spec.ts",
-    "src/app/services/config.service.ts",
-    "src/app/services/global-settings.service.ts",
-    "src/app/services/user/user.service.ts",
-    "src/main.ts",
-    "src/app/modules/shows/services/show-song-data.service.ts",
-    "src/app/modules/presentation/monitor/monitor.component.ts",
-    "src/app/modules/presentation/remote/remote.component.ts",
-    "src/app/modules/shows/services/show-data.service.ts",
-    "src/app/modules/shows/list/list.component.ts",
-    "src/app/modules/shows/list/filter/filter.component.ts",
-    "src/app/modules/shows/list/filter/filter.component.html",
-    "src/app/modules/songs/song/song.component.ts",
-    "src/app/modules/songs/song/song.component.html",
-    "README.md"
-  ],
-  "console_commands": {
-    "song_usage_rebuild": "await window.wgeneratorAdmin.rebuildSongUsage()"
-  },
-  "known_tradeoffs": [
-    "songUsage wird historisch nicht mehr automatisch beim Login rekonstruiert; dafuer ist die Admin-Migration gedacht",
-    "songUsage decrement kann bei inkonsistenten Aufrufpfaden theoretisch unter 0 laufen",
-    "owner- und showType-Filter fuer Shows laufen noch clientseitig",
-    "oeffentliche Show-Zeitraumquery kann Firestore-Indexe benoetigen"
-  },
-  "next_candidates": [
-    "remote.component.ts weiter entkoppeln, damit textRendering.parse(...) nicht bei jeder Show-Metadatenaenderung fuer alle Songs neu laeuft",
-    "users$ als Voll-Collection-Livestream spaeter auf Einzelreads bzw. gezieltere Nutzung pruefen",
-    "weitere Firestore-Read-Hotspots mit echten Metriken gegenpruefen"
-  ]
-}

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,67 +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": "^21.2.2",
-    "@angular/cdk": "^21.2.1",
-    "@angular/common": "^21.2.2",
-    "@angular/compiler": "^21.2.2",
-    "@angular/core": "^21.2.2",
-    "@angular/fire": "21.0.0-rc.0",
-    "@angular/forms": "^21.2.2",
-    "@angular/material": "^21.2.1",
-    "@angular/platform-browser": "^21.2.2",
-    "@angular/platform-browser-dynamic": "^21.2.2",
-    "@angular/router": "^21.2.2",
-    "@angular/service-worker": "^21.2.2",
-    "@fortawesome/angular-fontawesome": "^4.0.0",
-    "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "docx": "^9.6.0",
-    "firebase": "^12.10.0",
-    "ngx-mat-select-search": "^8.0.4",
-    "qrcode": "^1.5.4",
-    "rxjs": "~7.8.1",
-    "swiper": "^12.1.2",
-    "tslib": "^2.8.1",
-    "zone.js": "~0.15.0"
+    "@angular/animations": "^14.2.10",
+    "@angular/cdk": "^14.2.6",
+    "@angular/common": "^14.2.10",
+    "@angular/compiler": "^14.2.10",
+    "@angular/core": "^14.2.10",
+    "@angular/fire": "^7.4.1",
+    "@angular/forms": "^14.2.10",
+    "@angular/material": "^14.2.6",
+    "@angular/platform-browser": "^14.2.10",
+    "@angular/platform-browser-dynamic": "^14.2.10",
+    "@angular/router": "^14.2.10",
+    "@angular/service-worker": "^14.2.10",
+    "@fortawesome/angular-fontawesome": "^0.11.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.2",
+    "@fortawesome/free-solid-svg-icons": "^6.1.2",
+    "docx": "^7.4.1",
+    "firebase": "^9.6.10",
+    "lodash": "^4.17.21",
+    "ngx-mat-select-search": "^4.2.1",
+    "ngx-perfect-scrollbar": "^10.1.1",
+    "rxfire": "^6.0.3",
+    "rxjs": "~7.5.6",
+    "swiper": "^9.3.2",
+    "tslib": "^2.4.0",
+    "uuid": "^8.3.2",
+    "zone.js": "~0.11.8"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.2102.1",
-    "@angular-devkit/build-angular": "^21.2.1",
-    "@angular-eslint/builder": "21.3.0",
-    "@angular-eslint/eslint-plugin": "21.3.0",
-    "@angular-eslint/eslint-plugin-template": "21.3.0",
-    "@angular-eslint/schematics": "21.3.0",
-    "@angular-eslint/template-parser": "21.3.0",
-    "@angular/cli": "^21.2.1",
-    "@angular/compiler-cli": "^21.2.2",
-    "@angular/language-service": "^21.2.2",
-    "@types/jasmine": "~6.0.0",
-    "@types/jasminewd2": "~2.0.13",
-    "@typescript-eslint/eslint-plugin": "^8.57.0",
-    "@typescript-eslint/parser": "^8.57.0",
-    "eslint": "^9.39.4",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.5",
-    "firebase-tools": "^15.9.1",
-    "jasmine-core": "~6.1.0",
+    "@angular-devkit/architect": "0.1402.9",
+    "@angular-devkit/build-angular": "^14.2.9",
+    "@angular-eslint/builder": "14.1.2",
+    "@angular-eslint/eslint-plugin": "14.1.2",
+    "@angular-eslint/eslint-plugin-template": "14.1.2",
+    "@angular-eslint/schematics": "14.1.2",
+    "@angular-eslint/template-parser": "14.1.2",
+    "@angular/cli": "^14.2.9",
+    "@angular/compiler-cli": "^14.2.10",
+    "@angular/language-service": "^14.2.10",
+    "@types/jasmine": "~4.0.3",
+    "@types/jasminewd2": "~2.0.10",
+    "@types/lodash": "^4.14.182",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/parser": "^5.33.0",
+    "eslint": "^8.22.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "firebase-tools": "^11.6.0",
+    "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.4",
-    "karma-chrome-launcher": "~3.2.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.1",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.2.0",
-    "prettier": "^3.8.1",
-    "typescript": "~5.9.3"
+    "karma-jasmine-html-reporter": "^2.0.0",
+    "prettier": "^2.7.1",
+    "protractor": "~7.0.0",
+    "typescript": "~4.7.4"
   }
 }

src/app/app-routing.module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
+import {AngularFireAuthGuard, redirectUnauthorizedTo} from '@angular/fire/compat/auth-guard';
 import {RoleGuard} from './widget-modules/guards/role.guard';
-import {AuthGuard} from './widget-modules/guards/auth.guard';
 
 const routes: Routes = [
   {
@@ -12,24 +12,27 @@ const routes: Routes = [
   {
     path: 'songs',
     loadChildren: () => import('./modules/songs/songs.module').then(m => m.SongsModule),
-    canActivate: [AuthGuard, RoleGuard],
+    canActivate: [AngularFireAuthGuard, RoleGuard],
     data: {
+      authGuardPipe: () => redirectUnauthorizedTo(['user', 'login']),
       requiredRoles: ['user'],
     },
   },
   {
     path: 'shows',
     loadChildren: () => import('./modules/shows/shows.module').then(m => m.ShowsModule),
-    canActivate: [AuthGuard, RoleGuard],
+    canActivate: [AngularFireAuthGuard, RoleGuard],
     data: {
+      authGuardPipe: () => redirectUnauthorizedTo(['user', 'login']),
       requiredRoles: ['leader', 'member'],
     },
   },
   {
     path: 'presentation',
     loadChildren: () => import('./modules/presentation/presentation.module').then(m => m.PresentationModule),
-    canActivate: [AuthGuard, RoleGuard],
+    canActivate: [AngularFireAuthGuard, RoleGuard],
     data: {
+      authGuardPipe: () => redirectUnauthorizedTo(['user', 'login']),
       requiredRoles: ['presenter'],
     },
   },
@@ -51,8 +54,7 @@ const routes: Routes = [
   imports: [
     RouterModule.forRoot(routes, {
       preloadingStrategy: PreloadAllModules,
-      scrollPositionRestoration: 'enabled',
-      // relativeLinkResolution: 'legacy',
+      relativeLinkResolution: 'legacy',
     }),
   ],
   exports: [RouterModule],

src/app/app.component.html

@@ -1,6 +1,12 @@
 <app-navigation></app-navigation>
-
-<div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
+<perfect-scrollbar
+  #scrollbar
+  (psScrollY)="onScoll($event)"
+  [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>
-
+  </div>
+</perfect-scrollbar>

src/app/app.component.less

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

src/app/app.component.spec.ts

@@ -3,11 +3,14 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {AppComponent} from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(waitForAsync(() => {
+  beforeEach(
+    waitForAsync(() => {
       void TestBed.configureTestingModule({
-      imports: [RouterTestingModule, AppComponent],
+        imports: [RouterTestingModule],
+        declarations: [AppComponent],
       }).compileComponents();
-  }));
+    })
+  );
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

src/app/app.component.ts

@@ -1,9 +1,8 @@
-import {ChangeDetectionStrategy, Component, OnInit, inject} 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';
-import {RouterOutlet} from '@angular/router';
-import {NavigationComponent} from './widget-modules/components/application-frame/navigation/navigation.component';
 
 @Component({
   selector: 'app-root',
@@ -11,12 +10,14 @@ import {NavigationComponent} from './widget-modules/components/application-frame
   styleUrls: ['./app.component.less'],
   animations: [fader],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterOutlet, NavigationComponent],
 })
 export class AppComponent implements OnInit {
-  private scrollService = inject(ScrollService);
+  @ViewChild('scrollbar', {static: false}) public scrollbar: PerfectScrollbarComponent | null = null;
 
-  public constructor() {
+  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

@@ -0,0 +1,45 @@
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {ServiceWorkerModule} from '@angular/service-worker';
+import {environment} from '../environments/environment';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {ApplicationFrameModule} from './widget-modules/components/application-frame/application-frame.module';
+import {AngularFireModule} from '@angular/fire/compat';
+import {AngularFirestoreModule} from '@angular/fire/compat/firestore';
+import {AngularFireStorageModule} from '@angular/fire/compat/storage';
+import {AngularFireDatabaseModule} from '@angular/fire/compat/database';
+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],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    AppRoutingModule,
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: environment.production,
+    }),
+    BrowserAnimationsModule,
+
+    ApplicationFrameModule,
+
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFirestoreModule.enablePersistence({synchronizeTabs: true}),
+    AngularFireStorageModule,
+    AngularFireDatabaseModule,
+    AngularFireAuthModule,
+    AngularFireAuthGuardModule,
+    FontAwesomeModule,
+    PerfectScrollbarModule,
+  ],
+  providers: [{provide: MAT_DATE_LOCALE, useValue: 'de-DE'}],
+  bootstrap: [AppComponent],
+})
+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 - 2026 - Benjamin Ifland</div>
+  <div class="copyright">© 2019 - 2023 - Benjamin Ifland</div>
 </div>

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

@@ -6,11 +6,13 @@ describe('BrandComponent', () => {
   let component: BrandComponent;
   let fixture: ComponentFixture<BrandComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(
+    waitForAsync(() => {
       void TestBed.configureTestingModule({
-      imports: [BrandComponent],
+        declarations: [BrandComponent],
       }).compileComponents();
-  }));
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(BrandComponent);

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

@@ -1,10 +1,8 @@
 import {Component} from '@angular/core';
-import {LogoComponent} from '../../widget-modules/components/logo/logo.component';
 
 @Component({
   selector: 'app-brand',
   templateUrl: './brand.component.html',
   styleUrls: ['./brand.component.less'],
-  imports: [LogoComponent],
 })
 export class BrandComponent {}

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

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {BrandComponent} from './brand.component';
 import {RouterModule, Routes} from '@angular/router';
-
+import {LogoModule} from '../../widget-modules/components/logo/logo.module';
 import {NewUserComponent} from './new-user/new-user.component';
 
 const routes: Routes = [
@@ -18,6 +18,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes), BrandComponent, NewUserComponent],
+  declarations: [BrandComponent, NewUserComponent],
+  imports: [CommonModule, RouterModule.forChild(routes), LogoModule],
 })
 export class BrandModule {}

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

@@ -1,7 +1,6 @@
 <div class="frame">
   <app-brand class="brand"></app-brand>
-  @if (user$ | async; as user) {
-    <div class="text">
+  <div *ngIf="user$ | async as user" class="text">
     <div class="welcome">WILLKOMMEN</div>
     <div class="name">{{ user.name }}</div>
     <div class="roles">
@@ -9,5 +8,4 @@
       Administrator!
     </div>
   </div>
-  }
 </div>

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

@@ -1,6 +1,4 @@
-:host {
-  --animation-duration: 20s;
-}
+@animation-duration: 20s;
 
 .frame {
   width: 512px;
@@ -13,10 +11,10 @@
 .brand {
   position: absolute;
   left: 0;
-  animation: var(--animation-duration) brand ease-in-out forwards;
+  animation: @animation-duration brand ease-in-out forwards;
   opacity: 0;
   @media screen and (max-width: 860px) {
-    animation: var(--animation-duration) brand-mobile ease-in-out forwards;
+    animation: @animation-duration brand-mobile ease-in-out forwards;
   }
 }
 
@@ -36,7 +34,7 @@
     @media screen and (max-width: 860px) {
       font-size: 40px;
     }
-    animation: var(--animation-duration) welcome ease-in-out forwards;
+    animation: @animation-duration welcome ease-in-out forwards;
   }
 
   .name {
@@ -45,14 +43,14 @@
     @media screen and (max-width: 860px) {
       font-size: 30px;
     }
-    animation: var(--animation-duration) name ease-in-out forwards;
+    animation: @animation-duration name ease-in-out forwards;
   }
 
   .roles {
     opacity: 0;
     font-size: 20px;
     margin-top: 40px;
-    animation: var(--animation-duration) roles ease-in-out forwards;
+    animation: @animation-duration roles ease-in-out forwards;
   }
 }
 

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

@@ -6,11 +6,13 @@ describe('NewUserComponent', () => {
   let component: NewUserComponent;
   let fixture: ComponentFixture<NewUserComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(
+    waitForAsync(() => {
       void TestBed.configureTestingModule({
-      imports: [NewUserComponent],
+        declarations: [NewUserComponent],
       }).compileComponents();
-  }));
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NewUserComponent);

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

@@ -1,24 +1,17 @@
-import {Component, inject} from '@angular/core';
+import {Component} from '@angular/core';
 import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user/user';
-import {BrandComponent} from '../brand.component';
-import {AsyncPipe} from '@angular/common';
 
 @Component({
   selector: 'app-new-user',
   templateUrl: './new-user.component.html',
   styleUrls: ['./new-user.component.less'],
-  imports: [BrandComponent, AsyncPipe],
 })
 export class NewUserComponent {
-  private userService = inject(UserService);
-
   public user$: Observable<User | null> | null = null;
 
-  public constructor() {
-    const userService = this.userService;
-
+  public constructor(private userService: UserService) {
     this.user$ = userService.user$;
   }
 }

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

@@ -1,75 +0,0 @@
-import {TestBed} from '@angular/core/testing';
-import {of} from 'rxjs';
-import {DbService} from 'src/app/services/db.service';
-import {GuestShowDataService} from './guest-show-data.service';
-
-describe('GuestShowDataService', () => {
-  let service: GuestShowDataService;
-  let docUpdateSpy: jasmine.Spy<() => Promise<void>>;
-  let docDeleteSpy: jasmine.Spy<() => Promise<void>>;
-  let docSpy: jasmine.Spy;
-  let colAddSpy: jasmine.Spy<() => Promise<{id: string}>>;
-  let colSpy: jasmine.Spy;
-  let dbServiceSpy: jasmine.SpyObj<DbService>;
-
-  beforeEach(() => {
-    docUpdateSpy = jasmine.createSpy('update').and.resolveTo();
-    docDeleteSpy = jasmine.createSpy('delete').and.resolveTo();
-    docSpy = jasmine.createSpy('doc').and.returnValue({
-      update: docUpdateSpy,
-      delete: docDeleteSpy,
-    });
-    colAddSpy = jasmine.createSpy('add').and.resolveTo({id: 'guest-2'});
-    colSpy = jasmine.createSpy('col').and.returnValue({add: colAddSpy});
-    dbServiceSpy = jasmine.createSpyObj<DbService>('DbService', ['col$', 'doc$', 'doc', 'col']);
-    dbServiceSpy.col$.and.returnValue(of([{id: 'guest-1'}]) as never);
-    dbServiceSpy.doc$.and.returnValue(of({id: 'guest-1'}) as never);
-    dbServiceSpy.doc.and.callFake(docSpy);
-    dbServiceSpy.col.and.callFake(colSpy);
-
-    void TestBed.configureTestingModule({
-      providers: [{provide: DbService, useValue: dbServiceSpy}],
-    });
-
-    service = TestBed.inject(GuestShowDataService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should read the guest collection for list$', () => {
-    service.list$.subscribe();
-
-    expect(dbServiceSpy.col$).toHaveBeenCalledWith('guest');
-  });
-
-  it('should read a single guest show by id', () => {
-    service.read$('guest-7').subscribe();
-
-    expect(dbServiceSpy.doc$).toHaveBeenCalledWith('guest/guest-7');
-  });
-
-  it('should update a guest show document', async () => {
-    await service.update$('guest-7', {published: true} as never);
-
-    expect(docSpy).toHaveBeenCalledWith('guest/guest-7');
-    const [updatePayload] = docUpdateSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
-    expect(updatePayload).toEqual({published: true});
-  });
-
-  it('should add a guest show and return the created id', async () => {
-    await expectAsync(service.add({published: false} as never)).toBeResolvedTo('guest-2');
-
-    expect(colSpy).toHaveBeenCalledWith('guest');
-    const [addPayload] = colAddSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
-    expect(addPayload).toEqual({published: false});
-  });
-
-  it('should delete a guest show document', async () => {
-    await service.delete('guest-7');
-
-    expect(docSpy).toHaveBeenCalledWith('guest/guest-7');
-    expect(docDeleteSpy).toHaveBeenCalled();
-  });
-});

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

@@ -1,26 +0,0 @@
-import {Injectable, inject} from '@angular/core';
-import {Observable} from 'rxjs';
-import {shareReplay} from 'rxjs/operators';
-import {DbService} from 'src/app/services/db.service';
-import {GuestShow} from './guest-show';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class GuestShowDataService {
-  private dbService = inject(DbService);
-
-  private collection = 'guest';
-  public list$: Observable<GuestShow[]> = this.dbService.col$<GuestShow>(this.collection).pipe(
-    shareReplay({
-      bufferSize: 1,
-      refCount: true,
-    })
-  );
-
-  public read$: (id: string) => Observable<GuestShow | null> = (id: string): Observable<GuestShow | null> => this.dbService.doc$(`${this.collection}/${id}`);
-  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.spec.ts

@@ -1,62 +0,0 @@
-import {TestBed} from '@angular/core/testing';
-import {GuestShowDataService} from './guest-show-data.service';
-import {GuestShowService} from './guest-show.service';
-import {ShowService} from '../shows/services/show.service';
-
-describe('GuestShowService', () => {
-  let service: GuestShowService;
-  let guestShowDataServiceSpy: jasmine.SpyObj<GuestShowDataService>;
-  let showServiceSpy: jasmine.SpyObj<ShowService>;
-
-  beforeEach(() => {
-    guestShowDataServiceSpy = jasmine.createSpyObj<GuestShowDataService>('GuestShowDataService', ['add', 'update$']);
-    showServiceSpy = jasmine.createSpyObj<ShowService>('ShowService', ['update$']);
-    guestShowDataServiceSpy.add.and.resolveTo('share-1');
-    guestShowDataServiceSpy.update$.and.resolveTo();
-    showServiceSpy.update$.and.resolveTo();
-
-    void TestBed.configureTestingModule({
-      providers: [
-        {provide: GuestShowDataService, useValue: guestShowDataServiceSpy},
-        {provide: ShowService, useValue: showServiceSpy},
-      ],
-    });
-
-    service = TestBed.inject(GuestShowService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should create a new guest share, persist the generated shareId on the show and return the share url', async () => {
-    const show = {id: 'show-1', showType: 'service-worship', date: new Date(), shareId: ''} as any;
-    const songs = [{id: 'song-1'}] as any;
-    const expectedUrl = window.location.protocol + '//' + window.location.host + '/guest/share-1';
-
-    await expectAsync(service.share(show, songs)).toBeResolvedTo(expectedUrl);
-
-    expect(guestShowDataServiceSpy.add).toHaveBeenCalledWith({
-      showType: 'service-worship',
-      date: show.date,
-      songs,
-    });
-    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', {shareId: 'share-1'});
-  });
-
-  it('should update an existing share and reuse its id in the returned url', async () => {
-    const show = {id: 'show-1', showType: 'service-worship', date: new Date(), shareId: 'share-9'} as any;
-    const songs = [{id: 'song-1'}] as any;
-    const expectedUrl = window.location.protocol + '//' + window.location.host + '/guest/share-9';
-
-    await expectAsync(service.share(show, songs)).toBeResolvedTo(expectedUrl);
-
-    expect(guestShowDataServiceSpy.update$).toHaveBeenCalledWith('share-9', {
-      showType: 'service-worship',
-      date: show.date,
-      songs,
-    });
-    expect(guestShowDataServiceSpy.add).not.toHaveBeenCalled();
-    expect(showServiceSpy.update$).not.toHaveBeenCalled();
-  });
-});

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

@@ -1,31 +0,0 @@
-import {Injectable, inject} 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 {
-  private showService = inject(ShowService);
-  private guestShowDataService = inject(GuestShowDataService);
-
-  public async share(show: Show, songs: Song[]): Promise<string> {
-    const data = {
-      showType: show.showType,
-      date: show.date,
-      songs: songs,
-    };
-    let shareId = show.shareId;
-
-    if (!show.shareId) {
-      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/' + shareId;
-  }
-}

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

@@ -1,9 +0,0 @@
-import {Song} from '../songs/services/song';
-import {Timestamp} from '@angular/fire/firestore';
-
-export interface GuestShow {
-  id: string;
-  showType: string;
-  date: Timestamp;
-  songs: Song[];
-}

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

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

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

@@ -1,59 +1,16 @@
-.page {
-  background: var(--overlay);
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  backdrop-filter: blur(8px);
-
-  --swiper-scrollbar-bg-color: rgba(247, 251, 255, 0.2);
-  --swiper-scrollbar-drag-bg-color: rgba(247, 251, 255, 0.6);
-  --swiper-scrollbar-sides-offset: 20px;
-  --swiper-scrollbar-top: 100px;
-  --swiper-scrollbar-bottom: auto;
-}
-
-.title {
-  color: var(--text-inverse);
-  padding: 70px 20px 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .left {
-    font-size: 1.8em;
-    color: var(--text-inverse);
-  }
-}
-
-.song-title {
-  padding: 20px 20px 0;
-  font-size: 1.3em;
-}
-
-.legal {
-  padding: 0 20px;
-  font-size: 0.6em;
-  color: rgba(247, 251, 255, 0.72);
-}
-
 .view {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  color: var(--text-inverse);
+  background: #0003;
+  backdrop-filter: blur(10px);
+  z-index: 1;
+  color: white;
 }
 
 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

@@ -6,11 +6,13 @@ describe('GuestComponent', () => {
   let component: GuestComponent;
   let fixture: ComponentFixture<GuestComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(
+    waitForAsync(() => {
       void TestBed.configureTestingModule({
-      imports: [GuestComponent],
+        declarations: [GuestComponent],
       }).compileComponents();
-  }));
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(GuestComponent);

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

@@ -1,30 +1,32 @@
-import {Component, CUSTOM_ELEMENTS_SCHEMA, inject} from '@angular/core';
-import {GuestShowDataService} from './guest-show-data.service';
-import {ActivatedRoute} from '@angular/router';
-import {map, switchMap} from 'rxjs/operators';
-import {Song} from '../songs/services/song';
-import {ConfigService} from '../../services/config.service';
-import {AsyncPipe, DatePipe} from '@angular/common';
-import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
-import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {Component} from '@angular/core';
+import {SongService} from '../songs/services/song.service';
+import {GlobalSettingsService} from '../../services/global-settings.service';
+import {Observable} from 'rxjs';
+import {filter, map, switchMap} from 'rxjs/operators';
+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'],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [SongTextComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
 export class GuestComponent {
-  private currentRoute = inject(ActivatedRoute);
-  private service = inject(GuestShowDataService);
-  private configService = inject(ConfigService);
-
-  public show$ = this.currentRoute.params.pipe(
-    map(param => param.id as string),
-    switchMap(id => this.service.read$(id))
+  public songs$: Observable<string[]> = this.globalSettingsService.get$.pipe(
+    filter(_ => !!_),
+    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 trackBy = (index: number, show: Song) => show.id;
+  public constructor(
+    private songService: SongService,
+    private showService: ShowService,
+    private globalSettingsService: GlobalSettingsService,
+    private showSongService: ShowSongService
+  ) {}
 }

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 {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
-import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    RouterModule.forChild([
-      {
-        path: ':id',
-        component: GuestComponent,
-      },
-    ]),
-    SongTextComponent,
-    ShowTypePipe,
-    GuestComponent,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [GuestComponent],
+  imports: [CommonModule, RouterModule.forChild([{path: '', component: GuestComponent}]), SongTextModule],
 })
 export class GuestModule {}

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

@@ -1,27 +1,14 @@
-@if (song) {
-  @if (song.artist) {
-    <p>{{ song.artist }}</p>
-  }
-  @if (song.label) {
-    <p>{{ song.label }}</p>
-  }
-  @if (song.termsOfUse) {
-    <p class="terms-of-use">{{ song.termsOfUse }}</p>
-  }
-  @if (song.origin) {
-    <p>{{ song.origin }}</p>
-  }
-  @if (song.legalOwnerId) {
-    <div>
-      @if (song.legalOwner === 'CCLI' && config) {
-        <p>
+<ng-container *ngIf="song">
+  <p *ngIf="song.artist">{{ song.artist }}</p>
+  <p *ngIf="song.label">{{ song.label }}</p>
+  <p *ngIf="song.termsOfUse" class="terms-of-use">{{ song.termsOfUse }}</p>
+  <p *ngIf="song.origin">{{ song.origin }}</p>
+
+  <div *ngIf="song.legalOwnerId">
+    <p *ngIf="song.legalOwner === 'CCLI' && config">
       CCLI-Liednummer {{ song.legalOwnerId }}, CCLI-Lizenznummer
       {{ config.ccliLicenseId }}
     </p>
-      }
-      @if (song.legalOwner !== 'CCLI') {
-        <p>Liednummer {{ song.legalOwnerId }}</p>
-      }
+    <p *ngIf="song.legalOwner !== 'CCLI'">Liednummer {{ song.legalOwnerId }}</p>
   </div>
-  }
-}
+</ng-container>

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

@@ -6,11 +6,13 @@ describe('LegalComponent', () => {
   let component: LegalComponent;
   let fixture: ComponentFixture<LegalComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(
+    waitForAsync(() => {
       void TestBed.configureTestingModule({
-      imports: [LegalComponent],
+        declarations: [LegalComponent],
       }).compileComponents();
-  }));
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LegalComponent);

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'],
-  imports: [],
 })
 export class LegalComponent {
   @Input() public song: Song | null = null;

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

@@ -6,11 +6,13 @@ describe('LogoComponent', () => {
   let component: LogoComponent;
   let fixture: ComponentFixture<LogoComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(
+    waitForAsync(() => {
       void TestBed.configureTestingModule({
-      imports: [LogoComponent],
+        declarations: [LogoComponent],
       }).compileComponents();
-  }));
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LogoComponent);

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

@@ -1,50 +1,47 @@
 <div class="fullscreen background"></div>
-@if (showType) {
-  <div [style.font-size.px]="zoom" class="fullscreen background">
-    <div [class.visible]="presentationBackground==='blue'" class="bg-blue fullscreen bg-image"></div>
-    <div [class.visible]="presentationBackground==='green'" class="bg-green fullscreen bg-image"></div>
-    <div [class.visible]="presentationBackground==='leder'" class="bg-leder fullscreen bg-image"></div>
-    <div [class.visible]="presentationBackground==='praise'" class="bg-praise fullscreen bg-image"></div>
-    <div [class.visible]="presentationBackground==='bible'" class="bg-bible fullscreen bg-image"></div>
+<div *ngIf="song && showType" [style.font-size.px]="zoom" class="fullscreen background">
+
+  <div class="bg-blue fullscreen bg-image" [class.visible]="presentationBackground==='blue'"></div>
+  <div class="bg-green fullscreen bg-image" [class.visible]="presentationBackground==='green'"></div>
+  <div class="bg-leder fullscreen bg-image" [class.visible]="presentationBackground==='leder'"></div>
+  <div class="bg-praise fullscreen bg-image" [class.visible]="presentationBackground==='praise'"></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>
   </div>
-    @if (songId === 'title') {
-      <div @songSwitch class="start fullscreen">
+
+  <div *ngIf="songId === 'title'" @songSwitch class="start fullscreen">
     <div>{{ showType | showType }}</div>
     <div class="date">{{ date | date: "dd.MM.yyyy" }}</div>
   </div>
-    }
-    @if (songId === 'dynamicText') {
-      <div @songSwitch class="start fullscreen dynamic-text">
+
+  <div *ngIf="songId === 'dynamicText'" @songSwitch class="start fullscreen dynamic-text">
     <div>{{ presentationDynamicCaption }}</div>
     <div class="date">{{ presentationDynamicText }}</div>
   </div>
-    }
-    @if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
+
   <app-song-text
+    [header]="song.title"
+    *ngIf="songId !== 'title' && songId !== 'empty'"
     [@songSwitch]="songId"
     [fullscreen]="true"
-        [header]="song.title"
     [index]="index??0"
-        [showComments]="false"
     [showSwitch]="false"
     [text]="song.text"
     chordMode="hide"
   ></app-song-text>
-    }
-    @if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
   <app-legal
+    *ngIf="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
     [@songSwitch]="songId"
     [config]="config$ | async"
     [song]="song"
   ></app-legal>
-    }
-  </div>
-}
+</div>

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

@@ -6,11 +6,13 @@ describe('MonitorComponent', () => {
   let component: MonitorComponent;
   let fixture: ComponentFixture<MonitorComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(
+    waitForAsync(() => {
       void TestBed.configureTestingModule({
-      imports: [MonitorComponent],
+        declarations: [MonitorComponent],
       }).compileComponents();
-  }));
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MonitorComponent);

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

@@ -1,36 +1,26 @@
-import {ChangeDetectorRef, Component, OnDestroy, OnInit, inject} from '@angular/core';
-import {distinctUntilChanged, filter, map, shareReplay, switchMap, takeUntil, tap} from 'rxjs/operators';
+import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
+import {debounceTime, distinctUntilChanged, filter, map, switchMap, tap} from 'rxjs/operators';
 import {ShowService} from '../../shows/services/show.service';
+import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {Config} from '../../../services/config';
-import {Observable, Subject} from 'rxjs';
+import {Observable} from 'rxjs';
 import {ConfigService} from '../../../services/config.service';
 import {songSwitch} from '../../../widget-modules/components/song-text/animation';
+import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {PresentationBackground, Show} from '../../shows/services/show';
-import {ShowSong} from '../../shows/services/show-song';
+import {GlobalSettings} from '../../../services/global-settings';
 import {ShowSongService} from '../../shows/services/show-song.service';
 import {openFullscreen} from '../../../services/fullscreen';
-import {AsyncPipe, DatePipe} from '@angular/common';
-import {LogoComponent} from './logo/logo.component';
-import {SongTextComponent} from '../../../widget-modules/components/song-text/song-text.component';
-import {LegalComponent} from './legal/legal.component';
-import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-monitor',
   templateUrl: './monitor.component.html',
   styleUrls: ['./monitor.component.less'],
   animations: [songSwitch],
-  imports: [LogoComponent, SongTextComponent, LegalComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
-export class MonitorComponent implements OnInit, OnDestroy {
-  private showService = inject(ShowService);
-  private showSongService = inject(ShowSongService);
-  private globalSettingsService = inject(GlobalSettingsService);
-  private configService = inject(ConfigService);
-  private cRef = inject(ChangeDetectorRef);
-
+export class MonitorComponent implements OnInit {
   public song: Song | null = null;
   public zoom = 10;
   public currentShowId: string | null = null;
@@ -42,78 +32,55 @@ export class MonitorComponent implements OnInit, OnDestroy {
   public date: Date | null = null;
   public config$: Observable<Config | null>;
   public presentationBackground: PresentationBackground = 'none';
-  private destroy$ = new Subject<void>();
-
-  public constructor() {
-    const configService = this.configService;
 
+  public constructor(
+    private showService: ShowService,
+    private showSongService: ShowSongService,
+    private songService: SongService,
+    private textRenderingService: TextRenderingService,
+    private globalSettingsService: GlobalSettingsService,
+    private configService: ConfigService,
+    private cRef: ChangeDetectorRef
+  ) {
     this.config$ = configService.get$();
   }
 
   public ngOnInit(): void {
     openFullscreen();
-    const currentShowId$ = this.globalSettingsService.get$.pipe(
-      filter((settings): settings is NonNullable<typeof settings> => !!settings),
-      map(settings => settings.currentShow),
-      filter((showId): showId is string => !!showId),
+    this.globalSettingsService.get$
+      .pipe(
+        debounceTime(100),
+        filter(_ => !!_),
+        map(_ => _ as GlobalSettings),
+        map(_ => _.currentShow),
         distinctUntilChanged(),
-      tap(_ => (this.currentShowId = _)),
-      takeUntil(this.destroy$)
-    );
-
-    const show$ = currentShowId$.pipe(
-      switchMap(showId => this.showService.read$(showId)),
-      filter((show): show is Show => !!show),
-      shareReplay({
-        bufferSize: 1,
-        refCount: true,
-      }),
-      takeUntil(this.destroy$)
-    );
-
-    show$
-      .pipe(
-        tap(show => {
-          this.showType = show.showType;
-          this.date = show.date.toDate();
-          this.index = show.presentationSection;
-          this.presentationBackground = show.presentationBackground;
-          this.presentationDynamicCaption = show.presentationDynamicCaption;
-          this.presentationDynamicText = show.presentationDynamicText;
-          this.zoom = show.presentationZoom ?? 30;
-        }),
-        takeUntil(this.destroy$)
+        tap(_ => (this.currentShowId = _))
       )
-      .subscribe(() => this.cRef.markForCheck());
-
-    show$
       .pipe(
-        map(show => ({showId: show.id, presentationSongId: show.presentationSongId})),
-        distinctUntilChanged((a, b) => a.showId === b.showId && a.presentationSongId === b.presentationSongId),
-        tap(({presentationSongId}) => {
-          if (presentationSongId === 'title' || presentationSongId === 'dynamicText' || !presentationSongId) {
-            this.song = null;
-          }
-          if (this.songId !== presentationSongId) {
-            this.songId = 'empty';
-          }
+        switchMap(_ => this.showService.read$(_)),
+        filter(_ => !!_),
+        map(_ => _ as Show),
+        tap<Show>(_ => {
+          this.showType = _.showType;
+          this.date = _.date.toDate();
+          this.index = _.presentationSection;
+          this.presentationBackground = _.presentationBackground;
+          this.presentationDynamicCaption = _.presentationDynamicCaption;
+          this.presentationDynamicText = _.presentationDynamicText;
+          this.zoom = _.presentationZoom ?? 30;
+          if (this.songId !== _.presentationSongId) this.songId = 'empty';
           setTimeout(() => {
-            this.songId = presentationSongId;
+            this.songId = _.presentationSongId;
             this.cRef.markForCheck();
           }, 600);
         }),
-        switchMap(({showId, presentationSongId}) => this.showSongService.read$(showId, presentationSongId)),
-        filter((song): song is ShowSong => !!song),
-        takeUntil(this.destroy$)
+        switchMap((_: Show) => this.showSongService.read$(_.id, _.presentationSongId)),
+        filter(_ => !!_),
+        map(_ => _ as Song)
       )
-      .subscribe(song => {
-        this.song = song;
+      .subscribe(_ => {
+        this.song = _;
         this.cRef.markForCheck();
       });
   }
-
-  public ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

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

@@ -4,45 +4,43 @@ import {CommonModule} from '@angular/common';
 import {PresentationRoutingModule} from './presentation-routing.module';
 import {MonitorComponent} from './monitor/monitor.component';
 import {RemoteComponent} from './remote/remote.component';
-
+import {CardModule} from '../../widget-modules/components/card/card.module';
 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 {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
-import {AddSongComponent} from '../../widget-modules/components/add-song/add-song.component';
-import {SectionTypePipe} from '../../widget-modules/pipes/section-type-translator/section-type.pipe';
-import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {UserNameModule} from '../../services/user/user-name/user-name.module';
 
 @NgModule({
+  declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent, SelectComponent],
   exports: [RemoteComponent],
   imports: [
     CommonModule,
     PresentationRoutingModule,
+    CardModule,
     MatFormFieldModule,
     MatSelectModule,
-    ShowTypePipe,
-    SectionTypePipe,
-    SongTextComponent,
+    ShowTypeTranslaterModule,
+    SectionTypeTranslatorModule,
+    SongTextModule,
     MatButtonModule,
     FontAwesomeModule,
     MatSliderModule,
     FormsModule,
-    AddSongComponent,
+    AddSongModule,
     ReactiveFormsModule,
     MatInputModule,
-    MonitorComponent,
-    RemoteComponent,
-    LegalComponent,
-    LogoComponent,
-    SelectComponent,
+    UserNameModule,
   ],
 })
 export class PresentationModule {}

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

@@ -1,11 +1,10 @@
-@if (show) {
-  <div @fade>
-    <app-card [closeIcon]="faIcon" [heading]="show.showType | showType"
-      [subheading]="show.date.toDate() | date:'dd.MM.yyyy'" closeLink="/presentation/select">
-      @if (!progress) {
+<div *ngIf="show" @fade>
+  <app-card [heading]="show.showType | showType" [subheading]="show.date.toDate() | date:'dd.MM.yyyy'"
+            closeLink="/presentation/select" [closeIcon]="faIcon">
+
+    <ng-container *ngIf="!progress">
       <div class="song">
-          @if (show) {
-            <div class="song-parts">
+        <div *ngIf="show" class="song-parts">
           <div
             (click)="onSectionClick('title', -1, show.id)"
             [class.active]="show.presentationSongId === 'title'"
@@ -21,12 +20,10 @@
             <div class="head">Leer</div>
           </div>
         </div>
-          }
       </div>
-        @for (song of presentationSongs; track trackBy($index, song)) {
-          <div class="song">
-            @if (show) {
-              <div
+
+      <div *ngFor="let song of presentationSongs; trackBy: trackBy" class="song">
+        <div *ngIf="show"
              [class.active]="show.presentationSongId === song.id"
              class="title song-part"
         >
@@ -34,12 +31,10 @@
             {{ song.title }}
           </div>
         </div>
-            }
-            @if (show) {
-              <div class="song-parts">
-                @for (section of song.sections; track section; let i = $index) {
+        <div *ngIf="show" class="song-parts">
           <div
             (click)="onSectionClick(song.id, i, show.id)"
+            *ngFor="let section of song.sections; index as i"
             [class.active]="
               show.presentationSongId === song.id &&
               show.presentationSection === i
@@ -51,14 +46,11 @@
             </div>
             <div class="fragment">{{ getFirstLine(section) }}</div>
           </div>
-                }
         </div>
-            }
       </div>
-        }
+
       <div class="song">
-          @if (show) {
-            <div
+        <div *ngIf="show"
              [class.active]="show.presentationSongId === 'dynamicText'"
              class="title song-part"
         >
@@ -66,32 +58,36 @@
             Freier Text
           </div>
         </div>
-          }
+
         <mat-form-field appearance="outline">
           <mat-label>Überschrift</mat-label>
-            <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption"
-              autocomplete="off" id="dynamic-caption"
+          <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption" autocomplete="off" id="dynamic-caption"
                  matInput
                  type="text">
         </mat-form-field>
+
         <mat-form-field appearance="outline">
           <mat-label>Text</mat-label>
           <textarea (ngModelChange)="onDynamicText($event, show.id)" [ngModel]="show.presentationDynamicText"
                     autocomplete="off" id="dynamic-text"
                     matInput></textarea>
         </mat-form-field>
+
       </div>
-        @if (show) {
-          <div class="div-bottom">
-            <button class="btn-start-presentation" mat-button routerLink="/presentation/monitor">
+
+      <div *ngIf="show" class="div-bottom">
+
+        <button routerLink="/presentation/monitor" mat-button>
           <fa-icon [icon]="faDesktop"></fa-icon>
           Präsentation starten
         </button>
+
+
         <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>
@@ -100,29 +96,28 @@
             <mat-option value="bible">Bibel</mat-option>
           </mat-select>
         </mat-form-field>
+
         <mat-slider
-              #slider
+          (ngModelChange)="onZoom($event, show.id)"
           [max]="100"
           [min]="10"
-              [step]="2"
-              class="zoom-slider"
-              color="primary"
-              ngDefaultControl
-              ><input (ngModelChange)="onZoom($event, show.id)"
           [ngModel]="show.presentationZoom"
-              matSliderThumb>
+          [step]="2"
+          [thumbLabel]="true"
+          color="primary"
+          class="zoom-slider"
+        >
         </mat-slider>
+
       </div>
-        }
-        @if (show) {
+
       <app-add-song
+        *ngIf="show"
         [addedLive]="true"
         [showSongs]="showSongs"
-            [show]="show"
         [songs]="songs$|async"
+        [show]="show"
       ></app-add-song>
-        }
-      }
+    </ng-container>
   </app-card>
-  </div>
-}
+</div>

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

@@ -1,13 +1,12 @@
 @import "../../../../styles/shadow";
 
 .song {
-  background: var(--surface-strong);
+  background: #fff;
   width: 100%;
   padding: 10px;
   border-radius: 8px;
   margin-bottom: 10px;
   box-sizing: border-box;
-  color: var(--text);
 
   @media screen and (max-width: 860px) {
     width: 100vw;
@@ -15,7 +14,7 @@
     border-radius: 0;
     box-sizing: border-box;
     margin: -11px -20px 10px;
-    border: 1px solid var(--surface-border);
+    border: 1px solid #ddd;
   }
 }
 
@@ -40,31 +39,35 @@
 }
 
 .song-part {
-  background: var(--surface-strong);
+  background: #fff;
   border-radius: 8px;
   overflow: hidden;
-  transition: var(--transition);
+  transition: 300ms all ease-in-out;
   cursor: pointer;
-  outline: 1px solid var(--surface-muted);
+  outline: 0.5px solid #eee;
 
   &:hover {
-    outline: 1px solid var(--primary-hover);
+    .card-1;
+    outline: 0 solid transparent;
   }
 
   &.active {
-    outline: 1px solid var(--primary-color);
+    .card-2;
+    outline: 0 solid transparent;
 
     .head {
-      background-color: var(--primary-color);
-      color: var(--text-inverse);
+      background: #4286f4;
+      color: white;
     }
 
+    .fragment {
+    }
   }
 }
 
 .head {
-  transition: var(--transition);
-  background: var(--surface-muted);
+  transition: 300ms all ease-in-out;
+  background: #eee;
   padding: 10px;
   font-weight: bold;
 }
@@ -76,11 +79,7 @@
 .div-bottom {
   display: grid;
   gap: 20px;
-  grid-template-columns: 1fr 1fr 1fr;
-
-  .btn-start-presentation {
-    height: 56px;
-  }
+  grid-template-columns: min-content min-content auto;
 
   @media screen and (max-width: 860px) {
     gap: 10px;
@@ -101,9 +100,9 @@
 a {
   font-size: 30px;
   padding: 10px;
-  transition: var(--transition);
+  transition: all 300ms ease-in-out;
 
   &:hover {
-    color: var(--link-color);
+    color: #4286f4;
   }
 }

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

@@ -6,11 +6,13 @@ describe('RemoteComponent', () => {
   let component: RemoteComponent;
   let fixture: ComponentFixture<RemoteComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(
+    waitForAsync(() => {
       void TestBed.configureTestingModule({
-      imports: [RemoteComponent],
+        declarations: [RemoteComponent],
       }).compileComponents();
-  }));
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(RemoteComponent);

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

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, inject} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
 import {combineLatest, Subject} from 'rxjs';
 import {PresentationBackground, Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
@@ -7,25 +7,11 @@ import {faDesktop, faFolderOpen} from '@fortawesome/free-solid-svg-icons';
 import {ShowService} from '../../shows/services/show.service';
 import {ShowSong} from '../../shows/services/show-song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
-import {debounceTime, distinctUntilChanged, filter, map, switchMap, takeUntil} from 'rxjs/operators';
+import {debounceTime, filter, map} from 'rxjs/operators';
 import {fade} from '../../../animations';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Section} from '../../songs/services/section';
-import {LineType} from '../../songs/services/line-type';
-import {AsyncPipe, DatePipe} from '@angular/common';
-import {CardComponent} from '../../../widget-modules/components/card/card.component';
-import {MatFormField, MatLabel} from '@angular/material/form-field';
-import {MatInput} from '@angular/material/input';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatButton} from '@angular/material/button';
-import {RouterLink} from '@angular/router';
-import {FaIconComponent} from '@fortawesome/angular-fontawesome';
-import {MatSelect} from '@angular/material/select';
-import {MatOption} from '@angular/material/core';
-import {MatSlider, MatSliderThumb} from '@angular/material/slider';
-import {AddSongComponent} from '../../../widget-modules/components/add-song/add-song.component';
-import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
-import {SectionTypePipe} from '../../../widget-modules/pipes/section-type-translator/section-type.pipe';
+import {GlobalSettings} from '../../../services/global-settings';
 
 export interface PresentationSong {
   id: string;
@@ -39,34 +25,8 @@ export interface PresentationSong {
   styleUrls: ['./remote.component.less'],
   animations: [fade],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    CardComponent,
-    MatFormField,
-    MatLabel,
-    MatInput,
-    ReactiveFormsModule,
-    FormsModule,
-    MatButton,
-    RouterLink,
-    FaIconComponent,
-    MatSelect,
-    MatOption,
-    MatSlider,
-    MatSliderThumb,
-    AddSongComponent,
-    AsyncPipe,
-    DatePipe,
-    ShowTypePipe,
-    SectionTypePipe,
-  ],
 })
-export class RemoteComponent implements OnDestroy {
-  private showService = inject(ShowService);
-  private showSongService = inject(ShowSongService);
-  private songService = inject(SongService);
-  private textRenderingService = inject(TextRenderingService);
-  private cRef = inject(ChangeDetectorRef);
-
+export class RemoteComponent {
   public show: Show | null = null;
   public showSongs: ShowSong[] = [];
   public songs$ = this.songService.list$();
@@ -75,62 +35,29 @@ export class RemoteComponent implements OnDestroy {
   public faIcon = faFolderOpen;
 
   public faDesktop = faDesktop;
-  public presentationDynamicCaptionChanged$ = new Subject<{presentationDynamicCaption: string; showId: string}>();
-  public presentationDynamicTextChanged$ = new Subject<{presentationDynamicText: string; showId: string}>();
-  private destroy$ = new Subject<void>();
-
-  public constructor() {
-    const globalSettingsService = inject(GlobalSettingsService);
-
-    const currentShowId$ = globalSettingsService.get$.pipe(
-      filter((settings): settings is NonNullable<typeof settings> => !!settings),
-      map(_ => _.currentShow),
-      filter((showId): showId is string => !!showId),
-      distinctUntilChanged(),
-      takeUntil(this.destroy$)
-    );
-
-    const show$ = currentShowId$.pipe(
-      switchMap(showId => this.showService.read$(showId)),
-      takeUntil(this.destroy$)
-    );
-
-    const parsedSongs$ = currentShowId$.pipe(
-      switchMap(showId => this.showSongService.list$(showId)),
-      map(list => ({
-        list,
-        parsed: list.map(song => ({
-          id: song.id,
-          title: song.title,
-          sections: this.textRenderingService.parse(song.text, null, false),
-        })),
-      })),
-      takeUntil(this.destroy$)
-    );
-
-    combineLatest([show$, parsedSongs$])
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(([show, parsedSongs]) => {
-        this.showSongs = parsedSongs.list;
-        this.show = show;
-        const order = show?.order ?? [];
-        const presentationSongsById = new Map(parsedSongs.parsed.map(song => [song.id, song] as const));
-        this.presentationSongs = order.map(id => presentationSongsById.get(id) ?? null).filter((s): s is PresentationSong => !!s);
-        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;
+      this.show = show;
+      const presentationSongs = list.map(song => ({
+        id: song.id,
+        title: song.title,
+        sections: this.textRenderingService.parse(song.text, null),
+      }));
+      this.presentationSongs = show?.order.map(_ => presentationSongs.filter(f => f.id === _)[0]) ?? [];
+      this.cRef.markForCheck();
+    });
+  }
+
   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> {
@@ -147,6 +74,32 @@ export class RemoteComponent implements OnDestroy {
   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});
@@ -155,9 +108,4 @@ export class RemoteComponent implements OnDestroy {
   public onDynamicText(presentationDynamicText: string, showId: string): void {
     this.presentationDynamicTextChanged$.next({presentationDynamicText, showId});
   }
-
-  public ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

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

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

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

@@ -1,29 +1,21 @@
-import {Component, OnInit, inject} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {map} from 'rxjs/operators';
 import {ShowService} from '../../shows/services/show.service';
 import {Show} from '../../shows/services/show';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {Router} from '@angular/router';
 import {fade} from '../../../animations';
-import {AsyncPipe, DatePipe} from '@angular/common';
-import {CardComponent} from '../../../widget-modules/components/card/card.component';
-import {MatButton} from '@angular/material/button';
-import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
-import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-select',
   templateUrl: './select.component.html',
   styleUrls: ['./select.component.less'],
   animations: [fade],
-  imports: [CardComponent, MatButton, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
 export class SelectComponent implements OnInit {
-  private showService = inject(ShowService);
-  private globalSettingsService = inject(GlobalSettingsService);
-  private router = inject(Router);
-
+  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))));

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

@@ -8,7 +8,7 @@ describe('ArchiveDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ArchiveDialogComponent],
+      declarations: [ArchiveDialogComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ArchiveDialogComponent);
@@ -17,6 +17,6 @@ describe('ArchiveDialogComponent', () => {
   });
 
   it('should create', () => {
-    void expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
   });
 });

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

@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
-import {MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
-import {MatButton} from '@angular/material/button';
 
 @Component({
   selector: 'app-archive-dialog',
   templateUrl: './archive-dialog.component.html',
   styleUrls: ['./archive-dialog.component.less'],
-  imports: [MatDialogContent, MatDialogActions, MatButton, MatDialogClose],
 })
 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.spec.ts

@@ -1,25 +0,0 @@
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {ShareDialogComponent} from './share-dialog.component';
-import QRCode from 'qrcode';
-
-describe('ShareDialogComponent', () => {
-  let component: ShareDialogComponent;
-  let fixture: ComponentFixture<ShareDialogComponent>;
-
-  beforeEach(async () => {
-    spyOn(QRCode, 'toDataURL').and.resolveTo('data:image/jpeg;base64,test');
-
-    await TestBed.configureTestingModule({
-      imports: [ShareDialogComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ShareDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    void expect(component).toBeTruthy();
-  });
-});

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

@@ -1,51 +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 data = inject<ShareDialogData>(MAT_DIALOG_DATA);
-
-  public qrCode: string;
-
-  public constructor() {
-    const data = this.data;
-
-    // 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

@@ -5,26 +5,20 @@
         <mat-label>Art der Veranstaltung</mat-label>
         <mat-select formControlName="showType">
           <mat-optgroup label="öffentlich">
-            @for (key of showTypePublic; track key) {
-              <mat-option [value]="key">{{
+            <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
               key | showType
-                }}
-              </mat-option>
-            }
+              }}</mat-option>
           </mat-optgroup>
           <mat-optgroup label="privat">
-            @for (key of showTypePrivate; track key) {
-              <mat-option [value]="key">{{
+            <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
               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

@@ -1,51 +1,19 @@
-import {Component, OnInit, inject} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ShowDataService} from '../services/show-data.service';
 import {Observable, take} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+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 {Timestamp} from '@angular/fire/firestore';
-import {CardComponent} from '../../../widget-modules/components/card/card.component';
-import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
-import {MatSelect} from '@angular/material/select';
-import {MatOptgroup, MatOption} from '@angular/material/core';
-
-import {MatInput} from '@angular/material/input';
-import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
-import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
-import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
-import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-edit',
   templateUrl: './edit.component.html',
   styleUrls: ['./edit.component.less'],
-  imports: [
-    CardComponent,
-    ReactiveFormsModule,
-    MatFormField,
-    MatLabel,
-    MatSelect,
-    MatOptgroup,
-    MatOption,
-    MatInput,
-    MatDatepickerInput,
-    MatDatepickerToggle,
-    MatSuffix,
-    MatDatepicker,
-    ButtonRowComponent,
-    ButtonComponent,
-    ShowTypePipe,
-  ],
 })
 export class EditComponent implements OnInit {
-  private showService = inject(ShowService);
-  private router = inject(Router);
-  private activatedRoute = inject(ActivatedRoute);
-
   public shows$: Observable<Show[]>;
   public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
   public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
@@ -56,9 +24,7 @@ export class EditComponent implements OnInit {
   });
   public faSave = faSave;
 
-  public constructor() {
-    const showDataService = inject(ShowDataService);
-
+  public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router, private activatedRoute: ActivatedRoute) {
     this.shows$ = showDataService.list$;
   }
 
@@ -87,10 +53,13 @@ export class EditComponent implements OnInit {
       return;
     }
 
-    await this.showService.update$(this.form.value.id, {
-      date: Timestamp.fromDate(this.form.value.date),
+    await this.showService.update$(
+      this.form.value.id as string,
+      {
+        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

@@ -4,52 +4,13 @@
     <mat-form-field appearance="outline">
       <mat-label>Zeitraum</mat-label>
       <mat-select formControlName="time">
-        @for (time of times; track time) {
-          <mat-option [value]="time.key">{{
+        <mat-option *ngFor="let time of times" [value]="time.key">{{
           time.value
-            }}
-          </mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-
-    <mat-form-field appearance="outline">
-      <mat-label>Ersteller</mat-label>
-      <mat-select formControlName="owner">
-        <mat-option [value]="null">Alle</mat-option>
-        @for (owner of owners; track owner) {
-          <mat-option [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-option [value]="null">Alle</mat-option>
-        <mat-optgroup label="öffentlich">
-          @for (key of showTypePublic; track key) {
-            <mat-option [value]="key">{{
-              key | showType
-              }}
-            </mat-option>
-          }
-        </mat-optgroup>
-        <mat-optgroup label="privat">
-          @for (key of showTypePrivate; track key) {
-            <mat-option [value]="key">{{
-              key | showType
-              }}
-            </mat-option>
-          }
-        </mat-optgroup>
+          }}</mat-option>
       </mat-select>
     </mat-form-field>
 
   </div>
 
-  <i>Anzahl der Suchergebnisse: {{ shows?.length ?? 0 }}</i>
+  <i>Anzahl der Suchergebnisse: {{ shows.length }}</i>
 </div>

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.spec.ts

@@ -8,7 +8,7 @@ describe('FilterComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FilterComponent],
+      declarations: [FilterComponent],
     }).compileComponents();
   });
 
@@ -19,6 +19,6 @@ describe('FilterComponent', () => {
   });
 
   it('should create', () => {
-    void expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
   });
 });

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

@@ -1,36 +1,19 @@
-import {Component, Input, inject} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {KeyValue} from '@angular/common';
 import {ActivatedRoute, Router} from '@angular/router';
-import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+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, switchMap} from 'rxjs/operators';
-import {combineLatest, Observable, of} from 'rxjs';
-import {dynamicSort, onlyUnique} from '../../../../services/filter.helper';
-import {UserService} from '../../../../services/user/user.service';
-import {MatFormField, MatLabel} from '@angular/material/form-field';
-import {MatSelect} from '@angular/material/select';
-import {MatOptgroup, MatOption} from '@angular/material/core';
-import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.less'],
-  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, ShowTypePipe],
 })
 export class FilterComponent {
-  private router = inject(Router);
-  private showService = inject(ShowService);
-  private userService = inject(UserService);
-
   @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'},
@@ -39,77 +22,24 @@ export class FilterComponent {
     {key: 99999, value: 'alle'},
   ];
 
-  public owners: {key: string; value: string}[] = [];
-
-  public constructor() {
-    const activatedRoute = inject(ActivatedRoute);
-    const fb = inject(UntypedFormBuilder);
-
+  public constructor(private router: Router, activatedRoute: ActivatedRoute, fb: UntypedFormBuilder) {
     this.filterFormGroup = fb.group({
       time: 1,
-      owner: null,
-      showType: null,
     });
 
     activatedRoute.queryParams.subscribe(params => {
       const filterValues = params as FilterValues;
       if (filterValues.time) this.filterFormGroup.controls.time.setValue(+filterValues.time);
-      this.filterFormGroup.controls.owner.setValue(filterValues.owner ?? null, {emitEvent: false});
-      this.filterFormGroup.controls.showType.setValue(filterValues.showType ?? null, {emitEvent: false});
     });
 
     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 this.showService.list$().pipe(
-      map(shows =>
-        shows
-          .map(show => show.owner)
-          .filter(onlyUnique)
-          .filter((ownerId): ownerId is string => !!ownerId)
-      ),
-      switchMap(ownerIds => {
-        if (ownerIds.length === 0) {
-          return of([] as {key: string; value: string}[]);
-        }
-
-        return combineLatest(
-          ownerIds.map(ownerId =>
-            this.userService.getUserbyId$(ownerId).pipe(
-              map(user => ({
-                key: ownerId,
-                value: user?.name,
-              }))
-            )
-          )
-        );
-      }),
-      map(owners => {
-        return owners.sort(dynamicSort('value'));
-      }),
-      distinctUntilChanged((left, right) => this.sameOwners(left, right)),
-      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 || null},
+      queryParams: {[key]: value},
       queryParamsHandling: 'merge',
     });
     await this.router.navigateByUrl(route);
   }
-
-  private sameOwners(left: {key: string; value: string}[], right: {key: string; value: string}[]): boolean {
-    if (left.length !== right.length) {
-      return false;
-    }
-
-    return left.every((owner, index) => owner.key === right[index]?.key && owner.value === right[index]?.value);
-  }
 }

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

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

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

@@ -1,3 +1,5 @@
+@import "../../../../../styles/styles";
+
 .list-item {
   padding: 5px 20px;
   display: grid;
@@ -10,11 +12,10 @@
   }
 
   cursor: pointer;
-  transition: var(--transition);
 
   &:hover {
-    background: var(--hover-background);
-    color: var(--text);
+    background: @primary-color;
+    color: #fff;
   }
 }
 

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

@@ -6,11 +6,13 @@ describe('ListItemComponent', () => {
   let component: ListItemComponent;
   let fixture: ComponentFixture<ListItemComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(
+    waitForAsync(() => {
       void TestBed.configureTestingModule({
-      imports: [ListItemComponent],
+        declarations: [ListItemComponent],
       }).compileComponents();
-  }));
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ListItemComponent);

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

@@ -1,14 +1,10 @@
 import {Component, Input} from '@angular/core';
 import {Show} from '../../services/show';
-import {DatePipe} from '@angular/common';
-import {UserNameComponent} from '../../../../services/user/user-name/user-name.component';
-import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-list-item',
   templateUrl: './list-item.component.html',
   styleUrls: ['./list-item.component.less'],
-  imports: [UserNameComponent, DatePipe, ShowTypePipe],
 })
 export class ListItemComponent {
   @Input() public show: Show | null = null;

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

@@ -1,42 +1,36 @@
 <div>
-  <!--  <app-list-header *appRole="['leader']"></app-list-header>-->
+<!--  <app-list-header *appRole="['leader']"></app-list-header>-->
   <app-list-header *appRole="['leader']">
-    @if (shows$ | async; as shows) {
-      <app-filter [shows]="publicShows$ | async"></app-filter>
-    }
+    <app-filter *ngIf="shows$ | async as shows" [shows]="publicShows$ | async"></app-filter>
   </app-list-header>
 
   <ng-container *appRole="['leader']">
-    @if (privateShows$ | async; as shows) {
-      @if (shows.length > 0) {
+    <ng-container *ngIf="privateShows$ | async as shows">
       <app-card
+        *ngIf="shows.length > 0"
         [padding]="false"
-          heading="Meine Veranstaltungen"
+        heading="meine Veranstaltungen"
       >
-          @for (show of shows | sortBy: 'desc':'date'; track show) {
         <app-list-item
+          *ngFor="let show of shows | sortBy: 'desc':'date'"
           [routerLink]="show.id"
           [show]="show"
         ></app-list-item>
-          }
       </app-card>
-      }
-    }
+    </ng-container>
   </ng-container>
 
-  @if (publicShows$ | async; as shows) {
-    @if (shows.length > 0) {
+  <ng-container *ngIf="publicShows$ | async as shows">
     <app-card
+      *ngIf="shows.length > 0"
       [padding]="false"
-        heading="Veröffentlichte Veranstaltungen"
+      heading="veröffentlichte Veranstaltungen"
     >
-        @for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
       <app-list-item
+        *ngFor="let show of shows | sortBy: 'desc':'date'; trackBy: trackBy"
         [routerLink]="show.id"
         [show]="show"
       ></app-list-item>
-        }
     </app-card>
-    }
-  }
+  </ng-container>
 </div>

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

@@ -6,11 +6,13 @@ describe('ListComponent', () => {
   let component: ListComponent;
   let fixture: ComponentFixture<ListComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(
+    waitForAsync(() => {
       void TestBed.configureTestingModule({
-      imports: [ListComponent],
+        declarations: [ListComponent],
       }).compileComponents();
-  }));
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ListComponent);

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

@@ -1,30 +1,21 @@
-import {Component, inject} from '@angular/core';
+import {Component} from '@angular/core';
 import {combineLatest} from 'rxjs';
 import {Show} from '../services/show';
 import {fade} from '../../../animations';
 import {ShowService} from '../services/show.service';
 import {FilterValues} from './filter/filter-values';
-import {ActivatedRoute, RouterLink} from '@angular/router';
-import {map, switchMap} from 'rxjs/operators';
-import {RoleDirective} from '../../../services/user/role.directive';
-import {ListHeaderComponent} from '../../../widget-modules/components/list-header/list-header.component';
-import {AsyncPipe} from '@angular/common';
-import {FilterComponent} from './filter/filter.component';
-import {CardComponent} from '../../../widget-modules/components/card/card.component';
-import {ListItemComponent} from './list-item/list-item.component';
-import {SortByPipe} from '../../../widget-modules/pipes/sort-by/sort-by.pipe';
+import {ActivatedRoute} from '@angular/router';
+import {map} from 'rxjs/operators';
 
 @Component({
   selector: 'app-list',
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.less'],
   animations: [fade],
-  imports: [RoleDirective, ListHeaderComponent, FilterComponent, CardComponent, ListItemComponent, RouterLink, AsyncPipe, SortByPipe],
 })
 export class ListComponent {
-  private showService = inject(ShowService);
-  private activatedRoute = inject(ActivatedRoute);
-
+  public shows$ = this.showService.list$();
+  public privateShows$ = this.showService.list$().pipe(map(show => show.filter(_ => !_.published)));
   public lastMonths$ = this.activatedRoute.queryParams.pipe(
     map(params => {
       const filterValues = params as FilterValues;
@@ -32,37 +23,18 @@ export class ListComponent {
       return +filterValues.time;
     })
   );
-  public owner$ = this.activatedRoute.queryParams.pipe(
-    map(params => {
-      const filterValues = params as FilterValues;
-      return filterValues?.owner;
-    })
-  );
-  public showType$ = this.activatedRoute.queryParams.pipe(
-    map(params => {
-      const filterValues = params as FilterValues;
-      return filterValues?.showType;
-    })
-  );
-  public shows$ = this.showService.list$();
-  public privateShows$ = this.showService.list$().pipe(map(show => show.filter(_ => !_.published)));
-  public queriedPublicShows$ = this.lastMonths$.pipe(switchMap(lastMonths => this.showService.listPublicSince$(lastMonths)));
-  public fallbackPublicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
-    map(([shows, lastMonths]) => {
-      const startDate = new Date();
-      startDate.setHours(0, 0, 0, 0);
-      startDate.setDate(startDate.getDate() - lastMonths * 30);
 
-      return shows.filter(show => show.published && !show.archived && show.date.toDate() >= startDate);
+  public publicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
+    map(_ =>
+      _[0].filter(f => {
+        const d = new Date();
+        d.setMonth(d.getMonth() - _[1]);
+        return f.published && f.date.toDate() >= d;
       })
+    )
   );
-  public publicShows$ = combineLatest([this.queriedPublicShows$, this.fallbackPublicShows$, this.owner$, this.showType$]).pipe(
-    map(([queriedShows, fallbackShows, owner, showType]) => {
-      const shows = queriedShows.length > 0 || fallbackShows.length === 0 ? queriedShows : fallbackShows;
 
-      return shows.filter(show => !owner || show.owner === owner).filter(show => !showType || show.showType === showType);
-    })
-  );
+  public constructor(private showService: ShowService, private activatedRoute: ActivatedRoute) {}
 
   public trackBy = (index: number, show: unknown) => (show as Show).id;
 }

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

@@ -5,26 +5,20 @@
         <mat-label>Art der Veranstaltung</mat-label>
         <mat-select formControlName="showType">
           <mat-optgroup label="öffentlich">
-            @for (key of showTypePublic; track key) {
-              <mat-option [value]="key">{{
+            <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
               key | showType
-                }}
-              </mat-option>
-            }
+              }}</mat-option>
           </mat-optgroup>
           <mat-optgroup label="privat">
-            @for (key of showTypePrivate; track key) {
-              <mat-option [value]="key">{{
+            <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
               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

@@ -6,11 +6,13 @@ describe('NewComponent', () => {
   let component: NewComponent;
   let fixture: ComponentFixture<NewComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(
+    waitForAsync(() => {
       void TestBed.configureTestingModule({
-      imports: [NewComponent],
+        declarations: [NewComponent],
       }).compileComponents();
-  }));
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NewComponent);

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

@@ -1,48 +1,18 @@
-import {Component, OnInit, inject} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ShowDataService} from '../services/show-data.service';
 import {Observable} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
-import {CardComponent} from '../../../widget-modules/components/card/card.component';
-import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
-import {MatSelect} from '@angular/material/select';
-import {MatOptgroup, MatOption} from '@angular/material/core';
-
-import {MatInput} from '@angular/material/input';
-import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
-import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
-import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
-import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-new',
   templateUrl: './new.component.html',
   styleUrls: ['./new.component.less'],
-  imports: [
-    CardComponent,
-    ReactiveFormsModule,
-    MatFormField,
-    MatLabel,
-    MatSelect,
-    MatOptgroup,
-    MatOption,
-    MatInput,
-    MatDatepickerInput,
-    MatDatepickerToggle,
-    MatSuffix,
-    MatDatepicker,
-    ButtonRowComponent,
-    ButtonComponent,
-    ShowTypePipe,
-  ],
 })
 export class NewComponent implements OnInit {
-  private showService = inject(ShowService);
-  private router = inject(Router);
-
   public shows$: Observable<Show[]>;
   public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
   public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
@@ -52,9 +22,7 @@ export class NewComponent implements OnInit {
   });
   public faSave = faSave;
 
-  public constructor() {
-    const showDataService = inject(ShowDataService);
-
+  public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
     this.shows$ = showDataService.list$;
   }
 

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

@@ -1,9 +1,10 @@
-import {Injectable, inject} from '@angular/core';
+import {Injectable} from '@angular/core';
 import {Document, HeadingLevel, ISectionOptions, Packer, Paragraph} from 'docx';
 import {ShowService} from './show.service';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {ShowSongService} from './show-song.service';
 import {Song} from '../../songs/services/song';
+import {SongService} from '../../songs/services/song.service';
 import {ShowSong} from './show-song';
 import {Show} from './show';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
@@ -26,11 +27,14 @@ export interface DownloadOptions {
   providedIn: 'root',
 })
 export class DocxService {
-  private showService = inject(ShowService);
-  private showSongService = inject(ShowSongService);
-  private textRenderingService = inject(TextRenderingService);
-  private userService = inject(UserService);
-  private configService = inject(ConfigService);
+  public constructor(
+    private showService: ShowService,
+    private showSongService: ShowSongService,
+    private songService: SongService,
+    private textRenderingService: TextRenderingService,
+    private userService: UserService,
+    private configService: ConfigService
+  ) {}
 
   public async create(showId: string, options: DownloadOptions = {}): Promise<void> {
     const data = await this.prepareData(showId);
@@ -90,14 +94,7 @@ export class DocxService {
     });
   }
 
-  private renderSongs(
-    songs: {
-      showSong: ShowSong;
-      sections: Section[];
-    }[],
-    options: DownloadOptions,
-    config: Config
-  ): Paragraph[] {
+  private renderSongs(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)], []);
   }
 
@@ -192,8 +189,7 @@ export class DocxService {
     if (!config) return null;
 
     const showSongs = await this.showSongService.list(showId);
-    const songsLoaded = showSongs
-      .map(showSong => {
+    const songsAsync = showSongs.map(showSong => {
       const sections = this.textRenderingService.parse(showSong.text, {
         baseKey: showSong.keyOriginal,
         targetKey: showSong.key,
@@ -202,16 +198,9 @@ export class DocxService {
         showSong,
         sections,
       };
-      })
-      .filter(_ => !!_)
-      .map(
-        _ =>
-          _ as {
-            showSong: ShowSong;
-            sections: Section[];
-          }
-      );
-    const songs = show.order.map(_ => songsLoaded.find(f => f.showSong.id === _)).filter(_ => !!_);
+    });
+    const songsLoaded = (await Promise.all(songsAsync)).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.spec.ts

@@ -1,115 +1,12 @@
 import {TestBed} from '@angular/core/testing';
-import {firstValueFrom, of, Subject} from 'rxjs';
-import {skip, take} from 'rxjs/operators';
-import {DbService} from '../../../services/db.service';
+
 import {ShowDataService} from './show-data.service';
 
 describe('ShowDataService', () => {
-  let service: ShowDataService;
-  let shows$: Subject<Array<{id: string; date: {toMillis: () => number}; archived?: boolean}>>;
-  let docUpdateSpy: jasmine.Spy<() => Promise<void>>;
-  let docSpy: jasmine.Spy;
-  let colAddSpy: jasmine.Spy<() => Promise<{id: string}>>;
-  let colSpy: jasmine.Spy;
-  let dbServiceSpy: jasmine.SpyObj<DbService>;
-
-  beforeEach(() => {
-    shows$ = new Subject<Array<{id: string; date: {toMillis: () => number}; archived?: boolean}>>();
-    docUpdateSpy = jasmine.createSpy('update').and.resolveTo();
-    docSpy = jasmine.createSpy('doc').and.returnValue({update: docUpdateSpy});
-    colAddSpy = jasmine.createSpy('add').and.resolveTo({id: 'show-3'});
-    colSpy = jasmine.createSpy('col').and.returnValue({add: colAddSpy});
-    dbServiceSpy = jasmine.createSpyObj<DbService>('DbService', ['col$', 'doc$', 'doc', 'col']);
-    dbServiceSpy.col$.and.returnValue(shows$.asObservable());
-    dbServiceSpy.doc$.and.returnValue(of(null));
-    dbServiceSpy.doc.and.callFake(docSpy);
-    dbServiceSpy.col.and.callFake(colSpy);
-
-    void TestBed.configureTestingModule({
-      providers: [{provide: DbService, useValue: dbServiceSpy}],
-    });
-
-    service = TestBed.inject(ShowDataService);
-  });
+  beforeEach(() => void TestBed.configureTestingModule({}));
 
   it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should load the raw show list from the shows collection on creation', () => {
-    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows');
-  });
-
-  it('should sort the list by ascending show date', async () => {
-    const listPromise = firstValueFrom(service.list$.pipe(take(1)));
-
-    shows$.next([
-      {id: 'show-2', date: {toMillis: () => 200}},
-      {id: 'show-1', date: {toMillis: () => 100}},
-      {id: 'show-3', date: {toMillis: () => 300}},
-    ]);
-
-    const list = await listPromise;
-
-    expect(list.map(show => show.id)).toEqual(['show-1', 'show-2', 'show-3']);
-  });
-
-  it('should replay the latest sorted list to late subscribers', async () => {
-    const initialSubscription = service.list$.subscribe();
-
-    shows$.next([
-      {id: 'show-2', date: {toMillis: () => 200}},
-      {id: 'show-1', date: {toMillis: () => 100}},
-    ]);
-
-    const replayedList = await firstValueFrom(service.list$.pipe(take(1)));
-
-    expect(replayedList.map(show => show.id)).toEqual(['show-1', 'show-2']);
-
-    initialSubscription.unsubscribe();
-  });
-
-  it('should expose the raw list without sorting via listRaw$', () => {
-    service.listRaw$().subscribe();
-
-    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows');
-  });
-
-  it('should request only published recent shows and filter archived entries', async () => {
-    const publicShows$ = of([
-      {id: 'show-1', archived: false},
-      {id: 'show-2', archived: true},
-      {id: 'show-3'},
-    ]);
-    dbServiceSpy.col$.and.returnValue(publicShows$ as never);
-
-    const result = await firstValueFrom(service.listPublicSince$(3));
-
-    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows', jasmine.any(Array));
-    const [, queryConstraints] = dbServiceSpy.col$.calls.mostRecent().args as [string, unknown[]];
-    expect(queryConstraints.length).toBe(3);
-    expect(result.map(show => show.id)).toEqual(['show-1', 'show-3']);
-  });
-
-  it('should read a single show by id', () => {
-    service.read$('show-7').subscribe();
-
-    expect(dbServiceSpy.doc$).toHaveBeenCalledWith('shows/show-7');
-  });
-
-  it('should update a show at the expected document path', async () => {
-    await service.update('show-8', {archived: true});
-
-    expect(docSpy).toHaveBeenCalledWith('shows/show-8');
-    const [updatePayload] = docUpdateSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
-    expect(updatePayload).toEqual({archived: true});
-  });
-
-  it('should add a show to the shows collection and return the new id', async () => {
-    await expectAsync(service.add({published: true})).toBeResolvedTo('show-3');
-
-    expect(colSpy).toHaveBeenCalledWith('shows');
-    const [addPayload] = colAddSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
-    expect(addPayload).toEqual({published: true});
+    const service: ShowDataService = TestBed.inject(ShowDataService);
+    void expect(service).toBeTruthy();
   });
 });

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

@@ -1,47 +1,26 @@
-import {Injectable, inject} from '@angular/core';
-import {Observable} from 'rxjs';
+import {Injectable} from '@angular/core';
+import {BehaviorSubject, firstValueFrom, Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
 import {Show} from './show';
-import {map, shareReplay} from 'rxjs/operators';
-import {orderBy, QueryConstraint, Timestamp, where} from 'firebase/firestore';
+import {map} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ShowDataService {
-  private dbService = inject(DbService);
-
   private collection = 'shows';
-  public list$: Observable<Show[]> = this.dbService.col$<Show>(this.collection).pipe(
-    // server-side ordering cuts client work and keeps stable order across subscribers
-    map(shows => [...shows].sort((a, b) => a.date.toMillis() - b.date.toMillis())),
-    shareReplay({
-      bufferSize: 1,
-      refCount: true,
-    })
-  );
 
-  public listRaw$ = () => this.dbService.col$<Show>(this.collection);
-
-  public listPublicSince$(lastMonths: number): Observable<Show[]> {
-    const startDate = new Date();
-    startDate.setHours(0, 0, 0, 0);
-    startDate.setDate(startDate.getDate() - lastMonths * 30);
-    const startTimestamp = Timestamp.fromDate(startDate);
-
-    const queryConstraints: QueryConstraint[] = [where('published', '==', true), where('date', '>=', startTimestamp), orderBy('date', 'desc')];
-
-    return this.dbService.col$<Show>(this.collection, queryConstraints).pipe(
-      map(shows => shows.filter(show => !show.archived)),
-      shareReplay({
-        bufferSize: 1,
-        refCount: true,
-      })
-    );
+  public constructor(private dbService: DbService) {
+    this.dbService.col$<Show>(this.collection).subscribe(_ => this.list$.next(_));
   }
 
-  public read$ = (showId: string): Observable<Show | null> => this.dbService.doc$(`${this.collection}/${showId}`);
+  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));
+
+  // public list$ = (): Observable<Show[]> => this.dbService.col$(this.collection);
+  // public read$ = (showId: string): Observable<Show | null> => this.dbService.doc$(`${this.collection}/${showId}`);
   public update = async (showId: string, data: Partial<Show>): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}`).update(data);
   public add = async (data: Partial<Show>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
 }

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

@@ -1,98 +1,16 @@
 import {TestBed} from '@angular/core/testing';
-import {of} from 'rxjs';
-import {DbService} from '../../../services/db.service';
+
 import {ShowSongDataService} from './show-song-data.service';
 
 describe('ShowSongDataService', () => {
   let service: ShowSongDataService;
-  let docUpdateSpy: jasmine.Spy<() => Promise<void>>;
-  let docDeleteSpy: jasmine.Spy<() => Promise<void>>;
-  let docSpy: jasmine.Spy;
-  let colAddSpy: jasmine.Spy<() => Promise<{id: string}>>;
-  let colSpy: jasmine.Spy;
-  let dbServiceSpy: jasmine.SpyObj<DbService>;
 
   beforeEach(() => {
-    docUpdateSpy = jasmine.createSpy('update').and.resolveTo();
-    docDeleteSpy = jasmine.createSpy('delete').and.resolveTo();
-    docSpy = jasmine.createSpy('doc').and.returnValue({
-      update: docUpdateSpy,
-      delete: docDeleteSpy,
-    });
-    colAddSpy = jasmine.createSpy('add').and.resolveTo({id: 'show-song-3'});
-    colSpy = jasmine.createSpy('col').and.returnValue({add: colAddSpy});
-    dbServiceSpy = jasmine.createSpyObj<DbService>('DbService', ['col$', 'doc$', 'doc', 'col']);
-    dbServiceSpy.col$.and.callFake(() => of([{id: 'show-song-1'}]) as never);
-    dbServiceSpy.doc$.and.returnValue(of({id: 'show-song-1'}) as never);
-    dbServiceSpy.doc.and.callFake(docSpy);
-    dbServiceSpy.col.and.callFake(colSpy);
-
-    void TestBed.configureTestingModule({
-      providers: [{provide: DbService, useValue: dbServiceSpy}],
-    });
-
+    void TestBed.configureTestingModule({});
     service = TestBed.inject(ShowSongDataService);
   });
 
   it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should cache the list observable per show id when no query constraints are passed', () => {
-    const first = service.list$('show-1');
-    const second = service.list$('show-1');
-
-    expect(first).toBe(second);
-    expect(dbServiceSpy.col$).toHaveBeenCalledTimes(1);
-    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows/show-1/songs');
-  });
-
-  it('should not reuse the cache when query constraints are passed', () => {
-    const constraints = [{}] as never[];
-
-    const first = service.list$('show-1', constraints as never);
-    const second = service.list$('show-1', constraints as never);
-
-    expect(first).not.toBe(second);
-    expect(dbServiceSpy.col$).toHaveBeenCalledTimes(2);
-    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows/show-1/songs', constraints as never);
-  });
-
-  it('should keep separate caches for different shows', () => {
-    service.list$('show-1');
-    service.list$('show-2');
-
-    expect(dbServiceSpy.col$).toHaveBeenCalledTimes(2);
-    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows/show-1/songs');
-    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows/show-2/songs');
-  });
-
-  it('should read a single show song by nested document path', () => {
-    service.read$('show-4', 'song-5').subscribe();
-
-    expect(dbServiceSpy.doc$).toHaveBeenCalledWith('shows/show-4/songs/song-5');
-  });
-
-  it('should update a nested show song document', async () => {
-    await service.update$('show-4', 'song-5', {title: 'Updated'} as never);
-
-    expect(docSpy).toHaveBeenCalledWith('shows/show-4/songs/song-5');
-    const [updatePayload] = docUpdateSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
-    expect(updatePayload).toEqual({title: 'Updated'});
-  });
-
-  it('should delete a nested show song document', async () => {
-    await service.delete('show-4', 'song-5');
-
-    expect(docSpy).toHaveBeenCalledWith('shows/show-4/songs/song-5');
-    expect(docDeleteSpy).toHaveBeenCalled();
-  });
-
-  it('should add a song to the nested show songs collection and return the id', async () => {
-    await expectAsync(service.add('show-4', {songId: 'song-5'} as never)).toBeResolvedTo('show-song-3');
-
-    expect(colSpy).toHaveBeenCalledWith('shows/show-4/songs');
-    const [addPayload] = colAddSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
-    expect(addPayload).toEqual({songId: 'song-5'});
+    void expect(service).toBeTruthy();
   });
 });

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

@@ -1,40 +1,20 @@
-import {Injectable, inject} from '@angular/core';
+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 {QueryConstraint} from '@angular/fire/firestore';
-import {shareReplay} from 'rxjs/operators';
+import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ShowSongDataService {
-  private dbService = inject(DbService);
-
   private collection = 'shows';
   private subCollection = 'songs';
-  private listCache = new Map<string, Observable<ShowSong[]>>();
 
-  public list$ = (showId: string, queryConstraints?: QueryConstraint[]): Observable<ShowSong[]> => {
-    if (queryConstraints && queryConstraints.length > 0) {
-      return this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryConstraints);
-    }
+  public constructor(private dbService: DbService) {}
 
-    const cached = this.listCache.get(showId);
-    if (cached) {
-      return cached;
-    }
-
-    const stream$ = this.dbService.col$<ShowSong>(`${this.collection}/${showId}/${this.subCollection}`).pipe(
-      shareReplay({
-        bufferSize: 1,
-        refCount: true,
-      })
-    );
-
-    this.listCache.set(showId, stream$);
-    return stream$;
-  };
+  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> =>

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

@@ -1,131 +1,16 @@
 import {TestBed} from '@angular/core/testing';
-import {BehaviorSubject, of} from 'rxjs';
-import {SongDataService} from '../../songs/services/song-data.service';
-import {UserService} from '../../../services/user/user.service';
-import {ShowService} from './show.service';
-import {ShowSongDataService} from './show-song-data.service';
+
 import {ShowSongService} from './show-song.service';
 
 describe('ShowSongService', () => {
   let service: ShowSongService;
-  let showSongDataServiceSpy: jasmine.SpyObj<ShowSongDataService>;
-  let songDataServiceSpy: jasmine.SpyObj<SongDataService>;
-  let userServiceSpy: jasmine.SpyObj<UserService>;
-  let showServiceSpy: jasmine.SpyObj<ShowService>;
-  let user$: BehaviorSubject<any>;
-  const song = {id: 'song-1', key: 'G', title: 'Amazing Grace'} as any;
-  const showSong = {id: 'show-song-1', songId: 'song-1'} as any;
-  const show = {id: 'show-1', order: ['show-song-1', 'show-song-2']} as any;
 
   beforeEach(() => {
-    user$ = new BehaviorSubject<any>({id: 'user-1', name: 'Benjamin', role: 'editor', chordMode: 'letters', songUsage: {}});
-    showSongDataServiceSpy = jasmine.createSpyObj<ShowSongDataService>('ShowSongDataService', ['add', 'read$', 'list$', 'delete', 'update$']);
-    songDataServiceSpy = jasmine.createSpyObj<SongDataService>('SongDataService', ['read$']);
-    userServiceSpy = jasmine.createSpyObj<UserService>('UserService', ['incSongCount', 'decSongCount'], {
-      user$: user$.asObservable(),
-    });
-    showServiceSpy = jasmine.createSpyObj<ShowService>('ShowService', ['read$', 'update$']);
-
-    showSongDataServiceSpy.add.and.resolveTo('show-song-2');
-    showSongDataServiceSpy.read$.and.returnValue(of(showSong));
-    showSongDataServiceSpy.list$.and.returnValue(of([showSong]));
-    showSongDataServiceSpy.delete.and.resolveTo();
-    showSongDataServiceSpy.update$.and.resolveTo();
-    songDataServiceSpy.read$.and.returnValue(of(song));
-    userServiceSpy.incSongCount.and.resolveTo();
-    userServiceSpy.decSongCount.and.resolveTo();
-    showServiceSpy.read$.and.returnValue(of(show));
-    showServiceSpy.update$.and.resolveTo();
-
-    void TestBed.configureTestingModule({
-      providers: [
-        {provide: ShowSongDataService, useValue: showSongDataServiceSpy},
-        {provide: SongDataService, useValue: songDataServiceSpy},
-        {provide: UserService, useValue: userServiceSpy},
-        {provide: ShowService, useValue: showServiceSpy},
-      ],
-    });
-
+    void TestBed.configureTestingModule({});
     service = TestBed.inject(ShowSongService);
   });
 
   it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should create a show song from the song and current user', async () => {
-    await expectAsync(service.new$('show-1', 'song-1', true)).toBeResolvedTo('show-song-2');
-
-    expect(userServiceSpy.incSongCount).toHaveBeenCalledWith('song-1');
-    expect(showSongDataServiceSpy.add).toHaveBeenCalledWith('show-1', {
-      ...song,
-      songId: 'song-1',
-      key: 'G',
-      keyOriginal: 'G',
-      chordMode: 'letters',
-      addedLive: true,
-    });
-  });
-
-  it('should return null when the song is missing', async () => {
-    songDataServiceSpy.read$.and.returnValue(of(null));
-
-    await expectAsync(service.new$('show-1', 'song-1')).toBeResolvedTo(null);
-
-    expect(showSongDataServiceSpy.add).not.toHaveBeenCalled();
-    expect(userServiceSpy.incSongCount).not.toHaveBeenCalled();
-  });
-
-  it('should return null when the current user is missing', async () => {
-    user$.next(null);
-
-    await expectAsync(service.new$('show-1', 'song-1')).toBeResolvedTo(null);
-
-    expect(showSongDataServiceSpy.add).not.toHaveBeenCalled();
-    expect(userServiceSpy.incSongCount).not.toHaveBeenCalled();
-  });
-
-  it('should delegate reads to the data service', async () => {
-    await expectAsync(service.read('show-1', 'show-song-1')).toBeResolvedTo(showSong);
-    expect(showSongDataServiceSpy.read$).toHaveBeenCalledWith('show-1', 'show-song-1');
-  });
-
-  it('should delegate list access to the data service', async () => {
-    await expectAsync(service.list('show-1')).toBeResolvedTo([showSong]);
-    expect(showSongDataServiceSpy.list$).toHaveBeenCalledWith('show-1');
-  });
-
-  it('should delete a show song, update the order and decrement song usage', async () => {
-    await service.delete$('show-1', 'show-song-1', 0);
-
-    expect(showSongDataServiceSpy.delete).toHaveBeenCalledWith('show-1', 'show-song-1');
-    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', {order: ['show-song-2']});
-    expect(userServiceSpy.decSongCount).toHaveBeenCalledWith('song-1');
-  });
-
-  it('should stop delete when the show is missing', async () => {
-    showServiceSpy.read$.and.returnValue(of(null));
-
-    await service.delete$('show-1', 'show-song-1', 0);
-
-    expect(showSongDataServiceSpy.delete).not.toHaveBeenCalled();
-    expect(showServiceSpy.update$).not.toHaveBeenCalled();
-    expect(userServiceSpy.decSongCount).not.toHaveBeenCalled();
-  });
-
-  it('should stop delete when the show song is missing', async () => {
-    showSongDataServiceSpy.read$.and.returnValue(of(null));
-
-    await service.delete$('show-1', 'show-song-1', 0);
-
-    expect(showSongDataServiceSpy.delete).not.toHaveBeenCalled();
-    expect(showServiceSpy.update$).not.toHaveBeenCalled();
-    expect(userServiceSpy.decSongCount).not.toHaveBeenCalled();
-  });
-
-  it('should delegate updates to the data service', async () => {
-    await service.update$('show-1', 'show-song-1', {title: 'Updated'} as never);
-
-    expect(showSongDataServiceSpy.update$).toHaveBeenCalledWith('show-1', 'show-song-1', {title: 'Updated'} as never);
+    void expect(service).toBeTruthy();
   });
 });

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

@@ -1,19 +1,24 @@
-import {Injectable, inject} from '@angular/core';
+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',
 })
 export class ShowSongService {
-  private showSongDataService = inject(ShowSongDataService);
-  private songDataService = inject(SongDataService);
-  private userService = inject(UserService);
-  private showService = inject(ShowService);
+  public constructor(
+    private showSongDataService: ShowSongDataService,
+    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));
@@ -27,7 +32,6 @@ export class ShowSongService {
       chordMode: user.chordMode,
       addedLive,
     };
-    await this.userService.incSongCount(songId);
     return await this.showSongDataService.add(showId, data);
   }
 
@@ -37,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> {
-    const [showSong, show] = await Promise.all([this.read(showId, showSongId), firstValueFrom(this.showService.read$(showId))]);
+  public async delete$(showId: string, songId: string, index: number): Promise<void> {
+    await this.showSongDataService.delete(showId, songId);
+    const show = await firstValueFrom(this.showService.read$(showId));
     if (!show) return;
-    if (!showSong) return;
-
-    const order = [...show.order];
+    const order = show.order;
     order.splice(index, 1);
+    await this.showService.update$(showId, {order});
+  }
 
-    await Promise.all([this.showSongDataService.delete(showId, showSongId), this.showService.update$(showId, {order}), 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

@@ -1,102 +1,27 @@
 import {TestBed} from '@angular/core/testing';
-import {BehaviorSubject, of} from 'rxjs';
-import {ShowDataService} from './show-data.service';
+
 import {ShowService} from './show.service';
-import {UserService} from '../../../services/user/user.service';
+import {ShowDataService} from './show-data.service';
 
 describe('ShowService', () => {
-  let service: ShowService;
-  let showDataServiceSpy: jasmine.SpyObj<ShowDataService>;
-  let user$: BehaviorSubject<unknown>;
-  const shows = [
-    {id: 'show-1', owner: 'user-1', published: false, archived: false},
-    {id: 'show-2', owner: 'other-user', published: true, archived: false},
-    {id: 'show-3', owner: 'user-1', published: true, archived: true},
-  ] as never;
-
-  beforeEach(() => {
-    user$ = new BehaviorSubject<unknown>({id: 'user-1'});
-    showDataServiceSpy = jasmine.createSpyObj<ShowDataService>('ShowDataService', ['read$', 'listPublicSince$', 'update', 'add'], {
-      list$: of(shows),
-    });
-    showDataServiceSpy.read$.and.returnValue(of(shows[0]));
-    showDataServiceSpy.listPublicSince$.and.returnValue(of([shows[1]]));
-    showDataServiceSpy.update.and.resolveTo();
-    showDataServiceSpy.add.and.resolveTo('new-show-id');
-
+  const mockShowDataService = {add: Promise.resolve(null)};
+  beforeEach(
+    () =>
       void TestBed.configureTestingModule({
-      providers: [
-        {provide: ShowDataService, useValue: showDataServiceSpy},
-        {provide: UserService, useValue: {user$: user$.asObservable()}},
-      ],
-    });
-
-    service = TestBed.inject(ShowService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should list published shows and own drafts, but exclude archived ones', done => {
-    service.list$().subscribe(result => {
-      expect(result.map(show => show.id)).toEqual(['show-1', 'show-2']);
-      done();
-    });
-  });
-
-  it('should filter out private drafts when publishedOnly is true', done => {
-    service.list$(true).subscribe(result => {
-      expect(result.map(show => show.id)).toEqual(['show-2']);
-      done();
-    });
-  });
-
-  it('should delegate public listing to the data service', done => {
-    service.listPublicSince$(6).subscribe(result => {
-      expect(result).toEqual([shows[1]]);
-      expect(showDataServiceSpy.listPublicSince$).toHaveBeenCalledWith(6);
-      done();
-    });
-  });
-
-  it('should delegate reads to the data service', done => {
-    service.read$('show-1').subscribe(result => {
-      expect(result).toEqual(shows[0]);
-      expect(showDataServiceSpy.read$).toHaveBeenCalledWith('show-1');
-      done();
-    });
-  });
-
-  it('should delegate updates to the data service', async () => {
-    await service.update$('show-1', {published: true});
-
-    expect(showDataServiceSpy.update).toHaveBeenCalledWith('show-1', {published: true});
-  });
-
-  it('should return null when creating a show without showType', async () => {
-    await expectAsync(service.new$({published: true})).toBeResolvedTo(null);
-
-    expect(showDataServiceSpy.add).not.toHaveBeenCalled();
-  });
-
-  it('should return null when no user is available for show creation', async () => {
-    user$.next(null);
-
-    await expectAsync(service.new$({showType: 'misc-public'})).toBeResolvedTo(null);
-
-    expect(showDataServiceSpy.add).not.toHaveBeenCalled();
-  });
+        providers: [{provide: ShowDataService, useValue: mockShowDataService}],
+      })
+  );
 
   ShowService.SHOW_TYPE_PUBLIC.forEach(type => {
     it('should calc public flag for ' + type, async () => {
+      const service: ShowService = TestBed.inject(ShowService);
+      const addSpy = spyOn(TestBed.inject(ShowDataService), 'add').and.returnValue(Promise.resolve('id'));
+
       const id = await service.new$({showType: type});
 
-      expect(id).toBe('new-show-id');
-      expect(showDataServiceSpy.add).toHaveBeenCalledWith({
+      void expect(id).toBe('id');
+      void expect(addSpy).toHaveBeenCalledWith({
         showType: type,
-        owner: 'user-1',
-        order: [],
         public: true,
       });
     });
@@ -104,13 +29,14 @@ describe('ShowService', () => {
 
   ShowService.SHOW_TYPE_PRIVATE.forEach(type => {
     it('should calc private flag for ' + type, async () => {
+      const service: ShowService = TestBed.inject(ShowService);
+      const addSpy = spyOn(TestBed.inject(ShowDataService), 'add').and.returnValue(Promise.resolve('id'));
+
       const id = await service.new$({showType: type});
 
-      expect(id).toBe('new-show-id');
-      expect(showDataServiceSpy.add).toHaveBeenCalledWith({
+      void expect(id).toBe('id');
+      void expect(addSpy).toHaveBeenCalledWith({
         showType: type,
-        owner: 'user-1',
-        order: [],
         public: false,
       });
     });

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

@@ -1,7 +1,7 @@
-import {Injectable, inject} from '@angular/core';
+import {Injectable} from '@angular/core';
 import {ShowDataService} from './show-data.service';
 import {Show} from './show';
-import {firstValueFrom, Observable} from 'rxjs';
+import {Observable} from 'rxjs';
 import {UserService} from '../../../services/user/user.service';
 import {map, switchMap} from 'rxjs/operators';
 import {User} from '../../../services/user/user';
@@ -10,15 +10,16 @@ import {User} from '../../../services/user/user';
   providedIn: 'root',
 })
 export class ShowService {
-  private showDataService = inject(ShowDataService);
-  private userService = inject(UserService);
-
   public static SHOW_TYPE = ['service-worship', 'service-praise', 'home-group-big', 'home-group', 'prayer-group', 'teens-group', 'kids-group', 'misc-public', 'misc-private'];
   public static SHOW_TYPE_PUBLIC = ['service-worship', 'service-praise', 'home-group-big', 'teens-group', 'kids-group', 'misc-public'];
   public static SHOW_TYPE_PRIVATE = ['home-group', 'prayer-group', 'misc-private'];
+  private user: User | null = null;
+
+  public constructor(private showDataService: ShowDataService, private userService: UserService) {
+    userService.user$.subscribe(_ => (this.user = _));
+  }
 
   public read$ = (showId: string): Observable<Show | null> => this.showDataService.read$(showId);
-  public listPublicSince$ = (lastMonths: number): Observable<Show[]> => this.showDataService.listPublicSince$(lastMonths);
 
   public list$(publishedOnly = false): Observable<Show[]> {
     return this.userService.user$.pipe(
@@ -26,18 +27,22 @@ export class ShowService {
         () => this.showDataService.list$,
         (user: User | null, shows: Show[]) => ({user, shows})
       ),
-      map(s => s.shows.filter(show => !show.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)))
+      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))
+      )
     );
   }
 
   public update$ = async (showId: string, data: Partial<Show>): Promise<void> => this.showDataService.update(showId, data);
 
   public async new$(data: Partial<Show>): Promise<string | null> {
-    const user = await firstValueFrom(this.userService.user$);
-    if (!data.showType || !user) return null;
+    if (!data.showType || !this.user) return null;
     const calculatedData: Partial<Show> = {
       ...data,
-      owner: user.id,
+      owner: this.user.id,
       order: [],
       public: ShowService.SHOW_TYPE_PUBLIC.indexOf(data.showType) !== -1,
     };

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

@@ -1,4 +1,5 @@
-import {Timestamp} from '@angular/fire/firestore';
+import firebase from 'firebase/compat/app';
+import Timestamp = firebase.firestore.Timestamp;
 
 export type PresentationBackground = 'none' | 'blue' | 'green' | 'leder' | 'praise' | 'bible';
 
@@ -12,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

@@ -1,5 +1,4 @@
-@if (show$ | async; as show) {
-  <div>
+<div *ngIf="show$ | async as show">
   <app-card
     [fullscreen]="useSwiper"
     closeLink="../"
@@ -7,53 +6,42 @@
       show.date.toDate() | date: 'dd.MM.yyyy'
     }} - {{ getStatus(show) }}"
   >
-      @if (!useSwiper) {
-        <p>{{ 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">
       <div>
-          @if (!useSwiper) {
-            <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
-          }
+        <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 ? faRestore : faMaximize" class="btn-delete btn-icon"
-          matTooltip="Vollbild"></app-menu-button>
+                         [icon]="useSwiper ? faFileLines : faFile" class="btn-delete btn-icon"
+                         matTooltip="Swiper umschalten"></app-menu-button>
       </div>
     </div>
-      @if (showSongs && !useSwiper) {
-        <div (cdkDropListDropped)="drop($event, show)"
-          [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
-          class="song-list">
-          @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
-            <div cdkDrag class="song-row">
+         (cdkDropListDropped)="drop($event, show)">
+      <div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" class="song-row" cdkDrag>
         <app-song
-                [fullscreen]="useSwiper"
-                [index]="i"
-                [showId]="showId"
           [showSong]="song"
+          [showId]="showId"
           [showText]="showText"
           [show]="show"
+          [fullscreen]="useSwiper"
+          [index]="i"
         ></app-song>
       </div>
-          }
     </div>
-      }
-      @if (useSwiper) {
-        <swiper-container scrollbar="true">
-          @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
-            <swiper-slide
-              [style.font-size]="textSize + 'em'"
+
+    <swiper-container *ngIf="useSwiper" scrollbar="true">
+      <swiper-slide *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" [style.font-size]="textSize + 'em'"
                     class="song-swipe">
         <app-song
           [fullscreen]="true"
@@ -63,61 +51,37 @@
           [showText]="true"
           [show]="show"
         ></app-song>
-              <div class="time">{{ currentTime | date: 'HH:mm' }}</div>
-              @if (getNextSong(orderedShowSongs(show), i); as next) {
-                <div class="next-song">{{ next }}
-                  <fa-icon [icon]="faNextSong"></fa-icon>
-                </div>
-              }
       </swiper-slide>
-          }
     </swiper-container>
-      }
-      @if (songs$ | async; as songs) {
-        @if (songs && !show.published && !useSwiper) {
+
     <app-add-song
-            [showSongs]="showSongs"
+      *ngIf="songs && !show.published && !useSwiper"
       [show]="show"
+      [showSongs]="showSongs"
       [songs]="songs"
     ></app-add-song>
-        }
-      }
-      @if (!useSwiper) {
-        <app-button-row>
+
+    <app-button-row *ngIf="!useSwiper">
       <ng-container *appRole="['leader']">
         <ng-container *appOwner="show.owner">
-              @if (!show.archived) {
-                <app-button (click)="onArchive(true)" [icon]="faBox">
+          <app-button (click)="onArchive(true)" *ngIf="!show.archived" [icon]="faBox">
             Archivieren
           </app-button>
-              }
-              @if (show.archived) {
-                <app-button (click)="onArchive(false)" [icon]="faBoxOpen">
+          <app-button (click)="onArchive(false)" *ngIf="show.archived" [icon]="faBoxOpen">
             Wiederherstellen
           </app-button>
-              }
-              @if (!show.published) {
-                <app-button (click)="onPublish(true)" [icon]="faPublish">
+          <app-button (click)="onPublish(true)" *ngIf="!show.published" [icon]="faPublish">
             Veröffentlichen
           </app-button>
-              }
-              @if (show.published) {
-                <app-button (click)="onPublish(false)" [icon]="faUnpublish">
+          <app-button (click)="onPublish(false)" *ngIf="show.published" [icon]="faUnpublish">
             Veröffentlichung zurückziehen
           </app-button>
-              }
-              @if (show.published) {
-                <app-button (click)="onShare(show)" [icon]="faShare">
-                  Teilen
-                </app-button>
-              }
-              @if (!show.published) {
-                <app-button (click)="onChange(show.id)" [icon]="faSliders">
+          <app-button (click)="onChange(show.id)" [icon]="faSliders" *ngIf="!show.published">
             Ändern
           </app-button>
-              }
         </ng-container>
       </ng-container>
+
       <app-button [icon]="faDownload" [matMenuTriggerFor]="menu">
         Herunterladen
       </app-button>
@@ -130,7 +94,5 @@
         </app-button>
       </mat-menu>
     </app-button-row>
-      }
   </app-card>
-  </div>
-}
+</div>

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

@@ -5,7 +5,7 @@
 
 .song-row:not(:last-child) {
   display: block;
-  border-bottom: 1px solid var(--divider);
+  border-bottom: 1px solid #0002;
 }
 
 .song-swipe {
@@ -21,10 +21,9 @@
 }
 
 .cdk-drag-preview {
-  background-color: var(--surface-strong);
+  background-color: white;
   box-sizing: border-box;
   border-radius: 4px;
-  border: 1px solid var(--surface-border);
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
@@ -50,21 +49,3 @@
   top: 12px;
   z-index: 5;
 }
-
-.next-song {
-  color: var(--text-muted);
-  position: fixed;
-  bottom: 0;
-  right: 10px;
-
-  fa-icon {
-    padding: 6px;
-  }
-}
-
-.time {
-  color: var(--text-muted);
-  position: fixed;
-  bottom: 0;
-  left: 10px;
-}

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

@@ -6,11 +6,13 @@ describe('ShowComponent', () => {
   let component: ShowComponent;
   let fixture: ComponentFixture<ShowComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(
+    waitForAsync(() => {
       void TestBed.configureTestingModule({
-      imports: [ShowComponent],
+        declarations: [ShowComponent],
       }).compileComponents();
-  }));
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ShowComponent);

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

@@ -1,8 +1,8 @@
-import {ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, HostListener, OnDestroy, OnInit, inject} from '@angular/core';
-import {filter, map, shareReplay, switchMap, tap} from 'rxjs/operators';
+import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from '@angular/core';
+import {filter, map, switchMap, tap} from 'rxjs/operators';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ShowService} from '../services/show.service';
-import {Observable, of, Subscription} from 'rxjs';
+import {Observable, Subscription} from 'rxjs';
 import {Show} from '../services/show';
 import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
@@ -10,125 +10,70 @@ 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,
   faLock,
   faMagnifyingGlassMinus,
   faMagnifyingGlassPlus,
-  faMaximize,
-  faMinimize,
   faSliders,
-  faUnlock,
   faUser,
   faUsers,
 } from '@fortawesome/free-solid-svg-icons';
-import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
+import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 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';
-import {AsyncPipe, DatePipe} from '@angular/common';
-import {CardComponent} from '../../../widget-modules/components/card/card.component';
-import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
-import {MatCheckbox} from '@angular/material/checkbox';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MenuButtonComponent} from '../../../widget-modules/components/menu-button/menu-button.component';
-import {MatTooltip} from '@angular/material/tooltip';
-import {SongComponent} from './song/song.component';
-import {FaIconComponent} from '@fortawesome/angular-fontawesome';
-import {AddSongComponent} from '../../../widget-modules/components/add-song/add-song.component';
-import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
-import {RoleDirective} from '../../../services/user/role.directive';
-import {OwnerDirective} from '../../../services/user/owner.directive';
-import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
-import {MatMenu, MatMenuTrigger} from '@angular/material/menu';
-import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-show',
   templateUrl: './show.component.html',
   styleUrls: ['./show.component.less'],
   animations: [fade],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [
-    CardComponent,
-    UserNameComponent,
-    MatCheckbox,
-    ReactiveFormsModule,
-    FormsModule,
-    MenuButtonComponent,
-    MatTooltip,
-    CdkDropList,
-    CdkDrag,
-    SongComponent,
-    FaIconComponent,
-    AddSongComponent,
-    ButtonRowComponent,
-    RoleDirective,
-    OwnerDirective,
-    ButtonComponent,
-    MatMenuTrigger,
-    MatMenu,
-    AsyncPipe,
-    DatePipe,
-    ShowTypePipe,
-  ],
 })
 export class ShowComponent implements OnInit, OnDestroy {
-  private activatedRoute = inject(ActivatedRoute);
-  private showService = inject(ShowService);
-  private songService = inject(SongService);
-  private showSongService = inject(ShowSongService);
-  private docxService = inject(DocxService);
-  private router = inject(Router);
-  private cRef = inject(ChangeDetectorRef);
-  public dialog = inject(MatDialog);
-  private guestShowService = inject(GuestShowService);
-
   public show$: Observable<Show | null> | null = null;
-  public songs$: Observable<Song[] | null> | null = null;
+  public songs: Song[] | null = null;
   public showSongs: ShowSong[] | null = null;
   public showId: string | null = null;
   public showText = false;
 
   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 textSize = 1;
-  public faRestore = faMinimize;
-  public faMaximize = faMaximize;
-  public faNextSong = faChevronRight;
-  public currentTime: Date;
+  public faPage = faFile;
+  public faLines = faFileLines;
   private subs: Subscription[] = [];
+  public useSwiper = false;
+
+  public constructor(
+    private activatedRoute: ActivatedRoute,
+    private showService: ShowService,
+    private songService: SongService,
+    private showSongService: ShowSongService,
+    private docxService: DocxService,
+    private router: Router,
+    private cRef: ChangeDetectorRef,
+    public dialog: MatDialog
+  ) {}
 
   public ngOnInit(): void {
-    this.currentTime = new Date();
-    setInterval(() => {
-      this.currentTime = new Date();
-    }, 10000);
     this.show$ = this.activatedRoute.params.pipe(
       map(param => param as {showId: string}),
       map(param => param.showId),
       tap((_: string) => (this.showId = _)),
-      switchMap((showId: string) => this.showService.read$(showId)),
-      shareReplay({
-        bufferSize: 1,
-        refCount: true,
-      })
+      switchMap((showId: string) => this.showService.read$(showId))
     );
     this.subs.push(
       this.activatedRoute.params
@@ -141,14 +86,13 @@ export class ShowComponent implements OnInit, OnDestroy {
         .subscribe(_ => {
           this.showSongs = _;
           this.cRef.markForCheck();
-        })
-    );
-
-    this.songs$ = this.show$.pipe(
-      switchMap(show => (show && !show.published ? this.songService.list$() : of(null))),
-      shareReplay({
-        bufferSize: 1,
-        refCount: true,
+        }),
+      this.songService
+        .list$()
+        .pipe(filter(_ => !!_))
+        .subscribe(_ => {
+          this.songs = _;
+          this.cRef.markForCheck();
         })
     );
   }
@@ -157,6 +101,8 @@ export class ShowComponent implements OnInit, OnDestroy {
     this.subs.forEach(_ => _.unsubscribe());
   }
 
+  public textSize = 1;
+
   public onZoomIn() {
     this.textSize += 0.1;
   }
@@ -182,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';
@@ -218,19 +159,20 @@ export class ShowComponent implements OnInit, OnDestroy {
   public orderedShowSongs(show: Show): ShowSong[] {
     const list = this.showSongs;
     if (!list) return [];
-    const byId = new Map(list.map(item => [item.id, item] as const));
-    return show.order.map(id => byId.get(id)).filter((song): song is ShowSong => !!song);
+    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) {
-    if (!this.useSwiper) return;
     const swiperEl = document.querySelector('swiper-container') as unknown as Swiper;
     switch (event.code) {
       case 'ArrowRight':
@@ -245,16 +187,9 @@ export class ShowComponent implements OnInit, OnDestroy {
   }
 
   public fullscreen(useSwiper: boolean) {
-    this.textSize = useSwiper ? 2 : 1;
     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

@@ -1,69 +1,45 @@
-@if (iSong && iSong && show) {
-  <div>
-    @if (show.published || fullscreen) {
-      <div class="title published">
+<div *ngIf="iSong && iSong && show">
+  <div *ngIf="show.published || fullscreen" class="title published">
     <div class="key">{{ iSong.key }}</div>
     <div>{{ iSong.title }}</div>
   </div>
-    }
-    @if (!show.published && !fullscreen) {
-      <div class="song">
+
+  <div *ngIf="!show.published && !fullscreen" class="song">
     <span class="title">{{ iSong.title }}</span>
-        @if (!edit) {
-          <span class="keys">
-            @if (iSong.keyOriginal !== iSong.key) {
-              <span>{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
-              }<span
-            (click)="openKeySelect()">{{ iSong.key }}</span>
-            @if (keys) {
-              <mat-form-field (click)="option.open()" class="transpose">
-                <mat-select #option [formControl]="keyFormControl">
-                  @for (key of keys; track key) {
-                    <mat-option [value]="key">{{ key }}</mat-option>
-                  }
+    <span *ngIf="!edit" class="keys">
+      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
+      <mat-form-field *ngIf="keys" appearance="standard" class="keys">
+        <mat-select [formControl]="keyFormControl">
+          <mat-option *ngFor="let key of keys" [value]="key">{{ key }}</mat-option>
         </mat-select>
       </mat-form-field>
-            }
     </span>
-        }
-        @if (!edit) {
-          <app-menu-button (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon"
+    <app-menu-button (click)="onEdit()" *ngIf="!edit" [icon]="faEdit" class="btn-edit btn-icon"
                      matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
-        }
-        @if (!edit) {
-          <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon"
+    <app-menu-button (click)="onDelete()" *ngIf="!edit" [icon]="faDelete" class="btn-delete btn-icon"
                      matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
-        }
   </div>
-    }
-    @if (edit) {
-      <mat-form-field appearance="outline">
+
+  <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>
-    }
-    @if (edit) {
-      <div>Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
-    }
-    @if (edit) {
-      <app-button-row>
+  <div *ngIf="edit">Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
+  <app-button-row *ngIf="edit">
     <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
     <app-button (click)="onDiscard()" [icon]="faEraser">Verwerfen</app-button>
   </app-button-row>
-    }
-    @if (!edit && (showText )) {
+
   <app-song-text
     (chordModeChanged)="onChordModeChanged($event)"
+    *ngIf="!edit && (showText )"
     [chordMode]="iSong.chordMode"
     [showSwitch]="!show.published"
     [text]="iSong.text"
     [transpose]="{ baseKey: iSong.keyOriginal, targetKey: iSong.key }"
   ></app-song-text>
-    }
-  </div>
-}
+</div>

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

@@ -17,18 +17,8 @@
 }
 
 .keys {
-  position: relative;
-  margin-right: 10px;
-  cursor: pointer;
-
-  &:hover {
-    color: var(--color-primary);
-  }
-}
-
-.transpose {
-  height: 0;
-  position: absolute;
+  width: 40px;
+  margin: -24px 0 -20px 0;
 }
 
 .btn-up {
@@ -49,8 +39,8 @@
     grid-template-columns: 1em auto;
 
     .key {
-      color: var(--primary-active);
-      text-shadow: 0 0 1px var(--primary-hover);
+      color: #00b;
+      text-shadow: 0 0 1px #00b;
     }
   }
 }
@@ -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

@@ -6,11 +6,13 @@ describe('SongComponent', () => {
   let component: SongComponent;
   let fixture: ComponentFixture<SongComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(
+    waitForAsync(() => {
       void TestBed.configureTestingModule({
-      imports: [SongComponent],
+        declarations: [SongComponent],
       }).compileComponents();
-  }));
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SongComponent);

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

@@ -1,51 +1,26 @@
-import {Component, Input, OnInit, ViewChild, inject} 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';
-import {ReactiveFormsModule, UntypedFormControl} from '@angular/forms';
-import {ChordMode, SongTextComponent} from '../../../../widget-modules/components/song-text/song-text.component';
+import {UntypedFormControl} from '@angular/forms';
+import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
 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';
-
-import {MatFormField, MatLabel} from '@angular/material/form-field';
-import {MatOption} from '@angular/material/core';
-import {MenuButtonComponent} from '../../../../widget-modules/components/menu-button/menu-button.component';
-import {MatTooltip} from '@angular/material/tooltip';
-import {MatInput} from '@angular/material/input';
-import {CdkTextareaAutosize} from '@angular/cdk/text-field';
-import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
-import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';
 
 @Component({
   selector: 'app-song',
   templateUrl: './song.component.html',
   styleUrls: ['./song.component.less'],
   animations: [fade],
-  imports: [
-    MatFormField,
-    MatSelect,
-    ReactiveFormsModule,
-    MatOption,
-    MenuButtonComponent,
-    MatTooltip,
-    MatLabel,
-    MatInput,
-    CdkTextareaAutosize,
-    ButtonRowComponent,
-    ButtonComponent,
-    SongTextComponent,
-  ],
 })
 export class SongComponent implements OnInit {
-  private showSongService = inject(ShowSongService);
-
   @Input() public show: Show | null = null;
   @Input() public showId: string | null = null;
   @Input() public showText: boolean | null = null;
   @Input() public index = -1;
   @Input() public fullscreen = false;
+
   public keys: string[] = [];
   public faDelete = faTrash;
   public faEdit = faPenToSquare;
@@ -55,7 +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) {}
 
   @Input()
   public set showSong(song: ShowSong) {
@@ -99,8 +75,4 @@ export class SongComponent implements OnInit {
       chordMode: value,
     });
   }
-
-  public openKeySelect(): void {
-    this.keyOptions.open();
-  }
 }

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

@@ -3,69 +3,72 @@ import {CommonModule} from '@angular/common';
 
 import {ShowsRoutingModule} from './shows-routing.module';
 import {NewComponent} from './new/new.component';
-
+import {CardModule} from '../../widget-modules/components/card/card.module';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {ListComponent} from './list/list.component';
 import {ListItemComponent} from './list/list-item/list-item.component';
-
+import {ListHeaderModule} from '../../widget-modules/components/list-header/list-header.module';
 import {MatCheckboxModule} from '@angular/material/checkbox';
-
+import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatSelectModule} from '@angular/material/select';
+import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 import {MatNativeDateModule} from '@angular/material/core';
 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';
 import {MatMenuModule} from '@angular/material/menu';
 import {DragDropModule} from '@angular/cdk/drag-drop';
-
+import {RoleModule} from '../../services/user/role.module';
+import {SortByModule} from '../../widget-modules/pipes/sort-by/sort-by.module';
 import {MatTooltipModule} from '@angular/material/tooltip';
 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';
-import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
-import {SortByPipe} from '../../widget-modules/pipes/sort-by/sort-by.pipe';
 
 @NgModule({
+  declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent, ArchiveDialogComponent],
   imports: [
     CommonModule,
     ShowsRoutingModule,
+    CardModule,
     MatFormFieldModule,
     ReactiveFormsModule,
     MatInputModule,
+    ListHeaderModule,
     MatCheckboxModule,
+    ButtonRowModule,
     MatButtonModule,
     MatDatepickerModule,
     MatNativeDateModule,
     MatSelectModule,
-    ShowTypePipe,
+    ShowTypeTranslaterModule,
     FontAwesomeModule,
+    MenuButtonModule,
     FormsModule,
-    SongTextComponent,
+    SongTextModule,
     NgxMatSelectSearchModule,
-    AddSongComponent,
+    AddSongModule,
+    ButtonModule,
+    OwnerModule,
+    UserNameModule,
     MatMenuModule,
     DragDropModule,
-    SortByPipe,
+    RoleModule,
+    SortByModule,
     MatTooltipModule,
     MatDialogModule,
-    NewComponent,
-    ListComponent,
-    ListItemComponent,
-    ShowComponent,
-    SongComponent,
-    FilterComponent,
-    EditComponent,
-    ArchiveDialogComponent,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

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

@@ -1,68 +1,12 @@
 import {TestBed} from '@angular/core/testing';
-import {of} from 'rxjs';
-import {DbService} from '../../../services/db.service';
+
 import {FileDataService} from './file-data.service';
 
 describe('FileDataService', () => {
-  let service: FileDataService;
-  let filesCollectionValueChangesSpy: jasmine.Spy;
-  let filesCollectionAddSpy: jasmine.Spy;
-  let songDocCollectionSpy: jasmine.Spy;
-  let songDocSpy: jasmine.Spy;
-  let fileDeleteSpy: jasmine.Spy;
-  let dbServiceSpy: jasmine.SpyObj<DbService>;
-
-  beforeEach(() => {
-    filesCollectionValueChangesSpy = jasmine.createSpy('valueChanges').and.returnValue(of([{id: 'file-1', name: 'plan.pdf'}]));
-    filesCollectionAddSpy = jasmine.createSpy('add').and.resolveTo({id: 'file-2'});
-    songDocCollectionSpy = jasmine.createSpy('collection').and.returnValue({
-      add: filesCollectionAddSpy,
-      valueChanges: filesCollectionValueChangesSpy,
-    });
-    songDocSpy = jasmine.createSpy('songDoc').and.callFake((path: string) => {
-      if (path.includes('/files/')) {
-        return {delete: fileDeleteSpy};
-      }
-
-      return {collection: songDocCollectionSpy};
-    });
-    fileDeleteSpy = jasmine.createSpy('delete').and.resolveTo();
-    dbServiceSpy = jasmine.createSpyObj<DbService>('DbService', ['doc']);
-    dbServiceSpy.doc.and.callFake(songDocSpy);
-
-    void TestBed.configureTestingModule({
-      providers: [{provide: DbService, useValue: dbServiceSpy}],
-    });
-
-    service = TestBed.inject(FileDataService);
-  });
+  beforeEach(() => void TestBed.configureTestingModule({}));
 
   it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should add files to the song files subcollection and return the generated id', async () => {
-    const file = {name: 'setlist.pdf', path: 'songs/song-1/files', createdAt: new Date()};
-
-    await expectAsync(service.set('song-1', file)).toBeResolvedTo('file-2');
-
-    expect(songDocSpy).toHaveBeenCalledWith('songs/song-1');
-    expect(songDocCollectionSpy).toHaveBeenCalledWith('files');
-    expect(filesCollectionAddSpy).toHaveBeenCalledWith(file);
-  });
-
-  it('should delete files from the nested file document path', async () => {
-    await service.delete('song-4', 'file-9');
-
-    expect(songDocSpy).toHaveBeenCalledWith('songs/song-4/files/file-9');
-    expect(fileDeleteSpy).toHaveBeenCalled();
-  });
-
-  it('should read files from the files subcollection with the id field attached', () => {
-    service.read$('song-3').subscribe();
-
-    expect(songDocSpy).toHaveBeenCalledWith('songs/song-3');
-    expect(songDocCollectionSpy).toHaveBeenCalledWith('files');
-    expect(filesCollectionValueChangesSpy).toHaveBeenCalledWith({idField: 'id'});
+    const service: FileDataService = TestBed.inject(FileDataService);
+    void expect(service).toBeTruthy();
   });
 });

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

@@ -1,4 +1,4 @@
-import {Injectable, inject} from '@angular/core';
+import {Injectable} from '@angular/core';
 import {File} from './file';
 import {Observable} from 'rxjs';
 import {FileServer} from './fileServer';
@@ -8,7 +8,7 @@ import {DbService} from '../../../services/db.service';
   providedIn: 'root',
 })
 export class FileDataService {
-  private db = inject(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.spec.ts

@@ -1,19 +1,12 @@
 import {TestBed} from '@angular/core/testing';
-import {Storage} from '@angular/fire/storage';
 
 import {FileService} from './file.service';
-import {FileDataService} from './file-data.service';
 
 describe('FileService', () => {
   let service: FileService;
 
   beforeEach(() => {
-    void TestBed.configureTestingModule({
-      providers: [
-        {provide: Storage, useValue: {}},
-        {provide: FileDataService, useValue: {delete: () => Promise.resolve()}},
-      ],
-    });
+    void TestBed.configureTestingModule({});
     service = TestBed.inject(FileService);
   });
 

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

@@ -1,22 +1,22 @@
-import {EnvironmentInjector, Injectable, inject, runInInjectionContext} from '@angular/core';
-import {deleteObject, getDownloadURL, ref, Storage} from '@angular/fire/storage';
-import {from, Observable} from 'rxjs';
+import {Injectable} from '@angular/core';
+import {AngularFireStorage} from '@angular/fire/compat/storage';
+import {firstValueFrom, Observable} from 'rxjs';
 import {FileDataService} from './file-data.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class FileService {
-  private storage = inject(Storage);
-  private fileDataService = inject(FileDataService);
-  private environmentInjector = inject(EnvironmentInjector);
+  public constructor(private storage: AngularFireStorage, private fileDataService: FileDataService) {}
 
   public getDownloadUrl(path: string): Observable<string> {
-    return from(runInInjectionContext(this.environmentInjector, () => getDownloadURL(ref(this.storage, path))));
+    const ref = this.storage.ref(path);
+    return ref.getDownloadURL() as Observable<string>;
   }
 
   public delete(path: string, songId: string, fileId: string): void {
-    void runInInjectionContext(this.environmentInjector, () => deleteObject(ref(this.storage, path)));
+    const ref = this.storage.ref(path);
+    void firstValueFrom(ref.delete());
     void this.fileDataService.delete(songId, fileId);
   }
 }

src/app/modules/songs/services/key.helper.spec.ts

@@ -1,15 +0,0 @@
-import {getScale, scaleMapping} from './key.helper';
-
-describe('key.helper', () => {
-  it('should render Gb correctly', () => {
-    void expect(scaleMapping['Gb']).toBe('G♭');
-  });
-
-  it('should expose a sharp-based scale for D', () => {
-    void expect(getScale('D')).toEqual(['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'H']);
-  });
-
-  it('should keep flat-based spelling for Db', () => {
-    void expect(getScale('Db')).toEqual(['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'B', 'H']);
-  });
-});

src/app/modules/songs/services/key.helper.ts

@@ -82,7 +82,7 @@ const scaleAssignment: {[key: string]: string[]} = {
   C: KEYS_MAJOR_FLAT,
   'C#': KEYS_MAJOR_FLAT,
   Db: KEYS_MAJOR_B,
-  D: KEYS_MAJOR_FLAT,
+  D: KEYS_MAJOR_B,
   'D#': KEYS_MAJOR_FLAT,
   Eb: KEYS_MAJOR_B,
   E: KEYS_MAJOR_FLAT,
@@ -125,7 +125,7 @@ export const scaleMapping: {[key: string]: string} = {
   E: 'E',
   F: 'F',
   'F#': 'F♯',
-  Gb: 'G♭',
+  Gb: 'D♭',
   G: 'G',
   'G#': 'G♯',
   Ab: 'A♭',

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

@@ -1,104 +1,39 @@
-import {TestBed} from '@angular/core/testing';
-import {firstValueFrom, Subject} from 'rxjs';
-import {skip, take, toArray} from 'rxjs/operators';
-import {DbService} from '../../../services/db.service';
+import {TestBed, waitForAsync} from '@angular/core/testing';
+
 import {SongDataService} from './song-data.service';
+import {AngularFirestore} from '@angular/fire/compat/firestore';
+import {of} from 'rxjs';
 
 describe('SongDataService', () => {
-  let service: SongDataService;
-  let songs$: Subject<Array<{id: string; title: string}>>;
-  let docUpdateSpy: jasmine.Spy<() => Promise<void>>;
-  let docDeleteSpy: jasmine.Spy<() => Promise<void>>;
-  let docSpy: jasmine.Spy;
-  let colAddSpy: jasmine.Spy<() => Promise<{id: string}>>;
-  let colSpy: jasmine.Spy;
-  let dbServiceSpy: jasmine.SpyObj<DbService>;
+  const songs = [{title: 'title1'}];
 
-  beforeEach(() => {
-    songs$ = new Subject<Array<{id: string; title: string}>>();
-    docUpdateSpy = jasmine.createSpy('update').and.resolveTo();
-    docDeleteSpy = jasmine.createSpy('delete').and.resolveTo();
-    docSpy = jasmine.createSpy('doc').and.callFake(() => ({
-      update: docUpdateSpy,
-      delete: docDeleteSpy,
-    }));
-    colAddSpy = jasmine.createSpy('add').and.resolveTo({id: 'song-3'});
-    colSpy = jasmine.createSpy('col').and.returnValue({
-      add: colAddSpy,
-    });
-    dbServiceSpy = jasmine.createSpyObj<DbService>('DbService', ['col$', 'doc$', 'doc', 'col']);
-    dbServiceSpy.col$.and.returnValue(songs$.asObservable());
-    dbServiceSpy.doc$.and.returnValue(songs$.asObservable() as never);
-    dbServiceSpy.doc.and.callFake(docSpy);
-    dbServiceSpy.col.and.callFake(colSpy);
+  const angularFirestoreCollection = {
+    valueChanges: () => of(songs),
+  };
 
+  const mockAngularFirestore = {
+    collection: () => angularFirestoreCollection,
+  };
+
+  beforeEach(
+    () =>
       void TestBed.configureTestingModule({
-      providers: [{provide: DbService, useValue: dbServiceSpy}],
-    });
-
-    service = TestBed.inject(SongDataService);
-  });
+        providers: [{provide: AngularFirestore, useValue: mockAngularFirestore}],
+      })
+  );
 
   it('should be created', () => {
-    expect(service).toBeTruthy();
+    const service: SongDataService = TestBed.inject(SongDataService);
+    void expect(service).toBeTruthy();
   });
 
-  it('should load songs from the songs collection once on creation', () => {
-    expect(dbServiceSpy.col$).toHaveBeenCalledTimes(1);
-    expect(dbServiceSpy.col$).toHaveBeenCalledWith('songs');
-  });
-
-  it('should emit an empty list first and then the loaded songs', async () => {
-    const emissionsPromise = firstValueFrom(service.list$.pipe(take(2), toArray()));
-
-    songs$.next([{id: 'song-1', title: 'Amazing Grace'}]);
-
-    const emissions = await emissionsPromise;
-
-    expect(emissions[0]).toEqual([]);
-    expect(emissions[1].map(song => song.id)).toEqual(['song-1']);
-    expect(emissions[1].map(song => song.title)).toEqual(['Amazing Grace']);
-  });
-
-  it('should replay the latest songs to late subscribers', async () => {
-    const initialSubscription = service.list$.subscribe();
-
-    songs$.next([{id: 'song-2', title: 'How Great'}]);
-
-    const latestSongs = await firstValueFrom(service.list$.pipe(take(1)));
-
-    expect(latestSongs.map(song => song.id)).toEqual(['song-2']);
-    expect(latestSongs.map(song => song.title)).toEqual(['How Great']);
-
-    initialSubscription.unsubscribe();
-  });
-
-  it('should read a single song by id', () => {
-    service.read$('song-7');
-
-    expect(dbServiceSpy.doc$).toHaveBeenCalledWith('songs/song-7');
-  });
-
-  it('should update a song at the expected document path', async () => {
-    await service.update$('song-8', {title: 'Updated'});
-
-    expect(docSpy).toHaveBeenCalledWith('songs/song-8');
-    const [updatePayload] = docUpdateSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
-    expect(updatePayload).toEqual({title: 'Updated'});
-  });
-
-  it('should add a song to the songs collection and return the new id', async () => {
-    await expectAsync(service.add({title: 'New Song'})).toBeResolvedTo('song-3');
-
-    expect(colSpy).toHaveBeenCalledWith('songs');
-    const [addPayload] = colAddSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
-    expect(addPayload).toEqual({title: 'New Song'});
-  });
-
-  it('should delete a song at the expected document path', async () => {
-    await service.delete('song-9');
-
-    expect(docSpy).toHaveBeenCalledWith('songs/song-9');
-    expect(docDeleteSpy).toHaveBeenCalled();
+  it(
+    'should list songs',
+    waitForAsync(() => {
+      const service: SongDataService = TestBed.inject(SongDataService);
+      service.list$().subscribe(s => {
+        void expect(s[0].title).toEqual('title1');
       });
+    })
+  );
 });