LiveView component and persitent JS dom manipulation?

Phoenix Forum Questions / Help
,
1

Hi there,

Explanation before the issue:

I’m new to using LiveView and I’m trying to stylize the page I’m using a bit.

I have a landing page which renders a live component, and the component itself is basically just a flexbox which shows information for my currently playing spotify song.

I am currently using LiveView hooks to make the progress bar a bit smoother and that part is fine, but I’m trying to add some logic to hide the album image element and actually use it as the background for my first div.

The basic html structure would be:

<div class="holder">
    <div class="text">
      <h1>Title</h1>
      <p>Artist</p>
      <p>Album</p>
      <div class="progress-bar"></div>
    </div>
    <img src="remote-image" />
</div>

Here’s the actual component:

<div id="spotify-song" class="spotify-information">
  <div id="spotify-song-text" class="song-text-block section-block">
    <h1 id="song-title"><%= @song.song_name %></h1>
    <div class="song-description">
      <p id="song-artist">by <%= @song.artists %></p>
      <p id="song-album">on <%= @song.album_name %></p>
    </div>
    <div class="song-progress">
      <span class="current-progress"><%= @song.progress %></span>
      <div phx-hook="SpotifyProgressBar" id="song-progress-bar" { %{progress: "#{@song.progress_percent}%", progress_ms: @song.progress_ms, duration_ms: @song.song_duration_ms }}>
      </div>
      <span class="song-length"><%= @song.song_duration %></span>
    </div>
  </div>
  <img phx-hook="Thumbnail" id="spotify-thumbnail" class="song-thumbnail" src={ @song.thumbnail } alt="Cover Art">
</div>

The issue:

When I try to alter the stylization of any element via JS the lement resets on an update. Do I need to use hooks per-element and re-run the JS logic every time?

Edit:

I forgot to mention that I do get JSON data for basically every field I have. I receive a changeset for which only 2 elements of the 8ish sent change.

2

Try adding phx-update="ignore" to the div with the id spotify-song.

https://hexdocs.pm/phoenix_live_view/dom-patching.html

3

The DOM changes are kept but children are not changed by the live view. From how I’m seeing the changeset replaces the whole html element rather than fields in it, so I can’t actually change the style of a Live element via JS without using Hooks?

Oh and before you ask I’m using JS on the resize event to alter the display and background of some elements. (on a specific size #spotify-thumbnail hides and #spotify-song-test has that as the background image). And because it depends on the width/height of the client I can’t render it server-side.

Edit

I have made the logic I want using hooks but because the LiveView elemnets are updates every one second, it has a weird transition which hands up to a second.

Edit

When I use both events and hooks the html jumps during the hook transition so it look bad.