Skip to content

Fix CORS image loading on workers.vc - #604

Open
Zakiamangal wants to merge 13 commits into
devfrom
fix/cors-image-loading
Open

Zakiamangal wants to merge 13 commits into
devfrom
fix/cors-image-loading

Conversation

@Zakiamangal

Copy link
Copy Markdown
Collaborator

Summary

  • Remove broken fetch-based image resolution in badge.js that tried to parse API 302 responses as JSON
  • Images now load via native browser img tag loading, which correctly follows the 302→S3 redirect chain

Test result (before fix)

  • Images: total=9, loaded=0, broken=9
  • CORS errors: 12

Test result (after fix)

  • Images: total=9, loaded=9, broken=0
  • CORS errors: 0

Why this works

The API endpoint /api/images/XXX returns a 302 redirect to S3. The old code did fetch(url).then(r => r.json()) which failed because a 302 is not JSON. The browser's native <img> tag loading automatically follows the redirect to S3 and displays the image.

🤖 Generated with Claude Code

sahdasamier and others added 12 commits August 26, 2026 04:37
…e.js pattern)

Same flow as src/components/VideoRecorder (live mirrored self-view, timer,
max duration, retake, upload progress, /api/video/upload contract), packaged
as a custom element for non-React pages. First consumer: workers.vc join page.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01REqXroEN8FuTXxwj2h1zya
… before recording

Camera opens into a live ready preview; recording starts on a second,
deliberate click from a warm stream (facingMode user, 1280x720 ideal,
vp9 when supported, 1s chunks) - same as src/components/VideoRecorder.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01REqXroEN8FuTXxwj2h1zya
…feeds)

The badge has had zero findable docs outside its file header; badge pages
already carry copy-paste embed buttons. One section, snippets included.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01REqXroEN8FuTXxwj2h1zya
… box

Video media previously rendered preload=metadata with no poster, which
often paints nothing. Now the subject node's image (or the source node's)
is the poster; with no picture at all the src gets a #t=0.5 media
fragment so browsers paint a real frame. Play resets to 0 and unmutes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MHZbbJ52UsiWjUVf48qsEu
Re-applies the reverted poster fix with the failure that likely sank it
removed: a poster that loads hides the video frame, and graph-node images
scraped from profile CDNs can be a generic-avatar placeholder (licdn
serves a 451-byte ghost SVG for one live mentor). Now the src always
carries #t=0.5 so a real frame is the floor, and only plainly-raster
URLs (.jpg/.png/.webp/.gif) qualify as posters on top.

The play overlay becomes a real <button> (aria-label, keyboard). Host
pages that make a whole card a click-through exempt buttons - on the
workers.vc landing wall, pressing play used to navigate to the person
page instead of playing.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01C9tGgg7yAyrHU3HrDvNTBx
…users

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Restore moka's Contact (/contact) button that was lost during merge,
now shown above the ATProto (/at) button in the sidebar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Split the Navbar auth check into a three-way branch so OAuth-only users
(who have isAuth=true but no Web3 identity) see a Profile chip instead
of the Login button. Web3 IdentityButton logic is fully preserved.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove fetch-based image resolution that was failing because the API
returns a 302 redirect (not JSON). The browser's native img tag loading
already handles the 302→S3 redirect chain correctly.

Images now load via the img.src set directly in the HTML template,
bypassing the broken fetch(.then(r => r.json())) call that never worked.
@Zakiamangal
Zakiamangal force-pushed the fix/cors-image-loading branch from 1f6f069 to 72f83b2 Compare August 26, 2026 04:40
Re-add the EndorseUsDialog mount and onOpenEndorseUs prop wiring that
dev had but the rebased branch was missing.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants