diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css index 822084b7..82373d42 100644 --- a/src/components/post-form/post-form.module.css +++ b/src/components/post-form/post-form.module.css @@ -89,6 +89,7 @@ .linkType { font-weight: normal; + text-transform: lowercase; } .linkField input[type="text"] { diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index 2da9cd37..67291a5d 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -23,6 +23,7 @@ import useChallengesStore from '../../stores/use-challenges-store'; import styles from './post-form.module.css'; import _ from 'lodash'; import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline'; +import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; type SubmitState = { subplebbitAddress: string | undefined; @@ -71,7 +72,16 @@ const useSubmitStore = create((set) => ({ export const LinkTypePreviewer = ({ link }: { link: string }) => { const { t } = useTranslation(); const mediaInfo = getLinkMediaInfo(link); - return isValidURL(link) ? mediaInfo?.type : t('invalid_url'); + let type = mediaInfo?.type; + const gifFrameUrl = useFetchGifFirstFrame(mediaInfo?.url); + + if (type === 'gif' && gifFrameUrl !== null) { + type = t('animated_gif'); + } else if (type === 'gif' && gifFrameUrl === null) { + type = t('static_gif'); + } + + return isValidURL(link) ? type : t('invalid_url'); }; const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {