Merge pull request #2900 from dpalou/MOBILE-3763

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

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 = <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;
     }
 

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

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