uploads: refactor "My Uploads" page for multi-file uploads.
* Make thumbnails on the "My Uploads" page show an icon with an image count when an upload contains multiple files. * Make the "My Uploads" page show each upload, not each individual file. If an upload contains multiple files, they're shown grouped together under a single upload. This does mean that failed or duplicate uploads will show up on this page now. This is because this page shows each upload attempt, not each uniquely uploaded file.
This commit is contained in:
@@ -5,13 +5,12 @@ class MediaAssetGalleryComponent < ApplicationComponent
|
||||
|
||||
attr_reader :inline, :size, :options
|
||||
|
||||
renders_many :media_assets, MediaAssetPreviewComponent
|
||||
renders_many :media_assets
|
||||
renders_one :footer
|
||||
|
||||
def initialize(inline: false, size: DEFAULT_SIZE, **options)
|
||||
def initialize(inline: false, size: DEFAULT_SIZE)
|
||||
super
|
||||
@inline = inline
|
||||
@size = size
|
||||
@option = options
|
||||
end
|
||||
end
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.media-asset-animation-icon {
|
||||
.media-asset-animation-icon, .media-asset-image-count-icon {
|
||||
color: var(--preview-icon-color);
|
||||
background: var(--preview-icon-background);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ class MediaAssetsController < ApplicationController
|
||||
|
||||
def index
|
||||
@media_assets = authorize MediaAsset.visible(CurrentUser.user).paginated_search(params, count_pages: false)
|
||||
@media_assets = @media_assets.joins(:media_metadata).includes(:post)
|
||||
@media_assets = @media_assets.includes(:media_metadata, :post)
|
||||
respond_with(@media_assets)
|
||||
end
|
||||
|
||||
|
||||
@@ -30,18 +30,11 @@ class UploadsController < ApplicationController
|
||||
|
||||
def index
|
||||
@mode = params.fetch(:mode, "table")
|
||||
@uploads = authorize Upload.visible(CurrentUser.user).paginated_search(params, count_pages: true)
|
||||
@uploads = @uploads.includes(:uploader, upload_media_assets: { media_asset: :post }) if request.format.html?
|
||||
|
||||
case @mode
|
||||
when "table"
|
||||
@uploads = authorize Upload.visible(CurrentUser.user).paginated_search(params, count_pages: true)
|
||||
@uploads = @uploads.includes(:uploader, media_assets: :post, upload_media_assets: { media_asset: :post }) if request.format.html?
|
||||
respond_with(@uploads, include: { upload_media_assets: { include: :media_asset }})
|
||||
when "gallery"
|
||||
@media_assets = authorize MediaAsset.active.visible(CurrentUser.user).includes(:post, uploads: [:uploader]).where(uploads: { uploader: CurrentUser.user }).paginated_search(params, count_pages: true).reorder("uploads.id DESC")
|
||||
respond_with(@media_assets)
|
||||
else
|
||||
raise "Invalid mode '#{@mode}'"
|
||||
end
|
||||
@uploads = @uploads.includes(:uploader, media_assets: :post, upload_media_assets: { media_asset: :post }) if request.format.html?
|
||||
respond_with(@uploads, include: { upload_media_assets: { include: :media_asset }})
|
||||
end
|
||||
|
||||
def show
|
||||
|
||||
@@ -173,6 +173,10 @@ module IconHelper
|
||||
svg_icon_tag("hashtag-icon", "M416 127.1h-58.23l9.789-58.74c2.906-17.44-8.875-33.92-26.3-36.83c-17.53-2.875-33.92 8.891-36.83 26.3L292.9 127.1H197.8l9.789-58.74c2.906-17.44-8.875-33.92-26.3-36.83c-17.53-2.875-33.92 8.891-36.83 26.3L132.9 127.1H64c-17.67 0-32 14.33-32 32C32 177.7 46.33 191.1 64 191.1h58.23l-21.33 128H32c-17.67 0-32 14.33-32 32c0 17.67 14.33 31.1 32 31.1h58.23l-9.789 58.74c-2.906 17.44 8.875 33.92 26.3 36.83C108.5 479.9 110.3 480 112 480c15.36 0 28.92-11.09 31.53-26.73l11.54-69.27h95.12l-9.789 58.74c-2.906 17.44 8.875 33.92 26.3 36.83C268.5 479.9 270.3 480 272 480c15.36 0 28.92-11.09 31.53-26.73l11.54-69.27H384c17.67 0 32-14.33 32-31.1c0-17.67-14.33-32-32-32h-58.23l21.33-128H416c17.67 0 32-14.32 32-31.1C448 142.3 433.7 127.1 416 127.1zM260.9 319.1H165.8L187.1 191.1h95.12L260.9 319.1z", viewbox: "0 0 448 512", **options)
|
||||
end
|
||||
|
||||
def multiple_images_icon(**options)
|
||||
svg_icon_tag("multiple-images-icon", "M8,3 C8.55228475,3 9,3.44771525 9,4 L9,9 C9,9.55228475 8.55228475,10 8,10 L3,10 C2.44771525,10 2,9.55228475 2,9 L6,9 C7.1045695,9 8,8.1045695 8,7 L8,3 Z M1,1 L6,1 C6.55228475,1 7,1.44771525 7,2 L7,7 C7,7.55228475 6.55228475,8 6,8 L1,8 C0.44771525,8 0,7.55228475 0,7 L0,2 C0,1.44771525 0.44771525,1 1,1 Z", viewbox: "0 0 9 10", **options)
|
||||
end
|
||||
|
||||
def globe_icon(**options)
|
||||
icon_tag("fas fa-globe", **options)
|
||||
end
|
||||
|
||||
@@ -1,14 +1,8 @@
|
||||
<%= render(MediaAssetGalleryComponent.new) do |gallery| %>
|
||||
<% @media_assets.each do |media_asset| %>
|
||||
<% if policy(media_asset).can_see_image? %>
|
||||
<% gallery.media_asset(media_asset: media_asset, size: gallery.size, link_target: media_asset) do |preview| %>
|
||||
<% preview.footer do %>
|
||||
<div class="text-center text-xs h-8">
|
||||
<% if media_asset.post.present? %>
|
||||
<%= link_to "post ##{media_asset.post.id}", media_asset.post %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% gallery.media_asset do %>
|
||||
<%= render "media_assets/preview", media_asset: media_asset, size: gallery.size %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
9
app/views/media_assets/_preview.html.erb
Normal file
9
app/views/media_assets/_preview.html.erb
Normal file
@@ -0,0 +1,9 @@
|
||||
<%= render(MediaAssetPreviewComponent.new(media_asset: media_asset, size: size, link_target: media_asset)) do |preview| %>
|
||||
<% preview.footer do %>
|
||||
<div class="text-center text-xs h-8">
|
||||
<% if media_asset.post.present? %>
|
||||
<%= link_to "post ##{media_asset.post.id}", media_asset.post %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
@@ -8,27 +8,11 @@
|
||||
</div>
|
||||
|
||||
<%= render(MediaAssetGalleryComponent.new) do |gallery| %>
|
||||
<% @media_assets.each do |media_asset| %>
|
||||
<% upload = media_asset.uploads.order(id: :desc).select { |upload| upload.uploader == CurrentUser.user }.first %>
|
||||
|
||||
<% gallery.media_asset(media_asset: media_asset, size: gallery.size, link_target: media_asset.post || upload) do |preview| %>
|
||||
<% preview.footer do %>
|
||||
<div class="text-center text-muted text-xs h-12">
|
||||
<% if media_asset.post.present? %>
|
||||
<div class="leading-none">
|
||||
<%= link_to "post ##{media_asset.post.id}", media_asset.post, class: "leading-none" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if upload.source.present? %>
|
||||
<%= external_link_to upload.source, Addressable::URI.parse(upload.source).domain %>
|
||||
<% else %>
|
||||
<em>No source</em>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% @uploads.each do |upload| %>
|
||||
<% gallery.media_asset do %>
|
||||
<%= render "uploads/preview", upload: upload, size: gallery.size %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<%= numbered_paginator(@media_assets) %>
|
||||
<%= numbered_paginator(@uploads) %>
|
||||
|
||||
30
app/views/uploads/_preview.html.erb
Normal file
30
app/views/uploads/_preview.html.erb
Normal file
@@ -0,0 +1,30 @@
|
||||
<% media_asset = upload.upload_media_assets.sort_by(&:id).first&.media_asset %>
|
||||
|
||||
<%= render(MediaAssetPreviewComponent.new(media_asset: media_asset, size: size, link_target: upload, save_data: CurrentUser.save_data)) do |preview| %>
|
||||
<% if upload.media_asset_count > 1 %>
|
||||
<% preview.header do %>
|
||||
<div class="media-asset-image-count-icon absolute top-0.5 right-0.5 p-1 m-0.5 leading-none rounded text-xs font-arial font-bold">
|
||||
<%= multiple_images_icon %>
|
||||
<span class="align-middle"><%= upload.media_asset_count %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% preview.footer do %>
|
||||
<div class="text-center text-muted text-xs">
|
||||
<div class="leading-none">
|
||||
<% if upload.media_asset_count == 1 && media_asset&.post.present? %>
|
||||
<%= link_to "post ##{media_asset.post.id}", media_asset.post, class: "leading-none" %>
|
||||
<% else %>
|
||||
<%= link_to "upload ##{upload.id}", upload, class: "leading-none" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if upload.source.present? %>
|
||||
<%= external_link_to upload.source, Addressable::URI.parse(upload.source).domain %>
|
||||
<% else %>
|
||||
<em>No source</em>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
@@ -9,28 +9,13 @@
|
||||
|
||||
<%= 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) %>
|
||||
<% else %>
|
||||
<%= render MediaAssetPreviewComponent.new(media_asset: media_asset, link_target: upload, save_data: CurrentUser.save_data) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<%= render "uploads/preview", upload: upload, size: "180" %>
|
||||
<% end %>
|
||||
|
||||
<% t.column "Info", td: { class: "col-expand" } do |upload| %>
|
||||
<div>
|
||||
<% upload.media_assets.first.tap do |media_asset| %>
|
||||
<% if media_asset&.post.present? %>
|
||||
<strong>Post</strong>
|
||||
<span><%= link_to "##{media_asset.post.id}", media_asset.post %></span>
|
||||
<% else %>
|
||||
<strong>Upload</strong>
|
||||
<span><%= link_to "##{upload.id}", upload %></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<strong>Upload</strong>
|
||||
<span><%= link_to "##{upload.id}", upload %></span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user