Files
Jannis Braun 3f5b2920a4 docs: fix screenshot caption overclaiming read states
The chat screenshot shows messages + typing; "read states" reads as read
receipts (which don't exist). Backspace tracks unread state only. Reworded
captions to replies/reactions/typing.
2026-07-01 01:11:47 +02:00

108 lines
3.8 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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>