optimize remote #2

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

@@ -1,6 +1,6 @@
 <div *ngIf="shows$ | async as shows">
   <app-card>
-    <p *ngIf="!shows.length" @fade>
+    <p *ngIf="!shows.length">
       Es ist derzeit keine Veranstaltung vorhanden
     </p>
 
@@ -34,7 +34,7 @@
         </div>
       </div>
 
-      <div *ngFor="let song of presentationSongs; trackBy: trackBy" @fade class="song">
+      <div *ngFor="let song of presentationSongs; trackBy: trackBy" class="song">
         <div *ngIf="show"
              [class.active]="show.presentationSongId === song.id"
              class="title song-part"
@@ -101,7 +101,7 @@
         *ngIf="show"
         [addedLive]="true"
         [showSongs]="showSongs"
-        [songs]="songs"
+        [songs]="songs$|async"
         [show]="show"
       ></app-add-song>
     </ng-container>

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

@@ -3,7 +3,6 @@ import {combineLatest, Observable} from 'rxjs';
 import {PresentationBackground, Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
 import {SongService} from '../../songs/services/song.service';
-import {Song} from '../../songs/services/song';
 import {faDesktop} from '@fortawesome/free-solid-svg-icons';
 import {ShowService} from '../../shows/services/show.service';
 import {ShowSong} from '../../shows/services/show-song';
@@ -32,7 +31,7 @@ export class RemoteComponent {
   public shows$: Observable<Show[]>;
   public show: Show | null = null;
   public showSongs: ShowSong[] = [];
-  public songs: Song[] = [];
+  public songs$ = this.songService.list$();
   public presentationSongs: PresentationSong[] = [];
   public currentShowId: string | null = null;
   public progress = false;
@@ -55,7 +54,6 @@ export class RemoteComponent {
     this.shows$ = 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))));
-    songService.list$().subscribe(_ => (this.songs = _));
 
     globalSettingsService.get$
       .pipe(
@@ -72,29 +70,28 @@ export class RemoteComponent {
   }
 
   public async onShowChanged(change: string, updateShow = true): Promise<void> {
+    this.presentationSongs = [];
+    this.cRef.markForCheck();
+
     if (updateShow) {
       await this.globalSettingsService.set({currentShow: change});
       await this.showService.update$(change, {presentationSongId: 'title'});
     }
+
     this.currentShowId = change;
-    this.showService
-      .read$(change)
-      .pipe(debounceTime(10))
-      .subscribe(show => {
-        this.show = show;
-        this.cRef.markForCheck();
-      });
 
     combineLatest([this.showService.read$(change), this.showSongService.list$(change)])
-      .pipe(debounceTime(10))
+      .pipe(debounceTime(300))
       .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();
       });
   }
 

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

@@ -8,7 +8,6 @@
     <ng-container *ngIf="shows$ | async as shows">
       <app-card
         *ngIf="getPrivateSongs(shows).length > 0"
-        @fade
         [padding]="false"
         heading="meine Veranstaltungen"
       >
@@ -24,7 +23,6 @@
   <ng-container *ngIf="publicShows$ | async as shows">
     <app-card
       *ngIf="shows.length > 0"
-      @fade
       [padding]="false"
       heading="veröffentlichte Veranstaltungen"
     >

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

@@ -23,7 +23,7 @@ export class NewComponent implements OnInit {
   public faSave = faSave;
 
   public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
-    this.shows$ = showDataService.list$();
+    this.shows$ = showDataService.list$;
   }
 
   public ngOnInit(): void {

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

@@ -1,8 +1,8 @@
 import {Injectable} from '@angular/core';
-import {Observable} from 'rxjs';
+import {BehaviorSubject, Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
 import {Show} from './show';
-import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
+import {map} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -10,10 +10,15 @@ import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
 export class ShowDataService {
   private collection = 'shows';
 
-  public constructor(private dbService: DbService) {}
+  public constructor(private dbService: DbService) {
+    this.dbService.col$<Show>(this.collection).subscribe(_ => this.list$.next(_));
+  }
 
-  public list$ = (queryFn?: QueryFn): Observable<Show[]> => this.dbService.col$(this.collection, queryFn);
-  public read$ = (showId: string): Observable<Show | null> => this.dbService.doc$(`${this.collection}/${showId}`);
+  public list$ = new BehaviorSubject<Show[]>([]);
+  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.service.ts

@@ -24,7 +24,7 @@ export class ShowService {
   public list$(publishedOnly = false): Observable<Show[]> {
     return this.userService.user$.pipe(
       switchMap(
-        () => this.showDataService.list$(),
+        () => this.showDataService.list$,
         (user: User | null, shows: Show[]) => ({user, shows})
       ),
       map(s => s.shows.filter(_ => !_.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)))

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

@@ -1,4 +1,4 @@
-<div *ngIf="songs$ | async as songs" @fade>
+<div *ngIf="songs$ | async as songs">
   <app-list-header [anyFilterActive]="anyFilterActive">
     <app-filter [songs]="songs" route="songs"></app-filter>
   </app-list-header>