# Screenshots

A tour of Backspace in action, taken from a live test instance. For a quick
overview, see the [Screenshots section of the README](../README.md#screenshots).

> Images are captured from the Electron desktop app; the web app is identical.

## Voice & video

A voice channel scales from a couple of people to a full grid of camera tiles
and live screen-shares, each labelled with its own resolution and frame rate.

<div align="center">
  <img src="screenshots/voice-video-grid.webp" alt="A voice channel with a grid of camera and screen-share tiles" width="900" /><br/>
  <sub>Camera tiles and live screen-shares side by side, with per-stream quality labels.</sub>
</div>

<br/>

<div align="center">
  <img src="screenshots/voice-streams.webp" alt="A voice channel with several members streaming" width="900" /><br/>
  <sub>Members can go live; others join with a <b>Watch Stream</b> button.</sub>
</div>

<br/>

<div align="center">
  <img src="screenshots/voice-call-pip.webp" alt="A voice channel with a picture-in-picture tile" width="900" /><br/>
  <sub>Picture-in-Picture keeps the call visible while you browse other channels.</sub>
</div>

## Text chat

<div align="center">
  <img src="screenshots/chat.webp" alt="A text channel with an active conversation and a typing indicator" width="900" /><br/>
  <sub>Real-time messages with replies, reactions, and live typing indicators.</sub>
</div>

<br/>

<div align="center">
  <img src="screenshots/gif-picker.webp" alt="The GIF picker open in a text channel" width="900" /><br/>
  <sub>Built-in GIF search (Klipy) and an emoji picker.</sub>
</div>

<br/>

<div align="center">
  <img src="screenshots/chat-moderation.webp" alt="The voice member context menu with moderation options" width="900" /><br/>
  <sub>Voice moderation — space mute / deafen, move, disconnect, and per-user volume.</sub>
</div>

## Screen sharing

<div align="center">
  <img src="screenshots/screen-share-settings.webp" alt="The screen-share settings popover" width="900" /><br/>
  <sub>Per-stream resolution, frame rate, content mode, codec (VP9 / H.264), and bitrate — within admin-set bounds.</sub>
</div>

## File sharing

<div align="center">
  <img src="screenshots/file-sharing.webp" alt="A channel with uploaded files" width="900" /><br/>
  <sub>Upload and share files of any kind directly in a channel.</sub>
</div>

## Direct messages

<div align="center">
  <img src="screenshots/group-dm.webp" alt="A federated group direct message" width="900" /><br/>
  <sub>1-on-1 and group DMs, including members on peer instances (note the <code>@instance</code> handles).</sub>
</div>

## Friends & social

<div align="center">
  <img src="screenshots/friends.webp" alt="The friends list with an Active Now sidebar" width="900" /><br/>
  <sub>Friends list with presence and an <b>Active Now</b> sidebar.</sub>
</div>

<br/>

<div align="center">
  <img src="screenshots/user-discovery.webp" alt="The find-people / user discovery view" width="900" /><br/>
  <sub>Discover people across instances, with mutual friends and mutual spaces surfaced.</sub>
</div>

## Spaces

<div align="center">
  <img src="screenshots/space-discovery.webp" alt="The space discovery / Explore view" width="900" /><br/>
  <sub>Browse and join public, request-to-join, and already-joined spaces.</sub>
</div>

## Administration

<div align="center">
  <img src="screenshots/admin-federation.webp" alt="The federation admin panel showing peered instances" width="900" /><br/>
  <sub>Federation — DM relay, auto-peering, secret rotation, and per-peer health and management.</sub>
</div>

<br/>

<div align="center">
  <img src="screenshots/admin-streaming.webp" alt="The streaming admin panel with a bitrate matrix" width="900" /><br/>
  <sub>Streaming limits — allowed resolutions and frame rates, plus a per-resolution × per-frame-rate bitrate matrix.</sub>
</div>