matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

pl-fe: Minor changes to gallery display

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-09-30 18:12:18 +02:00
parent 961044a4c6
commit 9bc47f3145
6 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/pl-fe/src/features/account-gallery/components/media-item.tsx
View File

@ -12,9 +12,10 @@ import type { AccountGalleryAttachment } from 'pl-fe/selectors';
interface IMediaItem {
attachment: AccountGalleryAttachment;
onOpenMedia: (attachment: AccountGalleryAttachment) => void;
isLast?: boolean;
}
const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia, isLast }) => {
const { autoPlayGif, displayMedia } = useSettings();
const [visible, setVisible] = useState<boolean>(displayMedia !== 'hide_all' && !attachment.status?.sensitive || displayMedia === 'show_all');
@ -66,7 +67,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
src={attachment.preview_url}
alt={attachment.description}
style={{ objectPosition: `${x}% ${y}%` }}
className='size-full overflow-hidden rounded-lg'
className={clsx('size-full overflow-hidden', { 'rounded-br-md': isLast })}
/>
);
} else if (['gifv', 'video'].indexOf(attachment.type) !== -1) {
@ -80,7 +81,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
thumbnail = (
<div className={clsx('media-gallery__gifv', { autoplay: autoPlayGif })}>
<video
className='media-gallery__item-gifv-thumbnail'
className={clsx('media-gallery__item-gifv-thumbnail overflow-hidden', { 'rounded-br-md': isLast })}
aria-label={attachment.description}
title={attachment.description}
role='application'
@ -100,7 +101,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
const fileExtensionLastIndex = remoteURL.lastIndexOf('.');
const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase();
thumbnail = (
<div className='media-gallery__item-thumbnail'>
<div className={clsx('media-gallery__item-thumbnail', { 'rounded-br-md': isLast })}>
<span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/outline/volume.svg')} /></span>
<span className='media-gallery__file-extension__label'>{fileExtension}</span>
</div>
@ -122,6 +123,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
hash={attachment.blurhash}
className={clsx('media-gallery__preview', {
'hidden': visible,
'rounded-br-md': isLast,
})}
/>
{visible && thumbnail}

7
packages/pl-fe/src/features/account-gallery/index.tsx
View File

@ -1,5 +1,5 @@
import { List as ImmutableList } from 'immutable';
import React, { useEffect, useRef } from 'react';
import React, { useEffect } from 'react';
import { FormattedMessage } from 'react-intl';
import { useParams } from 'react-router-dom';
@ -29,8 +29,6 @@ const AccountGallery = () => {
const isLoading = useAppSelector((state) => state.timelines.get(`account:${account?.id}:with_replies:media`)?.isLoading);
const hasMore = useAppSelector((state) => state.timelines.get(`account:${account?.id}:with_replies:media`)?.hasMore);
const node = useRef<HTMLDivElement>(null);
const handleScrollToBottom = () => {
if (hasMore) {
handleLoadMore();
@ -97,12 +95,13 @@ const AccountGallery = () => {
return (
<Column label={`@${account.acct}`} transparent withHeader={false}>
<div role='feed' className='grid grid-cols-2 gap-2 sm:grid-cols-3' ref={node}>
<div role='feed' className='grid grid-cols-2 gap-1 overflow-hidden rounded-md sm:grid-cols-3'>
{attachments.map((attachment, index) => (
<MediaItem
key={`${attachment.status.id}+${attachment.id}`}
attachment={attachment}
onOpenMedia={handleOpenMedia}
isLast={index === attachments.size - 1}
/>
))}

5
packages/pl-fe/src/features/group/group-gallery.tsx
View File

@ -67,12 +67,13 @@ const GroupGallery: React.FC<IGroupGallery> = (props) => {
return (
<Column label={group.display_name} transparent withHeader={false}>
<div role='feed' className='mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3'>
{attachments.map((attachment) => (
<div role='feed' className='mt-4 grid grid-cols-2 gap-1 overflow-hidden rounded-md sm:grid-cols-3'>
{attachments.map((attachment, index) => (
<MediaItem
key={`${attachment.status.id}+${attachment.id}`}
attachment={attachment}
onOpenMedia={handleOpenMedia}
isLast={index === attachments.length - 1}
/>
))}

5
packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx
View File

@ -54,12 +54,13 @@ const GroupMediaPanel: React.FC<IGroupMediaPanel> = ({ group }) => {
if (!nineAttachments.isEmpty()) {
return (
<div className='grid grid-cols-3 gap-1'>
{nineAttachments.map((attachment, _index) => (
<div className='grid grid-cols-3 gap-1 overflow-hidden rounded-md'>
{nineAttachments.map((attachment, index) => (
<MediaItem
key={`${attachment.status.id}+${attachment.id}`}
attachment={attachment}
onOpenMedia={handleOpenMedia}
isLast={index === nineAttachments.size - 1}
/>
))}
</div>

5
packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx
View File

@ -52,12 +52,13 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
if (!nineAttachments.isEmpty()) {
return (
<div className='grid grid-cols-3 gap-1'>
{nineAttachments.map((attachment, _index) => (
<div className='grid grid-cols-3 gap-1 overflow-hidden rounded-md'>
{nineAttachments.map((attachment, index) => (
<MediaItem
key={`${attachment.status.id}+${attachment.id}`}
attachment={attachment}
onOpenMedia={handleOpenMedia}
isLast={index === nineAttachments.size - 1}
/>
))}
</div>

4
packages/pl-fe/src/styles/components/media-gallery.scss
View File

@ -27,7 +27,7 @@
}
&__preview {
@apply bg-gray-200 dark:bg-gray-900 rounded-lg w-full h-full object-cover absolute top-0 left-0 z-0;
@apply bg-gray-200 dark:bg-gray-900 w-full h-full object-cover absolute top-0 left-0 z-0;
}
&__gifv {
@ -35,7 +35,7 @@
}
&__item-gifv-thumbnail {
@apply rounded-md cursor-zoom-in h-full object-cover relative w-full z-[1] transform-none top-0;
@apply cursor-zoom-in h-full object-cover relative w-full z-[1] transform-none top-0;
}
&__gifv__label,