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
This commit is contained in:
root
2026-05-14 22:45:04 -04:00
parent 41ae0f4fa0
commit f6cca1673a
+20 -3
View File
@@ -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 `<style>` scoped to `[data-gif-terminal]` overrides Giphy SDK styled-components without polluting global styles
- `useClientConfig.ts`: `gifApiKey?: string` added to `ClientConfig` type
---