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

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',
  templateUrl: './stage-view.component.html',
  styleUrls: ['./stage-view.component.scss', '../overlay.scss']
})
export class StageViewComponent implements OnInit {
  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};});
  }

}