Claudio Ortolina
133 lines
4.2 KiB
Elixir
133 lines
4.2 KiB
Elixir
defmodule MusicLibraryWeb.StatsComponents do
|
|
use MusicLibraryWeb, :live_component
|
|
|
|
attr :record, MusicLibrary.Records.Record, required: true
|
|
attr :title, :string, required: true
|
|
attr :class, :string
|
|
|
|
def album_preview(assigns) do
|
|
~H"""
|
|
<div
|
|
class={[
|
|
"relative overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-5 pt-5 shadow-sm sm:px-6 sm:pt-6 cursor-pointer",
|
|
@class
|
|
]}
|
|
phx-click={JS.navigate(~p"/collection/#{@record}")}
|
|
>
|
|
<dt>
|
|
<img
|
|
class="absolute w-20 rounded-md shadow-sm"
|
|
src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash}"}
|
|
alt={@record.title}
|
|
/>
|
|
<p class="ml-24 truncate text-xs sm:text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
|
{@title}
|
|
</p>
|
|
</dt>
|
|
<dd class="ml-24 mt-2 flex items-baseline pb-4 sm:pb-6">
|
|
<p class="font-semibold">
|
|
<span class="text-sm md:text-base lg:text-2xl block text-zinc-900 dark:text-zinc-300">
|
|
{@record.title}
|
|
</span>
|
|
<.link
|
|
:for={artist <- @record.artists}
|
|
class="text-sm md:text-base text-zinc-600 dark:text-zinc-200 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
|
|
navigate={~p"/artists/#{artist.musicbrainz_id}"}
|
|
>
|
|
{artist.name}
|
|
</.link>
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
attr :title, :string, required: true
|
|
attr :count, :integer, required: true
|
|
attr :path, :string, required: true
|
|
|
|
def counter(assigns) do
|
|
~H"""
|
|
<div class="overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-3 pt-5 shadow-sm sm:px-6 sm:pt-6">
|
|
<dt class="sm:mt-3">
|
|
<p class="truncate text-sm font-medium text-center text-zinc-500 dark:text-zinc-400">
|
|
{@title}
|
|
</p>
|
|
</dt>
|
|
<dd class="mt-1">
|
|
<.link
|
|
navigate={@path}
|
|
class="block text-2xl sm:text-3xl font-semibold text-center text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
|
|
>
|
|
{@count}
|
|
</.link>
|
|
</dd>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
attr :artists, :list, required: true
|
|
|
|
def top_artists_by_period(assigns) do
|
|
~H"""
|
|
<div class="mt-4">
|
|
<div class="space-y-2">
|
|
<div
|
|
:for={artist <- @artists}
|
|
phx-click={
|
|
artist.artist_musicbrainz_id != "" &&
|
|
JS.navigate(~p"/artists/#{artist.artist_musicbrainz_id}")
|
|
}
|
|
class={[
|
|
"flex items-center space-x-3 p-2",
|
|
artist.artist_musicbrainz_id != "" &&
|
|
"cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800"
|
|
]}
|
|
>
|
|
<img
|
|
:if={artist.artist_musicbrainz_id != ""}
|
|
class="w-12 h-12 rounded-md object-cover"
|
|
src={~p"/artists/#{artist.artist_musicbrainz_id}/image"}
|
|
alt={artist.artist_name}
|
|
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
|
/>
|
|
<div
|
|
:if={artist.artist_musicbrainz_id == ""}
|
|
class="w-12 h-12 rounded-md bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center"
|
|
>
|
|
<.icon name="hero-user" class="w-6 h-6 text-zinc-400" />
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-zinc-900 dark:text-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-400 truncate">
|
|
{artist.artist_name}
|
|
</p>
|
|
</div>
|
|
<.badge>
|
|
{artist.play_count}
|
|
</.badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
def refresh_lastfm_feed_button(assigns) do
|
|
~H"""
|
|
<button
|
|
type="button"
|
|
class="phx-click-loading:animate-spin text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
|
|
phx-click={JS.push("refresh_lastfm_feed")}
|
|
>
|
|
<span class="sr-only">{gettext("Refresh LastFm Feed")}</span>
|
|
<.icon name="hero-arrow-path" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
|
|
</button>
|
|
"""
|
|
end
|
|
|
|
def tracked_record?(tracked_releases, release_id) do
|
|
Enum.find_value(tracked_releases, fn tracked_release ->
|
|
if tracked_release.release_id == release_id, do: tracked_release.record_id
|
|
end)
|
|
end
|
|
end
|