diff --git a/packages/pl-fe/src/components/alt-indicator.tsx b/packages/pl-fe/src/components/alt-indicator.tsx index ad1c8642d..2c7494898 100644 --- a/packages/pl-fe/src/components/alt-indicator.tsx +++ b/packages/pl-fe/src/components/alt-indicator.tsx @@ -8,14 +8,15 @@ interface IAltIndicator extends Pick, 'tit warning?: boolean; } -const AltIndicator: React.FC = ({ className, warning, ...props }) => ( +const AltIndicator: React.FC = React.forwardRef(({ className, warning, ...props }, ref) => ( {warning && } -); +)); export default AltIndicator; diff --git a/packages/pl-fe/src/components/media-gallery.tsx b/packages/pl-fe/src/components/media-gallery.tsx index f9c9136dd..4347adbf5 100644 --- a/packages/pl-fe/src/components/media-gallery.tsx +++ b/packages/pl-fe/src/components/media-gallery.tsx @@ -1,9 +1,14 @@ import clsx from 'clsx'; import React, { useState, useRef, useLayoutEffect, CSSProperties } from 'react'; +import { FormattedMessage } from 'react-intl'; +import AltIndicator from 'pl-fe/components/alt-indicator'; import Blurhash from 'pl-fe/components/blurhash'; import Icon from 'pl-fe/components/icon'; import StillImage from 'pl-fe/components/still-image'; +import Popover from 'pl-fe/components/ui/popover'; +import Stack from 'pl-fe/components/ui/stack'; +import Text from 'pl-fe/components/ui/text'; import { MIMETYPE_ICONS } from 'pl-fe/components/upload'; import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config'; import { useSettings } from 'pl-fe/hooks/use-settings'; @@ -12,6 +17,7 @@ import { truncateFilename } from 'pl-fe/utils/media'; import { isIOS } from '../is-mobile'; import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media-aspect-ratio'; + import type { MediaAttachment } from 'pl-api'; const ATTACHMENT_LIMIT = 4; @@ -167,20 +173,40 @@ const Item: React.FC = ({ const letterboxed = total === 1 && shouldLetterbox(attachment); thumbnail = ( - - - + <> + + + + {attachment.description && ( + + + + + + {attachment.description} + + + } + > + + + )} + ); } else if (attachment.type === 'gifv') { const conditionalAttributes: React.VideoHTMLAttributes = {}; diff --git a/packages/pl-fe/src/components/ui/popover.tsx b/packages/pl-fe/src/components/ui/popover.tsx index ffbb895bf..fef279e42 100644 --- a/packages/pl-fe/src/components/ui/popover.tsx +++ b/packages/pl-fe/src/components/ui/popover.tsx @@ -108,7 +108,7 @@ const Popover: React.FC = ({ children, content, referenceElementClassN className={ clsx( 'overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700', - { 'p-6': !isFlush }, + { 'p-4': !isFlush }, ) } {...getFloatingProps()}