fix show monitor

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

@@ -1,6 +1,6 @@
 <div *ngIf="song && showType" [style.font-size.px]="zoom" class="fullscreen background">
   <div
-    @songSwitch
+    [@songSwitch]="songId"
     [class.blur]="songId === 'title'"
     [class.hide]="songId !== 'title' && songId !== 'empty'"
     class="start fullscreen logo"
@@ -14,8 +14,9 @@
   </div>
 
   <app-song-text
+    [header]="song.title"
     *ngIf="songId !== 'title' && songId !== 'empty'"
-    @songSwitch
+    [@songSwitch]="songId"
     [fullscreen]="true"
     [index]="index"
     [showSwitch]="false"
@@ -24,7 +25,7 @@
   ></app-song-text>
   <app-legal
     *ngIf="songId !== 'title' && songId !== 'empty'"
-    @songSwitch
+    [@songSwitch]="songId"
     [config]="config$ | async"
     [song]="song"
   ></app-legal>

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

@@ -55,7 +55,10 @@ export class MonitorComponent implements OnInit {
         map(_ => _ as Show),
         tap<Show>(_ => (this.showType = _.showType)),
         tap<Show>(_ => (this.date = _.date.toDate())),
-        tap<Show>(_ => (this.songId = _.presentationSongId)),
+        tap<Show>(_ => {
+          if (this.songId !== _.presentationSongId) this.songId = 'empty';
+          setTimeout(() => (this.songId = _.presentationSongId), 300);
+        }),
         tap<Show>(_ => (this.index = _.presentationSection)),
         tap<Show>(_ => (this.zoom = _.presentationZoom ?? 30))
       )

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

@@ -66,7 +66,7 @@
 
 .div-bottom {
   display: grid;
-  grid-template-columns: 40px auto;
+  grid-template-columns: 60px auto;
 }
 
 .padding-bottom {

src/app/widget-modules/components/song-text/song-text.component.html

@@ -49,6 +49,7 @@
   </button>
 
   <div [class.offset]="fullscreen" [style.top.px]="offset + 50">
+    <h1 *ngIf="header">{{header}}</h1>
     <div
       #section
       *ngFor="let section of sections; let i = index"

src/app/widget-modules/components/song-text/song-text.component.less

@@ -62,6 +62,8 @@
 .offset {
   position: fixed;
   top: 0;
+  left: 40px;
+  right: 40px;
 
   transition: 1000ms all ease-in-out;
 }

src/app/widget-modules/components/song-text/song-text.component.ts

@@ -18,6 +18,7 @@ export type ChordMode = 'show' | 'hide' | 'onlyFirst';
 })
 export class SongTextComponent implements OnInit {
   public sections: Section[] = [];
+  @Input() public header: string | null = null;
   @Input() public index = -1;
   @Input() public fullscreen = false;
   @Input() public showSwitch = false;