Hide/show video player in repeater based on database entry

Ask the community
,
1

I started off with creating two separate fields in the database; one for photo uploads and one for video uploads. There are also two separate upload buttons for these fields now.

The repeater where the images and/or videos are shown now contains an image element and a video player for each item; both connected to the corresponding fields in the database. My approach now is to hide or show the video player based on the entries in the database.

This is a code i used to hide and show text fields and it works. But unfortunately, the video player still is shown even if the item in the database has no video uploaded.

$w.onReady(function () {
$w(“#dataset2”).onReady(() => {
var item = $w(“#dataset2”).getCurrentItem();
if (item[“mainVideo”] === “” || item[“mainVideo”] === null || item[“mainVideo”] === undefined) {
$w(“#videoPlayer1”).hide();
} else {
$w(“#videoPlayer1”).show();
}
});
});

I am looking for the reason but cant find anything.

2

If I understand you correctly you want to hide the video if there is no video.

If you are using repeater you must use forEach item or onItemReady to handle repeater events.

so this is how it should look like:

$w.onReady(function () {
    $w("#dataset2").onReady(() => {
        $w('yourRepeaterId').onItemReady(($item, itemData, index) => {
            const video = itemData.mainVideo;

            if (video && video.length > 0) {
                $item('videoPlayer1').show();
            } else {
                $item('videoPlayer1').hide();
            }
        })
    });
});

I think you have connected your repeater data using dataset not via code

3

How do you even get a VideoPlayer into the repeater? I can’t seem to drag it in.