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(markdown): embedded media in comment.content shouldn't be expandable and should be already expanded

Browse Source
This commit is contained in:
plebeius
2025-12-31 15:23:56 +01:00
parent b3c88e46e9
commit fcd8838045
2 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/comment-media/comment-media.tsx
+15 -8
View File
@@ -11,6 +11,7 @@ import Embed, { canEmbed } from '../embed';
interface MediaProps {
commentMediaInfo?: CommentMediaInfo;
deleted?: boolean;
disableToggle?: boolean;
displayHeight?: string;
displayWidth?: string;
isFloatingEmbed?: boolean;
@@ -83,7 +84,7 @@ const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isF
);
};
const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
const Media = ({ commentMediaInfo, disableToggle, isReply, setShowThumbnail }: MediaProps) => {
const { t } = useTranslation();
const { thumbnail, type, url } = commentMediaInfo || {};
const isMobile = useIsMobile();
@@ -98,11 +99,11 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
{type === 'iframe' && url ? (
<Embed url={url} />
) : type === 'gif' ? (
<img src={url} alt='' onClick={() => setShowThumbnail(true)} />
<img src={url} alt='' onClick={disableToggle ? undefined : () => setShowThumbnail(true)} />
) : type === 'video' ? (
<video src={url} controls autoPlay loop muted />
) : type === 'webpage' ? (
<img src={thumbnail} alt='' onClick={() => setShowThumbnail(true)} />
<img src={thumbnail} alt='' onClick={disableToggle ? undefined : () => setShowThumbnail(true)} />
) : null}
{isMobile && type && (
<div className={styles.fileInfo}>
@@ -126,19 +127,21 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
interface ImageProps {
commentMediaInfo: CommentMediaInfo;
disableToggle?: boolean;
displayHeight: string;
displayWidth: string;
initialExpanded?: boolean;
isOutOfFeed: boolean;
parentCid?: string;
spoiler?: boolean;
}
const Image = ({ commentMediaInfo, displayHeight, displayWidth, isOutOfFeed, parentCid, spoiler }: ImageProps) => {
const Image = ({ commentMediaInfo, disableToggle = false, displayHeight, displayWidth, initialExpanded = false, isOutOfFeed, parentCid, spoiler }: ImageProps) => {
const { t } = useTranslation();
const { type, url } = commentMediaInfo || {};
const isReply = parentCid;
const isMobile = useIsMobile();
const [isImageExpanded, setIsImageExpanded] = useState(false);
const [isImageExpanded, setIsImageExpanded] = useState(initialExpanded);
const { fitExpandedImagesToScreen } = useExpandedMediaStore();
const mediaDimensions = getMediaDimensions(commentMediaInfo);
const mediaClass = `${isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp} ${
@@ -171,7 +174,7 @@ const Image = ({ commentMediaInfo, displayHeight, displayWidth, isOutOfFeed, par
{hasError ? (
<img src='assets/filedeleted-res.gif' alt='File deleted' />
) : (
<img src={url} onError={handleError} alt='' onClick={() => setIsImageExpanded(!isImageExpanded)} />
<img src={url} onError={handleError} alt='' onClick={disableToggle ? undefined : () => setIsImageExpanded(!isImageExpanded)} />
)}
</span>
{isImageExpanded && type && (
@@ -193,7 +196,7 @@ const Image = ({ commentMediaInfo, displayHeight, displayWidth, isOutOfFeed, par
{hasError ? (
<img src='assets/filedeleted-res.gif' alt='File deleted' />
) : (
<img src={url} onError={handleError} alt='' onClick={() => setIsImageExpanded(!isImageExpanded)} />
<img src={url} onError={handleError} alt='' onClick={disableToggle ? undefined : () => setIsImageExpanded(!isImageExpanded)} />
)}
</span>
);
@@ -202,6 +205,7 @@ const Image = ({ commentMediaInfo, displayHeight, displayWidth, isOutOfFeed, par
const CommentMedia = ({
commentMediaInfo,
deleted,
disableToggle,
isFloatingEmbed,
linkHeight,
linkWidth,
@@ -253,10 +257,13 @@ const CommentMedia = ({
<span className={styles.content}>
{commentMediaInfo?.type === 'image' ? (
// images just enlarge when clicked, so they don't need two separate components
// when showThumbnail is explicitly false (e.g., from embed button), start expanded
<Image
commentMediaInfo={commentMediaInfo}
disableToggle={disableToggle}
displayHeight={displayHeight}
displayWidth={displayWidth}
initialExpanded={showThumbnail === false}
isOutOfFeed={isOutOfFeed}
parentCid={parentCid}
spoiler={spoiler}
@@ -279,7 +286,7 @@ const CommentMedia = ({
)}
{isMobile && type && <div className={styles.fileInfo}>{`${spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`}</div>}
</span>
{!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={!!parentCid} setShowThumbnail={setShowThumbnail} />}
{!showThumbnail && <Media commentMediaInfo={commentMediaInfo} disableToggle={disableToggle} isReply={!!parentCid} setShowThumbnail={setShowThumbnail} />}
</>
)}
</span>
src/components/markdown/markdown.tsx
+9 -2
View File
@@ -90,14 +90,21 @@ const ContentLinkEmbed = ({ children, href, linkMediaInfo }: ContentLinkEmbedPro
{showMedia && (
<>
<br />
<CommentMedia isReply={false} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={false} />
<CommentMedia commentMediaInfo={linkMediaInfo} disableToggle={true} isReply={false} setShowThumbnail={setShowMedia} showThumbnail={false} />
</>
)}
{getHasThumbnail(linkMediaInfo, href) && (
<FloatingPortal>
{isOpen && !isMobile && (
<div className={styles.floatingEmbed} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
<CommentMedia isReply={false} isFloatingEmbed={true} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={true} />
<CommentMedia
commentMediaInfo={linkMediaInfo}
disableToggle={true}
isFloatingEmbed={true}
isReply={false}
setShowThumbnail={setShowMedia}
showThumbnail={false}
/>
</div>
)}
</FloatingPortal>