Overview

The Gryt client is a React/TypeScript application (packaged with Electron for desktop) that handles the user interface, audio processing pipeline, and WebRTC connections to the SFU.

Features

• Audio pipeline: RNNoise noise reduction, auto gain, compressor, noise gate, volume control, mute, real-time visualization
• Voice controls: Mute/unmute, deafen, device hot-swapping
• Chat: Text messaging with attachments, replies, editing, message retry with nonce deduplication
• Multi-server: Seamless server switching with room isolation
• UI: @gryt/ui components, light and dark themes plus imported ones, Motion for animation

Project structure

client/src/
├── packages/
│   ├── addons/     # The plugin API and addon loading
│   ├── audio/      # Sound assets, the visualizer, global hotkeys
│   ├── common/     # Auth, keypairs, shared hooks
│   ├── dialogues/  # Dialogs and modals
│   ├── mobile/     # Touch gestures, responsive helpers
│   ├── settings/   # useSettings, useTheme, persistent storage
│   ├── socket/     # useSockets, server views, user components
│   └── webRTC/     # @gryt/voice adapters, call controls, encoded transform
├── components/     # Top-level components: titlebar, overlays, banners
├── hooks/          # Global React hooks
└── types/          # TypeScript definitions

Getting started

cd packages/client
yarn install
yarn dev

Open http://localhost:3666.

Key hooks

useMicrophone and useSFU

import { useMicrophone, useSFU } from "@gryt/voice";

The voice engine is @gryt/voice, an npm package. packages/webRTC holds the adapters that wire it into this client: the settings store mapped into a VoiceConfig, the socket behind a RoomCoordinator, and the Electron bridge behind a VoiceHost.

useSockets

const {
  sockets, clients,
  serverDetailsList, memberLists
} = useSockets();

Multi-server WebSocket management with real-time user state synchronization.

Configuration

Optional packages/client/.env. These point the client at an identity stack and default to Gryt's own:

VITE_GRYT_OIDC_ISSUER=https://auth.gryt.chat/realms/gryt
VITE_GRYT_OIDC_CLIENT_ID=gryt-web
VITE_GRYT_AUTH_API=https://auth.gryt.chat
VITE_GRYT_IDENTITY_URL=https://id.gryt.chat

See Configuration for the full list.

Audio settings (volume, noise gate, device) are configured through the UI, not through the environment.

Build

yarn build       # production bundle
yarn preview     # preview locally
yarn typecheck
yarn lint