From 8544f5e109fa220ec66fd7c6999f4e268fccd317 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 19 Feb 2025 09:30:19 +0530 Subject: [PATCH] Fixes --- web/packages/gallery/components/FileInfo.tsx | 113 +++++++++---------- 1 file changed, 53 insertions(+), 60 deletions(-) diff --git a/web/packages/gallery/components/FileInfo.tsx b/web/packages/gallery/components/FileInfo.tsx index cbfcce934a..96d5b332b2 100644 --- a/web/packages/gallery/components/FileInfo.tsx +++ b/web/packages/gallery/components/FileInfo.tsx @@ -1,6 +1,5 @@ /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */ /* eslint-disable @typescript-eslint/ban-ts-comment */ -/* eslint-disable @typescript-eslint/no-unnecessary-condition */ /* eslint-disable @typescript-eslint/no-unused-expressions */ /* TODO: Audit this file Plan of action: @@ -176,38 +175,33 @@ export const FileInfo: React.FC = ({ const { mapEnabled } = useSettingsSnapshot(); - const [exifInfo, setExifInfo] = useState(); - const { show: showRawExif, props: rawExifVisibilityProps } = - useModalVisibility(); const [annotatedFaces, setAnnotatedFaces] = useState([]); - const location = useMemo(() => { - if (file) { - const location = fileLocation(file); - if (location) return location; - } - return exif?.parsed?.location; - }, [file, exif]); + const { show: showRawExif, props: rawExifVisibilityProps } = + useModalVisibility(); + + const location = useMemo( + // Prefer the location in the EnteFile, then fall back to Exif. + () => (file ? fileLocation(file) : undefined) ?? exif?.parsed?.location, + [file, exif], + ); + + const annotatedExif = useMemo(() => annotateExif(exif), [exif]); useEffect(() => { if (!file) return; let didCancel = false; - void (async () => { - const result = await getAnnotatedFacesForFile(file); - !didCancel && setAnnotatedFaces(result); - })(); + void getAnnotatedFacesForFile(file).then( + (faces) => !didCancel && setAnnotatedFaces(faces), + ); return () => { didCancel = true; }; }, [file]); - useEffect(() => { - setExifInfo(parseExifInfo(exif)); - }, [exif]); - const openEnableMapConfirmationDialog = () => showMiniDialog( confirmEnableMapsDialogAttributes(() => updateMapEnabled(true)), @@ -238,15 +232,20 @@ export const FileInfo: React.FC = ({ }} /> - + - {exifInfo?.takenOnDevice && ( + {annotatedExif?.takenOnDevice && ( } - title={exifInfo?.takenOnDevice} - caption={ - - } + title={annotatedExif.takenOnDevice} + caption={} /> )} @@ -337,7 +336,7 @@ export const FileInfo: React.FC = ({ collectionID, ), ) - ?.map((collectionID) => ( + .map((collectionID) => ( @@ -367,7 +366,7 @@ export const FileInfo: React.FC = ({ * Some immediate fields of interest, in the form that we want to display on the * info panel for a file. */ -type ExifInfo = Required & { +type AnnotatedExif = Required & { resolution?: string; megaPixels?: string; takenOnDevice?: string; @@ -376,13 +375,13 @@ type ExifInfo = Required & { iso?: string; }; -const parseExifInfo = ( +const annotateExif = ( fileInfoExif: FileInfoExif | undefined, -): ExifInfo | undefined => { +): AnnotatedExif | undefined => { if (!fileInfoExif || !fileInfoExif.tags || !fileInfoExif.parsed) return undefined; - const info: ExifInfo = { ...fileInfoExif }; + const info: AnnotatedExif = { ...fileInfoExif }; const { width, height } = fileInfoExif.parsed; if (width && height) { @@ -407,6 +406,7 @@ const parseExifInfo = ( if (exif.ISOSpeedRatings) info.iso = `ISO${tagNumericValue(exif.ISOSpeedRatings)}`; } + return info; }; @@ -553,27 +553,23 @@ const Caption: React.FC = ({ scheduleUpdate, refreshPhotoswipe, }) => { - const [caption, setCaption] = useState( - file?.pubMagicMetadata?.data.caption, - ); + const [caption, setCaption] = useState(file.pubMagicMetadata?.data.caption); const [loading, setLoading] = useState(false); const saveEdits = async (newCaption: string) => { try { - if (file) { - if (caption === newCaption) { - return; - } - setCaption(newCaption); - - const updatedFile = await changeCaption(file, newCaption); - updateExistingFilePubMetadata(file, updatedFile); - // @ts-ignore - file.title = file.pubMagicMetadata.data.caption; - refreshPhotoswipe(); - scheduleUpdate(); + if (caption === newCaption) { + return; } + setCaption(newCaption); + + const updatedFile = await changeCaption(file, newCaption); + updateExistingFilePubMetadata(file, updatedFile); + // @ts-ignore + file.title = file.pubMagicMetadata.data.caption; + refreshPhotoswipe(); + scheduleUpdate(); } catch (e) { log.error("failed to update caption", e); } @@ -684,7 +680,7 @@ const CreationTime: React.FC = ({ const saveEdits = async (pickedTime: ParsedMetadataDate) => { try { setLoading(true); - if (isInEditMode && file) { + if (isInEditMode) { // [Note: Don't modify offsetTime when editing date via picker] // // Use the updated date time (both in its canonical dateTime @@ -750,7 +746,7 @@ const CreationTime: React.FC = ({ type FileNameProps = Pick & { file: EnteFile; - exifInfo: ExifInfo | undefined; + exifInfo: AnnotatedExif | undefined; }; const FileName: React.FC = ({ @@ -772,7 +768,6 @@ const FileName: React.FC = ({ }, [file]); const saveEdits = async (newFilename: string) => { - if (!file) return; if (fileName === newFilename) { closeEditMode(); return; @@ -811,7 +806,7 @@ const FileName: React.FC = ({ ); }; -const getCaption = (file: EnteFile, exifInfo: ExifInfo | undefined) => { +const getCaption = (file: EnteFile, exifInfo: AnnotatedExif | undefined) => { const megaPixels = exifInfo?.megaPixels; const resolution = exifInfo?.resolution; const fileSize = file.info?.fileSize; @@ -883,17 +878,15 @@ const FileNameEditDialog: React.FC = ({ ); }; -const BasicDeviceCamera: React.FC<{ parsedExif: ExifInfo }> = ({ - parsedExif, -}) => { - return ( - - {parsedExif.fNumber} - {parsedExif.exposureTime} - {parsedExif.iso} - - ); -}; +const BasicDeviceCamera: React.FC<{ annotatedExif: AnnotatedExif }> = ({ + annotatedExif, +}) => ( + + {annotatedExif.fNumber} + {annotatedExif.exposureTime} + {annotatedExif.iso} + +); const openStreetMapLink = ({ latitude, longitude }: Location) => `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=15/${latitude}/${longitude}`;