From f644083cf795571be16ebaead8382650bbc83726 Mon Sep 17 00:00:00 2001 From: DavidQuartz Date: Mon, 27 Jun 2022 09:10:00 +0000 Subject: [PATCH 1/4] Remove thumnail as preview - avoid stretching small images --- .../MainErrorView/MainErrorView.jsx | 8 ++-- .../js/components/MediaViewer/Media.jsx | 41 +++++++++++-------- .../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 | 10 +++++ 8 files changed, 50 insertions(+), 24 deletions(-) diff --git a/geonode_mapstore_client/client/js/components/MainErrorView/MainErrorView.jsx b/geonode_mapstore_client/client/js/components/MainErrorView/MainErrorView.jsx index d7d2f30729..4b01b33f68 100644 --- a/geonode_mapstore_client/client/js/components/MainErrorView/MainErrorView.jsx +++ b/geonode_mapstore_client/client/js/components/MainErrorView/MainErrorView.jsx @@ -11,14 +11,15 @@ import FaIcon from '@js/components/FaIcon'; import Message from '@mapstore/framework/components/I18N/Message'; function MainErrorView({ - msgId + msgId, + icon }) { return (
- +
{msgId && }
@@ -28,7 +29,8 @@ function MainErrorView({ } MainErrorView.defaultProps = { - msgId: '' + msgId: '', + icon: 'exclamation' }; export default MainErrorView; diff --git a/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx b/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx index 08018eabee..adba01d9df 100644 --- a/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx +++ b/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx @@ -6,7 +6,7 @@ * LICENSE file in the root directory of this source tree. */ -import React, { Suspense, lazy } from 'react'; +import React, { Suspense, lazy, useEffect } from 'react'; import MediaComponent from '@mapstore/framework/components/geostory/media'; import PdfViewer from '@js/components/MediaViewer/PdfViewer'; import { determineResourceType } from '@js/utils/FileUtils'; @@ -16,21 +16,9 @@ import { getResourceTypesInfo } from '@js/utils/ResourceUtils'; const Scene3DViewer = lazy(() => import('@js/components/MediaViewer/Scene3DViewer')); -function UnsupportedViewer({ thumbnail }) { +function UnsupportedViewer() { return ( -
-
+ ); } @@ -60,7 +48,28 @@ const mediaDefaultProps = { unsupported: {} }; -const Media = ({resource, ...props}) => { +const Media = ({ resource, ...props }) => { + useEffect(() => { + const image = document.querySelector('.ms-media img'); + // if an image is being viewed avoid stretching small images to fit viewer dimensions + if (image) { + let newimageWidth = 0; + let newimageHeight = 0; + let newimage = new Image(); + newimage.src = resource.href; + newimage.onload = function() { + newimageWidth = this.naturalWidth; + newimageHeight = this.naturalHeight; + const container = document.getElementById('ms-container'); + const containerStyles = window.getComputedStyle(container); + if (newimageWidth < parseInt(containerStyles.width, 10) && newimageHeight < parseInt(containerStyles.height, 10)) { + return image.classList.add('natural-image'); + } + return false; + }; + } + }, []); + const mediaTypes = getResourceTypesInfo(); const { 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..b729373683 100644 --- a/geonode_mapstore_client/client/themes/geonode/less/_media-viewer.less +++ b/geonode_mapstore_client/client/themes/geonode/less/_media-viewer.less @@ -31,6 +31,16 @@ width: 100% } + .ms-media img.natural-image { + height: unset; + width: unset; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + } + .pdf-loader { position: absolute; top: 0; From 98e25ba6a332a511cadc5b36a28b3ea9588b1f93 Mon Sep 17 00:00:00 2001 From: DavidQuartz Date: Mon, 27 Jun 2022 11:00:27 +0000 Subject: [PATCH 2/4] Updated test --- .../client/js/components/MediaViewer/__tests__/Media-test.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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( , 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', () => { From cc1fd1714995a48aed622a0060000fe2f1930740 Mon Sep 17 00:00:00 2001 From: DavidQuartz Date: Thu, 30 Jun 2022 10:29:41 +0000 Subject: [PATCH 3/4] Using styles solution - renamed component --- .../js/components/MainErrorView/index.js | 1 - .../MainEventView.jsx} | 6 ++-- .../js/components/MainEventView/index.js | 1 + .../js/components/MediaViewer/Media.jsx | 29 +++---------------- .../client/js/routes/Viewer.jsx | 4 +-- geonode_mapstore_client/client/package.json | 2 +- .../themes/geonode/less/_media-viewer.less | 21 ++++++++++++-- 7 files changed, 29 insertions(+), 35 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} (90%) 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 90% rename from geonode_mapstore_client/client/js/components/MainErrorView/MainErrorView.jsx rename to geonode_mapstore_client/client/js/components/MainEventView/MainEventView.jsx index 4b01b33f68..849bfb082a 100644 --- a/geonode_mapstore_client/client/js/components/MainErrorView/MainErrorView.jsx +++ b/geonode_mapstore_client/client/js/components/MainEventView/MainEventView.jsx @@ -10,7 +10,7 @@ import React from 'react'; import FaIcon from '@js/components/FaIcon'; import Message from '@mapstore/framework/components/I18N/Message'; -function MainErrorView({ +function MainEventView({ msgId, icon }) { @@ -28,9 +28,9 @@ function MainErrorView({ ); } -MainErrorView.defaultProps = { +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 adba01d9df..47d9a36da2 100644 --- a/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx +++ b/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx @@ -6,19 +6,19 @@ * LICENSE file in the root directory of this source tree. */ -import React, { Suspense, lazy, useEffect } from 'react'; +import React, { Suspense, lazy } from 'react'; 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() { return ( - + ); } @@ -49,27 +49,6 @@ const mediaDefaultProps = { }; const Media = ({ resource, ...props }) => { - useEffect(() => { - const image = document.querySelector('.ms-media img'); - // if an image is being viewed avoid stretching small images to fit viewer dimensions - if (image) { - let newimageWidth = 0; - let newimageHeight = 0; - let newimage = new Image(); - newimage.src = resource.href; - newimage.onload = function() { - newimageWidth = this.naturalWidth; - newimageHeight = this.naturalHeight; - const container = document.getElementById('ms-container'); - const containerStyles = window.getComputedStyle(container); - if (newimageWidth < parseInt(containerStyles.width, 10) && newimageHeight < parseInt(containerStyles.height, 10)) { - return image.classList.add('natural-image'); - } - return false; - }; - } - }, []); - const mediaTypes = getResourceTypesInfo(); const { @@ -92,7 +71,7 @@ const Media = ({ resource, ...props }) => { /> ); } - return (); + return (); }; export default Media; 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 && } - {configError && } + {configError && } ); } diff --git a/geonode_mapstore_client/client/package.json b/geonode_mapstore_client/client/package.json index 63b0cad0a2..65926532e4 100644 --- a/geonode_mapstore_client/client/package.json +++ b/geonode_mapstore_client/client/package.json @@ -26,7 +26,7 @@ "author": "GeoSolutions", "license": "BSD-2-Clause", "devDependencies": { - "@mapstore/project": "1.0.23", + "@mapstore/project": "1.0.24", "dotenv": "10.0.0", "jsdoc-to-markdown": "7.1.0" }, 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 b729373683..3c493d48c4 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; } .ms-media img.natural-image { From d0ef750b0589c4971b96088f740213c5247ab30d Mon Sep 17 00:00:00 2001 From: DavidQuartz Date: Thu, 30 Jun 2022 10:52:42 +0000 Subject: [PATCH 4/4] removed unused styles --- .../client/themes/geonode/less/_media-viewer.less | 10 ---------- 1 file changed, 10 deletions(-) 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 3c493d48c4..1d452e11a7 100644 --- a/geonode_mapstore_client/client/themes/geonode/less/_media-viewer.less +++ b/geonode_mapstore_client/client/themes/geonode/less/_media-viewer.less @@ -46,16 +46,6 @@ height: auto; } - .ms-media img.natural-image { - height: unset; - width: unset; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - - } - .pdf-loader { position: absolute; top: 0;