diff --git a/package.json b/package.json index 14cc2d7a6..0207928d2 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "react-error-boundary": "^3.1.3", "react-i18next": "^11.3.3", "react-idle-timer": "^5.7.2", - "react-image-video-lightbox": "^2.0.2", + "react-image-video-lightbox": "3.0.1", "react-markdown": "^4.3.1", "react-moment": "^0.9.7", "react-multiselect-checkboxes": "^0.1.1", diff --git a/src/dataEntryApp/components/MediaObservations.js b/src/dataEntryApp/components/MediaObservations.js index 852ba0f3e..b28d7b04d 100644 --- a/src/dataEntryApp/components/MediaObservations.js +++ b/src/dataEntryApp/components/MediaObservations.js @@ -1,7 +1,12 @@ import React from "react"; import ReactImageVideoLightbox from "react-image-video-lightbox"; -const MediaObservations = ({ mediaDataList, currentMediaItemIndex, onClose }) => { +const MediaObservations = ({ + mediaDataList, + currentMediaItemIndex, + onClose, + showResourceCount +}) => { React.useEffect(() => { const LightboxContainer = document.querySelector("div.mediaObservationContainer"); LightboxContainer.firstChild.style.zIndex = 1; @@ -12,7 +17,7 @@ const MediaObservations = ({ mediaDataList, currentMediaItemIndex, onClose }) => onClose()} /> diff --git a/src/dataEntryApp/components/MediaUploader.js b/src/dataEntryApp/components/MediaUploader.js index 8ea94e213..9869fb603 100644 --- a/src/dataEntryApp/components/MediaUploader.js +++ b/src/dataEntryApp/components/MediaUploader.js @@ -1,5 +1,5 @@ import React, { Fragment, useEffect, useState } from "react"; -import { get, isEmpty, includes, lowerCase, isArrayLikeObject } from "lodash"; +import { get, isEmpty, includes, lowerCase, isArrayLikeObject, omit } from "lodash"; import { Box, Button, Grid, makeStyles, Typography } from "@material-ui/core"; import FormControl from "@material-ui/core/FormControl"; import http from "../../common/utils/httpClient"; @@ -167,10 +167,9 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement if (localObsValue === fileName) setLocalObsValue(); //Remove previous value } preview[fileName] && URL.revokeObjectURL(preview[fileName]); - setPreview(oldPreview => ({ - ...oldPreview, - [fileName]: null - })); + setPreview(oldPreview => { + return omit(oldPreview, fileName); + }); }; const mediaPreviewMap = fileToPreview => ({ diff --git a/src/dataEntryApp/components/Observations.js b/src/dataEntryApp/components/Observations.js index 670ec7f64..7cd1a222e 100644 --- a/src/dataEntryApp/components/Observations.js +++ b/src/dataEntryApp/components/Observations.js @@ -11,7 +11,7 @@ import { subjectService } from "../services/SubjectService"; import { useTranslation } from "react-i18next"; import ErrorIcon from "@material-ui/icons/Error"; import PropTypes from "prop-types"; -import { filter, find, get, includes, isEmpty, isNil, lowerCase, map } from "lodash"; +import { find, get, includes, isEmpty, isNil, lowerCase, map } from "lodash"; import clsx from "clsx"; import Colors from "dataEntryApp/Colors"; import { Link } from "react-router-dom"; @@ -130,7 +130,7 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight const classes = useStyles(); const [showMedia, setShowMedia] = React.useState(false); - const [currentMediaItemIndex, setCurrentMediaItemIndex] = React.useState(0); + const [currentMediaItem, setCurrentMediaItem] = React.useState(null); const [mediaDataList, setMediaDataList] = React.useState([]); if (isNil(observations)) { @@ -191,11 +191,6 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight ); }; - const openMediaInNewTab = mediaUrl => { - const mediaData = mediaDataList.find(x => !_.isNil(x.url) && x.url.startsWith(mediaUrl)); - window.open(mediaData.url); - }; - const mediaPreviewMap = unsignedMediaUrl => ({ [Concept.dataType.Image]: ( { - setCurrentMediaItemIndex( - filter(mediaDataList, mediaData => mediaData.type === "photo").findIndex( - img => img.url === unsignedMediaUrl - ) - ); + setCurrentMediaItem(find(mediaDataList, img => img.url === unsignedMediaUrl)); setShowMedia(true); }; @@ -481,8 +472,9 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight {showMedia && ( mediaData.type === "photo")} - currentMediaItemIndex={currentMediaItemIndex} + mediaDataList={[currentMediaItem]} + currentMediaItemIndex={0} + showResourceCount={false} onClose={() => setShowMedia(false)} /> )} diff --git a/yarn.lock b/yarn.lock index 3bd4a468f..6cb8aedd6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2091,7 +2091,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0-beta.42", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.6": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.6": version "7.12.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e" integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg== @@ -2462,39 +2462,6 @@ "@types/yargs" "^15.0.0" chalk "^4.0.0" -"@material-ui/core@1.3.1": - version "1.3.1" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-1.3.1.tgz#8b4e6db9ed4536e8ccbea0eeff3da0d524e6af2c" - integrity sha512-h5pVkHgYrKExTdll4Y2Kmvkd5Hr4MxqEQLhRxzGTaXJ8RjOuRd+plfRk5r5ZauAdrIkKEsNcEt75VlEFX9aSGw== - dependencies: - "@babel/runtime" "^7.0.0-beta.42" - "@types/jss" "^9.5.3" - "@types/react-transition-group" "^2.0.8" - brcast "^3.0.1" - classnames "^2.2.5" - csstype "^2.5.2" - debounce "^1.1.0" - deepmerge "^2.0.1" - dom-helpers "^3.2.1" - hoist-non-react-statics "^2.5.0" - jss "^9.3.3" - jss-camel-case "^6.0.0" - jss-default-unit "^8.0.2" - jss-global "^3.0.0" - jss-nested "^6.0.1" - jss-props-sort "^6.0.0" - jss-vendor-prefixer "^7.0.0" - keycode "^2.1.9" - normalize-scroll-left "^0.1.2" - prop-types "^15.6.0" - react-event-listener "^0.6.0" - react-jss "^8.1.0" - react-popper "^0.10.0" - react-transition-group "^2.2.1" - recompose "^0.27.0" - scroll "^2.0.3" - warning "^4.0.1" - "@material-ui/core@4.12.4": version "4.12.4" resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73" @@ -2546,13 +2513,6 @@ recompose "^0.28.0" warning "^4.0.1" -"@material-ui/icons@1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-1.1.0.tgz#4d025df7b0ba6ace8d6710079ed76013a4d26595" - integrity sha512-Z4Xo/EYXuVqCIOjLw7AeBJPtJZsgy9dMAdqu6uYr7gxAefFA8L/QukLv/XE5ByxKYvRhzFG/AjA2OKXwKqfXBQ== - dependencies: - recompose "^0.26.0 || ^0.27.0" - "@material-ui/icons@4.11.3": version "4.11.3" resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.3.tgz#b0693709f9b161ce9ccde276a770d968484ecff1" @@ -8642,7 +8602,7 @@ fbjs-css-vars@^1.0.0: resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8" integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ== -fbjs@^0.8.1, fbjs@^0.8.16: +fbjs@^0.8.1: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90= @@ -9463,14 +9423,6 @@ global@^4.3.2, global@^4.4.0: min-document "^2.19.0" process "^0.11.10" -global@~4.3.0: - version "4.3.2" - resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f" - integrity sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8= - dependencies: - min-document "^2.19.0" - process "~0.5.1" - globals@^11.1.0, globals@^11.7.0: version "11.12.0" resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" @@ -15114,11 +15066,6 @@ process@^0.11.10: resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI= -process@~0.5.1: - version "0.5.2" - resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf" - integrity sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8= - progress@^2.0.0: version "2.0.3" resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8" @@ -15419,13 +15366,6 @@ raf@3.4.1, raf@^3.1.0, raf@^3.3.0, raf@^3.4.0: dependencies: performance-now "^2.1.0" -rafl@~1.2.1: - version "1.2.2" - resolved "https://registry.yarnpkg.com/rafl/-/rafl-1.2.2.tgz#fe930f758211020d47e38815f5196a8be4150740" - integrity sha1-/pMPdYIRAg1H44gV9Rlqi+QVB0A= - dependencies: - global "~4.3.0" - ramda@^0.21.0: version "0.21.0" resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35" @@ -15714,16 +15654,6 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" -react-dom@16.4.1: - version "16.4.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.1.tgz#7f8b0223b3a5fbe205116c56deb85de32685dad6" - integrity sha512-1Gin+wghF/7gl4Cqcvr1DxFX2Osz7ugxSwl6gBqCMpdrxHjIFUS7GYxrFftZ9Ln44FHw0JxCFD9YtZsrbR5/4A== - dependencies: - fbjs "^0.8.16" - loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.0" - react-dom@^16.8.3: version "16.13.1" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f" @@ -15791,7 +15721,7 @@ react-error-overlay@^6.0.7: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de" integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw== -react-event-listener@^0.6.0, react-event-listener@^0.6.2: +react-event-listener@^0.6.2: version "0.6.6" resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.6.6.tgz#758f7b991cad9086dd39fd29fad72127e1d8962a" integrity sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw== @@ -15845,15 +15775,10 @@ react-idle-timer@^5.7.2: resolved "https://registry.yarnpkg.com/react-idle-timer/-/react-idle-timer-5.7.2.tgz#f506db28a86645dd1b87987116501703e512142b" integrity sha512-+BaPfc7XEUU5JFkwZCx6fO1bLVK+RBlFH+iY4X34urvIzZiZINP6v2orePx3E6pAztJGE7t4DzvL7if2SL/0GQ== -react-image-video-lightbox@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/react-image-video-lightbox/-/react-image-video-lightbox-2.0.2.tgz#4d1ca090b0c49274388f766140baeb0bd2b5fa85" - integrity sha512-JywstWyMfSt6w3M3/Cn1JUt9pyXg4AXnxEYM/xmdh5ehE21kxFNNRHOYYhkk7SwDSQ6yLKXCZrCCCrNWdclwDw== - dependencies: - "@material-ui/core" "1.3.1" - "@material-ui/icons" "1.1.0" - react "16.4.1" - react-dom "16.4.1" +react-image-video-lightbox@3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/react-image-video-lightbox/-/react-image-video-lightbox-3.0.1.tgz#3728ceec2065268ef3638211cd41e53a451ca2f6" + integrity sha512-M1scr8HLtYqUaBD/C2FVNFPW9s3DMLG7CRusbfUW2GE/HJjQGIoj4dfYsHxMskmjV60yNgMsHMovXnRdGuekhQ== react-input-autosize@^2.2.1, react-input-autosize@^2.2.2: version "2.2.2" @@ -15971,7 +15896,7 @@ react-popper-tooltip@^3.1.1: "@popperjs/core" "^2.5.4" react-popper "^2.2.4" -react-popper@^0.10.0, react-popper@^0.10.4: +react-popper@^0.10.4: version "0.10.4" resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.10.4.tgz#af2a415ea22291edd504678d7afda8a6ee3295aa" integrity sha1-rypBXqIike3VBGeNev2opu4ylao= @@ -16273,16 +16198,6 @@ react-window@^1.8.5: "@babel/runtime" "^7.0.0" memoize-one ">=3.1.1 <6" -react@16.4.1: - version "16.4.1" - resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32" - integrity sha512-3GEs0giKp6E0Oh/Y9ZC60CmYgUPnp7voH9fbjWsvXtYFb4EWtgQub0ADSq0sJR0BbHc4FThLLtzlcFaFXIorwg== - dependencies: - fbjs "^0.8.16" - loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.0" - react@^16.8.3: version "16.13.1" resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" @@ -16416,7 +16331,7 @@ rechoir@^0.6.2: dependencies: resolve "^1.1.6" -"recompose@^0.26.0 || ^0.27.0", recompose@^0.27.0: +"recompose@^0.26.0 || ^0.27.0": version "0.27.1" resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.27.1.tgz#1a49e931f183634516633bbb4f4edbfd3f38a7ba" integrity sha512-p7xsyi/rfNjHfdP7vPU02uSFa+Q1eHhjKrvO+3+kRP4Ortj+MxEmpmd+UQtBGM2D2iNAjzNI5rCyBKp9Ob5McA== @@ -17162,13 +17077,6 @@ schema-utils@^3.0.0: ajv "^6.12.5" ajv-keywords "^3.5.2" -scroll@^2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/scroll/-/scroll-2.0.3.tgz#0951b785544205fd17753bc3d294738ba16fc2ab" - integrity sha512-3ncZzf8gUW739h3LeS68nSssO60O+GGjT3SxzgofQmT8PIoyHzebql9HHPJopZX8iT6TKOdwaWFMqL6LzUN3DQ== - dependencies: - rafl "~1.2.1" - section-iterator@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/section-iterator/-/section-iterator-2.0.0.tgz#bf444d7afeeb94ad43c39ad2fb26151627ccba2a"