MOBILE-3411 h5pactivity: Play package in activity

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> {
+    protected async calculateFileState(): Promise<void> {
-        const state = await CoreFilepool.instance.getFileStateByUrl(this.siteId, this.deployedFile.fileurl,
+        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 {}

src/core/h5p/components/h5p-iframe/core-h5p-iframe.html

@@ -0,0 +1,4 @@
+<core-loading [hideUntil]="iframeSrc" class="core-loading-center safe-area-page">
+    <core-iframe *ngIf="iframeSrc" [src]="iframeSrc" iframeHeight="auto" [allowFullscreen]="true" (loaded)="iframeLoaded()"></core-iframe>
+    <script *ngIf="resizeScript && iframeSrc" type="text/javascript" [src]="resizeScript"></script>
+</core-loading>

src/core/h5p/components/h5p-iframe/h5p-iframe.ts

@@ -0,0 +1,173 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input, Output, ElementRef, OnChanges, SimpleChange, EventEmitter } from '@angular/core';
+import { CoreFile } from '@providers/file';
+import { CoreFilepool } from '@providers/filepool';
+import { CoreLogger } from '@providers/logger';
+import { CoreSites } from '@providers/sites';
+import { CoreDomUtils } from '@providers/utils/dom';
+import { CoreUrlUtils } from '@providers/utils/url';
+import { CoreH5P } from '@core/h5p/providers/h5p';
+import { CorePluginFileDelegate } from '@providers/plugin-file-delegate';
+import { CoreFileHelper } from '@providers/file-helper';
+import { CoreConstants } from '@core/constants';
+import { CoreSite } from '@classes/site';
+import { CoreH5PCore, CoreH5PDisplayOptions } from '../../classes/core';
+import { CoreH5PHelper } from '../../classes/helper';
+
+/**
+ * Component to render an iframe with an H5P package.
+ */
+@Component({
+    selector: 'core-h5p-iframe',
+    templateUrl: 'core-h5p-iframe.html',
+})
+export class CoreH5PIframeComponent implements OnChanges {
+    @Input() fileUrl?: string; // The URL of the H5P file. If not supplied, onlinePlayerUrl is required.
+    @Input() displayOptions?: CoreH5PDisplayOptions; // Display options.
+    @Input() onlinePlayerUrl?: string; // The URL of the online player to display the H5P package.
+    @Output() onIframeUrlSet = new EventEmitter<{src: string, online: boolean}>();
+    @Output() onIframeLoaded = new EventEmitter<void>();
+
+    iframeSrc: string;
+
+    protected site: CoreSite;
+    protected siteId: string;
+    protected siteCanDownload: boolean;
+    protected logger;
+
+    constructor(public elementRef: ElementRef,
+            protected pluginFileDelegate: CorePluginFileDelegate) {
+
+        this.logger = CoreLogger.instance.getInstance('CoreH5PIframeComponent');
+        this.site = CoreSites.instance.getCurrentSite();
+        this.siteId = this.site.getId();
+        this.siteCanDownload = this.site.canDownloadFiles() && !CoreH5P.instance.isOfflineDisabledInSite();
+    }
+
+    /**
+     * Detect changes on input properties.
+     */
+    ngOnChanges(changes: {[name: string]: SimpleChange}): void {
+        // If it's already playing don't change it.
+        if ((changes.fileUrl || changes.onlinePlayerUrl) && !this.iframeSrc) {
+            this.play();
+        }
+    }
+
+    /**
+     * Play the H5P.
+     *
+     * @return Promise resolved when done.
+     */
+    protected async play(): Promise<void> {
+        let localUrl: string;
+        let state: string;
+
+        if (this.fileUrl) {
+            state = await CoreFilepool.instance.getFileStateByUrl(this.siteId, this.fileUrl);
+        } else {
+            state = CoreConstants.NOT_DOWNLOADABLE;
+        }
+
+        if (this.siteCanDownload && CoreFileHelper.instance.isStateDownloaded(state)) {
+            // Package is downloaded, use the local URL.
+            localUrl = await this.getLocalUrl();
+        }
+
+        try {
+            if (localUrl) {
+                // Local package.
+                this.iframeSrc = localUrl;
+            } else {
+                this.onlinePlayerUrl = this.onlinePlayerUrl || CoreH5P.instance.h5pPlayer.calculateOnlinePlayerUrl(
+                        this.site.getURL(), this.fileUrl, this.displayOptions);
+
+                // Never allow downloading in the app. This will only work if the user is allowed to change the params.
+                const src = this.onlinePlayerUrl.replace(CoreH5PCore.DISPLAY_OPTION_DOWNLOAD + '=1',
+                        CoreH5PCore.DISPLAY_OPTION_DOWNLOAD + '=0');
+
+                // Get auto-login URL so the user is automatically authenticated.
+                const url = await CoreSites.instance.getCurrentSite().getAutoLoginUrl(src, false);
+
+                // Add the preventredirect param so the user can authenticate.
+                this.iframeSrc = CoreUrlUtils.instance.addParamsToUrl(url, {preventredirect: false});
+            }
+        } catch (error) {
+            CoreDomUtils.instance.showErrorModalDefault(error, 'Error loading H5P package.', true);
+
+        } finally {
+            this.addResizerScript();
+            this.onIframeUrlSet.emit({src: this.iframeSrc, online: !!localUrl});
+        }
+    }
+
+    /**
+     * Get the local URL of the package.
+     *
+     * @return Promise resolved with the local URL.
+     */
+    protected async getLocalUrl(): Promise<string> {
+        try {
+            const url = await CoreH5P.instance.h5pPlayer.getContentIndexFileUrl(this.fileUrl, this.displayOptions, this.siteId);
+
+            return url;
+        } catch (error) {
+            // Index file doesn't exist, probably deleted because a lib was updated. Try to create it again.
+            try {
+                const path = await CoreFilepool.instance.getInternalUrlByUrl(this.siteId, this.fileUrl);
+
+                const file = await CoreFile.instance.getFile(path);
+
+                await CoreH5PHelper.saveH5P(this.fileUrl, file, this.siteId);
+
+                // File treated. Try to get the index file URL again.
+                const url = await CoreH5P.instance.h5pPlayer.getContentIndexFileUrl(this.fileUrl, this.displayOptions,
+                        this.siteId);
+
+                return url;
+            } catch (error) {
+                // Still failing. Delete the H5P package?
+                this.logger.error('Error loading downloaded index:', error, this.fileUrl);
+            }
+        }
+    }
+
+    /**
+     * Add the resizer script if it hasn't been added already.
+     */
+    protected addResizerScript(): void {
+        if (document.head.querySelector('#core-h5p-resizer-script') != null) {
+            // Script already added, don't add it again.
+            return;
+        }
+
+        const script = document.createElement('script');
+        script.id = 'core-h5p-resizer-script';
+        script.type = 'text/javascript';
+        script.src = CoreH5P.instance.h5pPlayer.getResizerScriptUrl();
+        document.head.appendChild(script);
+    }
+
+    /**
+     * H5P iframe has been loaded.
+     */
+    iframeLoaded(): void {
+        this.onIframeLoaded.emit();
+
+        // Send a resize event to the window so H5P package recalculates the size.
+        window.dispatchEvent(new Event('resize'));
+    }
+}

src/core/h5p/components/h5p-player/core-h5p-player.html

@@ -1,13 +1,11 @@
 <div *ngIf="!showPackage" class="core-h5p-placeholder">
-    <button *ngIf="!loading" class="core-h5p-placeholder-play-button" ion-button icon-only clear (click)="play($event)">
+    <button class="core-h5p-placeholder-play-button" ion-button icon-only clear (click)="play($event)">
         <core-icon name="fa-play-circle"></core-icon>
     </button>
 
-    <ion-spinner *ngIf="loading" class="core-h5p-placeholder-spinner"></ion-spinner>
-
     <div class="core-h5p-placeholder-download-container">
         <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="calculating" [canTrustDownload]="true" (action)="download()"></core-download-refresh>
     </div>
 </div>
-<core-iframe *ngIf="showPackage" [src]="playerSrc" iframeHeight="auto" [allowFullscreen]="true" (loaded)="iframeLoaded()"></core-iframe>
+
-<script *ngIf="resizeScript && showPackage" type="text/javascript" [src]="resizeScript"></script>
+<core-h5p-iframe *ngIf="showPackage" [fileUrl]="urlParams.url" [displayOptions]="displayOptions" [onlinePlayerUrl]="src"></core-h5p-iframe>

src/core/h5p/components/h5p-player/h5p-player.ts

@@ -15,7 +15,6 @@
 import { Component, Input, ElementRef, OnInit, OnDestroy, OnChanges, SimpleChange } from '@angular/core';
 import { CoreApp } from '@providers/app';
 import { CoreEvents } from '@providers/events';
-import { CoreFile } from '@providers/file';
 import { CoreFilepool } from '@providers/filepool';
 import { CoreLogger } from '@providers/logger';
 import { CoreSites } from '@providers/sites';
@@ -23,11 +22,9 @@ import { CoreDomUtils } from '@providers/utils/dom';
 import { CoreUrlUtils } from '@providers/utils/url';
 import { CoreH5P } from '@core/h5p/providers/h5p';
 import { CorePluginFileDelegate } from '@providers/plugin-file-delegate';
-import { CoreFileHelper } from '@providers/file-helper';
 import { CoreConstants } from '@core/constants';
 import { CoreSite } from '@classes/site';
-import { CoreH5PCore } from '../../classes/core';
+import { CoreH5PDisplayOptions } from '../../classes/core';
-import { CoreH5PHelper } from '../../classes/helper';
 
 /**
  * Component to render an H5P package.
@@ -41,18 +38,17 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
     @Input() component?: string; // Component.
     @Input() componentId?: string | number; // Component ID to use in conjunction with the component.
 
-    playerSrc: string;
     showPackage = false;
-    loading = false;
     state: string;
     canDownload: boolean;
     calculating = true;
+    displayOptions: CoreH5PDisplayOptions;
+    urlParams: {[name: string]: string};
 
     protected site: CoreSite;
     protected siteId: string;
     protected siteCanDownload: boolean;
     protected observer;
-    protected urlParams;
     protected logger;
 
     constructor(public elementRef: ElementRef,
@@ -90,62 +86,15 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
         e.preventDefault();
         e.stopPropagation();
 
-        this.loading = true;
+        this.displayOptions = CoreH5P.instance.h5pPlayer.getDisplayOptionsFromUrlParams(this.urlParams);
+        this.showPackage = true;
 
-        let localUrl: string;
+        if (this.canDownload && (this.state == CoreConstants.OUTDATED || this.state == CoreConstants.NOT_DOWNLOADED)) {
-        const displayOptions = CoreH5P.instance.h5pPlayer.getDisplayOptionsFromUrlParams(this.urlParams);
+            // Download the package in background if the size is low.
-
-        if (this.canDownload && CoreFileHelper.instance.isStateDownloaded(this.state)) {
-            // Package is downloaded, use the local URL.
             try {
-                localUrl = await CoreH5P.instance.h5pPlayer.getContentIndexFileUrl(this.urlParams.url, displayOptions, this.siteId);
+                this.attemptDownloadInBg();
             } catch (error) {
-                // Index file doesn't exist, probably deleted because a lib was updated. Try to create it again.
+                this.logger.error('Error downloading H5P in background', error);
-                try {
-                    const path = await CoreFilepool.instance.getInternalUrlByUrl(this.siteId, this.urlParams.url);
-
-                    const file = await CoreFile.instance.getFile(path);
-
-                    await CoreH5PHelper.saveH5P(this.urlParams.url, file, this.siteId);
-
-                    // File treated. Try to get the index file URL again.
-                    localUrl = await CoreH5P.instance.h5pPlayer.getContentIndexFileUrl(this.urlParams.url, displayOptions,
-                            this.siteId);
-                } catch (error) {
-                    // Still failing. Delete the H5P package?
-                    this.logger.error('Error loading downloaded index:', error, this.src);
-                }
-            }
-        }
-
-        try {
-            if (localUrl) {
-                // Local package.
-                this.playerSrc = localUrl;
-            } else {
-                // Never allow downloading in the app. This will only work if the user is allowed to change the params.
-                const src = this.src && this.src.replace(CoreH5PCore.DISPLAY_OPTION_DOWNLOAD + '=1',
-                        CoreH5PCore.DISPLAY_OPTION_DOWNLOAD + '=0');
-
-                // Get auto-login URL so the user is automatically authenticated.
-                const url = await CoreSites.instance.getCurrentSite().getAutoLoginUrl(src, false);
-
-                // Add the preventredirect param so the user can authenticate.
-                this.playerSrc = CoreUrlUtils.instance.addParamsToUrl(url, {preventredirect: false});
-            }
-        } finally {
-
-            this.addResizerScript();
-            this.loading = false;
-            this.showPackage = true;
-
-            if (this.canDownload && (this.state == CoreConstants.OUTDATED || this.state == CoreConstants.NOT_DOWNLOADED)) {
-                // Download the package in background if the size is low.
-                try {
-                    this.attemptDownloadInBg();
-                } catch (error) {
-                    this.logger.error('Error downloading H5P in background', error);
-                }
             }
         }
     }
@@ -204,22 +153,6 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
-    /**
-     * Add the resizer script if it hasn't been added already.
-     */
-    protected addResizerScript(): void {
-        if (document.head.querySelector('#core-h5p-resizer-script') != null) {
-            // Script already added, don't add it again.
-            return;
-        }
-
-        const script = document.createElement('script');
-        script.id = 'core-h5p-resizer-script';
-        script.type = 'text/javascript';
-        script.src = CoreH5P.instance.h5pPlayer.getResizerScriptUrl();
-        document.head.appendChild(script);
-    }
-
     /**
      * Check if the package can be downloaded.
      *
@@ -273,14 +206,6 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
-    /**
-     * H5P iframe has been loaded.
-     */
-    iframeLoaded(): void {
-        // Send a resize event to the window so H5P package recalculates the size.
-        window.dispatchEvent(new Event('resize'));
-    }
-
     /**
      * Component destroyed.
      */