migrate firebase db

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);