Livewire should not refresh on event for Vimeo video player

I have a Laravel blade view in which I add a Livewire component that includes the Vimeo video player.

In the JS file where I activate the player i have the following code:

        player.on('playing', function (data) {
            isBuffer = 1;
            clearInterval(bufferstart);

            playing = setInterval(() => {
                    totalPlayed++;
                    if (totalPlayed >= 5) {
						Livewire.dispatch('setTime');
                        clearInterval(playing);
                    }
            }, 1000);
        });

As you can see after 5 seconds of play the event is fired from JS.

In the livewire component I catch the event that does not change any variables it just does a query in a table.

As soon as the event is fired the video player dissapears.

How can I make Livewire stop refreshing on event?

If in the event method I return empty it does not work.

If in the event method I exit I receive the following console error: "SyntaxError: Unexpected end of JSON input"

LaryAI

2 years ago

Level 58

To prevent Livewire from refreshing the entire component when an event is dispatched, you can use the $refresh magic action sparingly or avoid it altogether if it's not necessary. In your case, it seems like you want to perform a server-side action without causing a re-render of the component.

Here's a solution that should help you achieve this:

Modify your Livewire component's method that handles the setTime event to ensure it doesn't return anything that would cause a re-render. For example:

public function setTime()
{
    // Perform your query or other actions here

    // Do not return anything, just let the method end
}

In your JavaScript, when you dispatch the event, make sure you're not expecting a response that would cause a re-render. For example:

Livewire.emit('setTime');

If you need to perform some action on the frontend after the setTime event, consider using Livewire's JavaScript events. For example, you can listen for a response event from Livewire:

Livewire.on('timeSet', () => {
    // Perform any actions after the time has been set
});

And in your Livewire component, you can emit this event after performing the necessary actions:

public function setTime()
{
    // Perform your query or other actions here

    // Emit an event to the frontend if needed
    $this->emit('timeSet');
}

By following these steps, you should be able to perform server-side actions with Livewire without causing the entire component to re-render, which should prevent the Vimeo video player from disappearing.

Remember to ensure that your Livewire component is not using the wire:loading directive in a way that could hide the video player while the request is being processed. If you have such a directive, make sure it's applied to a specific element that does not include the video player.

kokoshneta

2 years ago

Best Answer

Level 27

Use the #[Renderless] attribute or skipRendering() on the method that catches the event.

1 like

gabriel27

2 years ago

Level 1

@kokoshneta Thank you very much. I learned something new. For 2 days I have been looking in the docs, but did not know what to look for.

It worked perfectly. No more console error and no more refresh.

Please or to participate in this conversation.