Keep video playing while switching pages Inertia/Vue/Laravel

Check out this section in the Inertia docs about Persistent layouts: https://inertiajs.com/pages#persistent-layouts

You're going to want to render the "floating" component in there so it persists across multiple page visits. Maybe even portal it in there using portal-vue.

I highly recommend playing with the demo "Ping CRM" app for Inertia: https://github.com/inertiajs/pingcrm

Once you have that setup, add the following as the last element before the closing div in Layout.vue

<div class="fixed bottom-0 right-0 z-50">
    This is a floating player
</div>

Now click around to other pages and you'll notice that this element remains there because it's being rendered in the Layout component instead of a specific page.

As for the floating player, that could differ based on what type of player you're using. I'd imagine just rendering it in a smaller size should work?

Hope this helps.

Hey @drehimself

Thank you so much for your reply.

After reading your links I tried to implement the solution (Just the persistent-layout, without the portal for now). I get the portal part and want to set that apart for now.

I really hate be (or look) as one of those people that want everything chewed up for they (hand to god I'm not) but I still stuck, so if you may please bear with me.

I taught I did what is in here https://inertiajs.com/pages#persistent-layouts

In this file: https://github.com/luisalonsobr/vueeve/blob/master/resources/js/Layouts/AppLayout.vue On line 291 it's the component "mini-player" wich is what I'm trying to persist.

And the component itself it's here: https://github.com/luisalonsobr/vueeve/blob/master/resources/js/Components/MiniPlayer.vue

But I guess I'm misinterpreting something on the Inertia documentation

I uploaded the site to https://test.luisalonso.com.br user [email protected] pass testtest

You think you (Or anyone) could take a look at the files above and tell me what I'm missing?

Thank you once again.