MOBILE-3436 scorm: UX improvements

scripts/langindex.json

@@ -872,12 +872,10 @@
   "addon.mod_scorm.highestattempt": "scorm",
   "addon.mod_scorm.incomplete": "scorm",
   "addon.mod_scorm.lastattempt": "scorm",
-  "addon.mod_scorm.mode": "scorm",
   "addon.mod_scorm.modulenameplural": "scorm",
   "addon.mod_scorm.newattempt": "scorm",
   "addon.mod_scorm.noattemptsallowed": "scorm",
   "addon.mod_scorm.noattemptsmade": "scorm",
-  "addon.mod_scorm.normal": "scorm",
   "addon.mod_scorm.notattempted": "scorm",
   "addon.mod_scorm.offlineattemptnote": "local_moodlemobileapp",
   "addon.mod_scorm.offlineattemptovermax": "local_moodlemobileapp",

src/addon/mod/scorm/components/index/addon-mod-scorm-index.html

@@ -98,7 +98,7 @@
                     <div *ngFor="let sco of toc" class="core-padding-{{sco.level}} addon-mod_scorm-type-{{sco.scormtype}}">
                         <p *ngIf="sco.isvisible">
                             <core-icon [name]="sco.image.icon" [label]="sco.image.description" item-start></core-icon>
-                            <a *ngIf="sco.prereq && sco.launch" (click)="open($event, sco.id)" class="core-clickable"><core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text></a>
+                            <a *ngIf="sco.prereq && sco.launch" (click)="open($event, false, sco.id)" class="core-clickable"><core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text></a>
                             <span *ngIf="!sco.prereq || !sco.launch"><core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text></span>
                             <span *ngIf="accessInfo && accessInfo.canviewscores && sco.score_raw">({{ 'addon.mod_scorm.score' | translate }}: {{sco.score_raw}})</span>
                         </p>
@@ -130,43 +130,42 @@
         <!-- Open SCORM in app form -->
         <ion-card *ngIf="!errorMessage && scorm && (!scorm.lastattemptlock || scorm.attemptsLeft > 0)">
             <ion-list>
-                <!-- Open mode (Preview or Normal) -->
+                <ng-container *ngIf="!downloading && !skip">
-                <div *ngIf="!scorm.hidebrowse && !skip" radio-group [(ngModel)]="scormOptions.mode" name="mode">
-                    <ion-item>
-                        <h2>{{ 'addon.mod_scorm.mode' | translate }}</h2>
-                    </ion-item>
-                    <ion-item>
-                        <ion-label>{{ 'addon.mod_scorm.browse' | translate }}</ion-label>
-                        <ion-radio [value]="modeBrowser"></ion-radio>
-                    </ion-item>
-                    <ion-item>
-                        <ion-label>{{ 'addon.mod_scorm.normal' | translate }}</ion-label>
-                        <ion-radio [value]="modeNormal"></ion-radio>
-                    </ion-item>
-                </div>
-
                     <!-- Create new attempt -->
-                <ion-item text-wrap *ngIf="!scorm.forcenewattempt && scorm.numAttempts > 0 && !scorm.incomplete && scorm.attemptsLeft > 0 && !skip">
+                    <ion-item text-wrap *ngIf="!scorm.forcenewattempt && scorm.numAttempts > 0 && !scorm.incomplete && scorm.attemptsLeft > 0">
                         <ion-label>{{ 'addon.mod_scorm.newattempt' | translate }}</ion-label>
-                    <ion-checkbox item-end name="newAttempt" [(ngModel)]="scormOptions.newAttempt">
+                        <ion-checkbox item-end name="newAttempt" [(ngModel)]="startNewAttempt">
                         </ion-checkbox>
                     </ion-item>
 
-                <!-- Button to open the SCORM. -->
-                <ng-container *ngIf="!downloading && !skip">
                     <ion-item text-wrap *ngIf="statusMessage">
                         <p>{{ statusMessage | translate }}</p>
                     </ion-item>
-                    <ion-item text-wrap>
+
-                        <a ion-button block (click)="open($event)">{{ 'addon.mod_scorm.enter' | translate }}</a>
+                    <!-- Open mode (Preview or Normal) -->
-                    </ion-item>
+                    <ion-grid>
+                        <ion-row align-items-center>
+                            <ion-col col-12 col-sm-6 *ngIf="!scorm.hidebrowse">
+                                <button ion-button block outline icon-end (click)="open($event, true)" text-wrap>
+                                    {{ 'addon.mod_scorm.browse' | translate }}
+                                    <ion-icon name="search"></ion-icon>
+                                </button>
+                            </ion-col>
+                            <ion-col col-12 [attr.col-sm-6]="!scorm.hidebrowse || null">
+                                <button ion-button block icon-end (click)="open($event)" text-wrap>
+                                    {{ 'addon.mod_scorm.enter' | translate }}
+                                    <ion-icon name="arrow-forward"></ion-icon>
+                                </button>
+                            </ion-col>
+                        </ion-row>
+                    </ion-grid>
                 </ng-container>
 
                 <!-- Download progress. -->
                 <ion-item text-center *ngIf="downloading">
                     <ion-spinner></ion-spinner>
-                    <p *ngIf="progressMessage">{{ progressMessage | translate }}</p>
+                    <h2 *ngIf="progressMessage">{{ progressMessage | translate }}</h2>
-                    <p *ngIf="percentage <= 100">{{ 'core.percentagenumber' | translate:{$a: percentage} }}</p>
+                    <core-progress-bar *ngIf="percentage <= 100" [progress]="percentage"></core-progress-bar>
                 </ion-item>
             </ion-list>
         </ion-card>

