[player] Refactor layout component

Because the always visible page is now positioned at the first place of
the unit definition.

projects/player/src/app/components/layout/layout.component.html

@@ -32,9 +32,9 @@
            [hideFirstChild]="hidePageLabels"
            [style.max-width]="alwaysVisiblePage.hasMaxWidth ? alwaysVisiblePage.maxWidth + 'px' : '100%'"
            [style.margin.px]="alwaysVisiblePage.margin">
-        <div class="mat-tab-label">{{'alwaysVisiblePage' | translate}} {{selectedIndex}}</div>
+        <div class="mat-tab-label">{{'alwaysVisiblePage' | translate}}</div>
         <app-page [parentArrayIndex]="alwaysVisibleUnitPageIndex"
-                  [index]="playerPageIndices[alwaysVisibleUnitPageIndex]"
+                  [index]="alwaysVisibleUnitPageIndex"
                   [parentForm]="parentForm"
                   [isLastPage]="false"
                   [pagesContainer]="alwaysVisiblePageContainer"
@@ -70,15 +70,14 @@
                  mat-align-tabs="start"
                  [(selectedIndex)]="selectedIndex"
                  (selectedIndexChange)="onSelectedIndexChange($event)">
-    <ng-container *ngFor="let page of pages; let i = index">
-      <mat-tab *ngIf="!page.alwaysVisible"
-               label="{{'pageIndication' | translate: {index: playerPageIndices[i] + 1} }}">
+    <ng-container *ngFor="let page of scrollPages; let i = index; let last = last">
+      <mat-tab [label]="'pageIndication' | translate: {index: i + 1}">
         <div [style.margin.px]="page.margin"
              [style.max-width]="page.hasMaxWidth ? page.maxWidth + 'px' : '100%'">
-          <app-page [parentArrayIndex]="i"
-                    [index]="playerPageIndices[i]"
+          <app-page [parentArrayIndex]="scrollPagesIndices[i]"
+                    [index]="scrollPagesIndices[i]"
                     [parentForm]="parentForm"
-                    [isLastPage]="i === lastScrollPageIndex"
+                    [isLastPage]="last"
                     [pagesContainer]="pagesContainer"
                     [page]="page">
           </app-page>
@@ -89,26 +88,25 @@
 </ng-template>
 
 <ng-template #scrollPagesScrolledView let-pagesContainer>
-  <ng-container *ngFor="let page of pages; let i = index">
-    <div *ngIf="!page.alwaysVisible"
-         [class.concat-scroll-snap-align]="scrollPageMode === 'concat-scroll-snap'"
-         appHideFirstChild
+  <ng-container *ngFor="let page of scrollPages; let i = index; let last = last">
+    <div appHideFirstChild
          [hideFirstChild]="hidePageLabels"
+         [class.concat-scroll-snap-align]="scrollPageMode === 'concat-scroll-snap'"
+         [style.max-width]="page.hasMaxWidth ? page.maxWidth + 'px' : '100%'"
+         [style.margin.px]="page.margin"
          appScrollIndex
          [pagesContainer]="pagesContainer"
          [selectIndex]="selectIndex"
-         [index]="playerPageIndices[i]"
-         [style.max-width]="page.hasMaxWidth ? page.maxWidth + 'px' : '100%'"
-         [style.margin.px]="page.margin">
+         [index]="i">
       <div class="mat-tab-label">
-        {{'pageIndication' | translate: {index: playerPageIndices[i] + 1} }}
+        {{'pageIndication' | translate: {index: i + 1} }}
       </div>
-      <app-page [parentArrayIndex]="i"
-                [index]="playerPageIndices[i]"
+      <app-page [parentArrayIndex]="scrollPagesIndices[i]"
+                [index]="scrollPagesIndices[i]"
                 [parentForm]="parentForm"
                 [pagesContainer]="pagesContainer"
                 [page]="page"
-                [isLastPage]="i === lastScrollPageIndex"
+                [isLastPage]="last"
                 (selectedIndexChange)="onSelectedIndexChange($event)">
       </app-page>
     </div>

projects/player/src/app/components/layout/layout.component.ts

@@ -27,9 +27,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
   private ngUnsubscribe = new Subject<void>();
 
   isKeyboardOpen!: boolean;
-
-  playerPageIndices!: number[];
-  lastScrollPageIndex!: number;
+  scrollPagesIndices!: number[];
   scrollPages!: UnitPage[];
   hasScrollPages!: boolean;
   alwaysVisiblePage!: UnitPage | undefined;
@@ -65,26 +63,13 @@ export class LayoutComponent implements OnInit, OnDestroy {
       .subscribe((isOpen: boolean): void => { this.isKeyboardOpen = isOpen; });
   }
 
-  private getLastScrollPageIndex(): number {
-    if (this.alwaysVisibleUnitPageIndex < 0 || this.alwaysVisibleUnitPageIndex < this.pages.length - 1) {
-      return this.pages.length - 1;
-    }
-    return this.pages.length - 2;
-  }
-
   private initPages(): void {
     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.lastScrollPageIndex = this.getLastScrollPageIndex();
-    this.playerPageIndices = this.pages.map(
-      (page: UnitPage, index: number): number => {
-        if (index === this.alwaysVisibleUnitPageIndex) {
-          return this.pages.length - 1;
-        }
-        return (this.alwaysVisibleUnitPageIndex < 0 || index < this.alwaysVisibleUnitPageIndex) ? index : index - 1;
-      }
+    this.hasScrollPages = this.scrollPages?.length > 0;
+    this.scrollPagesIndices = this.scrollPages.map(
+      (scrollPage: UnitPage): number => this.pages.indexOf(scrollPage)
     );
     this.validPagesDetermined.emit(this.scrollPages.map((page: UnitPage, index: number): Record<string, string> => (
       { [index.toString(10)]: `${this.translateService.instant('pageIndication', { index: index + 1 })}` })));
@@ -108,7 +93,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
     this.aspectRatioColumn.scrollPages = this.getAspectRatio('column', -100);
 
     this.containerMaxWidth.alwaysVisiblePage = this.getContainerMaxWidth(
-      !(this.alwaysVisiblePage && this.alwaysVisiblePage.hasMaxWidth),
+      !(this.alwaysVisiblePage?.hasMaxWidth),
       this.maxWidth.alwaysVisiblePage
     );
     this.containerMaxWidth.scrollPages = this.getContainerMaxWidth(