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

media assets: add media asset preview component.

Browse Source 
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.
This commit is contained in:
evazion
2022-01-30 14:17:43 -06:00
parent 43c4158d36
commit 5d2996d0c2
8 changed files with 130 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/components/media_asset_preview_component/media_asset_preview_component.html.erb Normal file
View File

@@ -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 %>

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

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