diff --git a/public/info_icon.png b/public/info_icon.png new file mode 100644 index 000000000..7d0740a8f Binary files /dev/null and b/public/info_icon.png differ diff --git a/src/components/PhotoSwipe/PhotoSwipe.tsx b/src/components/PhotoSwipe/PhotoSwipe.tsx index 2b70acc1b..287d28cca 100644 --- a/src/components/PhotoSwipe/PhotoSwipe.tsx +++ b/src/components/PhotoSwipe/PhotoSwipe.tsx @@ -10,7 +10,14 @@ import { import { File } from 'services/fileService'; import constants from 'utils/strings/constants'; import DownloadManger from 'services/downloadManager'; +import EXIF from 'exif-js'; +import Modal from 'react-bootstrap/Modal'; +import Button from 'react-bootstrap/Button'; +import Form from 'react-bootstrap/Form'; +import styled from 'styled-components'; import events from './events'; +import { formatDateTime } from 'utils/file'; +import { FormCheck } from 'react-bootstrap'; interface Iprops { isOpen: boolean; @@ -24,12 +31,71 @@ interface Iprops { loadingBar: any; } +const LegendContainer = styled.div` + display: flex; + justify-content: space-between; +`; + +const Legend = styled.span` + font-size: 20px; + color: #ddd; + display: inline; +`; + +const Pre = styled.pre` + color: #aaa; + padding: 7px 15px; +`; + +const renderInfoItem = (label: string, value: string | JSX.Element) => ( + <> +
{exif.raw}); + + const renderSelectedValues = () => (<> + {exif?.Make && exif?.Model && renderInfoItem(constants.DEVICE, `${exif.Make} ${exif.Model}`)} + {exif?.ImageWidth && exif?.ImageHeight && renderInfoItem(constants.IMAGE_SIZE, `${exif.ImageWidth} x ${exif.ImageHeight}`)} + {exif?.Flash && renderInfoItem(constants.FLASH, exif.Flash)} + {exif?.FocalLength && renderInfoItem(constants.FOCAL_LENGTH, exif.FocalLength.toString())} + {exif?.ApertureValue && renderInfoItem(constants.APERTURE, exif.ApertureValue.toString())} + {exif?.ISOSpeedRatings && renderInfoItem(constants.ISO, exif.ISOSpeedRatings.toString())} + >); + + return (<> +