105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren} from '@angular/core';
|
|
import {
|
|
Line,
|
|
LineType,
|
|
Section,
|
|
SectionType,
|
|
TextRenderingService
|
|
} from '../../../modules/songs/services/text-rendering.service';
|
|
import {faGripLines} from '@fortawesome/free-solid-svg-icons/faGripLines';
|
|
import {songSwitch} from './animation';
|
|
import {TransposeMode} from '../../../modules/songs/services/transpose.service';
|
|
|
|
export type ChordMode = 'show' | 'hide' | 'onlyFirst'
|
|
|
|
@Component({
|
|
selector: 'app-song-text',
|
|
templateUrl: './song-text.component.html',
|
|
styleUrls: ['./song-text.component.less'],
|
|
animations: [songSwitch],
|
|
})
|
|
export class SongTextComponent implements OnInit {
|
|
public sections: Section[];
|
|
@Input() public index = -1;
|
|
@Input() public fullscreen = false;
|
|
@Input() public showSwitch = false;
|
|
@Input() public transpose: TransposeMode = null;
|
|
@Output() public chordModeChanged = new EventEmitter<ChordMode>();
|
|
@ViewChildren('section') viewSections: QueryList<ElementRef>;
|
|
public faLines = faGripLines;
|
|
public offset = 0;
|
|
|
|
constructor(private textRenderingService: TextRenderingService, private elRef: ElementRef) {
|
|
}
|
|
|
|
public _chordMode: ChordMode = 'hide';
|
|
|
|
@Input()
|
|
public set chordMode(value: ChordMode) {
|
|
this._chordMode = value ?? 'hide';
|
|
}
|
|
|
|
@Input()
|
|
public set text(value: string) {
|
|
this.sections = null;
|
|
this.offset = 0;
|
|
if (this.fullscreen)
|
|
setTimeout(() =>
|
|
this.sections = this.textRenderingService.parse(value, this.transpose).sort((a, b) => a.type - b.type), 100);
|
|
else this.sections = this.textRenderingService.parse(value, this.transpose).sort((a, b) => a.type - b.type)
|
|
}
|
|
|
|
|
|
public ngOnInit(): void {
|
|
setInterval(() => {
|
|
if (!this.fullscreen || this.index === -1 || !this.viewSections.toArray()[this.index]) {
|
|
this.offset = 0;
|
|
return;
|
|
}
|
|
this.offset = -this.viewSections.toArray()[this.index].nativeElement.offsetTop;
|
|
}
|
|
, 100);
|
|
}
|
|
|
|
public getLines(section: Section): Line[] {
|
|
return section.lines.filter(_ => {
|
|
if (_.type !== LineType.chord) return true;
|
|
|
|
switch (this._chordMode) {
|
|
case 'show':
|
|
return true;
|
|
case 'hide':
|
|
return false;
|
|
case 'onlyFirst':
|
|
return section.number === 0 || section.type !== SectionType.Verse;
|
|
}
|
|
});
|
|
}
|
|
|
|
public onChordClick(): void {
|
|
const next = this.getNextChordMode();
|
|
|
|
this.chordMode = next;
|
|
this.chordModeChanged.emit(next);
|
|
}
|
|
|
|
public onClick(): void {
|
|
scrollTo(0, this.elRef.nativeElement.offsetTop - 20);
|
|
}
|
|
|
|
public checkDisabled(i: number): boolean {
|
|
return this.index !== -1 && this.index !== i;
|
|
}
|
|
|
|
private getNextChordMode(): ChordMode {
|
|
switch (this._chordMode) {
|
|
case 'show':
|
|
return 'hide';
|
|
case 'hide':
|
|
return 'onlyFirst';
|
|
case 'onlyFirst':
|
|
return 'show';
|
|
}
|
|
}
|
|
}
|