Media Thumbnail

Description

A component that displays list of clickable media on a table form.

System Dependencies

Installation

The package can be installed via npm:

npm install empower-display --save

Configuration

import { MediaThumbnail } from 'empower-display';
```````````````````````````````````````````````````````````

const mediaThumbProps = {
        title: <><h3>Test title</h3></>,
        data: [
            {
                filename: '123.mp4',
                type: 'mp4',
                id: '1',
            },
            {
                filename: 'testimage.jpg',
                type: 'jpg',
                thumbnailPath: 'https://upload.wikimedia.org/wikipedia/commons/e/ee/Sample_abc.jpg',
                id: '2',
            },
            {
                filename: 'testimage2.png',
                type: 'png',
                id: '3',icon
            },
            {
                filename: 'audio.mp3',
                type: 'mp3',
                id: '4',
            },
            {
                filename: 'docu.docx',
                type: 'docx',
                id: '5',
            },
            {
                filename: 'testpdf.pdf',
                type: 'pdf',
                id: '6',
            },
        ],
    }
    
    
const getActions = (value, data) => {
    switch (data) {
        case 'mediaThumb':
            // insert actions here
            break;
    }

}
    
``````````````````````````````````````````````````````````````````````````    

<h3>Media Thumbnail</h3>
  <MediaThumbnail
      {...mediaThumbProps}
      getActions={val => getActions(val, 'mediaThumb')}
  />

Properties

Parameter	Data Type	Constraint	Description

Parameter

Data Type

Constraint

Description

title

String/Html

Optional

Title of the media thumbnail section.

data

Array

Required

Array of an object consists of the following:

id - string - identifier of the filename upon clicking
type - string - type of the filename, e.g. (png,jpg,pdf,docx)
filename - string - The filename that would be displayed on the container.
thumbnailPath - string - path of the image file if the file type is png or jpg, better if cdn path.

getActions

Function

Required

This is the function that will be called upon onclick on each media.

References

Repository Link: https://bitbucket.org/empowerteams/empower-display/src/master/

NPM Package: npm: empower-display

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git