diff --git a/packages/pl-fe/src/components/hover-account-wrapper.tsx b/packages/pl-fe/src/components/hover-account-wrapper.tsx index fa3bb48a9..f61294ba1 100644 --- a/packages/pl-fe/src/components/hover-account-wrapper.tsx +++ b/packages/pl-fe/src/components/hover-account-wrapper.tsx @@ -12,7 +12,7 @@ const showAccountHoverCard = debounce((openAccountHoverCard, ref, accountId) => }, 600); interface IHoverAccountWrapper { - accountId: string; + accountId?: string; element?: 'div' | 'span' | 'bdi'; className?: string; children: React.ReactNode; @@ -27,6 +27,8 @@ const HoverAccountWrapper: React.FC = React.memo(({ accoun const ref = useRef(null); const handleMouseEnter = () => { + if (!accountId) return; + if (!isMobile(window.innerWidth)) { dispatch(fetchAccount(accountId)); showAccountHoverCard(openAccountHoverCard, ref, accountId); diff --git a/packages/pl-fe/src/components/preview-card.tsx b/packages/pl-fe/src/components/preview-card.tsx index b8e16d498..365f794b3 100644 --- a/packages/pl-fe/src/components/preview-card.tsx +++ b/packages/pl-fe/src/components/preview-card.tsx @@ -1,6 +1,8 @@ import clsx from 'clsx'; import { type MediaAttachment, type PreviewCard as CardEntity, mediaAttachmentSchema } from 'pl-api'; import React, { useState, useEffect } from 'react'; +import { FormattedMessage } from 'react-intl'; +import { Link } from 'react-router-dom'; import * as v from 'valibot'; import Blurhash from 'pl-fe/components/blurhash'; @@ -8,9 +10,13 @@ import HStack from 'pl-fe/components/ui/hstack'; import Icon from 'pl-fe/components/ui/icon'; import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; +import Emojify from 'pl-fe/features/emoji/emojify'; import { addAutoPlay } from 'pl-fe/utils/media'; import { getTextDirection } from 'pl-fe/utils/rtl'; +import HoverAccountWrapper from './hover-account-wrapper'; +import Avatar from './ui/avatar'; + /** Props for `PreviewCard`. */ interface IPreviewCard { card: CardEntity; @@ -108,7 +114,7 @@ const PreviewCard: React.FC = ({ const interactive = card.type !== 'link'; horizontal = typeof horizontal === 'boolean' ? horizontal : interactive || embedded; - const className = clsx('status-card', { horizontal, compact, interactive }, `status-card--${card.type}`); + const className = clsx('status-card relative z-10 bg-white black:bg-black dark:bg-primary-900', { horizontal, compact, interactive }, `status-card--${card.type}`); const ratio = getRatio(card); const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio); @@ -236,7 +242,7 @@ const PreviewCard: React.FC = ({ ); } - return ( + const link = ( = ({ {description} ); + + if (card.authors.length) { + return ( + + {link} +
+ + ( + + + + {author.account && ( + + )} + + + + + + + )), + }} + /> + +
+
+ ); + } + + return link; }; /** Trim the text, adding ellipses if it's too long. */ diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index 65fd5aac3..2d2b700f3 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -998,6 +998,7 @@ "lightbox.next": "Next", "lightbox.previous": "Previous", "lightbox.view_context": "View context", + "link_preview.more_from_author": "More from {name}", "list.click_to_add": "Click here to add people", "list_adder.header_title": "Add or Remove from Lists", "lists.account.add": "Add to list",