diff --git a/projects/common/form.ts b/projects/common/form.ts
index 804e44d119d097aabf67bf79f81c596954fb74de..921d72cd88f9e9313eb12de8690750b2e2221324 100644
--- a/projects/common/form.ts
+++ b/projects/common/form.ts
@@ -21,4 +21,5 @@ export interface ChildFormGroup {
formGroup: FormGroup;
parentForm: FormGroup;
parentArray: 'pages' | 'sections' | 'elements'
+ parentArrayIndex: number;
}
diff --git a/projects/player/src/app/components/element-overlay.component.ts b/projects/player/src/app/components/element-overlay.component.ts
index 3ac1a797b77b1152337cb75965dbeee56cb8e50e..22d2eed42edabdf49753b39e3a03ac21da8a95c8 100644
--- a/projects/player/src/app/components/element-overlay.component.ts
+++ b/projects/player/src/app/components/element-overlay.component.ts
@@ -27,6 +27,7 @@ import { FormService } from '../../../../common/form.service';
export class ElementOverlayComponent implements OnInit, OnDestroy {
@Input() elementModel!: UnitUIElement;
@Input() parentForm!: FormGroup;
+ @Input() parentArrayIndex!: number;
private elementForm!: FormGroup;
@ViewChild('elementComponentContainer',
@@ -72,7 +73,8 @@ export class ElementOverlayComponent implements OnInit, OnDestroy {
this.formService.registerFormGroup({
formGroup: this.elementForm,
parentForm: this.parentForm,
- parentArray: 'elements'
+ parentArray: 'elements',
+ parentArrayIndex: this.parentArrayIndex
});
}
diff --git a/projects/player/src/app/components/form.component.ts b/projects/player/src/app/components/form.component.ts
index 6e2823d7338963fb7005ef4de21443570cccdeef..860aca608a2a3cef3bae472c5f021c4c485e015e 100644
--- a/projects/player/src/app/components/form.component.ts
+++ b/projects/player/src/app/components/form.component.ts
@@ -84,7 +84,11 @@ export class FormComponent implements OnDestroy {
private addGroup = (group: ChildFormGroup): void => {
const formArray: FormArray = group.parentForm.get(group.parentArray) as FormArray;
- formArray.push(group.formGroup);
+ if (group.parentArrayIndex < formArray.length) {
+ formArray.insert(group.parentArrayIndex, group.formGroup);
+ } else {
+ formArray.push(group.formGroup);
+ }
};
private onElementValueChanges = (value: ValueChangeElement): void => {
diff --git a/projects/player/src/app/components/page.component.ts b/projects/player/src/app/components/page.component.ts
index f29014b5b496890e80fa005c269e4a334070b6b9..cf4c49a3bd79f89a6484a8dec7a323bdbac52ccb 100644
--- a/projects/player/src/app/components/page.component.ts
+++ b/projects/player/src/app/components/page.component.ts
@@ -10,6 +10,7 @@ import { FormService } from '../../../../common/form.service';
template: `
<app-section *ngFor="let section of page.sections"
[parentForm]="pageForm"
+ [parentArrayIndex]="parentArrayIndex"
[section]="section"
[ngStyle]="{
position: 'relative',
@@ -25,6 +26,7 @@ import { FormService } from '../../../../common/form.service';
export class PageComponent implements OnInit {
@Input() page!: UnitPage;
@Input() parentForm!: FormGroup;
+ @Input() parentArrayIndex!: number;
pageForm!: FormGroup;
constructor(private formService: FormService, private formBuilder: FormBuilder) {}
@@ -37,7 +39,8 @@ export class PageComponent implements OnInit {
this.formService.registerFormGroup({
formGroup: this.pageForm,
parentForm: this.parentForm,
- parentArray: 'pages'
+ parentArray: 'pages',
+ parentArrayIndex: this.parentArrayIndex
});
}
}
diff --git a/projects/player/src/app/components/player-state/player-state.component.html b/projects/player/src/app/components/player-state/player-state.component.html
index 3904ee7f8c948f2ce37989b54ac81655f6ccfbac..e830f0cc22bbc36cb6e3b5d25109a893a2402cfd 100644
--- a/projects/player/src/app/components/player-state/player-state.component.html
+++ b/projects/player/src/app/components/player-state/player-state.component.html
@@ -1,14 +1,16 @@
<div *ngIf="!running" class='stopped-overlay'></div>
<div fxLayout="row">
- <mat-tab-group [fxFlex]="pageWidth" [(selectedIndex)]="currentIndex"
+ <mat-tab-group *ngIf="hasScrollPages" [fxFlex]="pageWidth" [(selectedIndex)]="currentIndex"
(selectedIndexChange)="onSelectedIndexChange()"
mat-align-tabs="start">
- <mat-tab *ngFor="let page of scrollPages; let i = index" label="{{'pageIndication' | translate: {index: i + 1} }}">
- <app-page class="page" [parentForm]="parenForm" [page]="page"></app-page>
- </mat-tab>
+ <ng-container *ngFor="let page of pages; let i = index">
+ <mat-tab *ngIf="!page.alwaysVisible" label="{{'pageIndication' | translate: {index: pageIndices[i] + 1} }}">
+ <app-page class="page" [parentArrayIndex]="i" [parentForm]="parenForm" [page]="page"></app-page>
+ </mat-tab>
+ </ng-container>
</mat-tab-group>
- <div *ngIf="alwaysVisiblePage" fxFlex="50">
+ <div *ngIf="alwaysVisiblePage" [fxFlex]="pageWidth">
<div class="mat-tab-label">{{'alwaysVisiblePage' | translate}}</div>
- <app-page class="page" [parentForm]="parenForm" [page]="alwaysVisiblePage"></app-page>
+ <app-page class="page" [parentArrayIndex]="alwaysVisiblePageIndex" [parentForm]="parenForm" [page]="alwaysVisiblePage"></app-page>
</div>
</div>
diff --git a/projects/player/src/app/components/player-state/player-state.component.ts b/projects/player/src/app/components/player-state/player-state.component.ts
index 3096a98410ab8f0f21155f5e29f446d35f33905c..76e69e5069ef690aa7fd69572138c3f67ff4c692 100644
--- a/projects/player/src/app/components/player-state/player-state.component.ts
+++ b/projects/player/src/app/components/player-state/player-state.component.ts
@@ -21,8 +21,17 @@ import { VeronaPostService } from '../../services/verona-post.service';
export class PlayerStateComponent implements OnInit, OnDestroy {
@Input() parenForm!: FormGroup;
@Input() pages!: UnitPage[];
+
currentIndex: number = 0;
+ pageIndices!: number[];
+ scrollPages!: UnitPage[];
+ hasScrollPages!: boolean;
+ pageWidth!: number;
+ validPages!: Record<string, string> [];
+ alwaysVisiblePage!: UnitPage | undefined;
+ alwaysVisiblePageIndex!: number;
running: boolean = true;
+
private ngUnsubscribe = new Subject<void>();
constructor(private veronaSubscriptionService: VeronaSubscriptionService,
@@ -30,29 +39,9 @@ export class PlayerStateComponent implements OnInit, OnDestroy {
private translateService: TranslateService) {
}
- private get state(): RunningState {
- return this.running ? 'running' : 'stopped';
- }
-
- get pageWidth(): number {
- return this.alwaysVisiblePage ? 50 : 100;
- }
-
- get validPages():Record<string, string>[] {
- return this.scrollPages.map((page: UnitPage, index: number): Record<string, string> => (
- { [page.id]: `${this.translateService.instant('pageIndication', { index: index + 1 })}` }));
- }
-
- get alwaysVisiblePage(): UnitPage | undefined {
- return this.pages.find((page: UnitPage): boolean => page.alwaysVisible);
- }
-
- get scrollPages(): UnitPage[] {
- return this.pages.filter((page: UnitPage): boolean => !page.alwaysVisible);
- }
-
ngOnInit(): void {
this.initSubscriptions();
+ this.initPageState();
this.sendVopStateChangedNotification();
}
@@ -71,6 +60,28 @@ export class PlayerStateComponent implements OnInit, OnDestroy {
.subscribe((message: VopGetStateRequest): void => this.onGetStateRequest(message));
}
+ private initPageState() {
+ this.alwaysVisiblePageIndex = this.pages.findIndex((page: UnitPage): boolean => page.alwaysVisible);
+ this.alwaysVisiblePage = this.pages[this.alwaysVisiblePageIndex];
+ this.scrollPages = this.pages.filter((page: UnitPage): boolean => !page.alwaysVisible);
+ this.hasScrollPages = this.scrollPages && this.scrollPages.length > 0;
+ this.pageWidth = !this.alwaysVisiblePage || !this.hasScrollPages ? 100 : 50;
+ this.validPages = this.scrollPages.map((page: UnitPage, index: number): Record<string, string> => (
+ { [page.id]: `${this.translateService.instant('pageIndication', { index: index + 1 })}` }));
+ this.pageIndices = this.pages.map(
+ (page: UnitPage, index: number): number => {
+ if (index === this.alwaysVisiblePageIndex) {
+ return this.pages.length - 1;
+ }
+ return (this.alwaysVisiblePageIndex < 0 || index < this.alwaysVisiblePageIndex) ? index : index - 1;
+ }
+ );
+ }
+
+ private get state(): RunningState {
+ return this.running ? 'running' : 'stopped';
+ }
+
onSelectedIndexChange(): void {
this.sendVopStateChangedNotification();
}
diff --git a/projects/player/src/app/components/section.component.ts b/projects/player/src/app/components/section.component.ts
index ae7879810adf47550e6c57b4d5c672fb862e4079..f4f77674fcc67f24b5f4140757dab00e501eedfe 100644
--- a/projects/player/src/app/components/section.component.ts
+++ b/projects/player/src/app/components/section.component.ts
@@ -11,7 +11,8 @@ import { FormService } from '../../../../common/form.service';
<app-element-overlay
*ngFor="let element of section.elements"
[elementModel]="element"
- [parentForm]="sectionForm">
+ [parentForm]="sectionForm"
+ [parentArrayIndex]="parentArrayIndex">
</app-element-overlay>
`
})
@@ -19,8 +20,10 @@ export class SectionComponent implements OnInit {
@Input() parentForm!: FormGroup;
@Input() section!: UnitPageSection;
@Input() sectionForm!: FormGroup;
+ @Input() parentArrayIndex!: number;
- constructor(private formService: FormService, private formBuilder: FormBuilder) {}
+ constructor(private formService: FormService, private formBuilder: FormBuilder) {
+ }
ngOnInit(): void {
this.sectionForm = new FormGroup({
@@ -29,7 +32,8 @@ export class SectionComponent implements OnInit {
this.formService.registerFormGroup({
formGroup: this.sectionForm,
parentForm: this.parentForm,
- parentArray: 'sections'
+ parentArray: 'sections',
+ parentArrayIndex: this.parentArrayIndex
});
}
}