TABLE OF CONTENTS


Overview

This widget empowers the user to show the Media sorted by Most popular with the ability to navigate through the most popular media without passing in any input properties. 


Before you start


Add the following HTML tag into the body section of your Web App code to add the Most Popular Media widget. This will fetch the media against the portal you have bound and show the Media filtered by Most Popular view.


You have four ways to use this widget, which are as follows:


This widget fetches the most popular media and shows the most popular media in a carousel allowing you to navigate back and forth. In order to add the carousel widget sorted by most popular, add the following script.

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

To learn how to bind the events and to know the available events for this widget please refer to the documentation: Bind Carousel Widget Events



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

Note: You don't need to pass in any input properties and this widget will fetch the media by its popularity and show it in a carousel view.



2. Collage

This widget fetches the most popular media and shows the most popular media in a collage. In order to add the collage widget sorted by most popular, add the following script.

<vdz-mashup-mostpopular-collage id="mostPopularCollage" data-widget=’true’></vdz-mashup-mostpopular-collage>

To learn how to bind the events and to know the available events for this widget please refer to the documentation: Bind Collage Widget Event



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

Note: You don't need to pass in any input properties and this widget will fetch the media by its popularity and show it in a collage view.



3. Detail View

This widget fetches the most popular media and shows the most popular media in detail view. In order to add the detail view widget sorted by most popular, add the following script.

<vdz-mashup-mostpopular-detailview id="mostPopularDetailView" data-widget=’true’></vdz-mashup-mostpopular-detailview>

To learn how to bind the events and to know the available events for this widget please refer to the documentation: Bind Detail View Event



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

Note: You don't need to pass in any input properties and this widget will fetch the media by its popularity and show it in a detail view.


This widget fetches the most popular media and shows the most popular media in gallery view. In order to add the gallery view widget sorted by most popular, add the following script.

<vdz-mashup-mostpopular-galleryview id="mostPopularGalleryView" data-widget=’true’></vdz-mashup-mostpopular-galleryview>

To learn how to bind the events and to know the available events for this widget please refer to the documentation: Bind Gallery View Events



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

Note: You don't need to pass in any input properties and this widget will fetch the media by its popularity and show it in a gallery view.




<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-mostpopular-carousel id="mostPopularCarousel" data-widget=’true’></vdz-mashup- mostpopular-carousel >

    <script>
        document.getElementById("mostPopularCarousel").addEventListener("on-mashups-loading", (event) => {
            console.log(event);
            console.log("onMashupLoading");
        });
        document.getElementById("mostPopularCarousel").addEventListener("on-mashups-loaded", (event) => {
            console.log(event);
            console.log("onMashupLoaded")
        });
        document.getElementById("mostPopularCarousel").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.