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;
|
|
|
|
|
|
|
|
|
|
|
|
setNewSlides(slides: Slide[]): void {
|
|
|
|
super.setNewSlides(slides);
|
|
|
|
// if this song is already known
|
|
|
|
if (this.songTransposeMap.has(this.serviceItem.id)) {
|
|
|
|
if (this.songTransposeMap.get(this.serviceItem.id) !== 0) {
|
|
|
|
this.transposeChords();
|
|
|
|
} 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;
|
|
|
|
this.openlpService.transposeSong(tmpTranspose).subscribe(transposedLyrics => {
|
|
|
|
// 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].chords = transposedLyrics[i].chords;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2019-10-08 05:43:49 +00:00
|
|
|
chordproFormatted(slide: Slide): string {
|
|
|
|
if (!slide) {
|
|
|
|
return '';
|
|
|
|
}
|
2020-05-09 07:02:05 +00:00
|
|
|
let chordpro: string = slide.chords;
|
2020-06-22 00:35:06 +00:00
|
|
|
chordpro = chordpro.replace(/<br>/g, '\n');
|
2019-10-08 05:43:49 +00:00
|
|
|
|
|
|
|
return chordpro;
|
|
|
|
}
|
|
|
|
}
|