add dynamic text for presentation

This commit is contained in:
2023-03-20 22:28:20 +01:00
parent 66af7ea1e7
commit 138b0b42b3
8 changed files with 910 additions and 322 deletions

View File

@@ -10,9 +10,9 @@
<div
[@songSwitch]="songId"
[class.blur]="songId === 'title'"
[class.blur]="songId === 'title' || songId === 'dynamicText'"
[class.no-logo]="presentationBackground!=='none'"
[class.hide]="songId !== 'title' && songId !== 'empty'"
[class.hide]="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
class="start fullscreen logo"
>
<app-logo></app-logo>
@@ -23,6 +23,11 @@
<div class="date">{{ date | date: "dd.MM.yyyy" }}</div>
</div>
<div *ngIf="songId === 'dynamicText'" @songSwitch class="start fullscreen">
<div>{{ presentationDynamicCaption }}</div>
<div class="date">{{ presentationDynamicText }}</div>
</div>
<app-song-text
[header]="song.title"
*ngIf="songId !== 'title' && songId !== 'empty'"

View File

@@ -73,6 +73,8 @@
.start {
display: flex;
padding: 0 30px;
text-align: center;
width: 100%;
height: 100%;
align-items: center;
@@ -80,7 +82,7 @@
flex-direction: column;
font-size: 13vh;
box-sizing: border-box;
text-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black, 0 0 20px black, 0 0 30px black, 0 0 35px black, 0 0 40px black, 0 0 45px black;
text-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black, 0 0 20px black, 0 0 30px black, 0 0 35px black, 0 0 40px black, 0 0 45px black;
.date {
font-size: 0.6em;

View File

@@ -26,6 +26,8 @@ export class MonitorComponent implements OnInit {
public songId: string | null = null;
public index: number | null = null;
public showType: string | null = null;
public presentationDynamicCaption: string | null = null;
public presentationDynamicText: string | null = null;
public date: Date | null = null;
public config$: Observable<Config | null>;
public presentationBackground: PresentationBackground = 'none';
@@ -60,6 +62,8 @@ export class MonitorComponent implements OnInit {
this.date = _.date.toDate();
this.index = _.presentationSection;
this.presentationBackground = _.presentationBackground;
this.presentationDynamicCaption = _.presentationDynamicCaption;
this.presentationDynamicText = _.presentationDynamicText;
this.zoom = _.presentationZoom ?? 30;
if (this.songId !== _.presentationSongId) this.songId = 'empty';
setTimeout(() => (this.songId = _.presentationSongId), 600);