media assets: add media asset preview component.

Add a view component for rendering thumbnails for media assets.

This lets us properly show thumbnails on the upload listing page and the
media assets listing page, including support for high pixel density thumbnails
and video length icons for videos.

Fixes not being able to see thumbnails on the /media_assets page.

This is mostly copy/pasted from the post preview component. FIXME: don't duplicate code.

app/components/media_asset_preview_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# A component for showing a thumbnail preview for a media asset.
+# XXX This is mostly duplicated from PostPreviewComponent.
+class MediaAssetPreviewComponent < ApplicationComponent
+  DEFAULT_SIZE = 180
+
+  attr_reader :media_asset, :size, :fit, :link_target, :shrink_to_fit, :save_data
+  delegate :duration_to_hhmmss, :sound_icon, to: :helpers
+
+  # @param media_asset [MediaAsset] The media asset to show the thumbnail for.
+  # @param size [String] The size of the thumbnail. One of 150, 180, 225, 270, or 360.
+  # @param link_target [ApplicationRecord] What the thumbnail links to (default: the media asset).
+  # @param shrink_to_fit [Boolean] If true, allow the thumbnail to shrink to fit the containing element.
+  #   If false, make the thumbnail a fixed width and height.
+  # @param save_data [Boolean] If true, save data by not serving higher quality thumbnails
+  #   on 2x pixel density displays. Default: false.
+  def initialize(media_asset:, size: DEFAULT_SIZE, link_target: media_asset, shrink_to_fit: true, save_data: CurrentUser.save_data)
+    super
+    @media_asset = media_asset
+    @size = size.presence&.to_i || DEFAULT_SIZE
+    @link_target = link_target
+    @save_data = save_data
+    @shrink_to_fit = shrink_to_fit
+  end
+
+  def variant
+    case size
+    when 150, 180
+      media_asset.variant("180x180")
+    when 225, 270, 360
+      media_asset.variant("360x360")
+    when 720
+      media_asset.variant("720x720")
+    else
+      raise NotImplementedError
+    end
+  end
+end

app/components/media_asset_preview_component/media_asset_preview_component.html.erb

@@ -0,0 +1,24 @@
+<%= tag.article class: "media-asset-preview media-asset-preview-#{size}" do -%>
+  <%= link_to link_target, class: "inline-block relative", draggable: "false" do -%>
+    <% if media_asset.is_animated? %>
+      <div class="media-asset-animation-icon absolute top-0.5 left-0.5 p-0.5 m-0.5 leading-none rounded text-xs font-arial font-bold">
+        <span class="media-asset-duration align-middle">
+          <%= duration_to_hhmmss(media_asset.duration) %>
+        </span>
+      </div>
+    <% end %>
+
+    <picture>
+      <% unless save_data %>
+        <% case size %>
+        <% when 150, 180 %>
+          <%= tag.source type: "image/jpeg", srcset: "#{media_asset.variant("180x180").file_url} 1x, #{media_asset.variant("360x360").file_url} 2x" %>
+        <% when 225, 270, 360 %>
+          <%= tag.source type: "image/webp", srcset: "#{media_asset.variant("360x360").file_url} 1x, #{media_asset.variant("720x720").file_url} 2x" %>
+        <% end %>
+      <% end %>
+
+      <%= tag.img src: variant.file_url, width: variant.width, height: variant.height, class: "media-asset-preview-image w-auto h-auto max-h-#{size}px #{"max-w-full" if shrink_to_fit}", crossorigin: "anonymous", draggable: "false" -%>
+    </picture>
+  <% end %>
+<% end %>

app/components/media_asset_preview_component/media_asset_preview_component.scss

@@ -0,0 +1,4 @@
+.media-asset-animation-icon {
+  color: var(--preview-icon-color);
+  background: var(--preview-icon-background);
+}