Introduction

Beginning with yuuvis® RAD 9.0, this new viewer-service is part of the yuuvis® RAD service infrastructure stack. It offers to display several common file types directly within a yuuvis® RADclient application. It serves within the yuuvis® RAD client and can readily be integrated into a custom client. It is designed to allow for easy integration of further viewers in addition to the free ones included already.

This article is intended for administrators who want to know about the supported file types so they can decide whether to let the viewer service be extended for not supported ones.

Supported Types

All of the following formats are supported by the viewer service. Some others like Microsoft Office files including MSG-formated e-mails are supported by the rendition service provided that it is installed and running.

For unsupported file types, the viewer service sends a notification and a download link, allowing for the content to be downloaded and viewed by an external application.

Audio

Used component: By default, audio files are natively played by the browser with HTML5 audio (that is a subject of the HTML5 Audio specification).

Default component: Used component.

Mimetype: mpeg, mp3, ogg, wav

All played files are streamed to prevent unnecessary data downloads. The autoplay is set to false.

Image

Used component: Custom Angular Application with angular-x-image-viewer plug-in.

Default component: By default, the supported mimeTypes are rendered in the standard HTML img tag.

Mimetypes: jpeg, gif, png, svg, bmp, ico

Not supported file types are by default offered as a download.

Image (tiff/tif)

Used component: Native image rendering as base64 encoded.

Default component: By default, the supported mimeTypes are rendered in the standard HTML img tag.

Mimetypes: tiff, tif

JSON

Used component: Custom Angular application with ngx-json-viewer plugin.

Default component: Used component.

Mimetype: application/json 

E-Mails

Used component: eml files are parsed by mailparser, msg files are parsed by custom parser inspired by (msgreader)

Default component: Used component.

Mimetypes : message/rfc822 (eml), beginning with 2021 Winter Alpha2: application/vnd.ms-outlook (msg)

Markdown (text/markdown)

Used component: Custom React application with markdown-to-jsx plug-in. / Custom Angular application with showdown plug-in.

Default component: Used component.

Mimetypes: x-web-markdown, markdown

Open Document Format

The ODFs are currently resolved as application/zip. The viewer analyses all such mime types additionally and reacts in this case on the file extension that must be provided.

Used component: Files are parsed and rendered with https://webodf.org/

Default component: Used component.

File extension: odt, ods, odp

Mimetypes: application/zip (as resolved by yuuvis core service)

Text (text/plain)

Used component: By default, plain text is natively rendered by the Browser.

Default component: Used component.

Mimetypes: plain

XML(text/xml)

Used component: By default xml is natively rendered as text by the Browser.

Default component: Used component.

Mimetypes: xml

PDF

Used component: PDF.js which is a Mozilla project.

Default component: Used component.

Mimetypes: application/pdf

The ranging support provided by PDF.js is supported by the Web-API Gateway as well.

Video

Used component:  By default video files are natively played by the browser with HTML5 Video (that is a subject of the HTML5 Video specification).

Default component: Used component.

Mimetypes: mpeg, mp4, ogg, webm

All played files are streamed to prevent unnecessary data downloads. The autoplay is set to false.

Zip

Used component: Native string rendering

Default component: Used component.

Mimetype: x-zip-compressed, zip

The content of the zip container is read and the name and paths are printed out.

Customizing

The viewer service can be extended as described in this section.

Integration into 3rd party application

If the Viewer-Service runs in a different domain than the application that integrates it the Argus-Service has to be configured. In the file servicewatcher-sw.yml the parameter 'env' lists the parent domain has to be added as follows:

- name: viewerservice
  ...
  env:
    ALLOWED_ORIGIN: http://myhost.com,http://myotherhost.com

Localization

The viewer-service offers a few strings with information for your users. They are part of the localization files en.json and de.json of the client.

en.json :
 "yuv.viewer.not.authorized": "Not authorized to preview file.",
 "yuv.viewer.not.found": "File not found.",
 "yuv.viewer.not.supported": "Format not supported.",
 "yuv.viewer.not.supported.download.content": "Unable to display format. You can click this link to download the file."

