From 820d08017a98bc314982cd3f30c2e73f28f25c2f Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Thu, 11 Aug 2022 18:41:09 +0530 Subject: [PATCH] Fix image not loading without h/w data (#738) --- src/app/molecules/media/Media.jsx | 35 ++++++++++++++++-------------- src/app/molecules/media/Media.scss | 25 +++++++++++---------- 2 files changed, 32 insertions(+), 28 deletions(-) diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx index b272ea1..5ef25ec 100644 --- a/src/app/molecules/media/Media.jsx +++ b/src/app/molecules/media/Media.jsx @@ -178,7 +178,7 @@ function Image({
{ blurhash && blur && } - { url !== null && setBlur(false)} src={url || link} alt={name} />} + { url !== null && setBlur(false)} src={url || link} alt={name} />}
); @@ -227,11 +227,11 @@ function Sticker({ Sticker.defaultProps = { file: null, type: '', + width: null, + height: null, }; Sticker.propTypes = { name: PropTypes.string.isRequired, - width: null, - height: null, width: PropTypes.number, height: PropTypes.number, link: PropTypes.string.isRequired, @@ -289,6 +289,7 @@ function Video({ const [isLoading, setIsLoading] = useState(false); const [url, setUrl] = useState(null); const [thumbUrl, setThumbUrl] = useState(null); + const [blur, setBlur] = useState(true); useEffect(() => { let unmounted = false; @@ -303,16 +304,16 @@ function Video({ }; }, []); - async function loadVideo() { + const loadVideo = async () => { const myUrl = await getUrl(link, type, file); setUrl(myUrl); setIsLoading(false); - } + }; - function handlePlayVideo() { + const handlePlayVideo = () => { setIsLoading(true); loadVideo(); - } + }; return (
@@ -323,15 +324,17 @@ function Video({ }} className="video-container" > - { url === null && blurhash && } - { url === null && thumbUrl !== null && ( - /* eslint-disable-next-line jsx-a11y/alt-text */ - - )} - { url === null && isLoading && } - { url === null && !isLoading && } - { url !== null && ( - /* eslint-disable-next-line jsx-a11y/media-has-caption */ + { url === null ? ( + <> + { blurhash && blur && } + { thumbUrl !== null && ( + setBlur(false)} alt={name} /> + )} + {isLoading && } + {!isLoading && } + + ) : ( + /* eslint-disable-next-line jsx-a11y/media-has-caption */ diff --git a/src/app/molecules/media/Media.scss b/src/app/molecules/media/Media.scss index b26b232..7c73305 100644 --- a/src/app/molecules/media/Media.scss +++ b/src/app/molecules/media/Media.scss @@ -27,14 +27,21 @@ white-space: initial; } +.sticker-container { + display: inline-flex; + max-width: 128px; + width: 100%; + & img { + width: 100% !important; + } +} + .image-container, .video-container, .audio-container { font-size: 0; line-height: 0; - position: relative; - display: flex; justify-content: center; align-items: center; @@ -48,7 +55,6 @@ .video-container { & img, & canvas { - position: absolute; max-width: unset !important; width: 100% !important; height: 100%; @@ -57,18 +63,13 @@ } } -.sticker-container { - display: inline-flex; - max-width: 128px; - width: 100%; - & img { - width: 100% !important; - } -} - .video-container { + position: relative; & .ic-btn-surface { background-color: var(--bg-surface-low); + } + & .ic-btn-surface, + & .donut-spinner { position: absolute; } video {