EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3213 h5p: Support fullscreen in H5P iframe

main
Dani Palou 2019-12-10 16:20:06 +01:00
parent 49d33fb9e4
commit b427c8a52a
5 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
config.xml
View File

@ -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" />

2
src/components/iframe/core-iframe.html
View File

@ -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>

4
src/components/iframe/iframe.ts
View File

@ -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);

2
src/core/h5p/components/h5p-player/core-h5p-player.html
View File

@ -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>

2
src/core/h5p/components/h5p-player/h5p-player.scss
View File

@ -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;
}