Files

Max Litruv Boonzaayer e058165830 feat: upgrade toolchain and soften sync recovery after network blips

Bump Vite 8, matrix-js-sdk, and related deps; fix immer/vanilla-extract imports for new majors. Replace blocking sync error dialog with background recovery on wake/offline, and disable Vite auto-open in dev. Add feature handoff documentation index.

2026-07-09 01:55:09 +10:00

2.6 KiB

Raw Blame History

Media & URL preview — handoff

Summary

Handles file uploads, encrypted media, image/video viewers, thumbnails, and URL preview cards (Open Graph, Giphy, etc.). Upload progress shown via upload cards in the composer.

User-facing behavior

Attach files via + button, paste, or drag-drop
Image/video lightbox viewers
Link URLs expand to preview cards in timeline
Encrypted attachments decrypted client-side
Upload progress and cancel

Architecture

UploadCardRenderer / upload state atoms
  → encryptFile (utils/matrix) for encrypted rooms
  → matrix uploadContent
url-preview/ components
  → fetch OG metadata, Giphy embed
  → gated by embed-filters
image-viewer/, video-viewer/ — fullscreen media

Key files

Path	Role
`cinny/src/app/components/upload-card/UploadCardRenderer.tsx`	Upload UI
`cinny/src/app/state/upload.ts`	Upload state
`cinny/src/app/state/room/roomInputDrafts.ts`	`TUploadItem`
`cinny/src/app/utils/matrix.ts`	`encryptFile`, upload helpers
`cinny/src/app/components/url-preview/`	Link embed cards
`cinny/src/app/components/image-viewer/`	Image lightbox
`cinny/src/app/components/video-viewer/`	Video player
`cinny/src/app/hooks/useMediaAuthentication.ts`	Authenticated media URLs
`cinny/src/app/hooks/useAuthenticatedMediaUrl.ts`	MXC → HTTP with auth
`cinny/src/app/components/message/content/`	Image/video/thumbnail content

Data model

Upload queue in Jotai atom families (per room). Media itself on homeserver as MXC.

Dependencies

Homeserver media repository config (useMediaConfig)
matrix-js-sdk encryption APIs

Integration points

room-timeline: attachment messages + URL embeds
embed-filters: suppress previews
editor-and-composer: upload from composer
avatar-metadata: separate pipeline for profile images

Testing

Manual

Upload image in encrypted room; verify decrypt on receive.
Post URL; preview card appears.
Block URL pattern via embed filter; no card.
Open image in viewer; zoom/navigate.

Automated

None

Known issues & gotchas

Media authentication required on some homeservers (useMediaAuthentication)
Large file memory on mobile
Giphy embed has separate CSS module

Future work

Resumable uploads
Blurhash placeholders

Add your extra things here

ThumbnailContent.tsx, VideoContent.tsx in message/content/
Android share materializes files into upload draft (see android handoff)

2.6 KiB Raw Blame History