I’m certain this has been answered here in the forums but I can’t seem to find anything directly relevant. I’m also a coding novice.
What I am doing is a repeater that functions as an audio/video player for a collection of items. Some items are audio only, and some items are video only. What I would like to do is only show the audio player when an item only has audio, and only show the video player when an item has video. What is a good way to do this?
BONUS question: Is there a way to connect isolated areas inside a single text box to different parts of a data source? Such as connecting this sentence to [word1] and then [word2]? I can only find info on connecting whole items to data.
I would say, not enough input to help you.
How is the structure of your site / repeater / database and so on ?
What do you mean, when you say —> “item” ?
Is it an entry in an Database/Datacollection?
Sure, let me see if I can give you what is helpful.
The repeater is a list of recordings on a page with each repeater displaying the title, description, image, etc plus the recording that is either shown as an audio player if it is audio, or the video player if is video. The list is pulling from a database that contains the whole set of recordings.
I just need to know how to tell the repeater to display either the audio player OR video player in each item, based on whether the database entry has audio or video. It will never be both.
Let me know if that helps. Thank you!
Hello again,
i will you just show how i would try to solve the problem.
Of course i can not see your whole project, so it’s just an example…
- So let’s say you have a data-collection (DATABASE) where you have all your DATA, which could look like this one…
As you can see you have all the items (“title”), all the LINKs (“videoAudioUrl”) and the types of all the files (“mediaType”).
Now it is easy to seperate between [audio] and [video].
Here a small code-example for you, how it could work…
function video_audio_choice (parameter) {
let DatenQuery = wixData.query("test1");
DatenQuery.eq("title", "myItem");
DatenQuery.find()
.then((Results) => {console.log("All ITEMS loaded")
let foundedItems = Results.items;
let dataLength = foundedItems.length;
console.log(dataLength)
let COUNTER = 0
for (var i = 0; i < dataLength; i++){
let toINSERT = {
"title": foundedItems[i].title,
"videoAudioUrl": foundedItems[i].videoAudioUrl,
"mediaType": foundedItems[i].mediaType,
}
if (foundedItems[i].mediaType!="xxx"){COUNTER = COUNTER + 1, console.log("Video-File" + COUNTER + " founded.")}
}
})
}
export function BTNstart_click(event) {video_audio_choice ()}
PRESS-F12 in your “Google-Browser” and select “CONSOLE” to show the results of the function.
Good luck.
EDIT:
The results shoul then look like these ones…
[5] of [8] files were recognized as VIDEO-FILES, now you could react!
Thanks for the response. If I’m understanding you correctly, your code is looking to distinguish between a video or audio file. However, the Wix database provides fields already for video or audio types.
So I’m thinking the code just needs to see which field is occupied to decide whether or not to display each type of player.
If the video player sees nothing in the video field, it doesn’t display.
If the audio player sees nothing in the audio field, it doesn’t display.
Does that make sense?
Yes it does! Didn’t knew that there are such options (never used them before).
So it is much more simple 
So you have just to make the difference in which column the LINKS has been found or something like this.
Try to change the code shown above, for your own needs.
Ok thanks. I don’t really know exactly how to read the code above or what to edit, or where to apply it, but I appreciate your help.
Ok, give me a couple of time, i will try to help you …
Here’s what it looks like. I simply want the Audio Player to be gone if there is nothing in the audio field. And I want the Video Player to be gone if there is nothing in the video field. My trouble is I simply don’t know how to write the basic code for it to do that, or where to put the code. 
Give me some facts:
-
What is the name of your data-collection?
-
So you have an “audioPlayer1” and “videoPlayer1”? The nameIDs are correct like that?
-
In which column you can indentify both types (audio & video), you have a column, something like —> INDEX ?
-
How looks like your REPEATER ?
-
The action starts with a click on a button (showing/hiding Player) ?
-
Or you wanna have the action just right from the beginning (automatic after site is loaded) ?
EDIT:
Can’t see any CHOICE-MENU, where you choose the video/audio-file.
OK, let’s do it.
What you have to do now?
- You have to optimize your data-collection/dataset/repeater.
The facts:
-
Data-collection = “LFC Recordings”
-
Dataset = “dataset1” ??? (i hope it is, if not so modify)
-
important columns in the data-collection —> “Audio” / “Video”
-
Audio-Player called —> “audioPlayer1”
-
Video-Player called —> “videoPlayer1”
-
Repeater called —> “repeater1”
-
A button in the repeater called —> “button1”
-
and the code, which we will modify together…
export function button1_click(event) {
let $item = $w.at(event.context)
let choosenItem = $item("#dataset1").getCurrentItem();
let ItemTitle = choosenItem.title
let MediaType = choosenItem.mediaType
if (choosenItem.video!=0) {console.log("Play-Video")
$w('#videoPlayer1').show()
$w('#audioPlayer1').hide()
}
else{console.log("Play-Audio")
$w('#videoPlayer1').hide()
$w('#audioPlayer1').show()
}
console.log(ItemTitle)
console.log(MediaType)
console.log($w('#dataset1').getTotalCount())
}
First check the first 7-points before we continue with the code !
If you will have some issues/problems to complete this 7-points…
CHECK-LIST:
- Data-collection = “LFC Recordings”
- Dataset = “dataset1” ??? (i hope it is, if not so modify)
- important columns in the data-collection —> “Audio” / “Video”
- Audio-Player called —> “audioPlayer1”
- Video-Player called —> “videoPlayer1”
- Repeater called —> “repeater1”
- A button in the repeater called —> “button1”
…so tell me.
Thank you! Let me get back to this later tonight and I’ll let you know. I really appreciate your attention to this.
Ok disregard my previous post that I deleted, I figured out what I did wrong.
So I have entered the code into the top of the page code console, and all of the names are correct, but it is not producing any results.
This item has a video file and no audio file, but the audio player is present.
Hello again,
i have taken some time to create an example for you, which demonstrates, how your repeater, your database and all interactions could and should look like.
- The better structure of your database, the faster an more efficient is your site.
Here you can see an example-site i’ve created 4 you…
https://mt2-king.wixsite.com/wixworld
And here you can see the whole code which was written for all that action…
import wixData from 'wix-data';
$w.onReady(function() {
})
export function BIMGclose_click(event) {
$w("#videoPlayer1").stop()
close_VideoPlayer();
show_Repeater();
}
export function button1_click(event) {
let $item = $w.at(event.context)
let choosenItem = $item("#dataset1").getCurrentItem();
let Title = choosenItem.title
let Artist = choosenItem.artist
let Description = choosenItem.videoDescription
let VideoType = choosenItem.videoType
let VideoIndex = choosenItem.video
let VideoUrl = choosenItem.videoUrl
let MediaType = choosenItem.mediaType
let IMGtitle = choosenItem.image
if (choosenItem.video!=0) {console.log("Play-Video")
hide_Repeater()
$w('#BOXvideo').show()
$w('#BOXvideo').expand()
$w('#audioPlayer1').hide()
$w("#videoPlayer1").src = VideoUrl
$w('#TXTtitle2').text = Title
$w('#TXTartist2').text = Artist
$w('#TXTdescription2').text = Description
$w('#TXTvideoIndex2').text = VideoIndex
$w('#TXTvideoType2').text = VideoType
$w('#IMGtitle2').src = IMGtitle
}
else{console.log("Play-Audio")
show_Repeater()
$w('#BOXvideo').hide()
$w('#audioPlayer1').show()
$w('#audioPlayer1').expand()
}
console.log(Title)
console.log(VideoUrl)
console.log(MediaType)
console.log($w('#dataset1').getTotalCount())
}
function hide_Repeater (parameter) {
$w('#repeater1').hide('FadeOut')
.then(()=>{$w('#repeater1').collapse()})
}
function show_Repeater (parameter) {
$w('#repeater1').expand()
.then(()=>{$w('#repeater1').show('FadeIn')})
}
function close_VideoPlayer (parameter) {
$w('#BOXvideo').hide('FadeOut')
//.then(()=>{$w('#BOXvideo').collapse()})
}
The site and the code are not 100% completed, but everything should work fine.
Try to understand that code (everything was writen as much easy as i could do it).
To the mainpart this code concentrate just on VIDEO (the AUDIO-part is not completed and has to be continued).
And here is a picture of the database (data-collection)…
I realized that the event on your original code was for a button I didn’t have, so I changed it to the “viewportEnter” event for the repeater. This got the audio player to disappear, but it disappears on every item, including audio items.
Your code example page isn’t really what I’m trying to do. Thank you anyway for your time and help. I really appreciate the effort; it helped me learn a lot.
