From f6cca1673aa2411e122c2eef3181b9d45bb7b3d3 Mon Sep 17 00:00:00 2001 From: root Date: Thu, 14 May 2026 22:45:04 -0400 Subject: [PATCH] docs: update README with recent feature additions - EC upgraded to 0.19.3 - Auto-revert spotlight on screenshare - DM calls (phone button + Room.tsx layout switch) - Picture-in-picture call window - PTT badge terminal theming - GIF picker (Giphy SDK, FocusTrap close, terminal theme) - Technical notes for CallEmbedProvider, GifPicker, useClientConfig --- README.md | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 3d51976ba..f6595f700 100644 --- a/README.md +++ b/README.md @@ -46,15 +46,29 @@ A full custom theme engine layered on top of Cinny's vanilla-extract theming: ### Voice / Video Call Improvements +- **Element Call 0.19.3**: Upgraded from 0.16.3. Dist copied to `public/element-call/` by vite at build time. - **Camera default OFF**: Camera no longer persists across sessions via localStorage. Always starts disabled. Optional `cameraOnJoin` setting for explicit opt-in. - **Deafen button**: Tooltip corrected to "Deafen" / "Undeafen" (was "Turn Off Sound" / "Turn On Sound") - **Screenshare confirmation**: A confirm dialog appears before screenshare is broadcast to call participants +- **Auto-revert spotlight on screenshare**: When someone starts screensharing, EC normally forces all participants into spotlight view. Patched in `CallControl.ts` `onControlMutation()` — detects the screenshare button going `primary` and clicks `gridButton` after 600ms to revert to grid layout. Participants choose to watch screenshare manually. - **Push to Talk (PTT)**: - Configurable keybind (default: Space) via Settings > General > Calls - - Mic activates on keydown, deactivates on keyup - - Visual indicator: orange "PTT — Hold SPACE" when PTT mode is on, green "● LIVE" while transmitting + - Mic activates on keydown, deactivates on keyup; mic muted on tab blur/focus to prevent stuck-on mic + - Visual indicator: plain folds `Chip` by default; when LotusGuild TDS is active: orange `PTT — Hold SPACE` / green `● LIVE` in JetBrains Mono + - Listens on both main window and EC iframe `contentWindow` for reliable key capture - Implemented via `CallControl.setMicrophone()` public method on the widget bridge - **Noise suppression toggle**: Settings > General > Calls — passes `noiseSuppression` URL parameter to the embedded Element Call widget +- **DM calls**: Phone button in DM room header starts a 1-on-1 call via `useCallStart(true)`. `Room.tsx` switches to CallView layout when the DM has an active call embed. Standard voice rooms were already supported; this extends call support to all direct messages. +- **Picture-in-picture (PiP)**: When navigating away from a call room while in an active call, the call embed shrinks to a 280×158px floating window in the bottom-right corner (above the message composer). Clicking it navigates back to the call room. Implemented via `useEffect` that imperatively overrides inline styles on `callEmbedRef.current` — a wrapper div cannot be used because `useCallEmbedPlacementSync` writes `top/left/width/height` directly onto that element. + +### GIF Picker + +- **Giphy integration**: GIF button appears in the message composer next to Send when `gifApiKey` is present in `config.json` +- Uses Giphy JS/React SDK (`@giphy/react-components`, `@giphy/js-fetch-api`, `styled-components`) +- Selected GIF is fetched as a blob, uploaded via `mx.uploadContent`, and sent as `m.image` — appears inline in the timeline like any image +- `FocusTrap` wraps the picker: clicking outside or pressing Escape closes it +- **Terminal theme**: When LotusGuild TDS is active the picker switches to: dark navy background (`#060c14`), orange dim border, 4px angular radius, `// GIF_SEARCH` header in JetBrains Mono, Giphy SearchBar input overridden (dark bg, orange border/focus ring, JetBrains Mono font), custom orange scrollbar +- API key set in root `config.json` → `gifApiKey` (the root file is what vite copies to dist — `public/config.json` is not used) ### Settings Additions @@ -72,8 +86,11 @@ A full custom theme engine layered on top of Cinny's vanilla-extract theming: - All upstream Cinny URLs replaced (cinny.in → lotusguild.org, Cinny Matrix room → Lotus Guild room) - Version string is dynamically read from `package.json` at build time — no hardcoded version strings - `useCallEmbed.ts`: noise suppression setting wired through `createCallEmbed` → `CallEmbed.getWidget()` → Element Call URL params -- `CallControl.ts`: added `setMicrophone(enabled: boolean)` public method for programmatic mic control (used by PTT) +- `CallControl.ts`: `setMicrophone(enabled: boolean)` public method for PTT mic control; `onControlMutation()` patched to detect screenshare start and auto-revert spotlight to grid - `callPreferences` atom: never persists `video: true` to localStorage; camera state always resets to OFF on page load +- `CallEmbedProvider.tsx`: `pipMode` logic and `useEffect` for imperative style overrides; `navigateRoom` hook for PiP click-to-return +- `GifPicker.tsx`: `useSetting(settingsAtom, 'lotusTerminal')` drives conditional terminal styling; injected `