diff --git a/app/components/media_asset_preview_component.rb b/app/components/media_asset_preview_component.rb index 243b76f48..c8bb35f7e 100644 --- a/app/components/media_asset_preview_component.rb +++ b/app/components/media_asset_preview_component.rb @@ -5,25 +5,25 @@ class MediaAssetPreviewComponent < ApplicationComponent DEFAULT_SIZE = 180 - attr_reader :media_asset, :size, :fit, :link_target, :shrink_to_fit, :save_data + attr_reader :media_asset, :size, :link_target, :classes, :save_data delegate :duration_to_hhmmss, :sound_icon, to: :helpers + renders_one :header + renders_one :missing_image renders_one :footer # @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) + def initialize(media_asset:, size: DEFAULT_SIZE, link_target: media_asset, classes: [], save_data: CurrentUser.save_data) super @media_asset = media_asset @size = size.presence&.to_i || DEFAULT_SIZE @link_target = link_target + @classes = classes @save_data = save_data - @shrink_to_fit = shrink_to_fit end def variant diff --git a/app/components/media_asset_preview_component/media_asset_preview_component.html.erb b/app/components/media_asset_preview_component/media_asset_preview_component.html.erb index b13dd9777..daaea96f6 100644 --- a/app/components/media_asset_preview_component/media_asset_preview_component.html.erb +++ b/app/components/media_asset_preview_component/media_asset_preview_component.html.erb @@ -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? %> -
- - <%= duration_to_hhmmss(media_asset.duration) %> - -
- <% 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 %> - - <% 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? %> +
+ <%= missing_image || "No image" %> +
+ <% elsif media_asset.active? %> + <% if media_asset.is_animated? %> +
+ + <%= duration_to_hhmmss(media_asset.duration) %> + +
<% 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" -%> - + + <% 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" -%> + + <% else %> +
+ <% if media_asset.processing? %> + Loading + <% elsif media_asset.failed? %> + Failed + <% else %> + Deleted + <% end %> +
+ <% end %> <% end %> -
- <%= footer %> -
+ <%= footer %> <% end %> diff --git a/app/components/media_asset_preview_component/media_asset_preview_component.scss b/app/components/media_asset_preview_component/media_asset_preview_component.scss index 3288e8bd7..0e57de337 100644 --- a/app/components/media_asset_preview_component/media_asset_preview_component.scss +++ b/app/components/media_asset_preview_component/media_asset_preview_component.scss @@ -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); +} diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index cfc700211..c46846baa 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -163,6 +163,8 @@ html { --preview-icon-color: var(--inverse-text-color); --preview-icon-background: rgba(0, 0, 0, 0.7); + --media-asset-placeholder-background-color: var(--grey-1); + --modqueue-tag-warning-color: var(--red-1); --file-upload-component-background-color: var(--body-background-color); @@ -374,6 +376,8 @@ body[data-current-user-theme="dark"] { --preview-has-parent-color: var(--orange-3); --preview-selected-color: rgba(255, 255, 255, 0.25); + --media-asset-placeholder-background-color: var(--grey-8); + --modqueue-tag-warning-color: var(--red-7); --file-upload-component-background-color: var(--grey-8); diff --git a/app/javascript/src/styles/common/utilities.scss b/app/javascript/src/styles/common/utilities.scss index 2ffaa408d..b2e4c3333 100644 --- a/app/javascript/src/styles/common/utilities.scss +++ b/app/javascript/src/styles/common/utilities.scss @@ -116,10 +116,17 @@ $spacer: 0.25rem; /* 4px */ .pr-4 { padding-right: 4 * $spacer; } .w-auto { width: auto; } +.w-min { width: min-content; } +.w-max { width: max-content; } .w-sm { width: 24rem; } .w-md { width: 28rem; } .w-1\/4 { width: 25%; } .w-full { width: 100%; } +.w-150px { width: 150px; } +.w-180px { width: 180px; } +.w-225px { width: 225px; } +.w-270px { width: 270px; } +.w-360px { width: 360px; } .max-w-full { max-width: 100%; } @@ -130,6 +137,11 @@ $spacer: 0.25rem; /* 4px */ .h-8 { height: 8 * $spacer; } .h-10 { height: 10 * $spacer; } .h-12 { height: 12 * $spacer; } +.h-150px { height: 150px; } +.h-180px { height: 180px; } +.h-225px { height: 225px; } +.h-270px { height: 270px; } +.h-360px { height: 360px; } .max-h-150px { max-height: 150px; } .max-h-180px { max-height: 180px; } diff --git a/app/views/media_assets/_table.html.erb b/app/views/media_assets/_table.html.erb index eb444b80b..f9334821a 100644 --- a/app/views/media_assets/_table.html.erb +++ b/app/views/media_assets/_table.html.erb @@ -1,7 +1,7 @@ <%= table_for @media_assets, class: "striped autofit" do |t| %> <% t.column "File", td: { class: "text-center" } do |media_asset| %> <% if policy(media_asset).can_see_image? %> - <%= render MediaAssetPreviewComponent.new(media_asset: media_asset, save_data: CurrentUser.save_data, shrink_to_fit: false) %> + <%= render MediaAssetPreviewComponent.new(media_asset: media_asset, save_data: CurrentUser.save_data) %> <% end %> <% end %> diff --git a/app/views/uploads/_table.html.erb b/app/views/uploads/_table.html.erb index 033ac407e..186e6a85d 100644 --- a/app/views/uploads/_table.html.erb +++ b/app/views/uploads/_table.html.erb @@ -7,14 +7,14 @@ -<%= table_for @uploads, class: "striped autofit", width: "100%" do |t| %> +<%= table_for @uploads, class: "striped", width: "100%" do |t| %> <% t.column "Upload", td: { class: "text-center" } do |upload| %> <% upload.media_assets.first.tap do |media_asset| %> <% if media_asset.present? %> <% if media_asset.post.present? %> - <%= render MediaAssetPreviewComponent.new(media_asset: media_asset, link_target: media_asset.post, save_data: CurrentUser.save_data, shrink_to_fit: false) %> + <%= render MediaAssetPreviewComponent.new(media_asset: media_asset, link_target: media_asset.post, save_data: CurrentUser.save_data) %> <% else %> - <%= render MediaAssetPreviewComponent.new(media_asset: media_asset, link_target: upload, save_data: CurrentUser.save_data, shrink_to_fit: false) %> + <%= render MediaAssetPreviewComponent.new(media_asset: media_asset, link_target: upload, save_data: CurrentUser.save_data) %> <% end %> <% end %> <% end %>