forked from Kieran/snort
chore: tweak proxyimg for avatar
This commit is contained in:
parent
ea5e324793
commit
11824269f2
@ -1,22 +1,21 @@
|
|||||||
import useImgProxy from "@/Hooks/useImgProxy";
|
import useImgProxy from "@/Hooks/useImgProxy";
|
||||||
import React, { useState } from "react";
|
import React, { HTMLProps, ReactNode, useState } from "react";
|
||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
import { getUrlHostname } from "@/SnortUtils";
|
import { getUrlHostname } from "@/SnortUtils";
|
||||||
|
|
||||||
interface ProxyImgProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
|
type ProxyImgProps = HTMLProps<HTMLImageElement> & {
|
||||||
size?: number;
|
size?: number;
|
||||||
className?: string;
|
className?: string;
|
||||||
|
promptToLoadDirectly?: boolean;
|
||||||
|
missingImageElement?: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ProxyImg = (props: ProxyImgProps) => {
|
export const ProxyImg = ({ size, className, promptToLoadDirectly, missingImageElement, ...props }: ProxyImgProps) => {
|
||||||
const { proxy } = useImgProxy();
|
const { proxy } = useImgProxy();
|
||||||
const [loadFailed, setLoadFailed] = useState(false);
|
const [loadFailed, setLoadFailed] = useState(false);
|
||||||
const [bypass, setBypass] = useState(CONFIG.bypassImgProxyError);
|
const [bypass, setBypass] = useState(CONFIG.bypassImgProxyError);
|
||||||
|
|
||||||
if (loadFailed) {
|
if (loadFailed && !bypass && (promptToLoadDirectly ?? true)) {
|
||||||
if (bypass) {
|
|
||||||
return <img className={props.className} {...props} width={props.size} height={props.size} />;
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="note-invoice error"
|
className="note-invoice error"
|
||||||
@ -34,17 +33,20 @@ export const ProxyImg = (props: ProxyImgProps) => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
const src = bypass ? props.src : proxy(props.src ?? "", size);
|
||||||
|
if (!src || (loadFailed && !bypass)) return missingImageElement;
|
||||||
return (
|
return (
|
||||||
<img
|
<img
|
||||||
{...props}
|
{...props}
|
||||||
src={props.src ? proxy(props.src, props.size) : ""}
|
src={src}
|
||||||
width={props.size}
|
width={size}
|
||||||
height={props.size}
|
height={size}
|
||||||
className={props.className}
|
className={className}
|
||||||
onError={e => {
|
onError={e => {
|
||||||
if (props.onError) {
|
if (props.onError) {
|
||||||
props.onError(e);
|
props.onError(e);
|
||||||
} else {
|
} else {
|
||||||
|
console.error("Failed to proxy image ", props.src);
|
||||||
setLoadFailed(true);
|
setLoadFailed(true);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
@ -6,6 +6,7 @@ import classNames from "classnames";
|
|||||||
|
|
||||||
import { defaultAvatar, getDisplayName } from "@/SnortUtils";
|
import { defaultAvatar, getDisplayName } from "@/SnortUtils";
|
||||||
import { ProxyImg } from "@/Element/ProxyImg";
|
import { ProxyImg } from "@/Element/ProxyImg";
|
||||||
|
import Icon from "@/Icons/Icon";
|
||||||
|
|
||||||
interface AvatarProps {
|
interface AvatarProps {
|
||||||
pubkey: string;
|
pubkey: string;
|
||||||
@ -37,10 +38,17 @@ const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons, class
|
|||||||
<div
|
<div
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
style={style}
|
style={style}
|
||||||
className={classNames("avatar relative", { "with-overlay": imageOverlay }, className)}
|
className={classNames("avatar relative flex items-center justify-center", { "with-overlay": imageOverlay }, className)}
|
||||||
data-domain={domain?.toLowerCase()}
|
data-domain={domain?.toLowerCase()}
|
||||||
title={getDisplayName(user, "")}>
|
title={getDisplayName(user, "")}>
|
||||||
<ProxyImg className="rounded-full object-cover aspect-square" src={url} size={s} alt={getDisplayName(user, "")} />
|
<ProxyImg
|
||||||
|
className="rounded-full object-cover aspect-square"
|
||||||
|
src={url}
|
||||||
|
size={s}
|
||||||
|
alt={getDisplayName(user, "")}
|
||||||
|
promptToLoadDirectly={false}
|
||||||
|
missingImageElement={<Icon name="x" className="warning" />}
|
||||||
|
/>
|
||||||
{icons && <div className="icons">{icons}</div>}
|
{icons && <div className="icons">{icons}</div>}
|
||||||
{imageOverlay && <div className="overlay">{imageOverlay}</div>}
|
{imageOverlay && <div className="overlay">{imageOverlay}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
@ -32,7 +32,7 @@ export function proxyImg(url: string, settings?: ImgProxySettings, resize?: numb
|
|||||||
return urlSafe(base64.encode(result));
|
return urlSafe(base64.encode(result));
|
||||||
}
|
}
|
||||||
if (!settings) return url;
|
if (!settings) return url;
|
||||||
if (url.startsWith("data:") || url.startsWith("blob:")) return url;
|
if (url.startsWith("data:") || url.startsWith("blob:") || url.length == 0) return url;
|
||||||
const opt = resize ? `rs:fit:${resize}:${resize}/dpr:${window.devicePixelRatio}` : "";
|
const opt = resize ? `rs:fit:${resize}:${resize}/dpr:${window.devicePixelRatio}` : "";
|
||||||
const urlBytes = te.encode(url);
|
const urlBytes = te.encode(url);
|
||||||
const urlEncoded = urlSafe(base64.encode(urlBytes));
|
const urlEncoded = urlSafe(base64.encode(urlBytes));
|
||||||
|
Loading…
Reference in New Issue
Block a user