Inline templates inside LV modules
This commit is contained in:
Claudio Ortolina
@@ -7,6 +7,141 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
|
||||
alias MusicLibrary.Records
|
||||
alias MusicLibrary.ScrobbleActivity
|
||||
|
||||
@impl true
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||
<div>
|
||||
<header class="gap-6 mb-2">
|
||||
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
||||
<.search_form query={@search_query} />
|
||||
<.button :if={!@can_scrobble?} size="sm" href={LastFm.auth_url()}>
|
||||
{gettext("Connect your Last.fm account")}
|
||||
</.button>
|
||||
</div>
|
||||
</header>
|
||||
<%= if @search_results != [] && @selected_release_group == nil do %>
|
||||
<div class="space-y-3">
|
||||
<h3 class="text-lg font-semibold">{gettext("Release Groups")}</h3>
|
||||
<ul class={[
|
||||
"mt-5 divide-y divide-zinc-100 dark:divide-slate-300/30",
|
||||
"max-h-125 overflow-y-auto"
|
||||
]}>
|
||||
<li
|
||||
:for={release_group <- @search_results}
|
||||
phx-click="select_release_group"
|
||||
phx-value-release_group_id={release_group.id}
|
||||
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 cursor-pointer"
|
||||
>
|
||||
<div class="shrink-0 flex items-center justify-between w-full px-4">
|
||||
<img
|
||||
class="w-20 flex-none rounded-lg mr-4"
|
||||
alt={release_group.title}
|
||||
src={ReleaseGroupSearchResult.thumb_url(release_group)}
|
||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||
/>
|
||||
<div class="min-w-0 flex-auto">
|
||||
<p class="truncate text-sm leading-6 text-zinc-700 dark:text-zinc-400">
|
||||
{release_group.artists}
|
||||
</p>
|
||||
<p class="truncate mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||
{release_group.title}
|
||||
</p>
|
||||
<p class="mt-1 flex items-center gap-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
|
||||
{Records.Record.format_release_date(release_group.release_date)}
|
||||
<span>·</span>
|
||||
<.badge variant="soft" size="xs">{type_label(release_group.type)}</.badge>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= if @selected_release_group && @releases != [] do %>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<.button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
phx-click="clear_selection"
|
||||
>
|
||||
<.icon name="hero-arrow-left" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("Back")}
|
||||
</.button>
|
||||
<h3 class="text-lg font-semibold">
|
||||
{gettext("Releases for \"%{title}\"", title: @selected_release_group.title)}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<ul class="divide-y divide-zinc-100 dark:divide-slate-300/30">
|
||||
<li :for={release <- @releases}>
|
||||
<.link
|
||||
navigate={~p"/scrobble/#{release.id}"}
|
||||
class="flex items-center gap-x-4 py-5 px-4 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
|
||||
>
|
||||
<img
|
||||
class="w-20 flex-none rounded-lg"
|
||||
alt={release.title}
|
||||
src={Release.thumb_url(release)}
|
||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||
/>
|
||||
<div class="min-w-0 flex-auto">
|
||||
<p class="font-medium text-zinc-900 dark:text-zinc-100">
|
||||
{release.title}
|
||||
</p>
|
||||
<div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<span :if={release.date}>{release.date}</span>
|
||||
<span :if={release.country}>
|
||||
{country_label(release.country)}
|
||||
</span>
|
||||
<.badge :if={release.catalog_number} variant="soft" size="xs">
|
||||
{release.catalog_number}
|
||||
</.badge>
|
||||
<span :if={release.media != []}>
|
||||
{ngettext("1 disc", "%{count} discs", Release.media_count(release))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</.link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= if @loading && @search_query != "" do %>
|
||||
<div class="text-center py-8">
|
||||
<.loading class="size-8 mx-auto text-zinc-400" />
|
||||
<p class="text-zinc-600 dark:text-zinc-400 mt-2">
|
||||
<%= if @selected_release_group do %>
|
||||
{gettext("Loading releases...")}
|
||||
<% else %>
|
||||
{gettext("Searching...")}
|
||||
<% end %>
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= if @search_query != "" && @search_results == [] && not @loading do %>
|
||||
<div class="text-center py-8">
|
||||
<.icon
|
||||
name="hero-magnifying-glass"
|
||||
class="h-12 w-12 mx-auto text-zinc-300 dark:text-zinc-600"
|
||||
/>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 mt-3">
|
||||
{gettext("No release groups found for \"%{query}\"", query: @search_query)}
|
||||
</p>
|
||||
<p class="text-sm text-zinc-500 dark:text-zinc-500 mt-1">
|
||||
{gettext("Try a different search term or check the spelling")}
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</Layouts.app>
|
||||
"""
|
||||
end
|
||||
|
||||
@impl true
|
||||
def mount(_params, _session, socket) do
|
||||
{:ok,
|
||||
|
||||
@@ -1,129 +0,0 @@
|
||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||
<div>
|
||||
<header class="gap-6 mb-2">
|
||||
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
||||
<.search_form query={@search_query} />
|
||||
<.button :if={!@can_scrobble?} size="sm" href={LastFm.auth_url()}>
|
||||
{gettext("Connect your Last.fm account")}
|
||||
</.button>
|
||||
</div>
|
||||
</header>
|
||||
<%= if @search_results != [] && @selected_release_group == nil do %>
|
||||
<div class="space-y-3">
|
||||
<h3 class="text-lg font-semibold">{gettext("Release Groups")}</h3>
|
||||
<ul class={[
|
||||
"mt-5 divide-y divide-zinc-100 dark:divide-slate-300/30",
|
||||
"max-h-125 overflow-y-auto"
|
||||
]}>
|
||||
<li
|
||||
:for={release_group <- @search_results}
|
||||
phx-click="select_release_group"
|
||||
phx-value-release_group_id={release_group.id}
|
||||
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 cursor-pointer"
|
||||
>
|
||||
<div class="shrink-0 flex items-center justify-between w-full px-4">
|
||||
<img
|
||||
class="w-20 flex-none rounded-lg mr-4"
|
||||
alt={release_group.title}
|
||||
src={ReleaseGroupSearchResult.thumb_url(release_group)}
|
||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||
/>
|
||||
<div class="min-w-0 flex-auto">
|
||||
<p class="truncate text-sm leading-6 text-zinc-700 dark:text-zinc-400">
|
||||
{release_group.artists}
|
||||
</p>
|
||||
<p class="truncate mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||
{release_group.title}
|
||||
</p>
|
||||
<p class="mt-1 flex items-center gap-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
|
||||
{Records.Record.format_release_date(release_group.release_date)}
|
||||
<span>·</span>
|
||||
<.badge variant="soft" size="xs">{type_label(release_group.type)}</.badge>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= if @selected_release_group && @releases != [] do %>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<.button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
phx-click="clear_selection"
|
||||
>
|
||||
<.icon name="hero-arrow-left" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("Back")}
|
||||
</.button>
|
||||
<h3 class="text-lg font-semibold">
|
||||
{gettext("Releases for \"%{title}\"", title: @selected_release_group.title)}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<ul class="divide-y divide-zinc-100 dark:divide-slate-300/30">
|
||||
<li :for={release <- @releases}>
|
||||
<.link
|
||||
navigate={~p"/scrobble/#{release.id}"}
|
||||
class="flex items-center gap-x-4 py-5 px-4 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
|
||||
>
|
||||
<img
|
||||
class="w-20 flex-none rounded-lg"
|
||||
alt={release.title}
|
||||
src={Release.thumb_url(release)}
|
||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||
/>
|
||||
<div class="min-w-0 flex-auto">
|
||||
<p class="font-medium text-zinc-900 dark:text-zinc-100">
|
||||
{release.title}
|
||||
</p>
|
||||
<div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<span :if={release.date}>{release.date}</span>
|
||||
<span :if={release.country}>
|
||||
{country_label(release.country)}
|
||||
</span>
|
||||
<.badge :if={release.catalog_number} variant="soft" size="xs">
|
||||
{release.catalog_number}
|
||||
</.badge>
|
||||
<span :if={release.media != []}>
|
||||
{ngettext("1 disc", "%{count} discs", Release.media_count(release))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</.link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= if @loading && @search_query != "" do %>
|
||||
<div class="text-center py-8">
|
||||
<.loading class="size-8 mx-auto text-zinc-400" />
|
||||
<p class="text-zinc-600 dark:text-zinc-400 mt-2">
|
||||
<%= if @selected_release_group do %>
|
||||
{gettext("Loading releases...")}
|
||||
<% else %>
|
||||
{gettext("Searching...")}
|
||||
<% end %>
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= if @search_query != "" && @search_results == [] && not @loading do %>
|
||||
<div class="text-center py-8">
|
||||
<.icon
|
||||
name="hero-magnifying-glass"
|
||||
class="h-12 w-12 mx-auto text-zinc-300 dark:text-zinc-600"
|
||||
/>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 mt-3">
|
||||
{gettext("No release groups found for \"%{query}\"", query: @search_query)}
|
||||
</p>
|
||||
<p class="text-sm text-zinc-500 dark:text-zinc-500 mt-1">
|
||||
{gettext("Try a different search term or check the spelling")}
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</Layouts.app>
|
||||
@@ -6,6 +6,105 @@ defmodule MusicLibraryWeb.ScrobbleLive.Show do
|
||||
|
||||
alias MusicLibrary.ScrobbleActivity
|
||||
|
||||
@impl true
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<Layouts.app flash={@flash} current_section={:scrobble} socket={@socket}>
|
||||
<div>
|
||||
<.alert
|
||||
:if={not @can_scrobble}
|
||||
color="warning"
|
||||
title={gettext("Last.fm not connected")}
|
||||
hide_close
|
||||
>
|
||||
{gettext(
|
||||
"You need to connect your Last.fm account to scrobble. Please set up your Last.fm session key in the settings."
|
||||
)}
|
||||
</.alert>
|
||||
|
||||
<div class="mt-2 mb-4">
|
||||
<.button variant="ghost" size="sm" navigate={~p"/scrobble"}>
|
||||
<.icon name="hero-arrow-left" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("Back to search")}
|
||||
</.button>
|
||||
</div>
|
||||
|
||||
<div class="md:flex mt-4 px-4 md:gap-x-4">
|
||||
<div class="drop-shadow-sm md:max-w-152 lg:min-w-152">
|
||||
<img
|
||||
src={MusicBrainz.Release.thumb_url(@release)}
|
||||
alt={"Cover art for #{@release.title}"}
|
||||
class="w-full rounded-lg drop-shadow-sm"
|
||||
loading="lazy"
|
||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<div class="mt-4 md:mt-0 flex justify-between items-center">
|
||||
<h1 :if={@release.artists != []} class="text-base font-medium leading-6 text-zinc-700">
|
||||
{@release.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
|
||||
</h1>
|
||||
</div>
|
||||
<h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||
{@release.title}
|
||||
</h2>
|
||||
|
||||
<div class="mt-4 md:mt-8">
|
||||
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
|
||||
<.dl_row :if={@release.date} label={gettext("Release Date")}>
|
||||
{@release.date}
|
||||
</.dl_row>
|
||||
<.dl_row :if={@release.country} label={gettext("Country")}>
|
||||
{country_label(@release.country)} {@release.country}
|
||||
</.dl_row>
|
||||
<.dl_row :if={@release.barcode} label={gettext("Barcode")}>
|
||||
<code>{@release.barcode}</code>
|
||||
</.dl_row>
|
||||
<.dl_row :if={@release.catalog_number} label={gettext("Catalog Number")}>
|
||||
<code>{@release.catalog_number}</code>
|
||||
</.dl_row>
|
||||
<.dl_row :if={@release.media != []} label={gettext("Media")}>
|
||||
{ngettext("1 disc", "%{count} discs", MusicBrainz.Release.media_count(@release))}
|
||||
</.dl_row>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div :if={@release.media != []} class="mt-6 space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-lg font-semibold">{gettext("Tracks")}</h3>
|
||||
|
||||
<.button
|
||||
:if={@can_scrobble}
|
||||
phx-click={
|
||||
if MapSet.size(@selected_tracks) > 0,
|
||||
do: "scrobble_selected_tracks",
|
||||
else: "scrobble_release"
|
||||
}
|
||||
size="sm"
|
||||
>
|
||||
{scrobble_button_label(@selected_tracks)}
|
||||
</.button>
|
||||
</div>
|
||||
|
||||
<.medium
|
||||
:for={medium <- @release.media}
|
||||
can_scrobble?={@can_scrobble}
|
||||
already_scrobbled={false}
|
||||
medium={medium}
|
||||
release_artists={@release.artists}
|
||||
selected_tracks={@selected_tracks}
|
||||
media_count={MusicBrainz.Release.media_count(@release)}
|
||||
myself={nil}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layouts.app>
|
||||
"""
|
||||
end
|
||||
|
||||
@impl true
|
||||
def mount(_params, _session, socket) do
|
||||
{:ok,
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
<Layouts.app flash={@flash} current_section={:scrobble} socket={@socket}>
|
||||
<div>
|
||||
<.alert
|
||||
:if={not @can_scrobble}
|
||||
color="warning"
|
||||
title={gettext("Last.fm not connected")}
|
||||
hide_close
|
||||
>
|
||||
{gettext(
|
||||
"You need to connect your Last.fm account to scrobble. Please set up your Last.fm session key in the settings."
|
||||
)}
|
||||
</.alert>
|
||||
|
||||
<div class="mt-2 mb-4">
|
||||
<.button variant="ghost" size="sm" navigate={~p"/scrobble"}>
|
||||
<.icon name="hero-arrow-left" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("Back to search")}
|
||||
</.button>
|
||||
</div>
|
||||
|
||||
<div class="md:flex mt-4 px-4 md:gap-x-4">
|
||||
<div class="drop-shadow-sm md:max-w-152 lg:min-w-152">
|
||||
<img
|
||||
src={MusicBrainz.Release.thumb_url(@release)}
|
||||
alt={"Cover art for #{@release.title}"}
|
||||
class="w-full rounded-lg drop-shadow-sm"
|
||||
loading="lazy"
|
||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<div class="mt-4 md:mt-0 flex justify-between items-center">
|
||||
<h1 :if={@release.artists != []} class="text-base font-medium leading-6 text-zinc-700">
|
||||
{@release.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
|
||||
</h1>
|
||||
</div>
|
||||
<h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||
{@release.title}
|
||||
</h2>
|
||||
|
||||
<div class="mt-4 md:mt-8">
|
||||
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
|
||||
<.dl_row :if={@release.date} label={gettext("Release Date")}>
|
||||
{@release.date}
|
||||
</.dl_row>
|
||||
<.dl_row :if={@release.country} label={gettext("Country")}>
|
||||
{country_label(@release.country)} {@release.country}
|
||||
</.dl_row>
|
||||
<.dl_row :if={@release.barcode} label={gettext("Barcode")}>
|
||||
<code>{@release.barcode}</code>
|
||||
</.dl_row>
|
||||
<.dl_row :if={@release.catalog_number} label={gettext("Catalog Number")}>
|
||||
<code>{@release.catalog_number}</code>
|
||||
</.dl_row>
|
||||
<.dl_row :if={@release.media != []} label={gettext("Media")}>
|
||||
{ngettext("1 disc", "%{count} discs", MusicBrainz.Release.media_count(@release))}
|
||||
</.dl_row>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div :if={@release.media != []} class="mt-6 space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-lg font-semibold">{gettext("Tracks")}</h3>
|
||||
|
||||
<.button
|
||||
:if={@can_scrobble}
|
||||
phx-click={
|
||||
if MapSet.size(@selected_tracks) > 0,
|
||||
do: "scrobble_selected_tracks",
|
||||
else: "scrobble_release"
|
||||
}
|
||||
size="sm"
|
||||
>
|
||||
{scrobble_button_label(@selected_tracks)}
|
||||
</.button>
|
||||
</div>
|
||||
|
||||
<.medium
|
||||
:for={medium <- @release.media}
|
||||
can_scrobble?={@can_scrobble}
|
||||
already_scrobbled={false}
|
||||
medium={medium}
|
||||
release_artists={@release.artists}
|
||||
selected_tracks={@selected_tracks}
|
||||
media_count={MusicBrainz.Release.media_count(@release)}
|
||||
myself={nil}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layouts.app>
|
||||
Reference in New Issue
Block a user