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

fix(post): image could flicker when clicking it to expand it

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-11-23 18:37:13 +01:00
parent f1737df43e
commit 077b3bc9ef
1 changed files with 83 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/comment-media/comment-media.tsx
+83 -32
View File
@@ -11,44 +11,27 @@ import Embed, { canEmbed } from '../embed';
interface MediaProps {
commentMediaInfo?: CommentMediaInfo;
post?: Comment;
deleted?: boolean;
displayHeight?: string;
displayWidth?: string;
isFloatingEmbed?: boolean;
isOutOfFeed?: boolean;
isReply?: boolean;
linkHeight?: number;
linkWidth?: number;
post?: Comment;
removed?: boolean;
spoiler?: boolean;
showThumbnail?: boolean;
setShowThumbnail: (showThumbnail: boolean) => void;
}
const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }: MediaProps) => {
const { deleted, linkHeight, linkWidth, parentCid, removed, spoiler } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const isOutOfFeed = isDescription || isRules || isFloatingEmbed; // virtuoso wrapper unneeded
const isReply = parentCid;
const isDeleted = deleted || removed;
const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isFloatingEmbed, isOutOfFeed, isReply, removed, spoiler, setShowThumbnail }: MediaProps) => {
const isMobile = useIsMobile();
const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
const [hasError, setHasError] = useState(false);
const handleError = () => setHasError(true);
let displayWidth, displayHeight;
const isMobile = useIsMobile();
const maxThumbnailSize = isMobile || isReply ? 125 : 250;
if (linkWidth && linkHeight) {
let scale = Math.min(1, maxThumbnailSize / Math.max(linkWidth, linkHeight));
displayWidth = `${linkWidth * scale}px`;
displayHeight = `${linkHeight * scale}px`;
} else {
displayWidth = `${maxThumbnailSize}px`;
displayHeight = `${maxThumbnailSize}px`;
}
if (type === 'audio') {
displayWidth = '100%';
displayHeight = '100%';
}
let thumbnailComponent: React.ReactNode = null;
const iframeThumbnail = patternThumbnailUrl || thumbnail;
const gifFrameUrl = useFetchGifFirstFrame(type === 'gif' ? url : undefined);
@@ -78,7 +61,7 @@ const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }
const linkWithoutThumbnail = url && new URL(url);
return hasError || isDeleted ? (
return hasError || deleted || removed ? (
<img className={styles.fileDeleted} src='assets/filedeleted-res.gif' alt='File deleted' />
) : spoiler ? (
<img className={styles.spoiler} src='assets/spoiler.png' alt='' onClick={() => setShowThumbnail(false)} />
@@ -149,6 +132,8 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
};
const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail, setShowThumbnail }: MediaProps) => {
const { deleted, linkHeight, linkWidth, parentCid, removed, spoiler } = post || {};
const isReply = parentCid;
const { t } = useTranslation();
const isMobile = useIsMobile();
const { url } = commentMediaInfo || {};
@@ -161,13 +146,79 @@ const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail,
type = 'static gif';
}
let displayWidth, displayHeight;
const maxThumbnailSize = isMobile || isReply ? 125 : 250;
if (linkWidth && linkHeight) {
let scale = Math.min(1, maxThumbnailSize / Math.max(linkWidth, linkHeight));
displayWidth = `${linkWidth * scale}px`;
displayHeight = `${linkHeight * scale}px`;
} else {
displayWidth = `${maxThumbnailSize}px`;
displayHeight = `${maxThumbnailSize}px`;
}
if (type === 'audio') {
displayWidth = '100%';
displayHeight = '100%';
}
const { isDescription, isRules } = post || {}; // custom properties, not from api
const isOutOfFeed = isDescription || isRules || isFloatingEmbed; // virtuoso wrapper unneeded
const [isImageExpanded, setIsImageExpanded] = useState(false);
const { fitExpandedImagesToScreen } = useExpandedMediaStore();
const mediaDimensions = getMediaDimensions(commentMediaInfo);
const mediaClass = `${isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp} ${
fitExpandedImagesToScreen ? styles.fitToScreen : ''
}`;
const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
return (
<span className={styles.content}>
<span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
{url && <Thumbnail commentMediaInfo={commentMediaInfo} isFloatingEmbed={isFloatingEmbed} post={post} setShowThumbnail={setShowThumbnail} />}
{isMobile && type && <div className={styles.fileInfo}>{`${post?.spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`}</div>}
</span>
{!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={post?.parentCid} setShowThumbnail={setShowThumbnail} />}
{commentMediaInfo?.type === 'image' ? (
isMobile ? (
<span className={styles.thumbnail}>
<span className={isImageExpanded ? mediaClass : `${styles.thumbnailSmall} ${thumbnailSmallPadding}`} style={isImageExpanded ? {} : thumbnailDimensions}>
<img src={url} alt='' onClick={() => setIsImageExpanded(!isImageExpanded)} />
</span>
{isImageExpanded && type && (
<div className={styles.fileInfo}>
<a href={url} target='_blank' rel='noopener noreferrer'>
{url && url.length > 30 ? url.slice(0, 30) + '...' : url}
</a>{' '}
({getDisplayMediaInfoType(type, t)}
{mediaDimensions && `, ${mediaDimensions}`})
</div>
)}
{type && !isImageExpanded && <div className={styles.fileInfo}>{`${post?.spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`}</div>}
</span>
) : (
<span className={isImageExpanded ? mediaClass : `${styles.thumbnailBig} ${styles.thumbnail}`} style={isImageExpanded ? {} : thumbnailDimensions}>
<img src={url} alt='' onClick={() => setIsImageExpanded(!isImageExpanded)} />
</span>
)
) : (
<>
<span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
{url && (
<Thumbnail
commentMediaInfo={commentMediaInfo}
displayHeight={displayHeight}
displayWidth={displayWidth}
isFloatingEmbed={isFloatingEmbed}
isOutOfFeed={isOutOfFeed}
deleted={deleted}
removed={removed}
spoiler={spoiler}
setShowThumbnail={setShowThumbnail}
/>
)}
{isMobile && type && <div className={styles.fileInfo}>{`${post?.spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`}</div>}
</span>
{!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={post?.parentCid} setShowThumbnail={setShowThumbnail} />}
</>
)}
</span>
);
};