diff --git a/src/components/catalog-row/catalog-row.module.css b/src/components/catalog-row/catalog-row.module.css index 3ba350b4..cf14769c 100644 --- a/src/components/catalog-row/catalog-row.module.css +++ b/src/components/catalog-row/catalog-row.module.css @@ -27,6 +27,19 @@ display: inline-block; } +.spoilerThumbnail { + width: 150px; + height: 150px; + display: inline-block; + margin: 3px 20px 5px 20px; + background-color: black; + color: white !important; + display: flex; + cursor: pointer; + justify-content: center; + align-items: center; +} + .mediaPaddingWrapper { padding-bottom: 5px; display: inline-flex; diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx index 890b40f3..a27e565f 100644 --- a/src/components/catalog-row/catalog-row.tsx +++ b/src/components/catalog-row/catalog-row.tsx @@ -13,6 +13,7 @@ import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; import useHide from '../../hooks/use-hide'; import PostMenuDesktop from '../post-desktop/post-menu-desktop'; import styles from './catalog-row.module.css'; +import Markdown from '../markdown'; import _ from 'lodash'; interface CatalogPostMediaProps { @@ -80,10 +81,35 @@ export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, lin ); }; +const SpoilerImage = ({ postLink }: { postLink: string }) => { + const { t } = useTranslation(); + return ( + + {t('spoiler')} + + ); +}; + const CatalogPost = ({ post }: { post: Comment }) => { const { t } = useTranslation(); - const { author, cid, content, isDescription, isRules, lastChildCid, link, linkHeight, linkWidth, locked, pinned, replyCount, subplebbitAddress, timestamp, title } = - post || {}; + const { + author, + cid, + content, + isDescription, + isRules, + lastChildCid, + link, + linkHeight, + linkWidth, + locked, + pinned, + replyCount, + spoiler, + subplebbitAddress, + timestamp, + title, + } = post || {}; const commentMediaInfo = getCommentMediaInfo(post); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const { hidden } = useHide({ cid }); @@ -163,7 +189,7 @@ const CatalogPost = ({ post }: { post: Comment }) => { ) : ( <> {title && `${title}${content ? ': ' : ''}`} - {content} + )} @@ -178,23 +204,27 @@ const CatalogPost = ({ post }: { post: Comment }) => { ) : hasThumbnail ? ( - -
(timeoutRef.current = setTimeout(() => setShowPortal(true), 250))} - onMouseLeave={() => { - setShowPortal(false); - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - timeoutRef.current = null; - } - }} - > - {threadIcons} - -
- + spoiler ? ( + + ) : ( + +
(timeoutRef.current = setTimeout(() => setShowPortal(true), 250))} + onMouseLeave={() => { + setShowPortal(false); + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + timeoutRef.current = null; + } + }} + > + {threadIcons} + +
+ + ) ) : ( threadIcons )}