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 e830f0cc22bbc36cb6e3b5d25109a893a2402cfd..80ded80292d8bfc5b88af32e8baa636c7a5726ce 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,16 +1,27 @@ <div *ngIf="!running" class='stopped-overlay'></div> <div fxLayout="row"> - <mat-tab-group *ngIf="hasScrollPages" [fxFlex]="pageWidth" [(selectedIndex)]="currentIndex" + <mat-tab-group *ngIf="hasScrollPages" + [fxFlex]="pageWidth" + [(selectedIndex)]="currentPlayerPageIndex" (selectedIndexChange)="onSelectedIndexChange()" mat-align-tabs="start"> <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 *ngIf="!page.alwaysVisible" + label="{{'pageIndication' | translate: {index: playerPageIndices[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]="pageWidth"> <div class="mat-tab-label">{{'alwaysVisiblePage' | translate}}</div> - <app-page class="page" [parentArrayIndex]="alwaysVisiblePageIndex" [parentForm]="parenForm" [page]="alwaysVisiblePage"></app-page> + <app-page class="page" + [parentArrayIndex]="alwaysVisibleUnitPageIndex" + [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 76e69e5069ef690aa7fd69572138c3f67ff4c692..eef12c2266cfbe286772e1219ba8d2972db29ac4 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 @@ -22,14 +22,14 @@ export class PlayerStateComponent implements OnInit, OnDestroy { @Input() parenForm!: FormGroup; @Input() pages!: UnitPage[]; - currentIndex: number = 0; - pageIndices!: number[]; + currentPlayerPageIndex: number = 0; + playerPageIndices!: number[]; scrollPages!: UnitPage[]; hasScrollPages!: boolean; pageWidth!: number; validPages!: Record<string, string> []; alwaysVisiblePage!: UnitPage | undefined; - alwaysVisiblePageIndex!: number; + alwaysVisibleUnitPageIndex!: number; running: boolean = true; private ngUnsubscribe = new Subject<void>(); @@ -61,19 +61,19 @@ export class PlayerStateComponent implements OnInit, OnDestroy { } private initPageState() { - this.alwaysVisiblePageIndex = this.pages.findIndex((page: UnitPage): boolean => page.alwaysVisible); - this.alwaysVisiblePage = this.pages[this.alwaysVisiblePageIndex]; + this.alwaysVisibleUnitPageIndex = this.pages.findIndex((page: UnitPage): boolean => page.alwaysVisible); + this.alwaysVisiblePage = this.pages[this.alwaysVisibleUnitPageIndex]; 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( + this.playerPageIndices = this.pages.map( (page: UnitPage, index: number): number => { - if (index === this.alwaysVisiblePageIndex) { + if (index === this.alwaysVisibleUnitPageIndex) { return this.pages.length - 1; } - return (this.alwaysVisiblePageIndex < 0 || index < this.alwaysVisiblePageIndex) ? index : index - 1; + return (this.alwaysVisibleUnitPageIndex < 0 || index < this.alwaysVisibleUnitPageIndex) ? index : index - 1; } ); } @@ -112,13 +112,13 @@ export class PlayerStateComponent implements OnInit, OnDestroy { private onPageNavigation(message: VopPageNavigationCommand): void { // eslint-disable-next-line no-console console.log('player: onPageNavigation', message); - this.currentIndex = parseInt(message.target, 10); + this.currentPlayerPageIndex = parseInt(message.target, 10); } private sendVopStateChangedNotification(): void { const playerState: PlayerState = { state: this.state, - currentPage: this.currentIndex.toString(10), + currentPage: this.currentPlayerPageIndex.toString(10), validPages: this.validPages }; this.veronaPostService.sendVopStateChangedNotification({ playerState });