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

11
frontend/src/components/Channels.tsx
View file

@ -16,6 +16,7 @@ import { api, type ManagedChannel, type Tag } from "../lib/api";
import { formatEta } from "../lib/format";
import { notify } from "../lib/notifications";
import Tooltip from "./Tooltip";
import Avatar from "./Avatar";
export default function Channels({
canWrite,
@ -332,11 +333,11 @@ function ChannelRow({
</div>
</Tooltip>
{c.thumbnail_url ? (
<img src={c.thumbnail_url} alt="" className="w-10 h-10 rounded-full shrink-0" />
) : (
<div className="w-10 h-10 rounded-full bg-card shrink-0" />
)}
<Avatar
src={c.thumbnail_url}
fallback={c.title ?? ""}
className="w-10 h-10 rounded-full shrink-0"
/>
<div className="min-w-0 flex-1">
<button onClick={onView} className="text-sm font-semibold truncate hover:text-accent block max-w-full text-left">