diff --git a/src/addon/mod/h5pactivity/components/components.module.ts b/src/addon/mod/h5pactivity/components/components.module.ts index 7259d8935..67ba634d8 100644 --- a/src/addon/mod/h5pactivity/components/components.module.ts +++ b/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: [ ], diff --git a/src/addon/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html b/src/addon/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html index 5bb5d2599..bc54e8a4c 100644 --- a/src/addon/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html +++ b/src/addon/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html @@ -13,6 +13,11 @@ + + + {{ 'core.h5p.offlinedisabled' | translate }} {{ 'addon.mod_h5pactivity.offlinedisabledwarning' | translate }} + +

{{ stateMessage | translate }}

@@ -30,4 +35,6 @@

{{ 'core.percentagenumber' | translate:{$a: percentage} }}

 + + diff --git a/src/addon/mod/h5pactivity/components/index/index.ts b/src/addon/mod/h5pactivity/components/index/index.ts index 61feb1127..6d28a5fda 100644 --- a/src/addon/mod/h5pactivity/components/index/index.ts +++ b/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 { + 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 { - const state = await CoreFilepool.instance.getFileStateByUrl(this.siteId, this.deployedFile.fileurl, + protected async calculateFileState(): Promise { + 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(); } } diff --git a/src/addon/mod/h5pactivity/lang/en.json b/src/addon/mod/h5pactivity/lang/en.json index 2f8ab42cf..88e5f74e9 100644 --- a/src/addon/mod/h5pactivity/lang/en.json +++ b/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" } \ No newline at end of file diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json index 7a09eb8fb..b45ad5b85 100644 --- a/src/assets/lang/en.json +++ b/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", diff --git a/src/core/h5p/classes/file-storage.ts b/src/core/h5p/classes/file-storage.ts index 42b39f175..55aad3574 100644 --- a/src/core/h5p/classes/file-storage.ts +++ b/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. } diff --git a/src/core/h5p/classes/helper.ts b/src/core/h5p/classes/helper.ts index 4c268b71e..e88a1d30c 100644 --- a/src/core/h5p/classes/helper.ts +++ b/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; } diff --git a/src/core/h5p/classes/player.ts b/src/core/h5p/classes/player.ts index 138a04d93..a112754e6 100644 --- a/src/core/h5p/classes/player.ts +++ b/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; + } } diff --git a/src/core/h5p/classes/storage.ts b/src/core/h5p/classes/storage.ts index 56da67fb7..830abc6ca 100644 --- a/src/core/h5p/classes/storage.ts +++ b/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; diff --git a/src/core/h5p/components/components.module.ts b/src/core/h5p/components/components.module.ts index 09480a6bb..7e07b035c 100644 --- a/src/core/h5p/components/components.module.ts +++ b/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 {} diff --git a/src/core/h5p/components/h5p-iframe/core-h5p-iframe.html b/src/core/h5p/components/h5p-iframe/core-h5p-iframe.html new file mode 100644 index 000000000..05635b97d --- /dev/null +++ b/src/core/h5p/components/h5p-iframe/core-h5p-iframe.html @@ -0,0 +1,4 @@ + + + + diff --git a/src/core/h5p/components/h5p-iframe/h5p-iframe.ts b/src/core/h5p/components/h5p-iframe/h5p-iframe.ts new file mode 100644 index 000000000..8d9a74ca2 --- /dev/null +++ b/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(); + + 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 { + 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 { + 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')); + } +} diff --git a/src/core/h5p/components/h5p-player/core-h5p-player.html b/src/core/h5p/components/h5p-player/core-h5p-player.html index bdd88f6c4..344df521b 100644 --- a/src/core/h5p/components/h5p-player/core-h5p-player.html +++ b/src/core/h5p/components/h5p-player/core-h5p-player.html @@ -1,13 +1,11 @@
- - -
- - + + diff --git a/src/core/h5p/components/h5p-player/h5p-player.ts b/src/core/h5p/components/h5p-player/h5p-player.ts index f46b37ab0..4ffda459b 100644 --- a/src/core/h5p/components/h5p-player/h5p-player.ts +++ b/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 { CoreH5PHelper } from '../../classes/helper'; +import { CoreH5PDisplayOptions } from '../../classes/core'; /** * 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; - const displayOptions = CoreH5P.instance.h5pPlayer.getDisplayOptionsFromUrlParams(this.urlParams); - - if (this.canDownload && CoreFileHelper.instance.isStateDownloaded(this.state)) { - // Package is downloaded, use the local URL. + if (this.canDownload && (this.state == CoreConstants.OUTDATED || this.state == CoreConstants.NOT_DOWNLOADED)) { + // Download the package in background if the size is low. 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. - 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); - } + 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. */