Files
music_library/lib/music_library_web/components/release_component.ex
T

169 lines
6.3 KiB
Elixir

defmodule MusicLibraryWeb.ReleaseComponent do
use MusicLibraryWeb, :live_component
use Gettext, backend: MusicLibraryWeb.Gettext
import MusicLibraryWeb.RecordComponents,
only: [
format_duration: 1
]
alias MusicLibrary.ScrobbleActivity
@impl true
def mount(socket) do
{:ok,
socket
|> assign(:can_scrobble?, ScrobbleActivity.can_scrobble?())
|> assign(:release_with_tracks, nil)}
end
@impl true
def render(assigns) do
~H"""
<div>
<Fluxon.Components.Sheet.sheet
:if={@record.selected_release_id}
id={@sheet_id}
placement="right"
on_open={JS.push("load_release_with_tracks", target: @myself)}
>
<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-target={@myself}
phx-disable-with={gettext("Scrobbling...")}
>
<span class="sr-only">{gettext("Scrobble release")}</span>
<.last_fm_icon class="w-4 fill-current" />
</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>
</div>
"""
end
@impl true
def handle_event("load_release_with_tracks", _params, socket) do
selected_release_id = socket.assigns.record.selected_release_id
{:noreply,
socket
|> assign_async(:release_with_tracks, fn ->
with {:ok, release} <- MusicBrainz.get_release(selected_release_id) do
{:ok, %{release_with_tracks: MusicBrainz.Release.from_api_response(release)}}
end
end)}
end
def handle_event("scrobble_release", _params, socket) do
release_with_tracks_async_result =
socket.assigns.release_with_tracks
if release_with_tracks =
release_with_tracks_async_result && release_with_tracks_async_result.result do
case ScrobbleActivity.scrobble_release(release_with_tracks, finished_at: DateTime.utc_now()) do
{:ok, _} ->
{:noreply,
socket
|> put_flash(:info, gettext("Release scrobbled successfully"))}
{:error, reason} ->
{:noreply,
socket
|> put_flash(
:error,
gettext("Error scrobbling release") <> "," <> inspect(reason)
)}
end
end
end
defp medium_duration(medium) do
medium
|> MusicBrainz.Release.medium_duration()
|> format_duration()
end
defp medium_title(medium) do
if medium.title !== "" do
medium.title
else
gettext("Disc %{no}", %{no: medium.number})
end
end
attr :class, :string, required: true
defp last_fm_icon(assigns) do
# https://www.svgrepo.com/svg/341982/last-fm
~H"""
<svg class={@class} width="24" height="24" viewBox="0 0 32 32">
<path d="M14.131 22.948l-1.172-3.193c0 0-1.912 2.131-4.771 2.131-2.537 0-4.333-2.203-4.333-5.729 0-4.511 2.276-6.125 4.515-6.125 3.224 0 4.245 2.089 5.125 4.772l1.161 3.667c1.161 3.561 3.365 6.421 9.713 6.421 4.548 0 7.631-1.391 7.631-5.068 0-2.968-1.697-4.511-4.844-5.244l-2.344-0.511c-1.624-0.371-2.104-1.032-2.104-2.131 0-1.249 0.985-1.984 2.604-1.984 1.767 0 2.704 0.661 2.865 2.24l3.661-0.444c-0.297-3.301-2.584-4.656-6.323-4.656-3.308 0-6.532 1.251-6.532 5.245 0 2.5 1.204 4.077 4.245 4.807l2.484 0.589c1.865 0.443 2.484 1.224 2.484 2.287 0 1.359-1.323 1.921-3.828 1.921-3.703 0-5.244-1.943-6.124-4.625l-1.204-3.667c-1.541-4.765-4.005-6.531-8.891-6.531-5.287-0.016-8.151 3.385-8.151 9.192 0 5.573 2.864 8.595 8.005 8.595 4.14 0 6.125-1.943 6.125-1.943z" />
</svg>
"""
end
end