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