topic Re: Enabling Thumbnails for Viewer Component in Alfresco Forum

Enabling Thumbnails for Viewer Component

Mark_Davidson — Mon, 06 Jul 2020 13:53:21 GMT

I'm using the Viewer Component. It renders various types of content correctly - PDF, TXT, DOCX, etc. I'm struggling to enable thumbnails.

I have 'allowThumbnails' set to true but no thumbnails are displayed. I had a look at the documentation at https://www.alfresco.com/abn/adf/docs/core/components/viewer.component/.

There's mention of configuring the PDF.js library. I ran 'npm install pdfjs-dist' as suggested. As for the next step 'vendors.ts' - I don't see this anywhere. Can someone point me in the right direction? Is there anything else that I need to do to enable thumbnails?

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

I'm running ACS 6.2. The ADF app was created using the Yeoman generator.

Cheers

Mark

Is there anyway of adding new tags for posts? I see that I can choose 'ACS 6.1.x' but not 'ACS 6.2.x'. There's not even a tag for ADF posts, nevermind specific ADF components.

Re: Enabling Thumbnails for Viewer Component

eugenio_romano — Mon, 06 Jul 2020 16:50:36 GMT

Hi, that property allowThumbnails is only to toggle the thumbnails area in the pdf viewer. By default, the viewer already gives you this button option. You don't need more code to enable it

Re: Enabling Thumbnails for Viewer Component

Mark_Davidson — Tue, 07 Jul 2020 08:24:11 GMT

I must be doing something wrong then as I don't get thumbnails in the Viewer. I've tried with files of various mime types. I've pasted the code/markup below. Have I missed out anything?

---------------------------------------------------------------------------------------

<adf-viewer *ngIf="documentId"
  id="docViewer"
  [overlayMode]="overlayMode"
  [nodeId]="documentId"
  [allowDownload]="allowDownload"
  [allowFullScreen]="allowFullScreen"
  [allowGoBack]="allowGoBack"
  [allowLeftSidebar]="allowLeftSidebar"
  [allowNavigate]="allowNavigate"
  [allowPrint]="allowPrint"
  [allowRightSidebar]="allowRightSidebar"
  [allowThumbnails]="allowThumbnails"
  [canNavigateBefore]="canNavigateBefore"
  [canNavigateNext]="canNavigateNext"
  [showLeftSidebar]="showLeftSidebar"
  [showRightSidebar]="showRightSidebar"
  [showToolbar]="showToolbar"
  [showViewer]="showViewer"
>
</adf-viewer>

import { Component, OnInit, Input } from '@angular/core';
import { StateService } from 'app/state.service';

@Component({
  selector: 'app-viewer',
  templateUrl: './viewer.component.html',
  styleUrls: ['./viewer.component.scss']
})
export class ViewerComponent implements OnInit {

  overlayMode: boolean = false;
  allowDownload: boolean = true;
  allowFullScreen: boolean = true;
  allowGoBack: boolean = false;
  allowLeftSidebar: boolean = true;
  allowNavigate: boolean = false;
  allowPrint: boolean = true;
  allowRightSidebar: boolean = true;
  allowThumbnails: boolean = true;
  canNavigateBefore: boolean = true;
  canNavigateNext: boolean = true;
  showLeftSidebar: boolean = true;
  showRightSidebar: boolean = false;
  showToolbar: boolean = true;
  showViewer: boolean = true;

  @Input() documentId: string;

  constructor(private state: StateService) { }

  ngOnInit() {}

}

Re: Enabling Thumbnails for Viewer Component

Mark_Davidson — Tue, 07 Jul 2020 09:15:44 GMT

Here's some more info. When I select a doc from the doc list component (which is bound to the viewer component) I see this in the browser console.

pdf.js:7221 Uncaught (in promise) TypeError: Promise.allSettled is not a function
    at MessageHandler._deleteStreamController (pdf.js:7221)
    at MessageHandler._processStreamMessage (pdf.js:7160)
    at Worker.MessageHandler._onComObjOnMessage (pdf.js:6817)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:14134)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1744)
    at Worker.globalZoneAwareCallback (zone.js:1781)

I'm wondering if this is why the thumbnails aren't appearing?

I googled the error message & some have suggested that zone.js needs to be updated. Any ideas?

Thanks

Mark

Re: Enabling Thumbnails for Viewer Component

Mark_Davidson — Tue, 07 Jul 2020 09:22:04 GMT

Probably useful to paste a screenshot of the entire console contents: