diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx index 84af0f5f4d..2992c8fb1b 100644 --- a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx +++ b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx @@ -32,7 +32,6 @@ import { getMapDisableConfirmationDialog, getMapEnableConfirmationDialog, } from "utils/ui"; -import { ExifData } from "./ExifData"; import { FileNameEditDialog } from "./FileNameEditDialog"; import InfoItem from "./InfoItem"; import MapBox from "./MapBox"; @@ -70,7 +69,8 @@ export const FileInfo: React.FC = ({ showCollectionChips, closePhotoViewer, }) => { - const appContext = useContext(AppContext); + const { mapEnabled, updateMapEnabled, setDialogBoxAttributesV2 } = + useContext(AppContext); const galleryContext = useContext(GalleryContext); const publicCollectionGalleryContext = useContext( PublicCollectionGalleryContext, @@ -103,6 +103,7 @@ export const FileInfo: React.FC = ({ if (!file) { return <>; } + const onCollectionChipClick = (collectionID) => { galleryContext.setActiveCollectionID(collectionID); galleryContext.setIsInSearchMode(false); @@ -110,17 +111,13 @@ export const FileInfo: React.FC = ({ }; const openEnableMapConfirmationDialog = () => - appContext.setDialogBoxAttributesV2( - getMapEnableConfirmationDialog(() => - appContext.updateMapEnabled(true), - ), + setDialogBoxAttributesV2( + getMapEnableConfirmationDialog(() => updateMapEnabled(true)), ); const openDisableMapConfirmationDialog = () => - appContext.setDialogBoxAttributesV2( - getMapDisableConfirmationDialog(() => - appContext.updateMapEnabled(false), - ), + setDialogBoxAttributesV2( + getMapDisableConfirmationDialog(() => updateMapEnabled(false)), ); return ( @@ -128,33 +125,32 @@ export const FileInfo: React.FC = ({ - {parsedExifData && parsedExifData["takenOnDevice"] && ( + + {parsedExif?.takenOnDevice && ( } - title={parsedExifData["takenOnDevice"]} - caption={ - - } + title={parsedExif?.takenOnDevice} + caption={} hideEditOption /> )} @@ -165,7 +161,7 @@ export const FileInfo: React.FC = ({ icon={} title={t("LOCATION")} caption={ - !appContext.mapEnabled || + !mapEnabled || publicCollectionGalleryContext.accessedThroughSharedURL ? ( = ({ {!publicCollectionGalleryContext.accessedThroughSharedURL && ( ( }, }); -function RenderFileName({ - parsedExifData, - shouldDisableEdits, - file, - scheduleUpdate, -}: { - parsedExifData: Record; +interface RenderFileNameProps { + parsedExif: ParsedFileInfoExif; shouldDisableEdits: boolean; file: EnteFile; scheduleUpdate: () => void; -}) { +} + +const RenderFileName: React.FC = ({ + parsedExif, + shouldDisableEdits, + file, + scheduleUpdate, +}) => { const [isInEditMode, setIsInEditMode] = useState(false); const openEditMode = () => setIsInEditMode(true); const closeEditMode = () => setIsInEditMode(false); @@ -398,7 +396,7 @@ function RenderFileName({ ) } title={getFileTitle(filename, extension)} - caption={getCaption(file, parsedExifData)} + caption={getCaption(file, parsedExif)} openEditor={openEditMode} hideEditOption={shouldDisableEdits || isInEditMode} /> @@ -411,7 +409,7 @@ function RenderFileName({ /> ); -} +}; const getFileTitle = (filename, extension) => { if (extension) { @@ -445,19 +443,17 @@ const getCaption = (file: EnteFile, parsedExifData) => { ); }; -function BasicDeviceCamera({ - parsedExifData, -}: { - parsedExifData: Record; -}) { +const BasicDeviceCamera: React.FC<{ parsedExif: ParsedFileInfoExif }> = ({ + parsedExif, +}) => { return ( - {parsedExifData["fNumber"]} - {parsedExifData["exposureTime"]} - {parsedExifData["ISO"]} + {parsedExif.fNumber} + {parsedExif.exposureTime} + {parsedExif.ISO} ); -} +}; function getOpenStreetMapLink(location: { latitude: number;