Change the paging mode via the unit menu

projects/player/modules/unit-menu/components/unit-menu/unit-menu.component.html

@@ -33,6 +33,31 @@
     <span>{{ 'load_snap' | translate }}</span>
   </button>
 
+  @if (scrollPages && scrollPages.length) {
+    <mat-divider></mat-divider>
+    <button mat-menu-item
+            (click)="changePagingMode('separate')">
+      <mat-icon>auto_stories</mat-icon>
+      <span>{{ 'load_separate' | translate }}</span>
+    </button>
+    <button mat-menu-item
+            (click)="changePagingMode('buttons')">
+      <mat-icon>unfold_more</mat-icon>
+      <span>{{ 'load_buttons' | translate }}</span>
+    </button>
+    <button mat-menu-item
+            (click)="changePagingMode('concat-scroll')">
+      <mat-icon>south</mat-icon>
+      <span>{{ 'load_scroll' | translate }}</span>
+    </button>
+    <button mat-menu-item
+            (click)="changePagingMode('concat-scroll-snap')">
+      <mat-icon>vertical_align_bottom</mat-icon>
+      <span>{{ 'load_snap' | translate }}</span>
+    </button>
+  }
+
+
   <ng-container *ngIf="elementCodes && elementCodes.length">
     <mat-divider></mat-divider>
     <button mat-menu-item

projects/player/modules/unit-menu/components/unit-menu/unit-menu.component.ts

@@ -4,6 +4,7 @@ import {
   PagingMode,
   UnitState,
   VopPageNavigationCommand,
+  VopPlayerConfigChangedNotification,
   VopStartCommand
 } from 'player/modules/verona/models/verona';
 import { Page } from 'common/models/page';
@@ -34,6 +35,14 @@ export class UnitMenuComponent {
     unitState: undefined
   };
 
+  private vopPlayerConfigChangedNotificationMessage: VopPlayerConfigChangedNotification = {
+    type: 'vopPlayerConfigChangedNotification',
+    sessionId: 'dev',
+    playerConfig: {
+      pagingMode: undefined
+    }
+  };
+
   private vopPageNavigationCommandMessage: VopPageNavigationCommand = {
     type: 'vopPageNavigationCommand',
     sessionId: 'dev',
@@ -66,6 +75,11 @@ export class UnitMenuComponent {
     }
   }
 
+  changePagingMode(pagingMode: PagingMode): void {
+    this.vopPlayerConfigChangedNotificationMessage.playerConfig.pagingMode = pagingMode;
+    this.postMessage(this.vopPlayerConfigChangedNotificationMessage);
+  }
+
   private loadUnit(unitDefinition: string, pagingMode: PagingMode, unitSate: UnitState): void {
     this.vopStartCommandMessage.unitDefinition = unitDefinition;
     this.vopStartCommandMessage.playerConfig = { pagingMode };
@@ -74,7 +88,7 @@ export class UnitMenuComponent {
     this.postMessage(this.vopStartCommandMessage);
   }
 
-  private postMessage = (message: VopStartCommand | VopPageNavigationCommand): void => {
+  private postMessage(message: VopStartCommand | VopPageNavigationCommand | VopPlayerConfigChangedNotification): void {
     this.postTarget.postMessage(message, '*');
-  };
+  }
 }

projects/player/src/assets/i18n/de.json

@@ -16,6 +16,10 @@
     "unitDefinitionIsNewer": "Unit-Version ist neuer als dieser Player. Bitte mit der neuesten Version öffnen.",
     "unitDefinitionIsOutdated": "Unit-Version ist veraltet. Sie kann im neuesten Editor geöffnet und aktualisiert werden."
   },
+  "apply_separate": "'Blätter'-Modus anwenden",
+  "apply_buttons": "'Buttons'-Modus anwenden",
+  "apply_scroll": "'Scroll'-Modus anwenden",
+  "apply_snap": "'Snap'-Modus anwenden",
   "load_separate": "Unit im 'Blätter'-Modus laden",
   "load_buttons": "Unit im 'Buttons'-Modus laden",
   "load_scroll": "Unit im 'Scroll'-Modus laden",