+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -386,36 +428,5 @@
-
-
-
-
-
-
-
diff --git a/demo-shell/src/app/components/file-view/file-view.component.ts b/demo-shell/src/app/components/file-view/file-view.component.ts
index e8e4d75523..484a88abfb 100644
--- a/demo-shell/src/app/components/file-view/file-view.component.ts
+++ b/demo-shell/src/app/components/file-view/file-view.component.ts
@@ -45,7 +45,6 @@ export class FileViewComponent implements OnInit {
customPreset: string = null;
displayDefaultProperties = true;
showToolbar = true;
- displayName = null;
urlFile = null;
allowGoBack = true;
openWith = false;
@@ -55,7 +54,6 @@ export class FileViewComponent implements OnInit {
allowLeftSidebar = true;
moreActions = true;
moreActionsMenu = false;
- customName = false;
fileUrlSwitch = false;
showLeftSidebar = null;
showRightSidebar = false;
@@ -65,8 +63,9 @@ export class FileViewComponent implements OnInit {
showTabWithIconAndLabel = false;
desiredAspect: string = null;
showAspect: string = null;
- content: Blob;
name: string;
+ fileName: string;
+ blobFile: Blob;
constructor(private router: Router,
private route: ActivatedRoute,
@@ -93,9 +92,9 @@ export class FileViewComponent implements OnInit {
},
() => this.router.navigate(['/files', id])
);
- } else if (this.preview.content) {
- this.content = this.preview.content;
- this.displayName = this.preview.name;
+ } else if (this.preview?.content) {
+ this.blobFile = this.preview.content;
+ this.fileName = this.preview.name;
}
});
}
@@ -104,7 +103,7 @@ export class FileViewComponent implements OnInit {
this.preview.showResource(this.nodeId, versionId);
}
- onViewerVisibilityChanged() {
+ onViewerClosed() {
const primaryUrl = this.router.parseUrl(this.router.url).root.children[PRIMARY_OUTLET].toString();
this.router.navigateByUrl(primaryUrl);
}
@@ -182,14 +181,6 @@ export class FileViewComponent implements OnInit {
this.showTabWithIconAndLabel = !this.showTabWithIconAndLabel;
}
- toggleCustomName() {
- this.customName = !this.customName;
-
- if (!this.customName) {
- this.displayName = null;
- }
- }
-
toggleFileUrl() {
this.fileUrlSwitch = !this.fileUrlSwitch;
diff --git a/demo-shell/src/app/components/file-view/file-view.module.ts b/demo-shell/src/app/components/file-view/file-view.module.ts
index ce324a2756..ef3110df1d 100644
--- a/demo-shell/src/app/components/file-view/file-view.module.ts
+++ b/demo-shell/src/app/components/file-view/file-view.module.ts
@@ -34,6 +34,7 @@ const routes: Routes = [
CommonModule,
RouterModule.forChild(routes),
CoreModule,
+ ContentModule,
InfoDrawerModule,
ContentModule,
ContentDirectiveModule,
diff --git a/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.html b/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.html
index 332442c891..f8a8306edb 100644
--- a/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.html
+++ b/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.html
@@ -15,8 +15,8 @@
(preview)="showPreview($event)">
-
-
+
diff --git a/demo-shell/src/app/components/shared-link-view/shared-link-view.component.html b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.html
index 32110f9787..6483c22865 100644
--- a/demo-shell/src/app/components/shared-link-view/shared-link-view.component.html
+++ b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.html
@@ -1,7 +1,7 @@
-
-
+
diff --git a/docs/content-services/components/alfresco-viewer.component.md b/docs/content-services/components/alfresco-viewer.component.md
new file mode 100644
index 0000000000..f4ec65addd
--- /dev/null
+++ b/docs/content-services/components/alfresco-viewer.component.md
@@ -0,0 +1,474 @@
+---
+Title: Alfresco Viewer component
+Added: 6.0.0
+Status: Active
+---
+
+# [Alfresco Viewer component](../../../lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts "Defined in alfresco-viewer.component.ts")
+
+Displays content from an ACS repository.
+
+See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
+
+## Contents
+
+- [Basic usage](#basic-usage)
+ - [Transclusions](#transclusions)
+- [Class members](#class-members)
+ - [Properties](#properties)
+ - [Events](#events)
+- [Keyboard shortcuts](#keyboard-shortcuts)
+- [Details](#details)
+ - [Integrating with the Document List component](#integrating-with-the-document-list-component)
+ - [Supported file formats](#supported-file-formats)
+ - [Content Renditions](#content-renditions)
+ - [Configuring PDF.js library](#configuring-pdfjs-library)
+ - [Extending the Viewer](#extending-the-viewer)
+ - [Custom layout](#custom-layout)
+ - [Printing](#printing)
+- [See also](#see-also)
+
+## Basic usage
+
+Using with node id:
+
+```html
+
+
+```
+
+Using with shared link:
+
+```html
+
+
+```
+
+Note that if you have a URL which contains a shared link ID, you should extract the
+ID portion and use it with the `sharedLinkId` property rather than using the whole
+URL with `urlFile`.
+
+### [Transclusions](../../user-guide/transclusion.md)
+
+The [Alfresco Viewer component](viewer.component.md) lets you transclude content for the toolbar (and toolbar buttons),
+the sidebar, thumbnails, and the "Open with" and "More actions" menus.
+See the [Custom layout](#custom-layout) section for full details of all available tranclusions.
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| allowDownload | `boolean` | true | Toggles downloading. |
+| allowGoBack | `boolean` | true | Allows `back` navigation |
+| allowLeftSidebar | `boolean` | false | Allow the left the sidebar. |
+| allowNavigate | `boolean` | false | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
+| allowPrint | `boolean` | false | Toggles printing. |
+| allowRightSidebar | `boolean` | false | Allow the right sidebar. |
+| canNavigateBefore | `boolean` | true | Toggles the "before" ("<") button. Requires `allowNavigate` to be enabled. |
+| canNavigateNext | `boolean` | true | Toggles the next (">") button. Requires `allowNavigate` to be enabled. |
+| maxRetries | `number` | 30 | Number of times the Viewer will retry fetching content Rendition. There is a delay of at least one second between attempts. |
+| nodeId | `string` | null | Node Id of the file to load. |
+| overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
+| sharedLinkId | `string` | null | Shared link id (to display shared file). |
+| showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. |
+| showRightSidebar | `boolean` | false | Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. |
+| showToolbar | `boolean` | true | Hide or show the toolbar |
+| showViewer | `boolean` | true | Hide or show the viewer |
+| sidebarLeftTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`` | null | The template for the left sidebar. The template context contains the loaded node data. |
+| sidebarRightTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`` | null | The template for the right sidebar. The template context contains the loaded node data. |
+| versionId | `string` | null | Version Id of the file to load. |
+
+### Events
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| close | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when the viewer close |
+| invalidSharedLink | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when the shared link used is not valid. |
+| navigateBefore | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when user clicks 'Navigate Before' ("<") button. |
+| navigateNext | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when user clicks 'Navigate Next' (">") button. |
+
+## Keyboard shortcuts
+
+| Name | Description |
+| ---- | ----------- |
+| Esc | Close the viewer (overlay mode only). |
+| Left | Invoke 'Navigate before' action. |
+| Right | Invoke 'Navigate next' action. |
+| Ctrl+F | Activate full-screen mode. |
+
+## Details
+
+### Integrating with the Document List component
+
+Below is the most simple integration of the Viewer and
+[Document List](../../content-services/components/document-list.component.md) components within your custom component:
+
+```html
+
+
+
+
+
+```
+
+The component controller class implementation might look like the following:
+
+```ts
+export class OverlayViewerComponent {
+
+ @Input()
+ showViewer: boolean = false;
+
+ nodeId: string;
+
+ showPreview(event) {
+ if (event.value.entry.isFile) {
+ this.nodeId = event.value.entry.id;
+ this.showViewer = true;
+ }
+ }
+}
+```
+
+### Supported file formats
+
+The [Alfresco Viewer component](viewer.component.md) consists of separate Views that handle particular file types or type families based on either a file extension or a mime type:
+
+- PDF View
+ - application/pdf
+ - \*.pdf
+- Image View
+ - image/png
+ - image/jpeg
+ - image/gif
+ - image/bmp
+ - image/svg+xml
+ - \*.png
+ - \*.jpg
+ - \*.jpeg
+ - \*.gif
+ - \*.bpm
+ - \*.svg
+- Text View
+ - text/plain
+ - text/csv
+ - text/xml
+ - text/html
+ - application/x-javascript
+ - \*.txt
+ - \*.xml
+ - \*.js
+ - \*.html
+ - \*.json
+ - \*.ts
+- Media View
+ - video/mp4
+ - video/webm
+ - video/ogg
+ - audio/mpeg
+ - audio/ogg
+ - audio/wav
+ - \*.wav
+ - \*.mp4
+ - \*.mp3
+ - \*.webm
+ - \*.ogg
+
+### Content Renditions
+
+For those extensions and mime types that cannot be natively displayed in the browser, the Viewer will try to fetch the corresponding rendition using the [renditions service api](../services/renditions.service.md).
+
+For the full list of supported types please refer to: [File types that support preview and thumbnail generation](http://docs.alfresco.com/5.2/references/valid-transformations-preview.html).
+
+### Configuring PDF.js library
+
+Configure your webpack-enabled application with the PDF.js library as follows.
+
+1. Install pdfjs-dist
+
+```sh
+npm install pdfjs-dist
+```
+
+2. Update `vendors.ts` by appending the following code. This will enable the [Alfresco Viewer component](viewer.component.md)
+ and compatibility mode for all browsers. It will also configure the web worker for the PDF.js
+ library to render PDF files in the background:
+
+```ts
+// PDF.js
+require('pdfjs-dist/web/compatibility.js');
+const pdfjsLib = require('pdfjs-dist');
+pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
+require('pdfjs-dist/web/pdf_viewer.js');
+```
+
+3. Update the `plugins` section of the `webpack.common.js` file with the following lines:
+
+```js
+new CopyWebpackPlugin([
+ ...
+ {
+ from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
+ to: 'pdf.worker.js'
+ }
+])
+```
+
+### Extending the Viewer
+
+#### Internal extension mechanism
+
+The Viewer supports dynamically-loaded viewer preview extensions, to know more about it [Preview Extension component](../../extensions/components/preview-extension.component.md). This
+
+#### Code extension mechanism]
+
+You can define your own custom handler to handle other file formats that are not yet supported by
+the [Alfresco Viewer component](viewer.component.md). Below is an example that shows how to use the `adf-viewer-extension`
+to handle 3D data files:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+Note: you need to add the `ng2-3d-editor` dependency to your `package.json` file to make the example above work.
+
+You can define multiple `adf-viewer-extension` templates if required:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Custom layout
+
+The [Alfresco Viewer Component](viewer.component.md) lets you transclude custom content in several different places as
+explained in the sections below.
+
+#### Custom toolbar
+
+You can replace the standard viewer toolbar with your own custom implementation:
+
+```html
+
+
+
toolbar
+
+
+```
+
+Everything you put inside the "adf-alfresco-viewer-toolbar" tags will be rendered instead of the
+standard toolbar.
+
+#### Custom toolbar buttons
+
+If you are happy with the custom toolbar's behaviour but want to add some extra buttons
+then you can do so as shown in the following example:
+
+```html
+
+
+
+
+
+
+
+```
+
+The result should look like this:
+
+
+
+#### Custom sidebar
+
+The [Alfresco Viewer Component](viewer.component.md) also supports custom sidebar components and layouts.
+Set the `allowRightSidebar` property to `true` to enable this feature.
+
+The custom sidebar can be injected in two different ways. The first way is to use
+transclusion, which will display all content placed inside the `` element:
+
+```html
+
+
+
My info
+
+
+```
+
+The second way to customize the sidebar is to use template injection but note that this only works
+when using the viewer with `nodeId`.
+
+```html
+
+
+
+
+```
+
+#### Custom thumbnails
+
+The PDF viewer comes with its own default list of thumbnails but you can replace this
+by providing a custom template and binding to the context property `viewer` to access the PDFJS.PDFViewer
+instance.
+
+
+
+Provide the custom template as in the following example:
+
+```javascript
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'custom-thumbnails',
+ template: '
Custom Thumbnails Component
'
+})
+export class CustomThumbnailsComponent {
+ @Input() pdfViewer: any;
+
+ ...
+}
+```
+
+```html
+
+
+
+
+
+```
+
+#### Custom "Open With" menu
+
+You can enable a custom "Open With" menu by providing at least one action inside the
+`adf-alfresco-viewer-open-with` tag:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+
+
+#### Custom "More actions" menu
+
+You can enable a custom "More actions" menu by providing at least one action inside the `adf-alfresco-viewer-more-actions` tag:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+
+
+#### Custom zoom scaling
+
+You can set a default zoom scaling value for pdf viewer by adding the following code in `app.config.json`.
+Note: For the pdf viewer the value has to be within the range of 25 - 1000.
+
+"adf-alfresco-viewer": {
+"pdf-viewer-scaling": 150
+}
+
+In the same way you can set a default zoom scaling value for the image viewer by adding the following code in `app.config.json`.
+
+"adf-alfresco-viewer": {
+"image-viewer-scaling": 150
+}
+
+By default the viewer's zoom scaling is set to 100%.
+
+### Printing
+
+You can configure the Viewer to let the user print the displayed content. The
+component will show a "Print" button if the `allowPrint` property is set to
+true.
+
+```html
+
+ ...
+
+```
+
+You can also use the `print` event to get notification when the user prints some
+content.
+
+## See also
+
+- [Document List component](../../content-services/components/document-list.component.md)
+- [Preview Extension component](../../extensions/components/preview-extension.component.md)
diff --git a/docs/content-services/components/document-list.component.md b/docs/content-services/components/document-list.component.md
index c634c97481..ffaf249907 100644
--- a/docs/content-services/components/document-list.component.md
+++ b/docs/content-services/components/document-list.component.md
@@ -99,7 +99,7 @@ Displays the documents from a repository.
| nodeClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user clicks a list node |
| nodeDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user double-clicks a list node |
| nodeSelected | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`[]>` | Emitted when the node selection change |
-| preview | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user acts upon files with either single or double click (depends on `navigation-mode`). Useful for integration with the [Viewer component](../../core/components/viewer.component.md). |
+| preview | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user acts upon files with either single or double click (depends on `navigation-mode`). Useful for integration with the Viewer component. |
| ready | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md)`>` | Emitted when the Document List has loaded all items and is ready for use |
## Details
diff --git a/docs/content-services/services/search-query-builder.service.md b/docs/content-services/services/search-query-builder.service.md
index 923db7f037..702ac4a7b1 100644
--- a/docs/content-services/services/search-query-builder.service.md
+++ b/docs/content-services/services/search-query-builder.service.md
@@ -25,7 +25,7 @@ Stores information from all the custom search and faceted search widgets, compil
- **Returns** `QueryBody` - The finished query
- **execute**(queryBody?: `QueryBody`)
Builds and executes the current query.
- - _queryBody:_ `QueryBody` - (Optional)
+ - _queryBody:_ `QueryBody` - (Optional) (Optional)
- **getDefaultConfiguration**(): [`SearchConfiguration`](../../../lib/content-services/src/lib/search/models/search-configuration.interface.ts)`|undefined`
- **Returns** [`SearchConfiguration`](../../../lib/content-services/src/lib/search/models/search-configuration.interface.ts)`|undefined` -
@@ -92,7 +92,7 @@ Stores information from all the custom search and faceted search widgets, compil
- **update**(queryBody?: `QueryBody`)
Builds the current query and triggers the `updated` event.
- - _queryBody:_ `QueryBody` - (Optional)
+ - _queryBody:_ `QueryBody` - (Optional) (Optional)
- **updateSelectedConfiguration**(index: `number`)
- _index:_ `number` -
diff --git a/docs/core/components/viewer-render.component.md b/docs/core/components/viewer-render.component.md
new file mode 100644
index 0000000000..23c53aae2b
--- /dev/null
+++ b/docs/core/components/viewer-render.component.md
@@ -0,0 +1,275 @@
+---
+Title: Viewer Render component
+Added: v6.0.0
+Status: Active
+Last reviewed: 2022-11-25
+---
+
+# [Viewer render component](../../../lib/core/src/lib/viewer/components/viewer-render.component.ts "Defined in viewer-render.component.ts")
+
+Displays content from an ACS repository.
+
+See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
+
+## Contents
+
+- [Basic usage](#basic-usage)
+- [Class members](#class-members)
+ - [Properties](#properties)
+ - [Events](#events)
+- [Keyboard shortcuts](#keyboard-shortcuts)
+- [Details](#details)
+ - [Custom file parameters](#custom-file-parameters)
+ - [Supported file formats](#supported-file-formats)
+ - [Configuring PDF.js library](#configuring-pdfjs-library)
+ - [Extending the Viewer](#extending-the-viewer)
+ - [Custom layout](#custom-layout)
+- [See also](#see-also)
+
+## Basic usage
+
+Using with file url:
+
+```html
+
+
+```
+
+Using with file [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob):
+
+```html
+
+
+```
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| allowFullScreen | `boolean` | true | Toggles the 'Full Screen' feature. |
+| allowThumbnails | `boolean` | true | Toggles PDF thumbnails. |
+| blobFile | [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) | | Loads a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) File |
+| fileName | `string` | | Override Content filename. |
+| isLoading | `boolean` | false | Override loading status |
+| mimeType | `string` | | MIME type of the file content (when not determined by the filename extension). |
+| readOnly | `boolean` | true | Enable when where is possible the editing functionalities |
+| thumbnailsTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`` | null | The template for the pdf thumbnails. |
+| tracks | [`Track`](../../../lib/core/src/lib/viewer/models/viewer.model.ts)`[]` | \[] | media subtitles for the media player |
+| urlFile | `string` | "" | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
+| viewerType | `string` | "unknown" | Override Content view type. Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). |
+
+### Events
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| close | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when the img is submitted in the img viewer. |
+| extensionChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when the filename extension changes. |
+| submitFile | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)`>` | Emitted when the img is submitted in the img viewer. |
+
+## Keyboard shortcuts
+
+| Name | Description |
+| ---- | ----------- |
+| Esc | Close the viewer (overlay mode only). |
+| Left | Invoke 'Navigate before' action. |
+| Right | Invoke 'Navigate next' action. |
+| Ctrl+F | Activate full-screen mode. |
+
+## Details
+
+The component controller class implementation might look like the following:
+
+```ts
+export class OverlayViewerComponent {
+
+ @Input()
+ showViewer: boolean = false;
+
+ nodeId: string;
+
+ showPreview(event) {
+ if (event.value.entry.isFile) {
+ this.nodeId = event.value.entry.id;
+ this.showViewer = true;
+ }
+ }
+}
+```
+
+### Custom file parameters
+
+You can provide custom file parameters, for example a value for the `mimeType` or `displayName` when using URL values that have no file names or extensions:
+
+```html
+
+
+```
+
+### Supported file formats
+
+The [Viewer render component](viewer.component.md) consists of separate Views that handle particular file types or type families based on either a file extension or a mime type:
+
+- PDF View
+ - application/pdf
+ - \*.pdf
+- Image View
+ - image/png
+ - image/jpeg
+ - image/gif
+ - image/bmp
+ - image/svg+xml
+ - \*.png
+ - \*.jpg
+ - \*.jpeg
+ - \*.gif
+ - \*.bpm
+ - \*.svg
+- Text View
+ - text/plain
+ - text/csv
+ - text/xml
+ - text/html
+ - application/x-javascript
+ - \*.txt
+ - \*.xml
+ - \*.js
+ - \*.html
+ - \*.json
+ - \*.ts
+- Media View
+ - video/mp4
+ - video/webm
+ - video/ogg
+ - audio/mpeg
+ - audio/ogg
+ - audio/wav
+ - \*.wav
+ - \*.mp4
+ - \*.mp3
+ - \*.webm
+ - \*.ogg
+
+### Configuring PDF.js library
+
+Configure your webpack-enabled application with the PDF.js library as follows.
+
+1. Install pdfjs-dist
+
+```sh
+npm install pdfjs-dist
+```
+
+2. Update `vendors.ts` by appending the following code. This will enable the [Viewer render component](viewer.component.md)
+ and compatibility mode for all browsers. It will also configure the web worker for the PDF.js
+ library to render PDF files in the background:
+
+```ts
+// PDF.js
+require('pdfjs-dist/web/compatibility.js');
+const pdfjsLib = require('pdfjs-dist');
+pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
+require('pdfjs-dist/web/pdf_viewer.js');
+```
+
+3. Update the `plugins` section of the `webpack.common.js` file with the following lines:
+
+```js
+new CopyWebpackPlugin([
+ ...
+ {
+ from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
+ to: 'pdf.worker.js'
+ }
+])
+```
+
+The [Viewer render component](viewer.component.md) should now be able to display PDF files.
+
+### Extending the Viewer
+
+#### Internal extension mechanism
+
+The Viewer supports dynamically-loaded viewer preview extensions, to know more about it [Preview Extension component](../../extensions/components/preview-extension.component.md). This
+
+#### Code extension mechanism]
+
+You can define your own custom handler to handle other file formats that are not yet supported by
+the [Viewer render component](viewer.component.md). Below is an example that shows how to use the `adf-viewer-render-extension`
+to handle 3D data files:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+Note: you need to add the `ng2-3d-editor` dependency to your `package.json` file to make the example above work.
+
+You can define multiple `adf-viewer-render-extension` templates if required:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Custom layout
+
+The [Viewer render component](viewer.component.md) lets you transclude custom content in several different places as
+explained in the sections below.
+
+#### Custom zoom scaling
+
+You can set a default zoom scaling value for pdf viewer by adding the following code in `app.config.json`.
+Note: For the pdf viewer the value has to be within the range of 25 - 1000.
+
+"adf-viewer-render": {
+"pdf-viewer-scaling": 150
+}
+
+In the same way you can set a default zoom scaling value for the image viewer by adding the following code in `app.config.json`.
+
+"adf-viewer-render": {
+"image-viewer-scaling": 150
+}
+
+By default the viewer's zoom scaling is set to 100%.
+
+## See also
+
+- [Alfresco Viewer component](../../content-services/components/document-list.component.md)
+- [Viewer Render component](../../core/components/viewer-render.component.md)
diff --git a/docs/core/components/viewer.component.md b/docs/core/components/viewer.component.md
index bab4a3834a..3697ee4424 100644
--- a/docs/core/components/viewer.component.md
+++ b/docs/core/components/viewer.component.md
@@ -2,14 +2,13 @@
Title: Viewer component
Added: v2.0.0
Status: Active
-Last reviewed: 2019-03-25
+Last reviewed: 2023-01-30
---
# [Viewer component](../../../lib/core/src/lib/viewer/components/viewer.component.ts "Defined in viewer.component.ts")
-Displays content from an ACS repository.
+Displays content from blob file or url file.
-See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
## Contents
@@ -23,22 +22,21 @@ See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
- [Integrating with the Document List component](#integrating-with-the-document-list-component)
- [Custom file parameters](#custom-file-parameters)
- [Supported file formats](#supported-file-formats)
- - [Content Renditions](#content-renditions)
- [Configuring PDF.js library](#configuring-pdfjs-library)
- [Extending the Viewer](#extending-the-viewer)
- [Custom layout](#custom-layout)
- - [Printing](#printing)
- [See also](#see-also)
## Basic usage
-Using with node id:
+Using with blob file:
```html
+ [blobFile]="blobFile"
+ [fileName]="'filename.pdf'">
```
@@ -47,23 +45,10 @@ Using with file url:
```html
+ [urlFile]="'https://fileUrl.com/filename.pdf'">
```
-Using with shared link:
-
-```html
-
-
-```
-
-Note that if you have a URL which contains a shared link ID, you should extract the
-ID portion and use it with the `sharedLinkId` property rather than using the whole
-URL with `urlFile`.
-
### [Transclusions](../../user-guide/transclusion.md)
The [Viewer component](viewer.component.md) lets you transclude content for the toolbar (and toolbar buttons),
@@ -81,41 +66,30 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
| allowGoBack | `boolean` | true | Allows `back` navigation |
| allowLeftSidebar | `boolean` | false | Allow the left the sidebar. |
| allowNavigate | `boolean` | false | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
-| allowPrint | `boolean` | false | Toggles printing. |
| allowRightSidebar | `boolean` | false | Allow the right sidebar. |
-| allowThumbnails | `boolean` | true | Toggles PDF thumbnails. |
| blobFile | [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) | | Loads a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) File |
| canNavigateBefore | `boolean` | true | Toggles the "before" ("<") button. Requires `allowNavigate` to be enabled. |
| canNavigateNext | `boolean` | true | Toggles the next (">") button. Requires `allowNavigate` to be enabled. |
-| displayName | `string` | | Specifies the name of the file when it is not available from the URL. |
| fileName | `string` | | Content filename. |
-| maxRetries | `number` | 30 | Number of times the Viewer will retry fetching content Rendition. There is a delay of at least one second between attempts. |
| mimeType | `string` | | MIME type of the file content (when not determined by the filename extension). |
-| nodeId | `string` | null | Node Id of the file to load. |
| overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
-| sharedLinkId | `string` | null | Shared link id (to display shared file). |
| showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. |
| showRightSidebar | `boolean` | false | Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. |
| showToolbar | `boolean` | true | Hide or show the toolbar |
| showViewer | `boolean` | true | Hide or show the viewer |
-| sidebarLeftTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`` | null | The template for the left sidebar. The template context contains the loaded node data. |
-| sidebarRightTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`` | null | The template for the right sidebar. The template context contains the loaded node data. |
-| thumbnailsTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`` | null | The template for the pdf thumbnails. |
+| sidebarLeftTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`` | null | The template for the left sidebar. The template context contains the loaded data. |
+| sidebarRightTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`` | null | The template for the right sidebar. The template context contains the loaded data. |
+| tracks | [`Track`](../../../lib/core/src/lib/viewer/models/viewer.model.ts)`[]` | \[] | media subtitles for the media player |
| urlFile | `string` | "" | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
-| urlFileViewer | `string` | null | Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). Used when `urlFile` has no filename and extension. |
-| versionId | `string` | null | Version Id of the file to load. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
-| extensionChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when the filename extension changes. |
-| goBack | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`BaseEvent`](../../../lib/core/src/lib/events/base.event.ts)`>` | Emitted when user clicks the 'Back' button. |
-| invalidSharedLink | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when the shared link used is not valid. |
| navigateBefore | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when user clicks 'Navigate Before' ("<") button. |
| navigateNext | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when user clicks 'Navigate Next' (">") button. |
-| print | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`BaseEvent`](../../../lib/core/src/lib/events/base.event.ts)`>` | Emitted when user clicks the 'Print' button. |
| showViewerChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when the viewer is shown or hidden. |
+| submitFile | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)`>` | Emitted when the img is submitted in the img viewer. |
## Keyboard shortcuts
@@ -128,50 +102,13 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
## Details
-### Integrating with the Document List component
-
-Below is the most simple integration of the Viewer and
-[Document List](../../content-services/components/document-list.component.md) components within your custom component:
-
-```html
-
-
-
-
-
-```
-
-The component controller class implementation might look like the following:
-
-```ts
-export class OverlayViewerComponent {
-
- @Input()
- showViewer: boolean = false;
-
- nodeId: string;
-
- showPreview(event) {
- if (event.value.entry.isFile) {
- this.nodeId = event.value.entry.id;
- this.showViewer = true;
- }
- }
-}
-```
-
### Custom file parameters
-You can provide custom file parameters, for example a value for the `mimeType` or `displayName` when using URL values that have no file names or extensions:
+You can provide custom file parameters, for example a value for the `mimeType` or `fileName` when using URL values that have no file names or extensions:
```html
@@ -222,12 +159,6 @@ The [Viewer component](viewer.component.md) consists of separate Views that hand
- \*.webm
- \*.ogg
-### Content Renditions
-
-For those extensions and mime types that cannot be natively displayed in the browser, the Viewer will try to fetch the corresponding rendition using the [renditions service api](../services/renditions.service.md).
-
-For the full list of supported types please refer to: [File types that support preview and thumbnail generation](http://docs.alfresco.com/5.2/references/valid-transformations-preview.html).
-
### Configuring PDF.js library
Configure your webpack-enabled application with the PDF.js library as follows.
@@ -277,7 +208,7 @@ the [Viewer component](viewer.component.md). Below is an example that shows how
to handle 3D data files:
```html
-
+
@@ -296,7 +227,7 @@ Note: you need to add the `ng2-3d-editor` dependency to your `package.json` file
You can define multiple `adf-viewer-extension` templates if required:
```html
-
+
@@ -377,55 +308,13 @@ transclusion, which will display all content placed inside the `
```
-The second way to customize the sidebar is to use template injection but note that this only works
-when using the viewer with `nodeId`.
-
-```html
-
-
-
-
-```
-
-#### Custom thumbnails
-
-The PDF viewer comes with its own default list of thumbnails but you can replace this
-by providing a custom template and binding to the context property `viewer` to access the PDFJS.PDFViewer
-instance.
-
-
-
-Provide the custom template as in the following example:
-
-```javascript
-import { Component, Input } from '@angular/core';
-
-@Component({
- selector: 'custom-thumbnails',
- template: '
Custom Thumbnails Component
'
-})
-export class CustomThumbnailsComponent {
- @Input() pdfViewer: any;
-
- ...
-}
-```
-
-```html
-
-
-
-
-
-```
-
#### Custom "Open With" menu
You can enable a custom "Open With" menu by providing at least one action inside the
`adf-viewer-open-with` tag:
```html
-
+