Claudio Ortolina
230 lines
9.7 KiB
Plaintext
230 lines
9.7 KiB
Plaintext
<Layouts.app flash={@flash} current_section={:scrobble} socket={@socket}>
|
|
<div>
|
|
<%= if @loading do %>
|
|
<div class="text-center py-8">
|
|
<.icon name="hero-arrow-path" class="h-8 w-8 animate-spin mx-auto text-gray-400" />
|
|
<p class="text-gray-600 dark:text-gray-400 mt-2">Loading release details...</p>
|
|
</div>
|
|
<% else %>
|
|
<div class="space-y-6">
|
|
<div class="flex items-center gap-4">
|
|
<.link navigate={~p"/scrobble"} class="flex-shrink-0">
|
|
<.button variant="ghost" size="sm">
|
|
<.icon name="hero-arrow-left" class="h-4 w-4 mr-2" /> Back to Search
|
|
</.button>
|
|
</.link>
|
|
|
|
<div class="min-w-0 flex-1">
|
|
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
{@release.title}
|
|
</h1>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
<%= if @release.artists != [] do %>
|
|
by {@release.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
|
|
<% end %>
|
|
<%= if @release.date do %>
|
|
• Released {Date.from_iso8601!(@release.date) |> Calendar.strftime("%Y")}
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<%= if not @can_scrobble do %>
|
|
<div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
|
|
<div class="flex">
|
|
<.icon name="hero-exclamation-triangle" class="h-5 w-5 text-yellow-400" />
|
|
<div class="ml-3">
|
|
<p class="text-sm text-yellow-800 dark:text-yellow-200">
|
|
You need to connect your Last.fm account to scrobble. Please set up your Last.fm session key in the settings.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg">
|
|
<div class="p-6">
|
|
<h3 class="text-lg font-semibold mb-4">Release Information</h3>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
|
|
<%= if @release.date do %>
|
|
<div>
|
|
<span class="font-medium text-gray-600 dark:text-gray-400">
|
|
Release Date:
|
|
</span>
|
|
<br />{@release.date}
|
|
</div>
|
|
<% end %>
|
|
<%= if @release.country do %>
|
|
<div>
|
|
<span class="font-medium text-gray-600 dark:text-gray-400">Country:</span>
|
|
<br />{@release.country}
|
|
</div>
|
|
<% end %>
|
|
<%= if @release.barcode do %>
|
|
<div>
|
|
<span class="font-medium text-gray-600 dark:text-gray-400">Barcode:</span>
|
|
<br />{@release.barcode}
|
|
</div>
|
|
<% end %>
|
|
<%= if @release.catalog_number do %>
|
|
<div>
|
|
<span class="font-medium text-gray-600 dark:text-gray-400">
|
|
Catalog Number:
|
|
</span>
|
|
<br />{@release.catalog_number}
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%= if @release.media != [] do %>
|
|
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg mt-6">
|
|
<div class="p-6">
|
|
<h3 class="text-lg font-semibold mb-4">Tracks</h3>
|
|
<div class="space-y-6">
|
|
<%= for medium <- @release.media do %>
|
|
<div class="space-y-3">
|
|
<div class="flex justify-between items-center">
|
|
<h4 class="font-medium">
|
|
<%= if length(@release.media) > 1 do %>
|
|
Medium {medium.number}
|
|
<%= if medium.title do %>
|
|
- {medium.title}
|
|
<% end %>
|
|
<%= if medium.format do %>
|
|
({medium.format})
|
|
<% end %>
|
|
<% else %>
|
|
Tracks
|
|
<%= if medium.format do %>
|
|
({medium.format})
|
|
<% end %>
|
|
<% end %>
|
|
</h4>
|
|
<%= if @can_scrobble do %>
|
|
<.button
|
|
size="sm"
|
|
variant="outline"
|
|
phx-click="scrobble_medium"
|
|
phx-value-medium_number={medium.number}
|
|
>
|
|
<.icon name="hero-play" class="h-3 w-3 mr-1" /> Scrobble Medium
|
|
</.button>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<%= for track <- medium.tracks do %>
|
|
<div class="flex justify-between items-center py-2 px-3 bg-gray-50 dark:bg-gray-800 rounded">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400 w-6 text-right">
|
|
{track.position}
|
|
</span>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="font-medium text-sm text-gray-900 dark:text-gray-100 truncate">
|
|
{track.title}
|
|
</p>
|
|
<%= if track.artists != [] and track.artists != @release.artists do %>
|
|
<p class="text-xs text-gray-600 dark:text-gray-400 truncate">
|
|
{track.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<%= if track.length do %>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400 font-mono">
|
|
{format_duration(track.length)}
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%= if @can_scrobble do %>
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg sticky top-6">
|
|
<div class="p-6">
|
|
<h3 class="text-lg font-semibold mb-4">Scrobble Options</h3>
|
|
|
|
<.form
|
|
for={%{}}
|
|
as={:scrobble}
|
|
phx-change="update_scrobble_form"
|
|
class="space-y-4"
|
|
>
|
|
<.select
|
|
name="type"
|
|
label="Scrobble timing"
|
|
value={@scrobble_form["type"]}
|
|
options={[
|
|
{"Just finished listening", "finished_at"},
|
|
{"Started listening at", "started_at"}
|
|
]}
|
|
/>
|
|
|
|
<%= if @scrobble_form["type"] == "finished_at" do %>
|
|
<div class="space-y-2">
|
|
<.input
|
|
type="date"
|
|
name="finished_at_date"
|
|
label="Finished Date"
|
|
value={@scrobble_form["finished_at_date"]}
|
|
/>
|
|
<.input
|
|
type="time"
|
|
name="finished_at_time"
|
|
label="Finished Time"
|
|
value={@scrobble_form["finished_at_time"]}
|
|
/>
|
|
</div>
|
|
<% else %>
|
|
<div class="space-y-2">
|
|
<.input
|
|
type="date"
|
|
name="started_at_date"
|
|
label="Started Date"
|
|
value={@scrobble_form["started_at_date"]}
|
|
/>
|
|
<.input
|
|
type="time"
|
|
name="started_at_time"
|
|
label="Started Time"
|
|
value={@scrobble_form["started_at_time"]}
|
|
/>
|
|
</div>
|
|
<% end %>
|
|
</.form>
|
|
|
|
<div class="space-y-3 mt-6">
|
|
<.button
|
|
phx-click="scrobble_release"
|
|
class="w-full"
|
|
size="lg"
|
|
>
|
|
<.icon name="hero-play" class="h-4 w-4 mr-2" /> Scrobble Entire Release
|
|
</.button>
|
|
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 text-center">
|
|
This will scrobble all tracks from all media in sequence
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</Layouts.app>
|