Overview

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


Before you start


Add the Most Recent Media Widget

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


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


1. Carousel

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

<vdz-mashup-mostrecent-carousel id="mostRecentCarousel" data-widget=’true’></vdz-mashup-mostrecent-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 recent media and shows the most recent media in a collage. In order to add the collage widget sorted by most recent, add the following script.

<vdz-mashup-mostrecent-collage id="mostRecentCollage" data-widget=’true’></vdz-mashup-mostrecent-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 recent media and shows the most recent media in detail view. In order to add the detail view widget sorted by most recent, add the following script.

<vdz-mashup-mostrecent-detailview id="mostRecentDetailView" data-widget=’true’></vdz-mashup-mostrecent-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.


4. Gallery 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-mostrecent-galleryview id="mostRecentGalleryView" data-widget=’true’></vdz-mashup-mostrecent-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.



Sample Code - VIDIZMO Most Recent Media Carousel Widget


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

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