From 19095304eff47cae02bf3972146ac7e3e1bb5b75 Mon Sep 17 00:00:00 2001
From: himeshr <himeshl@samanvayfoundation.org>
Date: Thu, 4 Apr 2024 10:31:38 +0530
Subject: [PATCH] #1133 | Show MediaOverlay only for images, allow video
 download

---
 src/dataEntryApp/components/MediaUploader.js |  1 +
 src/dataEntryApp/components/Observations.js  | 25 +++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/dataEntryApp/components/MediaUploader.js b/src/dataEntryApp/components/MediaUploader.js
index 8bc6deac6..5fc876737 100644
--- a/src/dataEntryApp/components/MediaUploader.js
+++ b/src/dataEntryApp/components/MediaUploader.js
@@ -226,6 +226,7 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement
         <ReactImageVideoLightbox
           data={data}
           startIndex={startIndex}
+          showResourceCount={true}
           onCloseCallback={() => setOpenImage()}
         />
       </div>
diff --git a/src/dataEntryApp/components/Observations.js b/src/dataEntryApp/components/Observations.js
index 4af413701..670ec7f64 100644
--- a/src/dataEntryApp/components/Observations.js
+++ b/src/dataEntryApp/components/Observations.js
@@ -11,10 +11,11 @@ import { subjectService } from "../services/SubjectService";
 import { useTranslation } from "react-i18next";
 import ErrorIcon from "@material-ui/icons/Error";
 import PropTypes from "prop-types";
-import { find, get, includes, isEmpty, isNil, lowerCase, map } from "lodash";
+import { filter, find, get, includes, isEmpty, isNil, lowerCase, map } from "lodash";
 import clsx from "clsx";
 import Colors from "dataEntryApp/Colors";
 import { Link } from "react-router-dom";
+import MediaObservations from "./MediaObservations";
 import http from "../../common/utils/httpClient";
 import { AudioPlayer } from "./AudioPlayer";
 import VerifiedUserIcon from "@material-ui/icons/VerifiedUser";
@@ -128,6 +129,8 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
   const { t } = useTranslation();
   const classes = useStyles();
 
+  const [showMedia, setShowMedia] = React.useState(false);
+  const [currentMediaItemIndex, setCurrentMediaItemIndex] = React.useState(0);
   const [mediaDataList, setMediaDataList] = React.useState([]);
 
   if (isNil(observations)) {
@@ -201,12 +204,12 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
         height={200}
         onClick={event => {
           event.preventDefault();
-          openMediaInNewTab(unsignedMediaUrl);
+          showMediaOverlay(unsignedMediaUrl);
         }}
       />
     ),
     [Concept.dataType.Video]: (
-      <video preload="auto" controls width={200} height={200} controlsList="nodownload">
+      <video preload="auto" controls width={200} height={200}>
         <source src={unsignedMediaUrl} type="video/mp4" />
         Sorry, your browser doesn't support embedded videos.
       </video>
@@ -306,6 +309,15 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
     }
   };
 
+  const showMediaOverlay = unsignedMediaUrl => {
+    setCurrentMediaItemIndex(
+      filter(mediaDataList, mediaData => mediaData.type === "photo").findIndex(
+        img => img.url === unsignedMediaUrl
+      )
+    );
+    setShowMedia(true);
+  };
+
   const StyledTableRow = styled(TableRow)(({ theme }) => ({
     "&:nth-of-type(odd)": {
       backgroundColor: theme.palette.action.hover
@@ -467,6 +479,13 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
       >
         <TableBody>{rows}</TableBody>
       </Table>
+      {showMedia && (
+        <MediaObservations
+          mediaDataList={filter(mediaDataList, mediaData => mediaData.type === "photo")}
+          currentMediaItemIndex={currentMediaItemIndex}
+          onClose={() => setShowMedia(false)}
+        />
+      )}
     </div>
   );
 };