jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

media assets: show placeholder thumbnail when image is missing.

Browse Source 
Make media assets show a placeholder thumbnail when the image is
missing. This can happen if the upload is still processing, or if the
media asset's image was expunged, or if the asset failed during upload
(usually because of some temporary network failure when trying to
distribute thumbnails to the backend image servers).

Fixes a problem where new images on the My Uploads or All Uploads pages
could have broken thumbnails if they were still in the uploading phase.
This commit is contained in:
evazion
2022-02-13 12:27:25 -06:00
parent eb032d54c1
commit 879363b585
7 changed files with 67 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
app/components/media_asset_preview_component/media_asset_preview_component.html.erb
View File

@@ -1,28 +1,44 @@
<%= tag.article class: "media-asset-preview media-asset-preview-#{size}" do -%>
<%= link_to link_target, class: "inline-block relative flex justify-center", 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 %>
<%= tag.article class: ["media-asset-preview media-asset-preview-#{size}", *classes] do -%>
<%= link_to link_target, class: "inline-block relative", draggable: "false" do -%>
<%= header %>
<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 %>
<% if media_asset.nil? %>
<div class="media-asset-placeholder rounded border border-solid flex items-center justify-center w-<%= size %>px h-<%= size %>px">
<%= missing_image || "No image" %>
</div>
<% elsif media_asset.active? %>
<% 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 %>
<%= 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>
<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", crossorigin: "anonymous", draggable: "false" -%>
</picture>
<% else %>
<div class="media-asset-placeholder rounded border border-solid flex items-center justify-center w-<%= size %>px h-<%= size %>px">
<% if media_asset.processing? %>
Loading
<% elsif media_asset.failed? %>
Failed
<% else %>
Deleted
<% end %>
</div>
<% end %>
<% end %>
<div>
<%= footer %>
</div>
<%= footer %>
<% end %>

4
app/components/media_asset_preview_component/media_asset_preview_component.scss
View File

@@ -2,3 +2,7 @@
color: var(--preview-icon-color);
background: var(--preview-icon-background);
}
.media-asset-placeholder {
background-color: var(--media-asset-placeholder-background-color);
}