Use Transforms to serve covers at the right size

lib/music_library/assets/transform.ex

@@ -37,3 +37,9 @@ defmodule MusicLibrary.Assets.Transform do
     })
   end
 end
+
+defimpl Phoenix.Param, for: MusicLibrary.Assets.Transform do
+  def to_param(transform) do
+    MusicLibrary.Assets.Transform.encode!(transform)
+  end
+end

lib/music_library_web/components/record_components.ex

@@ -2,18 +2,26 @@ defmodule MusicLibraryWeb.RecordComponents do
   use MusicLibraryWeb, :html
 
   alias MusicBrainz.ReleaseSearchResult
+  alias MusicLibrary.Assets.Transform
   alias MusicLibrary.Records
   alias Phoenix.LiveView.JS
 
   attr :record, :map, required: true
   attr :class, :string, required: false, default: "rounded-lg"
+  attr :width, :integer, default: nil
 
   def record_cover(assigns) do
+    payload =
+      %Transform{hash: assigns.record.cover_hash, width: assigns.width}
+      |> Transform.encode!()
+
+    assigns = assign(assigns, :payload, payload)
+
     ~H"""
     <img
       class={@class}
       alt={@record.title}
-      src={~p"/covers/#{@record.cover_hash}"}
+      src={~p"/covers/#{@payload}"}
     />
     """
   end
@@ -58,7 +66,7 @@ defmodule MusicLibraryWeb.RecordComponents do
       >
         <div class="flex min-w-0 gap-x-4 items-center">
           <div class="relative w-20 flex-none">
-            <.record_cover record={record} />
+            <.record_cover record={record} width={160} />
             <span
               :if={Records.Record.included_release_groups_count(record) > 0}
               class={[
@@ -230,6 +238,7 @@ defmodule MusicLibraryWeb.RecordComponents do
               <.record_cover
                 record={record}
                 class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
+                width={460}
               />
               <span
                 :if={Records.Record.included_release_groups_count(record) > 0}

lib/music_library_web/components/search_components.ex

@@ -34,6 +34,7 @@ defmodule MusicLibraryWeb.SearchComponents do
           <.record_cover
             record={@record}
             class="w-12 h-12 rounded-md aspect-square object-cover"
+            width={96}
           />
         </div>
         <div class="min-w-0 flex-1">

lib/music_library_web/components/stats_components.ex

@@ -23,6 +23,7 @@ defmodule MusicLibraryWeb.StatsComponents do
         <.record_cover
           record={@record}
           class="w-16 md:w-20 rounded-md shadow-sm"
+          width={160}
         />
       </div>
       <div class="ml-4">
@@ -167,7 +168,7 @@ defmodule MusicLibraryWeb.StatsComponents do
       >
         <div class="flex min-w-0 gap-x-4 items-center">
           <div class="relative w-12 flex-none">
-            <.record_cover record={record} />
+            <.record_cover record={record} width={96} />
             <span
               :if={Records.Record.included_release_groups_count(record) > 0}
               class={[

lib/music_library_web/controllers/cover_controller.ex

@@ -2,38 +2,32 @@ defmodule MusicLibraryWeb.CoverController do
   use MusicLibraryWeb, :controller
 
   alias MusicLibrary.Assets
-  alias MusicLibrary.Assets.Asset
+  alias MusicLibrary.Assets.Transform
   alias MusicLibrary.Records.Cover
 
   # 1 year in seconds
   @cache_duration 60 * 60 * 24 * 365
 
-  def show(conn, %{"hash" => hash, "size" => size}) do
-    case Assets.get(hash) do
+  def show(conn, %{"transform_payload" => payload}) do
+    transform = Transform.decode!(payload)
+
+    case Assets.get(transform.hash) do
       nil ->
         not_found(conn)
 
       %{content: content} ->
-        # TODO: find a way to cache computation, or pre-compute thumb and store it
-        {:ok, thumb_data} = Cover.resize(content, String.to_integer(size))
-        hash = Asset.hash(thumb_data)
+        image_data =
+          if transform.width do
+            # TODO: find a way to cache computation, or pre-compute thumb and store it
+            {:ok, thumb_data} = Cover.resize(content, transform.width)
+            thumb_data
+          else
+            content
+          end
 
         case get_req_header(conn, "if-none-match") do
-          [^hash] -> extend_cache(conn)
-          _ -> respond_with_cache(conn, thumb_data, hash)
-        end
-    end
-  end
-
-  def show(conn, %{"hash" => hash}) do
-    case Assets.get(hash) do
-      nil ->
-        not_found(conn)
-
-      asset ->
-        case get_req_header(conn, "if-none-match") do
-          [^hash] -> extend_cache(conn)
-          _ -> respond_with_cache(conn, asset)
+          [^payload] -> extend_cache(conn)
+          _ -> respond_with_cache(conn, image_data, payload)
         end
     end
   end
@@ -50,14 +44,6 @@ defmodule MusicLibraryWeb.CoverController do
     |> send_resp(304, "")
   end
 
-  defp respond_with_cache(conn, asset) do
-    conn
-    |> put_resp_content_type(asset.format, "utf-8")
-    |> put_resp_header("cache-control", "public, max-age=#{@cache_duration}")
-    |> put_resp_header("etag", asset.hash)
-    |> send_resp(200, asset.content)
-  end
-
   defp respond_with_cache(conn, data, etag) do
     conn
     |> put_resp_content_type("image/jpeg", "utf-8")

lib/music_library_web/router.ex

@@ -36,7 +36,7 @@ defmodule MusicLibraryWeb.Router do
 
       get "/backup", ArchiveController, :backup
 
-      get "/covers/:hash", CoverController, :show
+      get "/covers/:transform_payload", CoverController, :show
       get "/artists/:musicbrainz_id/image", ArtistController, :image
 
       live_session :default,