[player] Fix calculation of response progress for multi-page units

- Ignore blank pages when calculating the response progress

docs/release-notes-player.txt

@@ -4,6 +4,7 @@ Player
 - Fix the playability of dependent audios and videos
 - Fix storing/restoring the playback time of audios and videos
 - Fix the response status when re-entering the unit
+- Ignore blank pages when calculating the response progress
 - Fix position of virtual keyboard for text areas
 - Rename marking tag of text to 'aspect-marked'
 - Restore the state of likert elements when re-entering a unit

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

@@ -79,7 +79,6 @@ export class UnitStateComponent implements OnInit, OnDestroy {
   }
 
   private get responseProgress(): Progress {
-    // TODO: Check other relevant Elements
     if (this.form.valid) {
       return 'complete';
     }
@@ -109,12 +108,7 @@ export class UnitStateComponent implements OnInit, OnDestroy {
 
   private get presentationProgress(): Progress {
     const mediaStatus = this.mediaPlayerService.mediaStatus;
-    if (this.unitStateService.presentedPages.length === 0 && mediaStatus === 'none') {
-      return 'none';
-    }
-    return (
-      this.pages.length === this.unitStateService.presentedPages.length && mediaStatus === 'complete'
-    ) ? 'complete' : 'some';
+    return mediaStatus === this.unitStateService.presentedPagesProgress ? mediaStatus : 'some';
   }
 
   private addControl = (control: FormControlElement): void => {
@@ -152,7 +146,7 @@ export class UnitStateComponent implements OnInit, OnDestroy {
 
   private onPresentedPageAdded(): void {
     // eslint-disable-next-line no-console
-    console.log('player: onPresentedPageAdded', this.unitStateService.presentedPages);
+    console.log('player: onPresentedPageAdded');
     this.sendVopStateChangedNotification();
   }
 

projects/player/src/app/services/unit-state.service.ts

@@ -2,6 +2,7 @@ import { Inject, Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import {
+  Progress,
   StatusChangeElement,
   UnitStateElementCode,
   UnitStateElementCodeStatus,
@@ -14,11 +15,11 @@ import { IntersectionDetector } from '../classes/intersection-detector';
   providedIn: 'root'
 })
 export class UnitStateService {
-  unitStateElementCodes!: UnitStateElementCode[];
-  presentedPages: number[] = [];
-  private elementPageMap: { [elementId: string]: number } = {};
+  private _unitStateElementCodes!: UnitStateElementCode[];
   private _presentedPageAdded = new Subject<number>();
   private _unitStateElementCodeChanged = new Subject<UnitStateElementCode>();
+  private presentedPages: number[] = [];
+  private elementPageMap: { [elementId: string]: number } = {};
   private intersectionDetector!: IntersectionDetector;
 
   constructor(@Inject(DOCUMENT) private document: Document) {
@@ -38,6 +39,14 @@ export class UnitStateService {
     }
   }
 
+  set unitStateElementCodes(unitStateElementCodes: UnitStateElementCode[]) {
+    this._unitStateElementCodes = unitStateElementCodes;
+  }
+
+  get unitStateElementCodes(): UnitStateElementCode[] {
+    return this._unitStateElementCodes;
+  }
+
   get unitStateElementCodeChanged(): Observable<UnitStateElementCode> {
     return this._unitStateElementCodeChanged.asObservable();
   }
@@ -46,11 +55,20 @@ export class UnitStateService {
     return this._presentedPageAdded.asObservable();
   }
 
+  get presentedPagesProgress(): Progress {
+    if (this.elementPageIndices.length && !this.presentedPages.length) {
+      return 'none';
+    }
+    return (
+      this.elementPageIndices.length === this.presentedPages.length
+    ) ? 'complete' : 'some';
+  }
+
   registerElement(element: { id: string, value: InputElementValue },
                   domElement: Element,
                   pageIndex: number): void {
-    this.addUnitStateElementCode(element.id, element.value);
     this.elementPageMap[element.id] = pageIndex;
+    this.addUnitStateElementCode(element.id, element.value);
     this.intersectionDetector.observe(domElement, element.id);
     this.intersectionDetector.intersecting
       .subscribe((id: string) => {
@@ -79,6 +97,15 @@ export class UnitStateService {
     this.presentedPages = [];
   }
 
+  private get elementPageIndices(): number[] {
+    return Object.keys(this.elementPageMap).reduce((elementPageIndices: number[], elementId: string) => {
+      if (!elementPageIndices.includes(this.elementPageMap[elementId])) {
+        elementPageIndices.push(this.elementPageMap[elementId]);
+      }
+      return elementPageIndices;
+    }, []);
+  }
+
   private setUnitStateElementCodeStatus(id: string, status: UnitStateElementCodeStatus): void {
     const unitStateElementCode = this.getUnitStateElement(id);
     if (unitStateElementCode) {
@@ -115,6 +142,8 @@ export class UnitStateService {
       const unitStateElementCode: UnitStateElementCode = { id: id, value: value, status: 'NOT_REACHED' };
       this.unitStateElementCodes.push(unitStateElementCode);
       this._unitStateElementCodeChanged.next(unitStateElementCode);
+    } else {
+      this.checkPresentedPageStatus(id);
     }
   }
 }