Mobile 4786

src/addons/filter/displayh5p/services/handlers/displayh5p.ts

@@ -37,7 +37,7 @@ export class AddonFilterDisplayH5PHandlerService extends CoreFilterDefaultHandle
      */
     filter(
         text: string,
-    ): string | Promise<string> {
+    ): string {
         return CoreText.processHTML(text, (element) => {
             const h5pIframes = <HTMLIFrameElement[]> Array.from(element.querySelectorAll('iframe.h5p-iframe'));
 
@@ -83,25 +83,28 @@ export class AddonFilterDisplayH5PHandlerService extends CoreFilterDefaultHandle
         viewContainerRef: ViewContainerRef,
         component?: string,
         componentId?: string | number,
-    ): void | Promise<void> {
+    ): void {
 
         const placeholders = <HTMLElement[]> Array.from(container.querySelectorAll('div.core-h5p-tmp-placeholder'));
 
         placeholders.forEach((placeholder) => {
-            const url = placeholder.getAttribute('data-player-src') || '';
+            if (!placeholder.parentElement) {
+                return;
+            }
 
             // Create the component to display the player.
-            const componentRef = viewContainerRef.createComponent<CoreH5PPlayerComponent>(CoreH5PPlayerComponent);
+            const h5pInstance = viewContainerRef.createComponent<CoreH5PPlayerComponent>(CoreH5PPlayerComponent).instance;
 
-            componentRef.instance.src = url;
-            componentRef.instance.component = component;
-            componentRef.instance.componentId = componentId;
+            const url = placeholder.getAttribute('data-player-src') || '';
+            h5pInstance.src = url;
+            h5pInstance.component = component;
+            h5pInstance.componentId = componentId;
 
             // Check if auto-play was enabled when inserting the iframe using the TinyMCE editor.
-            componentRef.instance.autoPlay = CoreUtils.isTrueOrOne(placeholder.parentElement?.dataset.mobileappAutoplay);
+            h5pInstance.autoPlay = CoreUtils.isTrueOrOne(placeholder.parentElement.dataset.mobileappAutoplay);
 
             // Move the component to its right position.
-            placeholder.parentElement?.replaceChild(componentRef.instance.elementRef.nativeElement, placeholder);
+            placeholder.parentElement.replaceChild(h5pInstance.getElement(), placeholder);
         });
     }
 

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

@@ -18,11 +18,11 @@
         <!-- allowfullscreen cannot be set dynamically using attribute binding, define 2 iframe elements. -->
         @if (allowFullscreen) {
             <iframe #iframe class="core-iframe" [attr.id]="id" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"
-                allowfullscreen="true" [class.core-iframe-loading]="loading">
+                allowfullscreen="true" [class.core-iframe-loading]="loading" loading="lazy">
             </iframe>
         } @else {
             <iframe #iframe class="core-iframe" [attr.id]="id" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"
-                [class.core-iframe-loading]="loading">
+                [class.core-iframe-loading]="loading" loading="lazy">
             </iframe>
         }
 

src/core/features/h5p/classes/player.ts

@@ -139,10 +139,10 @@ export class CoreH5PPlayer {
             html += '<script type="text/javascript" src="' + jsUrl + '"></script>';
         });
 
-        html += '<div class="h5p-iframe-wrapper">' +
-                '<iframe id="h5p-iframe-' + id + '" class="h5p-iframe" data-content-id="' + id + '"' +
-                    'style="height:1px; min-width: 100%" src="about:blank"></iframe>' +
-                '</div></body>';
+        html += `<div class="h5p-iframe-wrapper">
+        <iframe id="h5p-iframe-${id}" class="h5p-iframe" data-content-id="${id}"
+            style="height:1px; min-width: 100%" src="about:blank" loading="lazy">
+        </iframe></div></body>`;
 
         const fileEntry = await CoreFile.writeFile(indexPath, html);
 
@@ -366,11 +366,11 @@ export class CoreH5PPlayer {
             return '';
         }
 
-        return `<iframe src="${this.getEmbedUrl(siteUrl, h5pUrl)}" allowfullscreen="allowfullscreen"></iframe>`;
+        return `<iframe src="${this.getEmbedUrl(siteUrl, h5pUrl)}" allowfullscreen="allowfullscreen" loading="lazy"></iframe>`;
     }
 
     /**
-     * Get the encoded URL for embeding an H5P content.
+     * Get the encoded URL for embedding an H5P content.
      *
      * @param siteUrl The site URL.
      * @param h5pUrl The URL of the .h5p file.

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

@@ -93,7 +93,7 @@ export class CoreH5PIframeComponent implements OnChanges, OnDestroy {
     }
 
     /**
-     * Detect changes on input properties.
+     * @inheritdoc
      */
     ngOnChanges(changes: {[name: string]: SimpleChange}): void {
         // If it's already playing don't change it.

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

@@ -1,13 +1,16 @@
-<div *ngIf="!showPackage && urlParams" class="core-h5p-placeholder">
-    <ion-button class="core-h5p-placeholder-play-button" fill="clear" (click)="play($event)" [ariaLabel]="'core.h5p.play' | translate">
-        <ion-icon name="far-circle-play" slot="icon-only" aria-hidden="true" />
-    </ion-button>
+@if (showPackage) {
+    <core-h5p-iframe *ngIf="showPackage" [fileUrl]="urlParams!.url" [displayOptions]="displayOptions" [onlinePlayerUrl]="src"
+        [component]="component" [componentId]="componentId" [fileTimemodified]="fileTimemodified" />
+} @else if (urlParams) {
+    <div class="core-h5p-placeholder">
+        <ion-button class="core-h5p-placeholder-play-button enlarge-on-hover" fill="clear" (click)="play($event)"
+            [ariaLabel]="'core.h5p.play' | translate">
+            <ion-icon name="far-circle-play" slot="icon-only" aria-hidden="true" />
+        </ion-button>
 
-    <div class="core-h5p-placeholder-download-container">
-        <core-download-refresh [status]="state" [enabled]="canDownload$ | async" [loading]="calculating$ | async" [canTrustDownload]="true"
-            (action)="download()" />
+        <div class="core-h5p-placeholder-download-container">
+            <core-download-refresh [status]="state" [enabled]="canDownload$ | async" [loading]="calculating$ | async"
+                [canTrustDownload]="true" (action)="download()" />
+        </div>
     </div>
-</div>
-
-<core-h5p-iframe *ngIf="showPackage" [fileUrl]="urlParams!.url" [displayOptions]="displayOptions" [onlinePlayerUrl]="src"
-    [component]="component" [componentId]="componentId" [fileTimemodified]="fileTimemodified" />
+}

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

@@ -65,10 +65,12 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
     protected siteCanDownload: boolean;
     protected observer?: CoreEventObserver;
     protected logger: CoreLogger;
+    protected nativeElement: HTMLElement;
 
     constructor(
-        public elementRef: ElementRef,
+        elementRef: ElementRef,
     ) {
+        this.nativeElement = elementRef.nativeElement;
 
         this.logger = CoreLogger.getInstance('CoreH5PPlayerComponent');
         this.site = CoreSites.getRequiredCurrentSite();
@@ -80,23 +82,34 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
      * @inheritdoc
      */
     ngOnInit(): void {
-        this.checkCanDownload();
-        if (this.autoPlay) {
-            this.play();
-        }
+        this.playIfRequested();
     }
 
     /**
-     * Detect changes on input properties.
+     * @inheritdoc
      */
     ngOnChanges(changes: {[name: string]: SimpleChange}): void {
         // If it's already playing there's no need to check if it can be downloaded or auto-played.
         if (changes.src && !this.showPackage) {
-            this.checkCanDownload();
-            if (this.autoPlay) {
+            this.playIfRequested();
+        }
+    }
+
+    protected async playIfRequested(): Promise<void> {
+
+        if (!this.autoPlay) {
+            await this.checkCanDownload();
+
+            if (this.canDownload$.getValue() &&
+                (this.state === DownloadStatus.OUTDATED || this.state === DownloadStatus.DOWNLOADED)) {
+                // It will be played if it's downloaded.
                 this.play();
             }
+
+            return;
         }
+
+        this.play();
     }
 
     /**
@@ -166,8 +179,6 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
 
     /**
      * Download the H5P in background if the size is low.
-     *
-     * @returns Promise resolved when done.
      */
     protected async attemptDownloadInBg(): Promise<void> {
         if (!this.urlParams || !this.src || !this.siteCanDownload || !CoreH5P.canGetTrustedH5PFileInSite() ||
@@ -192,15 +203,13 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
 
     /**
      * Check if the package can be downloaded.
-     *
-     * @returns Promise resolved when done.
      */
     protected async checkCanDownload(): Promise<void> {
-        this.observer && this.observer.off();
+        this.observer?.off();
         this.urlParams = CoreUrl.extractUrlParams(this.src || '');
 
         if (this.src && this.siteCanDownload && CoreH5P.canGetTrustedH5PFileInSite() && this.site.containsUrl(this.src)) {
-            this.calculateState();
+            await this.calculateState();
 
             // Listen for changes in the state.
             try {
@@ -209,7 +218,7 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
                 this.observer = CoreEvents.on(eventName, () => {
                     this.calculateState();
                 });
-            } catch (error) {
+            } catch {
                 // An error probably means the file cannot be downloaded or we cannot check it (offline).
             }
 
@@ -234,15 +243,24 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
 
             this.canDownload$.next(true);
             this.state = state;
-        } catch (error) {
+        } catch {
             this.canDownload$.next(false);
         } finally {
             this.calculating$.next(false);
         }
     }
 
     /**
-     * Component destroyed.
+     * Get the native element.
+     *
+     * @returns The native element.
+     */
+    getElement(): HTMLElement {
+        return this.nativeElement;
+    }
+
+    /**
+     * @inheritdoc
      */
     ngOnDestroy(): void {
         this.observer?.off();

src/theme/components/ion-button.scss

@@ -114,6 +114,14 @@ ion-button {
         outline: var(--a11y-shadow-focus-outline);
         z-index: 1;
     }
+
+    &.enlarge-on-hover::part(native) {
+        transition: transform 0.2s ease-in-out;
+        will-change: transform;
+        &:hover {
+            transform: scale(1.20);
+        }
+    }
 }
 
 ion-button,