Show album covers when importing/scanning

lib/music_brainz/release_group_search_result.ex

@@ -13,4 +13,8 @@ defmodule MusicBrainz.ReleaseGroupSearchResult do
       release: rg["first-release-date"]
     }
   end
+
+  def thumb_url(rgr) do
+    "https://coverartarchive.org/release-group/#{rgr.id}/front-250"
+  end
 end

lib/music_library_web/components/barcode_scanner_component.ex

@@ -1,6 +1,7 @@
 defmodule MusicLibraryWeb.BarcodeScannerComponent do
   use MusicLibraryWeb, :live_component
 
+  alias MusicBrainz.ReleaseGroupSearchResult
   alias MusicLibrary.Records
   alias MusicLibraryWeb.RecordComponents
 
@@ -100,6 +101,12 @@ defmodule MusicLibraryWeb.BarcodeScannerComponent do
   defp release(assigns) do
     ~H"""
     <div class="flex items-center justify-between w-full px-4">
+      <img
+        class="w-20 flex-none rounded-lg mr-4"
+        alt={@release.release_group.title}
+        src={ReleaseGroupSearchResult.thumb_url(@release.release_group)}
+        onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
+      />
       <div class="min-w-0 flex-auto">
         <h1 class="text-sm leading-6 text-zinc-700 dark:text-zinc-400">
           {@release.artists}

lib/music_library_web/components/import_component.ex

@@ -4,6 +4,7 @@ defmodule MusicLibraryWeb.ImportComponent do
   import MusicLibraryWeb.RecordComponents,
     only: [toggle_actions_menu: 1, close_actions_menu: 1, format_label: 1, type_label: 1]
 
+  alias MusicBrainz.ReleaseGroupSearchResult
   alias MusicLibrary.Records
 
   @impl true
@@ -62,6 +63,12 @@ defmodule MusicLibraryWeb.ImportComponent do
     ~H"""
     <li id={@id} class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700">
       <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">
           <h1 class="text-sm leading-6 text-zinc-700 dark:text-zinc-400">
             {@release_group.artists}

priv/gettext/default.pot

@@ -146,7 +146,7 @@ msgstr ""
 msgid "No cover selected"
 msgstr ""
 
-#: lib/music_library_web/components/import_component.ex:44
+#: lib/music_library_web/components/import_component.ex:45
 #, elixir-autogen, elixir-format
 msgid "No results"
 msgstr ""
@@ -218,12 +218,12 @@ msgstr ""
 msgid "Search"
 msgstr ""
 
-#: lib/music_library_web/components/import_component.ex:26
+#: lib/music_library_web/components/import_component.ex:27
 #, elixir-autogen, elixir-format
 msgid "Search for a record on MusicBrainz"
 msgstr ""
 
-#: lib/music_library_web/components/import_component.ex:27
+#: lib/music_library_web/components/import_component.ex:28
 #, elixir-autogen, elixir-format
 msgid "Search for records"
 msgstr ""
@@ -337,19 +337,19 @@ msgstr ""
 msgid "Scrobble activity"
 msgstr ""
 
-#: lib/music_library_web/components/import_component.ex:85
+#: lib/music_library_web/components/import_component.ex:92
 #: lib/music_library_web/live/stats_live/index.html.heex:169
 #, elixir-autogen, elixir-format
 msgid "Choose which format to import"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:121
+#: lib/music_library_web/components/barcode_scanner_component.ex:128
 #: lib/music_library_web/live/stats_live/index.html.heex:141
 #, elixir-autogen, elixir-format
 msgid "Collected"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:118
+#: lib/music_library_web/components/barcode_scanner_component.ex:125
 #: lib/music_library_web/live/stats_live/index.html.heex:147
 #, elixir-autogen, elixir-format
 msgid "Wishlisted"
@@ -632,42 +632,42 @@ msgstr ""
 msgid "Scan barcodes · Collection"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:23
+#: lib/music_library_web/components/barcode_scanner_component.ex:24
 #, elixir-autogen, elixir-format
 msgid "Scan one or more barcodes"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:90
+#: lib/music_library_web/components/barcode_scanner_component.ex:91
 #, elixir-autogen, elixir-format
 msgid "Open camera"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:54
+#: lib/music_library_web/components/barcode_scanner_component.ex:55
 #, elixir-autogen, elixir-format
 msgid "Import releases"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:162
+#: lib/music_library_web/components/barcode_scanner_component.ex:169
 #, elixir-autogen, elixir-format
 msgid "Failed to search release for barcode %{number}"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:153
+#: lib/music_library_web/components/barcode_scanner_component.ex:160
 #, elixir-autogen, elixir-format
 msgid "No release found for barcode %{number}"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:51
+#: lib/music_library_web/components/barcode_scanner_component.ex:52
 #, elixir-autogen, elixir-format
 msgid "Importing..."
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:192
+#: lib/music_library_web/components/barcode_scanner_component.ex:199
 #, elixir-autogen, elixir-format
 msgid "Records imported successfully"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:116
+#: lib/music_library_web/components/barcode_scanner_component.ex:123
 #, elixir-autogen, elixir-format
 msgid "New"
 msgstr ""