diff --git a/src/components/post/thumbnail/thumbnail.tsx b/src/components/post/thumbnail/thumbnail.tsx index 89c1e6ae..53c93c14 100644 --- a/src/components/post/thumbnail/thumbnail.tsx +++ b/src/components/post/thumbnail/thumbnail.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import { FC, useMemo } from 'react'; import styles from './thumbnail.module.css'; import { Link } from 'react-router-dom'; import { CommentMediaInfo } from '../../../lib/utils'; @@ -16,33 +16,40 @@ interface ThumbnailProps { } const Thumbnail: FC = ({ cid, commentMediaInfo, expanded = false, isReply = false, link, linkHeight, linkWidth, subplebbitAddress, toggleExpanded }) => { + const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail; - let displayWidth, displayHeight, hasLinkDimensions; + + const { displayWidth, displayHeight, hasLinkDimensions } = useMemo(() => { + let dw, dh, hld; + if (linkWidth && linkHeight) { + let scale = Math.min(1, 70 / Math.max(linkWidth, linkHeight)); + dw = `${linkWidth * scale}px`; + dh = `${linkHeight * scale}px`; + hld = true; + } else { + dw = '70px'; + dh = '70px'; + hld = false; + } + return { displayWidth: dw, displayHeight: dh, hasLinkDimensions: hld }; + }, [linkWidth, linkHeight]); + + const mediaComponent = useMemo(() => { + let component = null; + if (commentMediaInfo?.type === 'image') { + component = ; + } else if (commentMediaInfo?.type === 'video') { + component = commentMediaInfo.thumbnail ? :