Stage view works

src/app/components/overlay.scss

@@ -33,12 +33,17 @@
 
 .slide {
     white-space: pre-line;
+    margin: 0;
+    &.first {
+        margin-top: 1rem;
+    }
 }
 
 .container {
     margin-left: 1rem;
 }
 
-.nextSlide {
+.nextSlides {
+    margin-top: 1rem;
     color: gray;
 }

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

@@ -7,8 +7,10 @@
       <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 class="nextSlides">
+        <div class="slide mat-display-1" [class.first]="slide.first_slide_of_tag" *ngFor="let slide of nextSlides">
+          {{ slide.text }}
+        </div>
       </div>
     </div>
   </div>

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

@@ -2,9 +2,9 @@ import { Component, OnInit } from '@angular/core';
 import { OpenLPService } from '../../openlp.service';
 import { Slide } from '../../responses';
 
-class Tag {
+interface Tag {
   text: string;
-  active: boolean = false;
+  active: boolean;
 }
 
 @Component({
@@ -32,13 +32,38 @@ export class StageViewComponent implements OnInit {
   }
 
   setNewSlides(slides: Slide[]): void {
+    if (slides.length == 0) {
+      return;
+    }
     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};});
+    this.tags = [];
+    this.tags.push({"text": this.currentSlides[0].tag, "active": this.currentSlides[0].selected});
+    let lastIndex : number = 0;
+    loop:
+    for (let index = 1; index < this.currentSlides.length; ++index) {
+      let foundActive = false;
+      if (this.currentSlides[index].tag == this.currentSlides[lastIndex].tag) {
+        for (let i = 0; i < index - lastIndex; ++i) {
+          foundActive = foundActive || this.currentSlides[index + i].selected;
+          if (this.currentSlides[lastIndex + i].text != this.currentSlides[index + i].text) {
+            // they are different, stop checking and continue outer loop
+            if (foundActive) {
+              this.tags[this.tags.length - 1].active = foundActive;
+            }
+            continue loop;
+          }
+        }
+      }
+      // either the tags differed, or we found a repitition. Either way add a tag
+      this.tags.push({"text": this.currentSlides[index].tag, "active": this.currentSlides[index].selected});
+      this.currentSlides[index].first_slide_of_tag = true;
+      lastIndex = index;
+    }
   }
 
 }

src/app/responses.ts

@@ -22,6 +22,7 @@ export interface Slide {
 	tag: string;
 	text: string;
 	lines: string[];
+	first_slide_of_tag: boolean;
 }
 
 export interface ServiceItem {