diff --git a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
index 26790f9c0..3d51c3406 100644
--- a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
+++ b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
@@ -81,7 +81,7 @@
+ [trackComponent]="trackComponent" [contextId]="h5pActivity?.context" [enableInAppFullscreen]="true">
diff --git a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
index 4a92470fb..7a7a036c2 100644
--- a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
+++ b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
@@ -42,7 +42,7 @@
-
+
diff --git a/src/core/components/iframe/iframe.ts b/src/core/components/iframe/iframe.ts
index bf57b1443..b80264904 100644
--- a/src/core/components/iframe/iframe.ts
+++ b/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();
@@ -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();
}
/**
diff --git a/src/core/features/course/components/module-info/course-module-info.scss b/src/core/features/course/components/module-info/course-module-info.scss
index 98f6c87d4..46d6c970c 100644
--- a/src/core/features/course/components/module-info/course-module-info.scss
+++ b/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;
+}
diff --git a/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html b/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
index 52020bec3..c60f30592 100644
--- a/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
+++ b/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
@@ -1,5 +1,6 @@
-
+
diff --git a/src/core/features/h5p/components/h5p-iframe/h5p-iframe.ts b/src/core/features/h5p/components/h5p-iframe/h5p-iframe.ts
index 1af3f74d2..9c5d39396 100644
--- a/src/core/features/h5p/components/h5p-iframe/h5p-iframe.ts
+++ b/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();
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index eedc3f535..6a48add42 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1427,17 +1427,18 @@ ion-header[collapsible] {
ion-title {
@include core-transition(opacity, 0ms);
}
+}
- &:not(.core-header-collapsed) {
- ion-toolbar {
- --core-header-toolbar-background: rgba(255, 255, 255, 0);
- --core-header-toolbar-border-width: 0;
- }
+// Only hide header when not in fullscreen.
+body:not(.core-iframe-fullscreen) ion-header[collapsible]:not(.core-header-collapsed) {
+ ion-toolbar {
+ --core-header-toolbar-background: rgba(255, 255, 255, 0);
+ --core-header-toolbar-border-width: 0;
+ }
- ion-title, &::after {
- opacity: 0;
- z-index: 0;
- }
+ ion-title, &::after {
+ opacity: 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;
+}