migrate firebase db

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

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

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

@@ -1,6 +1,5 @@
-import firebase from 'firebase/compat/app';
 import {Song} from '../songs/services/song';
-import Timestamp = firebase.firestore.Timestamp;
+import {Timestamp} from '@angular/fire/firestore';
 
 export interface GuestShow {
   id: string;

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

@@ -1,5 +1,5 @@
 <div class="fullscreen background"></div>
-<div *ngIf="song && showType" [style.font-size.px]="zoom" class="fullscreen background">
+<div *ngIf="showType" [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>
@@ -29,7 +29,7 @@
   </div>
 
   <app-song-text
-    *ngIf="songId !== 'title' && songId !== 'empty'"
+    *ngIf="song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
     [@songSwitch]="songId"
     [fullscreen]="true"
     [header]="song.title"
@@ -40,7 +40,7 @@
     chordMode="hide"
   ></app-song-text>
   <app-legal
-    *ngIf="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
+    *ngIf="song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
     [@songSwitch]="songId"
     [config]="config$ | async"
     [song]="song"

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

@@ -1,5 +1,5 @@
 import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
-import {debounceTime, distinctUntilChanged, filter, map, shareReplay, switchMap, takeUntil, tap} from 'rxjs/operators';
+import {distinctUntilChanged, filter, map, shareReplay, switchMap, takeUntil, tap} from 'rxjs/operators';
 import {ShowService} from '../../shows/services/show.service';
 import {Song} from '../../songs/services/song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
@@ -52,10 +52,9 @@ export class MonitorComponent implements OnInit, OnDestroy {
     openFullscreen();
     const currentShowId$ = this.globalSettingsService.get$
       .pipe(
-        debounceTime(100),
-        filter(_ => !!_),
-        map(_ => _),
-        map(_ => _.currentShow),
+        filter((settings): settings is NonNullable<typeof settings> => !!settings),
+        map(settings => settings.currentShow),
+        filter((showId): showId is string => !!showId),
         distinctUntilChanged(),
         tap(_ => (this.currentShowId = _)),
         takeUntil(this.destroy$)
@@ -92,6 +91,9 @@ export class MonitorComponent implements OnInit, OnDestroy {
         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';
           }

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

@@ -8,7 +8,6 @@
   margin-bottom: 10px;
   box-sizing: border-box;
   color: var(--text);
-  border: 1px solid var(--surface-border);
 
   @media screen and (max-width: 860px) {
     width: 100vw;
@@ -46,7 +45,7 @@
   overflow: hidden;
   transition: var(--transition);
   cursor: pointer;
-  outline: 1px solid var(--divider);
+  outline: 1px solid var(--surface-muted);
 
   &:hover {
     outline: 1px solid var(--primary-hover);

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

@@ -7,7 +7,7 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/
 import {ActivatedRoute, Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
 import {map, switchMap} from 'rxjs/operators';
-import firebase from 'firebase/compat/app';
+import {Timestamp} 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';
@@ -18,7 +18,6 @@ import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/m
 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';
-import Timestamp = firebase.firestore.Timestamp;
 
 @Component({
   selector: 'app-edit',

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

@@ -3,8 +3,7 @@ import {Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
 import {Show} from './show';
 import {map, shareReplay} from 'rxjs/operators';
-import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
-import firebase from 'firebase/compat/app';
+import {orderBy, QueryConstraint, Timestamp, where} from '@angular/fire/firestore';
 
 @Injectable({
   providedIn: 'root',
@@ -28,11 +27,11 @@ export class ShowDataService {
     const startDate = new Date();
     startDate.setHours(0, 0, 0, 0);
     startDate.setDate(startDate.getDate() - lastMonths * 30);
-    const startTimestamp = firebase.firestore.Timestamp.fromDate(startDate);
+    const startTimestamp = Timestamp.fromDate(startDate);
 
-    const queryFn: QueryFn = ref => ref.where('published', '==', true).where('date', '>=', startTimestamp).orderBy('date', 'desc');
+    const queryConstraints: QueryConstraint[] = [where('published', '==', true), where('date', '>=', startTimestamp), orderBy('date', 'desc')];
 
-    return this.dbService.col$<Show>(this.collection, queryFn).pipe(
+    return this.dbService.col$<Show>(this.collection, queryConstraints).pipe(
       map(shows => shows.filter(show => !show.archived)),
       shareReplay({
         bufferSize: 1,

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

@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {DbService} from '../../../services/db.service';
 import {Observable} from 'rxjs';
 import {ShowSong} from './show-song';
-import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
+import {QueryConstraint} from '@angular/fire/firestore';
 import {shareReplay} from 'rxjs/operators';
 
 @Injectable({
@@ -15,9 +15,9 @@ export class ShowSongDataService {
 
   public constructor(private dbService: DbService) {}
 
-  public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => {
-    if (queryFn) {
-      return this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
+  public list$ = (showId: string, queryConstraints?: QueryConstraint[]): Observable<ShowSong[]> => {
+    if (queryConstraints && queryConstraints.length > 0) {
+      return this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryConstraints);
     }
 
     const cached = this.listCache.get(showId);

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

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

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

@@ -1,24 +1,20 @@
 import {TestBed} from '@angular/core/testing';
 
 import {SongDataService} from './song-data.service';
-import {AngularFirestore} from '@angular/fire/compat/firestore';
 import {firstValueFrom, of} from 'rxjs';
+import {DbService} from '../../../services/db.service';
 
 describe('SongDataService', () => {
   const songs = [{title: 'title1'}];
 
-  const angularFirestoreCollection = {
-    valueChanges: () => of(songs),
-  };
-
-  const mockAngularFirestore = {
-    collection: () => angularFirestoreCollection,
+  const mockDbService = {
+    col$: () => of(songs),
   };
 
   beforeEach(
     () =>
       void TestBed.configureTestingModule({
-        providers: [{provide: AngularFirestore, useValue: mockAngularFirestore}],
+        providers: [{provide: DbService, useValue: mockDbService}],
       })
   );
 

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

@@ -3,8 +3,7 @@ import {firstValueFrom, Observable} from 'rxjs';
 import {Song} from './song';
 import {SongDataService} from './song-data.service';
 import {UserService} from '../../../services/user/user.service';
-import firebase from 'firebase/compat/app';
-import Timestamp = firebase.firestore.Timestamp;
+import {Timestamp} from '@angular/fire/firestore';
 
 // declare let importCCLI: any;
 

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

@@ -1,6 +1,5 @@
-import firebase from 'firebase/compat/app';
 import {SongLegalOwner, SongLegalType, SongStatus, SongType} from './song.service';
-import Timestamp = firebase.firestore.Timestamp;
+import {Timestamp} from '@angular/fire/firestore';
 
 export interface Song {
   id: string;

src/app/services/db.service.spec.ts

@@ -1,9 +1,15 @@
 import {TestBed} from '@angular/core/testing';
+import {Firestore} from '@angular/fire/firestore';
 
 import {DbService} from './db.service';
 
 describe('DbService', () => {
-  beforeEach(() => void TestBed.configureTestingModule({}));
+  beforeEach(
+    () =>
+      void TestBed.configureTestingModule({
+        providers: [{provide: Firestore, useValue: {}}],
+      })
+  );
 
   it('should be created', () => {
     const service: DbService = TestBed.inject(DbService);

src/app/services/db.service.ts

@@ -1,24 +1,89 @@
 import {Injectable} from '@angular/core';
-import {AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from '@angular/fire/compat/firestore';
+import {
+  addDoc,
+  collection,
+  collectionData,
+  CollectionReference,
+  deleteDoc,
+  doc,
+  docData,
+  DocumentData,
+  DocumentReference,
+  Firestore,
+  query,
+  QueryConstraint,
+  setDoc,
+  updateDoc,
+  WithFieldValue,
+} from '@angular/fire/firestore';
 import {Observable} from 'rxjs';
-import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
 import {map} from 'rxjs/operators';
 
-type CollectionPredicate<T> = string | AngularFirestoreCollection<T>;
-type DocumentPredicate<T> = string | AngularFirestoreDocument<T>;
+type CollectionPredicate<T> = string | DbCollection<T>;
+type DocumentPredicate<T> = string | DbDocument<T>;
+
+export class DbCollection<T> {
+  public constructor(
+    private readonly fs: Firestore,
+    private readonly path: string
+  ) {}
+
+  public add(data: Partial<T>): Promise<DocumentReference<T>> {
+    return addDoc(this.ref as CollectionReference<T>, data as WithFieldValue<T>);
+  }
+
+  public valueChanges(options?: {idField?: string}): Observable<T[]> {
+    return collectionData(this.ref, options as {idField?: never}) as Observable<T[]>;
+  }
+
+  private get ref(): CollectionReference<DocumentData> {
+    return collection(this.fs, this.path);
+  }
+}
+
+export class DbDocument<T> {
+  public constructor(
+    private readonly fs: Firestore,
+    private readonly path: string
+  ) {}
+
+  public set(data: Partial<T>): Promise<void> {
+    return setDoc(this.ref as DocumentReference<T>, data as WithFieldValue<T>);
+  }
+
+  public update(data: Partial<T>): Promise<void> {
+    return updateDoc(this.ref, data as Partial<DocumentData>);
+  }
+
+  public delete(): Promise<void> {
+    return deleteDoc(this.ref);
+  }
+
+  public collection<U>(subPath: string): DbCollection<U> {
+    return new DbCollection<U>(this.fs, `${this.path}/${subPath}`);
+  }
+
+  public valueChanges(options?: {idField?: string}): Observable<(NonNullable<T> & {id?: string}) | undefined> {
+    return docData(this.ref as DocumentReference<T>, options as {idField?: never}) as Observable<(NonNullable<T> & {id?: string}) | undefined>;
+  }
+
+  private get ref(): DocumentReference<DocumentData> {
+    return doc(this.fs, this.path);
+  }
+}
 
 @Injectable({
   providedIn: 'root',
 })
 export class DbService {
-  public constructor(private afs: AngularFirestore) {}
+  public constructor(private fs: Firestore) {}
 
-  public col<T>(ref: CollectionPredicate<T>, queryFn?: QueryFn): AngularFirestoreCollection<T> {
-    return typeof ref === 'string' ? this.afs.collection<T>(ref, queryFn) : ref;
+  public col<T>(ref: CollectionPredicate<T>): DbCollection<T> {
+    return typeof ref === 'string' ? new DbCollection<T>(this.fs, ref) : ref;
   }
 
-  public doc<T>(ref: DocumentPredicate<T>): AngularFirestoreDocument<T> {
-    return typeof ref === 'string' ? this.afs.doc<T>(ref) : ref;
+  public doc<T>(ref: DocumentPredicate<T>): DbDocument<T> {
+    return typeof ref === 'string' ? new DbDocument<T>(this.fs, ref) : ref;
   }
 
   public doc$<T>(ref: DocumentPredicate<T>): Observable<(NonNullable<T> & {id?: string}) | null> {
@@ -27,7 +92,12 @@ export class DbService {
       .pipe(map(_ => (_ ? _ : null)));
   }
 
-  public col$<T>(ref: CollectionPredicate<T>, queryFn?: QueryFn): Observable<T[]> {
-    return this.col(ref, queryFn).valueChanges({idField: 'id'});
+  public col$<T>(ref: CollectionPredicate<T>, queryConstraints: QueryConstraint[] = []): Observable<T[]> {
+    if (typeof ref !== 'string' || queryConstraints.length === 0) {
+      return this.col(ref).valueChanges({idField: 'id'});
+    }
+
+    const q = query(collection(this.fs, ref), ...queryConstraints);
+    return collectionData(q, {idField: 'id'}) as Observable<T[]>;
   }
 }

src/app/services/fullscreen.ts

@@ -1,13 +1,29 @@
 const elem = document.documentElement;
 
 export const openFullscreen = () => {
-  if (elem.requestFullscreen) {
-    void elem.requestFullscreen();
+  if (!elem.requestFullscreen || !document.fullscreenEnabled) {
+    return;
+  }
+
+  try {
+    const promise = elem.requestFullscreen();
+    if (promise && typeof promise.catch === 'function') {
+      void promise.catch(() => {
+        // Browser may reject when no user gesture is present. Keep app usable.
+      });
+    }
+  } catch {
+    // Some browsers may throw synchronously if fullscreen is not allowed.
   }
 };
 
 export const closeFullscreen = () => {
   if (document.exitFullscreen) {
-    void document.exitFullscreen();
+    const promise = document.exitFullscreen();
+    if (promise && typeof promise.catch === 'function') {
+      void promise.catch(() => {
+        // Ignore; leaving fullscreen is a best-effort action.
+      });
+    }
   }
 };

src/app/services/user/user.service.ts

@@ -8,7 +8,7 @@ import {environment} from '../../../environments/environment';
 import {Router} from '@angular/router';
 import {ShowDataService} from '../../modules/shows/services/show-data.service';
 import {ShowSongDataService} from '../../modules/shows/services/show-song-data.service';
-import firebase from 'firebase/compat/app';
+import {increment} from '@angular/fire/firestore';
 
 export interface SongUsageMigrationResult {
   usersProcessed: number;
@@ -159,7 +159,7 @@ export class UserService {
     if (!user) return null;
 
     await this.db.doc<User>('users/' + user.id).update({
-      [`songUsage.${songId}`]: firebase.firestore.FieldValue.increment(direction),
+      [`songUsage.${songId}`]: increment(direction),
     });
   }
 

src/app/widget-modules/components/card/card.component.less

@@ -5,12 +5,12 @@
   border-radius: 8px;
   background: var(--surface);
   backdrop-filter: blur(15px);
-  border: 1px solid var(--surface-border);
+  border: none;
   overflow: hidden;
   width: 800px;
   position: relative;
   color: var(--text);
-  padding-bottom: 5px;
+  padding: 5px 0;
 
   @media screen and (max-width: 860px) {
     width: 100vw;

src/main.ts

@@ -7,12 +7,11 @@ import {provideAnimations} from '@angular/platform-browser/animations';
 import {AppRoutingModule} from './app/app-routing.module';
 import {ServiceWorkerModule} from '@angular/service-worker';
 import {AngularFireModule} from '@angular/fire/compat';
-import {AngularFirestoreModule} from '@angular/fire/compat/firestore';
 import {AngularFireStorageModule} from '@angular/fire/compat/storage';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {AppComponent} from './app/app.component';
-import {provideFirebaseApp, initializeApp} from '@angular/fire/app';
-import {provideFirestore, getFirestore} from '@angular/fire/firestore';
+import {getApp, initializeApp, provideFirebaseApp} from '@angular/fire/app';
+import {initializeFirestore, persistentLocalCache, persistentMultipleTabManager, provideFirestore} from '@angular/fire/firestore';
 import {getAuth, provideAuth} from '@angular/fire/auth';
 import {UserService} from './app/services/user/user.service';
 
@@ -37,13 +36,12 @@ bootstrapApplication(AppComponent, {
         enabled: environment.production,
       }),
       AngularFireModule.initializeApp(environment.firebase),
-      AngularFirestoreModule.enablePersistence({synchronizeTabs: true}),
       AngularFireStorageModule,
       FontAwesomeModule
     ),
     provideFirebaseApp(() => initializeApp(environment.firebase)),
     provideAuth(() => getAuth()),
-    provideFirestore(() => getFirestore()),
+    provideFirestore(() => initializeFirestore(getApp(), {localCache: persistentLocalCache({tabManager: persistentMultipleTabManager()})})),
     {provide: MAT_DATE_LOCALE, useValue: 'de-DE'},
     provideAnimations(),
   ],