Merge branch 'issue-15-display-next-service-item-stageview' into 'master'

Display the next service item in Stage View.

See merge request openlp/web-remote!64

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>

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">

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