set change detection on push

2023-03-26 23:34:49 +02:00
parent 138b0b42b3
commit 383d2a533b
13 changed files with 76 additions and 46 deletions
--- a/src/app/animations.ts
+++ b/src/app/animations.ts
@@ -32,7 +32,7 @@ export const fader = trigger('fader', [
      ':enter',
      [
        animate(
-          '200ms ease',
+          '300ms ease',
          style({
            opacity: 1,
            transform: 'scale(1) translateY(0)',
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} 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';
@@ -8,6 +8,7 @@ import {PerfectScrollbarComponent} from 'ngx-perfect-scrollbar';
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
  animations: [fader],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {
  @ViewChild('scrollbar', {static: false}) public scrollbar: PerfectScrollbarComponent | null = null;
--- a/src/app/modules/brand/brand.component.html
+++ b/src/app/modules/brand/brand.component.html
@@ -1,4 +1,4 @@
 <div class="brand">
  <app-logo></app-logo>
-  <div class="copyright">© 2022 - Benjamin Ifland</div>
+  <div class="copyright">© 2019 - 2023 - Benjamin Ifland</div>
 </div>
--- a/src/app/modules/brand/brand.component.less
+++ b/src/app/modules/brand/brand.component.less
@@ -2,7 +2,7 @@
  color: #fff;
  opacity: 0.7;
  font-size: 20px;
-  transform: translate(173px, -40px);
+  transform: translate(116px, -40px);
 }

 .brand {
--- a/src/app/modules/presentation/monitor/monitor.component.ts
+++ b/src/app/modules/presentation/monitor/monitor.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+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';
@@ -38,7 +38,8 @@ export class MonitorComponent implements OnInit {
    private songService: SongService,
    private textRenderingService: TextRenderingService,
    private globalSettingsService: GlobalSettingsService,
-    private configService: ConfigService
+    private configService: ConfigService,
+    private cRef: ChangeDetectorRef
  ) {
    this.config$ = configService.get$();
  }
@@ -66,7 +67,10 @@ export class MonitorComponent implements OnInit {
          this.presentationDynamicText = _.presentationDynamicText;
          this.zoom = _.presentationZoom ?? 30;
          if (this.songId !== _.presentationSongId) this.songId = 'empty';
-          setTimeout(() => (this.songId = _.presentationSongId), 600);
+          setTimeout(() => {
+            this.songId = _.presentationSongId;
+            this.cRef.markForCheck();
+          }, 600);
        }),
        switchMap((_: Show) => this.showSongService.read$(_.id, _.presentationSongId)),
        filter(_ => !!_),
@@ -74,6 +78,7 @@ export class MonitorComponent implements OnInit {
      )
      .subscribe(_ => {
        this.song = _;
+        this.cRef.markForCheck();
      });
  }
 }
--- a/src/app/modules/presentation/presentation.module.ts
+++ b/src/app/modules/presentation/presentation.module.ts
@@ -19,6 +19,7 @@ import {AddSongModule} from '../../widget-modules/components/add-song/add-song.m
 import {LogoComponent} from './monitor/logo/logo.component';
 import {SelectComponent} from './select/select.component';
 import {MatInputModule} from '@angular/material/input';
+import {UserNameModule} from '../../services/user/user-name/user-name.module';

@NgModule({
  declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent, SelectComponent],
@@ -39,6 +40,7 @@ import {MatInputModule} from '@angular/material/input';
    AddSongModule,
    ReactiveFormsModule,
    MatInputModule,
+    UserNameModule,
  ],
 })
 export class PresentationModule {}
--- a/src/app/modules/presentation/select/select.component.html
+++ b/src/app/modules/presentation/select/select.component.html
@@ -6,6 +6,8 @@

    <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>
--- a/src/app/modules/presentation/select/select.component.less
+++ b/src/app/modules/presentation/select/select.component.less
@@ -1,5 +1,5 @@
 .list {
  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
 }
--- a/src/app/modules/shows/show/show.component.ts
+++ b/src/app/modules/shows/show/show.component.ts
@@ -1,8 +1,8 @@
-import {Component, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, 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} 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';
@@ -30,7 +30,7 @@ import {fade} from '../../../animations';
  styleUrls: ['./show.component.less'],
  animations: [fade],
 })
