From 9d779703670cd54e3760627ed79adff03e727fa6 Mon Sep 17 00:00:00 2001
From: David Quartey <42542676+DavidQuartz@users.noreply.github.com>
Date: Thu, 18 Aug 2022 09:35:48 +0000
Subject: [PATCH] [Fixes #1022] Thumbnail placeholders (#1142)

---
 .../components/DetailsPanel/DetailsPanel.jsx  | 46 ++++++++++++-------
 .../js/components/MediaViewer/Media.jsx       |  4 +-
 .../components/ResourceCard/ResourceCard.jsx  |  6 ++-
 .../client/js/routes/Detail.jsx               |  4 +-
 .../client/js/routes/Search.jsx               |  3 +-
 .../client/js/routes/Viewer.jsx               |  3 +-
 .../client/js/utils/ResourceUtils.js          |  5 ++
 .../themes/geonode/less/_details-panel.less   |  4 ++
 .../themes/geonode/less/_resource-card.less   | 14 ++++--
 9 files changed, 61 insertions(+), 28 deletions(-)

diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
index cffc448503..acd7bfefea 100644
--- a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
+++ b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
@@ -17,7 +17,7 @@ import Spinner from '@js/components/Spinner';
 import Message from '@mapstore/framework/components/I18N/Message';
 import tooltip from '@mapstore/framework/components/misc/enhancers/tooltip';
 import moment from 'moment';
-import { getResourceTypesInfo, getMetadataDetailUrl, ResourceTypes, GXP_PTYPES } from '@js/utils/ResourceUtils';
+import { getResourceTypesInfo, getMetadataDetailUrl, ResourceTypes, GXP_PTYPES, getResourceImageSource } from '@js/utils/ResourceUtils';
 import debounce from 'lodash/debounce';
 import CopyToClipboardCmp from 'react-copy-to-clipboard';
 import { TextEditable, ThumbnailEditable } from '@js/components/ContentsEditable/';
@@ -82,6 +82,7 @@ function formatResourceLinkUrl(resourceUrl = '') {
 function ThumbnailPreview({
     src,
     style,
+    icon,
     ...props
 }) {
 
@@ -94,19 +95,29 @@ function ThumbnailPreview({
     }, [src]);
 
     return (
-        <img
-            {...props}
-            src={src}
-            onLoad={() => setLoading(false)}
-            onError={() => setLoading(false)}
-            style={{
+        <>
+            {!src ? <div className="card-img-placeholder" style={{
                 ...style,
-                ...(loading && {
-                    backgroundColor: 'transparent'
-                }),
-                objectFit: 'contain'
-            }}
-        />
+                width: 250,
+                height: 184,
+                outline: '1px solid #eee'
+            }}>
+                <FaIcon name={icon} />
+            </div>
+                : <img
+                    {...props}
+                    src={src}
+                    onLoad={() => setLoading(false)}
+                    onError={() => setLoading(false)}
+                    style={{
+                        ...style,
+                        ...(loading && {
+                            backgroundColor: 'transparent'
+                        }),
+                        objectFit: 'contain'
+                    }}
+                />}
+        </>
     );
 }
 
@@ -460,6 +471,7 @@ function DetailsPanel({
                         />
                         : (!embedUrl && !editThumbnail ? (<ThumbnailPreview
                             src={resource?.thumbnail_url}
+                            icon={icon}
                             style={{
                                 position: 'absolute',
                                 width: '100%',
@@ -490,13 +502,13 @@ function DetailsPanel({
 
                 <div className="gn-details-panel-content">
                     {editThumbnail && <div className="gn-details-panel-content-img">
-                        {!activeEditMode && <ThumbnailPreview src={resource?.thumbnail_url} />}
+                        {!activeEditMode && <ThumbnailPreview src={resource?.thumbnail_url} icon={icon} />}
                         {activeEditMode && <div className="gn-details-panel-preview inediting">
-                            {!enableMapViewer ? <> <EditThumbnail
+                            {!enableMapViewer ? <> <div {...(!resource?.thumbnail_url && {style: {outline: '1px solid #eee'}})}><EditThumbnail
                                 onEdit={editThumbnail}
-                                image={resource?.thumbnail_url}
+                                image={() => getResourceImageSource(resource?.thumbnail_url)}
                                 thumbnailUpdating={resourceThumbnailUpdating}
-                            />
+                            /></div>
                             {
                                 ((resource.resource_type === ResourceTypes.MAP || resource.resource_type === ResourceTypes.DATASET) && (resource.ptype !== GXP_PTYPES.REST_IMG || resource.ptype !== GXP_PTYPES.REST_MAP)) &&
                                 ( <><MapThumbnailButtonToolTip
diff --git a/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx b/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx
index 47d9a36da2..5228ef3a7f 100644
--- a/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx
+++ b/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx
@@ -12,7 +12,7 @@ import PdfViewer from '@js/components/MediaViewer/PdfViewer';
 import { determineResourceType } from '@js/utils/FileUtils';
 import Loader from '@mapstore/framework/components/misc/Loader';
 import MainEventView from '@js/components/MainEventView';
-import { getResourceTypesInfo } from '@js/utils/ResourceUtils';
+import { getResourceTypesInfo, getResourceImageSource } from '@js/utils/ResourceUtils';
 
 const Scene3DViewer = lazy(() => import('@js/components/MediaViewer/Scene3DViewer'));
 
@@ -66,7 +66,7 @@ const Media = ({ resource, ...props }) => {
                 {...props[mediaType]}
                 description={resource.abstract}
                 id={resource.pk}
-                thumbnail={resource.thumbnail_url}
+                thumbnail={() => getResourceImageSource(resource?.thumbnail_url)}
                 src={resource.href}
             />
         </Suspense>);
diff --git a/geonode_mapstore_client/client/js/components/ResourceCard/ResourceCard.jsx b/geonode_mapstore_client/client/js/components/ResourceCard/ResourceCard.jsx
index 25b7413356..66c58689e1 100644
--- a/geonode_mapstore_client/client/js/components/ResourceCard/ResourceCard.jsx
+++ b/geonode_mapstore_client/client/js/components/ResourceCard/ResourceCard.jsx
@@ -86,8 +86,10 @@ const ResourceCard = forwardRef(({
                 />
             )}
             <div className={`card-resource-${layoutCardsStyle}`}>
-                {imgError ? (
-                    <div className={`${imgClassName} card-img-placeholder`} />
+                {(imgError || !res.thumbnail_url) ? (
+                    <div className={`${imgClassName} card-img-placeholder`}>
+                        <FaIcon name={icon} />
+                    </div>
                 ) : (
                     <img
                         className={imgClassName}
diff --git a/geonode_mapstore_client/client/js/routes/Detail.jsx b/geonode_mapstore_client/client/js/routes/Detail.jsx
index 61d2970dc7..d3eb8c6b34 100644
--- a/geonode_mapstore_client/client/js/routes/Detail.jsx
+++ b/geonode_mapstore_client/client/js/routes/Detail.jsx
@@ -36,7 +36,7 @@ import MetaTags from "@js/components/MetaTags";
 import {
     getThemeLayoutSize
 } from '@js/utils/AppUtils';
-import { resourceHasPermission } from '@js/utils/ResourceUtils';
+import { resourceHasPermission, getResourceImageSource } from '@js/utils/ResourceUtils';
 import { getTotalResources } from '@js/selectors/search';
 import ConnectedCardGrid from '@js/routes/catalogue/ConnectedCardGrid';
 import DeleteResource from '@js/plugins/DeleteResource';
@@ -133,7 +133,7 @@ function Detail({
     return (
         <>
             <MetaTags
-                logo={resource ? resource.thumbnail_url : window.location.origin + config?.navbar?.logo[0]?.src}
+                logo={resource ? () => getResourceImageSource(resource?.thumbnail_url) : window.location.origin + config?.navbar?.logo[0]?.src}
                 title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
                 siteName={siteName}
                 contentURL={resource?.detail_url}
diff --git a/geonode_mapstore_client/client/js/routes/Search.jsx b/geonode_mapstore_client/client/js/routes/Search.jsx
index 942d4acd53..a865dcc9cc 100644
--- a/geonode_mapstore_client/client/js/routes/Search.jsx
+++ b/geonode_mapstore_client/client/js/routes/Search.jsx
@@ -34,6 +34,7 @@ import { withResizeDetector } from 'react-resize-detector';
 
 import { getCategories, getRegions, getOwners, getKeywords } from '@js/api/geonode/v2';
 import MetaTags from "@js/components/MetaTags";
+import { getResourceImageSource } from '@js/utils/ResourceUtils';
 
 import {
     getThemeLayoutSize
@@ -174,7 +175,7 @@ function Search({
     return (
         <>
             <MetaTags
-                logo={resource ? resource.thumbnail_url : window.location.origin + config?.navbar?.logo[0]?.src}
+                logo={resource ? () => getResourceImageSource(resource?.thumbnail_url) : window.location.origin + config?.navbar?.logo[0]?.src}
                 title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
                 siteName={siteName}
                 contentURL={resource?.detail_url}
diff --git a/geonode_mapstore_client/client/js/routes/Viewer.jsx b/geonode_mapstore_client/client/js/routes/Viewer.jsx
index 69dc3966d9..aeeb5690e4 100644
--- a/geonode_mapstore_client/client/js/routes/Viewer.jsx
+++ b/geonode_mapstore_client/client/js/routes/Viewer.jsx
@@ -21,6 +21,7 @@ import MetaTags from '@js/components/MetaTags';
 import MainEventView from '@js/components/MainEventView';
 import ViewerLayout from '@js/components/ViewerLayout';
 import { createShallowSelector } from '@mapstore/framework/utils/ReselectUtils';
+import { getResourceImageSource } from '@js/utils/ResourceUtils';
 
 const urlQuery = url.parse(window.location.href, true).query;
 
@@ -123,7 +124,7 @@ function ViewerRoute({
     return (
         <>
             {resource && <MetaTags
-                logo={resource.thumbnail_url}
+                logo={() => getResourceImageSource(resource?.thumbnail_url)}
                 title={(resource?.title) ? `${resource?.title} - ${siteName}` : siteName }
                 siteName={siteName}
                 contentURL={resource?.detail_url}
diff --git a/geonode_mapstore_client/client/js/utils/ResourceUtils.js b/geonode_mapstore_client/client/js/utils/ResourceUtils.js
index 2dc6aa05df..b86e2f61f3 100644
--- a/geonode_mapstore_client/client/js/utils/ResourceUtils.js
+++ b/geonode_mapstore_client/client/js/utils/ResourceUtils.js
@@ -685,3 +685,8 @@ export const parseUploadFiles = (data) => {
             };
         }, {});
 };
+
+
+export const getResourceImageSource = (image) => {
+    return image ? image : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADICAIAAABZHvsFAAAACXBIWXMAAC4jAAAuIwF4pT92AAABiklEQVR42u3SAQ0AAAjDMMC/5+MAAaSVsKyTFHwxEmBoMDQYGgyNocHQYGgwNBgaQ4OhwdBgaDA0hgZDg6HB0GBoDA2GBkODocHQGBoMDYYGQ4OhMTQYGgwNhgZDY2gwNBgaDI2hwdBgaDA0GBpDg6HB0GBoMDSGBkODocHQYGgMDYYGQ4OhwdAYGgwNhgZDg6ExNBgaDA2GBkNjaDA0GBoMDYbG0GBoMDQYGkODocHQYGgwNIYGQ4OhwdBgaAwNhgZDg6HB0BgaDA2GBkODoTE0GBoMDYYGQ2NoMDQYGgwNhsbQYGgwNBgaQ4OhwdBgaDA0hgZDg6HB0GBoDA2GBkODocHQGBoMDYYGQ4OhMTQYGgwNhgZDY2gwNBgaDA2GxtBgaDA0GBoMjaHB0GBoMDSGBkODocHQYGgMDYYGQ4OhwdAYGgwNhgZDg6ExNBgaDA2GBkNjaDA0GBoMDYbG0GBoMDQYGgyNocHQYGgwNIYGQ4OhwdBgaAwNhgZDg6HB0BgaDA2GBkPDbQH4OQSN0W8qegAAAABJRU5ErkJggg==';
+};
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
index 71da7bad3f..5b98341a0e 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
@@ -58,6 +58,10 @@
             .color-var(@theme-vars[danger]);
         }
     }
+    .card-img-placeholder {
+        .background-color-var(@theme-vars[main-bg]);
+        .color-var(@theme-vars[primary]);
+    }
 }
 
 // **************
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_resource-card.less b/geonode_mapstore_client/client/themes/geonode/less/_resource-card.less
index 697ba25eae..49f3f610b4 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_resource-card.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_resource-card.less
@@ -38,12 +38,13 @@
             .color-var(@theme-vars[main-color]);
             .background-color-var(@theme-vars[main-bg]);
         }
-        .card-img-placeholder {
-            .background-color-var(@theme-vars[main-variant-bg]);
-        }
         .gn-card-options {
             .border-color-var(@theme-vars[main-border-color]);
         }
+        .card-img-placeholder {
+            .background-color-var(@theme-vars[main-bg]);
+            .color-var(@theme-vars[primary]);
+        }
     }
 }
 
@@ -297,6 +298,13 @@ button.btn.btn-default.gn-resource-status.gn-status-button {
     }
 }
 
+.card-img-placeholder {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+}
+
 @media screen and (min-width: 1649px) {
     .gn-resource-card {
         .card-resource-list {