diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx index b692fea962..91b5f7a2a9 100644 --- a/app/javascript/flavours/glitch/components/status.jsx +++ b/app/javascript/flavours/glitch/components/status.jsx @@ -30,6 +30,7 @@ import StatusActionBar from './status_action_bar'; import StatusContent from './status_content'; import StatusIcons from './status_icons'; import StatusPrepend from './status_prepend'; +import { CollectionPreviewCard } from '../features/collections/components/collection_preview_card'; const domParser = new DOMParser(); @@ -659,6 +660,13 @@ class Status extends ImmutablePureComponent { ); } mediaIcons.push('link'); + } else if (status.get('tagged_collections').size && settings.get('inline_preview_cards') && !this.props.muted) { + const firstLinkedCollection = status.get('tagged_collections').first(); + if (firstLinkedCollection) { + media = ( + + ); + } } if (status.get('poll')) { diff --git a/app/javascript/flavours/glitch/features/collections/components/collection_preview_card.tsx b/app/javascript/flavours/glitch/features/collections/components/collection_preview_card.tsx index 47899cc510..d1d10a578a 100644 --- a/app/javascript/flavours/glitch/features/collections/components/collection_preview_card.tsx +++ b/app/javascript/flavours/glitch/features/collections/components/collection_preview_card.tsx @@ -1,3 +1,5 @@ +import classNames from 'classnames'; + import type { CollectionLockupProps } from 'flavours/glitch/features/collections/components/collection_lockup'; import { CollectionLockup } from 'flavours/glitch/features/collections/components/collection_lockup'; @@ -13,7 +15,7 @@ export const CollectionPreviewCard: React.FC = ({ ...otherProps }) => { return ( -
+
); diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx index 3d9a11154b..7830dc850f 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx @@ -316,6 +316,13 @@ export const DetailedStatus: React.FC<{ } mediaIcons.push('link'); + } else if (status.get('tagged_collections').size) { + const firstLinkedCollection = status.get('tagged_collections').first(); + if (firstLinkedCollection) { + media = ( + + ); + } } if (status.get('poll')) { diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss index 453a6c662d..2cd931f151 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/components.scss +++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss @@ -1558,7 +1558,8 @@ body > [data-popper-placement] { .media-gallery, .video-player, .audio-player, - .attachment-list { + .attachment-list, + .collection-preview { margin-top: 8px; // glitch: reduced margins } @@ -1576,6 +1577,7 @@ body > [data-popper-placement] { & > .picture-in-picture-placeholder, & > .more-from-author, & > .status-card, + & > .collection-preview, & > .hashtag-bar, & > .content-warning, & > .filter-warning, @@ -1853,7 +1855,8 @@ body > [data-popper-placement] { .media-gallery, .video-player, - .audio-player { + .audio-player, + .collection-preview { margin-top: 8px; // glitch: reduced margins }