Start work on stage view

src/app/app.component.html

@@ -6,6 +6,8 @@
       <a mat-list-item (click)="menu.close()" routerLink="/alerts">Alerts</a>
       <a mat-list-item (click)="menu.close()" routerLink="/search">Search</a>
       <mat-divider></mat-divider>
+      <a mat-list-item (click)="menu.close()" routerLink="/main">Main View</a>
+      <a mat-list-item (click)="menu.close()" routerLink="/stage">Stage View</a>
       <a mat-list-item (click)="menu.close()" routerLink="/chords">Chord View</a>
       <mat-divider></mat-divider>
       <mat-slide-toggle color="primary" [checked]="fastSwitching" (change)="sliderChanged($event)">Fast switching</mat-slide-toggle>

src/app/components/overlay.scss

@@ -6,12 +6,39 @@
     left: 0;
     top: 0;
     z-index: 1;
-    overflow-x: hidden;
+    overflow: hidden;
     color: white;
+    
 }
 
 .closeButton {
     position: fixed;
     top: 20px;
     right: 20px;
+}
+
+.tags {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    color: gray;
+    span {
+        margin-left: 1rem;
+        &.active {
+            color: white;
+        }
+    }
+}
+
+.slide {
+    white-space: pre-line;
+}
+
+.container {
+    margin-left: 1rem;
+}
+
+.nextSlide {
+    color: gray;
 }

src/app/components/stage-view/stage-view.component.html

@@ -1,3 +1,14 @@
-<p>
-  stage-view works!
-</p>
+<div class="overlay">
+    <button mat-raised-button class="closeButton" routerLink="/">Close</button>
+    <div class="tags">
+      <span class="mat-display-3" *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
+    </div>
+    <div class="container">
+      <div class="slide currentSlide mat-display-3">
+        {{ currentSlides[activeSlide]?.text }}
+      </div>
+      <div class="slide nextSlide mat-display-1" *ngFor="let slide of nextSlides">
+        {{ slide.text }}
+      </div>
+    </div>
+  </div>

src/app/components/stage-view/stage-view.component.ts

@@ -1,4 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { OpenLPService } from '../../openlp.service';
+import { Slide } from '../../responses';
+
+class Tag {
+  text: string;
+  active: boolean = false;
+}
 
 @Component({
   selector: 'app-stage-view',
@@ -6,11 +13,32 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./stage-view.component.scss', '../overlay.scss']
 })
 export class StageViewComponent implements OnInit {
-
-  constructor() { }
+  currentSlides: Slide[] = [];
+  activeSlide: number = 0;
+  tags: Tag[] = [];
+  constructor(private openlpService: OpenLPService) { }
 
   ngOnInit() {
-    
+    this.updateCurrentSlides();
+    this.openlpService.stateChanged$.subscribe(item => this.updateCurrentSlides());
+  }
+
+  updateCurrentSlides(): void {
+    this.openlpService.getItemSlides().subscribe(slides => this.setNewSlides(slides));
+  }
+
+  get nextSlides(): Slide[] {
+    return this.currentSlides.slice(this.activeSlide + 1);
+  }
+
+  setNewSlides(slides: Slide[]): void {
+    this.currentSlides = slides;
+    this.activeSlide = slides.findIndex(s => s.selected);
+    this.updateOrderOfTags();
+  }
+
+  updateOrderOfTags(): void {
+    this.tags = this.currentSlides.map(slide => { return {"text": slide.tag, "active": slide.selected};});
   }
 
 }