@teamhive/content-viewers NPM

Hive Content Viewers

Various content viewer web components for displaying different types of content.

Supported Content Types

Content Type	Component
Images	`hive-image-viewer`
Videos	`hive-video-viewer`
Audio	`hive-audio-viewer`
Microsoft Documents	`hive-document-viewer`
HTML Interactives	`hive-iframe-viewer`
HTML Courses	`hive-iframe-viewer`

Usage

Installation

npm i @teamhive/content-viewers

Somewhere in your app (e.g. main.ts for Angular):

import { defineCustomElements } from '@teamhive/content-viewers/dist/loader';

defineCustomElements(window);

Or if you already have another stencil component library, define them separately:

import { defineCustomElements as defineHiveContentViewers } from '@teamhive/content-viewers/dist/loader';

defineHiveContentViewers(window);

Image Viewer

To leverage viewerjs built in styling, you will need to import the global stylesheet into your application (instead of us bundling it with each image-viewer instance).

@import '~viewerjs/dist/viewer.min.css';

Attributes

Attribute	Description
`src`	The location of the content.

Viewers

Viewer Component	Description
`hive-image-viewer`	The image sized to the maximum width and height without cropping or stretching.
`hive-video-viewer`	The video sized to the maximum width and height without cropping or stretching in the browser default player. Controls are enabled.
`hive-audio-viewer`	The audio loaded in the browser default player.
`hive-document-viewer`	Microsoft documents are loaded in an `iframe` using the Office Web Viewer.
`hive-iframe-viewer`	Interactives or Courses are loaded in an `iframe`.