#671 - Fix on metadata update

This commit is contained in:
Elio Struyf
2024-04-04 16:57:40 +02:00
parent 35a6c8bada
commit 81265e3c49
2 changed files with 17 additions and 10 deletions
@@ -67,23 +67,23 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
fields?.forEach((field) => {
if (field.name === "title") {
items.push(
<DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonTitle)} details={media.metadata.title || ""} />
<DetailsItem key="title" title={l10n.t(LocalizationKey.dashboardMediaCommonTitle)} details={media.metadata.title || ""} />
);
} else if (field.name === "caption") {
if (isImageFile) {
items.push(
<DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonCaption)} details={media.metadata.caption || ""} />
<DetailsItem key="caption" title={l10n.t(LocalizationKey.dashboardMediaCommonCaption)} details={media.metadata.caption || ""} />
);
}
} else if (field.name === "alt") {
if (isImageFile) {
items.push(
<DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonAlt)} details={media.metadata.alt || ""} />
<DetailsItem key="alt" title={l10n.t(LocalizationKey.dashboardMediaCommonAlt)} details={media.metadata.alt || ""} />
);
}
} else {
items.push(
<DetailsItem title={field.title || field.name} details={(media.metadata[field.name] || "") as string} />
<DetailsItem key={field.name} title={field.title || field.name} details={(media.metadata[field.name] || "") as string} />
);
}
});
@@ -11,16 +11,24 @@ export interface IMediaItemPanelProps {
}
export const MediaItemPanel: React.FunctionComponent<IMediaItemPanelProps> = ({ allMedia }: React.PropsWithChildren<IMediaItemPanelProps>) => {
const [crntPath, setCrntPath] = useState<string>('');
const [media, setMedia] = useState<MediaInfo | undefined>(undefined);
const [showForm, setShowForm] = useState(false);
const [showDetails, setShowDetails] = useState(false);
const [selectedItemAction, setSelectedItemAction] = useRecoilState(SelectedItemActionAtom);
const { mediaFolder, mediaSize, mediaDimensions, isImage, isVideo } = useMediaInfo(media);
const onDismiss = () => {
setShowDetails(false);
setShowForm(false);
setMedia(undefined);
};
useEffect(() => {
if (selectedItemAction && selectedItemAction.path) {
const mediaFile = allMedia.find((m) => m.fsPath === selectedItemAction.path);
setMedia(mediaFile);
setCrntPath(selectedItemAction.path);
if (selectedItemAction.action === 'edit') {
setShowForm(true);
@@ -31,8 +39,11 @@ export const MediaItemPanel: React.FunctionComponent<IMediaItemPanelProps> = ({
}
setSelectedItemAction(undefined);
} else if (crntPath) {
const mediaFile = allMedia.find((m) => m.fsPath === crntPath);
setMedia(mediaFile);
}
}, [allMedia, selectedItemAction]);
}, [allMedia, selectedItemAction, crntPath]);
if (showDetails && media) {
return (
@@ -47,11 +58,7 @@ export const MediaItemPanel: React.FunctionComponent<IMediaItemPanelProps> = ({
isVideoFile={isVideo}
onEdit={() => setShowForm(true)}
onEditClose={() => setShowForm(false)}
onDismiss={() => {
setShowDetails(false);
setShowForm(false);
setMedia(undefined);
}}
onDismiss={onDismiss}
/>
);
}