Make top albums and artists async

This commit is contained in:
Claudio Ortolina
2025-07-07 10:19:47 +01:00
parent a49d8d8f07
commit 1492b197ce
2 changed files with 88 additions and 70 deletions
+18 -14
View File
@@ -133,28 +133,32 @@ defmodule MusicLibraryWeb.StatsLive.Index do
timezone = socket.assigns.timezone
current_time = DateTime.utc_now()
top_albums =
ScrobbleActivity.get_top_albums_by_periods(
limit: 10,
current_time: current_time,
timezone: timezone
)
assign_async(socket, :top_albums, fn ->
top_albums =
ScrobbleActivity.get_top_albums_by_periods(
limit: 10,
current_time: current_time,
timezone: timezone
)
assign(socket, top_albums: top_albums)
{:ok, %{top_albums: top_albums}}
end)
end
defp assign_top_artists(socket) do
timezone = socket.assigns.timezone
current_time = DateTime.utc_now()
top_artists =
ScrobbleActivity.get_top_artists_by_periods(
limit: 10,
current_time: current_time,
timezone: timezone
)
assign_async(socket, :top_artists, fn ->
top_artists =
ScrobbleActivity.get_top_artists_by_periods(
limit: 10,
current_time: current_time,
timezone: timezone
)
assign(socket, top_artists: top_artists)
{:ok, %{top_artists: top_artists}}
end)
end
# The Tailwind build step requires all needed classes to be explicitly referenced
@@ -74,67 +74,81 @@
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Top Artists")}
</h1>
<.tabs class="mt-4">
<.tabs_list active_tab="top_artists_last_30_days" variant="segmented">
<:tab class="flex-1" name="top_artists_last_30_days">{gettext("Last 30 days")}</:tab>
<:tab class="flex-1" name="top_artists_last_90_days">{gettext("Last 90 days")}</:tab>
<:tab class="flex-1" name="top_artists_last_365_days">{gettext("Last year")}</:tab>
<:tab class="flex-1" name="top_artists_all_time">{gettext("All time")}</:tab>
</.tabs_list>
<.tabs_panel active name="top_artists_last_30_days">
<.top_artists_by_period artists={@top_artists.last_30_days} />
</.tabs_panel>
<.tabs_panel name="top_artists_last_90_days">
<.top_artists_by_period artists={@top_artists.last_90_days} />
</.tabs_panel>
<.tabs_panel name="top_artists_last_365_days">
<.top_artists_by_period artists={@top_artists.last_365_days} />
</.tabs_panel>
<.tabs_panel name="top_artists_all_time">
<.top_artists_by_period artists={@top_artists.all_time} />
</.tabs_panel>
</.tabs>
<.async_result :let={top_artists} assign={@top_artists}>
<:loading>
<div class="h-192 flex items-center justify-center">
<.loading />
</div>
</:loading>
<.tabs class="mt-4">
<.tabs_list active_tab="top_artists_last_30_days" variant="segmented">
<:tab class="flex-1" name="top_artists_last_30_days">{gettext("Last 30 days")}</:tab>
<:tab class="flex-1" name="top_artists_last_90_days">{gettext("Last 90 days")}</:tab>
<:tab class="flex-1" name="top_artists_last_365_days">{gettext("Last year")}</:tab>
<:tab class="flex-1" name="top_artists_all_time">{gettext("All time")}</:tab>
</.tabs_list>
<.tabs_panel active name="top_artists_last_30_days">
<.top_artists_by_period artists={top_artists.last_30_days} />
</.tabs_panel>
<.tabs_panel name="top_artists_last_90_days">
<.top_artists_by_period artists={top_artists.last_90_days} />
</.tabs_panel>
<.tabs_panel name="top_artists_last_365_days">
<.top_artists_by_period artists={top_artists.last_365_days} />
</.tabs_panel>
<.tabs_panel name="top_artists_all_time">
<.top_artists_by_period artists={top_artists.all_time} />
</.tabs_panel>
</.tabs>
</.async_result>
</div>
<div>
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Top Albums")}
</h1>
<.tabs class="mt-4">
<.tabs_list active_tab="top_albums_last_30_days" variant="segmented">
<:tab class="flex-1" name="top_albums_last_30_days">{gettext("Last 30 days")}</:tab>
<:tab class="flex-1" name="top_albums_last_90_days">{gettext("Last 90 days")}</:tab>
<:tab class="flex-1" name="top_albums_last_365_days">{gettext("Last year")}</:tab>
<:tab class="flex-1" name="top_albums_all_time">{gettext("All time")}</:tab>
</.tabs_list>
<.tabs_panel active name="top_albums_last_30_days">
<.top_albums_by_period
albums={@top_albums.last_30_days}
collected_releases={@top_albums.collected_releases}
wishlisted_releases={@top_albums.wishlisted_releases}
/>
</.tabs_panel>
<.tabs_panel name="top_albums_last_90_days">
<.top_albums_by_period
albums={@top_albums.last_90_days}
collected_releases={@top_albums.collected_releases}
wishlisted_releases={@top_albums.wishlisted_releases}
/>
</.tabs_panel>
<.tabs_panel name="top_albums_last_365_days">
<.top_albums_by_period
albums={@top_albums.last_365_days}
collected_releases={@top_albums.collected_releases}
wishlisted_releases={@top_albums.wishlisted_releases}
/>
</.tabs_panel>
<.tabs_panel name="top_albums_all_time">
<.top_albums_by_period
albums={@top_albums.all_time}
collected_releases={@top_albums.collected_releases}
wishlisted_releases={@top_albums.wishlisted_releases}
/>
</.tabs_panel>
</.tabs>
<.async_result :let={top_albums} assign={@top_albums}>
<:loading>
<div class="h-192 flex items-center justify-center">
<.loading />
</div>
</:loading>
<.tabs class="mt-4">
<.tabs_list active_tab="top_albums_last_30_days" variant="segmented">
<:tab class="flex-1" name="top_albums_last_30_days">{gettext("Last 30 days")}</:tab>
<:tab class="flex-1" name="top_albums_last_90_days">{gettext("Last 90 days")}</:tab>
<:tab class="flex-1" name="top_albums_last_365_days">{gettext("Last year")}</:tab>
<:tab class="flex-1" name="top_albums_all_time">{gettext("All time")}</:tab>
</.tabs_list>
<.tabs_panel active name="top_albums_last_30_days">
<.top_albums_by_period
albums={top_albums.last_30_days}
collected_releases={top_albums.collected_releases}
wishlisted_releases={top_albums.wishlisted_releases}
/>
</.tabs_panel>
<.tabs_panel name="top_albums_last_90_days">
<.top_albums_by_period
albums={top_albums.last_90_days}
collected_releases={top_albums.collected_releases}
wishlisted_releases={top_albums.wishlisted_releases}
/>
</.tabs_panel>
<.tabs_panel name="top_albums_last_365_days">
<.top_albums_by_period
albums={top_albums.last_365_days}
collected_releases={top_albums.collected_releases}
wishlisted_releases={top_albums.wishlisted_releases}
/>
</.tabs_panel>
<.tabs_panel name="top_albums_all_time">
<.top_albums_by_period
albums={top_albums.all_time}
collected_releases={top_albums.collected_releases}
wishlisted_releases={top_albums.wishlisted_releases}
/>
</.tabs_panel>
</.tabs>
</.async_result>
</div>
</div>
</div>