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

Use labels to ease interaction with tracks/mediums

Browse Source
This commit is contained in:
Claudio Ortolina
2026-01-15 17:25:28 +00:00
parent 823c887e08
commit ccf515ee28
1 changed files with 43 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/release.ex
+43 -38
View File
@@ -47,7 +47,7 @@ defmodule MusicLibraryWeb.Components.Release do
class="min-w-xs sm:min-w-sm" class="min-w-xs sm:min-w-sm"
> >
<div class="mt-6 flex justify-between items-center gap-4"> <div class="mt-6 flex justify-between items-center gap-4">
<h3 class="text-lg font-semibold text-zinc-700 dark:text-zinc-300"> <label class="text-lg font-semibold text-zinc-700 dark:text-zinc-300 cursor-pointer">
<input <input
:if={ :if={
@can_scrobble? && @release_with_tracks.ok? && @can_scrobble? && @release_with_tracks.ok? &&
@@ -56,7 +56,10 @@ defmodule MusicLibraryWeb.Components.Release do
type="checkbox" type="checkbox"
id="medium-checkbox-1" id="medium-checkbox-1"
checked={ checked={
medium_selected?(Release.get_medium(@release_with_tracks.result, 1), @selected_tracks) medium_selected?(
Release.get_medium(@release_with_tracks.result, 1),
@selected_tracks
)
} }
phx-click="toggle_medium" phx-click="toggle_medium"
phx-value-medium-number={1} phx-value-medium-number={1}
@@ -64,7 +67,7 @@ defmodule MusicLibraryWeb.Components.Release do
class="w-4 h-4 mr-2 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" class="w-4 h-4 mr-2 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/> />
{gettext("Tracks")} {gettext("Tracks")}
</h3> </label>
<.button <.button
:if={@can_scrobble? && @release_with_tracks.ok?} :if={@can_scrobble? && @release_with_tracks.ok?}
size="sm" size="sm"
@@ -134,7 +137,7 @@ defmodule MusicLibraryWeb.Components.Release do
:if={@media_count > 1} :if={@media_count > 1}
class="flex justify-between items-center gap-4" class="flex justify-between items-center gap-4"
> >
<h4 class="text-sm md:text-md font-semibold text-zinc-700 dark:text-zinc-300"> <label class="text-sm md:text-md font-semibold text-zinc-700 dark:text-zinc-300 cursor-pointer">
<input <input
:if={@can_scrobble?} :if={@can_scrobble?}
type="checkbox" type="checkbox"
@@ -149,7 +152,7 @@ defmodule MusicLibraryWeb.Components.Release do
<.badge variant="soft" class="text-xs"> <.badge variant="soft" class="text-xs">
{@medium.format} {@medium.format}
</.badge> </.badge>
</h4> </label>
<.button <.button
:if={@can_scrobble?} :if={@can_scrobble?}
size="sm" size="sm"
@@ -197,40 +200,42 @@ defmodule MusicLibraryWeb.Components.Release do
<ul id={"disc-#{@medium_number}"} class="w-full table table-auto"> <ul id={"disc-#{@medium_number}"} class="w-full table table-auto">
<li <li
:for={track <- @tracks} :for={track <- @tracks}
class="contents leading-5 text-zinc-700 dark:text-zinc-300 list-none" class="leading-5 text-zinc-700 dark:text-zinc-300 list-none"
> >
<div class="table-row"> <label class="contents cursor-pointer">
<span :if={@can_scrobble?} class="table-cell pr-2 align-middle"> <div class="table-row">
<input <span :if={@can_scrobble?} class="table-cell pr-2 align-middle">
type="checkbox" <input
id={"track-checkbox-#{track.id}"} type="checkbox"
checked={MapSet.member?(@selected_tracks, track.id)} id={"track-checkbox-#{track.id}"}
phx-click="toggle_track" checked={MapSet.member?(@selected_tracks, track.id)}
phx-value-track-id={track.id} phx-click="toggle_track"
phx-target={@myself} phx-value-track-id={track.id}
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" phx-target={@myself}
/> class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
</span> />
<span class="table-cell text-xs text-right pr-1 text-nowrap"> </span>
{track.number || track.position} <span class="table-cell text-xs text-right pr-1 text-nowrap">
</span> {track.number || track.position}
<span class="table-cell text-xs md:text-sm font-medium leading-8 w-full"> </span>
{track.title} <span class="table-cell text-xs md:text-sm font-medium leading-8 w-full">
</span> {track.title}
<span class="table-cell text-xs md:text-sm text-right pl-2"> </span>
{track.length && Duration.format_duration(track.length)} <span class="table-cell text-xs md:text-sm text-right pl-2">
</span> {track.length && Duration.format_duration(track.length)}
</div> </span>
<div </div>
:if={@release_artists !== track.artists} <div
class="table-row text-xs md:text-sm" :if={@release_artists !== track.artists}
> class="table-row text-xs md:text-sm"
<span :if={@can_scrobble?} class="table-cell" /> >
<span class="table-cell" /> <span :if={@can_scrobble?} class="table-cell" />
<span class="table-cell"> <span class="table-cell" />
{Enum.map_join(track.artists, ", ", fn artist -> artist.name end)} <span class="table-cell">
</span> {Enum.map_join(track.artists, ", ", fn artist -> artist.name end)}
</div> </span>
</div>
</label>
</li> </li>
</ul> </ul>
""" """