IO-2086 Improved local media image display.

bodyshop_translations.babel

@@ -13704,6 +13704,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>optimizedimage</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>reassign_limitexceeded</name>
                                         <definition_loaded>false</definition_loaded>

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"
             );

client/src/redux/media/media.sagas.js

@@ -39,6 +39,11 @@ export function* getJobMedia({ payload: jobid }) {
                 thumbnail: normalizeUrl(
                   `${localmediaserverhttp}/${d.thumbnail}`
                 ),
+                ...(d.optimized && {
+                  optimized: normalizeUrl(
+                    `${localmediaserverhttp}/${d.optimized}`
+                  ),
+                }),
                 isSelected: false,
                 key: idx,
               };
@@ -50,6 +55,7 @@ export function* getJobMedia({ payload: jobid }) {
                 thumbnail: normalizeUrl(
                   `${localmediaserverhttp}/${d.thumbnail}`
                 ),
+
                 isSelected: false,
                 key: idx,
               };

client/src/translations/en_us/common.json

@@ -849,6 +849,7 @@
 				"doctype": "Document Type",
 				"newjobid": "Assign to Job",
 				"openinexplorer": "Open in Explorer",
+				"optimizedimage": "The below image is optimized. Click on the picture below to open in a new window and view it full size, or open it in explorer.",
 				"reassign_limitexceeded": "Reassigning all selected documents will exceed the job storage limit for your shop.  ",
 				"reassign_limitexceeded_title": "Unable to reassign document(s)",
 				"storageexceeded": "You've exceeded your storage limit for this job. Please remove documents, or increase your storage plan.",

client/src/translations/es/common.json

@@ -849,6 +849,7 @@
 				"doctype": "",
 				"newjobid": "",
 				"openinexplorer": "",
+				"optimizedimage": "",
 				"reassign_limitexceeded": "",
 				"reassign_limitexceeded_title": "",
 				"storageexceeded": "",

client/src/translations/fr/common.json

@@ -849,6 +849,7 @@
 				"doctype": "",
 				"newjobid": "",
 				"openinexplorer": "",
+				"optimizedimage": "",
 				"reassign_limitexceeded": "",
 				"reassign_limitexceeded_title": "",
 				"storageexceeded": "",