root
f6cca1673a
- 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
100 lines
6.9 KiB
Markdown
100 lines
6.9 KiB
Markdown
# Lotus Chat
|
||
|
||
A Matrix client for [Lotus Guild](https://lotusguild.org) — forked from [Cinny](https://github.com/cinnyapp/cinny) v4.11.1.
|
||
|
||
Deployed at [chat.lotusguild.org](https://chat.lotusguild.org).
|
||
|
||
---
|
||
|
||
## Changes from upstream Cinny
|
||
|
||
### Branding & Identity
|
||
|
||
- Package renamed to `lotus-chat`, description updated to "Lotus Chat — Matrix client for Lotus Guild"
|
||
- App title changed from "Cinny" to "Lotus Chat" throughout
|
||
- Favicon, PWA icons, and all icon sizes (57×57 → 180×180 Apple touch icons) replaced with Lotus.png variants
|
||
- Logo in About dialog and Auth page replaced with official Lotus.png
|
||
- Auth footer rewritten: shows dynamic version from `package.json`, links to lotusguild.org, chat.lotusguild.org, and matrix.lotusguild.org
|
||
- Welcome page tagline changed from "Yet another matrix client" to "A Matrix client for Lotus Guild"
|
||
- Encryption key export filename changed from `cinny-keys.txt` to `lotus-keys.txt`
|
||
- `manifest.json` updated with Lotus name, description, and branding colors
|
||
|
||
### LotusGuild Terminal Design System (TDS) v1.2
|
||
|
||
A full custom theme engine layered on top of Cinny's vanilla-extract theming:
|
||
|
||
**Dark mode** (`LotusTerminalTheme`):
|
||
- CRT terminal aesthetic: scanline overlay, vignette, phosphor glow
|
||
- Palette: bg `#030508`, orange `#FF6B00`, cyan `#00D4FF`, green `#00FF88`, text `#c4d9ee`
|
||
- Monospace font stack, terminal-style scrollbars
|
||
- Custom hex-grid and circuit-board CSS background patterns
|
||
- Matrix-style boot messages on the welcome page
|
||
- CSS variables: `--lt-*` family covering colors, glow effects, borders, animations
|
||
|
||
**Light mode** (`LotusTerminalLightTheme`):
|
||
- Full light palette: bg `#edf0f5`, orange `#c44e00`, cyan `#0062b8`, green `#006d35`, text `#111827`
|
||
- No CRT effects (scanlines, vignette disabled)
|
||
- Light-mode scrollbars, adjusted code block colors, semantic color overrides
|
||
- Scoped to `html[data-theme="light"] body.lotusTerminalBodyClass`
|
||
- `ThemeManager.tsx` sets `data-theme` attribute based on active theme kind
|
||
|
||
**Chat Backgrounds** (18+ custom patterns, all TDS-aware):
|
||
- Blueprint grid, carbon fiber, starfield, topographic contours, herringbone, crosshatch
|
||
- Chevron, polka dots, triangles, plaid
|
||
- All patterns use CSS custom properties — adapt to both TDS dark and light themes
|
||
- Settings toggle for showing per-message sender profiles
|
||
|
||
### 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; 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
|
||
|
||
**Settings > General > Calls** (new section):
|
||
- Camera on join: toggle whether camera starts enabled
|
||
- Noise suppression: toggle noise suppression in calls (default: on)
|
||
- Push to Talk: enable PTT mode and configure the keybind
|
||
|
||
### Editor
|
||
|
||
- Editor toolbar visibility is user-configurable (toggle added to message composer settings)
|
||
|
||
### Technical
|
||
|
||
- 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`: `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
|
||
|
||
---
|
||
|
||
## Upstream
|
||
|
||
Based on [Cinny](https://github.com/cinnyapp/cinny) — a Matrix client focusing on simple, elegant and secure interface.
|