How do I create a live view as a layout?

Phoenix Forum Questions / Help
, ,
1

I have scoured the internet high and low and cannot find the answer, hope someone here has an idea of how to do this.

Here is what I need to do but cant figure out how.

I have a live view that I essentially need to turn into a template
It uses the socket to grab user data, runs some pattern matching, and then displays that data in a div right above the navbar.

Think of it like the song bar on Spotify where it has next and previous buttons and displays user data.

This needs to be at the bottom of every live view and cannot be remounted on every live view.

However all layouts are just Heex files so I cant do it there.

If I make it a component and reference it in a layout, I cant add the functionality to push events and make it interactive (even saving and retrieving data in the localstorage).

I dont want to create one mega live view and then toggle the display of other “pages” which are just components, because that’s just cursed and a massive tech debt issue.

Is there some easy way of just having a live view view that I can just render all the other live views inside of that I just dont know of?

I am considering some desperate alternatives. Would love to hear your ideas.

2

Hello and welcome!

Take a look at the LiveBeats source and/or search for “sticky LiveViews” :slight_smile:

4 Likes
3

Wow this is super useful! Still reverse engineering it, are there any other good public phoenix projects that I can learn from.

At the bottom of the Dunning-Kruger rn :laughing:

4

For anyone who also has this same problem, here is how you can use a live view in a layout.

In the layout reference the live view like this:
<%= live_render(@socket, LiveBeatsWeb.PlayerLive, id: "player", session: %{}, sticky: true) %>

where LiveBeatsWeb.PlayerLive is the live view

then in the live view because you wont have access to the user struct, you can put this at the top of the live view to access the user struct

on_mount {LiveBeatsWeb.UserAuth, :current_user}

To make your life easier here is an example in the beats project

and this is the layout you can see too

Hope this helps!

3 Likes
5

That’s all that comes to mind at this not-even-that-early hour.

1 Like