MOBILE-3823 fullscreen: Add fullscreen button in H5P and IMSCP
parent
f965fcc94d
commit
2943d42678
|
@ -81,7 +81,7 @@
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
|
||||||
<core-h5p-iframe *ngIf="playing" [fileUrl]="fileUrl" [displayOptions]="displayOptions" [onlinePlayerUrl]="onlinePlayerUrl"
|
<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-h5p-iframe>
|
||||||
</core-loading>
|
</core-loading>
|
||||||
|
|
||||||
|
|
|
@ -42,7 +42,7 @@
|
||||||
<div class="addon-mod-imscp-container">
|
<div class="addon-mod-imscp-container">
|
||||||
<core-navigation-bar [items]="navigationItems" (action)="loadItem($event)">
|
<core-navigation-bar [items]="navigationItems" (action)="loadItem($event)">
|
||||||
</core-navigation-bar>
|
</core-navigation-bar>
|
||||||
<core-iframe [src]="src"></core-iframe>
|
<core-iframe *ngIf="loaded" [src]="src" [showFullscreenOnToolbar]="true" [autoFullscreenOnRotate]="true"></core-iframe>
|
||||||
</div>
|
</div>
|
||||||
</core-loading>
|
</core-loading>
|
||||||
|
|
||||||
|
|
|
@ -22,3 +22,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host-context(.core-iframe-fullscreen) {
|
||||||
|
opacity: 0 !important;
|
||||||
|
height: 0 !important;
|
||||||
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<core-loading [hideUntil]="iframeSrc" [fullscreen]="false" class="safe-area-padding">
|
<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>
|
</core-iframe>
|
||||||
<script *ngIf="resizeScript && iframeSrc" type="text/javascript" [src]="resizeScript"></script>
|
<script *ngIf="resizeScript && iframeSrc" type="text/javascript" [src]="resizeScript"></script>
|
||||||
</core-loading>
|
</core-loading>
|
||||||
|
|
|
@ -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() onlinePlayerUrl?: string; // The URL of the online player to display the H5P package.
|
||||||
@Input() trackComponent?: string; // Component to send xAPI events to.
|
@Input() trackComponent?: string; // Component to send xAPI events to.
|
||||||
@Input() contextId?: number; // Context ID. Required for tracking.
|
@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() onIframeUrlSet = new EventEmitter<{src: string; online: boolean}>();
|
||||||
@Output() onIframeLoaded = new EventEmitter<void>();
|
@Output() onIframeLoaded = new EventEmitter<void>();
|
||||||
|
|
||||||
|
|
|
@ -1279,8 +1279,10 @@ ion-header[collapsible] {
|
||||||
ion-title {
|
ion-title {
|
||||||
@include core-transition(opacity, 0ms);
|
@include core-transition(opacity, 0ms);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:not(.core-header-collapsed) {
|
// Only hide header when not in fullscreen.
|
||||||
|
body:not(.core-iframe-fullscreen) ion-header[collapsible]:not(.core-header-collapsed) {
|
||||||
ion-toolbar {
|
ion-toolbar {
|
||||||
--core-header-toolbar-background: rgba(255, 255, 255, 0);
|
--core-header-toolbar-background: rgba(255, 255, 255, 0);
|
||||||
--core-header-toolbar-border-width: 0;
|
--core-header-toolbar-border-width: 0;
|
||||||
|
@ -1290,7 +1292,6 @@ ion-header[collapsible] {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsible-title {
|
.collapsible-title {
|
||||||
|
@ -1350,3 +1351,8 @@ ion-app.md .collapsible-title h1 {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// In fullscreen, disable the offset-top added by collapsible header.
|
||||||
|
body.core-iframe-fullscreen ion-content {
|
||||||
|
--offset-top: 0px !important;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue