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

Extract release with tracks component

Browse Source
This commit is contained in:
Claudio Ortolina
2025-05-09 20:49:12 +01:00
parent 755af1d97e
commit 95167b2113
5 changed files with 182 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/collection_live/show.html.heex
+7 -79
View File
@@ -221,7 +221,7 @@
<button
:if={@record.selected_release_id}
phx-click={Fluxon.open_dialog("tracks-sheet")}
phx-click={Fluxon.open_dialog("release-with-tracks-sheet")}
>
<span class="sr-only">{gettext("Show Tracks")}</span>
<.icon
@@ -274,84 +274,12 @@
<pre><code class="text-xs sm:text-sm"><%= Jason.encode!(@record.musicbrainz_data, pretty: true) %></code></pre>
</details>
<Fluxon.Components.Sheet.sheet
:if={@record.selected_release_id}
id="tracks-sheet"
placement="right"
on_open={JS.push("load_release_with_tracks")}
>
<div class="mt-6 flex justify-between items-center gap-4">
<h3 class="text-lg font-semibold text-zinc-700 dark:text-zinc-300">{gettext("Tracks")}</h3>
<Fluxon.Components.Button.button
:if={@can_scrobble?}
size="xs"
phx-click="scrobble_release"
phx-disable-with={gettext("Scrobbling...")}
>
{gettext("Scrobble to Last.fm")}
</Fluxon.Components.Button.button>
<Fluxon.Components.Button.button
:if={!@can_scrobble?}
as="link"
size="xs"
href={LastFm.auth_url()}
>
{gettext("Connect your Last.fm account")}
</Fluxon.Components.Button.button>
</div>
<div :if={@release_with_tracks} class="space-y-4 mt-4">
<.async_result :let={release_with_tracks} assign={@release_with_tracks}>
<:loading>
<span class="sr-only">{gettext("Loading release with tracks")}</span>
<Fluxon.Components.Loading.loading />
</:loading>
<:failed :let={_failure}>
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<.icon
name="hero-exclamation-triangle"
class="-mt-1 mr-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Error loading tracks")}
</div>
</:failed>
<div :for={medium <- release_with_tracks.media} class="space-y-4">
<h4
:if={MusicBrainz.Release.media_count(release_with_tracks) > 1}
class="text-sm font-semibold text-zinc-700 dark:text-zinc-300"
>
{medium_title(medium)}
</h4>
<ul id={"disc-#{medium.number}"} class="w-full table table-auto">
<li
:for={track <- medium.tracks}
class="contents leading-5 text-zinc-700 dark:text-zinc-300 list-none"
>
<div class="table-row">
<span class="table-cell text-xs text-right pr-1">{track.position}</span>
<span class="table-cell text-xs font-medium leading-8">{track.title}</span>
<span class="table-cell text-xs text-right pl-2">
{track.length && format_duration(track.length)}
</span>
</div>
<div :if={release_with_tracks.artists !== track.artists} class="table-row text-xs">
<span class="table-cell" />
<span class="table-cell">
{Enum.map_join(track.artists, ", ", fn artist -> artist.name end)}
</span>
</div>
</li>
</ul>
<Fluxon.Components.Separator.separator />
<p class="text-xs text-right text-zinc-700 dark:text-zinc-300">
{medium_duration(medium)}
</p>
</div>
</.async_result>
</div>
</Fluxon.Components.Sheet.sheet>
<.live_component
id="release-with-tracks"
sheet_id="release-with-tracks-sheet"
module={MusicLibraryWeb.ReleaseComponent}
record={@record}
/>
<.modal
:if={@live_action == :edit}