From 4397446acd222025e62ec512cac018ce52c3b6cc Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Wed, 10 Jan 2024 12:49:35 +0100
Subject: [PATCH] MOBILE-3947 iframe: Fix error when setting allowfullscreen

Now this attribute needs to be static
---
 src/core/components/iframe/core-iframe.html | 14 ++++++++++---
 src/core/components/iframe/iframe.ts        | 22 +++++++++++++++------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/core/components/iframe/core-iframe.html b/src/core/components/iframe/core-iframe.html
index d15df751c..22c8fabeb 100644
--- a/src/core/components/iframe/core-iframe.html
+++ b/src/core/components/iframe/core-iframe.html
@@ -11,9 +11,17 @@
         </ion-button>
     </core-navbar-buttons>
 
-    <iframe #iframe class="core-iframe" [attr.id]="id" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"
-        [attr.allowfullscreen]="allowFullscreen ? 'allowfullscreen' : null" [class.core-iframe-loading]="loading">
-    </iframe>
+    <!-- allowfullscreen cannot be set dynamically using attribute binding, define 2 iframe elements. -->
+    <ng-container *ngIf="allowFullscreen">
+        <iframe #iframe class="core-iframe" [attr.id]="id" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"
+            allowfullscreen="true" [class.core-iframe-loading]="loading">
+        </iframe>
+    </ng-container>
+    <ng-container *ngIf="!allowFullscreen">
+        <iframe #iframe class="core-iframe" [attr.id]="id" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"
+            [class.core-iframe-loading]="loading">
+        </iframe>
+    </ng-container>
 
     <ion-button *ngIf="!loading && displayHelp" expand="block" fill="clear" (click)="openIframeHelpModal()" aria-haspopup="dialog"
         class="core-button-as-link core-iframe-help">
diff --git a/src/core/components/iframe/iframe.ts b/src/core/components/iframe/iframe.ts
index 6a21b9b69..4c49d610e 100644
--- a/src/core/components/iframe/iframe.ts
+++ b/src/core/components/iframe/iframe.ts
@@ -85,12 +85,6 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
 
         this.initialized = true;
 
-        this.iframeWidth = (this.iframeWidth && CoreDomUtils.formatPixelsSize(this.iframeWidth)) || '100%';
-        this.iframeHeight = (this.iframeHeight && CoreDomUtils.formatPixelsSize(this.iframeHeight)) || '100%';
-        this.allowFullscreen = CoreUtils.isTrueOrOne(this.allowFullscreen);
-        this.showFullscreenOnToolbar = CoreUtils.isTrueOrOne(this.showFullscreenOnToolbar);
-        this.autoFullscreenOnRotate = CoreUtils.isTrueOrOne(this.autoFullscreenOnRotate);
-
         if (this.showFullscreenOnToolbar || this.autoFullscreenOnRotate) {
             // Leave fullscreen when navigating.
             this.navSubscription = Router.events
@@ -157,6 +151,22 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
      * Detect changes on input properties.
      */
     async ngOnChanges(changes: {[name: string]: SimpleChange }): Promise<void> {
+        if (changes.iframeWidth) {
+            this.iframeWidth = (this.iframeWidth && CoreDomUtils.formatPixelsSize(this.iframeWidth)) || '100%';
+        }
+        if (changes.iframeHeight) {
+            this.iframeHeight = (this.iframeHeight && CoreDomUtils.formatPixelsSize(this.iframeHeight)) || '100%';
+        }
+        if (changes.allowFullscreen) {
+            this.allowFullscreen = CoreUtils.isTrueOrOne(this.allowFullscreen);
+        }
+        if (changes.showFullscreenOnToolbar) {
+            this.showFullscreenOnToolbar = CoreUtils.isTrueOrOne(this.showFullscreenOnToolbar);
+        }
+        if (changes.autoFullscreenOnRotate) {
+            this.autoFullscreenOnRotate = CoreUtils.isTrueOrOne(this.autoFullscreenOnRotate);
+        }
+
         if (!changes.src) {
             return;
         }