Kieran/snort
5
14
Fork 14
Code Issues 36 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

chore: tweak proxyimg for avatar

Browse Source
This commit is contained in:
Kieran 2023-11-29 10:30:12 +00:00
parent ea5e324793
commit 11824269f2
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
3 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/app/src/Element/ProxyImg.tsx
View File

@ -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);
} }
}} }}

12
packages/app/src/Element/User/Avatar.tsx
View File

@ -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>

2
packages/app/src/Hooks/useImgProxy.ts
View File

@ -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));