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

refactor(comment media): use hook instead of prop

Browse Source
This commit is contained in:
plebeius.eth
2024-04-16 13:10:25 +02:00
parent e191e403db
commit 21c180913d
2 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/comment-media/comment-media.tsx
+8 -6
View File
@@ -4,10 +4,10 @@ import { CommentMediaInfo } from '../../lib/utils/media-utils';
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
import Embed from '../embed'; import Embed from '../embed';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import useWindowWidth from '../../hooks/use-window-width';
interface MediaProps { interface MediaProps {
commentMediaInfo?: CommentMediaInfo; commentMediaInfo?: CommentMediaInfo;
isMobile: boolean;
isOutOfFeed?: boolean; // virtuoso wrapper unneeded isOutOfFeed?: boolean; // virtuoso wrapper unneeded
isReply: boolean; isReply: boolean;
linkHeight?: number; linkHeight?: number;
@@ -35,10 +35,11 @@ const ThumbnailSmall = ({ style, children, thumbnailSmallPadding }: ThumbnailPro
</span> </span>
); );
const Thumbnail = ({ commentMediaInfo, isMobile, isOutOfFeed, isReply, linkHeight, linkWidth, setShowThumbnail }: MediaProps) => { const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, setShowThumbnail }: MediaProps) => {
const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {}; const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
let displayWidth, displayHeight; let displayWidth, displayHeight;
const isMobile = useWindowWidth() < 640;
const maxThumbnailSize = isMobile || isReply ? 125 : 250; const maxThumbnailSize = isMobile || isReply ? 125 : 250;
if (linkWidth && linkHeight) { if (linkWidth && linkHeight) {
@@ -90,9 +91,10 @@ const Thumbnail = ({ commentMediaInfo, isMobile, isOutOfFeed, isReply, linkHeigh
); );
}; };
const Media = ({ commentMediaInfo, isMobile, isReply, setShowThumbnail }: MediaProps) => { const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { thumbnail, type, url } = commentMediaInfo || {}; const { thumbnail, type, url } = commentMediaInfo || {};
const isMobile = useWindowWidth() < 640;
const mediaClass = isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp; const mediaClass = isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp;
return ( return (
@@ -127,13 +129,13 @@ const Media = ({ commentMediaInfo, isMobile, isReply, setShowThumbnail }: MediaP
); );
}; };
const CommentMedia = ({ commentMediaInfo, isMobile, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => { const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
const isMobile = useWindowWidth() < 640;
return ( return (
<span className={styles.content}> <span className={styles.content}>
<span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}> <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
<Thumbnail <Thumbnail
commentMediaInfo={commentMediaInfo} commentMediaInfo={commentMediaInfo}
isMobile={isMobile}
isOutOfFeed={isOutOfFeed} isOutOfFeed={isOutOfFeed}
isReply={isReply} isReply={isReply}
linkHeight={linkHeight} linkHeight={linkHeight}
@@ -143,7 +145,7 @@ const CommentMedia = ({ commentMediaInfo, isMobile, isOutOfFeed, isReply, linkHe
/> />
{isMobile && commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>} {isMobile && commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>}
</span> </span>
{!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isMobile={isMobile} isReply={isReply} setShowThumbnail={setShowThumbnail} />} {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={isReply} setShowThumbnail={setShowThumbnail} />}
</span> </span>
); );
}; };
src/components/post/post.tsx
-4
View File
@@ -78,7 +78,6 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
{hasThumbnail && ( {hasThumbnail && (
<CommentMedia <CommentMedia
commentMediaInfo={commentMediaInfo} commentMediaInfo={commentMediaInfo}
isMobile={false}
isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
isReply={false} isReply={false}
linkHeight={linkHeight} linkHeight={linkHeight}
@@ -252,7 +251,6 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
{hasThumbnail && ( {hasThumbnail && (
<CommentMedia <CommentMedia
commentMediaInfo={commentMediaInfo} commentMediaInfo={commentMediaInfo}
isMobile={false}
isReply={true} isReply={true}
linkHeight={linkHeight} linkHeight={linkHeight}
linkWidth={linkWidth} linkWidth={linkWidth}
@@ -347,7 +345,6 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
{hasThumbnail && ( {hasThumbnail && (
<CommentMedia <CommentMedia
commentMediaInfo={commentMediaInfo} commentMediaInfo={commentMediaInfo}
isMobile={true}
isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
isReply={false} isReply={false}
linkHeight={linkHeight} linkHeight={linkHeight}
@@ -430,7 +427,6 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
{hasThumbnail && ( {hasThumbnail && (
<CommentMedia <CommentMedia
commentMediaInfo={commentMediaInfo} commentMediaInfo={commentMediaInfo}
isMobile={true}
isReply={false} isReply={false}
linkHeight={linkHeight} linkHeight={linkHeight}
linkWidth={linkWidth} linkWidth={linkWidth}