diff --git a/src/components/posts/editor/HtmlEditor.tsx b/src/components/posts/editor/HtmlEditor.tsx index 943068ef8..5b85fa2b9 100644 --- a/src/components/posts/editor/HtmlEditor.tsx +++ b/src/components/posts/editor/HtmlEditor.tsx @@ -8,6 +8,7 @@ export interface HTMLEditorProps { saveBodyDraft?: (body: string) => void className?: string showToolbar?: boolean + autoFocus?: boolean } export default function HtmlEditor({ @@ -16,13 +17,14 @@ export default function HtmlEditor({ saveBodyDraft, className, showToolbar, + autoFocus, }: HTMLEditorProps) { const editor = useCreateEditor(onChange, value, saveBodyDraft) return ( <> {showToolbar && } - + ) } diff --git a/src/components/posts/editor/ModalEditor.tsx b/src/components/posts/editor/ModalEditor.tsx index 731bdc078..3e0b555f9 100644 --- a/src/components/posts/editor/ModalEditor.tsx +++ b/src/components/posts/editor/ModalEditor.tsx @@ -189,7 +189,11 @@ export const PostEditorModalBody = ({ {/* value and onChange are provided by Form.Item */} - + {imgUrl && ( { ) } +const thumbnail = ['maxresdefault', 'mqdefault', 'sddefault', 'hqdefault', 'default'] as const +export type ThumbnailRes = (typeof thumbnail)[number] + +export function YoutubeThumbnailChecker({ + setThumbnailRes, + src, +}: { + src: string + setThumbnailRes: (res: ThumbnailRes) => void +}) { + const currentRetries = useRef(0) + const imgRef = useRef(null) + const youtubeId = useMemo(() => getYoutubeVideoId(src), [src]) + const [res, setRes] = useState(0) + useEffect(() => { + setThumbnailRes(thumbnail[res]) + }, [res]) + + useEffect(() => { + function checkImage() { + if (imgRef.current?.complete) { + if (imgRef.current.naturalWidth === 120 && imgRef.current.naturalHeight === 90) { + if (res < thumbnail.length - 1) { + setRes(res + 1) + } + } + } else { + currentRetries.current++ + if (currentRetries.current <= 5) + setTimeout(() => { + checkImage() + }, 200) + } + } + checkImage() + }, [res]) + + return ( + + ) +} + function YoutubeEmbed({ src }: { src: string }) { const youtubeId = useMemo(() => getYoutubeVideoId(src), [src]) + const [thumbnailRes, setThumbnailRes] = useState('maxresdefault') + console.log(thumbnailRes) if (!youtubeId) return null return ( - + <> + + + ) } diff --git a/src/components/posts/view-post/PostPage.tsx b/src/components/posts/view-post/PostPage.tsx index dcbd7ccfa..83c7791a1 100644 --- a/src/components/posts/view-post/PostPage.tsx +++ b/src/components/posts/view-post/PostPage.tsx @@ -3,7 +3,7 @@ import { getPostIdFromSlug } from '@subsocial/utils/slugify' import clsx from 'clsx' import { NextPage } from 'next' import router from 'next/router' -import { FC, useEffect } from 'react' +import { FC } from 'react' import { CommentSection } from 'src/components/comments/CommentsSection' import MobileStakerRewardDashboard from 'src/components/creators/MobileStakerRewardDashboard' import { PageContent } from 'src/components/main/PageWrapper' @@ -17,7 +17,7 @@ import { return404 } from 'src/components/utils/next' import config from 'src/config' import { resolveIpfsUrl } from 'src/ipfs' import { getInitialPropsWithRedux, NextContextWithRedux } from 'src/rtk/app' -import { useSelectProfile, useSetChatEntityConfig } from 'src/rtk/app/hooks' +import { useSelectProfile } from 'src/rtk/app/hooks' import { useAppSelector } from 'src/rtk/app/store' import { fetchPost, fetchPosts, selectPost } from 'src/rtk/features/posts/postsSlice' import { useFetchMyReactionsByPostId } from 'src/rtk/features/reactions/myPostReactionsHooks' @@ -59,16 +59,6 @@ const InnerPostPage: NextPage = props => { const { post, space } = postData const { struct, content } = post - const setChatConfig = useSetChatEntityConfig() - useEffect(() => { - if (!post) return - setChatConfig({ entity: { data: post, type: 'post' }, withFloatingButton: true }) - - return () => { - setChatConfig(null) - } - }, []) - const goToCommentsId = 'comments' const profile = useSelectProfile(postData.post.struct.ownerId)