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;