This is an angular library that provides components to view and annotate PDF documents, as well as view images.
- npm run package (deprecated)
- npm run start:ng
add @hmcts/media-viewer as a dependency in package.json
npm install --save @hmcts/media-viewer
import MediaViewerModule and declare it in your NgModule imports.
import { MediaViewerModule } from 'media-viewer';
@NgModule({
imports: [
...,
MediaViewerModule,
]
})
import assets to your angular.json
{
"glob": "**/*",
"input": "node_modules/@hmcts/media-viewer/assets",
"output": "/assets"
}
and styles
"styles": [
"node_modules/@hmcts/media-viewer/assets/aui-styles.scss",
...
],
component entry point:
<mv-media-viewer [url]="'assets/example.pdf'"
[downloadFileName]="'example.pdf'"
[showToolbar]="true"
[contentType]="'pdf'">
</mv-media-viewer>
The toolbar may be toggled off by setting showToolbar to false. The toolbar itself is available as a module that can be included into the DOM at a different location if necessary.
Toolbar buttons can be toggled on or off using the 'toolbarButtonOverrides' input. Each button can toggled on or off as follows:
toolbarButtons = { showRotate: true, showDownload: false }
<mv-media-viewer ...
[toolbarButtonOverrides]="toolbarButtons">
</mv-media-viewer>
The full list of buttons is as follows:
showPrint
showDownload
showNavigation
showZoom
showRotate
showHighlightButton
showDrawButton
showSearchBar
showSidebar
You can set height and width of the media viewer otherwise it will be set to default settings of 100%.
<mv-media-viewer ...
[height]="'500px'"
[width]="'500px'">
</mv-media-viewer>
To override the default Annotation API path (or URL for cross domain calls) use "annotationApiUrl" parameter
<mv-media-viewer annotationApiUrl=""http://my-gateway.com/my-context-path"" ... >
</mv-media-viewer>
- the media-viewer expects calls to the backend to be proxied by the consuming application. This includes the following APIs:
- '/documents', endpoint to be proxied to the 'document-store'
- '/em-anno', endpoint to be proxied to the 'annotations-api', if annotations are turned on
In order to use annotations on the media viewer, you need to proxy the calls.
Example:
import * as proxy from "http-proxy-middleware";
Annotation Config:
const annotation = {
endpoints: ["/em-anno"],
target: "Enter URL",
pathRewrite: {
"^/em-anno": "/api"
}
}
How to use the proxy:
this.app.use(proxy(annotation.endpoints, { target: annotation.target }));
The Media Viewer will return load status and provide exceptions if thrown for the host application to consume.
<mv-media-viewer [url]="'assets/example.pdf'"
[downloadFileName]="'example.pdf'"
[showToolbar]="true"
[contentType]="'pdf'"
(mediaLoadStatus)="onMediaLoadStatus($event)"
(viewerException)="onMediaLoadException($event)">
</mv-media-viewer>
When exceptions are thrown by the different Media Viewers, the exception is encapsulated in an object called ViewerException and passed up the chain to be used by consuming service.
The structure of the ViewerException exception class can be seen below:
exceptionType: error.name,
detail: {
httpResponseCode: error.status,
message: error.message
}
Add these styles to your component.scss if you need them i.e. if you writing your own toolbar styles then do not import those
// Import GOV.UK Frontend
@import "~govuk-frontend/all";
@import "~@hmcts/frontend/all";
// Import Media Viewer Styles
@import "~media-viewer/src/assets/all"; // use this to import all the styles
alternatevly it is possible to import file by file from assets/scss directory
i.e. "~media-viewer/src/assets/toolbar/main"
The list of exceptions thrown by the Media Viewer are as follows:
- UnknownErrorException
- MissingPdfException
- InvalidPDFException
- UnexpectedResponseException
- HttpErrorResponse
- PasswordException
npm run package, npm run e2e:cucumber
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent