New screenshots, a demo GIF and a README facelift

Header with the app icon and a link to pl8.narl.io, a feature list,
guest listening under Accounts, and the controls as the in-app help
lists them.
This commit is contained in:
nvrl committed 2026-11-03 13:59:12 +01:00
1 parent 92d531dc10
commit d858c37e2e
7 files changed
+65 -15

No files matched your search

+65 -15
View File
@@ -1,14 +1,50 @@
# pl8list rewind <p align="center">
<img src="web/public/icons/icon.svg" width="112" alt="">
</p>
<h1 align="center">pl8list rewind</h1>
<p align="center">
<b>Endless riddim from pl8list. Like it, and it comes back.</b>
</p>
<p align="center">
<a href="https://pl8.narl.io"><img src="https://img.shields.io/badge/listen-pl8.narl.io-ff4d6d?style=for-the-badge" alt="Listen on pl8.narl.io"></a>
</p>
<p align="center">
<img src="docs/demo.gif" width="640" alt="Starting the feed, liking a track, scrolling on and opening the likes">
</p>
An endless, TikTok-style scroll through [pl8list](https://pl8list.com), with its own An endless, TikTok-style scroll through [pl8list](https://pl8list.com), with its own
recommendation algorithm that learns from what you like, finish and skip. Sign in with recommendation algorithm that learns from what you like, finish and skip. Open
your pl8list account; each user gets their own feed and taste profile. [pl8.narl.io](https://pl8.narl.io) and press play: no account needed. Sign in with your
pl8list account to bring your likes and follows along.
The name is the soundsystem rewind: when a dance loves a tune, the selector pulls the The name is the soundsystem rewind: when a dance loves a tune, the selector pulls the
plate back and runs it again. Here, what you like comes back. plate back and runs it again. Here, what you like comes back.
Not affiliated with pl8list. Not affiliated with pl8list.
## Features
- **One track per screen.** Swipe, scroll or press ↓. The next track is already buffered and
crossfades in.
- **A feed that learns.** Likes, finished plays, skips, "not for me" and follows shape what
comes next. Four feeds: for you, riddim, fresh and deep cuts.
- **Artist radio.** Start a radio from any artist: them and their neighbours in the artist
graph, with a reason on each track.
- **Liquid artwork.** A WebGL drop that moves with the kicks, snares and wobble of the track.
On riddim it turns to ferrofluid.
- **Drop marks and timed comments.** The waveform marks the drops (`d` jumps to the next
one). pl8list comments pop up at the moment they were left at.
- **Comfort.** Likes and history panels, sleep timer, bass boost, crossfade length, zen
mode, lock-screen and headphone controls. Installs to the home screen as an app.
- **Private by design.** The browser only talks to this server. Audio and images are
proxied, so no visitor address reaches pl8list or a CDN.
## Screenshots
![Feed on desktop](docs/feed-desktop.png) ![Feed on desktop](docs/feed-desktop.png)
<p align="center"> <p align="center">
@@ -16,11 +52,11 @@ Not affiliated with pl8list.
<img src="docs/login.png" width="520" alt="Sign-in screen"> <img src="docs/login.png" width="520" alt="Sign-in screen">
</p> </p>
| Likes | Filters | | Likes | Filters and settings |
| ----- | ------- | | ----- | -------------------- |
| ![Likes panel](docs/likes.png) | ![Filters](docs/filters.png) | | ![Likes panel](docs/likes.png) | ![Filters and settings](docs/filters.png) |
## Run ## Run it yourself
```sh ```sh
docker compose up -d --build # http://127.0.0.1:8790 docker compose up -d --build # http://127.0.0.1:8790
@@ -70,6 +106,11 @@ Data (catalogue, users, listening history) lives in the `data` volume as one SQL
## Accounts ## Accounts
Nobody needs an account to listen. Pressing play the first time makes a guest
(`POST /auth/guest`, at most 10 per IP per hour): a local user with its own session cookie,
so the feed still learns. When a guest signs in on that device, their likes, follows and
history move to the signed-in account. Signing out as a guest deletes the guest and its data.
There are no passwords here. Users sign in with the email of their pl8list account: There are no passwords here. Users sign in with the email of their pl8list account:
1. The user enters their email. The server starts pl8list's own login, and pl8list mails 1. The user enters their email. The server starts pl8list's own login, and pl8list mails
@@ -117,22 +158,30 @@ visitor address reaches pl8list or a CDN.
## Controls ## Controls
| phone | desktop | action | | phone | desktop | action |
| ---------------- | -------------------- | ------------------------------ | | ---------------- | ------------------------- | ------------------------------------- |
| tap | click · space | play / pause | | tap | click · space | play / pause |
| double-tap | double-click · l | like | | double-tap | double-click · l | like |
| swipe up / down | ↓ j · ↑ k | next / previous | | swipe up / down | ↓ j · ↑ k · wheel | next / previous |
| drag waveform | drag waveform · ← → | seek | | drag waveform | drag waveform · ← → | seek (keys: 10 s) |
| | , . | seek 5 s |
| | 0–9 | jump to 0–90 % |
| drop ↓ button | d | jump to the next drop |
| follow button | f | follow the artist | | follow button | f | follow the artist |
| radio button | r | artist radio (more like them) | | radio button | r | artist radio (more like them) |
| | v | liquid / simple visuals |
| ✕ button | x | not for me (skip, show less) | | ✕ button | x | not for me (skip, show less) |
| share button | s | share / copy link | | share button | s | share / copy link |
| | m | mute | | | v | liquid / simple visuals |
| | z | zen: just the drop |
| | c · h | filters and settings · history |
| | m · + − | mute · volume |
| | ? · Esc | help · close panels | | | ? · Esc | help · close panels |
Lock-screen, notification and headphone buttons control playback too (Media Session API). Lock-screen, notification and headphone buttons control playback too (Media Session API).
"likes" lists your likes newest first; ▶ plays one right away. The filters panel picks the The tabs in the top bar pick the feed (for you, riddim, fresh, deep cuts). "likes" lists your
feed (for you, riddim, fresh, deep cuts) and the visuals. "radio" on a card opens the radio likes newest first, with search; "play" queues them in order or shuffled, and ▶ plays one
right away. "history" lists what played lately, kept on the device only. The filters panel
holds the filters and the settings: visuals, ferrofluid spikes, crossfade, bass boost,
comments on the waveform and the sleep timer. "radio" on a card opens the radio
sheet: the artist, their tags and the artists next to them (tap one to walk over to theirs). sheet: the artist, their tags and the artists next to them (tap one to walk over to theirs).
"start radio" jumps to the radio's first track; each radio track says why it is there, and the "start radio" jumps to the radio's first track; each radio track says why it is there, and the
chip in the top bar goes back to your feed. Feed and filters (free only, BPM range) are chip in the top bar goes back to your feed. Feed and filters (free only, BPM range) are
@@ -150,7 +199,8 @@ Single-letter keys clash with vim-key browser extensions (Vimium and the like),
current card and its neighbours are in the DOM. One wheel or trackpad gesture moves one current card and its neighbours are in the DOM. One wheel or trackpad gesture moves one
page. page.
- `player.ts`: two audio decks. The next track is buffered a few seconds after the current - `player.ts`: two audio decks. The next track is buffered a few seconds after the current
one starts, so it plays at once; tracks crossfade (0.9 s, equal power) and the next one one starts, so it plays at once; tracks crossfade (equal power, 0.9 s unless set otherwise
in the filters panel) and the next one
starts just before the current one ends. Both decks run through a Web Audio graph with an starts just before the current one ends. Both decks run through a Web Audio graph with an
analyser. Not on iOS: its element volume is read-only and Web Audio stops with the screen analyser. Not on iOS: its element volume is read-only and Web Audio stops with the screen
locked, so there tracks switch with a cut and lock-screen playback keeps working. locked, so there tracks switch with a cut and lock-screen playback keeps working.
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 874 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 471 KiB

After

Width:  |  Height:  |  Size: 789 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 505 KiB

After

Width:  |  Height:  |  Size: 980 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 513 KiB

After

Width:  |  Height:  |  Size: 609 KiB