diff --git a/src/addons/filter/displayh5p/services/handlers/displayh5p.ts b/src/addons/filter/displayh5p/services/handlers/displayh5p.ts index 8134fac47..c2b11d7f7 100644 --- a/src/addons/filter/displayh5p/services/handlers/displayh5p.ts +++ b/src/addons/filter/displayh5p/services/handlers/displayh5p.ts @@ -18,6 +18,8 @@ import { CoreFilterDefaultHandler } from '@features/filter/services/handlers/def import { CoreFilterFilter, CoreFilterFormatTextOptions } from '@features/filter/services/filter'; import { makeSingleton } from '@singletons'; import { CoreH5PPlayerComponent } from '@features/h5p/components/h5p-player/h5p-player'; +import { CoreUrlUtils } from '@services/utils/url'; +import { CoreH5PHelper } from '@features/h5p/classes/helper'; /** * Handler to support the Display H5P filter. @@ -63,6 +65,24 @@ export class AddonFilterDisplayH5PHandlerService extends CoreFilterDefaultHandle iframe.parentElement?.replaceChild(placeholder, iframe); }); + // Handle H5P iframes embedded using the embed HTML code. + const embeddedH5PIframes = Array.from(this.template.content.querySelectorAll('iframe.h5p-player')); + + embeddedH5PIframes.forEach((iframe) => { + // Add the preventredirect param to allow authenticating if auto-login fails. + iframe.src = CoreUrlUtils.addParamsToUrl(iframe.src, { preventredirect: false }); + + // Add resizer script so the H5P has the right height. + CoreH5PHelper.addResizerScript(); + + // If the iframe has a small height, add some minimum initial height so it's seen if auto-login fails. + const styleHeight = Number(iframe.style.height); + const height = Number(iframe.getAttribute('height')); + if ((!height || height < 400) && (!styleHeight || styleHeight < 400)) { + iframe.style.height = '400px'; + } + }); + return this.template.innerHTML; } diff --git a/src/core/features/h5p/classes/helper.ts b/src/core/features/h5p/classes/helper.ts index 9724e29a3..bfb7b9537 100644 --- a/src/core/features/h5p/classes/helper.ts +++ b/src/core/features/h5p/classes/helper.ts @@ -30,6 +30,22 @@ import { CoreError } from '@classes/errors/error'; */ export class CoreH5PHelper { + /** + * Add the resizer script if it hasn't been added already. + */ + static 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.h5pPlayer.getResizerScriptUrl(); + document.head.appendChild(script); + } + /** * Convert the number representation of display options into an object. * diff --git a/src/core/features/h5p/components/h5p-iframe/h5p-iframe.ts b/src/core/features/h5p/components/h5p-iframe/h5p-iframe.ts index 72bcdb169..5a921c6f8 100644 --- a/src/core/features/h5p/components/h5p-iframe/h5p-iframe.ts +++ b/src/core/features/h5p/components/h5p-iframe/h5p-iframe.ts @@ -138,7 +138,7 @@ export class CoreH5PIframeComponent implements OnChanges, OnDestroy { CoreDomUtils.showErrorModalDefault(error, 'Error loading H5P package.', true); } finally { - this.addResizerScript(); + CoreH5PHelper.addResizerScript(); this.onIframeUrlSet.emit({ src: this.iframeSrc!, online: !!localUrl }); } } @@ -185,22 +185,6 @@ export class CoreH5PIframeComponent implements 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.h5pPlayer.getResizerScriptUrl(); - document.head.appendChild(script); - } - /** * H5P iframe has been loaded. */