forked from Kieran/snort
fix: image meta
This commit is contained in:
parent
84bda4e33d
commit
30b21cfe91
@ -41,7 +41,7 @@ const ImageElement = ({ url, meta, onMediaClick }: ImageElementProps) => {
|
||||
style.height = `${Math.min(document.body.clientHeight * 0.8, meta.height * scale)}px`;
|
||||
}
|
||||
return style;
|
||||
}, [imageRef.current, meta]);
|
||||
}, [imageRef?.current, meta]);
|
||||
|
||||
return (
|
||||
<div
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { forwardRef, HTMLProps, ReactNode, useEffect, useMemo, useState } from "react";
|
||||
import { forwardRef, HTMLProps, ReactNode, useEffect, useState } from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
|
||||
import useImgProxy from "@/Hooks/useImgProxy";
|
||||
@ -13,19 +13,20 @@ type ProxyImgProps = HTMLProps<HTMLImageElement> & {
|
||||
};
|
||||
|
||||
export const ProxyImg = forwardRef<HTMLImageElement, ProxyImgProps>(function ProxyImg(
|
||||
{ size, className, promptToLoadDirectly, missingImageElement, sha256, ...props }: ProxyImgProps,
|
||||
{ src, size, className, promptToLoadDirectly, missingImageElement, sha256, ...props }: ProxyImgProps,
|
||||
ref,
|
||||
) {
|
||||
const { proxy } = useImgProxy();
|
||||
const [loadFailed, setLoadFailed] = useState(false);
|
||||
const [bypass, setBypass] = useState(CONFIG.media.bypassImgProxyError);
|
||||
const proxiedSrc = useMemo(() => proxy(props.src ?? "", size, sha256), [props.src, size, sha256]);
|
||||
const [src, setSrc] = useState(proxiedSrc);
|
||||
const [imgSrc, setImgSrc] = useState<string>();
|
||||
|
||||
useEffect(() => {
|
||||
setLoadFailed(false);
|
||||
setSrc(proxy(props.src, size, sha256));
|
||||
}, [props.src, size, sha256]);
|
||||
if (src) {
|
||||
setImgSrc(proxy(src, size, sha256));
|
||||
}
|
||||
}, [src, size, sha256]);
|
||||
|
||||
if (loadFailed && !bypass && (promptToLoadDirectly ?? true)) {
|
||||
return (
|
||||
@ -39,29 +40,31 @@ export const ProxyImg = forwardRef<HTMLImageElement, ProxyImgProps>(function Pro
|
||||
defaultMessage="Failed to proxy image from {host}, click here to load directly"
|
||||
id="65BmHb"
|
||||
values={{
|
||||
host: getUrlHostname(props.src),
|
||||
host: getUrlHostname(src),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const handleImageError = e => {
|
||||
const handleImageError = (e: React.SyntheticEvent<HTMLImageElement>) => {
|
||||
console.warn("ImgLoadOnError", src, e);
|
||||
if (props.onError) {
|
||||
props.onError(e);
|
||||
} else {
|
||||
console.error("Failed to load image: ", props.src, e);
|
||||
if (bypass && src === proxiedSrc) {
|
||||
setSrc(props.src ?? "");
|
||||
if (bypass) {
|
||||
setImgSrc(src ?? "");
|
||||
} else {
|
||||
setLoadFailed(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (!src || loadFailed) return missingImageElement ?? <div>Image not available</div>;
|
||||
if (!imgSrc || loadFailed) return missingImageElement ?? <div>
|
||||
<FormattedMessage defaultMessage="Image not available" id="Y7FG5M" />
|
||||
</div>;
|
||||
|
||||
return (
|
||||
<img {...props} ref={ref} src={src} width={size} height={size} className={className} onError={handleImageError} />
|
||||
<img {...props} ref={ref} src={imgSrc} width={size} height={size} className={className} onError={handleImageError} />
|
||||
);
|
||||
});
|
||||
|
@ -138,7 +138,7 @@ export default function Text({
|
||||
);
|
||||
|
||||
const RevealMediaInstance = ({ content, data }: { content: string; data?: object }) => {
|
||||
const imeta = data as IMeta;
|
||||
const imeta = data as IMeta | undefined;
|
||||
return (
|
||||
<RevealMedia
|
||||
key={content}
|
||||
@ -196,7 +196,7 @@ export default function Text({
|
||||
}
|
||||
}
|
||||
if (galleryImages.length === 1) {
|
||||
chunks.push(<RevealMediaInstance content={galleryImages[0].content} data={galleryImages[0]} />);
|
||||
chunks.push(<RevealMediaInstance content={galleryImages[0].content} data={galleryImages[0].data} />);
|
||||
} else {
|
||||
// We build a grid layout to render the grouped images
|
||||
const imagesWithGridConfig = galleryImages.map((gi, index) => {
|
||||
@ -243,7 +243,7 @@ export default function Text({
|
||||
if (disableMedia ?? false) {
|
||||
chunks.push(<DisableMedia content={element.content} />);
|
||||
} else {
|
||||
chunks.push(<RevealMediaInstance content={element.content} />);
|
||||
chunks.push(<RevealMediaInstance content={element.content} data={element.data} />);
|
||||
}
|
||||
}
|
||||
if (element.type === "invoice") {
|
||||
|
@ -462,7 +462,8 @@ export function kvToObject<T>(o: string, sep?: string) {
|
||||
|
||||
export function defaultAvatar(input?: string) {
|
||||
if (isOffline()) return Nostrich;
|
||||
return `https://robohash.v0l.io/${input ?? "missing"}.png${isHalloween() ? "?set=set2" : ""}`;
|
||||
const key = (input?.length ?? 0) === 0 ? "missing" : input;
|
||||
return `https://robohash.v0l.io/${key}.png${isHalloween() ? "?set=set2" : ""}`;
|
||||
}
|
||||
|
||||
export function isFormElement(target: HTMLElement): boolean {
|
||||
|
Loading…
Reference in New Issue
Block a user