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: add christmas theme

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-12-24 17:13:12 +01:00
parent 5a498cbcb6
commit eb3a630cc3
15 changed files with 300 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-desktop.tsx
+10 -6
View File
@@ -28,6 +28,7 @@ import Tooltip from '../tooltip';
import { PostProps } from '../../views/post/post';
import { create } from 'zustand';
import _ from 'lodash';
import { shouldShowSnow } from '../../lib/snow';
interface ShowOmittedRepliesState {
showOmittedReplies: Record<string, boolean>;
@@ -213,15 +214,15 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
);
};
const PostMedia = ({ post }: PostProps) => {
const PostMedia = ({ post, hasThumbnail }: PostProps) => {
const { t } = useTranslation();
const { link, spoiler, cid } = post || {};
// Reset state by remounting component when post changes
return <PostMediaContent key={cid} post={post} link={link} spoiler={spoiler} t={t} />;
return <PostMediaContent key={cid} post={post} hasThumbnail={hasThumbnail} spoiler={spoiler} t={t} />;
};
const PostMediaContent = ({ post, link, spoiler, t }: { post: any; link: string; spoiler: boolean; t: any }) => {
const PostMediaContent = ({ post, hasThumbnail, spoiler, t }: { post: any; hasThumbnail: boolean | undefined; spoiler: boolean; t: any }) => {
const { isDescription, isRules } = post || {}; // custom properties, not from api
const commentMediaInfo = useCommentMediaInfo(post);
const { url } = commentMediaInfo || {};
@@ -235,7 +236,6 @@ const PostMediaContent = ({ post, link, spoiler, t }: { post: any; link: string;
}
const embedUrl = url && new URL(url);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true);
const mediaDimensions = getMediaDimensions(commentMediaInfo);
@@ -451,6 +451,9 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
replyCount: 0,
};
const commentMediaInfo = useCommentMediaInfo(post);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
return (
<div className={styles.postDesktop}>
{showReplies ? (
@@ -466,8 +469,9 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
<span className={`${styles.hideButton} ${hidden ? styles.unhideThread : styles.hideThread}`} onClick={hidden ? unhide : hide} />
</span>
)}
<div data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid}>
{link && !isHidden && !(deleted || removed) && isValidURL(link) && <PostMedia post={post} />}
<div data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid} className={shouldShowSnow() && hasThumbnail ? styles.xmasHatWrapper : ''}>
{shouldShowSnow() && hasThumbnail && <img src={`${process.env.PUBLIC_URL}/assets/xmashat.gif`} className={styles.xmasHat} />}
{link && !isHidden && !(deleted || removed) && isValidURL(link) && <PostMedia post={post} hasThumbnail={hasThumbnail} />}
<PostInfo isHidden={hidden} openReplyModal={openReplyModal} post={post} postReplyCount={replyCount} roles={roles} />
{!isHidden && !content && !(deleted || removed) && <div className={styles.spacer} />}
{!isHidden && <PostMessage post={post} />}