Jannis Braun
cb16c8feac
Replace the placeholder Screenshots section with a hero voice/video shot and a curated 6-shot grid (chat, screen-share controls, spaces, federated DMs, social discovery, federation admin), linking to a new docs/screenshots.md gallery of all 14 shots grouped by feature. Images are optimized to 1600px WebP (~1.2MB total vs ~45MB raw); raw originals in demo-pictures/ are gitignored.
108 lines
3.8 KiB
Markdown
108 lines
3.8 KiB
Markdown
# 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 read states 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>
|