From e26b97f25809e3b959edf5e2bea742e908445516 Mon Sep 17 00:00:00 2001
From: David Quartey <42542676+DavidQuartz@users.noreply.github.com>
Date: Thu, 7 Jul 2022 07:32:03 +0000
Subject: [PATCH] [Fixes #955] Blured icon images (#1056)

---
 .../js/components/MainErrorView/index.js      |  1 -
 .../MainEventView.jsx}                        | 14 +++++++-----
 .../js/components/MainEventView/index.js      |  1 +
 .../js/components/MediaViewer/Media.jsx       | 22 +++++--------------
 .../MediaViewer/__tests__/Media-test.jsx      |  3 +--
 .../client/js/routes/Viewer.jsx               |  4 ++--
 .../mapstore/translations/data.de-DE.json     |  3 ++-
 .../mapstore/translations/data.en-US.json     |  3 ++-
 .../mapstore/translations/data.es-ES.json     |  3 ++-
 .../mapstore/translations/data.fr-FR.json     |  3 ++-
 .../mapstore/translations/data.it-IT.json     |  3 ++-
 .../themes/geonode/less/_media-viewer.less    | 21 +++++++++++++++---
 12 files changed, 45 insertions(+), 36 deletions(-)
 delete mode 100644 geonode_mapstore_client/client/js/components/MainErrorView/index.js
 rename geonode_mapstore_client/client/js/components/{MainErrorView/MainErrorView.jsx => MainEventView/MainEventView.jsx} (78%)
 create mode 100644 geonode_mapstore_client/client/js/components/MainEventView/index.js

diff --git a/geonode_mapstore_client/client/js/components/MainErrorView/index.js b/geonode_mapstore_client/client/js/components/MainErrorView/index.js
deleted file mode 100644
index 13df48b3bb..0000000000
--- a/geonode_mapstore_client/client/js/components/MainErrorView/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './MainErrorView';
diff --git a/geonode_mapstore_client/client/js/components/MainErrorView/MainErrorView.jsx b/geonode_mapstore_client/client/js/components/MainEventView/MainEventView.jsx
similarity index 78%
rename from geonode_mapstore_client/client/js/components/MainErrorView/MainErrorView.jsx
rename to geonode_mapstore_client/client/js/components/MainEventView/MainEventView.jsx
index d7d2f30729..849bfb082a 100644
--- a/geonode_mapstore_client/client/js/components/MainErrorView/MainErrorView.jsx
+++ b/geonode_mapstore_client/client/js/components/MainEventView/MainEventView.jsx
@@ -10,15 +10,16 @@ import React from 'react';
 import FaIcon from '@js/components/FaIcon';
 import Message from '@mapstore/framework/components/I18N/Message';
 
