cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Consolidate record components into one module

Browse Source
This commit is contained in:
Claudio Ortolina
2025-02-20 09:04:47 +00:00
parent 0873b12eed
commit 55538903d4
5 changed files with 72 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/record_components.ex
+55 -1
View File
@@ -1,8 +1,8 @@
defmodule MusicLibraryWeb.RecordComponents do
use MusicLibraryWeb, :html
alias Phoenix.LiveView.JS
alias MusicLibrary.Records
alias Phoenix.LiveView.JS
attr :record_show_path, :any, required: true
attr :record_edit_path, :any, required: true
@@ -208,6 +208,60 @@ defmodule MusicLibraryWeb.RecordComponents do
"""
end
attr :records, :list, required: true
attr :records_count, :integer, required: true
attr :title, :string, required: true
attr :id, :string, required: true
attr :record_path, :any, required: true
def record_grid(assigns) do
~H"""
<div class="mt-4">
<header class="flex items-baseline justify-between">
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
{@title}
</h2>
<span class="ml-2 text-sm font-normal text-zinc-700 dark:text-zinc-300">
{ngettext("1 record", "%{count} records", @records_count)}
</span>
</header>
<%!-- TODO: replace with OSS version --%>
<ul
id={@id}
phx-update="stream"
role="list"
class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8"
>
<li :for={{id, record} <- @records} id={id} class="relative">
<div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
<img
alt={record.title}
src={~p"/covers/#{record.id}?vsn=#{record.cover_hash}"}
class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
/>
<button
type="button"
class="absolute inset-0 focus:outline-none"
phx-click={JS.navigate(@record_path.(record))}
>
<span class="sr-only">{gettext("View details")}</span>
</button>
</div>
<p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
{record.title}
</p>
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
{format_label(record.format)} · {type_label(record.type)}
</p>
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
{Records.Record.format_release(record.release)}
</p>
</li>
</ul>
</div>
"""
end
def format_label(:cd), do: gettext("CD")
def format_label(:backup), do: gettext("Backup")
def format_label(:vinyl), do: gettext("Vinyl")
lib/music_library_web/live/artist_live/record_components.ex
-60
View File
@@ -1,60 +0,0 @@
defmodule MusicLibraryWeb.ArtistLive.RecordComponents do
use MusicLibraryWeb, :live_component
import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
alias MusicLibrary.Records
attr :records, :list, required: true
attr :records_count, :integer, required: true
attr :title, :string, required: true
attr :id, :string, required: true
attr :record_path, :any, required: true
def grid(assigns) do
~H"""
<div class="mt-4">
<header class="flex items-baseline justify-between">
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
{@title}
</h2>
<span class="ml-2 text-sm font-normal text-zinc-700 dark:text-zinc-300">
{ngettext("1 record", "%{count} records", @records_count)}
</span>
</header>
<%!-- TODO: replace with OSS version --%>
<ul
id={@id}
phx-update="stream"
role="list"
class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8"
>
<li :for={{id, record} <- @records} id={id} class="relative">
<div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
<img
alt={record.title}
src={~p"/covers/#{record.id}?vsn=#{record.cover_hash}"}
class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
/>
<button
type="button"
class="absolute inset-0 focus:outline-none"
phx-click={JS.navigate(@record_path.(record))}
>
<span class="sr-only">{gettext("View details")}</span>
</button>
</div>
<p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
{record.title}
</p>
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
{format_label(record.format)} · {type_label(record.type)}
</p>
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
{Records.Record.format_release(record.release)}
</p>
</li>
</ul>
</div>
"""
end
end
lib/music_library_web/live/artist_live/show.ex
+1 -1
View File
@@ -1,8 +1,8 @@
defmodule MusicLibraryWeb.ArtistLive.Show do
use MusicLibraryWeb, :live_view
import MusicLibraryWeb.ArtistLive.RecordComponents
alias MusicLibrary.{Artists, Records}
import MusicLibraryWeb.RecordComponents, only: [record_grid: 1]
@impl true
def mount(_params, _session, socket) do
lib/music_library_web/live/artist_live/show.html.heex
+2 -2
View File
@@ -62,7 +62,7 @@
</details>
</.async_result>
<.grid
<.record_grid
:if={@collection_records_count > 0}
title={gettext("Collection")}
id="collection"
@@ -71,7 +71,7 @@
record_path={fn record -> ~p"/collection/#{record}" end}
/>
<.grid
<.record_grid
:if={@wishlist_records_count > 0}
title={gettext("Wishlist")}
id="wishlist"
priv/gettext/default.pot
+14 -14
View File
@@ -431,7 +431,7 @@ msgstr ""
msgid "Dev dashboard"
msgstr ""
#: lib/music_library_web/live/artist_live/record_components.ex:43
#: lib/music_library_web/components/record_components.ex:247
#, elixir-autogen, elixir-format
msgid "View details"
msgstr ""
@@ -511,7 +511,7 @@ msgstr ""
msgid "On Tour"
msgstr ""
#: lib/music_library_web/live/artist_live/record_components.ex:21
#: lib/music_library_web/components/record_components.ex:225
#, elixir-autogen, elixir-format
msgid "1 record"
msgid_plural "%{count} records"
@@ -543,63 +543,63 @@ msgstr ""
msgid "Unreleased"
msgstr ""
#: lib/music_library_web/components/record_components.ex:218
#: lib/music_library_web/components/record_components.ex:272
#, elixir-autogen, elixir-format
msgid "Album"
msgstr ""
#: lib/music_library_web/components/layouts/app.html.heex:38
#: lib/music_library_web/components/record_components.ex:212
#: lib/music_library_web/components/record_components.ex:266
#, elixir-autogen, elixir-format
msgid "Backup"
msgstr ""
#: lib/music_library_web/components/record_components.ex:214
#: lib/music_library_web/components/record_components.ex:268
#, elixir-autogen, elixir-format
msgid "Blu-ray"
msgstr ""
#: lib/music_library_web/components/record_components.ex:211
#: lib/music_library_web/components/record_components.ex:265
#, elixir-autogen, elixir-format
msgid "CD"
msgstr ""
#: lib/music_library_web/components/record_components.ex:221
#: lib/music_library_web/components/record_components.ex:275
#, elixir-autogen, elixir-format
msgid "Comp"
msgstr ""
#: lib/music_library_web/components/record_components.ex:215
#: lib/music_library_web/components/record_components.ex:269
#, elixir-autogen, elixir-format
msgid "DVD"
msgstr ""
#: lib/music_library_web/components/record_components.ex:219
#: lib/music_library_web/components/record_components.ex:273
#, elixir-autogen, elixir-format
msgid "EP"
msgstr ""
#: lib/music_library_web/components/record_components.ex:220
#: lib/music_library_web/components/record_components.ex:274
#, elixir-autogen, elixir-format
msgid "Live"
msgstr ""
#: lib/music_library_web/components/record_components.ex:216
#: lib/music_library_web/components/record_components.ex:270
#, elixir-autogen, elixir-format
msgid "Multi"
msgstr ""
#: lib/music_library_web/components/record_components.ex:223
#: lib/music_library_web/components/record_components.ex:277
#, elixir-autogen, elixir-format
msgid "Other"
msgstr ""
#: lib/music_library_web/components/record_components.ex:222
#: lib/music_library_web/components/record_components.ex:276
#, elixir-autogen, elixir-format
msgid "Single"
msgstr ""
#: lib/music_library_web/components/record_components.ex:213
#: lib/music_library_web/components/record_components.ex:267
#, elixir-autogen, elixir-format
msgid "Vinyl"
msgstr ""