WIP

lib/live_beats_web/components/core_components.ex

@@ -305,9 +305,11 @@ defmodule LiveBeatsWeb.CoreComponents do
     )
   end
 
+  def fade_in, do: fade_in(nil)
+
   def fade_in(js \\ %JS{}, id) do
     JS.show(js,
-      to: "##{id}",
+      to: id && "##{id}",
       time: 1000,
       display: "inline-block",
       transition: {"ease-out duration-1000", "opacity-0", "opacity-100"}

lib/live_beats_web/live/profile_live.ex

@@ -61,12 +61,7 @@ defmodule LiveBeatsWeb.ProfileLive do
     />
 
     <div id={"speech-#{@active_song_id}"} phx-update="stream" class="mt-6 px-6 max-h-60 overflow-y-scroll">
-      <div
+      <div :for={{id, segment} <- @streams.speech_segments} id={id}>
-        :for={{id, segment} <- @streams.speech_segments}
-        id={id}
-        class={segment.in_progress? && "hidden"}
-        phx-mounted={segment.in_progress? && fade_in(id)}
-      >
         <span class="text-gray-400">[<%= MP3Stat.to_mmss(trunc(segment.start_time)) %>]</span>
         <%= segment.text %>
       </div>
@@ -160,6 +155,7 @@ defmodule LiveBeatsWeb.ProfileLive do
       MediaLibrary.subscribe_to_profile(profile)
       Accounts.subscribe(current_user.id)
       Presence.subscribe(profile)
+      send(self(), :mounted)
     end
 
     active_song = MediaLibrary.get_current_active_song(profile)
@@ -174,7 +170,8 @@ defmodule LiveBeatsWeb.ProfileLive do
         active_profile_id: current_user.active_profile_user_id,
         profile: profile,
         owns_profile?: MediaLibrary.owns_profile?(current_user, profile),
-        songs_count: Enum.count(songs)
+        songs_count: Enum.count(songs),
+        mounted?: false
       )
       |> stream(:songs, songs)
       |> stream(:speech_segments, speech_segments, dom_id: &"ss-#{trunc(&1.start_time)}")
@@ -232,6 +229,8 @@ defmodule LiveBeatsWeb.ProfileLive do
     end
   end
 
+  def handle_info(:mounted, socket), do: {:noreply, assign(socket, :mounted?, true) }
+
   def handle_info({LiveBeatsWeb.Presence, %{user_joined: presence}}, socket) do
     {:noreply, assign_presence(socket, presence)}
   end
@@ -337,22 +336,23 @@ defmodule LiveBeatsWeb.ProfileLive do
 
   defp play_song(socket, %MediaLibrary.Song{} = song) do
     %{active_song_id: active_song_id} = socket.assigns
+    song = %MediaLibrary.Song{song | status: :playing}
 
     cond do
       active_song_id == song.id ->
-        stream_insert(socket, :songs, %MediaLibrary.Song{song | status: :playing})
+        stream_insert(socket, :songs, song)
 
       active_song_id ->
         Enum.reduce(song.speech_segments, socket, fn seg, acc ->
           stream_insert(acc, :speech_segments, seg)
         end)
         |> stop_song(active_song_id)
-        |> stream_insert(:songs, %MediaLibrary.Song{song | status: :playing})
+        |> stream_insert(:songs, song)
         |> assign(active_song_id: song.id)
 
       true ->
         socket
-        |> stream_insert(:songs, %MediaLibrary.Song{song | status: :playing})
+        |> stream_insert(:songs, song)
         |> assign(active_song_id: song.id)
     end
   end