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