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

Ask the community
, ,
1

I have a repeater that acts as a video playlist selector.

I have attached a box to each item in the repeater that I would like to be able to change background color depending on what video source is in the video player.

That way, a viewer would know which video on the playlist they are currently watching.

Examples:

3532×1704 412 KB

Any help is much appreciated! I know something like this is possible since the example is from a Wix site!

@amandam @russian-dima Any ideas?

2

It is not as easy as you think, but of course it is possible.
You have to loop through all the repeater searching for the item that have the same source as the current displayed video. It would be something like this:

$w.onReady(() => {
  $w('#repeaterVideoItem').onClick(({ context }) => {
    let $item = $w.at(context)
    $w('#currentVideo').src = $item('#repeaterVideoItem').src

    $w('#repeater').forEachItem(($i) => {
      $i('#repeaterVideoItem').style.backgroundColor =
        $w('#currentVideo').src === $i('#repeaterVideoItem').src
          ? '#3637f5'
          : '#ffffff'
    })
  })
})

Remember to change the elements ids to the ones on your project.

PS: Not tested.

3

I’m getting this error:

Property ‘at’ does not exist on type ‘$w’.

The other problem I see with this that I’ve been struggling with, is that of course I can get the box in the repeater to change the background color with a simple onClick, but once the color is changed, it doesn’t change back like the Wix Learn example.

If anybody knows who worked on the Wix Learn pages, it would be extremely helpful for me to get in touch with them, becasue those are the exact features I’m looking for in order to launch my courses page!

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!

5

Now that you posted your code, I can better comment it.

Your logic is sound, but you don’t have the syntax to translate to code yet.

When I’m on my PC, I can take a look at your code properly, but at glance I can see a few mistakes.

6

That would be great! For now I’ve gotten this code below to work, but it’s only relevant to clicking and doesn’t necessarily work 100% as intended. If you have time, I’d love to see the syntax you’re thinking because I’ve tried 20-30 different things that all failed haha… cheers!

let selectedRecord;

$w.onReady(function () {
            handleSelectItem();

            function handleSelectItem() {
                $w("#box1").onClick((event, $w) => {
                    if (selectedRecord) {
                        selectedRecord.style.backgroundColor = "#ffffff"; //reset previously select record
                    }
                    let $item = $w.at(event.context); //get scoped selector
                    selectedRecord = $item("#box1");
                    selectedRecord.style.backgroundColor = "#ffcc37"; //highlight newly selected one
                });}})
7

Try this:

import wixData from 'wix-data'

$w.onReady(async () => {
  let results

  try {
    results = await wixData.query('OrchestralXylophone').find()
  } catch (error) {
    console.log(error)
  }

  $w('#listRepeater').data = results.items

  $w('#container1').onClick(({ context }) => {
    let data = $w('#listRepeater').data
    let clickedItemData = data.find((item) => item._id === context.itemId)

    $w('#videoPlayer1').src = clickedItemData.videoUrl
    $w('#videoPlayer1').togglePlay()

    $w('#listRepeater').forEachItem(($item) => {
      $item('#box1').style.backgroundColor =
        clickedItemData.videoUrl === $w('#videoPlayer1').videoUrl
          ? '#ffffff'
          : '#ffcc37'
    })
  })
})