-function MainErrorView({
-    msgId
+function MainEventView({
+    msgId,
+    icon
 }) {
     return (
         <div className="gn-main-event-container">
             <div className="gn-main-event-content">
                 <div className="gn-main-event-text">
                     <div className="gn-main-icon">
-                        <FaIcon name="exclamation"/>
+                        <FaIcon name={icon} />
                     </div>
                     {msgId && <Message msgId={msgId} />}
                 </div>
@@ -27,8 +28,9 @@ function MainErrorView({
     );
 }
 
-MainErrorView.defaultProps = {
-    msgId: ''
+MainEventView.defaultProps = {
+    msgId: '',
+    icon: 'exclamation'
 };
 
-export default MainErrorView;
+export default MainEventView;
diff --git a/geonode_mapstore_client/client/js/components/MainEventView/index.js b/geonode_mapstore_client/client/js/components/MainEventView/index.js
new file mode 100644
index 0000000000..b5b27d903f
--- /dev/null
+++ b/geonode_mapstore_client/client/js/components/MainEventView/index.js
@@ -0,0 +1 @@
+export { default } from './MainEventView';
diff --git a/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx b/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx
index 08018eabee..47d9a36da2 100644
--- a/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx
+++ b/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx
@@ -11,26 +11,14 @@ import MediaComponent from '@mapstore/framework/components/geostory/media';
 import PdfViewer from '@js/components/MediaViewer/PdfViewer';
 import { determineResourceType } from '@js/utils/FileUtils';
 import Loader from '@mapstore/framework/components/misc/Loader';
-import MainErrorView from '@js/components/MainErrorView';
+import MainEventView from '@js/components/MainEventView';
 import { getResourceTypesInfo } from '@js/utils/ResourceUtils';
 
 const Scene3DViewer = lazy(() => import('@js/components/MediaViewer/Scene3DViewer'));
 
-function UnsupportedViewer({ thumbnail }) {
+function UnsupportedViewer() {
     return (
-        <div
-            className="gn-media-unsupported"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                backgroundImage: `url(${thumbnail})`,
-                backgroundSize: 'contain',
-                backgroundPosition: 'center'
-            }}>
-        </div>
+        <MainEventView msgId={'gnhome.noPreview'} icon="file" />
     );
 }
 
@@ -60,7 +48,7 @@ const mediaDefaultProps = {
     unsupported: {}
 };
 
-const Media = ({resource, ...props}) => {
+const Media = ({ resource, ...props }) => {
 
     const mediaTypes = getResourceTypesInfo();
     const {
@@ -83,7 +71,7 @@ const Media = ({resource, ...props}) => {
             />
         </Suspense>);
     }
-    return (<MainErrorView msgId={'gnhome.permissionsMissing'}/>);
+    return (<MainEventView msgId={'gnhome.permissionsMissing'}/>);
 };
 
 export default Media;
diff --git a/geonode_mapstore_client/client/js/components/MediaViewer/__tests__/Media-test.jsx b/geonode_mapstore_client/client/js/components/MediaViewer/__tests__/Media-test.jsx
index c56c456b44..dc2a1ff511 100644
--- a/geonode_mapstore_client/client/js/components/MediaViewer/__tests__/Media-test.jsx
+++ b/geonode_mapstore_client/client/js/components/MediaViewer/__tests__/Media-test.jsx
@@ -41,9 +41,8 @@ describe('Test Media', () => {
         ReactDOM.render( <Media resource={{href: "http://example.com", thumbnail_url: 'image', resource_type: "document", extension: "docx", "abstract": "test", pk: 1, perms: [
             "download_resourcebase"
         ] }}/>, document.getElementById("container"));
-        const mediaViewer = document.querySelector('.gn-media-unsupported');
+        const mediaViewer = document.querySelector('.gn-main-event-container');
         expect(mediaViewer).toBeTruthy();
-        expect(mediaViewer.style.backgroundImage).toBe('url("image")');
     });
 
     it('should render error message if resource has not download perms', () => {
diff --git a/geonode_mapstore_client/client/js/routes/Viewer.jsx b/geonode_mapstore_client/client/js/routes/Viewer.jsx
index 4bcf2be196..69dc3966d9 100644
--- a/geonode_mapstore_client/client/js/routes/Viewer.jsx
+++ b/geonode_mapstore_client/client/js/routes/Viewer.jsx
@@ -18,7 +18,7 @@ import PluginsContainer from '@mapstore/framework/components/plugins/PluginsCont
 import useLazyPlugins from '@js/hooks/useLazyPlugins';
 import { requestResourceConfig, requestNewResourceConfig } from '@js/actions/gnresource';
 import MetaTags from '@js/components/MetaTags';
-import MainErrorView from '@js/components/MainErrorView';
+import MainEventView from '@js/components/MainEventView';
 import ViewerLayout from '@js/components/ViewerLayout';
 import { createShallowSelector } from '@mapstore/framework/utils/ReselectUtils';
 
@@ -139,7 +139,7 @@ function ViewerRoute({
                 params={params}
             />}
             {loading && Loader && <Loader />}
-            {configError && <MainErrorView msgId={configError}/>}
+            {configError && <MainEventView msgId={configError}/>}
         </>
     );
 }
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json b/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json
index 425b9e1ef7..03491243a9 100644
--- a/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json
+++ b/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json
@@ -127,7 +127,8 @@
             "createDataset": "Datensatz erstellen",
             "search": "Suchen...",
             "permissionsMissing": "Sie sind nicht berechtigt, diese Ressource anzuzeigen",
-            "filter": "Filter"
+            "filter": "Filter",
+            "noPreview": "Für diese Ressource ist keine Vorschau verfügbar"
         },
         "viewer": {
             "document": {
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json b/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json
index cdf49c9df8..aa47e1afb6 100644
--- a/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json
+++ b/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json
@@ -127,7 +127,8 @@
             "createDataset": "Create dataset",
             "search": "Search...",
             "permissionsMissing": "You don't have permission to view or download the resource",
-            "filter": "Filter"
+            "filter": "Filter",
+            "noPreview": "A preview is not available for this resource"
         },
         "viewer": {
             "document": {
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json b/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json
index 78204b7f83..ad05a8f460 100644
--- a/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json
+++ b/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json
@@ -127,7 +127,8 @@
             "createDataset": "Crear conjunto de datos",
             "search": "Buscar...",
             "permissionsMissing": "No tienes permiso para ver o descargar el recurso.",
-            "filter": "Filtrar"
+            "filter": "Filtrar",
+            "noPreview": "Una vista previa no está disponible para este recurso"
         },
         "viewer": {
             "document": {
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json b/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json
index c060f96d72..c9ee334269 100644
--- a/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json
+++ b/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json
@@ -127,7 +127,8 @@
             "createDataset": "Créer un ensemble de données",
             "search": "Chercher...",
             "permissionsMissing": "Vous n'êtes pas autorisé à afficher ou télécharger la ressource",
-            "filter": "Filtre"
+            "filter": "Filtre",
+            "noPreview": "Un aperçu n'est pas disponible pour cette ressource"
         },
         "viewer": {
             "document": {
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json b/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json
index f0115d36bc..23e01e1891 100644
--- a/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json
+++ b/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json
@@ -129,7 +129,8 @@
             "createDataset": "Crea dataset",
             "search": "Cerca...",
             "permissionsMissing": "Non hai i permessi per visualizzare o scaricare la risorsa",
-            "filter": "Filtra"
+            "filter": "Filtra",
+            "noPreview": "Un'anteprima non è disponibile per questa risorsa"
         },
         "viewer": {
             "document": {
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_media-viewer.less b/geonode_mapstore_client/client/themes/geonode/less/_media-viewer.less
index f196a977a7..1d452e11a7 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_media-viewer.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_media-viewer.less
@@ -24,11 +24,26 @@
     position: absolute;
     margin: 1rem;
 
-    .ms-media,
-    .ms-media img {
+    .ms-media {
         position: relative;
+        width: 100%;
         height: 100%;
-        width: 100%
+    }
+
+    .ms-media-image {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .ms-media img {
+        position: relative;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        cursor: pointer;
+        width: auto;
+        height: auto;
     }
 
     .pdf-loader {