Merge pull request #3104 from dpalou/MOBILE-3823

MOBILE-3823 fullscreen: Add fullscreen button in H5P and IMSCP

src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html

@@ -81,7 +81,7 @@
     </ion-list>
 
     <core-h5p-iframe *ngIf="playing" [fileUrl]="fileUrl" [displayOptions]="displayOptions" [onlinePlayerUrl]="onlinePlayerUrl"
-        [trackComponent]="trackComponent" [contextId]="h5pActivity?.context">
+        [trackComponent]="trackComponent" [contextId]="h5pActivity?.context" [enableInAppFullscreen]="true">
     </core-h5p-iframe>
 </core-loading>
 

src/addons/mod/imscp/components/index/addon-mod-imscp-index.html

@@ -42,7 +42,7 @@
     <div class="addon-mod-imscp-container">
         <core-navigation-bar [items]="navigationItems" (action)="loadItem($event)">
         </core-navigation-bar>
-        <core-iframe [src]="src"></core-iframe>
+        <core-iframe *ngIf="loaded" [src]="src" [showFullscreenOnToolbar]="true" [autoFullscreenOnRotate]="true"></core-iframe>
     </div>
 </core-loading>
 

src/core/components/iframe/iframe.ts

@@ -22,9 +22,12 @@ import { CoreDomUtils } from '@services/utils/dom';
 import { CoreUrlUtils } from '@services/utils/url';
 import { CoreIframeUtils } from '@services/utils/iframe';
 import { CoreUtils } from '@services/utils/utils';
-import { DomSanitizer, StatusBar } from '@singletons';
+import { DomSanitizer, Router, StatusBar } from '@singletons';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { CoreScreen, CoreScreenOrientation } from '@services/screen';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { NavigationStart } from '@angular/router';
 
 @Component({
     selector: 'core-iframe',
@@ -53,6 +56,7 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
 
     protected style?: HTMLStyleElement;
     protected orientationObs?: CoreEventObserver;
+    protected navSubscription?: Subscription;
 
     constructor() {
         this.loaded = new EventEmitter<HTMLIFrameElement>();
@@ -80,6 +84,15 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
         this.autoFullscreenOnRotate = CoreUtils.isTrueOrOne(this.autoFullscreenOnRotate);
 
         if (this.showFullscreenOnToolbar || this.autoFullscreenOnRotate) {
+            // Leave fullscreen when navigating.
+            this.navSubscription = Router.events
+                .pipe(filter(event => event instanceof NavigationStart))
+                .subscribe(async () => {
+                    if (this.fullscreen) {
+                        this.toggleFullscreen(false);
+                    }
+                });
+
             const shadow =
                 iframe.closest('.ion-page')?.querySelector('ion-header ion-toolbar')?.shadowRoot;
             if (shadow) {
@@ -148,8 +161,8 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
      * @inheritdoc
      */
     ngOnDestroy(): void {
-        this.toggleFullscreen(false);
         this.orientationObs?.off();
+        this.navSubscription?.unsubscribe();
     }
 
     /**

src/core/features/course/components/module-info/course-module-info.scss

@@ -27,3 +27,8 @@
     }
 
 }
+
+:host-context(.core-iframe-fullscreen) {
+    opacity: 0 !important;
+    height: 0 !important;
+}

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

@@ -1,5 +1,6 @@
 <core-loading [hideUntil]="iframeSrc" [fullscreen]="false" class="safe-area-padding">
-    <core-iframe *ngIf="iframeSrc" [src]="iframeSrc" iframeHeight="auto" [allowFullscreen]="true" (loaded)="iframeLoaded()">
+    <core-iframe *ngIf="iframeSrc" [src]="iframeSrc" iframeHeight="auto" [allowFullscreen]="true" (loaded)="iframeLoaded()"
+        [showFullscreenOnToolbar]="enableInAppFullscreen" [autoFullscreenOnRotate]="enableInAppFullscreen">
     </core-iframe>
     <script *ngIf="resizeScript && iframeSrc" type="text/javascript" [src]="resizeScript"></script>
 </core-loading>

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

@@ -44,6 +44,7 @@ export class CoreH5PIframeComponent implements OnChanges, OnDestroy {
     @Input() onlinePlayerUrl?: string; // The URL of the online player to display the H5P package.
     @Input() trackComponent?: string; // Component to send xAPI events to.
     @Input() contextId?: number; // Context ID. Required for tracking.
+    @Input() enableInAppFullscreen?: boolean; // Whether to enable our custom in-app fullscreen feature.
     @Output() onIframeUrlSet = new EventEmitter<{src: string; online: boolean}>();
     @Output() onIframeLoaded = new EventEmitter<void>();
 

src/theme/theme.base.scss

@@ -1427,17 +1427,18 @@ ion-header[collapsible] {
     ion-title {
         @include core-transition(opacity, 0ms);
     }
+}
 
-    &:not(.core-header-collapsed) {
+// Only hide header when not in fullscreen.
-        ion-toolbar {
+body:not(.core-iframe-fullscreen) ion-header[collapsible]:not(.core-header-collapsed) {
-            --core-header-toolbar-background: rgba(255, 255, 255, 0);
+    ion-toolbar {
-            --core-header-toolbar-border-width: 0;
+        --core-header-toolbar-background: rgba(255, 255, 255, 0);
-        }
+        --core-header-toolbar-border-width: 0;
+    }
 
-        ion-title, &::after {
+    ion-title, &::after {
-            opacity: 0;
+        opacity: 0;
-            z-index: 0;
+        z-index: 0;
-        }
     }
 }
 
@@ -1498,3 +1499,8 @@ ion-app.md .collapsible-title h1 {
         text-overflow: ellipsis;
     }
 }
+
+// In fullscreen, disable the offset-top added by collapsible header.
+body.core-iframe-fullscreen ion-content {
+    --offset-top: 0px !important;
+}