preview image middlware

src/Widgets/MapsWidget.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Icon } from '@plone/volto/components';
 import { Button, Modal, Grid, Label, Input, Message } from 'semantic-ui-react';
@@ -7,6 +7,7 @@ import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
 import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
 import { MapsSchema } from '@eeacms/volto-embed/Blocks/Maps/schema';
+import { getBaseUrl } from '@plone/volto/helpers';
 
 import clearSVG from '@plone/volto/icons/clear.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -19,6 +20,17 @@ const messages = defineMessages({
   },
 });
 
+function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
 function MapEditorModal({ id, onClose, onChange, ...rest }) {
   const intl = useIntl();
   const [value, setValue] = useState(rest.value || {});
@@ -189,14 +201,37 @@ function MapEditorModal({ id, onClose, onChange, ...rest }) {
 }
 
 export default function MapsWidget(props) {
-  const { id, title, description, error, value } = props;
+  const { id, title, description, error, value, onChange } = props;
   const [mapEditor, setMapEditor] = useState(false);
 
-  function onChange(value) {
-    props.onChange(props.id, value);
+  function onChangeMap(value) {
+    onChange(id, value);
     setMapEditor(false);
   }
 
+  useEffect(() => {
+    if (value && value.url && value.preview_url_loaded != value.url) {
+      fetch(
+        `${getBaseUrl(
+          '',
+        )}/cors-proxy/https://screenshot.eea.europa.eu/api/v1/retrieve_image_for_url?url=${encodeURIComponent(
+          value.url,
+        )}&w=1920&h=1000&waitfor=4000`,
+      )
+        .then((e) => e.blob())
+        .then((myBlob) => {
+          blobToBase64(myBlob).then((base64String) => {
+            onChange(id, {
+              ...value,
+              preview: base64String,
+              preview_url_loaded: value.url,
+            });
+          });
+        })
+        .catch(() => {});
+    }
+  }, [value, onChange]);
+
   return (
     <FormFieldWrapper {...props} columns={1}>
       <div className="wrapper">
@@ -218,7 +253,7 @@ export default function MapsWidget(props) {
         <MapEditorModal
           id={id}
           value={value || {}}
-          onChange={onChange}
+          onChange={onChangeMap}
           onClose={() => setMapEditor(false)}
         />
       )}

src/index.js

@@ -2,6 +2,7 @@ import installBlocks from './Blocks';
 import MapView from './Views/MapView';
 import MapsViewWidget from './Widgets/MapsViewWidget';
 import MapsWidget from './Widgets/MapsWidget';
+import { preview_image } from './middlewares/preview_image';
 export {
   PrivacyProtection,
   addPrivacyProtectionToSchema,
@@ -16,5 +17,9 @@ export default function applyConfig(config) {
     ...config.settings.allowed_cors_destinations,
     'screenshot.eea.europa.eu',
   ];
+  config.settings.storeExtenders = [
+    ...(config.settings.storeExtenders || []),
+    preview_image,
+  ];
   return [installBlocks].reduce((acc, apply) => apply(acc), config);
 }

src/middlewares/preview_image.js

@@ -0,0 +1,91 @@
+import {
+  CREATE_CONTENT,
+  UPDATE_CONTENT,
+} from '@plone/volto/constants/ActionTypes';
+
+export const preview_image = (middlewares) => [
+  (store) => (next) => async (action) => {
+    if (![CREATE_CONTENT, UPDATE_CONTENT].includes(action.type)) {
+      return next(action);
+    }
+    const state = store.getState();
+    const contentData = state.content.data;
+    const lastPreviewImage = Object.keys(action?.request?.data).includes(
+      'preview_image',
+    )
+      ? action?.request?.data.preview_image
+      : contentData?.preview_image;
+    const type = action?.request?.data?.['@type'] || contentData['@type'];
+
+    if (
+      !contentData ||
+      type !== 'map_interactive' ||
+      contentData.preview_image_saved ||
+      !action?.request?.data?.maps?.preview
+    ) {
+      return next(action);
+    }
+
+    if (
+      lastPreviewImage &&
+      lastPreviewImage !== 'preview_image_generated_map_interactive.png'
+    ) {
+      if (action?.request?.data?.maps) {
+        const mapVisualizationData = {
+          ...action.request.data.maps,
+        };
+        if (
+          mapVisualizationData.preview &&
+          mapVisualizationData.preview_url_loaded
+        )
+          delete mapVisualizationData.preview;
+        delete mapVisualizationData.preview_url_loaded;
+
+        return next({
+          ...action,
+          request: {
+            ...action.request,
+            data: {
+              ...action.request.data,
+
+              maps: mapVisualizationData,
+            },
+          },
+        });
+      } else return next(action);
+    }
+
+    try {
+      const previewImage = {
+        preview_image: {
+          data: action.request.data.maps.preview.split(',')[1],
+          encoding: 'base64',
+          'content-type': 'image/png',
+          filename: 'preview_image_generated_map_interactive.png',
+        },
+        preview_image_saved: true,
+      };
+
+      const mapVisualizationData = {
+        ...action.request.data.maps,
+      };
+      delete mapVisualizationData.preview;
+      delete mapVisualizationData.preview_url_loaded;
+
+      return next({
+        ...action,
+        request: {
+          ...action.request,
+          data: {
+            ...action.request.data,
+            ...previewImage,
+            maps: mapVisualizationData,
+          },
+        },
+      });
+    } catch (error) {
+      return next(action);
+    }
+  },
+  ...middlewares,
+];