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`;
|
style.height = `${Math.min(document.body.clientHeight * 0.8, meta.height * scale)}px`;
|
||||||
}
|
}
|
||||||
return style;
|
return style;
|
||||||
}, [imageRef.current, meta]);
|
}, [imageRef?.current, meta]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<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 { FormattedMessage } from "react-intl";
|
||||||
|
|
||||||
import useImgProxy from "@/Hooks/useImgProxy";
|
import useImgProxy from "@/Hooks/useImgProxy";
|
||||||
@ -13,19 +13,20 @@ type ProxyImgProps = HTMLProps<HTMLImageElement> & {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const ProxyImg = forwardRef<HTMLImageElement, ProxyImgProps>(function ProxyImg(
|
export const ProxyImg = forwardRef<HTMLImageElement, ProxyImgProps>(function ProxyImg(
|
||||||
{ size, className, promptToLoadDirectly, missingImageElement, sha256, ...props }: ProxyImgProps,
|
{ src, size, className, promptToLoadDirectly, missingImageElement, sha256, ...props }: ProxyImgProps,
|
||||||
ref,
|
ref,
|
||||||
) {
|
) {
|
||||||
const { proxy } = useImgProxy();
|
const { proxy } = useImgProxy();
|
||||||
const [loadFailed, setLoadFailed] = useState(false);
|
const [loadFailed, setLoadFailed] = useState(false);
|
||||||
const [bypass, setBypass] = useState(CONFIG.media.bypassImgProxyError);
|
const [bypass, setBypass] = useState(CONFIG.media.bypassImgProxyError);
|
||||||
const proxiedSrc = useMemo(() => proxy(props.src ?? "", size, sha256), [props.src, size, sha256]);
|
const [imgSrc, setImgSrc] = useState<string>();
|
||||||
const [src, setSrc] = useState(proxiedSrc);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setLoadFailed(false);
|
setLoadFailed(false);
|
||||||
setSrc(proxy(props.src, size, sha256));
|
if (src) {
|
||||||
}, [props.src, size, sha256]);
|
setImgSrc(proxy(src, size, sha256));
|
||||||
|
}
|
||||||
|
}, [src, size, sha256]);
|
||||||
|
|
||||||
if (loadFailed && !bypass && (promptToLoadDirectly ?? true)) {
|
if (loadFailed && !bypass && (promptToLoadDirectly ?? true)) {
|
||||||
return (
|
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"
|
defaultMessage="Failed to proxy image from {host}, click here to load directly"
|
||||||
id="65BmHb"
|
id="65BmHb"
|
||||||
values={{
|
values={{
|
||||||
host: getUrlHostname(props.src),
|
host: getUrlHostname(src),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleImageError = e => {
|
const handleImageError = (e: React.SyntheticEvent<HTMLImageElement>) => {
|
||||||
|
console.warn("ImgLoadOnError", src, e);
|
||||||
if (props.onError) {
|
if (props.onError) {
|
||||||
props.onError(e);
|
props.onError(e);
|
||||||
} else {
|
} else {
|
||||||
console.error("Failed to load image: ", props.src, e);
|
if (bypass) {
|
||||||
if (bypass && src === proxiedSrc) {
|
setImgSrc(src ?? "");
|
||||||
setSrc(props.src ?? "");
|
|
||||||
} else {
|
} else {
|
||||||
setLoadFailed(true);
|
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 (
|
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 RevealMediaInstance = ({ content, data }: { content: string; data?: object }) => {
|
||||||
const imeta = data as IMeta;
|
const imeta = data as IMeta | undefined;
|
||||||
return (
|
return (
|
||||||
<RevealMedia
|
<RevealMedia
|
||||||
key={content}
|
key={content}
|
||||||
@ -196,7 +196,7 @@ export default function Text({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (galleryImages.length === 1) {
|
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 {
|
} else {
|
||||||
// We build a grid layout to render the grouped images
|
// We build a grid layout to render the grouped images
|
||||||
const imagesWithGridConfig = galleryImages.map((gi, index) => {
|
const imagesWithGridConfig = galleryImages.map((gi, index) => {
|
||||||
@ -243,7 +243,7 @@ export default function Text({
|
|||||||
if (disableMedia ?? false) {
|
if (disableMedia ?? false) {
|
||||||
chunks.push(<DisableMedia content={element.content} />);
|
chunks.push(<DisableMedia content={element.content} />);
|
||||||
} else {
|
} else {
|
||||||
chunks.push(<RevealMediaInstance content={element.content} />);
|
chunks.push(<RevealMediaInstance content={element.content} data={element.data} />);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (element.type === "invoice") {
|
if (element.type === "invoice") {
|
||||||
|
@ -462,7 +462,8 @@ export function kvToObject<T>(o: string, sep?: string) {
|
|||||||
|
|
||||||
export function defaultAvatar(input?: string) {
|
export function defaultAvatar(input?: string) {
|
||||||
if (isOffline()) return Nostrich;
|
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 {
|
export function isFormElement(target: HTMLElement): boolean {
|
||||||
|
Loading…
Reference in New Issue
Block a user