uploads: autorefresh thumbnails on multi-file uploads page.

Automatically refresh thumbnails on the multi-file upload page as images
are processed in the background.

app/components/media_asset_gallery_component.rb

@@ -3,14 +3,15 @@
 class MediaAssetGalleryComponent < ApplicationComponent
   DEFAULT_SIZE = 180
 
-  attr_reader :inline, :size, :options
+  attr_reader :inline, :size, :classes
 
   renders_many :media_assets
   renders_one :footer
 
-  def initialize(inline: false, size: DEFAULT_SIZE)
+  def initialize(inline: false, size: DEFAULT_SIZE, classes: [])
     super
     @inline = inline
     @size = size
+    @classes = classes
   end
 end

app/components/media_asset_gallery_component/media_asset_gallery_component.html.erb

@@ -1,4 +1,4 @@
-<div class="media-asset-gallery media-asset-gallery-<%= size %>">
+<%= tag.div class: ["media-asset-gallery", "media-asset-gallery-#{size}", *classes], "data-size": size do %>
   <% if media_assets.empty? %>
     <p>No results found.</p>
   <% else %>
@@ -10,4 +10,4 @@
   <% end %>
 
   <%= footer %>
-</div>
+<% end %>

app/components/media_asset_preview_component.rb

@@ -5,7 +5,7 @@
 class MediaAssetPreviewComponent < ApplicationComponent
   DEFAULT_SIZE = 180
 
-  attr_reader :media_asset, :size, :link_target, :classes, :save_data
+  attr_reader :media_asset, :size, :link_target, :classes, :html, :save_data
   delegate :duration_to_hhmmss, :sound_icon, to: :helpers
 
   renders_one :header
@@ -17,12 +17,13 @@ class MediaAssetPreviewComponent < ApplicationComponent
   # @param link_target [ApplicationRecord] What the thumbnail links to (default: the media asset).
   # @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, classes: [], save_data: CurrentUser.save_data)
+  def initialize(media_asset:, size: DEFAULT_SIZE, link_target: media_asset, classes: [], html: {}, save_data: CurrentUser.save_data)
     super
     @media_asset = media_asset
     @size = size.presence&.to_i || DEFAULT_SIZE
     @link_target = link_target
     @classes = classes
+    @html = html
     @save_data = save_data
   end
 

app/components/media_asset_preview_component/media_asset_preview_component.html.erb

@@ -1,4 +1,4 @@
-<%= tag.article class: ["media-asset-preview media-asset-preview-#{size}", *classes] do -%>
+<%= tag.article class: ["media-asset-preview media-asset-preview-#{size}", *classes], **html do -%>
   <%= link_to link_target, class: "inline-block relative", draggable: "false" do -%>
     <%= header %>
 

app/javascript/src/javascripts/uploads.js

@@ -1,3 +1,5 @@
+import Utility from "./utility";
+
 let Upload = {};
 
 Upload.IQDB_LIMIT = 5;
@@ -22,6 +24,17 @@ Upload.initialize_all = function() {
   if ($("#c-uploads #a-batch").length) {
     $(document).on("click.danbooru", "#c-uploads #a-batch #link", Upload.batch_open_all);
   }
+
+  Upload.loadAssets();
+}
+
+Upload.loadAssets = async function() {
+  while ($(".upload-media-asset-loading").length) {
+    let ids = $(".upload-media-asset-loading").map((i, el) => $(el).attr("data-id")).toArray().join(",");
+    let size = $(".upload-media-asset-gallery").attr("data-size");
+    $.get("/upload_media_assets.js", { search: { status: "active failed", id: ids }, size: size });
+    await Utility.delay(250);
+  }
 }
 
 Upload.initialize_similar = function() {

app/models/upload_media_asset.rb

@@ -29,6 +29,10 @@ class UploadMediaAsset < ApplicationRecord
     q.apply_default_order(params)
   end
 
+  def loading?
+    pending? || processing?
+  end
+
   def finished?
     active? || failed?
   end

app/views/upload_media_assets/_gallery.html.erb

@@ -1,4 +1,4 @@
-<%= render(MediaAssetGalleryComponent.new) do |gallery| %>
+<%= render(MediaAssetGalleryComponent.new(classes: ["upload-media-asset-gallery"])) do |gallery| %>
   <% upload_media_assets.each do |upload_media_asset| %>
     <% gallery.media_asset do %>
       <%= render "upload_media_assets/preview", upload_media_asset: upload_media_asset, size: gallery.size %>

app/views/upload_media_assets/_preview.html.erb

@@ -1,6 +1,6 @@
 <% media_asset = upload_media_asset.media_asset %>
 
-<%= render MediaAssetPreviewComponent.new(media_asset: media_asset, size: size, link_target: [upload_media_asset.upload, upload_media_asset]) do |preview| %>
+<%= render MediaAssetPreviewComponent.new(media_asset: media_asset, size: size, link_target: [upload_media_asset.upload, upload_media_asset], classes: ["upload-media-asset-preview", ("upload-media-asset-loading" if upload_media_asset.loading?)], html: { "data-id": upload_media_asset.id }) do |preview| %>
   <% preview.missing_image do %>
     <% if upload_media_asset.failed? %>
       Failed

app/views/upload_media_assets/index.js.erb

@@ -0,0 +1,3 @@
+<% @upload_media_assets.each do |upload_media_asset| %>
+  $(".upload-media-asset-preview[data-id=<%= upload_media_asset.id %>]").replaceWith("<%= j render("upload_media_assets/preview", upload_media_asset: upload_media_asset, size: params.fetch(:size, 180)) %>");
+<% end %>

app/views/uploads/_multiple_asset_upload.html.erb

@@ -1,4 +1,4 @@
-<%= render(MediaAssetGalleryComponent.new) do |gallery| %>
+<%= render(MediaAssetGalleryComponent.new(classes: ["upload-media-asset-gallery"])) do |gallery| %>
   <% upload.upload_media_assets.order(id: :asc).each do |upload_media_asset| %>
     <% gallery.media_asset do %>
       <%= render "upload_media_assets/preview", upload_media_asset: upload_media_asset, size: gallery.size %>