Enabling Thumbnails for Viewer Component

[Mark_Davidson]

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

PS

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.

[eugenio_romano]

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

[Mark_Davidson]

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() {}

}

[Mark_Davidson]

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

[Mark_Davidson]

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

: