Use inheritence for ChordView

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

@@ -1,14 +1,16 @@
 <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">{{ tag }}</span>
+    <span class="mat-display-3" *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
   </div>
   <div class="container">
-    <div class="currentSlide mat-display-2">
-      {{ activeSlide.text }}
+    <div class="slide currentSlide mat-display-3">
+      {{ currentSlides[activeSlide]?.text }}
     </div>
-    <div class="nextSlide mat-display-1">
-      {{ currentSlides[3].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/chord-view/chord-view.component.ts

@@ -2,46 +2,13 @@ import { Component, OnInit } from '@angular/core';
 import { OpenLPService } from '../../openlp.service';
 import { Slide } from '../../responses';
 import { Observable } from 'rxjs';
+import { StageViewComponent } from '../stage-view/stage-view.component';
 
 @Component({
   selector: 'app-chord-view',
   templateUrl: './chord-view.component.html',
   styleUrls: ['./chord-view.component.scss', '../overlay.scss']
 })
-export class ChordViewComponent implements OnInit {
+export class ChordViewComponent extends StageViewComponent {
 
-  currentSlides: Slide[] = [];
-  activeSlide: Slide;
-  tags: string[] = [];
-  constructor(private openlpService: OpenLPService) { }
-
-  ngOnInit() {
-    this.updateCurrentSlides();
-    this.openlpService.stateChanged$.subscribe(item => this.updateCurrentSlides());
-  }
-
-  updateCurrentSlides(): void {
-    this.openlpService.getItemSlides().subscribe(slides => this.setNewSlides(slides));
-  }
-
-  setNewSlides(slides: Slide[]): void {
-    this.currentSlides = slides;
-    console.log(slides);
-    this.activeSlide = slides.find(s => s.selected);
-    this.updateOrderOfTags();
-  }
-
-  updateOrderOfTags(): void {
-    this.tags = [];
-    let lastTag: string;
-    let lastIndex: number;
-    for (let i = 0; i < this.currentSlides.length; ++i) {
-      let currentTag = this.currentSlides[i].tag;
-      if (currentTag != lastTag) {
-        this.tags.push(lastTag);
-        lastTag = currentTag;
-        lastIndex = i;
-      }
-    }
-  }
 }