From 299657bf45fa4b90f933f27511b05dfd16082e81 Mon Sep 17 00:00:00 2001
From: himeshr <himeshl@samanvayfoundation.org>
Date: Mon, 6 May 2024 14:17:17 +0530
Subject: [PATCH] #1133 | Modify display of errored media fetch message in
 summary and edit page

---
 src/adminApp/service/MediaService.js         |  2 +-
 src/dataEntryApp/components/MediaUploader.js |  4 +--
 src/dataEntryApp/components/Observations.js  | 29 +++++++++++++++-----
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/adminApp/service/MediaService.js b/src/adminApp/service/MediaService.js
index 53967ed41..c78333b79 100644
--- a/src/adminApp/service/MediaService.js
+++ b/src/adminApp/service/MediaService.js
@@ -5,7 +5,7 @@ class MediaService {
     try {
       return await http.get(http.withParams(`/media/signedUrl`, { url: url })).then(res => res.data);
     } catch (exception) {
-      return "Unable to fetch media. Value: " + url;
+      return "Unable to fetch media";
     }
   }
 }
diff --git a/src/dataEntryApp/components/MediaUploader.js b/src/dataEntryApp/components/MediaUploader.js
index a3fc5b62f..0dc18777d 100644
--- a/src/dataEntryApp/components/MediaUploader.js
+++ b/src/dataEntryApp/components/MediaUploader.js
@@ -156,7 +156,7 @@ function uploadMediaAndUpdateObservationValue(
   });
 }
 
-const MissingSignedMediaMessage = "Unable to fetch media. Value: ";
+const MissingSignedMediaMessage = "Unable to fetch media";
 export const MediaUploader = ({ label, obsValue, mediaType, update, formElement }) => {
   const classes = useStyles();
   const Icon = iconMap[mediaType];
@@ -231,7 +231,7 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement
             {preview[fileName]}
           </p>
         ) : (
-          mediaPreviewMap(preview[fileName], MissingSignedMediaMessage + fileName)[mediaType]
+          mediaPreviewMap(preview[fileName], MissingSignedMediaMessage)[mediaType]
         )}
         <Button style={{ float: "left", color: "red" }} onClick={() => onDelete(fileName)}>
           <CloseIcon />
diff --git a/src/dataEntryApp/components/Observations.js b/src/dataEntryApp/components/Observations.js
index 95affd065..09321b7e6 100644
--- a/src/dataEntryApp/components/Observations.js
+++ b/src/dataEntryApp/components/Observations.js
@@ -60,7 +60,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 class MediaData {
-  static MissingSignedMediaMessage = "Unable to fetch media. Value: ";
+  static MissingSignedMediaMessage = "Unable to fetch media.";
 
   constructor(url, type, altTag, unsignedUrl) {
     this.url = url;
@@ -188,11 +188,11 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
     );
   };
 
-  const mediaPreviewMap = (signedMediaUrl, unsignedMediaUrl) => ({
+  const mediaPreviewMap = signedMediaUrl => ({
     [Concept.dataType.Image]: (
       <img
         src={signedMediaUrl}
-        alt={MediaData.MissingSignedMediaMessage + unsignedMediaUrl}
+        alt={MediaData.MissingSignedMediaMessage}
         align={"center"}
         width={200}
         height={200}
@@ -212,7 +212,7 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
           event.stopPropagation();
         }}
       >
-        <source src={unsignedMediaUrl} type="video/mp4" />
+        <source src={signedMediaUrl} type="video/mp4" />
         Sorry, your browser doesn't support embedded videos.
       </video>
     )
@@ -257,15 +257,30 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
           <Grid container direction="row" alignItems="center" spacing={1} onClick={() => updateOpen(observationValue)}>
             {mediaUrls.map((unsignedMediaUrl, index) => {
               const mediaData = _.find(mediaDataList, x => x.unsignedUrl === unsignedMediaUrl);
-              const couldntSignMessage = MediaData.MissingSignedMediaMessage + unsignedMediaUrl;
+              const couldntSignMessage = MediaData.MissingSignedMediaMessage;
               const signedMediaUrl = _.get(mediaData, "url");
               return (
                 <Grid item key={index}>
                   {_.isNil(signedMediaUrl) ? (
-                    couldntSignMessage
+                    <Box display={"flex"} flexDirection={"row"} alignItems={"flex-start"} className={classes.boxStyle}>
+                      <p
+                        style={{
+                          color: "orangered",
+                          margin: "5px",
+                          padding: "5px",
+                          border: "1px solid #999",
+                          width: "200px",
+                          height: "200px",
+                          textAlign: "center",
+                          overflow: "scroll"
+                        }}
+                      >
+                        {couldntSignMessage}
+                      </p>
+                    </Box>
                   ) : (
                     <Box display={"flex"} flexDirection={"row"} alignItems={"flex-start"} className={classes.boxStyle}>
-                      {mediaPreviewMap(signedMediaUrl, unsignedMediaUrl)[concept.datatype]}
+                      {mediaPreviewMap(signedMediaUrl)[concept.datatype]}
                     </Box>
                   )}
                 </Grid>