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(media utils): memoize once, not twice

Browse Source
This commit is contained in:
plebeius.eth
2024-04-10 12:19:02 +02:00
parent 9ae351cbe1
commit b1fb9f9d0c
2 changed files with 36 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/post.tsx
+5 -5
View File
@@ -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);
src/lib/utils/media-utils.ts
+31 -37
View File
@@ -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 });