MOBILE-3411 h5pactivity: Download automatically if size is low

Author: dpalou

scripts/langindex.json

@@ -659,6 +659,12 @@
   "addon.mod_glossary.noentriesfound": "local_moodlemobileapp",
   "addon.mod_glossary.searchquery": "local_moodlemobileapp",
   "addon.mod_glossary.tagarea_glossary_entries": "glossary",
+  "addon.mod_h5pactivity.downloadh5pfile": "local_moodlemobileapp",
+  "addon.mod_h5pactivity.errorgetactivity": "local_moodlemobileapp",
+  "addon.mod_h5pactivity.filestatenotdownloaded": "local_moodlemobileapp",
+  "addon.mod_h5pactivity.filestateoutdated": "local_moodlemobileapp",
+  "addon.mod_h5pactivity.modulenameplural": "h5pactivity",
+  "addon.mod_h5pactivity.offlinedisabledwarning": "local_moodlemobileapp",
   "addon.mod_imscp.deploymenterror": "imscp",
   "addon.mod_imscp.modulenameplural": "imscp",
   "addon.mod_imscp.showmoduledescription": "local_moodlemobileapp",
@@ -2035,6 +2041,7 @@
   "core.sort": "moodle",
   "core.sortby": "moodle",
   "core.start": "grouptool",
+  "core.storingfiles": "local_moodlemobileapp",
   "core.strftimedate": "langconfig",
   "core.strftimedatefullshort": "langconfig",
   "core.strftimedateshort": "langconfig",

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

@@ -27,14 +27,14 @@
 
         <!-- Button to download the package. -->
         <ion-item *ngIf="!downloading && needsDownload" text-wrap>
-            <a ion-button block (click)="downloadAndPlay($event)">{{ 'core.download' | translate }}</a>
+            <a ion-button block (click)="downloadAndPlay($event)">{{ 'addon.mod_h5pactivity.downloadh5pfile' | translate }}</a>
         </ion-item>
 
         <!-- Download progress. -->
         <ion-item text-center *ngIf="downloading">
             <ion-spinner></ion-spinner>
-            <p *ngIf="progressMessage">{{ progressMessage | translate }}</p>
-            <p *ngIf="percentage <= 100">{{ 'core.percentagenumber' | translate:{$a: percentage} }}</p>
+            <h2 *ngIf="progressMessage">{{ progressMessage | translate }}</h2>
+            <core-progress-bar *ngIf="percentage <= 100" [progress]="percentage"></core-progress-bar>
         </ion-item>
     </ion-list>
 

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

@@ -116,6 +116,11 @@ export class AddonModH5PActivityIndexComponent extends CoreCourseModuleMainActiv
             if (!this.siteCanDownload || this.state == CoreConstants.DOWNLOADED) {
                 // Cannot download the file or already downloaded, play the package directly.
                 this.play();
+
+            } else if ((this.state == CoreConstants.NOT_DOWNLOADED || this.state == CoreConstants.OUTDATED) &&
+                    CoreFilepool.instance.shouldDownload(this.deployedFile.filesize) && CoreApp.instance.isOnline()) {
+                // Package is small, download it automatically. Don't block this function for this.
+                this.downloadAutomatically();
             }
         } finally {
             this.fillContextMenu(refresh);
@@ -244,6 +249,23 @@ export class AddonModH5PActivityIndexComponent extends CoreCourseModuleMainActiv
         }
     }
 
