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

ai tags: adjust thumbnail layout.

Browse Source
This commit is contained in:
evazion
2022-06-26 20:36:10 -05:00
parent 6f24db92e5
commit c199c7eab7
3 changed files with 47 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/components/media_asset_preview_component.rb
View File

@@ -5,7 +5,7 @@
class MediaAssetPreviewComponent < ApplicationComponent
DEFAULT_SIZE = 180
attr_reader :media_asset, :size, :link_target, :classes, :html, :save_data
attr_reader :media_asset, :size, :link_target, :classes, :inner_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: [], html: {}, save_data: CurrentUser.save_data)
def initialize(media_asset:, size: DEFAULT_SIZE, link_target: media_asset, classes: [], inner_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
@inner_classes = inner_classes
@html = html
@save_data = save_data
end

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

@@ -1,42 +1,44 @@
<%= 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 %>
<%= tag.div class: inner_classes do %>
<%= link_to link_target, class: "inline-block relative", draggable: "false" do -%>
<%= header %>
<% 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>
<% 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 %>
<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? %>
<%= spinner_icon(class: "h-8") %>
<% elsif media_asset.failed? %>
Failed
<% else %>
Deleted
<% end %>
</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", 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? %>
<%= spinner_icon(class: "h-8") %>
<% elsif media_asset.failed? %>
Failed
<% else %>
Deleted
<% end %>
</div>
<% end %>
<% end %>