de.json :
  "yuv.viewer.not.authorized": "Fehlende Authorisierung zur Anzeige der Datei.",
  "yuv.viewer.not.found": "Datei nicht gefunden.",
  "yuv.viewer.not.supported": "Dieses Format ist nicht unterstützt.",
  "yuv.viewer.not.supported.download.content": "Dieses Format kann nicht angezeigt werden. Ein Klick auf den Link lädt die Datei herunter."

If you create your own custom language files you could take these translated keys into them:

es.json :
  "yuv.viewer.not.authorized": "No está autorizado a obtener una vista previa del archivo.",
  "yuv.viewer.not.found": "Archivo no encontrado.",
  "yuv.viewer.not.supported": "Formato no compatible.",
  "yuv.viewer.not.supported.download.content": "No se puede mostrar el formato.\nPuede hacer clic en este vínculo para descargar el archivo."

fi.json :
  "yuv.viewer.not.authorized": "Ei valtuutta esikatsella tiedostoa.",
  "yuv.viewer.not.found": "Tiedostoa ei löydy.",
  "yuv.viewer.not.supported": "Muotoa ei tueta.",
  "yuv.viewer.not.supported.download.content": "Muotoa ei voida näyttää.\nLataa tiedosto napsauttamalla tätä linkkiä."

fr.json :
  "yuv.viewer.not.authorized": "Non autorisé à prévisualiser le fichier.",
  "yuv.viewer.not.found": "Fichier introuvable.",
  "yuv.viewer.not.supported": "Format non pris en charge.",
  "yuv.viewer.not.supported.download.content": "Impossible d'afficher le format.\nVous pouvez cliquer sur ce lien pour télécharger le fichier."

it.json :
  "yuv.viewer.not.authorized": "Non autorizzato a visualizzare l'anteprima del file.",
  "yuv.viewer.not.found": "File non trovato.",
  "yuv.viewer.not.supported": "Formato non supportato.",
  "yuv.viewer.not.supported.download.content": "Impossibile visualizzare il formato.\nFare clic su questo link per scaricare il file."

ja.json :
  "yuv.framework.sequence-list.template.button.saveNew": "新規テンプレートとして追加",
  "yuv.viewer.not.authorized": "ファイルをプレビューする権限がありません。",
  "yuv.viewer.not.found": "ファイルが見つかりませんでした。",
  "yuv.viewer.not.supported": "サポートされていない形式です。",
  "yuv.viewer.not.supported.download.content": "形式を表示できません。\nこのリンクをクリックするとファイルをダウンロードできます。"

ko.json :
  "yuv.viewer.not.authorized": "파일 미리 보기 권한이 없습니다.",
  "yuv.viewer.not.found": "파일을 찾을 수 없습니다.",
  "yuv.viewer.not.supported": "형식이 지원되지 않습니다.",
  "yuv.viewer.not.supported.download.content": "형식을 표시할 수 없습니다.\n이 링크를 클릭하여 파일을 다운로드할 수 있습니다."

nl.json :
  "yuv.viewer.not.authorized": "Niet gemachtigd om voorbeeld van bestand weer te geven.",
  "yuv.viewer.not.found": "Kan het bestand niet vinden.",
  "yuv.viewer.not.supported": "Formaat niet ondersteund.",
  "yuv.viewer.not.supported.download.content": "Kan het formaat niet weergeven.\nU kunt op deze link klikken om het bestand te downloaden."

th.json :
  "yuv.viewer.not.authorized": "ไม่ได้รับอนุญาตให้ดูตัวอย่างไฟล์",
  "yuv.viewer.not.found": "ไม่พบไฟล์",
  "yuv.viewer.not.supported": "ไม่รองรับรูปแบบนี้",
  "yuv.viewer.not.supported.download.content": "ไม่สามารถแสดงรูปแบบได้\nคุณสามารถคลิกลิงก์นี้เพื่อดาวน์โหลดไฟล์"

tr.json :
  "yuv.viewer.not.authorized": "Dosyayı önizleme yetkisi yoktur.",
  "yuv.viewer.not.found": "Dosya bulunamadı.",
  "yuv.viewer.not.supported": "Format desteklenmiyor.",
  "yuv.viewer.not.supported.download.content": "Format görüntülenemiyor.\nDosyayı indirmek için bu linke tıklayabilirsiniz."

vi.json :
  "yuv.viewer.not.authorized": "Không được phép xem trước tập tin.",
  "yuv.viewer.not.found": "Không tìm thấy tập tin.",
  "yuv.viewer.not.supported": "Định dạng không được hỗ trợ.",
  "yuv.viewer.not.supported.download.content": "Không thể hiển thị định dạng.\nBạn có thể nhấp vào liên kết này để tải xuống tập tin."

zh.json :
  "yuv.viewer.not.authorized": "未授權預覽檔案",
  "yuv.viewer.not.found": "未找到檔案。",
  "yuv.viewer.not.supported": "格式不受支援。",
  "yuv.viewer.not.supported.download.content": "無法顯示格式。\n您可以按一下這個連結以下載檔案。"

Using the Viewer-Service with self-signed certificates

In this case, the Viewer-Service is used in an environment that used a self-signed certificates specific configurations are needed and are described here: 
Configuring-the-viewer-service-to-accept-self-signed-certificates

Extending the Viewer-Service

For a description of how to extend the viewer-service, see the readme here: GitLab

Outlook: We are working on a new customizing concept that allows us to extend the viewer service with additional components by building and deploying the viewer service itself.

The Viewer Service API

For the viewer to process a request, a path pointing to the file to be displayed must be accessible. The mimeType or size may be omitted here if provided in the Request Header.

URL/?path={pathToTheFile}&mimeType={mimeType}&size={fileSize}

• path: the direct path from where the file can be loaded (required)
• mimeType: the file's mimeType (If not provided, the service tries to get it from request headers. If also not available there, an error page is shown.)
• fileSize: the size of the file (If not provided, the service tries to get it from request headers. If also not available there, an error page is shown.)

Custom Viewer Configuration

The use of the viewer-service components can be extended in the client configuration file main.json. The following configuration shows the default configuration used by the client:

"preview": {
  "viewers": [
    {
      "mimeType": ["application/json", "text/json", "text/plain", "text/xml", "text/java", "text/javascript", "application/javascript", "text/html", "text/markdown", "text/x-web-markdown", "text/x-markdown"],
      "viewer": "viewer/view/api/monaco/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}"
    },
    {
      "mimeType": ["audio/mp3", "audio/webm", "audio/ogg", "audio/mpeg", "video/mp4", "video/webm", "video/ogg", "application/ogg"],
      "viewer": "viewer/view/api/video/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}"
    },
    {
      "mimeType": ["image/tiff","image/jpeg", "image/png", "image/apng", "image/gif", "image/svg+xml", "image/webp"],
      "viewer": "viewer/view/api/img/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}"
    },
    {
      "mimeType": ["message/rfc822", "application/vnd.ms-outlook"],
      "viewer": "viewer/view/api/mail/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}"
    }
  ]
}

• mimeType may also be a string Array, containing multiple mime types
• viewer defines the internal viewing component to be used as there are monaco (see: https://microsoft.github.io/monaco-editor/), video, img, and mail. All URL parameters are necessary for the client so that it can find the document file (path), and show the correct language labels as well as the theme that is configured by the user. 

Example for the viewing of markdown-formatted files via an external viewing component:

"preview": {
  "viewers": [
    {
      "mimeType": "text/x-web-markdown",
      "fileExtension": ["md"]
      "viewer": "{pathtoapplicationindex.html}?path=${path}#locale=${locale}&direction=${direction}&theme=${theme}&accentColor=${accentColor}"
    }
  ]
}

Additionally, non-mandatory parameters are provided (corresponding to the client settings)

• darkMode: boolean = sets class dark to the body (default = false).
• direction: string = sets the document direction to the body (default = „LTR“).
• accentColor: string = sets the accent color as css variable to the html tag (default = „“).
• local: string = sets the document locale to the html tag (default = „en-US“).
• fileExtension: string =  if mimeType is ambiguous, provides a more clear file specification.

Additionally, the provided parameters will be passed to the custom viewer.

Summary

You were provided with an overview of the file types supported by the viewer service and its concept of extensibility.