web-remote/src/app/components/chord-view/chord-view.component.html

45 lines
1.7 KiB
HTML

<div
class="overlay"
[class.embedded]="embedded"
[style.--openlp-stage-font-scale]="fontScale"
>
<div class="overlay-content">
<div class="tags">
<span *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
</div>
<div class="container">
<app-chord-view-item
[slide]="currentSlides[activeSlide]"
[active]="true"
*ngIf="currentSlides[activeSlide]?.chords; else elseSlideNoChords"
></app-chord-view-item>
<ng-template #elseSlideNoChords>
<app-stage-view-item [slide]="currentSlides[activeSlide]" [active]="true"></app-stage-view-item>
</ng-template>
<div class="nextSlides">
<ng-container *ngFor="let slide of nextSlides">
<app-chord-view-item [slide]="slide" *ngIf="slide?.chords; else elseNextSlideNoChords"></app-chord-view-item>
<ng-template #elseNextSlideNoChords>
<app-stage-view-item [slide]="slide"></app-stage-view-item>
</ng-template>
</ng-container>
</div>
</div>
</div>
<div class="toolbar">
<a class="back-button" mat-mini-fab color="" routerLink="/" [matTooltip]="'Go back to controller'" *ngIf="!embedded">
<mat-icon>arrow_back</mat-icon>
</a>
<div class="transpose">
<button mat-icon-button (click)="transposeDown()">
<mat-icon>keyboard_arrow_down</mat-icon>
</button>
<span>{{ transposeLevel }}</span>
<button mat-icon-button (click)="transposeUp()">
<mat-icon>keyboard_arrow_up</mat-icon>
</button>
</div>
<div class="time">{{ (openlpService.getIsTwelveHourTime()) ? (time|date:'h:mm a') : (time|date:'HH:mm') }}</div>
</div>
</div>