...

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

...

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

...

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 

...

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)

...

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

Default component: Used component.

Mimetypes: x-web-markdown, markdown

...

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)

...

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

...

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

...

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.

Localization

...

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:

en.json- name: viewerservice
  "yuv.viewer.not.authorized".
  env:
"Not  authorized to preview file.",
 "yuv.viewer.not.found": "File not found.",  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.supportedauthorized": "Format 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."

...

Custom Viewer Configuration

The use of the viewer-service components can be extended by adding a few lines to its configuration.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)

...