diff --git a/src/app/modules/presentation/monitor/monitor.component.ts b/src/app/modules/presentation/monitor/monitor.component.ts index d8a8ae8..a239a8c 100644 --- a/src/app/modules/presentation/monitor/monitor.component.ts +++ b/src/app/modules/presentation/monitor/monitor.component.ts @@ -1,15 +1,14 @@ -import {ChangeDetectorRef, Component, OnInit} from '@angular/core'; -import {debounceTime, distinctUntilChanged, filter, map, switchMap, tap} from 'rxjs/operators'; +import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core'; +import {debounceTime, distinctUntilChanged, filter, map, shareReplay, switchMap, takeUntil, 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} from 'rxjs'; +import {Observable, Subject} 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 {ShowSongService} from '../../shows/services/show-song.service'; import {openFullscreen} from '../../../services/fullscreen'; import {AsyncPipe, DatePipe, NgIf} from '@angular/common'; @@ -25,7 +24,7 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s animations: [songSwitch], imports: [NgIf, LogoComponent, SongTextComponent, LegalComponent, AsyncPipe, DatePipe, ShowTypePipe], }) -export class MonitorComponent implements OnInit { +export class MonitorComponent implements OnInit, OnDestroy { public song: Song | null = null; public zoom = 10; public currentShowId: string | null = null; @@ -37,12 +36,11 @@ export class MonitorComponent implements OnInit { public date: Date | null = null; public config$: Observable; public presentationBackground: PresentationBackground = 'none'; + private destroy$ = new Subject(); public constructor( private showService: ShowService, private showSongService: ShowSongService, - private songService: SongService, - private textRenderingService: TextRenderingService, private globalSettingsService: GlobalSettingsService, private configService: ConfigService, private cRef: ChangeDetectorRef @@ -52,40 +50,68 @@ export class MonitorComponent implements OnInit { public ngOnInit(): void { openFullscreen(); - this.globalSettingsService.get$ + const currentShowId$ = this.globalSettingsService.get$ .pipe( debounceTime(100), filter(_ => !!_), map(_ => _), map(_ => _.currentShow), distinctUntilChanged(), - tap(_ => (this.currentShowId = _)) - ) + tap(_ => (this.currentShowId = _)), + takeUntil(this.destroy$) + ); + + const show$ = currentShowId$ .pipe( - switchMap(_ => this.showService.read$(_)), - filter(_ => !!_), - map(_ => _), - tap(_ => { - 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'; + 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$) + ) + .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 (this.songId !== presentationSongId) { + this.songId = 'empty'; + } setTimeout(() => { - this.songId = _.presentationSongId; + this.songId = presentationSongId; this.cRef.markForCheck(); }, 600); }), - switchMap((_: Show) => this.showSongService.read$(_.id, _.presentationSongId)), - filter(_ => !!_), - map(_ => _ as Song) + switchMap(({showId, presentationSongId}) => this.showSongService.read$(showId, presentationSongId)), + filter((song): song is ShowSong => !!song), + takeUntil(this.destroy$) ) - .subscribe(_ => { - this.song = _; + .subscribe(song => { + this.song = song; this.cRef.markForCheck(); }); } + + public ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } }