ThreadNet-Web/docs/media-handling.md
sorB 3da363517f
Some checks failed
Docker / Docker Buildx (push) Has been cancelled
Build Debian package / Build package (release) Has been cancelled
Build and Deploy / prepare (release) Has been cancelled
Deploy release / Deploy to Cloudflare Pages (release) Has been cancelled
Build and Deploy / Trigger Pro pipeline (release) Has been cancelled
Build and Deploy / Windows arm64 (release) Has been cancelled
Build and Deploy / Windows x64 (release) Has been cancelled
Build and Deploy / macOS (release) Has been cancelled
Build and Deploy / Linux amd64 (sqlcipher static) (release) Has been cancelled
Build and Deploy / Linux arm64 (sqlcipher static) (release) Has been cancelled
Build and Deploy / ${{ needs.prepare.outputs.deploy == 'true' && 'Deploy' || 'Deploy (dry-run)' }} (release) Has been cancelled
Build and Deploy / Deploy builds to ESS (release) Has been cancelled
feat: show call participants in room list (Discord-style)
2026-05-10 14:25:35 +02:00

1.2 KiB

Media handling

Surely media should be as easy as just putting a URL into an img and calling it good, right? Not quite. Matrix uses something called a Matrix Content URI (better known as MXC URI) to identify content, which is then converted to a regular HTTPS URL on the homeserver. However, sometimes that URL can change depending on deployment considerations.

The react-sdk features a customisation endpoint for media handling where all conversions from MXC URI to HTTPS URL happen. This is to ensure that those obscure deployments can route all their media to the right place.

For development, there are currently two functions available: mediaFromMxc and mediaFromContent. The mediaFromMxc function should be self-explanatory. mediaFromContent takes an event content as a parameter and will automatically parse out the source media and thumbnail. Both functions return a Media object with a number of options on it, such as getting various common HTTPS URLs for the media.

It is extremely important that all media calls are put through this customisation endpoint. So much so it's a lint rule to avoid accidental use of the wrong functions.