IO-2086 Improved local media image display.

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx

@@ -1,5 +1,5 @@
 import { SyncOutlined, FileExcelFilled } from "@ant-design/icons";
-import { Button, Card, Space } from "antd";
+import { Alert, Button, Card, Space } from "antd";
 import React, { useEffect } from "react";
 import Gallery from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
@@ -58,7 +58,7 @@ export function JobsDocumentsLocalGallery({
       }
     }
   }, [job, invoice_number, getJobMedia, getBillMedia]);
-
+  let optimized;
   const jobMedia =
     allMedia && allMedia[job.id]
       ? allMedia[job.id].reduce(
@@ -68,7 +68,11 @@ export function JobsDocumentsLocalGallery({
               val.type.mime &&
               val.type.mime.startsWith("image")
             ) {
-              acc.images.push(val);
+              acc.images.push({
+                ...val,
+                ...(val.optimized && { src: val.optimized, fullsize: val.src }),
+              });
+              if (val.optimized) optimized = true;
             } else {
               acc.other.push({
                 ...val,
@@ -80,6 +84,11 @@ export function JobsDocumentsLocalGallery({
           { images: [], other: [] }
         )
       : { images: [], other: [] };
+  console.log(
+    "🚀  ~ file: jobs-documents-local-gallery.container.jsx  ~ line 63  ~ jobMedia",
+    jobMedia
+  );
+
   return (
     <div>
       <Space wrap>
@@ -119,9 +128,22 @@ export function JobsDocumentsLocalGallery({
           onSelectImage={(index, image) => {
             toggleMediaSelected({ jobid: job.id, filename: image.filename });
           }}
+          {...(optimized && {
+            customControls: [
+              <Alert
+                style={{ margin: "4px" }}
+                message={t("documents.labels.optimizedimage")}
+                type="success"
+              />,
+            ],
+          })}
           onClickImage={(props) => {
+            const media = allMedia[job.id].find(
+              (m) => m.optimized === props.target.src
+            );
+
             window.open(
-              props.target.src,
+              media ? media.src : props.target.src,
               "_blank",
               "toolbar=0,location=0,menubar=0"
             );