External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(catalog post): add spoiler styling and text, add markdown to content

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-15 13:04:25 +02:00
parent cadddcb4c5
commit 914a7dee18
2 changed files with 63 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/catalog-row/catalog-row.module.css
+13
View File
@@ -27,6 +27,19 @@
display: inline-block; 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 { .mediaPaddingWrapper {
padding-bottom: 5px; padding-bottom: 5px;
display: inline-flex; display: inline-flex;
src/components/catalog-row/catalog-row.tsx
+50 -20
View File
@@ -13,6 +13,7 @@ import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
import useHide from '../../hooks/use-hide'; import useHide from '../../hooks/use-hide';
import PostMenuDesktop from '../post-desktop/post-menu-desktop'; import PostMenuDesktop from '../post-desktop/post-menu-desktop';
import styles from './catalog-row.module.css'; import styles from './catalog-row.module.css';
import Markdown from '../markdown';
import _ from 'lodash'; import _ from 'lodash';
interface CatalogPostMediaProps { interface CatalogPostMediaProps {
@@ -80,10 +81,35 @@ export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, lin
); );
}; };
const SpoilerImage = ({ postLink }: { postLink: string }) => {
const { t } = useTranslation();
return (
<Link to={postLink} className={styles.spoilerThumbnail}>
<span className={styles.spoilerText}>{t('spoiler')}</span>
</Link>
);
};
const CatalogPost = ({ post }: { post: Comment }) => { const CatalogPost = ({ post }: { post: Comment }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { author, cid, content, isDescription, isRules, lastChildCid, link, linkHeight, linkWidth, locked, pinned, replyCount, subplebbitAddress, timestamp, title } = const {
post || {}; author,
cid,
content,
isDescription,
isRules,
lastChildCid,
link,
linkHeight,
linkWidth,
locked,
pinned,
replyCount,
spoiler,
subplebbitAddress,
timestamp,
title,
} = post || {};
const commentMediaInfo = getCommentMediaInfo(post); const commentMediaInfo = getCommentMediaInfo(post);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const { hidden } = useHide({ cid }); const { hidden } = useHide({ cid });
@@ -163,7 +189,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
) : ( ) : (
<> <>
<b>{title && `${title}${content ? ': ' : ''}`}</b> <b>{title && `${title}${content ? ': ' : ''}`}</b>
{content} <Markdown content={content} spoiler={spoiler} />
</> </>
)} )}
</div> </div>
@@ -178,23 +204,27 @@ const CatalogPost = ({ post }: { post: Comment }) => {
<span className={styles.hiddenThumbnail} /> <span className={styles.hiddenThumbnail} />
</Link> </Link>
) : hasThumbnail ? ( ) : hasThumbnail ? (
<Link to={postLink}> spoiler ? (
<div <SpoilerImage postLink={postLink} />
className={`${styles.mediaPaddingWrapper} ${hidden && styles.hidden}`} ) : (
ref={refs.setReference} <Link to={postLink}>
onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))} <div
onMouseLeave={() => { className={`${styles.mediaPaddingWrapper} ${hidden && styles.hidden}`}
setShowPortal(false); ref={refs.setReference}
if (timeoutRef.current) { onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))}
clearTimeout(timeoutRef.current); onMouseLeave={() => {
timeoutRef.current = null; setShowPortal(false);
} if (timeoutRef.current) {
}} clearTimeout(timeoutRef.current);
> timeoutRef.current = null;
{threadIcons} }
<CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} /> }}
</div> >
</Link> {threadIcons}
<CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />
</div>
</Link>
)
) : ( ) : (
threadIcons threadIcons
)} )}