[player] Implement page navigation action for buttons

projects/common/components/ui-elements/button.component.ts

@@ -19,15 +19,26 @@ import { ButtonElement } from '../../interfaces/elements';
             [style.font-style]="elementModel.styles.italic ? 'italic' : ''"
             [style.text-decoration]="elementModel.styles.underline ? 'underline' : ''"
             [style.border-radius.px]="elementModel.styles.borderRadius"
-            (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
+            (click)="elementModel.action && elementModel.actionParam !== null ?
+               navigateTo.emit({
+                  action: elementModel.action,
+                  param: elementModel.actionParam
+               }) :
+               false">
       {{elementModel.label}}
     </button>
-    <input *ngIf="elementModel.imageSrc" type="image"
-           [src]="elementModel.imageSrc | safeResourceUrl"
-           [class]="elementModel.positionProps.dynamicPositioning &&
+    <input
+        *ngIf="elementModel.imageSrc" type="image"
+        [src]="elementModel.imageSrc | safeResourceUrl"
+        [class]="elementModel.positionProps.dynamicPositioning &&
                     !elementModel.positionProps.fixedSize ? 'dynamic-image' : 'static-image'"
-           [alt]="'imageNotFound' | translate"
-           (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
+        [alt]="'imageNotFound' | translate"
+        (click)="elementModel.action && elementModel.actionParam !== null?
+           navigateTo.emit({
+              action: elementModel.action,
+              param: elementModel.actionParam
+           }) :
+           false">
   `,
   styles: [
     '.dynamic-image {width: 100%; height: fit-content;}',
@@ -37,5 +48,8 @@ import { ButtonElement } from '../../interfaces/elements';
 })
 export class ButtonComponent extends ElementComponent {
   @Input() elementModel!: ButtonElement;
-  @Output() navigationRequested = new EventEmitter<'previous' | 'next' | 'first' | 'last' | 'end'>();
+  @Output() navigateTo = new EventEmitter<{
+    action: 'unitNav' | 'pageNav';
+    param: 'previous' | 'next' | 'first' | 'last' | 'end' | number
+  }>();
 }

projects/common/interfaces/elements.ts

@@ -123,7 +123,8 @@ export interface ButtonElement extends UIElement {
   type: 'button';
   label: string;
   imageSrc: string | null;
-  action: null | 'previous' | 'next' | 'first' | 'last' | 'end';
+  action: null | 'unitNav' | 'pageNav'
+  actionParam: null | 'previous' | 'next' | 'first' | 'last' | 'end' | number;
   positionProps: PositionProperties;
   styles: BasicStyles & {
     borderRadius: number;

projects/common/util/element.factory.ts

@@ -210,6 +210,7 @@ export abstract class ElementFactory {
       label: 'Knopf',
       imageSrc: null,
       action: null,
+      actionParam: null,
       positionProps: ElementFactory.initPositionProps(defaults.positionProps),
       styles: {
         ...ElementFactory.initBasicStyles(defaults),

projects/player/src/app/components/element-interactive-group/element-interactive-group.component.html

@@ -2,7 +2,9 @@
     *ngIf="elementModel.type === 'button'"
     #elementComponent
     [elementModel]="elementModel | cast: ButtonElement"
-    (navigationRequested)="veronaPostService.sendVopUnitNavigationRequestedNotification($event)">
+    (navigateTo)="($event.action === 'unitNav') ?
+      veronaPostService.sendVopUnitNavigationRequestedNotification($any($event.param)) :
+      navigationService.setPage($any($event.param))">
 </aspect-button>
 <aspect-frame
     *ngIf="elementModel.type === 'frame'"

projects/player/src/app/components/element-interactive-group/element-interactive-group.component.ts

@@ -8,6 +8,7 @@ import { VeronaPostService } from '../../services/verona-post.service';
 import { UnitStateService } from '../../services/unit-state.service';
 import { ElementGroupDirective } from '../../directives/element-group.directive';
 import { ElementComponent } from '../../../../../common/directives/element-component.directive';
+import { NavigationService } from '../../services/navigation.service';
 
 @Component({
   selector: 'aspect-element-interactive-group',
@@ -21,8 +22,9 @@ export class ElementInteractiveGroupComponent extends ElementGroupDirective impl
   ImageElement!: ImageElement;
 
   constructor(
+    public unitStateService: UnitStateService,
     public veronaPostService: VeronaPostService,
-    public unitStateService: UnitStateService
+    public navigationService: NavigationService
   ) {
     super();
   }

projects/player/src/app/components/player-state/player-state.component.ts

@@ -10,6 +10,7 @@ import {
 } from '../../models/verona';
 import { VeronaPostService } from '../../services/verona-post.service';
 import { Page } from '../../../../../common/interfaces/unit';
+import { NavigationService } from '../../services/navigation.service';
 
 @Component({
   selector: 'aspect-player-state',
@@ -27,18 +28,23 @@ export class PlayerStateComponent implements OnInit, OnDestroy {
 
   private ngUnsubscribe = new Subject<void>();
 
-  constructor(private veronaSubscriptionService: VeronaSubscriptionService,
-              private veronaPostService: VeronaPostService) {
-  }
+  constructor(
+    private veronaSubscriptionService: VeronaSubscriptionService,
+    private veronaPostService: VeronaPostService,
+    private navigationService: NavigationService
+  ) {}
 
   ngOnInit(): void {
     this.initSubscriptions();
   }
 
   private initSubscriptions(): void {
+    this.navigationService.pageIndex
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe((pageIndex: number): void => this.selectIndex.next(pageIndex));
     this.veronaSubscriptionService.vopPageNavigationCommand
       .pipe(takeUntil(this.ngUnsubscribe))
-      .subscribe((message: VopPageNavigationCommand): void => this.onPageNavigation(message));
+      .subscribe((message: VopPageNavigationCommand): void => this.selectIndex.next(Number(message.target)));
     this.veronaSubscriptionService.vopContinueCommand
       .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe((message: VopContinueCommand): void => this.onContinue(message));
@@ -86,12 +92,6 @@ export class PlayerStateComponent implements OnInit, OnDestroy {
     this.sendVopStateChangedNotification(true);
   }
 
-  private onPageNavigation(message: VopPageNavigationCommand): void {
-    // eslint-disable-next-line no-console
-    console.log('player: onPageNavigation', message);
-    this.selectIndex.next(parseInt(message.target, 10));
-  }
-
   private sendVopStateChangedNotification(requested:boolean = false): void {
     const playerState: PlayerState = {
       state: this.state,