@hmcts/media-viewer
Version:
59 lines • 13.3 kB
JavaScript
import { Component, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { ResponseType } from '../viewer-exception.model';
import * as i0 from "@angular/core";
import * as i1 from "../../toolbar/toolbar-event.service";
import * as i2 from "@angular/common";
import * as i3 from "rpx-xui-translation";
export class MultimediaPlayerComponent {
constructor(toolbarEvents) {
this.toolbarEvents = toolbarEvents;
this.loadStatus = new EventEmitter();
this.playbackMsg = 'loading';
}
ngOnInit() {
this.subscription = this.toolbarEvents.downloadSubject
.subscribe(() => this.downloadLink.nativeElement.click());
this.loadStatus.emit(ResponseType.SUCCESS);
}
ngOnChanges(changes) {
if (changes.url) {
this.reloadVideo();
}
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
reloadVideo() {
if (this.videoPlayer) {
this.playbackMsg = 'loading';
this.videoPlayer.nativeElement.load();
}
}
onSuccess() {
this.playbackMsg = 'success';
}
onError() {
this.playbackMsg = 'error';
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultimediaPlayerComponent, deps: [{ token: i1.ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultimediaPlayerComponent, selector: "mv-multimedia-player", inputs: { url: "url", downloadFileName: "downloadFileName", multimediaOn: "multimediaOn" }, outputs: { loadStatus: "loadStatus" }, viewQueries: [{ propertyName: "downloadLink", first: true, predicate: ["downloadLink"], descendants: true }, { propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"govuk-width-container\">\n <div class=\"govuk-notification-banner__content\">\n <p>\n <span *ngIf=\"multimediaOn && playbackMsg === 'loading'\">{{\n \"Loading multimedia content ...\" | rpxTranslate\n }}</span>\n <span *ngIf=\"!multimediaOn\"\n >{{ \"Multimedia playback is not enabled, \" | rpxTranslate }}\n </span>\n <span *ngIf=\"multimediaOn && playbackMsg === 'success'\"\n >{{ \"Use the player to play to the file or\" | rpxTranslate }}\n </span>\n <span *ngIf=\"multimediaOn && playbackMsg === 'error'\"\n >{{ \"Mime type not supported.\" | rpxTranslate }}\n </span>\n <a\n *ngIf=\"!multimediaOn || playbackMsg !== 'loading'\"\n #downloadLink\n [href]=\"url\"\n [download]=\"downloadFileName\"\n >{{ \"Click here to download\" | rpxTranslate }}</a\n >\n </p>\n <video\n #videoPlayer\n *ngIf=\"multimediaOn\"\n width=\"100%\"\n height=\"100%\"\n preload=\"auto\"\n (canplay)=\"onSuccess()\"\n controls\n >\n <source (error)=\"onError()\" [src]=\"url\" type=\"video/mp4\" />\n <source\n (error)=\"onError()\"\n [src]=\"url\"\n type=\"video/mp4; codecs='avc1, av01, hvc1, hev1, mp4v, mp4a.40.2, opus'\"\n />\n <source (error)=\"onError()\" [src]=\"url\" type=\"video/ogg\" />\n <source\n (error)=\"onError()\"\n [src]=\"url\"\n type=\"video/ogg; codecs='theora, vp8, vp9, flac, opus, vorbis'\"\n />\n <source (error)=\"onError()\" [src]=\"url\" type=\"video/webm\" />\n <source\n (error)=\"onError()\"\n [src]=\"url\"\n type=\"video/webm; codecs='vp8, vp9, vorbis, opus'\"\n />\n </video>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.RpxTranslatePipe, name: "rpxTranslate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultimediaPlayerComponent, decorators: [{
type: Component,
args: [{ selector: 'mv-multimedia-player', template: "<div class=\"govuk-width-container\">\n <div class=\"govuk-notification-banner__content\">\n <p>\n <span *ngIf=\"multimediaOn && playbackMsg === 'loading'\">{{\n \"Loading multimedia content ...\" | rpxTranslate\n }}</span>\n <span *ngIf=\"!multimediaOn\"\n >{{ \"Multimedia playback is not enabled, \" | rpxTranslate }}\n </span>\n <span *ngIf=\"multimediaOn && playbackMsg === 'success'\"\n >{{ \"Use the player to play to the file or\" | rpxTranslate }}\n </span>\n <span *ngIf=\"multimediaOn && playbackMsg === 'error'\"\n >{{ \"Mime type not supported.\" | rpxTranslate }}\n </span>\n <a\n *ngIf=\"!multimediaOn || playbackMsg !== 'loading'\"\n #downloadLink\n [href]=\"url\"\n [download]=\"downloadFileName\"\n >{{ \"Click here to download\" | rpxTranslate }}</a\n >\n </p>\n <video\n #videoPlayer\n *ngIf=\"multimediaOn\"\n width=\"100%\"\n height=\"100%\"\n preload=\"auto\"\n (canplay)=\"onSuccess()\"\n controls\n >\n <source (error)=\"onError()\" [src]=\"url\" type=\"video/mp4\" />\n <source\n (error)=\"onError()\"\n [src]=\"url\"\n type=\"video/mp4; codecs='avc1, av01, hvc1, hev1, mp4v, mp4a.40.2, opus'\"\n />\n <source (error)=\"onError()\" [src]=\"url\" type=\"video/ogg\" />\n <source\n (error)=\"onError()\"\n [src]=\"url\"\n type=\"video/ogg; codecs='theora, vp8, vp9, flac, opus, vorbis'\"\n />\n <source (error)=\"onError()\" [src]=\"url\" type=\"video/webm\" />\n <source\n (error)=\"onError()\"\n [src]=\"url\"\n type=\"video/webm; codecs='vp8, vp9, vorbis, opus'\"\n />\n </video>\n </div>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1.ToolbarEventService }], propDecorators: { url: [{
type: Input
}], downloadFileName: [{
type: Input
}], multimediaOn: [{
type: Input
}], loadStatus: [{
type: Output
}], downloadLink: [{
type: ViewChild,
args: ['downloadLink', { static: false }]
}], videoPlayer: [{
type: ViewChild,
args: ['videoPlayer', { static: false }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXVsdGltZWRpYS1wbGF5ZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWVkaWEtdmlld2VyL3NyYy9saWIvdmlld2Vycy9tdWx0aW1lZGlhLXBsYXllci9tdWx0aW1lZGlhLXBsYXllci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tZWRpYS12aWV3ZXIvc3JjL2xpYi92aWV3ZXJzL211bHRpbWVkaWEtcGxheWVyL211bHRpbWVkaWEtcGxheWVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBRVQsS0FBSyxFQUVMLFNBQVMsRUFFVCxNQUFNLEVBQ04sWUFBWSxFQUdiLE1BQU0sZUFBZSxDQUFDO0FBR3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQzs7Ozs7QUFNekQsTUFBTSxPQUFPLHlCQUF5QjtJQWVwQyxZQUNrQixhQUFrQztRQUFsQyxrQkFBYSxHQUFiLGFBQWEsQ0FBcUI7UUFWMUMsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFnQixDQUFDO1FBS3hELGdCQUFXLEdBQUcsU0FBUyxDQUFDO0lBTXJCLENBQUM7SUFFRyxRQUFRO1FBQ2IsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLGVBQWU7YUFDbkQsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDNUQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFFTSxXQUFXLENBQUMsT0FBc0I7UUFDdkMsSUFBSSxPQUFPLENBQUMsR0FBRyxFQUFFLENBQUM7WUFDaEIsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3JCLENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDbEMsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUNyQixJQUFJLENBQUMsV0FBVyxHQUFHLFNBQVMsQ0FBQztZQUM3QixJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN4QyxDQUFDO0lBQ0gsQ0FBQztJQUVELFNBQVM7UUFDUCxJQUFJLENBQUMsV0FBVyxHQUFHLFNBQVMsQ0FBQztJQUMvQixDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxXQUFXLEdBQUcsT0FBTyxDQUFDO0lBQzdCLENBQUM7a0lBaERVLHlCQUF5QjtzSEFBekIseUJBQXlCLCtaQ3BCdEMsd3dEQXFEQTs7NEZEakNhLHlCQUF5QjtrQkFKckMsU0FBUzsrQkFDRSxzQkFBc0I7d0ZBS3ZCLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNO2dCQUVxQyxZQUFZO3NCQUF2RCxTQUFTO3VCQUFDLGNBQWMsRUFBRSxFQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUM7Z0JBQ0MsV0FBVztzQkFBckQsU0FBUzt1QkFBQyxhQUFhLEVBQUUsRUFBQyxNQUFNLEVBQUUsS0FBSyxFQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgT25Jbml0LFxuICBWaWV3Q2hpbGQsXG4gIE9uRGVzdHJveSxcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXIsXG4gIE9uQ2hhbmdlcyxcbiAgU2ltcGxlQ2hhbmdlc1xufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRvb2xiYXJFdmVudFNlcnZpY2UgfSBmcm9tICcuLi8uLi90b29sYmFyL3Rvb2xiYXItZXZlbnQuc2VydmljZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IFJlc3BvbnNlVHlwZSB9IGZyb20gJy4uL3ZpZXdlci1leGNlcHRpb24ubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdtdi1tdWx0aW1lZGlhLXBsYXllcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9tdWx0aW1lZGlhLXBsYXllci5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgTXVsdGltZWRpYVBsYXllckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzLCBPbkRlc3Ryb3kge1xuXG4gIEBJbnB1dCgpIHVybDogc3RyaW5nO1xuICBASW5wdXQoKSBkb3dubG9hZEZpbGVOYW1lOiBzdHJpbmc7XG4gIEBJbnB1dCgpIG11bHRpbWVkaWFPbjogYm9vbGVhbjtcblxuICBAT3V0cHV0KCkgbG9hZFN0YXR1cyA9IG5ldyBFdmVudEVtaXR0ZXI8UmVzcG9uc2VUeXBlPigpO1xuXG4gIEBWaWV3Q2hpbGQoJ2Rvd25sb2FkTGluaycsIHtzdGF0aWM6IGZhbHNlfSkgZG93bmxvYWRMaW5rOiBFbGVtZW50UmVmO1xuICBAVmlld0NoaWxkKCd2aWRlb1BsYXllcicsIHtzdGF0aWM6IGZhbHNlfSkgdmlkZW9QbGF5ZXI6IEVsZW1lbnRSZWY7XG5cbiAgcGxheWJhY2tNc2cgPSAnbG9hZGluZyc7XG5cbiAgcHJpdmF0ZSBzdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwdWJsaWMgcmVhZG9ubHkgdG9vbGJhckV2ZW50czogVG9vbGJhckV2ZW50U2VydmljZSxcbiAgKSB7fVxuXG4gIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnN1YnNjcmlwdGlvbiA9IHRoaXMudG9vbGJhckV2ZW50cy5kb3dubG9hZFN1YmplY3RcbiAgICAgIC5zdWJzY3JpYmUoKCkgPT4gdGhpcy5kb3dubG9hZExpbmsubmF0aXZlRWxlbWVudC5jbGljaygpKTtcbiAgICB0aGlzLmxvYWRTdGF0dXMuZW1pdChSZXNwb25zZVR5cGUuU1VDQ0VTUyk7XG4gIH1cblxuICBwdWJsaWMgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmIChjaGFuZ2VzLnVybCkge1xuICAgICAgdGhpcy5yZWxvYWRWaWRlbygpO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gIH1cblxuICByZWxvYWRWaWRlbygpIHtcbiAgICBpZiAodGhpcy52aWRlb1BsYXllcikge1xuICAgICAgdGhpcy5wbGF5YmFja01zZyA9ICdsb2FkaW5nJztcbiAgICAgIHRoaXMudmlkZW9QbGF5ZXIubmF0aXZlRWxlbWVudC5sb2FkKCk7XG4gICAgfVxuICB9XG5cbiAgb25TdWNjZXNzKCkge1xuICAgIHRoaXMucGxheWJhY2tNc2cgPSAnc3VjY2Vzcyc7XG4gIH1cblxuICBvbkVycm9yKCkge1xuICAgIHRoaXMucGxheWJhY2tNc2cgPSAnZXJyb3InO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZ292dWstd2lkdGgtY29udGFpbmVyXCI+XG4gIDxkaXYgY2xhc3M9XCJnb3Z1ay1ub3RpZmljYXRpb24tYmFubmVyX19jb250ZW50XCI+XG4gICAgPHA+XG4gICAgICA8c3BhbiAqbmdJZj1cIm11bHRpbWVkaWFPbiAmJiBwbGF5YmFja01zZyA9PT0gJ2xvYWRpbmcnXCI+e3tcbiAgICAgICAgXCJMb2FkaW5nIG11bHRpbWVkaWEgY29udGVudCAuLi5cIiB8IHJweFRyYW5zbGF0ZVxuICAgICAgfX08L3NwYW4+XG4gICAgICA8c3BhbiAqbmdJZj1cIiFtdWx0aW1lZGlhT25cIlxuICAgICAgICA+e3sgXCJNdWx0aW1lZGlhIHBsYXliYWNrIGlzIG5vdCBlbmFibGVkLCBcIiB8IHJweFRyYW5zbGF0ZSB9fVxuICAgICAgPC9zcGFuPlxuICAgICAgPHNwYW4gKm5nSWY9XCJtdWx0aW1lZGlhT24gJiYgcGxheWJhY2tNc2cgPT09ICdzdWNjZXNzJ1wiXG4gICAgICAgID57eyBcIlVzZSB0aGUgcGxheWVyIHRvIHBsYXkgdG8gdGhlIGZpbGUgb3JcIiB8IHJweFRyYW5zbGF0ZSB9fVxuICAgICAgPC9zcGFuPlxuICAgICAgPHNwYW4gKm5nSWY9XCJtdWx0aW1lZGlhT24gJiYgcGxheWJhY2tNc2cgPT09ICdlcnJvcidcIlxuICAgICAgICA+e3sgXCJNaW1lIHR5cGUgbm90IHN1cHBvcnRlZC5cIiB8IHJweFRyYW5zbGF0ZSB9fVxuICAgICAgPC9zcGFuPlxuICAgICAgPGFcbiAgICAgICAgKm5nSWY9XCIhbXVsdGltZWRpYU9uIHx8IHBsYXliYWNrTXNnICE9PSAnbG9hZGluZydcIlxuICAgICAgICAjZG93bmxvYWRMaW5rXG4gICAgICAgIFtocmVmXT1cInVybFwiXG4gICAgICAgIFtkb3dubG9hZF09XCJkb3dubG9hZEZpbGVOYW1lXCJcbiAgICAgICAgPnt7IFwiQ2xpY2sgaGVyZSB0byBkb3dubG9hZFwiIHwgcnB4VHJhbnNsYXRlIH19PC9hXG4gICAgICA+XG4gICAgPC9wPlxuICAgIDx2aWRlb1xuICAgICAgI3ZpZGVvUGxheWVyXG4gICAgICAqbmdJZj1cIm11bHRpbWVkaWFPblwiXG4gICAgICB3aWR0aD1cIjEwMCVcIlxuICAgICAgaGVpZ2h0PVwiMTAwJVwiXG4gICAgICBwcmVsb2FkPVwiYXV0b1wiXG4gICAgICAoY2FucGxheSk9XCJvblN1Y2Nlc3MoKVwiXG4gICAgICBjb250cm9sc1xuICAgID5cbiAgICAgIDxzb3VyY2UgKGVycm9yKT1cIm9uRXJyb3IoKVwiIFtzcmNdPVwidXJsXCIgdHlwZT1cInZpZGVvL21wNFwiIC8+XG4gICAgICA8c291cmNlXG4gICAgICAgIChlcnJvcik9XCJvbkVycm9yKClcIlxuICAgICAgICBbc3JjXT1cInVybFwiXG4gICAgICAgIHR5cGU9XCJ2aWRlby9tcDQ7IGNvZGVjcz0nYXZjMSwgYXYwMSwgaHZjMSwgaGV2MSwgbXA0diwgbXA0YS40MC4yLCBvcHVzJ1wiXG4gICAgICAvPlxuICAgICAgPHNvdXJjZSAoZXJyb3IpPVwib25FcnJvcigpXCIgW3NyY109XCJ1cmxcIiB0eXBlPVwidmlkZW8vb2dnXCIgLz5cbiAgICAgIDxzb3VyY2VcbiAgICAgICAgKGVycm9yKT1cIm9uRXJyb3IoKVwiXG4gICAgICAgIFtzcmNdPVwidXJsXCJcbiAgICAgICAgdHlwZT1cInZpZGVvL29nZzsgY29kZWNzPSd0aGVvcmEsIHZwOCwgdnA5LCBmbGFjLCBvcHVzLCB2b3JiaXMnXCJcbiAgICAgIC8+XG4gICAgICA8c291cmNlIChlcnJvcik9XCJvbkVycm9yKClcIiBbc3JjXT1cInVybFwiIHR5cGU9XCJ2aWRlby93ZWJtXCIgLz5cbiAgICAgIDxzb3VyY2VcbiAgICAgICAgKGVycm9yKT1cIm9uRXJyb3IoKVwiXG4gICAgICAgIFtzcmNdPVwidXJsXCJcbiAgICAgICAgdHlwZT1cInZpZGVvL3dlYm07IGNvZGVjcz0ndnA4LCB2cDksIHZvcmJpcywgb3B1cydcIlxuICAgICAgLz5cbiAgICA8L3ZpZGVvPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19