@teamhive/content-viewers

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.