LotusGuild/cinny
3
0
Fork 0
Code Issues 42 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Call PiP opens on top of the composer (covers Send and Emoji; on phones the whole message box), with no way to minimise it #323

New Issue
Closed
opened 2026-10-05 17:48:39 -04:00 by jared · 2 comments
jared commented 2026-10-05 17:48:39 -04:00
Owner
Copy Link
Copy Source

Leave the call room during a call (the usual "chat while in voice" case). The 280×158 picture-in-picture appears bottom-right, where the composer's controls are:

viewport PiP box composer controls under it
desktop 1440×900 x 1144–1424, y 670–828 Send message, Insert emoji
phone 390×844 x 94–374, y 614–772 Send message, the message box, Insert emoji

You can drag it away, and the position is remembered across rooms and sessions. It's clamped when the window shrinks (an 800×600 resize moved it to 520,442) ✔, and clicking it returns to the call room ✔. But on first use, and on phones generally, the first thing you try to do in the text room, typing or pressing Send, lands on the call. There's no minimise or collapse control on the PiP.

Suggestions:

  • Default above the composer: offset by the composer's height (measure [data-slate-editor]'s container), or top-right under the header.
  • On phones, start collapsed: a small pill with the room name and mute/end, which expands to the video when tapped.
  • Add a minimise button next to the existing click-to-return.

Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny 30e2dbcd, cinny-desktop 8f67ec7, element-call 3b0050e8.

Leave the call room during a call (the usual "chat while in voice" case). The 280×158 picture-in-picture appears bottom-right, where the composer's controls are: | viewport | PiP box | composer controls under it | |---|---|---| | desktop 1440×900 | x 1144–1424, y 670–828 | **Send message**, **Insert emoji** | | phone 390×844 | x 94–374, y 614–772 | **Send message**, **the message box**, **Insert emoji** | You can drag it away, and the position is remembered across rooms and sessions. It's clamped when the window shrinks (an 800×600 resize moved it to 520,442) ✔, and clicking it returns to the call room ✔. But on first use, and on phones generally, the first thing you try to do in the text room, typing or pressing Send, lands on the call. There's no minimise or collapse control on the PiP. **Suggestions:** - Default above the composer: offset by the composer's height (measure `[data-slate-editor]`'s container), or top-right under the header. - On phones, start collapsed: a small pill with the room name and mute/end, which expands to the video when tapped. - Add a minimise button next to the existing click-to-return. --- _Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny `30e2dbcd`, cinny-desktop `8f67ec7`, element-call `3b0050e8`._
jared added the priority: lowuxarea: calls labels 2026-10-05 17:48:39 -04:00
jared commented 2026-10-05 17:52:59 -04:00
Author
Owner
Copy Link
Copy Source

Worse case found: the PiP's clamp keeps it inside the window but not above the call status bar. Dragged to the bottom-right corner, where it's then remembered, it sits on top of the call bar's controls. At 768–1280 px wide, elementFromPoint at the centre of Turn off microphone, Deafen, Audio output and Start Video returns the PiP, so you can't mute or end the call until you drag it away. The clamp should treat the call bar (and the composer) as no-go areas: maxY = callBar.getBoundingClientRect().top - pipHeight - margin.

Worse case found: the PiP's clamp keeps it inside the window but not above the **call status bar**. Dragged to the bottom-right corner, where it's then remembered, it sits **on top of the call bar's controls**. At 768–1280 px wide, `elementFromPoint` at the centre of **Turn off microphone, Deafen, Audio output and Start Video** returns the PiP, so you can't mute or end the call until you drag it away. The clamp should treat the call bar (and the composer) as no-go areas: `maxY = callBar.getBoundingClientRect().top - pipHeight - margin`.
jared commented 2026-10-05 17:53:58 -04:00
Author
Owner
Copy Link
Copy Source

Code pointer: handlePipDoubleClick (src/app/components/CallEmbedProvider.tsx:1060-1081) snaps to top = window.innerHeight - h - 16. On a 900 px window that's y 726–884, overlapping the 39 px call bar (y 861–900). So the built-in double-click → bottom corner snap also puts the PiP over the call controls, and saves it there (pip-position). The resize clamp (onPipWindowResize, line ~1050) has the same innerHeight - offsetHeight bound. Both should subtract the call bar's height (and ideally the composer's).

Code pointer: `handlePipDoubleClick` (src/app/components/CallEmbedProvider.tsx:1060-1081) snaps to `top = window.innerHeight - h - 16`. On a 900 px window that's y 726–884, overlapping the 39 px call bar (y 861–900). So the built-in **double-click → bottom corner** snap also puts the PiP over the call controls, and saves it there (`pip-position`). The resize clamp (`onPipWindowResize`, line ~1050) has the same `innerHeight - offsetHeight` bound. Both should subtract the call bar's height (and ideally the composer's).
jared closed this issue 2026-10-19 01:00:29 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
a11y
Accessibility: keyboard, screen reader, contrast, motion
 area: appearance
Client area: appearance
 area: auth-session
Client area: auth-session
 area: build-ci
Client area: build-ci
 area: calls
Client area: calls
 area: desktop
Client area: desktop
 area: media
Client area: media
 area: messaging
Client area: messaging
 area: mobile
Client area: mobile
 area: moderation
Client area: moderation
 area: navigation
Client area: navigation
 area: notifications
Client area: notifications
 area: settings
Client area: settings
 area: threads
Client area: threads
 bug
Something is not working
 dependencies
Third-party package versions and advisories
 docs
README / LOTUS_* docs wrong or missing
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 needs-human-review
performance
Re-render storms, leaks, heavy work on hot paths
 planning
priority: critical
Data loss, security hole, or crash on a main path
 priority: high
Broken feature or serious usability problem
 priority: low
Minor issue or polish
 priority: medium
Wrong behaviour in an edge case or notable degradation
 qa
Manual QA: shipped, needs a human in a real environment
 question
More information is needed
 research
security
XSS, unsafe URLs, data leaks, auth/session
 tech-debt
Code health, dead code, fragile patterns
 ux
Usability or visual inconsistency
 wontfix
This won't be fixed
No labels area: calls priority: low ux
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
cole (Cole Keller) jared (Jared Vititoe) nathan (Nathan Vititoe)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: LotusGuild/cinny#323