EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3763 h5p: Fix height of iframes added using the embed code

main
Dani Palou 2021-07-27 12:56:23 +02:00
parent 9a63793cf2
commit 310f55f119
3 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/addons/filter/displayh5p/services/handlers/displayh5p.ts
View File

@ -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 = <HTMLIFrameElement[]> 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;
}

16
src/core/features/h5p/classes/helper.ts
View File

@ -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.
*

18
src/core/features/h5p/components/h5p-iframe/h5p-iframe.ts
View File

@ -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.
*/