mirror of https://gitlab.com/openlp/web-remote.git
75 lines
2.0 KiB
HTML
75 lines
2.0 KiB
HTML
<div
|
|
class="overlay"
|
|
[class.embedded]="embedded"
|
|
[style.--openlp-stage-font-scale]="fontScale">
|
|
<div class="overlay-content">
|
|
<div class="tags">
|
|
@for (tag of tags; track tag) {
|
|
<span [class.active]="tag.active">{{ tag.text }}</span>
|
|
}
|
|
</div>
|
|
<div class="container">
|
|
@if (currentSlides[activeSlide]?.chords) {
|
|
<app-chord-view-item
|
|
[slide]="currentSlides[activeSlide]"
|
|
[active]="true">
|
|
</app-chord-view-item>
|
|
}
|
|
@else {
|
|
<app-stage-view-item
|
|
[slide]="currentSlides[activeSlide]"
|
|
[active]="true">
|
|
</app-stage-view-item>
|
|
}
|
|
<div class="nextSlides">
|
|
@for (slide of nextSlides; track trackByIndex) {
|
|
<ng-container>
|
|
@if (slide?.chords) {
|
|
<app-chord-view-item
|
|
[slide]="slide">
|
|
</app-chord-view-item>
|
|
}
|
|
@else {
|
|
<app-stage-view-item
|
|
[slide]="slide">
|
|
</app-stage-view-item>
|
|
}
|
|
</ng-container>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar">
|
|
@if (!embedded) {
|
|
<a
|
|
mat-mini-fab color=""
|
|
class="back-button"
|
|
routerLink="/"
|
|
matTooltip="{{ 'GO_BACK_TO_CONTROLLER' | translate }}">
|
|
<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>
|
|
@if (!embedded && activeSlide+1 === currentSlides.length) {
|
|
<div
|
|
class="next-service-item"
|
|
matTooltip="{{ 'NEXT_ITEM' | translate }}">
|
|
{{ nextServiceItemTitle }}
|
|
</div>
|
|
}
|
|
<div class="time">{{ (openlpService.getIsTwelveHourTime()) ? (time|date:'h:mm a') : (time|date:'HH:mm') }}</div>
|
|
</div>
|
|
</div>
|