Refactor stats page with semantic components to experiment with alternative layouts
This commit is contained in:
Claudio Ortolina
@@ -16,342 +16,31 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
|||||||
def render(assigns) do
|
def render(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
<div>
|
<.record_stats
|
||||||
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
latest_record={@latest_record}
|
||||||
{gettext("Records")}
|
collection_count={@collection_count}
|
||||||
</h1>
|
wishlist_count={@wishlist_count}
|
||||||
<dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5">
|
scrobble_count={@scrobble_count}
|
||||||
<.album_preview
|
/>
|
||||||
record={@latest_record}
|
|
||||||
title={gettext("Latest purchase")}
|
|
||||||
class="col-span-3 sm:col-span-2"
|
|
||||||
/>
|
|
||||||
<.counter
|
|
||||||
title={gettext("Collection")}
|
|
||||||
count={@collection_count}
|
|
||||||
path={~p"/collection"}
|
|
||||||
/>
|
|
||||||
<.counter title={gettext("Wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
|
|
||||||
<.counter
|
|
||||||
title={gettext("Scrobbles")}
|
|
||||||
count={to_compact(@scrobble_count)}
|
|
||||||
tooltip={@scrobble_count}
|
|
||||||
path={~p"/scrobbled-tracks"}
|
|
||||||
/>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid gap-5 lg:grid-cols-2">
|
<div class="grid gap-5 lg:grid-cols-2">
|
||||||
<div>
|
<.formats_stats collection_count_by_format={@collection_count_by_format} />
|
||||||
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
<.types_stats collection_count_by_type={@collection_count_by_type} />
|
||||||
{gettext("Formats")}
|
|
||||||
</h1>
|
|
||||||
<.counters_by_category
|
|
||||||
categories_with_counts={@collection_count_by_format}
|
|
||||||
category_format_fn={&format_label/1}
|
|
||||||
category_path_fn={fn format -> ~p"/collection?query=format:#{format}" end}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
|
||||||
{gettext("Types")}
|
|
||||||
</h1>
|
|
||||||
<.counters_by_category
|
|
||||||
categories_with_counts={@collection_count_by_type}
|
|
||||||
category_format_fn={&type_label/1}
|
|
||||||
category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 gap-5 lg:grid-cols-3 mt-5">
|
<div class="grid grid-cols-1 gap-5 lg:grid-cols-3 mt-5">
|
||||||
<TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
<TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
||||||
<TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
<TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
||||||
<div class="order-first lg:order-last">
|
<.on_this_day current_date={@current_date} records_on_this_day={@records_on_this_day} />
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
|
||||||
{gettext("On This day")}
|
|
||||||
</h1>
|
|
||||||
<.form
|
|
||||||
:let={f}
|
|
||||||
for={to_form(%{"current_date" => @current_date})}
|
|
||||||
phx-change="set_current_date"
|
|
||||||
>
|
|
||||||
<.date_picker size="xs" field={f[:current_date]}>
|
|
||||||
<:outer_suffix>
|
|
||||||
<.button
|
|
||||||
size="xs"
|
|
||||||
type="button"
|
|
||||||
phx-click={
|
|
||||||
JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Today
|
|
||||||
</.button>
|
|
||||||
</:outer_suffix>
|
|
||||||
</.date_picker>
|
|
||||||
</.form>
|
|
||||||
</div>
|
|
||||||
<div class="rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
|
||||||
<.records_on_this_day
|
|
||||||
current_date={@current_date}
|
|
||||||
records={@records_on_this_day}
|
|
||||||
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flow-root">
|
<.scrobble_activity
|
||||||
<div class="mt-5 flex items-center justify-between">
|
scrobble_activity_mode={@scrobble_activity_mode}
|
||||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
streams={@streams}
|
||||||
{gettext("Scrobble activity")}
|
/>
|
||||||
</h1>
|
|
||||||
<.refresh_lastfm_feed_button />
|
|
||||||
</div>
|
|
||||||
<.tabs id="scrobble-activity" class="mt-4">
|
|
||||||
<.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48">
|
|
||||||
<:tab
|
|
||||||
name="albums"
|
|
||||||
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
|
|
||||||
>
|
|
||||||
{gettext("Albums")}
|
|
||||||
</:tab>
|
|
||||||
<:tab
|
|
||||||
name="tracks"
|
|
||||||
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
|
|
||||||
>
|
|
||||||
{gettext("Tracks")}
|
|
||||||
</:tab>
|
|
||||||
</.tabs_list>
|
|
||||||
|
|
||||||
<.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
|
|
||||||
<ul
|
|
||||||
id="scrobble-activity-albums"
|
|
||||||
role="list"
|
|
||||||
class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
|
|
||||||
phx-update="stream"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
:for={
|
|
||||||
{id,
|
|
||||||
%{
|
|
||||||
album: album,
|
|
||||||
artist_id: artist_id,
|
|
||||||
collected_record_id: collected_record_id,
|
|
||||||
wishlisted_record_id: wishlisted_record_id,
|
|
||||||
cover_hash: cover_hash
|
|
||||||
}} <- @streams.recent_albums
|
|
||||||
}
|
|
||||||
id={id}
|
|
||||||
class="group"
|
|
||||||
>
|
|
||||||
<div class="relative pb-4 group-last:pb-0">
|
|
||||||
<span
|
|
||||||
class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
<div class="relative flex items-center justify-between space-x-3">
|
|
||||||
<div class="flex min-w-0 items-center justify-between space-x-4">
|
|
||||||
<img
|
|
||||||
class="size-12 rounded-md shadow-sm"
|
|
||||||
src={track_or_album_cover_url(album, cover_hash)}
|
|
||||||
alt={album.metadata.title}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<p
|
|
||||||
:if={!artist_id(album, artist_id)}
|
|
||||||
class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400"
|
|
||||||
>
|
|
||||||
{album.artist.name}
|
|
||||||
</p>
|
|
||||||
<.link
|
|
||||||
:if={artist_id(album, artist_id)}
|
|
||||||
class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
|
||||||
navigate={~p"/artists/#{artist_id(album, artist_id)}"}
|
|
||||||
>
|
|
||||||
{album.artist.name}
|
|
||||||
</.link>
|
|
||||||
<p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
|
|
||||||
{album.metadata.title}
|
|
||||||
</p>
|
|
||||||
<time
|
|
||||||
datetime={format_scrobbled_at_uts(album.scrobbled_at_uts)}
|
|
||||||
class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
|
|
||||||
>
|
|
||||||
{album.scrobbled_at_label}
|
|
||||||
</time>
|
|
||||||
<.album_metadata_tooltip album={album} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.record_status_badges
|
|
||||||
musicbrainz_id={album.metadata.musicbrainz_id}
|
|
||||||
collected_record_id={collected_record_id}
|
|
||||||
wishlisted_record_id={wishlisted_record_id}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.import_format_dropdown
|
|
||||||
:if={
|
|
||||||
album.metadata.musicbrainz_id !== "" and !collected_record_id and
|
|
||||||
!wishlisted_record_id
|
|
||||||
}
|
|
||||||
id={"actions-#{album.scrobbled_at_uts}-albums"}
|
|
||||||
musicbrainz_id={album.metadata.musicbrainz_id}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</.tabs_panel>
|
|
||||||
<.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>
|
|
||||||
<ul
|
|
||||||
id="scrobble-activity-tracks"
|
|
||||||
role="list"
|
|
||||||
class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
|
|
||||||
phx-update="stream"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
:for={
|
|
||||||
{id,
|
|
||||||
%{
|
|
||||||
track: track,
|
|
||||||
artist_id: artist_id,
|
|
||||||
collected_record_id: collected_record_id,
|
|
||||||
wishlisted_record_id: wishlisted_record_id,
|
|
||||||
cover_hash: cover_hash
|
|
||||||
}} <- @streams.recent_tracks
|
|
||||||
}
|
|
||||||
id={id}
|
|
||||||
class="group"
|
|
||||||
>
|
|
||||||
<div class="relative pb-4 group-last:pb-0">
|
|
||||||
<span
|
|
||||||
class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
<div class="relative flex items-center justify-between space-x-3">
|
|
||||||
<div class="flex min-w-0 items-center justify-between space-x-4">
|
|
||||||
<img
|
|
||||||
class="size-12 rounded-md shadow-sm"
|
|
||||||
src={track_or_album_cover_url(track, cover_hash)}
|
|
||||||
alt={track.title}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<p
|
|
||||||
:if={!artist_id(track, artist_id)}
|
|
||||||
class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400"
|
|
||||||
>
|
|
||||||
{track.artist.name}
|
|
||||||
</p>
|
|
||||||
<.link
|
|
||||||
:if={artist_id(track, artist_id)}
|
|
||||||
class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
|
||||||
navigate={~p"/artists/#{artist_id(track, artist_id)}"}
|
|
||||||
>
|
|
||||||
{track.artist.name}
|
|
||||||
</.link>
|
|
||||||
<p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
|
|
||||||
{track.title}
|
|
||||||
</p>
|
|
||||||
<p class="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
|
|
||||||
{track.album.title}
|
|
||||||
</p>
|
|
||||||
<time
|
|
||||||
datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
|
|
||||||
class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
|
|
||||||
>
|
|
||||||
{track.scrobbled_at_label}
|
|
||||||
</time>
|
|
||||||
<.track_metadata_tooltip track={track} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.record_status_badges
|
|
||||||
musicbrainz_id={track.album.musicbrainz_id}
|
|
||||||
collected_record_id={collected_record_id}
|
|
||||||
wishlisted_record_id={wishlisted_record_id}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.import_format_dropdown
|
|
||||||
:if={
|
|
||||||
track.album.musicbrainz_id !== "" and !collected_record_id and
|
|
||||||
!wishlisted_record_id
|
|
||||||
}
|
|
||||||
id={"actions-#{track.scrobbled_at_uts}-tracks"}
|
|
||||||
musicbrainz_id={track.album.musicbrainz_id}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</.tabs_panel>
|
|
||||||
</.tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-3">
|
<div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-3">
|
||||||
<div>
|
<.top_collection_artists records_by_artist={@records_by_artist} />
|
||||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
<.top_collection_genres records_by_genre={@records_by_genre} />
|
||||||
{gettext("Top %{n} Collection Artists", %{n: length(@records_by_artist)})}
|
<.top_release_years records_by_release_year={@records_by_release_year} />
|
||||||
</h1>
|
|
||||||
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
|
||||||
<.vertical_bar_chart
|
|
||||||
data={@records_by_artist}
|
|
||||||
color_class="bg-red-500"
|
|
||||||
label_fn={fn datum -> datum.name end}
|
|
||||||
value_fn={fn datum -> datum.count end}
|
|
||||||
datum_click={
|
|
||||||
fn datum ->
|
|
||||||
JS.navigate(~p"/artists/#{datum.id}")
|
|
||||||
end
|
|
||||||
}
|
|
||||||
class="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
|
||||||
{gettext("Top %{n} Collection Genres", %{n: length(@records_by_genre)})}
|
|
||||||
</h1>
|
|
||||||
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
|
||||||
<.vertical_bar_chart
|
|
||||||
data={@records_by_genre}
|
|
||||||
color_class="bg-zinc-500"
|
|
||||||
label_fn={fn {genre, _count} -> genre end}
|
|
||||||
value_fn={fn {_genre, count} -> count end}
|
|
||||||
datum_click={
|
|
||||||
fn {genre, _count} ->
|
|
||||||
JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
|
|
||||||
end
|
|
||||||
}
|
|
||||||
class="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
|
||||||
{gettext("Top 20 Release Years")}
|
|
||||||
</h1>
|
|
||||||
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
|
||||||
<.vertical_bar_chart
|
|
||||||
data={@records_by_release_year}
|
|
||||||
color_class="bg-zinc-800 dark:bg-zinc-300"
|
|
||||||
label_fn={fn {year, _count} -> year end}
|
|
||||||
value_fn={fn {_year, count} -> count end}
|
|
||||||
datum_click={
|
|
||||||
fn {year, _count} ->
|
|
||||||
JS.navigate(~p"/collection?#{%{query: "release_year:#{year}"}}")
|
|
||||||
end
|
|
||||||
}
|
|
||||||
class="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Layouts.app>
|
</Layouts.app>
|
||||||
"""
|
"""
|
||||||
@@ -459,6 +148,366 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
|||||||
|> assign_scrobble_activity()}
|
|> assign_scrobble_activity()}
|
||||||
end
|
end
|
||||||
|
|
||||||
|
defp top_release_years(assigns) do
|
||||||
|
~H"""
|
||||||
|
<div>
|
||||||
|
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||||
|
{gettext("Top 20 Release Years")}
|
||||||
|
</h1>
|
||||||
|
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
||||||
|
<.vertical_bar_chart
|
||||||
|
data={@records_by_release_year}
|
||||||
|
color_class="bg-zinc-800 dark:bg-zinc-300"
|
||||||
|
label_fn={fn {year, _count} -> year end}
|
||||||
|
value_fn={fn {_year, count} -> count end}
|
||||||
|
datum_click={
|
||||||
|
fn {year, _count} ->
|
||||||
|
JS.navigate(~p"/collection?#{%{query: "release_year:#{year}"}}")
|
||||||
|
end
|
||||||
|
}
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
defp top_collection_genres(assigns) do
|
||||||
|
~H"""
|
||||||
|
<div>
|
||||||
|
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||||
|
{gettext("Top %{n} Collection Genres", %{n: length(@records_by_genre)})}
|
||||||
|
</h1>
|
||||||
|
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
||||||
|
<.vertical_bar_chart
|
||||||
|
data={@records_by_genre}
|
||||||
|
color_class="bg-zinc-500"
|
||||||
|
label_fn={fn {genre, _count} -> genre end}
|
||||||
|
value_fn={fn {_genre, count} -> count end}
|
||||||
|
datum_click={
|
||||||
|
fn {genre, _count} ->
|
||||||
|
JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
|
||||||
|
end
|
||||||
|
}
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
defp top_collection_artists(assigns) do
|
||||||
|
~H"""
|
||||||
|
<div>
|
||||||
|
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||||
|
{gettext("Top %{n} Collection Artists", %{n: length(@records_by_artist)})}
|
||||||
|
</h1>
|
||||||
|
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
||||||
|
<.vertical_bar_chart
|
||||||
|
data={@records_by_artist}
|
||||||
|
color_class="bg-red-500"
|
||||||
|
label_fn={fn datum -> datum.name end}
|
||||||
|
value_fn={fn datum -> datum.count end}
|
||||||
|
datum_click={
|
||||||
|
fn datum ->
|
||||||
|
JS.navigate(~p"/artists/#{datum.id}")
|
||||||
|
end
|
||||||
|
}
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
defp scrobble_activity(assigns) do
|
||||||
|
~H"""
|
||||||
|
<div class="flow-root">
|
||||||
|
<div class="mt-5 flex items-center justify-between">
|
||||||
|
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||||
|
{gettext("Scrobble activity")}
|
||||||
|
</h1>
|
||||||
|
<.refresh_lastfm_feed_button />
|
||||||
|
</div>
|
||||||
|
<.tabs id="scrobble-activity" class="mt-4">
|
||||||
|
<.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48">
|
||||||
|
<:tab
|
||||||
|
name="albums"
|
||||||
|
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
|
||||||
|
>
|
||||||
|
{gettext("Albums")}
|
||||||
|
</:tab>
|
||||||
|
<:tab
|
||||||
|
name="tracks"
|
||||||
|
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
|
||||||
|
>
|
||||||
|
{gettext("Tracks")}
|
||||||
|
</:tab>
|
||||||
|
</.tabs_list>
|
||||||
|
|
||||||
|
<.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
|
||||||
|
<ul
|
||||||
|
id="scrobble-activity-albums"
|
||||||
|
role="list"
|
||||||
|
class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
|
||||||
|
phx-update="stream"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
:for={
|
||||||
|
{id,
|
||||||
|
%{
|
||||||
|
album: album,
|
||||||
|
artist_id: artist_id,
|
||||||
|
collected_record_id: collected_record_id,
|
||||||
|
wishlisted_record_id: wishlisted_record_id,
|
||||||
|
cover_hash: cover_hash
|
||||||
|
}} <- @streams.recent_albums
|
||||||
|
}
|
||||||
|
id={id}
|
||||||
|
class="group"
|
||||||
|
>
|
||||||
|
<div class="relative pb-4 group-last:pb-0">
|
||||||
|
<span
|
||||||
|
class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
<div class="relative flex items-center justify-between space-x-3">
|
||||||
|
<div class="flex min-w-0 items-center justify-between space-x-4">
|
||||||
|
<img
|
||||||
|
class="size-12 rounded-md shadow-sm"
|
||||||
|
src={track_or_album_cover_url(album, cover_hash)}
|
||||||
|
alt={album.metadata.title}
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p
|
||||||
|
:if={!artist_id(album, artist_id)}
|
||||||
|
class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400"
|
||||||
|
>
|
||||||
|
{album.artist.name}
|
||||||
|
</p>
|
||||||
|
<.link
|
||||||
|
:if={artist_id(album, artist_id)}
|
||||||
|
class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||||
|
navigate={~p"/artists/#{artist_id(album, artist_id)}"}
|
||||||
|
>
|
||||||
|
{album.artist.name}
|
||||||
|
</.link>
|
||||||
|
<p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
|
||||||
|
{album.metadata.title}
|
||||||
|
</p>
|
||||||
|
<time
|
||||||
|
datetime={format_scrobbled_at_uts(album.scrobbled_at_uts)}
|
||||||
|
class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
|
||||||
|
>
|
||||||
|
{album.scrobbled_at_label}
|
||||||
|
</time>
|
||||||
|
<.album_metadata_tooltip album={album} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.record_status_badges
|
||||||
|
musicbrainz_id={album.metadata.musicbrainz_id}
|
||||||
|
collected_record_id={collected_record_id}
|
||||||
|
wishlisted_record_id={wishlisted_record_id}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.import_format_dropdown
|
||||||
|
:if={
|
||||||
|
album.metadata.musicbrainz_id !== "" and !collected_record_id and
|
||||||
|
!wishlisted_record_id
|
||||||
|
}
|
||||||
|
id={"actions-#{album.scrobbled_at_uts}-albums"}
|
||||||
|
musicbrainz_id={album.metadata.musicbrainz_id}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</.tabs_panel>
|
||||||
|
<.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>
|
||||||
|
<ul
|
||||||
|
id="scrobble-activity-tracks"
|
||||||
|
role="list"
|
||||||
|
class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
|
||||||
|
phx-update="stream"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
:for={
|
||||||
|
{id,
|
||||||
|
%{
|
||||||
|
track: track,
|
||||||
|
artist_id: artist_id,
|
||||||
|
collected_record_id: collected_record_id,
|
||||||
|
wishlisted_record_id: wishlisted_record_id,
|
||||||
|
cover_hash: cover_hash
|
||||||
|
}} <- @streams.recent_tracks
|
||||||
|
}
|
||||||
|
id={id}
|
||||||
|
class="group"
|
||||||
|
>
|
||||||
|
<div class="relative pb-4 group-last:pb-0">
|
||||||
|
<span
|
||||||
|
class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
<div class="relative flex items-center justify-between space-x-3">
|
||||||
|
<div class="flex min-w-0 items-center justify-between space-x-4">
|
||||||
|
<img
|
||||||
|
class="size-12 rounded-md shadow-sm"
|
||||||
|
src={track_or_album_cover_url(track, cover_hash)}
|
||||||
|
alt={track.title}
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p
|
||||||
|
:if={!artist_id(track, artist_id)}
|
||||||
|
class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400"
|
||||||
|
>
|
||||||
|
{track.artist.name}
|
||||||
|
</p>
|
||||||
|
<.link
|
||||||
|
:if={artist_id(track, artist_id)}
|
||||||
|
class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||||
|
navigate={~p"/artists/#{artist_id(track, artist_id)}"}
|
||||||
|
>
|
||||||
|
{track.artist.name}
|
||||||
|
</.link>
|
||||||
|
<p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
|
||||||
|
{track.title}
|
||||||
|
</p>
|
||||||
|
<p class="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
|
||||||
|
{track.album.title}
|
||||||
|
</p>
|
||||||
|
<time
|
||||||
|
datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
|
||||||
|
class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
|
||||||
|
>
|
||||||
|
{track.scrobbled_at_label}
|
||||||
|
</time>
|
||||||
|
<.track_metadata_tooltip track={track} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.record_status_badges
|
||||||
|
musicbrainz_id={track.album.musicbrainz_id}
|
||||||
|
collected_record_id={collected_record_id}
|
||||||
|
wishlisted_record_id={wishlisted_record_id}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.import_format_dropdown
|
||||||
|
:if={
|
||||||
|
track.album.musicbrainz_id !== "" and !collected_record_id and
|
||||||
|
!wishlisted_record_id
|
||||||
|
}
|
||||||
|
id={"actions-#{track.scrobbled_at_uts}-tracks"}
|
||||||
|
musicbrainz_id={track.album.musicbrainz_id}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</.tabs_panel>
|
||||||
|
</.tabs>
|
||||||
|
</div>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
defp on_this_day(assigns) do
|
||||||
|
~H"""
|
||||||
|
<div class="order-first lg:order-last">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||||
|
{gettext("On This day")}
|
||||||
|
</h1>
|
||||||
|
<.form
|
||||||
|
:let={f}
|
||||||
|
for={to_form(%{"current_date" => @current_date})}
|
||||||
|
phx-change="set_current_date"
|
||||||
|
>
|
||||||
|
<.date_picker size="xs" field={f[:current_date]}>
|
||||||
|
<:outer_suffix>
|
||||||
|
<.button
|
||||||
|
size="xs"
|
||||||
|
type="button"
|
||||||
|
phx-click={JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})}
|
||||||
|
>
|
||||||
|
Today
|
||||||
|
</.button>
|
||||||
|
</:outer_suffix>
|
||||||
|
</.date_picker>
|
||||||
|
</.form>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
||||||
|
<.records_on_this_day
|
||||||
|
current_date={@current_date}
|
||||||
|
records={@records_on_this_day}
|
||||||
|
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
defp types_stats(assigns) do
|
||||||
|
~H"""
|
||||||
|
<div>
|
||||||
|
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||||
|
{gettext("Types")}
|
||||||
|
</h1>
|
||||||
|
<.counters_by_category
|
||||||
|
categories_with_counts={@collection_count_by_type}
|
||||||
|
category_format_fn={&type_label/1}
|
||||||
|
category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
defp formats_stats(assigns) do
|
||||||
|
~H"""
|
||||||
|
<div>
|
||||||
|
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||||
|
{gettext("Formats")}
|
||||||
|
</h1>
|
||||||
|
<.counters_by_category
|
||||||
|
categories_with_counts={@collection_count_by_format}
|
||||||
|
category_format_fn={&format_label/1}
|
||||||
|
category_path_fn={fn format -> ~p"/collection?query=format:#{format}" end}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
defp record_stats(assigns) do
|
||||||
|
~H"""
|
||||||
|
<div>
|
||||||
|
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||||
|
{gettext("Records")}
|
||||||
|
</h1>
|
||||||
|
<dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5">
|
||||||
|
<.album_preview
|
||||||
|
record={@latest_record}
|
||||||
|
title={gettext("Latest purchase")}
|
||||||
|
class="col-span-3 sm:col-span-2"
|
||||||
|
/>
|
||||||
|
<.counter
|
||||||
|
title={gettext("Collection")}
|
||||||
|
count={@collection_count}
|
||||||
|
path={~p"/collection"}
|
||||||
|
/>
|
||||||
|
<.counter title={gettext("Wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
|
||||||
|
<.counter
|
||||||
|
title={gettext("Scrobbles")}
|
||||||
|
count={to_compact(@scrobble_count)}
|
||||||
|
tooltip={@scrobble_count}
|
||||||
|
path={~p"/scrobbled-tracks"}
|
||||||
|
/>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
defp assign_counts(socket) do
|
defp assign_counts(socket) do
|
||||||
collection_count_by_format = Collection.count_records_by_format()
|
collection_count_by_format = Collection.count_records_by_format()
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user