Merge pull request #2614 from dpalou/MOBILE-3598

MOBILE-3598 h5p: Fix package disappear when opening new pages
main
Juan Leyva 2020-11-23 13:18:03 +01:00 committed by GitHub
commit 8db9ad03e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 4 deletions

View File

@ -12,7 +12,8 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import { Component, Input, Output, ElementRef, OnChanges, SimpleChange, EventEmitter } from '@angular/core'; import { Component, Input, Output, ElementRef, OnChanges, SimpleChange, EventEmitter, OnDestroy } from '@angular/core';
import { NavController } from 'ionic-angular';
import { CoreFile } from '@providers/file'; import { CoreFile } from '@providers/file';
import { CoreFilepool } from '@providers/filepool'; import { CoreFilepool } from '@providers/filepool';
import { CoreLogger } from '@providers/logger'; import { CoreLogger } from '@providers/logger';
@ -26,6 +27,7 @@ import { CoreConstants } from '@core/constants';
import { CoreSite } from '@classes/site'; import { CoreSite } from '@classes/site';
import { CoreH5PCore, CoreH5PDisplayOptions } from '../../classes/core'; import { CoreH5PCore, CoreH5PDisplayOptions } from '../../classes/core';
import { CoreH5PHelper } from '../../classes/helper'; import { CoreH5PHelper } from '../../classes/helper';
import { Subscription } from 'rxjs';
/** /**
* Component to render an iframe with an H5P package. * Component to render an iframe with an H5P package.
@ -34,7 +36,7 @@ import { CoreH5PHelper } from '../../classes/helper';
selector: 'core-h5p-iframe', selector: 'core-h5p-iframe',
templateUrl: 'core-h5p-iframe.html', templateUrl: 'core-h5p-iframe.html',
}) })
export class CoreH5PIframeComponent implements OnChanges { export class CoreH5PIframeComponent implements OnChanges, OnDestroy {
@Input() fileUrl?: string; // The URL of the H5P file. If not supplied, onlinePlayerUrl is required. @Input() fileUrl?: string; // The URL of the H5P file. If not supplied, onlinePlayerUrl is required.
@Input() displayOptions?: CoreH5PDisplayOptions; // Display options. @Input() displayOptions?: CoreH5PDisplayOptions; // Display options.
@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.
@ -49,14 +51,30 @@ export class CoreH5PIframeComponent implements OnChanges {
protected siteId: string; protected siteId: string;
protected siteCanDownload: boolean; protected siteCanDownload: boolean;
protected logger; protected logger;
protected currentPageInstance: any;
protected subscription: Subscription;
protected iframeLoadedOnce = false;
constructor(public elementRef: ElementRef, constructor(
protected pluginFileDelegate: CorePluginFileDelegate) { public elementRef: ElementRef,
protected pluginFileDelegate: CorePluginFileDelegate,
protected navCtrl: NavController,
) {
this.logger = CoreLogger.instance.getInstance('CoreH5PIframeComponent'); this.logger = CoreLogger.instance.getInstance('CoreH5PIframeComponent');
this.site = CoreSites.instance.getCurrentSite(); this.site = CoreSites.instance.getCurrentSite();
this.siteId = this.site.getId(); this.siteId = this.site.getId();
this.siteCanDownload = this.site.canDownloadFiles() && !CoreH5P.instance.isOfflineDisabledInSite(); this.siteCanDownload = this.site.canDownloadFiles() && !CoreH5P.instance.isOfflineDisabledInSite();
// Send resize events when the page holding this component is re-entered.
this.currentPageInstance = this.navCtrl.getActive().instance;
this.subscription = this.navCtrl.viewDidEnter.subscribe((viewCtrl) => {
if (!this.iframeLoadedOnce || viewCtrl.instance !== this.currentPageInstance) {
return;
}
window.dispatchEvent(new Event('resize'));
});
} }
/** /**
@ -169,8 +187,16 @@ export class CoreH5PIframeComponent implements OnChanges {
*/ */
iframeLoaded(): void { iframeLoaded(): void {
this.onIframeLoaded.emit(); this.onIframeLoaded.emit();
this.iframeLoadedOnce = true;
// Send a resize event to the window so H5P package recalculates the size. // Send a resize event to the window so H5P package recalculates the size.
window.dispatchEvent(new Event('resize')); window.dispatchEvent(new Event('resize'));
} }
/**
* Component being destroyed.
*/
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
} }