Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { PlayerElement } from '../../../../../common/interfaces/UIElementInterfaces';
@Component({
selector: 'app-player-edit-dialog',
template: `
<mat-dialog-content fxLayout="row">
<mat-tab-group>
<mat-tab label="{{ 'player.appearance' | translate }}">
<div fxLayout="column">
<mat-checkbox [checked]="newPlayerConfig.startControl || data.player.startControl"
(change)="newPlayerConfig.startControl = $event.checked">
{{ 'player.startControl' | translate }}
</mat-checkbox>
<mat-checkbox [checked]="newPlayerConfig.pauseControl || data.player.pauseControl"
(change)="newPlayerConfig.pauseControl = $event.checked">
{{ 'player.pauseControl' | translate }}
</mat-checkbox>
<mat-checkbox [checked]="newPlayerConfig.progressBar || data.player.progressBar"
(change)="newPlayerConfig.progressBar = $event.checked">
{{ 'player.progressBar' | translate }}
</mat-checkbox>
<mat-checkbox [checked]="newPlayerConfig.interactiveProgressbar || data.player.interactiveProgressbar"
(change)="newPlayerConfig.interactiveProgressbar = $event.checked">
{{ 'player.interactiveProgressbar' | translate }}
</mat-checkbox>
<mat-checkbox [checked]="newPlayerConfig.volumeControl || data.player.volumeControl"
(change)="newPlayerConfig.volumeControl = $event.checked">
{{ 'player.volumeControl' | translate }}
</mat-checkbox>
<mat-checkbox [checked]="newPlayerConfig.showRestTime || data.player.showRestTime"
(change)="newPlayerConfig.showRestTime = $event.checked">
{{ 'player.showRestTime' | translate }}
</mat-checkbox>
<mat-form-field appearance="fill">
<mat-label>{{ 'player.hintLabel' | translate }}</mat-label>
<input matInput type="text" [value]="newPlayerConfig.hintLabel || data.player.hintLabel"
(input)="newPlayerConfig.hintLabel = $any($event.target).value">
</mat-form-field>
<mat-form-field *ngIf="newPlayerConfig.hintLabel || data.player.hintLabel"
appearance="fill">
<mat-label>{{ 'player.hintLabelDelay' | translate }}</mat-label>
<input matInput type="number" step="1000" min="0"
[ngModel]="newPlayerConfig.hintLabelDelay || data.player.hintLabelDelay"
(ngModelChange)="newPlayerConfig.hintLabelDelay = $event">
</mat-form-field>
</div>
</mat-tab>
<mat-tab label="{{ 'player.behaviour' | translate }}">
<div fxLayout="column">
<mat-checkbox [checked]="newPlayerConfig.autostart || data.player.autostart"
(change)="newPlayerConfig.autostart = $event.checked">
{{ 'player.autoStart' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="newPlayerConfig.autostart || data.player.autostart" appearance="fill">
<mat-label>{{ 'player.autoStartDelay' | translate }}</mat-label>
<input matInput type="number" step="1000"
[value]="newPlayerConfig.autostartDelay || data.player.autostartDelay"
(input)="newPlayerConfig.autostartDelay = $any($event.target).value">
</mat-form-field>
<mat-checkbox [checked]="newPlayerConfig.loop || data.player.loop"
(change)="newPlayerConfig.loop = $event.checked">
{{ 'player.loop' | translate }}
</mat-checkbox>
<mat-checkbox [checked]="newPlayerConfig.uninterruptible || data.player.uninterruptible"
(change)="newPlayerConfig.uninterruptible = $event.checked">
{{ 'player.uninterruptible' | translate }}
</mat-checkbox>
<mat-checkbox [checked]="newPlayerConfig.hideOtherPages || data.player.hideOtherPages"
(change)="newPlayerConfig.hideOtherPages = $event.checked">
{{ 'player.hideOtherPages' | translate }}
</mat-checkbox>
<mat-form-field appearance="fill">
<mat-label>{{ 'player.activeAfterID' | translate }}</mat-label>
<input matInput type="text" [value]="newPlayerConfig.activeAfterID || data.player.activeAfterID"
(input)="newPlayerConfig.activeAfterID = $any($event.target).value">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>{{ 'player.minRuns' | translate }}</mat-label>
<input matInput type="number" min="0"
[ngModel]="newPlayerConfig.minRuns || data.player.minRuns"
(ngModelChange)="newPlayerConfig.minRuns = $event">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>{{ 'player.maxRuns' | translate }}</mat-label>
<input matInput type="number" min="0"
[ngModel]="newPlayerConfig.maxRuns || data.player.maxRuns"
(ngModelChange)="newPlayerConfig.maxRuns = $event">
</mat-form-field>
<mat-checkbox [checked]="newPlayerConfig.showRestRuns || data.player.showRestRuns"
(change)="newPlayerConfig.showRestRuns = $event.checked">
{{ 'player.showRestRuns' | translate }}
</mat-checkbox>
</div>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button [mat-dialog-close]="newPlayerConfig">{{'save' | translate }}</button>
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
</mat-dialog-actions>
`
})
export class PlayerEditDialogComponent {
newPlayerConfig: PlayerElement = {} as PlayerElement;
constructor(@Inject(MAT_DIALOG_DATA)public data: { player: PlayerElement }) {
}
}