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 thumbnails could get stuck

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-11-21 11:08:33 +01:00
parent 931a999b3b
commit 5565795a14
2 changed files with 41 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-desktop.tsx
+24 -14
View File
@@ -1,10 +1,17 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useEffect, useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { Comment, useAuthorAvatar, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { fetchWebpageThumbnailIfNeeded, getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail, getMediaDimensions } from '../../lib/utils/media-utils';
import {
CommentMediaInfo,
fetchWebpageThumbnailIfNeeded,
getCommentMediaInfo,
getDisplayMediaInfoType,
getHasThumbnail,
getMediaDimensions,
} from '../../lib/utils/media-utils';
import { hashStringToColor, getTextColorForBackground } from '../../lib/utils/post-utils';
import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
import { isValidURL } from '../../lib/utils/url-utils';
@@ -210,19 +217,22 @@ const PostMedia = ({ post }: PostProps) => {
const { link, spoiler } = post || {};
// some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
const initialCommentMediaInfo = useMemo(() => getCommentMediaInfo(post), [post]);
const [commentMediaInfo, setCommentMediaInfo] = useState(initialCommentMediaInfo);
const fetchThumbnail = useCallback(async () => {
if (initialCommentMediaInfo?.type === 'webpage' && !initialCommentMediaInfo.thumbnail) {
const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialCommentMediaInfo);
setCommentMediaInfo(newMediaInfo);
}
}, [initialCommentMediaInfo]);
const [commentMediaInfo, setCommentMediaInfo] = useState<CommentMediaInfo | undefined>();
useEffect(() => {
fetchThumbnail();
}, [fetchThumbnail]);
const loadThumbnail = async () => {
const initialInfo = getCommentMediaInfo(post);
if (initialInfo?.type === 'webpage' && !initialInfo.thumbnail) {
const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialInfo);
setCommentMediaInfo(newMediaInfo);
} else {
setCommentMediaInfo(initialInfo);
}
};
loadThumbnail();
return () => {
setCommentMediaInfo(undefined);
};
}, [post]);
const { url } = commentMediaInfo || {};
let type = commentMediaInfo?.type;
src/components/post-mobile/post-mobile.tsx
+17 -14
View File
@@ -1,10 +1,10 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useEffect, useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { Comment, useAuthorAvatar, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { fetchWebpageThumbnailIfNeeded, getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
import { CommentMediaInfo, fetchWebpageThumbnailIfNeeded, getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
import { getTextColorForBackground, hashStringToColor } from '../../lib/utils/post-utils';
import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
@@ -41,19 +41,22 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
// some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
const initialCommentMediaInfo = useMemo(() => getCommentMediaInfo(post), [post]);
const [commentMediaInfo, setCommentMediaInfo] = useState(initialCommentMediaInfo);
const fetchThumbnail = useCallback(async () => {
if (initialCommentMediaInfo?.type === 'webpage' && !initialCommentMediaInfo.thumbnail) {
const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialCommentMediaInfo);
setCommentMediaInfo(newMediaInfo);
}
}, [initialCommentMediaInfo]);
const [commentMediaInfo, setCommentMediaInfo] = useState<CommentMediaInfo | undefined>();
useEffect(() => {
fetchThumbnail();
}, [fetchThumbnail]);
const loadThumbnail = async () => {
const initialInfo = getCommentMediaInfo(post);
if (initialInfo?.type === 'webpage' && !initialInfo.thumbnail) {
const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialInfo);
setCommentMediaInfo(newMediaInfo);
} else {
setCommentMediaInfo(initialInfo);
}
};
loadThumbnail();
return () => {
setCommentMediaInfo(undefined);
};
}, [post]);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true);