[deep dive] Full-screen image/video viewer UI/UX audit #164
Closed
opened 2026-09-17 23:06:35 -04:00 by jared
·
5 comments
No Branch/Tag Specified
lotus
fix/call-theme-before-ready
fix/dfn-worklet-file
test/lotus-feature-e2e
fix/own-presence-display
fix/sso-uia-desktop
seasonal/lunar
seasonal/newyear
seasonal/christmas
chore/build-hygiene
fix/status-save-speed
chore/typing-hygiene
feat/settings-search
feat/settings-pages
chore/security-deps
feat/settings-quick-wins
feat/data-export
feat/stale-sessions
feat/landscape-call
feat/expected-devices
feat/oauth-detect
chore/ec-0.28
chore/sdk-44
feat/key-upload-recovery
feat/keychain-session
feat/vimeo-events
feat/widget-always-on-screen
feat/call-summary-details
feat/widget-popout
fix/ios-long-press
chore/any-cleanup
chore/soundboard-mic-mix
fix/phone-call-controls
fix/a11y-axe-findings
fix/copy-and-reddit-context
feat/about-build-info
fix/schedule-24h
fix/connecting-strip
fix/ui-polish-batch
fix/outbox-multi-tab
fix/widget-share-hardening
fix/side-panel-width
fix/topic-markdown
fix/acl-ip-literals-default
feat/decorations-host
fix/call-disconnected-bar
fix/linux-update-verify
perf/lazy-settings
fix/dnd-busy-presence
fix/threads-stay-unread
fix/private-note-wording
fix/audio-output-frame-ids
fix/pip-minimise
fix/translate-unavailable-copy
fix/status-expiry-account-data
ci/reseed-bundle-budget
fix/close-no-tray
fix/soundboard-not-permitted
fix/denoise-state-notice
docs/features-catchup
fix/desktop-settings-section
fix/dev-denoise-theme
fix/pwa-manifest
fix/translate-feedback
fix/consent-retry-snooze
fix/strip-metadata-packs
fix/preview-deceptive-links
fix/embed-ogurl-provider
fix/settingtile-nesting
fix/shortcuts-dialog
fix/forward-encryption-warning
fix/compress-alpha-anim
fix/screenshare-double-toast
fix/sw-reply-checks
fix/pip-default-position
fix/inapp-toast-permission
fix/mute-timers-account-data
fix/policy-dedupe
fix/nudge-dismissed-strip
fix/kuma-plain-text
fix/rejoin-dm
fix/search-edit-dupes
fix/room-filter-empty
fix/emoji-board-escape
fix/call-failed-retry
fix/share-links-lotus
fix/poll-vote-local-echo
fix/scheduled-from-server
fix/delayed-restart-dedupe
fix/decline-references-notification
fix/stall-watchdog
fix/filtered-timeline-double-count
fix/call-listener-limit
fix/voice-room-no-room-ping
fix/reactions-collapse-loop
fix/group-call-permission
fix/dialog-enter-closes
fix/delivery-status-live
fix/room-upgrade-lotus-state
fix/quiet-hours-tick
fix/logout-wipe-leftovers
fix/inter-font-name
fix/retention-floor-grace
fix/firefox-persist-hang
fix/phantom-ring-after-reload
fix/local-room-names-rest
fix/missed-call-voice-rooms
fix/animated-bg-compositor
fix/link-safety-bypasses
fix/e2e-register-403
fix/local-room-names-everywhere
fix/collapsible-messages
fix/logout-volume-residue
fix/enter-newline-device-local
fix/dnd-restore-status
fix/presence-sticky
fix/location-confirm
fix/reminders-stick
fix/voice-full-distinct-users
fix/presence-pagehide-status
fix/gif-card-aspect
deps/npm-audit-fixes
security-nudge
linux-package-updates
audit-brace-expansion
server-status-banner
desktop-keychain-mirror
desktop-call-origin
clock-skew-lag
offline-outbox
desktop-lotus-links
poll-ui
calls-open-in-browser
screenshare-prompt
call-origin-split
update-packages
sw-fix
read-me-update
image-path-changes
dm-calls
fix-2469
renovate/element-hq-element-call-embedded-0.x
renovate/npm-i18next-http-backend-vulnerability
renovate/npm-vite-vulnerability
dev
docs-update
more-theme
fix-257
imporve-thread-reply
revert-2402-improve-menu-congestion
mxidColor-toggle
update-sw-main-msg
v4.11.1
v4.10.5
v4.10.4
v4.10.3
v4.10.2
v4.10.1
v4.10.0
v4.9.1
v4.9.0
v4.8.1
v4.8.0
v4.7.1
v4.7.0
v4.6.0
v4.5.1
v4.5.0
v4.4.0
v4.3.2
v4.3.0
v4.2.3
v4.2.2
v4.2.1
v4.2.0
v4.1.0
v4.0.3
v4.0.0
v3.2.0
v3.1.0
v3.0.0
v2.2.6
v2.2.5
v2.2.4
v2.2.3
v2.2.2
v2.2.1
v2.2.0
v2.1.3
v2.1.2
v2.1.1
v2.1.0
v2.0.4
v2.0.3
v2.0.2
v2.0.1
v2.0.0
v1.8.2
v1.8.1
v1.8.0
v1.7.0
v1.6.1
v1.6.0
v1.5.1
v1.5.0
v1.4.0
v1.3.2
v1.3.1
v1.3.0
v1.2.1
v1.2.0
v1.1.0
v1.0.0
Labels
Clear labels
a11y
area: appearance
area: auth-session
area: build-ci
area: calls
area: desktop
area: media
area: messaging
area: mobile
area: moderation
area: navigation
area: notifications
area: settings
area: threads
bug
dependencies
docs
duplicate
enhancement
help wanted
invalid
needs-human-review
performance
planning
priority: critical
priority: high
priority: low
priority: medium
qa
question
research
security
tech-debt
ux
wontfix
Accessibility: keyboard, screen reader, contrast, motion
Client area: appearance
Client area: auth-session
Client area: build-ci
Client area: calls
Client area: desktop
Client area: media
Client area: messaging
Client area: mobile
Client area: moderation
Client area: navigation
Client area: notifications
Client area: settings
Client area: threads
Something is not working
Third-party package versions and advisories
README / LOTUS_* docs wrong or missing
This issue or pull request already exists
New feature
Need some help
Something is wrong
Re-render storms, leaks, heavy work on hot paths
Data loss, security hole, or crash on a main path
Broken feature or serious usability problem
Minor issue or polish
Wrong behaviour in an edge case or notable degradation
Manual QA: shipped, needs a human in a real environment
More information is needed
XSS, unsafe URLs, data leaks, auth/session
Code health, dead code, fragile patterns
Usability or visual inconsistency
This won't be fixed
Milestone
No items
No Milestone
Features 2026-Q4
Projects
Clear projects
No projects
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: LotusGuild/cinny#164
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
The viewer already steps ← → between the room's images. Audit it end-to-end on desktop and phone: keyboard (arrows, Esc, +/−, 0), swipe/pinch on touch, zoom persistence between items, video controls vs. image controls, captions display, download/copy/open-in-new-tab, "jump to message", loading states + blurhash, very tall/wide images, GIFs vs. videos, E2EE media, focus trap + screen reader labels, and what happens when a new image arrives while open. Deliver findings as a checklist here, then fix in one reviewed batch.
Image viewer audit — exercised on the local dev homeserver (Playwright, desktop + Pixel 7)
There are two viewers and they behave differently:
ImageViewer<img>(fixed)role=dialog aria-modal"Media viewer"Fixed (
53823f54): lightbox now focuses itself on open so ←/→/Esc/+/- work immediately; the timeline viewer gained + / = / - / 0, double-click 1×↔2×,role=dialog aria-modallabelled with the file name, and focuses on open. Escape closes both.Filed: #219 — unify: a timeline image should open the gallery lightbox at that item (dark backdrop, sender/time, prev/next, consistent keys), and add pinch-zoom; the small viewer then only remains for avatars.
Cosmetic seen along the way: the seasonal floating button sits on top of both viewers (#215).
Audit (2026-09-23) — driven headlessly on desktop 1300×850 and Pixel 7
Works
+/=/-zoom,0resets — and focus lands on the dialog on open (initialFocus: () => dialogRef.current), so the keys work without clicking first.usePanresets offset when zoom returns to 1).<video controls autoPlay>; zoom/pan keys are image-only by design.N / Mcounter, zoom %.role="dialog" aria-modal aria-label="Media viewer"with a focus trap.Fixed now
cf80729aadds a one-finger horizontal swipe (inert while zoomed, where the gesture pans), pure classifier + unit tests. Verified on Pixel 7: swipe left 1/31 → 2/31.Findings left (ranked)
1 / 1.RoomMediaLightboxpages the detached media timeline back up to 6 times to find the clicked event and meanwhile shows it alone; for a very recent upload the paging sometimes doesn't pick it up and the counter stays 1/1 (older images opened right after showed 1/31 correctly). Medium — the ←/→ affordance silently disappears.ClipboardItem(Chromium-only for PNG) and an open-in-new-tab on an E2EE blob URL breaks as soon as the viewer unmounts and revokes it — worth doing only with a deliberate design (re-fetch on demand). Low.<img>isn't focusable). From the gallery the tiles are buttons and focus returns correctly. Low — would need the timeline image to become a real button.Findings from the 2026-09-23 audit: progress
1. Pinch-zoom on touch: shipped (
39589b40). A two-finger pinch on the viewer scales from the zoom it started at, clamped to 1×–5×. Releasing near 1× snaps back to exactly 1×, so one-finger swipe works again. The media area usestouch-action: none, so the browser no longer zooms the page instead. Verified on an emulated Pixel 7 with a real two-point CDP touch: spreading 80→200 px gives 250 %, closing to 120 px gives 150 %, closing fully gives 100 %, and a one-finger swipe afterwards still moves 2/2 → 1/2.2. Just-sent image shows
1 / 1: not reproduced. I tried four ways, and each opened as2 / 2:Leaving it here in case someone sees it again. If you do, note whether the room was encrypted and how long after sending you clicked.
3. Copy image / open in new tab: unchanged. It needs a deliberate design, see the audit.
4. Focus return from a timeline image: unchanged.
5. Arrow buttons on touch: shipped (
ea07fb50). On a coarse pointer they use the next IconButton size, 48 px measured on a Pixel 7. Desktop is unchanged.6. Caption: shipped (
c088b4c0). For MSC2530 captions (filenameset andbodydiffers), the header now shows the file name, and the caption appears in full under the media (wrapped, scrolls past 25vh). The alt text uses the caption, and Download now saves under the real file name instead of the caption. Verified with a 150-character caption.1ab75147). Focus already went back to the timeline image when the viewer closed. The real gap was that keyboard users could Tab to an image but not open it. Images are nowrole="button", labelled "View image: ", and open on Enter or Space. Verified: Tab → Enter opens the viewer, Escape returns focus to the image, Space opens it again.Last pass (2026-09-26):
f5d3c43bImages inside a thread always opened as
1 / 1. New finding, and a likely explanation for finding 2 (the unreproduced "just-sent image shows 1 / 1"). The thread panel opened the room lightbox, which looks the image up in the room's media timeline. The SDK keeps thread replies out of that timeline, so:The thread panel now builds the viewer from the thread itself (the root plus its loaded replies), and Go to message scrolls the thread panel instead of jumping to the room.
Verified on a thread with 3 images:
/messagesrequests while the viewer is open (2 before the fix)3. Copy image: shipped. A new header button, images only. It re-encodes non-PNG images to PNG, because the clipboard API only guarantees
image/png. The button shows a check for 2 s, or a warning icon with "Could not copy image" if the copy fails. It is hidden on browsers withoutClipboardItem.Verified by reading the clipboard back in Chromium:
image/png, 320×200, correct pixel colourimage/png, 300×180, correct pixel colour.Unit tests:
utils/copyImage.test.ts.3. Open in new tab: not doing, by design.
Download and Copy cover both uses.
Nothing on the original checklist is left open, so I'm closing this. Reopen it if a room image (not a thread image) ever shows
1 / 1again.