Changing a repeater box background color based on what URL source is in the video player

Ask the community
, ,
4

@bwprado
This is what I’ve got so far… it’s just turning every single box background to yellow (#ffcc37) when I click on the container.

import wixData from 'wix-data';

$w.onReady(function () {

    wixData.query("OrchestralXylophone")
        .find()
        .then((results) => {
            $w(`#listRepeater`).data = results.items;
        })
        .catch((err) => {
            let errorMsg = err;
        });

    $w(`#listRepeater`).onItemReady(($w, itemData) => {
        console.log(itemData); {
            $w(`#container1`).onClick((event) => {
                let videoSrc = $w("#videoPlayer1").src;
                $w("#videoPlayer1").src = (itemData.videos);

                $w('#container1').onClick((event) => {
                    $w("#videoPlayer1").togglePlay()
                        .then(() => {
                            console.log("Done with play");

                        });

                });
            });
        }

    })
})

$w.onReady(function () {

    $w('#container1').onClick(({ context }) => {
        let $item = $w.at(context)
        let videoSrc = $item("#videoPlayer1").src;

        $w('#listRepeater').forEachItem(($i) => {
            $i('#box1').style.backgroundColor =
                $w(videoSrc).src === $i('#videoPlayer1').src ?
                '#ffffff' :
                '#ffcc37'
        })
    })
})

I’m wondering if there might be some use of async/await?

Perhaps the logic would be something like:

There is a function that determines which video isPlaying and retrieves its url src.

The repeater items await the result of that function, and if the video that belongs to that item isPlaying, then it turns yellow.

I’m a rookie at all this so it all seems like rocket science to me…

Perhaps there is a completely different way to do this? Can I just reset the box background color by clicking on a different item on the page?

I’ve noticed on the Wix Learn course pages, that every time the video switches, it actually switches the URL. Does that info change this process?

Thanks for your help!