David Frassi
47 lines
2.2 KiB
HTML
47 lines
2.2 KiB
HTML
<ion-content [fullscreen]="true" class="bg-gradient">
|
|
<div class="display-wrapper"
|
|
[style.fontSize.rem]="fontSize()"
|
|
(touchstart)="onTouchStart($event)"
|
|
(touchmove)="onTouchMove($event)"
|
|
(touchend)="onTouchEnd()">
|
|
<div class="lyrics-window">
|
|
<!-- Previous line -->
|
|
<div *ngIf="displayLines().prev" class="prev-line">
|
|
<ng-container *ngIf="showChords(); else prevText">
|
|
<span *ngFor="let seg of displayLines().prev!.segments; let i = index" class="chord-segment" [class.contiguous-next]="lyricsParser.isContiguousNext(displayLines().prev!.segments, i)">
|
|
<span *ngIf="seg.chord" class="chord">{{ seg.chord }}</span>
|
|
<span class="seg-text">{{ seg.text }}</span>
|
|
</span>
|
|
</ng-container>
|
|
<ng-template #prevText>{{ displayLines().prev!.text }}</ng-template>
|
|
</div>
|
|
|
|
<!-- Active line -->
|
|
<div *ngIf="displayLines().current" class="active-line outfit-font">
|
|
<ng-container *ngIf="showChords(); else currentText">
|
|
<span *ngFor="let seg of displayLines().current!.segments; let i = index" class="chord-segment" [class.contiguous-next]="lyricsParser.isContiguousNext(displayLines().current!.segments, i)">
|
|
<span *ngIf="seg.chord" class="chord">{{ seg.chord }}</span>
|
|
<span class="seg-text">{{ seg.text }}</span>
|
|
</span>
|
|
</ng-container>
|
|
<ng-template #currentText>{{ displayLines().current!.text }}</ng-template>
|
|
</div>
|
|
|
|
<!-- Next line -->
|
|
<div *ngIf="displayLines().next" class="next-line">
|
|
<ng-container *ngIf="showChords(); else nextText">
|
|
<span *ngFor="let seg of displayLines().next!.segments; let i = index" class="chord-segment" [class.contiguous-next]="lyricsParser.isContiguousNext(displayLines().next!.segments, i)">
|
|
<span *ngIf="seg.chord" class="chord">{{ seg.chord }}</span>
|
|
<span class="seg-text">{{ seg.text }}</span>
|
|
</span>
|
|
</ng-container>
|
|
<ng-template #nextText>{{ displayLines().next!.text }}</ng-template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-info">
|
|
<div class="title-label outfit-font">{{ canto()?.titolo }}</div>
|
|
</div>
|
|
</div>
|
|
</ion-content>
|