TABLE OF CONTENTS

Before you start

    

Adding this widget will fetch the media against the portal you have bound and show the Media in Gallery view. 
Other available input properties for this widget can be found below.


Get Started


<vdz-mashup-gallery data-widget="true"></vdz-mashup-gallery>
Other input properties can be found below.


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


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


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


Other available events can be found below.



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

page-size

number

 -

No

It will set the page size for the searched mashups list  

page-index

number

 -

No

It will set page to a specific index against the searched mashups list, page index starts from 0 

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  

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



Method

Params

Return Type

Description

search

MashupSearchCriteria

void

This method will initiate a search depending on provided search criteria.

forceRefresh

-

void

This method will initiate a search depending on search criteria but it will make sure that data is not served from cache.



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-page-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="{portal-address}/static/js/vidizmo-player/player.js"></script>
    <link rel="stylesheet" href="{portal-address}/static/compiled/widget/widgets.css" />
    <script type="text/javascript" src="{portal-address}/static/compiled/widget/widgets.js"></script>
</head>

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

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

</body>

</html>


Additional Widget(s) Integration

You can also add the following widgets with the Media Gallery View Widget.


1. Adding the Category Filter Widget

This widget integrated with Media Gallery View Widget allows you to filter out the media based on the content's category.


Get Started


Step 1:  Add the following HTML into the body of your web application code to add the category filter widget.


<vdz-library-filter id="widgetLibraryFilter" data-widget="true"></vdz-library-filter>


The screenshot below shows the Category Filter Widget. 



Note: The category filter widget is not a standalone widget and requires the Media Library Gallery View/Detail view widget to work.



Input Properties for Category Filter Widget:


Property

Type

Default

Required

Description

show-mashup-count

boolean

true

No

When true, count of number of mashups inside category will appear with category title.

show-all-category-option

boolean

true

No

When true, ‘All’ option will appear In category tree view. This will help to see all mashups existing in all categories.


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


Method(s) for Category Filter Widget:


Method

Params

Return Type

Description

filter

CategoryId: number

void

Use this method to filter search results by category. Pass category id as parameter, or -1, if you want to filter by all categories.


Output Event(s) for Category Filter Widget:


Method

Params

Return Type

Description

on-filter

CategoryId: number

void

Use this method to filter search results by category. Pass category id as parameter, or -1, if you want to filter by all categories.

       

<html>

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

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

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

</body>

</html>


2. Adding the Library Filter Widget

This widget integrated with Media Gallery View Widget allows you to filter out the media based on processed state, format, Author, Custom Attributes, and Tags. 


Get Started


Step 1: Following selector can be added in the body of your web application code to add the library filter widget.


<vdz-library-filter data-widget="true" id="widgetLibraryFilter"></vdz-library-filter>


The screenshot below shows the Library Filter Widget.



Note: The Library filter widget is not a standalone widget and requires the Media Library Gallery View/Detail View widget to work.


Input Properties for Library Filter Widget:


Property

Type

Default

Required

Description

show-processed-state-filter

boolean

true

No

When true, only then processed state filter will appear.

show-mashup-format-filter

boolean

true

No

When true, only then mashup format filter will appear.

show-author-name-filter

boolean

true

No

When true, only then author name filter will appear.

show-custom-attribute-filter

boolean

true

No

When true, only then custom attribute filter will appear

show-tags-cloud-filter

boolean

true

No

When true, only then tag cloud filter will appear.


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


Output Events for Library Filter Widget:


Event

Data

Scenario

on-filter-by-mashup-status

(applicable for admin review only)

action: (Apply, Remove)

data: MashupStatus

 

When user tries to filters mashups by status.

on-filter-by-processed-state

action: (Apply, Remove)

data: string

 

When user tries to filters mashups by processed state.

on-filter-by-mashup-format

action: (Apply, Remove)

data: MashupFormat

 

MashupFormat possible values:

Audio, Collection, Document, 

Image, Playlist, Presentation,

Video, Course, Quiz, Survey, Live, SCORM

 

When user tries to filter mashups by mashup format.

on-filter-by-author-name

action: (Apply, Remove)

data: string

When user tries to filter mashups by author name.

on-filter-by-custom-attribute

action: (Apply, Remove)

data: string

When user tries to filter mashups by custom attribute.



Note: You must have at least one of the aforementioned events within your VIDIZMO portal to be able to see that within the widget. You won't be able to see these events otherwise.




<html>

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

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

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

</body>

</html>


3. Media Search Widget

This widget integrated with Media Detail View Widget allows you to search the media based on the keywords.


Get Started


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


<vdz-mashup-filter show-search-box="true" show-forced-refresh-icon="true" data-widget="true"></vdz-mashup-filter>


The screenshot below shows the Library Filter Widget.



Note: The Media Search widget is not a standalone widget and requires the Media Library Detail/Gallery widget to work.


Input Properties for Media Search Widget


PropertyTypeDefaultRequiredDescription
show-search-boxbooleantrueNoWhen true, input field will be available to search using keywords.
show-forced-refresh-iconbooleantrueNoWhen true, refresh mashup button will be visible


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




<html>

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

<body style="margin: 20px;">
    <vdz-mashup-filter show-search-box="true" show-forced-refresh-icon="true" data-widget="true"></vdz-mashup-filter>
    <vdz-mashup-detailview id="detail-view" data-widget=’true’ page-size-md="4"
        search-criteria={"sortType":"ASC","pageSize":36,"isGlobal":true,"showOnChannelLibrary":true,"isFeatured":true}>
    </vdz-mashup-detailview>

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

</body>

</html>




<html>

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

<body style="margin: 20px;">
    <vdz-mashup-filter show-search-box="true" show-forced-refresh-icon="true" data-widget="true"></vdz-mashup-filter>
    <vdz-category-filter id="widgetCategoryFilter" data-widget="true"></vdz-category-filter>
    <vdz-library-filter id="widgetLibraryFilter" data-widget="true"></vdz-library-filter>
    <vdz-mashup-gallery id="gallery" data-widget="true" page-size-md="4"
        search-criteria={"sortType":"ASC","pageSize":36,"isGlobal":true,"showOnChannelLibrary":true,"isFeatured":true}>
    </vdz-mashup-gallery>

    <script>
        document.getElementById("widgetCategoryFilter").addEventListener("on-filter", (event) => {
            console.log(event);
        });
        document.getElementById("widgetLibraryFilter").addEventListener("on-filter", (event) => {
            console.log(event);
        });
        document.getElementById("gallery").addEventListener("on-mashups-loading", (event) => {
            console.log(event);
            console.log("onMashupLoading");
        });
        document.getElementById("gallery").addEventListener("on-mashups-loaded", (event) => {
            console.log(event);
            console.log("onMashupLoaded")
        });
        document.getElementById("gallery").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 can learn more about this in the following articles: