2019-10-08 05:43:49 +00:00
|
|
|
import { Component, OnInit, ViewEncapsulation } 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', './chordpro.scss'],
|
|
|
|
encapsulation: ViewEncapsulation.None // needed for the chords to be displayed
|
|
|
|
|
|
|
|
})
|
|
|
|
export class ChordViewComponent extends StageViewComponent {
|
2022-10-19 11:51:03 +00:00
|
|
|
// Map with the song id and transpose value so the chord-view remembers the value for each song
|
|
|
|
songTransposeMap = new Map();
|
|
|
|
// current songs transpose level
|
|
|
|
transposeLevel = 0;
|
2023-02-08 21:40:40 +00:00
|
|
|
currentSlide = 0;
|
|
|
|
useNewTransposeEndpoint = this.openlpService.assertApiVersionMinimum(2, 2);
|
2022-10-19 11:51:03 +00:00
|
|
|
|
2023-02-08 21:40:40 +00:00
|
|
|
updateCurrentSlides(serviceItemId: string, currentSlide: number): void {
|
|
|
|
this.currentSlide = currentSlide;
|
|
|
|
this.useNewTransposeEndpoint = this.openlpService.assertApiVersionMinimum(2, 2);
|
|
|
|
this.serviceItemSubscription$?.unsubscribe();
|
|
|
|
const newServiceItemTransposeLevel = this.songTransposeMap.get(serviceItemId);
|
2022-10-19 11:51:03 +00:00
|
|
|
|
2023-02-08 21:40:40 +00:00
|
|
|
if (this.useNewTransposeEndpoint && newServiceItemTransposeLevel && (newServiceItemTransposeLevel !== 0)) {
|
|
|
|
this.serviceItemSubscription$ = this.openlpService
|
|
|
|
.transposeSong(newServiceItemTransposeLevel, 'service_item')
|
|
|
|
.subscribe(serviceItem => {
|
|
|
|
this.serviceItem = serviceItem;
|
|
|
|
if (serviceItem instanceof Array) {
|
|
|
|
this.setNewSlides(serviceItem, currentSlide);
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
this.setNewSlides(serviceItem.slides, currentSlide);
|
|
|
|
this.setNotes(serviceItem.notes);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
if (this.useNewTransposeEndpoint) {
|
|
|
|
this.songTransposeMap.set(serviceItemId, 0);
|
|
|
|
this.transposeLevel = 0;
|
|
|
|
}
|
|
|
|
super.updateCurrentSlides(serviceItemId, currentSlide);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
setNewSlides(slides: Slide[], currentSlide: number): void {
|
|
|
|
super.setNewSlides(slides, currentSlide);
|
|
|
|
if (this.openlpService.assertApiVersionExact(2, 2)) {
|
|
|
|
// API Version 2.2 released on OpenLP 3.0.2 contains a bug on which 'selected' is not set correctly
|
|
|
|
// on Transponse Service Item response.
|
|
|
|
if (slides[currentSlide]) {
|
|
|
|
slides[currentSlide].selected = true;
|
|
|
|
}
|
|
|
|
}
|
2022-10-19 11:51:03 +00:00
|
|
|
// if this song is already known
|
|
|
|
if (this.songTransposeMap.has(this.serviceItem.id)) {
|
2023-02-08 21:40:40 +00:00
|
|
|
const transposeLevel = this.songTransposeMap.get(this.serviceItem.id);
|
|
|
|
if (transposeLevel) {
|
|
|
|
if (!this.useNewTransposeEndpoint) {
|
|
|
|
this.transposeChords();
|
|
|
|
}
|
2022-10-19 11:51:03 +00:00
|
|
|
} else {
|
|
|
|
this.transposeLevel = this.songTransposeMap.get(this.serviceItem.id);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.songTransposeMap.set(this.serviceItem.id, 0);
|
|
|
|
this.transposeLevel = 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-10-08 05:43:49 +00:00
|
|
|
|
|
|
|
transposeUp(): void {
|
2022-10-19 11:51:03 +00:00
|
|
|
if (this.songTransposeMap.has(this.serviceItem.id)) {
|
|
|
|
const tmpTranspose = this.songTransposeMap.get(this.serviceItem.id) + 1;
|
|
|
|
this.songTransposeMap.set(this.serviceItem.id, tmpTranspose);
|
|
|
|
} else {
|
|
|
|
this.songTransposeMap.set(this.serviceItem.id, 1);
|
|
|
|
}
|
|
|
|
this.transposeChords();
|
2019-10-08 05:43:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
transposeDown(): void {
|
2022-10-19 11:51:03 +00:00
|
|
|
if (this.songTransposeMap.has(this.serviceItem.id)) {
|
|
|
|
const tmpTranspose = this.songTransposeMap.get(this.serviceItem.id) - 1;
|
|
|
|
this.songTransposeMap.set(this.serviceItem.id, tmpTranspose);
|
|
|
|
} else {
|
|
|
|
this.songTransposeMap.set(this.serviceItem.id, -1);
|
|
|
|
}
|
|
|
|
this.transposeChords();
|
2019-10-08 05:43:49 +00:00
|
|
|
}
|
|
|
|
|
2022-10-19 11:51:03 +00:00
|
|
|
transposeChords(): void {
|
|
|
|
const tmpTranspose = this.songTransposeMap.get(this.serviceItem.id);
|
|
|
|
this.transposeLevel = tmpTranspose;
|
2023-02-08 21:40:40 +00:00
|
|
|
if (this.useNewTransposeEndpoint) {
|
|
|
|
this.updateCurrentSlides(this.serviceItem.id, this.currentSlide);
|
|
|
|
} else {
|
|
|
|
this.transposeChordsLegacy(tmpTranspose);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
transposeChordsLegacy(transposeLevel): void {
|
|
|
|
this.openlpService.transposeSong(transposeLevel).subscribe(transposedLyrics => {
|
2022-12-21 19:51:50 +00:00
|
|
|
// Replace the chords in the currentSlides with the returned transposed chords
|
|
|
|
if (transposedLyrics instanceof Array) {
|
|
|
|
for (let i = 0; i < transposedLyrics.length; ++i) {
|
|
|
|
this.currentSlides[i] = {...this.currentSlides[i], chords: transposedLyrics[i].chords};
|
|
|
|
}
|
2022-10-19 11:51:03 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2019-10-08 05:43:49 +00:00
|
|
|
}
|