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({
       <FileHeader name={name} link={url || link} type={type} external />
       <div style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }} className="image-container">
         { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
-        { url !== null && <img onLoad={() => setBlur(false)} src={url || link} alt={name} />}
+        { url !== null && <img style={{ display: blur ? 'none' : 'unset' }} onLoad={() => setBlur(false)} src={url || link} alt={name} />}
       </div>
     </div>
   );
@@ -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 (
     <div className="file-container">
@@ -323,15 +324,17 @@ function Video({
         }}
         className="video-container"
       >
-        { url === null && blurhash && <BlurhashCanvas hash={blurhash} punch={1} />}
-        { url === null && thumbUrl !== null && (
-          /* eslint-disable-next-line jsx-a11y/alt-text */
-          <img src={thumbUrl} />
-        )}
-        { url === null && isLoading && <Spinner size="small" /> }
-        { url === null && !isLoading && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
-        { url !== null && (
-        /* eslint-disable-next-line jsx-a11y/media-has-caption */
+        { url === null ? (
+          <>
+            { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
+            { thumbUrl !== null && (
+              <img style={{ display: blur ? 'none' : 'unset' }} src={thumbUrl} onLoad={() => setBlur(false)} alt={name} />
+            )}
+            {isLoading && <Spinner size="small" />}
+            {!isLoading && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
+          </>
+        ) : (
+          /* eslint-disable-next-line jsx-a11y/media-has-caption */
           <video autoPlay controls poster={thumbUrl}>
             <source src={url} type={getBlobSafeMimeType(type)} />
           </video>
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 {