better song sorting

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

@@ -32,7 +32,7 @@
         </div>
       </div>
 
-      <div *ngFor="let song of presentationSongs" @fade class="song">
+      <div *ngFor="let song of presentationSongs; trackBy: trackBy" @fade class="song">
         <div *ngIf="show"
           [class.active]="show.presentationSongId === song.id"
           class="title song-part"
@@ -71,6 +71,7 @@
           [ngModel]="show.presentationZoom"
           [step]="2"
           [thumbLabel]="true"
+          color="primary"
         >
         </mat-slider>
       </div>
@@ -78,9 +79,9 @@
       <app-add-song
         *ngIf="show"
         [addedLive]="true"
-        [showId]="currentShowId"
         [showSongs]="showSongs"
         [songs]="songs"
+        [show]="show"
       ></app-add-song>
     </ng-container>
   </app-card>

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

@@ -72,3 +72,12 @@
 .padding-bottom {
   padding-bottom: 20px;
 }
+
+a {
+  font-size: 30px;
+  padding: 10px;
+  transition: all 300ms ease-in-out;
+  &:hover {
+    color: #4286f4;
+  }
+}

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

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {Observable} from 'rxjs';
+import {combineLatest, Observable} from 'rxjs';
 import {Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
 import {SongService} from '../../songs/services/song.service';
@@ -40,6 +40,10 @@ export class RemoteComponent {
   public faDesktop = faDesktop;
   public showControl = new FormControl();
 
+  public trackBy(index: number, item: PresentationSong): string {
+    return item.id;
+  }
+
   public constructor(
     private showService: ShowService,
     private showSongService: ShowSongService,
@@ -73,14 +77,18 @@ export class RemoteComponent {
       await this.showService.update$(change, {presentationSongId: 'title'});
     }
     this.currentShowId = change;
-    this.showService.read$(change).subscribe(_ => (this.show = _));
-    this.showSongService.list$(change).subscribe(_ => {
-      this.showSongs = _;
-      this.presentationSongs = _.map(song => ({
+    this.showService.read$(change).subscribe(show => {
+      this.show = show;
+    });
+
+    combineLatest([this.showService.read$(change), this.showSongService.list$(change)]).subscribe(([show, list]) => {
+      this.showSongs = list;
+      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]) ?? [];
     });
     await delay(500);
     this.progress = false;