Hide audio player from repeater list

Ask the community
, ,
1

Hi ! I’m scratching my head there, hope I can explain my problem clearly

I try to set a repeater linked to a database in order to display images, texts, but also audio. However, some of the elements don’t have any mp3 to be linked to, so I’d like to make the audio player disappear when this is the case.

I tried a lot of codes already that I found on the pages below, but none of them works. No matter what I do, the audio players are always displayed…

https://www.wix.com/corvid/forum/community-discussion/if-else-collapse-for-repeater-items
https://www.wix.com/corvid/forum/community-discussion/hide-an-audio-player-in-repeater-if-there-is-no-audio-file-present-in-dataset?origin=auto_suggest
https://www.wix.com/corvid/forum/community-discussion/collapse-empty-elements-in-a-repeater

Can you see what I’m doing wrong there ?? These are some examples of the codes I tried

$w.onReady(() => {
$w( “#listRepeater” ).onItemReady( ($w, itemData, index) => {
const item = $w( “#dataset1” ).getCurrentItem();
if (!item.mp3) {
$w( “#audioPlayer1” ).hide();
}
});
});

$w( “#listRepeater” ).onItemReady(($w, itemData, index) =>{
if (!itemData.mp3) {
$w( “#audioplayer1” ).collapse();
}
});

$w( “#listRepeater” ).onItemReady( ($w, itemData, index) => {
if (! itemData.mp3) { // based on your “empty status” you need to change this line.
$w( “#audioplayer1” ).hide();
}
});

$w.onReady(() => {
$w( “#dataset1” ).onReady(() => {
// Gets the current item properties and stores them in a variable called item
const item = $w( “#dataset1” ).getCurrentItem();
// Checks if the current item has a value in the “text” field
if (!item.hideMp3) {
// Collapses the audio player if there is no value for “text”
$w( “#audioPlayer1” ).hide();

    } 
});

});

2

You need to use the Repeated Item Scope , As you can see in the API, you will be using $item in the onItemReady() function and not $w. Also, see the sample code snippets in the onItemReady() API .

3

Thank you for your help @Yisrael, but I don’t quite understand how this works… I suppose that I should use the following code, but I don’t know how to add the “hide” property when there is no value in the database…

$w ( “#listRepeater” ). onItemReady ( ( $item , itemData , index ) => {
$item ( “#audioPlayer1” ). text = itemData . mp3 ;
} );

I’m trying my best but I can’t get it work…

4

Something like this:

$w("#listRepeater").onItemReady(($item, itemData, index)=> {
  if(itemData.mp3 === undefined || itemData.mp3 === null)
  {
    $item("#audioPlayer1").hide();
  }
  $item("#audioPlayer1").text = itemData.mp3; // ???
});

What are you trying to do with this:

$item("#audioPlayer1").text = itemData.mp3; // ???

The AudioPlayer doesn’t have a text property. Refer to the AudioPlayer API for more on how to use it, and for sample code snippets.

5

To add to Yisrael’s comment above, you can see the reason why you need to change from $w to $item in this old forum post here from 2018 where Sam gives you a complete breakdown.
https://www.wix.com/corvid/forum/tips-tutorials-examples/removal-of-the-w-parameter-from-event-handlers

If you want to use the videoplayer collapse if there is no video file like here.
https://support.wix.com/en/article/corvid-tutorial-hiding-a-video-player-when-there-is-no-video-to-play

Then you need to be adding a dataset onReady function here too, if you don’t use the dataset onReady and just use the repeater onReady, then it will simply show all the audio player in all your repeated containers.

The old way of writing is still supported for now and you can do it as shown here with the audio player showing if there is an mp3 file or hiding and showing a no mp3 text box if field is empty.

$w.onReady(() => {
$w("#dataset1").onReady(() => {
$w("#repeater1").onItemReady(($w, itemData, index) => {
const item = $w("#dataset1").getCurrentItem();
if (!item.mp3) {
$w("#audioPlayer1").hide();
$w("#noMP3").show();
}
});
});
});

However, as Yisrael has stated to you in his reply, that with the change you need to be using $item now.

You should be looking at using this newer way all the time and not just keep with the old way as there will come a time when the old way is no longer supported and you will need to go through your code and replace it on your own website.

So, as Yisrael has shown in his example, then you can simply do it as…

$w.onReady(() => {
$w("#dataset1").onReady(() => {
$w("#repeater1").onItemReady(($item, itemData, index) => {
if (itemData.mp3 === undefined || itemData.mp3 === null) {
$item("#audioPlayer1").hide();
$item("#noMP3").show();
}
});
});
});

Finally, don’t forget to connect the audio player to your dataset for not only your audio, but also your track name and artist name as well etc.

The same with the audio player layout as well so that you can choose what parts of the audio player are actually displayed too.

6

Thank you sooooo much GOS and Yisrael ! You don’t know how much this helps me !!