From 5691809791249a964b5c970bcabecdaccb1a585c Mon Sep 17 00:00:00 2001
From: Chris Witterholt <witterholt@gmail.com>
Date: Tue, 2 May 2023 05:14:43 +0000
Subject: [PATCH] Display the next service item in Stage View.

---
 .../chord-view/chord-view.component.html      |  3 ++
 .../stage-view/stage-view.component.html      |  3 ++
 .../stage-view/stage-view.component.ts        | 40 ++++++++++++++-----
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/app/components/chord-view/chord-view.component.html b/src/app/components/chord-view/chord-view.component.html
index 8c468b3..84728f4 100644
--- a/src/app/components/chord-view/chord-view.component.html
+++ b/src/app/components/chord-view/chord-view.component.html
@@ -39,6 +39,9 @@
         <mat-icon>keyboard_arrow_up</mat-icon>
       </button>
     </div>
+    <div class="next-service-item" [matTooltip]="'Next item'" *ngIf="!embedded && activeSlide+1 === currentSlides.length">
+      {{ nextServiceItemTitle }}
+    </div>
     <div class="time">{{ (openlpService.getIsTwelveHourTime()) ? (time|date:'h:mm a') : (time|date:'HH:mm') }}</div>
   </div>
 </div>
diff --git a/src/app/components/stage-view/stage-view.component.html b/src/app/components/stage-view/stage-view.component.html
index 29a4403..d6c42cf 100644
--- a/src/app/components/stage-view/stage-view.component.html
+++ b/src/app/components/stage-view/stage-view.component.html
@@ -28,6 +28,9 @@
     >
       <mat-icon>sticky_note_2</mat-icon>
     </button>
+    <div class="next-service-item" [matTooltip]="'Next item'" *ngIf="!embedded && activeSlide+1 === currentSlides.length">
+      {{ nextServiceItemTitle }}
+    </div>
     <div class="time">{{ (openlpService.getIsTwelveHourTime()) ? (time|date:'h:mm a') : (time|date:'HH:mm') }}</div>
   </div>
   <div class="sidebar" *ngIf="(showNotes || embedded) && notes">
diff --git a/src/app/components/stage-view/stage-view.component.ts b/src/app/components/stage-view/stage-view.component.ts
index c78d924..a337a85 100644
--- a/src/app/components/stage-view/stage-view.component.ts
+++ b/src/app/components/stage-view/stage-view.component.ts
@@ -19,6 +19,7 @@ interface Tag {
 export class StageViewComponent implements OnInit, OnDestroy {
   @Input() embedded = false;
   serviceItem: ServiceItem = null;
+  nextServiceItemTitle = '';
   notes = '';
   currentSlides: Slide[] = [];
   activeSlide = 0;
@@ -45,7 +46,9 @@ export class StageViewComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.updateCurrentSlides(null, null);
-    this.openlpService.stateChanged$.subscribe(item => this.updateCurrentSlides(item.item, item.slide));
+    this.openlpService.stateChanged$.subscribe((item: { item: string; slide: number }) =>
+      this.updateCurrentSlides(item.item, item.slide)
+    );
     this.fontScale = this.settingsService.get(
       this.stageProperty + 'FontScale' as keyof SettingsProperties
     ) as number / 100;
@@ -62,21 +65,38 @@ export class StageViewComponent implements OnInit, OnDestroy {
     this.fontScaleSubscription$?.unsubscribe();
   }
 
-  updateCurrentSlides(serviceItemId: string, currentSlide: number): void {
+  updateCurrentSlides(_serviceItemId: string, currentSlide: number): void {
     this.serviceItemSubscription$?.unsubscribe();
-    this.serviceItemSubscription$ = this.openlpService.getServiceItem().subscribe(serviceItem => {
-      this.serviceItem = serviceItem;
-      if (serviceItem instanceof Array) {
-        this.setNewSlides(serviceItem, currentSlide);
+    this.serviceItemSubscription$ = this.openlpService.getServiceItem().subscribe(currentServiceItem => {
+      this.serviceItem = currentServiceItem;
+      if (currentServiceItem instanceof Array) {
+        this.setNewSlides(currentServiceItem, currentSlide);
       }
       else {
-        this.setNewSlides(serviceItem.slides, currentSlide);
-        this.setNotes(serviceItem.notes);
+        this.setNewSlides(currentServiceItem.slides, currentSlide);
+        this.setNotes(currentServiceItem.notes);
       }
+      this.getNextServiceItemTitle();
     });
   }
 
-  setNewSlides(slides: Slide[], currentSlide: number): void {
+  getNextServiceItemTitle(): void {
+    this.nextServiceItemTitle = '';
+    let doStoreServiceItemTitle = false;
+    this.openlpService.getServiceItems().subscribe(serviceItems => {
+      serviceItems.forEach((serviceItem, _index) => {
+        if (doStoreServiceItemTitle) {
+          this.nextServiceItemTitle = serviceItem.title;
+          doStoreServiceItemTitle = false;
+        }
+        if (serviceItem.id === this.serviceItem.id) {
+          doStoreServiceItemTitle = true;
+        }
+      });
+    });
+  }
+
+  setNewSlides(slides: Slide[], _currentSlide: number): void {
     if (slides.length === 0) {
       return;
     }
@@ -129,7 +149,7 @@ export class StageViewComponent implements OnInit, OnDestroy {
     }
   }
 
-  trackByIndex(index: number, el: any) {
+  trackByIndex(index: number) {
     return index;
   }
 }