+    /**
+     * Download the file automatically.
+     *
+     * @return Promise resolved when done.
+     */
+    protected async downloadAutomatically(): Promise<void> {
+        try {
+            await this.downloadDeployedFile();
+
+            if (!this.isDestroyed) {
+                this.play();
+            }
+        } catch (error) {
+            CoreDomUtils.instance.showErrorModalDefault(error, 'core.errordownloading', true);
+        }
+    }
+
     /**
      * Download athe H5P deployed file or restores an ongoing download.
      *

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

@@ -1,8 +1,8 @@
 {
+    "downloadh5pfile": "Download H5P file",
     "errorgetactivity": "Error getting H5P activity data.",
     "filestatenotdownloaded": "The H5P package is not downloaded. You need to download it to be able to use it.",
     "filestateoutdated": "The H5P package has been modified since the last download. You need to download it again to be able to use it.",
     "modulenameplural": "H5P",
-    "offlinedisabledwarning": "You will need to be online to view the H5P package.",
-    "storingfiles": "Storing files"
+    "offlinedisabledwarning": "You will need to be online to view the H5P package."
 }

src/assets/lang/en.json

@@ -659,12 +659,12 @@
     "addon.mod_glossary.noentriesfound": "No entries were found.",
     "addon.mod_glossary.searchquery": "Search query",
     "addon.mod_glossary.tagarea_glossary_entries": "Glossary entries",
+    "addon.mod_h5pactivity.downloadh5pfile": "Download H5P file",
     "addon.mod_h5pactivity.errorgetactivity": "Error getting H5P activity data.",
     "addon.mod_h5pactivity.filestatenotdownloaded": "The H5P package is not downloaded. You need to download it to be able to use it.",
     "addon.mod_h5pactivity.filestateoutdated": "The H5P package has been modified since the last download. You need to download it again to be able to use it.",
     "addon.mod_h5pactivity.modulenameplural": "H5P",
     "addon.mod_h5pactivity.offlinedisabledwarning": "You will need to be online to view the H5P package.",
-    "addon.mod_h5pactivity.storingfiles": "Storing files",
     "addon.mod_imscp.deploymenterror": "Content package error!",
     "addon.mod_imscp.modulenameplural": "IMS content packages",
     "addon.mod_imscp.showmoduledescription": "Show description",
@@ -2041,6 +2041,7 @@
     "core.sort": "Sort",
     "core.sortby": "Sort by",
     "core.start": "Start",
+    "core.storingfiles": "Storing files",
     "core.strftimedate": "%d %B %Y",
     "core.strftimedatefullshort": "%d/%m/%y",
     "core.strftimedateshort": "%d %B",

src/core/h5p/classes/helper.ts

@@ -144,7 +144,7 @@ export class CoreH5PHelper {
 
         try {
             // Notify that the unzip is starting.
-            onProgress && onProgress({message: 'addon.mod_h5pactivity.storingfiles'});
+            onProgress && onProgress({message: 'core.storingfiles'});
 
             // Read the contents of the unzipped dir, process them and store them.
             const contents = await CoreFile.instance.getDirectoryContents(destFolder);

src/core/h5p/classes/player.ts

@@ -40,8 +40,10 @@ export class CoreH5PPlayer {
      * @return URL.
      */
     calculateOnlinePlayerUrl(siteUrl: string, fileUrl: string, displayOptions?: CoreH5PDisplayOptions, component?: string): string {
+        fileUrl = CoreH5P.instance.treatH5PUrl(fileUrl, siteUrl);
+
         const params = this.getUrlParamsFromDisplayOptions(displayOptions);
-        params.url = fileUrl;
+        params.url = encodeURIComponent(fileUrl);
         if (component) {
             params.component = component;
         }

src/core/h5p/providers/h5p.ts

@@ -428,7 +428,7 @@ export class CoreH5PProvider {
      * @param siteUrl Site URL.
      * @return Treated url.
      */
-    protected treatH5PUrl(url: string, siteUrl: string): string {
+    treatH5PUrl(url: string, siteUrl: string): string {
         if (url.indexOf(CoreTextUtils.instance.concatenatePaths(siteUrl, '/webservice/pluginfile.php')) === 0) {
             url = url.replace('/webservice/pluginfile', '/pluginfile');
         }

src/lang/en.json

@@ -252,6 +252,7 @@
     "sort": "Sort",
     "sortby": "Sort by",
     "start": "Start",
+    "storingfiles": "Storing files",
     "strftimedate": "%d %B %Y",
     "strftimedatefullshort": "%d/%m/%y",
     "strftimedateshort": "%d %B",