Before you start

We assume that you have read one of the following articles and embedded one of the below mentioned widgets and landed on this page. If not, please refer to these articles before your start reading and implementing instructions mentioned in this article.

  1. How to use VIDIZMO Widgets
  2. How to use Media Detail View Widget
  3. How to use Media Gallery View Widget
  4. How to use Carousel Widget
  5. How to use Featured Media Widget
  6. How to use Most Popular Media Widget
  7. How to use Most Recent Media Widget
  8. How to use Most Viewed Media Widget


Playback Audio from a widget:

Get Started

This document demonstrates how to playback an audio in modal from the Detail View Widget.


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


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


Step 2:  Add the modal in the body section of your web application code to play back the audio within the modal.


<div class="custom-modal">
    <div class="modal-content">
        <span class="close-button">×</span>
        <div id="audio-player-container"></div>
    </div>
</div>


Note: The user can choose whether to playback the audio in a modal or any other way he wants.


Note: Theater mode button in the video/audio player on clicking raises an event, which the user can handle and playback the content in theater mode.



Step 3:  Add the following script in the body section of your web application code for the player to work within the modal.


<script>
    /* this modal query selector must have the class name same as of the div tag in which the 
    modal content is embedded. See step 2 */
    const modal = document.querySelector(".custom-modal");

    /* this closeButton query selector must have the class name same as of the span tag in which the 
    modal content is embedded. See step 2 */
    const closeButton = document.querySelector(".close-button");

    /* audioPlayerContainer method must have the same id of the div tag where the modal content is embedded. See step 2 */
    const audioPlayerContainer = document.getElementById("audio-player-container");

    closeButton.addEventListener("click", () => {
        audioPlayerContainer.lastElementChild.remove();
        modal.classList.toggle("show-modal");
    });

    /* The id passed in the html tag of the widget detail view as given in step 1 should be passed below in the
     DOM method */
    document.getElementById("widgetDetailView").addEventListener("on-play", (event) => {
        if (audioPlayerContainer.lastElementChild)
            audioPlayerContainer.lastElementChild.remove();
        let audioPlayer = document.createElement("vdz-mashup-audio");
        audioPlayer.setAttribute("data-widget", "true");
        audioPlayer.setAttribute("mashup-id", event.detail.mashupInfo.id);
        audioPlayerContainer.appendChild(audioPlayer);

        modal.classList.toggle("show-modal");

    });
</script>


Step 4:  Add the following style tag in the head tag of your web application code to apply the styling to your modal.


<style>
    .custom-modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 1;
        z-index: 99999;
        visibility: hidden;
        transform: scale(1.1);
        transition: visibility 0s linear 0.25s, opacity 0.25s 0s,
            transform 0.25s;
    }

    .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 1rem 1.5rem;
        width: 24rem;
        border-radius: 0.5rem;
        opacity: 1;
    }

    .close-button {
        float: right;
        width: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
        cursor: pointer;
        border-radius: 0.25rem;
        background-color: lightgray;
    }

    .close-button:hover {
        background-color: darkgray;
    }

    .show-modal {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
    }
</style>