MOBILE-3213 h5p: Support fullscreen in H5P iframe

config.xml

@@ -79,18 +79,11 @@
         <icon background="@color/background" density="xhdpi" foreground="resources/android/icon/xhdpi-foreground.png" src="resources/android/icon/drawable-xhdpi-icon.png" />
         <icon background="@color/background" density="xxhdpi" foreground="resources/android/icon/xxhdpi-foreground.png" src="resources/android/icon/drawable-xxhdpi-icon.png" />
         <icon background="@color/background" density="xxxhdpi" foreground="resources/android/icon/xxxhdpi-foreground.png" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
-
-        <!--
-            This should be added by the file-opener2 plugin, but it's not working at the moment. This can be removed
-            once the following issue is resolved and the plugin is updated to include the fix:
-            https://github.com/pwlin/cordova-plugin-file-opener2/issues/246
-        -->
         <config-file parent="/manifest/application" target="AndroidManifest.xml">
             <provider android:authorities="${applicationId}.opener.provider" android:exported="false" android:grantUriPermissions="true" android:name="io.github.pwlin.cordova.plugins.fileopener2.FileProvider">
                 <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/opener_paths" />
             </provider>
         </config-file>
-
     </platform>
     <platform name="ios">
         <resource-file src="GoogleService-Info.plist" />

src/components/iframe/core-iframe.html

@@ -1,5 +1,5 @@
 <div [class.core-loading-container]="loading" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}">
-    <iframe #iframe [hidden]="loading" class="core-iframe" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"></iframe>
+    <iframe #iframe [hidden]="loading" class="core-iframe" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl" [attr.allowfullscreen]="allowFullscreen ? 'allowfullscreen' : null"></iframe>
     <span class="core-loading-spinner">
         <ion-spinner *ngIf="loading"></ion-spinner>
     </span>

src/components/iframe/iframe.ts

@@ -21,6 +21,7 @@ import { CoreLoggerProvider } from '@providers/logger';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreUrlUtilsProvider } from '@providers/utils/url';
 import { CoreIframeUtilsProvider } from '@providers/utils/iframe';
+import { CoreUtilsProvider } from '@providers/utils/utils';
 import { CoreSplitViewComponent } from '@components/split-view/split-view';
 
 @Component({
@@ -33,6 +34,7 @@ export class CoreIframeComponent implements OnInit, OnChanges {
     @Input() src: string;
     @Input() iframeWidth: string;
     @Input() iframeHeight: string;
+    @Input() allowFullscreen: boolean | string;
     @Output() loaded?: EventEmitter<HTMLIFrameElement> = new EventEmitter<HTMLIFrameElement>();
     loading: boolean;
     safeUrl: SafeResourceUrl;
@@ -46,6 +48,7 @@ export class CoreIframeComponent implements OnInit, OnChanges {
             protected sanitizer: DomSanitizer,
             protected navCtrl: NavController,
             protected urlUtils: CoreUrlUtilsProvider,
+            protected utils: CoreUtilsProvider,
             @Optional() protected svComponent: CoreSplitViewComponent) {
 
         this.logger = logger.getInstance('CoreIframe');
@@ -60,6 +63,7 @@ export class CoreIframeComponent implements OnInit, OnChanges {
 
         this.iframeWidth = this.domUtils.formatPixelsSize(this.iframeWidth) || '100%';
         this.iframeHeight = this.domUtils.formatPixelsSize(this.iframeHeight) || '100%';
+        this.allowFullscreen = this.utils.isTrueOrOne(this.allowFullscreen);
 
         // Show loading only with external URLs.
         this.loading = !this.src || !!this.src.match(/^https?:\/\//i);

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

@@ -9,5 +9,5 @@
         <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="calculating" [canTrustDownload]="true" (action)="download()"></core-download-refresh>
     </div>
 </div>
-<core-iframe *ngIf="showPackage" [src]="playerSrc" iframeHeight="auto" (loaded)="sendHello($event)"></core-iframe>
+<core-iframe *ngIf="showPackage" [src]="playerSrc" iframeHeight="auto" [allowFullscreen]="true" (loaded)="sendHello($event)"></core-iframe>
 <script *ngIf="resizeScript && showPackage" type="text/javascript" [src]="resizeScript"></script>

src/core/h5p/components/h5p-player/h5p-player.scss

@@ -10,7 +10,7 @@ ion-app.app-root core-h5p-player {
         background: url('../assets/img/icons/h5p.svg') center top 25px / 100px auto no-repeat $core-h5p-placeholder-bg-color;
         color: $core-h5p-placeholder-text-color;
 
-        .icon {
+        .icon:not([color="success"]) {
             color: $core-h5p-placeholder-text-color;
         }