forked from EVOgeek/Vmeda.Online
292 lines
10 KiB
TypeScript
292 lines
10 KiB
TypeScript
// (C) Copyright 2015 Moodle Pty Ltd.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
import { Component, Input, ElementRef, OnInit, OnDestroy, OnChanges, SimpleChange } from '@angular/core';
|
|
import { CoreAppProvider } from '@providers/app';
|
|
import { CoreEventsProvider } from '@providers/events';
|
|
import { CoreFileProvider } from '@providers/file';
|
|
import { CoreFilepoolProvider } from '@providers/filepool';
|
|
import { CoreLoggerProvider } from '@providers/logger';
|
|
import { CoreSitesProvider } from '@providers/sites';
|
|
import { CoreDomUtilsProvider } from '@providers/utils/dom';
|
|
import { CoreTextUtilsProvider } from '@providers/utils/text';
|
|
import { CoreUrlUtilsProvider } from '@providers/utils/url';
|
|
import { CoreUtilsProvider } from '@providers/utils/utils';
|
|
import { CoreH5PProvider } from '@core/h5p/providers/h5p';
|
|
import { CorePluginFileDelegate } from '@providers/plugin-file-delegate';
|
|
import { CoreFileHelperProvider } from '@providers/file-helper';
|
|
import { CoreConstants } from '@core/constants';
|
|
import { CoreSite } from '@classes/site';
|
|
|
|
/**
|
|
* Component to render an H5P package.
|
|
*/
|
|
@Component({
|
|
selector: 'core-h5p-player',
|
|
templateUrl: 'core-h5p-player.html'
|
|
})
|
|
export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
|
|
@Input() src: string; // The URL of the player to display the H5P package.
|
|
@Input() component?: string; // Component.
|
|
@Input() componentId?: string | number; // Component ID to use in conjunction with the component.
|
|
|
|
playerSrc: string;
|
|
showPackage = false;
|
|
loading = false;
|
|
state: string;
|
|
canDownload: boolean;
|
|
calculating = true;
|
|
|
|
protected site: CoreSite;
|
|
protected siteId: string;
|
|
protected siteCanDownload: boolean;
|
|
protected observer;
|
|
protected urlParams;
|
|
protected logger;
|
|
|
|
constructor(loggerProvider: CoreLoggerProvider,
|
|
public elementRef: ElementRef,
|
|
protected sitesProvider: CoreSitesProvider,
|
|
protected urlUtils: CoreUrlUtilsProvider,
|
|
protected utils: CoreUtilsProvider,
|
|
protected textUtils: CoreTextUtilsProvider,
|
|
protected h5pProvider: CoreH5PProvider,
|
|
protected filepoolProvider: CoreFilepoolProvider,
|
|
protected eventsProvider: CoreEventsProvider,
|
|
protected appProvider: CoreAppProvider,
|
|
protected domUtils: CoreDomUtilsProvider,
|
|
protected pluginFileDelegate: CorePluginFileDelegate,
|
|
protected fileProvider: CoreFileProvider,
|
|
protected fileHelper: CoreFileHelperProvider) {
|
|
|
|
this.logger = loggerProvider.getInstance('CoreH5PPlayerComponent');
|
|
this.site = sitesProvider.getCurrentSite();
|
|
this.siteId = this.site.getId();
|
|
this.siteCanDownload = this.sitesProvider.getCurrentSite().canDownloadFiles();
|
|
}
|
|
|
|
/**
|
|
* Component being initialized.
|
|
*/
|
|
ngOnInit(): void {
|
|
this.checkCanDownload();
|
|
}
|
|
|
|
/**
|
|
* Detect changes on input properties.
|
|
*/
|
|
ngOnChanges(changes: {[name: string]: SimpleChange}): void {
|
|
// If it's already playing there's no need to check if it can be downloaded.
|
|
if (changes.src && !this.showPackage) {
|
|
this.checkCanDownload();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Play the H5P.
|
|
*
|
|
* @param e Event.
|
|
*/
|
|
play(e: MouseEvent): void {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
this.loading = true;
|
|
|
|
let promise;
|
|
|
|
if (this.canDownload && this.fileHelper.isStateDownloaded(this.state)) {
|
|
// Package is downloaded, use the local URL.
|
|
promise = this.h5pProvider.getContentIndexFileUrl(this.urlParams.url, this.urlParams, this.siteId).catch(() => {
|
|
|
|
// Index file doesn't exist, probably deleted because a lib was updated. Try to create it again.
|
|
return this.filepoolProvider.getInternalUrlByUrl(this.siteId, this.urlParams.url).then((path) => {
|
|
return this.fileProvider.getFile(path);
|
|
}).then((file) => {
|
|
return this.h5pProvider.extractH5PFile(this.urlParams.url, file, this.siteId);
|
|
}).then(() => {
|
|
// File treated. Try to get the index file URL again.
|
|
return this.h5pProvider.getContentIndexFileUrl(this.urlParams.url, this.urlParams, this.siteId);
|
|
});
|
|
}).catch((error) => {
|
|
// Still failing. Delete the H5P package?
|
|
this.logger.error('Error loading downloaded index:', error, this.src);
|
|
});
|
|
} else {
|
|
promise = Promise.resolve();
|
|
}
|
|
|
|
promise.then((url) => {
|
|
if (url) {
|
|
// Local package.
|
|
this.playerSrc = url;
|
|
} else {
|
|
// Never allow downloading in the app. This will only work if the user is allowed to change the params.
|
|
const src = this.src && this.src.replace(CoreH5PProvider.DISPLAY_OPTION_DOWNLOAD + '=1',
|
|
CoreH5PProvider.DISPLAY_OPTION_DOWNLOAD + '=0');
|
|
|
|
// Get auto-login URL so the user is automatically authenticated.
|
|
return this.sitesProvider.getCurrentSite().getAutoLoginUrl(src, false).then((url) => {
|
|
// Add the preventredirect param so the user can authenticate.
|
|
this.playerSrc = this.urlUtils.addParamsToUrl(url, {preventredirect: false});
|
|
});
|
|
}
|
|
}).finally(() => {
|
|
this.addResizerScript();
|
|
this.loading = false;
|
|
this.showPackage = true;
|
|
|
|
if (this.canDownload && (this.state == CoreConstants.OUTDATED || this.state == CoreConstants.NOT_DOWNLOADED)) {
|
|
// Download the package in background if the size is low.
|
|
this.attemptDownloadInBg().catch((error) => {
|
|
this.logger.error('Error downloading H5P in background', error);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Download the package.
|
|
*/
|
|
download(e: Event): void {
|
|
e && e.preventDefault();
|
|
e && e.stopPropagation();
|
|
|
|
if (!this.appProvider.isOnline()) {
|
|
this.domUtils.showErrorModal('core.networkerrormsg', true);
|
|
|
|
return;
|
|
}
|
|
|
|
// Get the file size and ask the user to confirm.
|
|
this.pluginFileDelegate.getFileSize({fileurl: this.urlParams.url}, this.siteId).then((size) => {
|
|
return this.domUtils.confirmDownloadSize({ size: size, total: true }).then(() => {
|
|
|
|
// User confirmed, add to the queue.
|
|
return this.filepoolProvider.addToQueueByUrl(this.siteId, this.urlParams.url, this.component, this.componentId);
|
|
}, () => {
|
|
// User cancelled.
|
|
});
|
|
}).catch((error) => {
|
|
this.domUtils.showErrorModalDefault(error, 'core.errordownloading', true);
|
|
this.calculateState();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Download the H5P in background if the size is low.
|
|
*
|
|
* @return Promise resolved when done.
|
|
*/
|
|
protected attemptDownloadInBg(): Promise<any> {
|
|
if (this.urlParams && this.src && this.siteCanDownload && this.h5pProvider.canGetTrustedH5PFileInSite() &&
|
|
this.appProvider.isOnline()) {
|
|
|
|
// Get the file size.
|
|
return this.pluginFileDelegate.getFileSize({fileurl: this.urlParams.url}, this.siteId).then((size) => {
|
|
|
|
if (this.filepoolProvider.shouldDownload(size)) {
|
|
// Download the file in background.
|
|
this.filepoolProvider.addToQueueByUrl(this.siteId, this.urlParams.url, this.component, this.componentId);
|
|
}
|
|
});
|
|
}
|
|
|
|
return Promise.resolve();
|
|
}
|
|
|
|
/**
|
|
* Add the resizer script if it hasn't been added already.
|
|
*/
|
|
protected addResizerScript(): void {
|
|
if (document.head.querySelector('#core-h5p-resizer-script') != null) {
|
|
// Script already added, don't add it again.
|
|
return;
|
|
}
|
|
|
|
const script = document.createElement('script');
|
|
script.id = 'core-h5p-resizer-script';
|
|
script.type = 'text/javascript';
|
|
script.src = this.h5pProvider.getResizerScriptUrl();
|
|
document.head.appendChild(script);
|
|
}
|
|
|
|
/**
|
|
* Check if the package can be downloaded.
|
|
*/
|
|
protected checkCanDownload(): void {
|
|
this.observer && this.observer.off();
|
|
this.urlParams = this.urlUtils.extractUrlParams(this.src);
|
|
|
|
if (this.src && this.siteCanDownload && this.h5pProvider.canGetTrustedH5PFileInSite() && this.site.containsUrl(this.src)) {
|
|
|
|
this.calculateState();
|
|
|
|
// Listen for changes in the state.
|
|
this.filepoolProvider.getFileEventNameByUrl(this.siteId, this.urlParams.url).then((eventName) => {
|
|
this.observer = this.eventsProvider.on(eventName, () => {
|
|
this.calculateState();
|
|
});
|
|
}).catch(() => {
|
|
// An error probably means the file cannot be downloaded or we cannot check it (offline).
|
|
});
|
|
|
|
} else {
|
|
this.calculating = false;
|
|
this.canDownload = false;
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Calculate state of the file.
|
|
*
|
|
* @param fileUrl The H5P file URL.
|
|
*/
|
|
protected calculateState(): void {
|
|
this.calculating = true;
|
|
|
|
// Get the status of the file.
|
|
this.filepoolProvider.getFileStateByUrl(this.siteId, this.urlParams.url).then((state) => {
|
|
this.canDownload = true;
|
|
this.state = state;
|
|
}).catch((error) => {
|
|
this.canDownload = false;
|
|
}).finally(() => {
|
|
this.calculating = false;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Send hello to the H5P iframe.
|
|
*
|
|
* @param iframe The iframe.
|
|
*/
|
|
sendHello(iframe?: HTMLIFrameElement): void {
|
|
const ready = {
|
|
context: 'h5p',
|
|
action: 'ready'
|
|
};
|
|
|
|
iframe.contentWindow.postMessage(ready, '*');
|
|
}
|
|
|
|
/**
|
|
* Component destroyed.
|
|
*/
|
|
ngOnDestroy(): void {
|
|
this.observer && this.observer.off();
|
|
}
|
|
}
|