Introduction

The yuuvis® Momentum viewer service offers to display several common file types directly within a yuuvis® Momentum client application. It serves within the yuuvis® Momentum reference client and can readily be integrated in a custom client. It is designed 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.

Customizing

Extending the Viewer Service

For the description about 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 with 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 viewer service can be extended by adding a few lines to its configuration.

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

• mimeType may also be a string Array, containing multiple mime types
• file extension is not mandatory. Provide only if mimeType is ambiguous.

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.

Supported Types

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.

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

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

...

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, png, 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.

Default component: Used component.

Mimetypes : message/rfc822 (eml)

...

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

Extending the Viewer Service

For the description about 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 with 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 viewer service can be extended by adding a few lines to its configuration.

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

• mimeType may also be a string Array, containing multiple mime types
• file extension is not mandatory. Provide only if mimeType is ambiguous.

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.

...