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 React, { useState } from "react";
|
||||
import React, { HTMLProps, ReactNode, useState } from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { getUrlHostname } from "@/SnortUtils";
|
||||
|
||||
interface ProxyImgProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
|
||||
type ProxyImgProps = HTMLProps<HTMLImageElement> & {
|
||||
size?: number;
|
||||
className?: string;
|
||||
promptToLoadDirectly?: boolean;
|
||||
missingImageElement?: ReactNode;
|
||||
}
|
||||
|
||||
export const ProxyImg = (props: ProxyImgProps) => {
|
||||
export const ProxyImg = ({ size, className, promptToLoadDirectly, missingImageElement, ...props }: ProxyImgProps) => {
|
||||
const { proxy } = useImgProxy();
|
||||
const [loadFailed, setLoadFailed] = useState(false);
|
||||
const [bypass, setBypass] = useState(CONFIG.bypassImgProxyError);
|
||||
|
||||
if (loadFailed) {
|
||||
if (bypass) {
|
||||
return <img className={props.className} {...props} width={props.size} height={props.size} />;
|
||||
}
|
||||
if (loadFailed && !bypass && (promptToLoadDirectly ?? true)) {
|
||||
return (
|
||||
<div
|
||||
className="note-invoice error"
|
||||
@ -34,17 +33,20 @@ export const ProxyImg = (props: ProxyImgProps) => {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const src = bypass ? props.src : proxy(props.src ?? "", size);
|
||||
if (!src || (loadFailed && !bypass)) return missingImageElement;
|
||||
return (
|
||||
<img
|
||||
{...props}
|
||||
src={props.src ? proxy(props.src, props.size) : ""}
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
className={props.className}
|
||||
src={src}
|
||||
width={size}
|
||||
height={size}
|
||||
className={className}
|
||||
onError={e => {
|
||||
if (props.onError) {
|
||||
props.onError(e);
|
||||
} else {
|
||||
console.error("Failed to proxy image ", props.src);
|
||||
setLoadFailed(true);
|
||||
}
|
||||
}}
|
||||
|
@ -6,6 +6,7 @@ import classNames from "classnames";
|
||||
|
||||
import { defaultAvatar, getDisplayName } from "@/SnortUtils";
|
||||
import { ProxyImg } from "@/Element/ProxyImg";
|
||||
import Icon from "@/Icons/Icon";
|
||||
|
||||
interface AvatarProps {
|
||||
pubkey: string;
|
||||
@ -37,10 +38,17 @@ const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons, class
|
||||
<div
|
||||
onClick={onClick}
|
||||
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()}
|
||||
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>}
|
||||
{imageOverlay && <div className="overlay">{imageOverlay}</div>}
|
||||
</div>
|
||||
|
@ -32,7 +32,7 @@ export function proxyImg(url: string, settings?: ImgProxySettings, resize?: numb
|
||||
return urlSafe(base64.encode(result));
|
||||
}
|
||||
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 urlBytes = te.encode(url);
|
||||
const urlEncoded = urlSafe(base64.encode(urlBytes));
|
||||
|
Loading…
Reference in New Issue
Block a user