TABLE OF CONTENTS


Before you start


Adding this widget will fetch the media against the portal you have bound and show the Media in carousel view.


Step 1: Add the following HTML in the body section of your web application code to add the carousel widget.


<vdz-mashup-carousel id="carousel" data-widget="true"></vdz-mashup-carousel>


Note: Make sure data-widget is set to ‘true’ as this applies the VIDIZMO default styling to the widget.


Other available input properties can be found below.


Step 2: Add the following Script tag into the body section of your web application code to listen to the events and see these events in the console.

<script>
    document.getElementById("carousel").addEventListener("on-mashups-loading", (event) => {
        console.log(event);
        console.log("onMashupLoading");
    });
    document.getElementById("carousel").addEventListener("on-mashups-loaded", (event) => {
        console.log(event);
        console.log("onMashupLoaded")
    });
    document.getElementById("carousel").addEventListener("on-mashups-loading-failed", (event) => {
        console.log(event);
        console.log("onMashupLoadingFailed")
    });
</script>

Other available events can be found below.



Note: Make sure the id you pass in the getElementById is the same as used in the widget tag. E.g. "carousel"



Property

Type

Default

Required

Description

search-criteria

MashupSearchCriteria

 

No

 This is an object containing criteria(s) to search mashup(s) 

keyword

string

 

No

It will search mashups against the mentioned keyword  

order-by

MashupOrderBy

 

No

It will order searched mashups according to the order-by possible values  

sort-type

SortType

 

No

It will sort searched mashups according to sort-type possible values  

 is-featured

boolean

 

No

It will search all the featured mashups of the portal 

is-global

boolean

 

No

It will search among all the mashups of the portal  

show-on-channel-library

boolean

 

No

It will search all the mashups visible on channel library of the portal  

status

MashupStatus

 

No

It will search all mashups of different status of the portal   

item-xs

number

 

No

 

item-sm

number

 

No

 

item-md

number

 

No

 

item-lg

number

 

No

 

heading

string

 

No

 It is the main heading of the widget 


All the available input properties can be found at the following article: Input properties available for widgets


Output Events for Most Popular/Most Viewed/Most Recent Media Widget


Event

Data

Scenario

on-mashups-loading

mashupSearchCriteria:MashupSearchCriteria

 

When search criteria is changed and call is not yet sent to the server.

on-mashups-loaded

mashupInfo:MashupInfo

 

Undefined is raised in case no mashups are returned from server.

on-mashups-loading-failed

exception

 

When search call has failed.

on-slide-changed

number

Latest slide number will be returned.

on-play

{ t: number, mashupInfo:MashupInfo}

This method will return time from where user wants to playback and mashup object that needs to be played.



<html>

<head>
    <meta charset="UTF-8" />
    <!-- VIDIZMO Imports -->
    <script type="text/javascript"
        src="https://vidizmo-widgets.beta.vidizmo.com/static/js/vidizmo-player/player.js"></script>
    <link rel="stylesheet" href="https://vidizmo-widgets.beta.vidizmo.com/static/compiled/widget/widgets.css" />
    <script type="text/javascript"
        src="https://vidizmo-widgets.beta.vidizmo.com/static/compiled/widget/widgets.js"></script>
</head>

<body style="margin: 20px;">
    <vdz-mashup-carousel id="carousel" data-widget="true" page-size-md="4"
        search-criteria='{"sortType":"ASC","pageSize":36,"isGlobal":true,"showOnChannelLibrary":true,"isFeatured":true}'>
    </vdz-mashup-carousel>

    <script>
        document.getElementById("carousel").addEventListener("on-mashups-loading", (event) => {
            console.log(event);
            console.log("onMashupLoading");
        });
        document.getElementById("carousel").addEventListener("on-mashups-loaded", (event) => {
            console.log(event);
            console.log("onMashupLoaded")
        });
        document.getElementById("carousel").addEventListener("on-mashups-loading-failed", (event) => {
            console.log(event);
            console.log("onMashupLoadingFailed")
        });
    </script>

</body>

</html>


Next Steps

You can playback the content by simply clicking on the content within the Media Library Gallery Widget. Upon clicking the content, an event "onPlay()" would be raised and listened to. You will get two properties i.e. "Timestamp" and Mashup id which needs to be passed into the video/audio playback widget to be able to play the audio/video.



You can learn more about this in the following articles: