diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 6ec426a2..239c225a 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -3,7 +3,7 @@ import { Link, useLocation, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { Role, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; -import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils'; +import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; import { getFormattedDate } from '../../lib/utils/time-utils'; import { isPostPageView } from '../../lib/utils/view-utils'; import useCountLinksInReplies from '../../hooks/use-count-links-in-replies'; @@ -33,7 +33,7 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => { const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title; const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content; - const commentMediaInfo = getCommentMediaInfoMemoized(post); + const commentMediaInfo = getCommentMediaInfo(post); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const [showThumbnail, setShowThumbnail] = useState(true); @@ -166,7 +166,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => { const { address, displayName, shortAddress } = author || {}; const authorRole = roles?.[address]?.role; - const commentMediaInfo = getCommentMediaInfoMemoized(reply); + const commentMediaInfo = getCommentMediaInfo(reply); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const [showThumbnail, setShowThumbnail] = useState(true); @@ -267,7 +267,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title; const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) : content; - const commentMediaInfo = getCommentMediaInfoMemoized(post); + const commentMediaInfo = getCommentMediaInfo(post); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const [showThumbnail, setShowThumbnail] = useState(true); @@ -361,7 +361,7 @@ const ReplyMobile = ({ reply, roles }: PostProps) => { const { address, displayName, shortAddress } = author || {}; const authorRole = roles?.[address]?.role; - const commentMediaInfo = getCommentMediaInfoMemoized(reply); + const commentMediaInfo = getCommentMediaInfo(reply); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const [showThumbnail, setShowThumbnail] = useState(true); diff --git a/src/lib/utils/media-utils.ts b/src/lib/utils/media-utils.ts index 137a1513..19669814 100644 --- a/src/lib/utils/media-utils.ts +++ b/src/lib/utils/media-utils.ts @@ -45,45 +45,42 @@ const getPatternThumbnailUrl = (url: URL): string | undefined => { } }; -const getLinkMediaInfo = (link: string): CommentMediaInfo | undefined => { - if (!isValidURL(link)) { - return; - } - const url = new URL(link); - let patternThumbnailUrl: string | undefined; - let type: string = 'webpage'; - let mime: string | undefined; +const getLinkMediaInfo = memoize( + (link: string): CommentMediaInfo | undefined => { + if (!isValidURL(link)) { + return; + } + const url = new URL(link); + let patternThumbnailUrl: string | undefined; + let type: string = 'webpage'; + let mime: string | undefined; - // Check for common dynamic image URL patterns - if (link.includes('/_next/image?')) { - // Next.js Image component - return { url: link, type: 'image' }; - } - - try { - mime = extName(url.pathname.slice(url.pathname.lastIndexOf('/') + 1))[0]?.mime; - if (mime) { - if (mime.startsWith('image')) { - type = mime === 'image/gif' ? 'gif' : 'image'; - } else if (mime.startsWith('video')) { - type = 'video'; - } else if (mime.startsWith('audio')) { - type = 'audio'; + try { + mime = extName(url.pathname.slice(url.pathname.lastIndexOf('/') + 1))[0]?.mime; + if (mime) { + if (mime.startsWith('image')) { + type = mime === 'image/gif' ? 'gif' : 'image'; + } else if (mime.startsWith('video')) { + type = 'video'; + } else if (mime.startsWith('audio')) { + type = 'audio'; + } } + + if (canEmbed(url) || url.host.startsWith('yt.')) { + type = 'iframe'; + patternThumbnailUrl = getPatternThumbnailUrl(url); + } + } catch (e) { + console.error(e); } - if (canEmbed(url) || url.host.startsWith('yt.')) { - type = 'iframe'; - patternThumbnailUrl = getPatternThumbnailUrl(url); - } - } catch (e) { - console.error(e); - } + return { url: link, type, patternThumbnailUrl }; + }, + { max: 1000 }, +); - return { url: link, type, patternThumbnailUrl }; -}; - -const getCommentMediaInfo = (comment: Comment): CommentMediaInfo | undefined => { +export const getCommentMediaInfo = (comment: Comment): CommentMediaInfo | undefined => { if (!comment?.thumbnailUrl && !comment?.link) { return; } @@ -94,6 +91,3 @@ const getCommentMediaInfo = (comment: Comment): CommentMediaInfo | undefined => } return; }; - -export const getCommentMediaInfoMemoized = memoize(getCommentMediaInfo, { max: 1000 }); -export const getLinkMediaInfoMemoized = memoize(getLinkMediaInfo, { max: 1000 });