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

media assets: redesign show page.

Browse Source 
Redesign the media assets show page to:

* Include sidebar with AI tags and image metadata.
* Include next and previous image buttons.
* Make the image use 100% of the available screen space and to scroll with the window.
This commit is contained in:
evazion
2022-11-27 21:19:05 -06:00
parent 8a2f59172b
commit a5d4af332d
8 changed files with 258 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/components/media_asset_component.rb
View File

@@ -2,12 +2,19 @@
# A component for showing a full-sized image or video for a media asset.
class MediaAssetComponent < ApplicationComponent
attr_reader :media_asset
attr_reader :media_asset, :current_user, :outer_classes, :inner_classes, :dynamic_height
delegate :image_width, :image_height, :variant, :is_image?, :is_video?, :is_ugoira?, :is_flash?, to: :media_asset
def initialize(media_asset:)
renders_one :header
renders_one :footer
def initialize(media_asset:, current_user:, outer_classes: "", inner_classes: "", dynamic_height: false)
super
@media_asset = media_asset
@current_user = current_user
@outer_classes = outer_classes
@inner_classes = inner_classes
@dynamic_height = dynamic_height
end
end

32
app/components/media_asset_component/media_asset_component.html.erb
View File

@@ -1,15 +1,23 @@
<div class="media-asset-component relative fit-screen">
<div class="media-asset-zoom-level hidden absolute top-0.5 left-0.5 p-1 m-0.5 leading-none rounded text-xs font-arial font-bold pointer-events-none">
100%
<div class="media-asset-container media-asset-container-fit-height flex flex-col <%= outer_classes %>" data-dynamic-height="<%= dynamic_height %>" style="--header-visible-height: 0px">
<%= header %>
<div class="media-asset-component relative max-h-inherit overflow-hidden <%= inner_classes %>">
<div class="media-asset-zoom-level hidden absolute top-0.5 left-0.5 p-1 m-0.5 leading-none rounded text-xs font-arial font-bold pointer-events-none transition-opacity">
100%
</div>
<% if !policy(media_asset).can_see_image? %>
<p>Image unavailable.</p>
<% elsif is_image? %>
<%= tag.img src: variant(:original).file_url, width: image_width, height: image_height, draggable: "false", class: "media-asset-image max-h-inherit max-w-full h-full w-auto select-none" -%>
<% elsif is_video? %>
<%= tag.video src: variant(:original).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls" %>
<% elsif is_ugoira? %>
<%= tag.video src: variant(:sample).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls" %>
<% elsif is_flash? %>
<%= tag.div class: "ruffle-container", "data-swf": variant(:original).file_url %>
<% end %>
</div>
<% if is_image? %>
<%= tag.img src: variant(:original).file_url, width: image_width, height: image_height, draggable: "false", class: "media-asset-image select-none" -%>
<% elsif is_video? %>
<%= tag.video src: variant(:original).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls" %>
<% elsif is_ugoira? %>
<%= tag.video src: variant(:sample).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls" %>
<% elsif is_flash? %>
<%= tag.div class: "ruffle-container", "data-swf": variant(:original).file_url %>
<% end %>
<%= footer %>
</div>

40
app/components/media_asset_component/media_asset_component.scss
View File

@@ -1,11 +1,41 @@
.media-asset-component.fit-screen img, .media-asset-component.fit-screen video {
max-width: 100%;
max-height: 90vh;
width: auto;
height: auto;
.media-asset-component:not(:hover) .media-asset-zoom-level {
opacity: 0;
}
.media-asset-zoom-level {
color: var(--preview-icon-color);
background: var(--preview-icon-background);
}
.media-asset-container {
&:not(.media-asset-container-fit-height) .paginator {
position: sticky;
}
&:hover {
.paginator-prev, .paginator-next {
opacity: 0.8;
}
}
.paginator-prev, .paginator-next {
opacity: 0;
width: 48px;
height: 96px;
top: calc((100vh - var(--header-visible-height) - 96px) / 2);
transition: opacity 0.125s, background-color 0.125s;
color: var(--asset-paginator-link-color);
background-color: var(--asset-paginator-background-color);
&:hover {
color: var(--asset-paginator-link-hover-color);
background-color: var(--asset-paginator-background-hover-color);
}
}
&.media-asset-container-fit-height {
max-height: calc(100vh - var(--header-visible-height));
justify-content: center;
}
}