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

71 lines
1.9 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">
<app-stage-view-item
[slide]="currentSlides[activeSlide]"
[active]="true">
</app-stage-view-item>
<div class="nextSlides">
@for (slide of nextSlides; track trackByIndex) {
<app-stage-view-item [slide]="slide">
</app-stage-view-item>
}
</div>
</div>
</div>
<div class="toolbar">
@if (!embedded) {
<a
class="back-button"
mat-mini-fab color=""
routerLink="/"
matTooltip="{{ 'GO_BACK_TO_CONTROLLER' | translate }}">
<mat-icon>arrow_back</mat-icon>
</a>
}
@if (showNotes) {
<button
mat-mini-fab
class="show-notes"
matTooltip="{{ 'HIDE_NOTES' | translate }}"
color="primary"
[class.show-notes-disabled]="false"
(click)="showNotes = false">
<mat-icon>sticky_note_2</mat-icon>
</button>
}
@else {
<button
mat-mini-fab
class="show-notes"
matTooltip="{{ 'SHOW_NOTES' | translate }}"
color=""
[class.show-notes-disabled]="true"
(click)="showNotes = true">
<mat-icon>sticky_note_2</mat-icon>
</button>
}
@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>
@if ((showNotes || embedded) && notes) {
<div class="sidebar">
<div class="notes" [innerHTML]="notes|nl2br"></div>
</div>
}
</div>