-export class ShowComponent implements OnInit {
+export class ShowComponent implements OnInit, OnDestroy {
  public show$: Observable<Show | null> | null = null;
  public songs: Song[] | null = null;
  public showSongs: ShowSong[] | null = null;
@@ -47,6 +47,7 @@ export class ShowComponent implements OnInit {
  public faUsers = faUsers;
  public faZoomIn = faMagnifyingGlassPlus;
  public faZoomOut = faMagnifyingGlassMinus;
+  private subs: Subscription[] = [];

  public constructor(
    private activatedRoute: ActivatedRoute,
@@ -54,7 +55,8 @@ export class ShowComponent implements OnInit {
    private songService: SongService,
    private showSongService: ShowSongService,
    private docxService: DocxService,
-    private router: Router
+    private router: Router,
+    private cRef: ChangeDetectorRef
  ) {}

  public ngOnInit(): void {
@@ -64,19 +66,30 @@ export class ShowComponent implements OnInit {
      tap((_: string) => (this.showId = _)),
      switchMap((showId: string) => this.showService.read$(showId))
    );
-    this.activatedRoute.params
-      .pipe(
-        map(param => param as {showId: string}),
-        map(param => param.showId),
-        switchMap(showId => this.showSongService.list$(showId)),
-        tap(_ => console.log(_)),
-        filter(_ => !!_ && _.length > 0)
-      )
-      .subscribe(_ => (this.showSongs = _));
-    this.songService
-      .list$()
-      .pipe(filter(_ => !!_))
-      .subscribe(_ => (this.songs = _));
+    this.subs.push(
+      this.activatedRoute.params
+        .pipe(
+          map(param => param as {showId: string}),
+          map(param => param.showId),
+          switchMap(showId => this.showSongService.list$(showId)),
+          filter(_ => !!_ && _.length > 0)
+        )
+        .subscribe(_ => {
+          this.showSongs = _;
+          this.cRef.markForCheck();
+        }),
+      this.songService
+        .list$()
+        .pipe(filter(_ => !!_))
+        .subscribe(_ => {
+          this.songs = _;
+          this.cRef.markForCheck();
+        })
+    );
+  }
+
+  public ngOnDestroy(): void {
+    this.subs.forEach(_ => _.unsubscribe());
  }

  public textSize = 1;
@@ -89,12 +102,6 @@ export class ShowComponent implements OnInit {
    this.textSize -= 0.1;
  }

-  public getSong(songId: string): Song | null {
-    if (!this.songs) return null;
-    const filtered = this.songs.filter(_ => _.id === songId);
-    return filtered.length > 0 ? filtered[0] : null;
-  }
-
  public async onArchive(archived: boolean): Promise<void> {
    if (this.showId != null) await this.showService.update$(this.showId, {archived});
  }
--- a/src/app/modules/shows/show/song/song.component.html
+++ b/src/app/modules/shows/show/song/song.component.html
@@ -1,9 +1,12 @@
 <div *ngIf="iSong && iSong && show">
-  <div @fade *ngIf="show.published" class="title published">{{ iSong.key }} - {{ iSong.title }}</div>
+  <div *ngIf="show.published" class="title published">
+    <div class="key">{{ iSong.key }}</div>
+    <div>{{ iSong.title }}</div>
+  </div>

-  <div @fade *ngIf="!show.published" class="song">
+  <div *ngIf="!show.published" class="song">
    <span class="title">{{ iSong.title }}</span>
-    <span @fade class="keys" *ngIf="!edit">
+    <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">
@@ -11,26 +14,27 @@
        </mat-select>
      </mat-form-field>
    </span>
-    <app-menu-button @fade *ngIf="!edit" (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon" matTooltip="Lied für diese Veranstaltung bearbeiten"> </app-menu-button>
-    <app-menu-button @fade *ngIf="!edit" (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon" matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
+    <app-menu-button (click)="onEdit()" *ngIf="!edit" [icon]="faEdit" class="btn-edit btn-icon"
+                     matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
+    <app-menu-button (click)="onDelete()" *ngIf="!edit" [icon]="faDelete" class="btn-delete btn-icon"
+                     matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
  </div>

-  <mat-form-field @fade appearance="outline" *ngIf="edit" >
+  <mat-form-field *ngIf="edit" appearance="outline">
    <mat-label>Songtext</mat-label>
    <textarea matTooltip="Tonart ändern"
-      [cdkTextareaAutosize]="true"
-      [formControl]="editSongControl"
-      matInput
+              [cdkTextareaAutosize]="true"
+              [formControl]="editSongControl"
+              matInput
    ></textarea>
  </mat-form-field>
-  <div @fade *ngIf="edit">Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
-  <app-button-row @fade *ngIf="edit">
+  <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>

  <app-song-text
-    @fade
    (chordModeChanged)="onChordModeChanged($event)"
    *ngIf="!edit && (showText )"
    [chordMode]="iSong.chordMode"
--- a/src/app/modules/shows/show/song/song.component.less
+++ b/src/app/modules/shows/show/song/song.component.less
@@ -35,6 +35,13 @@
  &.published {
    margin: 10px 0;
    font-weight: bold;
+    display: grid;
+    grid-template-columns: 1em auto;
+
+    .key {
+      color: #00b;
+      text-shadow: 0 0 1px #00b;
+    }
  }
 }

--- a/src/app/widget-modules/components/add-song/add-song.component.ts
+++ b/src/app/widget-modules/components/add-song/add-song.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {UntypedFormControl} from '@angular/forms';
 import {filterSong} from '../../../services/filter.helper';
 import {MatSelectChange} from '@angular/material/select';
@@ -12,6 +12,7 @@ import {ShowService} from '../../../modules/shows/services/show.service';
  selector: 'app-add-song',
  templateUrl: './add-song.component.html',
  styleUrls: ['./add-song.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddSongComponent {
  @Input() public songs: Song[] | null = null;
--- a/src/app/widget-modules/components/card/card.component.less
+++ b/src/app/widget-modules/components/card/card.component.less
@@ -3,16 +3,17 @@
 .card {
  margin: 20px;
  border-radius: 8px;
-  background: #fffe;
+  background: #fffc;
  backdrop-filter: blur(12px);
  overflow: hidden;
  width: 800px;
  position: relative;
+  transition: all 150ms ease-in-out;

  @media screen and (max-width: 860px) {
    width: 100vw;
    border-radius: 0;
-    background: #fffe;
+    background: #ffff;
    margin: 0;
  }