peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): robust avatars — no-referrer + graceful fallback

Browse source 
Channel/account avatars come from Google's image CDNs (yt3.ggpht.com,
lh3.googleusercontent.com). On a feed page dozens load at once; the CDN
rate-limits the referrer-bearing burst (429), so a random subset rendered the
browser's broken-image icon (the URLs themselves are valid — verified 200).

Add a shared <Avatar> that sets referrerPolicy="no-referrer" (which the CDNs
serve without throttling) and falls back to a neutral initial placeholder on
error instead of the broken-image icon. Use it for video-card, player, channel
manager, header and settings avatars.
This commit is contained in:
npeter83 2026-06-12 18:01:43 +02:00
parent c5124841b7
commit 93bd805089
6 changed files with 77 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/components/SettingsPanel.tsx
View file

@ -4,6 +4,7 @@ import { Bell, Check, History, Monitor, Pause, Play, RefreshCw, User, UserPlus,
import { SCHEMES, type Scheme, type ThemePrefs } from "../lib/theme";
import { api, type Invite, type Me } from "../lib/api";
import { formatEta, quotaActionLabel } from "../lib/format";
import Avatar from "./Avatar";
import {
configureNotifications,
getNotifSettings,
@ -468,13 +469,11 @@ function Account({ me }: { me: Me }) {
<>
<Section title="Account">
<div className="flex items-center gap-3 mb-3">
{me.avatar_url ? (
<img src={me.avatar_url} alt="" className="w-12 h-12 rounded-full" />
) : (
<div className="w-12 h-12 rounded-full bg-card grid place-items-center font-semibold">
{(me.display_name?.[0] ?? me.email[0] ?? "?").toUpperCase()}
</div>
)}
<Avatar
src={me.avatar_url}
fallback={me.display_name ?? me.email}
className="w-12 h-12 rounded-full"
/>
<div className="min-w-0">
<div className="font-semibold truncate">{me.display_name ?? me.email.split("@")[0]}</div>
<div className="text-xs text-muted truncate">{me.email}</div>