MOBILE-3411 h5pactivity: Play package in activity

Author: dpalou

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

@@ -19,6 +19,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { CoreComponentsModule } from '@components/components.module';
 import { CoreDirectivesModule } from '@directives/directives.module';
 import { CoreCourseComponentsModule } from '@core/course/components/components.module';
+import { CoreH5PComponentsModule } from '@core/h5p/components/components.module';
 import { AddonModH5PActivityIndexComponent } from './index/index';
 
 @NgModule({
@@ -31,7 +32,8 @@ import { AddonModH5PActivityIndexComponent } from './index/index';
         TranslateModule.forChild(),
         CoreComponentsModule,
         CoreDirectivesModule,
-        CoreCourseComponentsModule
+        CoreCourseComponentsModule,
+        CoreH5PComponentsModule,
     ],
     providers: [
     ],

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

@@ -13,6 +13,11 @@
 
     <core-course-module-description [description]="description" [component]="component" [componentId]="componentId" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-course-module-description>
 
+    <!-- Offline disabled. -->
+    <ion-card class="core-warning-card" icon-start *ngIf="!siteCanDownload && playing">
+        <ion-icon name="warning"></ion-icon> {{ 'core.h5p.offlinedisabled' | translate }} {{ 'addon.mod_h5pactivity.offlinedisabledwarning' | translate }}
+    </ion-card>
+
     <ion-list *ngIf="deployedFile && !playing">
         <ion-item text-wrap *ngIf="stateMessage">
             <p >{{ stateMessage | translate }}</p>
@@ -30,4 +35,6 @@
             <p *ngIf="percentage <= 100">{{ 'core.percentagenumber' | translate:{$a: percentage} }}</p>
         </ion-item>
     </ion-list>
+
+    <core-h5p-iframe *ngIf="playing" [fileUrl]="fileUrl" [displayOptions]="displayOptions" [onlinePlayerUrl]="onlinePlayerUrl"></core-h5p-iframe>
 </core-loading>

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

@@ -16,6 +16,7 @@ import { Component, Optional, Injector } from '@angular/core';
 import { Content } from 'ionic-angular';
 
 import { CoreApp } from '@providers/app';
+import { CoreEvents } from '@providers/events';
 import { CoreFilepool } from '@providers/filepool';
 import { CoreWSExternalFile } from '@providers/ws';
 import { CoreDomUtils } from '@providers/utils/dom';
@@ -24,6 +25,7 @@ import { CoreH5P } from '@core/h5p/providers/h5p';
 import { CoreH5PDisplayOptions } from '@core/h5p/classes/core';
 import { CoreH5PHelper } from '@core/h5p/classes/helper';
 import { CoreConstants } from '@core/constants';
+import { CoreSite } from '@classes/site';
 
 import {
     AddonModH5PActivity, AddonModH5PActivityProvider, AddonModH5PActivityData, AddonModH5PActivityAccessInfo
@@ -50,13 +52,22 @@ export class AddonModH5PActivityIndexComponent extends CoreCourseModuleMainActiv
     percentage: string; // Download/unzip percentage.
     progressMessage: string; // Message about download/unzip.
     playing: boolean; // Whether the package is being played.
+    displayOptions: CoreH5PDisplayOptions; // Display options for the package.
+    onlinePlayerUrl: string; // URL to play the package in online.
+    fileUrl: string; // The fileUrl to use to play the package.
+    state: string; // State of the file.
+    siteCanDownload: boolean;
 
     protected fetchContentDefaultError = 'addon.mod_h5pactivity.errorgetactivity';
-    protected displayOptions: CoreH5PDisplayOptions;
+    protected site: CoreSite;
+    protected observer;
 
     constructor(injector: Injector,
             @Optional() protected content: Content) {
         super(injector, content);
+
+        this.site = this.sitesProvider.getCurrentSite();
+        this.siteCanDownload = this.site.canDownloadFiles() && !CoreH5P.instance.isOfflineDisabledInSite();
     }
 
     /**
@@ -87,14 +98,25 @@ export class AddonModH5PActivityIndexComponent extends CoreCourseModuleMainActiv
         try {
             this.h5pActivity = await AddonModH5PActivity.instance.getH5PActivity(this.courseId, this.module.id);
 
+            this.dataRetrieved.emit(this.h5pActivity);
             this.description = this.h5pActivity.intro;
             this.displayOptions = CoreH5PHelper.decodeDisplayOptions(this.h5pActivity.displayoptions);
-            this.dataRetrieved.emit(this.h5pActivity);
+
+            if (this.h5pActivity.package && this.h5pActivity.package[0]) {
+                // The online player should use the original file, not the trusted one.
+                this.onlinePlayerUrl = CoreH5P.instance.h5pPlayer.calculateOnlinePlayerUrl(
+                            this.site.getURL(), this.h5pActivity.package[0].fileurl, this.displayOptions);
+            }
 
             await Promise.all([
                 this.fetchAccessInfo(),
                 this.fetchDeployedFileData(),
             ]);
+
+            if (!this.siteCanDownload || this.state == CoreConstants.DOWNLOADED) {
+                // Cannot download the file or already downloaded, play the package directly.
+                this.play();
+            }
         } finally {
             this.fillContextMenu(refresh);
         }
@@ -115,6 +137,11 @@ export class AddonModH5PActivityIndexComponent extends CoreCourseModuleMainActiv
      * @return Promise resolved when done.
      */
     protected async fetchDeployedFileData(): Promise<void> {
+        if (!this.siteCanDownload) {
+            // Cannot download the file, no need to fetch the file data.
+            return;
+        }
+
         if (this.h5pActivity.deployedfile) {
             // File already deployed and still valid, use this one.
             this.deployedFile = this.h5pActivity.deployedfile;
@@ -128,19 +155,30 @@ export class AddonModH5PActivityIndexComponent extends CoreCourseModuleMainActiv
             this.deployedFile = await CoreH5P.instance.getTrustedH5PFile(this.h5pActivity.package[0].fileurl, this.displayOptions);
         }
 
-        await this.calculateFileStatus();
+        this.fileUrl = this.deployedFile.fileurl;
+
+        // Listen for changes in the state.
+        const eventName = await CoreFilepool.instance.getFileEventNameByUrl(this.siteId, this.deployedFile.fileurl);
+
+        if (!this.observer) {
+            this.observer = CoreEvents.instance.on(eventName, () => {
+                this.calculateFileState();
+            });
+        }
+
+        await this.calculateFileState();
     }
 
     /**
-     * Calculate the status of the deployed file.
+     * Calculate the state of the deployed file.
      *
      * @return Promise resolved when done.
      */
-    protected async calculateFileStatus(): Promise<void> {
-        const state = await CoreFilepool.instance.getFileStateByUrl(this.siteId, this.deployedFile.fileurl,
+    protected async calculateFileState(): Promise<void> {
+        this.state = await CoreFilepool.instance.getFileStateByUrl(this.siteId, this.deployedFile.fileurl,
                 this.deployedFile.timemodified);
 
-        this.showFileState(state);
+        this.showFileState();
     }
 
     /**
@@ -154,18 +192,16 @@ export class AddonModH5PActivityIndexComponent extends CoreCourseModuleMainActiv
 
     /**
      * Displays some data based on the state of the main file.
-     *
-     * @param state The state of the file.
      */
-    protected showFileState(state: string): void {
+    protected showFileState(): void {
 
-        if (state == CoreConstants.OUTDATED) {
+        if (this.state == CoreConstants.OUTDATED) {
             this.stateMessage = 'addon.mod_h5pactivity.filestateoutdated';
             this.needsDownload = true;
-        } else if (state == CoreConstants.NOT_DOWNLOADED) {
+        } else if (this.state == CoreConstants.NOT_DOWNLOADED) {
             this.stateMessage = 'addon.mod_h5pactivity.filestatenotdownloaded';
             this.needsDownload = true;
-        } else if (state == CoreConstants.DOWNLOADING) {
+        } else if (this.state == CoreConstants.DOWNLOADING) {
             this.stateMessage = '';
 
             if (!this.downloading) {
@@ -264,7 +300,12 @@ export class AddonModH5PActivityIndexComponent extends CoreCourseModuleMainActiv
      */
     play(): void {
         this.playing = true;
+    }
 
-        // @TODO
+    /**
+     * Component destroyed.
+     */
+    ngOnDestroy(): void {
+        this.observer && this.observer.off();
     }
 }

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

@@ -3,5 +3,6 @@
     "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"
 }

src/assets/lang/en.json

@@ -663,6 +663,7 @@
     "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",

src/core/h5p/classes/file-storage.ts

@@ -222,7 +222,7 @@ export class CoreH5PFileStorage {
         await Array.from(result.rows).map(async (entry: {foldername: string}) => {
             try {
                 // Delete the index.html.
-                await CoreFile.instance.removeFile(this.getContentIndexPath(entry.foldername, site.getId()));
+                await this.deleteContentIndex(entry.foldername, site.getId());
             } catch (error) {
                 // Ignore errors.
             }

src/core/h5p/classes/helper.ts

@@ -36,11 +36,11 @@ export class CoreH5PHelper {
         const config: any = {};
         const displayOptionsObject = CoreH5P.instance.h5pCore.getDisplayOptionsAsObject(displayOptions);
 
-        config.export = 0; // Don't allow downloading in the app.
+        config.export = false; // Don't allow downloading in the app.
         config.embed = CoreUtils.instance.notNullOrUndefined(displayOptionsObject[CoreH5PCore.DISPLAY_OPTION_EMBED]) ?
-                displayOptionsObject[CoreH5PCore.DISPLAY_OPTION_EMBED] : 0;
+                displayOptionsObject[CoreH5PCore.DISPLAY_OPTION_EMBED] : false;
         config.copyright = CoreUtils.instance.notNullOrUndefined(displayOptionsObject[CoreH5PCore.DISPLAY_OPTION_COPYRIGHT]) ?
-                displayOptionsObject[CoreH5PCore.DISPLAY_OPTION_COPYRIGHT] : 0;
+                displayOptionsObject[CoreH5PCore.DISPLAY_OPTION_COPYRIGHT] : false;
 
         return config;
     }

src/core/h5p/classes/player.ts

@@ -30,6 +30,25 @@ export class CoreH5PPlayer {
     constructor(protected h5pCore: CoreH5PCore,
             protected h5pStorage: CoreH5PStorage) { }
 
+    /**
+     * Calculate the URL to the site H5P player.
+     *
+     * @param siteUrl Site URL.
+     * @param fileUrl File URL.
+     * @param displayOptions Display options.
+     * @param component Component to send xAPI events to.
+     * @return URL.
+     */
+    calculateOnlinePlayerUrl(siteUrl: string, fileUrl: string, displayOptions?: CoreH5PDisplayOptions, component?: string): string {
+        const params = this.getUrlParamsFromDisplayOptions(displayOptions);
+        params.url = fileUrl;
+        if (component) {
+            params.component = component;
+        }
+
+        return CoreUrlUtils.instance.addParamsToUrl(CoreTextUtils.instance.concatenatePaths(siteUrl, '/h5p/embed.php'), params);
+    }
+
     /**
      * Create the index.html to render an H5P package.
      * Part of the code of this function is equivalent to Moodle's add_assets_to_page function.
@@ -323,4 +342,25 @@ export class CoreH5PPlayer {
     getResizerScriptUrl(): string {
         return CoreTextUtils.instance.concatenatePaths(this.h5pCore.h5pFS.getCoreH5PPath(), 'js/h5p-resizer.js');
     }
+
+    /**
+     * Get online player URL params from display options.
+     *
+     * @param options Display options.
+     * @return Object with URL params.
+     */
+    getUrlParamsFromDisplayOptions(options: CoreH5PDisplayOptions): {[name: string]: string} {
+        const params: {[name: string]: string} = {};
+
+        if (!options) {
+            return params;
+        }
+
+        params[CoreH5PCore.DISPLAY_OPTION_FRAME] = options[CoreH5PCore.DISPLAY_OPTION_FRAME] ? '1' : '0';
+        params[CoreH5PCore.DISPLAY_OPTION_DOWNLOAD] = options[CoreH5PCore.DISPLAY_OPTION_DOWNLOAD] ? '1' : '0';
+        params[CoreH5PCore.DISPLAY_OPTION_EMBED] = options[CoreH5PCore.DISPLAY_OPTION_EMBED] ? '1' : '0';
+        params[CoreH5PCore.DISPLAY_OPTION_COPYRIGHT] = options[CoreH5PCore.DISPLAY_OPTION_COPYRIGHT] ? '1' : '0';
+
+        return params;
+    }
 }

src/core/h5p/classes/storage.ts

@@ -62,7 +62,9 @@ export class CoreH5PStorage {
                 // Library already installed.
                 libraryData.libraryId = dbData.id;
 
-                if (!this.h5pFramework.isPatchedLibrary(libraryData, dbData)) {
+                const isNewPatch = await this.h5pFramework.isPatchedLibrary(libraryData, dbData);
+
+                if (!isNewPatch) {
                     // Same or older version, no need to save.
                     libraryData.saveDependencies = false;
 

src/core/h5p/components/components.module.ts

@@ -17,12 +17,14 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from 'ionic-angular';
 import { TranslateModule } from '@ngx-translate/core';
 import { CoreDirectivesModule } from '@directives/directives.module';
-import { CoreH5PPlayerComponent } from './h5p-player/h5p-player';
 import { CoreComponentsModule } from '@components/components.module';
+import { CoreH5PPlayerComponent } from './h5p-player/h5p-player';
+import { CoreH5PIframeComponent } from './h5p-iframe/h5p-iframe';
 
 @NgModule({
     declarations: [
-        CoreH5PPlayerComponent
+        CoreH5PPlayerComponent,
+        CoreH5PIframeComponent,
     ],
     imports: [
         CommonModule,
@@ -34,10 +36,12 @@ import { CoreComponentsModule } from '@components/components.module';
     providers: [
     ],
     exports: [
-        CoreH5PPlayerComponent
+        CoreH5PPlayerComponent,
+        CoreH5PIframeComponent,
     ],
     entryComponents: [
-        CoreH5PPlayerComponent
+        CoreH5PPlayerComponent,
+        CoreH5PIframeComponent,
     ]
 })
 export class CoreH5PComponentsModule {}