VlocityDCMediaViewer

vlocity-dc-media-viewer is a web component for cycling through media resources, like a carousel (slideshow).

Features
1.Media Carousel
2.Image and video type support
3.Thumbnails

Constructor

new VlocityDCMediaViewer()

Properties:

Name Type Description

mediaSource

Array.<MediaSourceObject>

Media source object that you want to carouse through.

Properties

Name	Type	Description
`contentType`	string	indicates type of content i.e. image or video.
`description`	String	indicates description of image.
`url`	String	indicates url of the media resource.

displayThumbnails boolean If set to true thumbnails will be displayed. If set to false dot indicators will be displayed.

Example

Sample Usage -

Include the component in your template simply by adding vlocity-dc-media-viewer custom tag

<vlocity-dc-media-viewer .mediaSource="${offer.attachments}" .displayThumbnails ="${true}" ></vlocity-dc-media-viewer>

| Attribute Name    | Type Expected                                                                   | Required |
|-------------------|---------------------------------------------------------------------------------|----------|
| mediaSource       | It expects an Array of MediaSource object.                                      | required |
|                   |                                                                                 |          |
|                   |  Media Source Object Properties:                                                |          |
|                   |      | Name        | Type   | Description                                    |  |          |
|                   |      |-------------|--------|------------------------------------------------|  |          |
|                   |      | contentType | String | Indicates type of content i.e. image or video. |  |          |
|                   |      | description | String | Indicates description of image.                |  |          |
|                   |      | url         | String | Indicates url of the media resource.           |  |          |
|                   |                                                                                 |          |
| displayThumbnails | It expects a boolean value.                                                     | optional |

--------------------------------------------------------------------------------------------------------------------------------------
 KEY INFO -

 events fired : none

 events registered : none

 Dependency - vlocity-dc-media-viewer is an independent component and has no dependency on parent component.

               | Parent Component | Expected Child Component  |
               |------------------|---------------------------|
               | none             | none                      |


Sample with slots -

<vlocity-dc-media-viewer>
   <span slot="{slot_name}">
     Custom HTML elements goes here
   </span>
</vlocity-dc-media-viewer>

List of available slots -

| Slot names                    | Dynamic     | Description                 | Impact               |
|-------------------------------|-------------|----------------------------------------------------|
| dc-media-viewer-wrapper       | -           | Wrapper for template        | Replaces DOM         |
| dc-left-icon                  | -           | Left arrow icon             | Replaces DOM         |
| dc-right-icon                 | -           | Left arrow icon             | Replaces DOM         |
| dc-media-index-{media_index}  | -           | Each Media                  | Adds DOM Below       |

Extends

LitElement

Members

(static, readonly) properties

Properties that will be available in the binding system

Properties:

Name	Type	Description
`mediaSource`	Array.<MediaSourceObject>	Media source object that you want to carouse through
`currentMediaIndex`	number	Index of current media being displayed

Methods

(static) changeMediaIndex(index, eventSourceArrow)

This function is called on click of next and prev carousel navigation arrows.

Parameters:

Name	Type	Description
`index`	number	current media index
`eventSourceArrow`	boolean	true if event source is Arrows, false if event source is dot indicator or thumbnail.

(static) connectedCallback()

Invoked when vlocity-dc-media-viewer component is added to the document’s DOM.