src/addon/mod/scorm/components/index/index.ts

@@ -37,12 +37,7 @@ export class AddonModScormIndexComponent extends CoreCourseModuleMainActivityCom
 
     scorm: any; // The SCORM object.
     currentOrganization: any = {}; // Selected organization.
-    scormOptions: any = { // Options to open the SCORM.
+    startNewAttempt = false;
-        mode: AddonModScormProvider.MODENORMAL,
-        newAttempt: false
-    };
-    modeNormal = AddonModScormProvider.MODENORMAL; // Normal open mode.
-    modeBrowser = AddonModScormProvider.MODEBROWSE; // Browser open mode.
     errorMessage: string; // Error message.
     syncTime: string; // Last sync time.
     hasOffline: boolean; // Whether the SCORM has offline data.
@@ -223,7 +218,7 @@ export class AddonModScormIndexComponent extends CoreCourseModuleMainActivityCom
 
                     if (this.scorm.forcenewattempt == AddonModScormProvider.SCORM_FORCEATTEMPT_ALWAYS ||
                             (this.scorm.forcenewattempt && !this.scorm.incomplete)) {
-                        this.scormOptions.newAttempt = true;
+                        this.startNewAttempt = true;
                     }
 
                     promises.push(this.getReportedGrades());
@@ -372,7 +367,7 @@ export class AddonModScormIndexComponent extends CoreCourseModuleMainActivityCom
 
         if (this.hasPlayed) {
             this.hasPlayed = false;
-            this.scormOptions.newAttempt = false; // Uncheck new attempt.
+            this.startNewAttempt = false; // Uncheck new attempt.
 
             // Add a delay to make sure the player has started the last writing calls so we can detect conflicts.
             setTimeout(() => {
@@ -492,7 +487,7 @@ export class AddonModScormIndexComponent extends CoreCourseModuleMainActivityCom
      * @param event Event.
      * @param scoId SCO that needs to be loaded when the SCORM is opened. If not defined, load first SCO.
      */
-    open(event?: Event, scoId?: number): void {
+    open(event?: Event, preview: boolean = false, scoId?: number): void {
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -515,7 +510,7 @@ export class AddonModScormIndexComponent extends CoreCourseModuleMainActivityCom
                     this.downloadScormPackage().then(() => {
                         // Success downloading, open SCORM if user hasn't left the view.
                         if (!this.isDestroyed) {
-                            this.openScorm(scoId);
+                            this.openScorm(scoId, preview);
                         }
                     }).catch((error) => {
                         if (!this.isDestroyed) {
@@ -526,7 +521,7 @@ export class AddonModScormIndexComponent extends CoreCourseModuleMainActivityCom
                 });
             });
         } else {
-            this.openScorm(scoId);
+            this.openScorm(scoId, preview);
         }
     }
 
@@ -535,11 +530,11 @@ export class AddonModScormIndexComponent extends CoreCourseModuleMainActivityCom
      *
      * @param scoId SCO ID.
      */
-    protected openScorm(scoId: number): void {
+    protected openScorm(scoId: number, preview: boolean = false): void {
         this.navCtrl.push('AddonModScormPlayerPage', {
             scorm: this.scorm,
-            mode: this.scormOptions.mode,
+            mode: preview ? AddonModScormProvider.MODEBROWSE : AddonModScormProvider.MODENORMAL,
-            newAttempt: !!this.scormOptions.newAttempt,
+            newAttempt: !!this.startNewAttempt,
             organizationId: this.currentOrganization.identifier,
             scoId: scoId
         });

src/addon/mod/scorm/lang/en.json

@@ -32,12 +32,10 @@
     "highestattempt": "Highest attempt",
     "incomplete": "Incomplete",
     "lastattempt": "Last completed attempt",
-    "mode": "Mode",
     "modulenameplural": "SCORM packages",
     "newattempt": "Start a new attempt",
     "noattemptsallowed": "Number of attempts allowed",
     "noattemptsmade": "Number of attempts you have made",
-    "normal": "Normal",
     "notattempted": "Not attempted",
     "offlineattemptnote": "This attempt has data that hasn't been synchronised.",
     "offlineattemptovermax": "This attempt cannot be sent because you exceeded the maximum number of attempts.",

src/addon/mod/scorm/providers/prefetch-handler.ts

@@ -220,6 +220,7 @@ export class AddonModScormPrefetchHandler extends CoreCourseActivityPrefetchHand
     /**
      * Function that converts a regular ProgressEvent into a AddonModScormProgressEvent.
      *
+     * @param downloading True when downloading, false when unzipping.
      * @param onProgress Function to call on progress.
      * @param progress Event returned by the download function.
      */

src/assets/lang/en.json

@@ -872,12 +872,10 @@
     "addon.mod_scorm.highestattempt": "Highest attempt",
     "addon.mod_scorm.incomplete": "Incomplete",
     "addon.mod_scorm.lastattempt": "Last completed attempt",
-    "addon.mod_scorm.mode": "Mode",
     "addon.mod_scorm.modulenameplural": "SCORM packages",
     "addon.mod_scorm.newattempt": "Start a new attempt",
     "addon.mod_scorm.noattemptsallowed": "Number of attempts allowed",
     "addon.mod_scorm.noattemptsmade": "Number of attempts you have made",
-    "addon.mod_scorm.normal": "Normal",
     "addon.mod_scorm.notattempted": "Not attempted",
     "addon.mod_scorm.offlineattemptnote": "This attempt has data that hasn't been synchronised.",
     "addon.mod_scorm.offlineattemptovermax": "This attempt cannot be sent because you exceeded the maximum number of attempts.",