diff --git a/web/index.html b/web/index.html
index c5487af..6fea923 100644
--- a/web/index.html
+++ b/web/index.html
@@ -65,10 +65,7 @@
rewind endless riddim from pl8list. like it, and it comes back.
-
-
-
no account needed. or sign in with pl8list to bring your follows and likes along.
-
+
sign in with pl8list to bring your follows and likes along. What you did as a guest comes with you.
- cancel, keep using the app
+ cancel, keep listening
- This site is not affiliated with pl8list. Without an account we keep what you play, like and
- follow under a random cookie, to pick tracks for you; signing out deletes it. Your email and code
+ This site is not affiliated with pl8list. Your email and code
go to pl8list, which signs this server in for you. Unless you choose to stay connected, we use
that pl8list login once to read your feed and library, then log it out; it is never stored. We
keep your pl8list handle, the artists you follow and what you play and like.
@@ -134,6 +130,12 @@
+ solar flares on the liquid drop
+
crossfade
+
rewind
-
tap anywhere to start
+
tap anywhere to start · no account needed
+
+
or sign in with pl8list
+
Not affiliated with pl8list. Without an account we keep what you play, like and
+ follow under a random cookie, to pick tracks for you; "forget me" in the account menu deletes it.
+ Datenschutz / privacy · Impressum
+
@@ -228,6 +237,7 @@
finding related artists…
share this radio
@@ -260,10 +270,13 @@
c filters and settings
h history
0–9 · , . jump to 0–90 % · seek 5 s
+ d jump to the next drop (the marks on the waveform)
m · + − mute · volume
? this help
- Drag the liquid artwork sideways to spin it. Lock-screen and headphone buttons work too.
+ Drag the liquid artwork sideways to spin it. On riddim the solar flares round it follow the
+ beat: a loop on each kick, the same crown every bar, a break on each snare. Lock-screen and
+ headphone buttons work too.
Keys like r or x doing something else, such as reloading or
closing the tab? A vim-keys browser extension (Vimium and the like) takes them first:
turn it off for this site.
@@ -297,7 +310,7 @@
0:00
+ 0:00 drop
void> = {
- riddim: (l) => Object.assign(l, { step: 0.5, spike: 0.6, throb: 1.4, bounce: 1.3, stiff: 120, metal: 0.9, shock: 1.4, ripple: 1.2 }),
- tearout: (l) => Object.assign(l, { spike: 1.3, bounce: 1.4, gain: l.gain * 1.15, heat: 0.7 }),
- deathstep: (l) => Object.assign(l, { spike: 1.4, bounce: 1.4, gain: l.gain * 1.15, heat: 0.9, metal: 0.7 }),
- melodic: (l) => Object.assign(l, { iri: 0.8, spike: 0.15, throb: 0.7, bounce: 0.6, stiff: 55, gain: l.gain * 0.9, flow: l.flow * 0.8, metal: 0.1 }),
- colourbass: (l) => Object.assign(l, { iri: 1, spike: 0.25, bounce: 0.8, stiff: 70, metal: 0.15 }),
+ // Riddim: the loops snap to the beat and the crown repeats every bar.
+ riddim: (l) => Object.assign(l, {
+ step: 0.5, spike: 0.6, throb: 1.4, bounce: 1.3, stiff: 120, metal: 0.9, shock: 1.4, ripple: 1.2,
+ flares: 1, crown: 4, scatter: 0, arch: 0.55, life: 4, erupt: 0.4,
+ }),
+ tearout: (l) => Object.assign(l, { spike: 1.3, bounce: 1.4, gain: l.gain * 1.15, heat: 0.7, flares: 1, crown: 6, scatter: 0.5, erupt: 0.25 }),
+ deathstep: (l) => Object.assign(l, { spike: 1.4, bounce: 1.4, gain: l.gain * 1.15, heat: 0.9, metal: 0.7, flares: 1, crown: 6, scatter: 0.6, erupt: 0.2 }),
+ melodic: (l) => Object.assign(l, {
+ iri: 0.8, spike: 0.15, throb: 0.7, bounce: 0.6, stiff: 55, gain: l.gain * 0.9, flow: l.flow * 0.8, metal: 0.1,
+ flares: 0, crown: 5, scatter: 0.3, arch: 0.8, life: 8, erupt: 0.8, tint: 0.5,
+ }),
+ colourbass: (l) => Object.assign(l, { iri: 1, spike: 0.25, bounce: 0.8, stiff: 70, metal: 0.15, tint: 0.6 }),
dnb: (l) => Object.assign(l, { ripple: 1.6 }),
"170": (l) => Object.assign(l, { ripple: 1.5 }),
- halftime: (l) => Object.assign(l, { flow: l.flow * 0.7, gain: l.gain * 1.15, stiff: 70 }),
+ halftime: (l) => Object.assign(l, { flow: l.flow * 0.7, gain: l.gain * 1.15, stiff: 70, crown: 2, arch: 0.7 }),
wonk: (l) => Object.assign(l, { twist: 0.9 }),
};
export function lookFor(t: Track): Look {
// About one noise cycle per bar.
const l: Look = { ...BASE, flow: ((t.bpm || 140) / 240) * 0.9 };
- for (const tag of t.tags ?? []) TAGS[tag]?.(l);
+ const tags = t.tags ?? [];
+ // Untagged dubstep tempo counts too: most riddim carries no riddim tag.
+ if (tags.includes("140")) l.flares = 1;
+ for (const tag of tags) TAGS[tag]?.(l);
l.hue = keyHue(t.key);
return l;
}
diff --git a/web/src/cards.ts b/web/src/cards.ts
index d4c7dd7..9973a90 100644
--- a/web/src/cards.ts
+++ b/web/src/cards.ts
@@ -15,6 +15,8 @@ export interface CardActions {
canSeek(card: Card): boolean;
duration(card: Card): number;
seek(card: Card, seconds: number): void;
+ /// Jump to the next drop of the playing card.
+ toDrop(card: Card): void;
}
// Uploads are often titled after their file name.
@@ -26,6 +28,39 @@ export const compact = (n: number) =>
const NEW_DAYS = 7; // uploads younger than this get a "new" chip
const BAR = 3; // px per waveform bar, gap included
const MIRROR = 0.28; // share of the waveform's height its reflection takes
+// Drops from the waveform: the level over a short window jumping well above the
+// window before it, and loud. Tuned on riddim and dubstep, where the drop is the
+// loudest, densest part and the build before it thins out.
+const DROP_WINDOW = 0.035; // of the track, on each side of a drop
+const DROP_RISE = 0.22; // the window after is this much louder (0..1 of the peak) …
+const DROP_LOUD = 0.55; // … and at least this loud
+const DROP_SKIP = 0.06; // no drop in the first bit: that is the track starting
+const DROP_APART = 0.12; // of the track between two drops
+const MAX_DROPS = 3;
+
+/// Where the drops are, 0..1 of the track, from its waveform.
+export function findDrops(data: number[] | null | undefined): number[] {
+ if (!data || data.length < 40) return [];
+ const max = Math.max(1, ...data);
+ const v = data.map((x) => x / max);
+ const n = v.length;
+ const w = Math.max(2, Math.round(n * DROP_WINDOW));
+ const sum = [0];
+ for (const x of v) sum.push(sum[sum.length - 1] + x);
+ const mean = (a: number, b: number) => (sum[b] - sum[a]) / (b - a);
+ const cands: { at: number; rise: number }[] = [];
+ for (let i = Math.max(w, Math.round(n * DROP_SKIP)); i <= n - w; i++) {
+ const after = mean(i, i + w), before = mean(i - w, i);
+ if (after - before >= DROP_RISE && after >= DROP_LOUD) cands.push({ at: i, rise: after - before });
+ }
+ cands.sort((a, b) => b.rise - a.rise);
+ const out: number[] = [];
+ for (const c of cands) {
+ if (out.length >= MAX_DROPS) break;
+ if (out.every((o) => Math.abs(o - c.at) >= n * DROP_APART)) out.push(c.at);
+ }
+ return out.sort((a, b) => a - b).map((i) => i / n);
+}
const tpl = document.getElementById("card-tpl") as HTMLTemplateElement;
@@ -47,9 +82,12 @@ export class Card {
) {
this.liked = liked;
this.station = station;
+ this.drops = findDrops(track.waveform);
}
private station: string | undefined;
+ /// Drops in the waveform, 0..1 of the track.
+ readonly drops: number[];
element(): HTMLElement {
return this.el ?? this.build();
@@ -131,6 +169,9 @@ export class Card {
$(".next").addEventListener("click", () => this.actions.next(this));
$(".follow").addEventListener("click", () => this.actions.follow(this));
$(".radio").addEventListener("click", () => this.actions.radio(this));
+ const toDrop = $(".to-drop");
+ toDrop.hidden = !this.drops.length;
+ toDrop.addEventListener("click", () => this.actions.toDrop(this));
this.el = el;
this.canvas = $(".wave");
@@ -243,6 +284,17 @@ export class Card {
ctx.fill();
}
ctx.globalAlpha = 1;
+ // A small mark over each drop.
+ for (const d of this.drops) {
+ const x = Math.round(d * bars) * BAR + (BAR - 1) / 2;
+ ctx.fillStyle = d < progress ? accent : "rgba(255,255,255,0.75)";
+ ctx.beginPath();
+ ctx.moveTo(x - 3.5, 0);
+ ctx.lineTo(x + 3.5, 0);
+ ctx.lineTo(x, 5);
+ ctx.closePath();
+ ctx.fill();
+ }
}
/// Loudness at `progress` from the waveform, 0..1. Stands in for the analyser
diff --git a/web/src/debug.ts b/web/src/debug.ts
index 607fe6b..3fd9513 100644
--- a/web/src/debug.ts
+++ b/web/src/debug.ts
@@ -4,7 +4,7 @@
import type { Features } from "./features";
-const KEYS: (keyof Features)[] = ["sub", "low", "mid", "high", "bass", "growl", "kick", "snare", "wobble", "drop"];
+const KEYS: (keyof Features)[] = ["sub", "low", "mid", "high", "bass", "growl", "kick", "snare", "wobble", "drop", "gap", "bar"];
/// Onsets counted since the overlay opened; also on `window.audioDebug` for scripts.
const counts = { kicks: 0, snares: 0, frames: 0 };
@@ -14,7 +14,7 @@ export function audioDebug(): (f: Features) => void {
let lastAge = 99, lastSnare = 0;
const canvas = document.createElement("canvas");
canvas.className = "audio-debug";
- const w = (canvas.width = 300), h = (canvas.height = 124);
+ const w = (canvas.width = 360), h = (canvas.height = 124);
document.body.append(canvas);
const ctx = canvas.getContext("2d")!;
ctx.font = "10px system-ui, sans-serif";
@@ -27,10 +27,10 @@ export function audioDebug(): (f: Features) => void {
lastSnare = f.snare;
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = "#fff9";
- ctx.fillText(`kicks ${counts.kicks} · snares ${counts.snares}`, 4, 11);
+ ctx.fillText(`kicks ${counts.kicks} · snares ${counts.snares} · beat ${f.beatNo + 1} · womb ${f.wobbleRate.toFixed(1)} Hz`, 4, 11);
KEYS.forEach((k, i) => {
const v = Math.min(1, Math.max(0, f[k]));
- ctx.fillStyle = k === "kick" || k === "snare" ? "#ff4d6d" : k === "drop" ? "#ffb02e" : "#7fd4ff";
+ ctx.fillStyle = k === "kick" || k === "snare" ? "#ff4d6d" : k === "drop" || k === "gap" ? "#ffb02e" : "#7fd4ff";
ctx.fillRect(i * bar + 3, h - 14 - v * (h - 30), bar - 6, v * (h - 30));
ctx.fillStyle = "#fff9";
ctx.fillText(k, i * bar + 3, h - 3);
diff --git a/web/src/features.ts b/web/src/features.ts
index c8f36a1..8f7c82f 100644
--- a/web/src/features.ts
+++ b/web/src/features.ts
@@ -33,6 +33,21 @@ export interface Features {
growl: number;
/// 0..1, high while the low end sits well above its recent average.
drop: number;
+ /// 0..1, high while the low end has dropped out after sounding: the stop before a
+ /// drop, the gaps a riddim leaves.
+ gap: number;
+ /// How often the bass line goes "womb", Hz; 0 until there were a few.
+ wobbleRate: number;
+ /// Where the music is in its bar, from the track's tempo locked onto the kicks:
+ /// `beat` 0..1 within the beat, `beatNo` 0..3, `bar` 0..1 within the bar.
+ beat: number;
+ beatNo: number;
+ bar: number;
+ /// Seconds per beat.
+ period: number;
+ /// How sure the bar is: the strength of recent kicks on the downbeat. Above
+ /// about 2 the downbeat has been hit several times in the last seconds.
+ lock: number;
}
const BANDS = { sub: [30, 90], low: [90, 250], mid: [250, 2000], high: [2000, 10000] } as const;
@@ -68,6 +83,20 @@ const DROP_RISE_DB = 2.5; // dB above the long average where a drop starts
const DROP_FULL_DB = 5; // dB above the start for a full drop
const DROP_ATTACK = 0.25; // s
const DROP_RELEASE = 2; // s
+const GAP_DB = 12; // dB under the long average where the low end counts as gone …
+const GAP_FULL_DB = 12; // … and this much more for a full gap
+const GAP_ATTACK = 0.06; // s
+const GAP_RELEASE = 0.12; // s
+const GAP_HEARD = 2; // s of sound before a gap can be one
+const WOMB_UP = 0.62; // the bass envelope crossing up through this is one "womb" …
+const WOMB_DOWN = 0.38; // … once it fell below this since the last
+const WOMB_MIN = 0.06; // s; closer wombs are one
+const WOMB_MAX = 1.5; // s; further apart, the wobble stopped
+const WOMB_SMOOTH = 0.25; // weight of each new interval
+const BEATS_PER_BAR = 4;
+const BEAT_PULL = 0.25; // how far a kick pulls the beat towards itself
+const BEAT_MIN_HIT = 0.3; // kicks weaker than this leave the beat alone
+const DOWNBEAT_MEMORY = 8; // s; the downbeat is the slot with the strongest kicks this recent
// Without an analyser the waveform stands in. Its steps are coarse, so a rise from
// one step to the next is the only "onset" there is.
const LOUD_FLOOR = 0.02; // loudness treated as silence, so a rise from nothing is finite
@@ -128,7 +157,18 @@ class Onset {
}
export class FeatureTracker {
- readonly f: Features = { sub: 0, low: 0, mid: 0, high: 0, kick: 0, snare: 0, kickAge: 99, kickHit: 0, snareHit: 0, wobble: 0, bass: 0, growl: 0, drop: 0 };
+ readonly f: Features = {
+ sub: 0, low: 0, mid: 0, high: 0, kick: 0, snare: 0, kickAge: 99, kickHit: 0, snareHit: 0, wobble: 0, bass: 0, growl: 0,
+ drop: 0, gap: 0, wobbleRate: 0, beat: 0, beatNo: 0, bar: 0, period: 60 / 140, lock: 0,
+ };
+ /// Seconds per beat, from the track's BPM.
+ private period = 60 / 140;
+ /// Beats since the track started, kept in step with the kicks.
+ private phase = 0;
+ /// Kick strength per beat of the bar, fading; the strongest slot is the downbeat.
+ private slots = [0, 0, 0, 0];
+ private wombAt = -1;
+ private wombArmed = true;
private bins: Float32Array | null = null;
private prev: Float32Array | null = null;
private ranges = { sub: new Range(), low: new Range(), mid: new Range(), high: new Range() };
@@ -147,6 +187,19 @@ export class FeatureTracker {
/// music that starts in the middle of a drop is the baseline, not a drop.
private heard = 0;
+ /// A new track: its tempo, and nothing carried over about where its bar is.
+ /// Half-time notation (70 for a 140 tune) counts double.
+ setTempo(bpm: number | null): void {
+ let b = bpm && bpm >= 50 && bpm <= 220 ? bpm : 140;
+ if (b < 100) b *= 2;
+ this.period = this.f.period = 60 / b;
+ this.phase = 0;
+ this.slots = [0, 0, 0, 0];
+ this.wombAt = -1;
+ this.f.wobbleRate = 0;
+ this.f.lock = 0;
+ }
+
/// One frame from the analyser.
fromAnalyser(an: AnalyserNode, now: number, dt: number): Features {
const n = an.frequencyBinCount;
@@ -200,6 +253,7 @@ export class FeatureTracker {
f.snare = this.snare.env;
f.snareHit = this.snare.hit;
this.track(f.mid, Math.max(db.sub, db.low), dt);
+ this.rhythm(now, dt);
return f;
}
@@ -217,6 +271,7 @@ export class FeatureTracker {
f.kickHit = this.loudKick.hit;
f.snare = f.snareHit = 0;
this.track(level, level > 0 ? 20 * Math.log10(level) : SILENCE_DB, dt);
+ this.rhythm(now, dt);
return f;
}
@@ -225,7 +280,7 @@ export class FeatureTracker {
const f = this.f;
const k = Math.exp(-dt / 0.35);
f.sub *= k; f.low *= k; f.mid *= k; f.high *= k;
- f.kick *= k; f.snare *= k; f.wobble *= k; f.drop *= k; f.bass *= k; f.growl *= k;
+ f.kick *= k; f.snare *= k; f.wobble *= k; f.drop *= k; f.bass *= k; f.growl *= k; f.gap *= k;
f.kickAge += dt;
f.kickHit = f.snareHit = 0;
return f;
@@ -248,5 +303,45 @@ export class FeatureTracker {
this.long += (lowDb - this.long) * ease(dt, Math.min(DROP_LONG, DROP_SHORT + this.heard));
const target = clamp01((this.short - this.long - DROP_RISE_DB) / DROP_FULL_DB);
f.drop += (target - f.drop) * ease(dt, target > f.drop ? DROP_ATTACK : DROP_RELEASE);
+ // The gap is against this frame's level: a stop of half a bar is over before
+ // a smoothed level would notice it.
+ const gap = this.heard < GAP_HEARD ? 0 : clamp01((this.long - lowDb - GAP_DB) / GAP_FULL_DB);
+ f.gap += (gap - f.gap) * ease(dt, gap > f.gap ? GAP_ATTACK : GAP_RELEASE);
+ }
+
+ /// The beat and the bar, and the rate of the wobble.
+ private rhythm(now: number, dt: number): void {
+ const f = this.f;
+ this.phase += dt / this.period;
+ const fade = Math.exp(-dt / DOWNBEAT_MEMORY);
+ for (let i = 0; i < BEATS_PER_BAR; i++) this.slots[i] *= fade;
+ if (f.kickHit >= BEAT_MIN_HIT) {
+ // A kick lands on the nearest beat: pull the clock towards it.
+ const nearest = Math.round(this.phase);
+ this.phase -= (this.phase - nearest) * BEAT_PULL * f.kickHit;
+ const slot = ((nearest % BEATS_PER_BAR) + BEATS_PER_BAR) % BEATS_PER_BAR;
+ this.slots[slot] += f.kickHit;
+ }
+ f.lock = Math.max(...this.slots);
+ const down = this.slots.indexOf(f.lock);
+ const inBar = (((this.phase - down) % BEATS_PER_BAR) + BEATS_PER_BAR) % BEATS_PER_BAR;
+ f.beatNo = Math.floor(inBar);
+ f.beat = inBar - f.beatNo;
+ f.bar = inBar / BEATS_PER_BAR;
+
+ // Each "womb" of the bass is its envelope rising through WOMB_UP.
+ if (f.bass < WOMB_DOWN) this.wombArmed = true;
+ if (this.wombArmed && f.bass > WOMB_UP) {
+ this.wombArmed = false;
+ const since = this.wombAt < 0 ? Infinity : now - this.wombAt;
+ if (since >= WOMB_MIN) {
+ if (since <= WOMB_MAX) {
+ const rate = 1 / since;
+ f.wobbleRate = f.wobbleRate ? f.wobbleRate + (rate - f.wobbleRate) * WOMB_SMOOTH : rate;
+ }
+ this.wombAt = now;
+ }
+ }
+ if (this.wombAt >= 0 && now - this.wombAt > WOMB_MAX * 2) f.wobbleRate *= Math.exp(-dt / 0.5);
}
}
diff --git a/web/src/main.ts b/web/src/main.ts
index f59fcfe..b5e6271 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -9,6 +9,7 @@ import { Pager } from "./pager";
import { Player } from "./player";
import { Sheet } from "./sheet";
import { Station } from "./station";
+import type { FlareSetting } from "./blob/blob";
import { type VisualsSetting, Visualizer } from "./visual";
const PREFETCH_AHEAD = 4; // fetch more when this close to the end
@@ -23,6 +24,8 @@ const BPM_RANGE = [60, 200]; // the BPM slider's ends, which mean "no limit"
const FILTERS_KEY = "pl8inf.filters";
const MODE_KEY = "pl8inf.mode";
const HINT_KEY = "pl8inf.hintShown";
+const NUDGE_KEY = "pl8inf.signInNudged";
+const NUDGE_LIKES = 5; // a guest is asked to sign in after this many likes, or a first follow
const $ = (id: string) => document.getElementById(id) as T;
@@ -66,6 +69,7 @@ let reported = false; // final event already sent for the active card
let advanced = false; // already mixed into the next track
let remembered = false; // the active card is in the history
let preloadTimer = 0;
+let barTimer = 0; // a long crossfade waiting for the next bar
let filters: Filters = loadFilters();
let mode: Mode = loadMode();
let stats: Stats | null = null;
@@ -124,7 +128,7 @@ async function loadMore(): Promise {
if (err instanceof api.HttpError && err.status === 401) {
loading = false;
signedInUser = null;
- showLogin();
+ showWelcome();
return;
}
setStatus(`failed to load: ${(err as Error).message}`);
@@ -189,6 +193,8 @@ function activate(idx: number): void {
reported = false;
advanced = false;
remembered = false;
+ clearTimeout(barTimer);
+ barTimer = 0;
const card = cards[idx];
if (pager.index !== idx) pager.go(idx, { instant: true });
card.element().classList.add("current");
@@ -257,14 +263,35 @@ const actions: CardActions = {
canSeek: (c) => c === current() && !!player.audio.duration,
duration: (c) => (c === current() && player.audio.duration) || c.track.duration || 0,
seek: (_, s) => player.seek(s),
+ toDrop: (c) => toDrop(c),
};
+/// Seek to the next drop of the playing card, a bar early so it lands; past the
+/// last one, back to the first.
+function toDrop(card: Card): void {
+ const a = player.audio;
+ if (card !== current() || !a.duration || !card.drops.length) return;
+ const lead = 4 * beatSeconds();
+ const times = card.drops.map((d) => Math.max(0, d * a.duration - lead));
+ const next = times.find((t) => t > a.currentTime + 1) ?? times[0];
+ player.seek(next);
+ toast(`drop ${times.indexOf(next) + 1} of ${times.length}`);
+}
+
function setLike(card: Card, liked: boolean): void {
if (card.liked === liked) return;
card.liked = liked;
card.showLike(true);
if (stats) { stats.liked += liked ? 1 : -1; showStats(); }
api.sendEvent(card.track, liked ? "like" : "unlike");
+ if (liked && (stats?.liked ?? 0) >= NUDGE_LIKES) nudgeSignIn();
+}
+
+/// Once per device, a guest who has started collecting is asked to sign in.
+function nudgeSignIn(): void {
+ if (!signedInUser?.guest || localStorage.getItem(NUDGE_KEY)) return;
+ localStorage.setItem(NUDGE_KEY, "1");
+ toast("sign in with pl8list to keep these, and bring your library along", 8000, { label: "sign in", run: () => showLogin() });
}
function dislike(card: Card): void {
@@ -293,7 +320,8 @@ async function setFollow(card: Card, follow: boolean): Promise {
update(follow);
try {
await api.postJSON("/local/follow", { handle, follow });
- toast(follow ? `following ${artist_name}` : `unfollowed ${artist_name}`);
+ if (follow && signedInUser?.guest && !localStorage.getItem(NUDGE_KEY)) nudgeSignIn();
+ else toast(follow ? `following ${artist_name}` : `unfollowed ${artist_name}`);
} catch (err) {
update(!follow);
toast((err as Error).message, 4000);
@@ -301,13 +329,17 @@ async function setFollow(card: Card, follow: boolean): Promise {
}
/// Shares a link that opens this app on the track, with pl8list's own link in the text.
-async function share(card: Card): Promise {
+function share(card: Card): Promise {
const { track } = card;
- const url = api.appTrackUrl(track);
const title = cleanTitle(track.title);
+ return shareLink(api.appTrackUrl(track), title, `${title} by ${track.artist_name} · ${api.trackUrl(track)}`);
+}
+
+/// The share sheet on phones, the clipboard elsewhere.
+async function shareLink(url: string, title: string, text = title): Promise {
if (navigator.share && isTouch) {
try {
- await navigator.share({ title, text: `${title} by ${track.artist_name} · ${api.trackUrl(track)}`, url });
+ await navigator.share({ title, text, url });
} catch { /* dismissed */ }
return;
}
@@ -336,13 +368,44 @@ player.on("timeupdate", () => {
}
// Where tracks can be mixed, start the next one so they overlap by the crossfade.
const lead = Math.max(1, player.crossfade);
- if (player.mixing && !advanced && !document.hidden && a.duration && a.duration - t < lead && cards[active + 1] && !sleepAtEnd) {
- advanced = true;
- if (!reported) { api.sendEvent(cards[active].track, "complete", listened); reported = true; }
- go(active + 1);
+ const left = a.duration - t;
+ if (player.mixing && !advanced && !document.hidden && a.duration && cards[active + 1] && !sleepAtEnd) {
+ // Long fades start on a bar, like a DJ would bring the next one in; up to a
+ // bar early, never late.
+ const toBar = player.crossfade >= BAR_FADE && !barTimer ? visual.secondsToBar() : null;
+ if (toBar !== null && left - toBar >= lead * 0.75 && left - toBar <= lead + 2 * 4 * beatSeconds()) {
+ const card = current();
+ barTimer = window.setTimeout(() => {
+ barTimer = 0;
+ if (current() === card) mixNext();
+ }, toBar * 1000);
+ } else if (left < lead) mixNext();
+ }
+ // Seeked back from a bar-timed fade: it waits for the end again.
+ if (barTimer && left > lead + 8) {
+ clearTimeout(barTimer);
+ barTimer = 0;
}
});
+/// Seconds per beat of the playing card.
+function beatSeconds(): number {
+ const bpm = current()?.track.bpm || 140;
+ return 60 / (bpm < 100 ? bpm * 2 : bpm);
+}
+
+/// Long crossfades at least this long start on a bar.
+const BAR_FADE = 4;
+
+function mixNext(): void {
+ clearTimeout(barTimer);
+ barTimer = 0;
+ if (advanced) return;
+ advanced = true;
+ if (!reported) { api.sendEvent(cards[active].track, "complete", listened); reported = true; }
+ go(active + 1);
+}
+
player.on("ended", () => {
const card = current();
if (card && !reported) {
@@ -510,8 +573,26 @@ function showStart(card: Card): void {
startEl.querySelector(".start-track")!.textContent = `${cleanTitle(t.title)} · ${t.artist_name}`;
}
+/// A tap on the overlay. Someone new becomes a guest with it: one tap, and it plays.
+async function tapToStart(): Promise {
+ if (signedInUser) {
+ start();
+ return;
+ }
+ if (startEl.classList.contains("busy")) return;
+ startEl.classList.add("busy");
+ try {
+ const { user } = await api.postJSON<{ user: User }>("/auth/guest");
+ signedIn(user);
+ start();
+ } catch (err) {
+ toast((err as Error).message, 4000);
+ }
+ startEl.classList.remove("busy");
+}
+
function start(): void {
- if (started) return;
+ if (started || !signedInUser) return;
started = true;
startEl.hidden = true;
player.unlock();
@@ -524,7 +605,12 @@ function start(): void {
: "click to pause · double-click to like · ? for shortcuts", 5000);
}
}
-startEl.addEventListener("click", start);
+startEl.addEventListener("click", (e) => {
+ // The sign-in link and the legal links are not a tap to start.
+ if ((e.target as Element).closest(".start-welcome")) return;
+ tapToStart();
+});
+$("start-signin").addEventListener("click", () => showLogin());
/// Start playing the current card after `start()`; activate() did not, as nothing played yet.
function activateAgain(card: Card): void {
@@ -759,11 +845,13 @@ function showSetting(name: string, value: string): void {
function setVisuals(v: VisualsSetting): void {
visual.visuals = v;
showSetting("visuals", v);
+ $("flares-setting").hidden = v !== "liquid";
}
filtersForm.addEventListener("change", (e) => {
const input = e.target as HTMLInputElement;
if (input.name === "visuals") setVisuals(input.value as VisualsSetting);
+ else if (input.name === "flares") visual.flares = input.value as FlareSetting;
else if (input.name === "crossfade") player.crossfade = Number(input.value);
else if (input.name === "bass") player.bassBoost = input.checked;
else if (input.name === "sleep") setSleep(input.value);
@@ -777,6 +865,8 @@ $("filters-clear").addEventListener("click", () => {
function showSettings(): void {
showSetting("visuals", visual.visuals);
+ showSetting("flares", visual.flares);
+ $("flares-setting").hidden = visual.visuals !== "liquid";
// A saved crossfade that is not one of the choices shows as the nearest one.
const fades = [...filtersForm.querySelectorAll("input[name=crossfade]")].map((i) => Number(i.value));
const fade = fades.reduce((a, b) => (Math.abs(b - player.crossfade) < Math.abs(a - player.crossfade) ? b : a));
@@ -900,7 +990,7 @@ const station = new Station((m) => {
if (!started) start();
jumpOnLoad = true;
setMode(m);
-});
+}, (url, title) => shareLink(url, title));
/// On the last card of a radio that has played everything known around its artist.
function updateRadioEnd(): void {
@@ -938,7 +1028,7 @@ document.addEventListener("keydown", (e) => {
if (k === "?") { sheets.help.toggle(); return; }
if (station.isOpen || Sheet.current || !loginEl.hidden) return;
if (!started) {
- if (k !== "Tab" && k !== "Shift") { e.preventDefault(); start(); }
+ if (k !== "Tab" && k !== "Shift") { e.preventDefault(); tapToStart(); }
return;
}
const card = current();
@@ -951,6 +1041,7 @@ document.addEventListener("keydown", (e) => {
else if (k === ".") player.seek(a.currentTime + 5);
else if (k === ",") player.seek(a.currentTime - 5);
else if (/^[0-9]$/.test(k) && a.duration) player.seek((Number(k) / 10) * a.duration);
+ else if (k === "d" && card) toDrop(card);
else if (k === "l" && card) setLike(card, !card.liked);
else if (k === "f" && card) setFollow(card, !card.track.followed);
else if (k === "r" && card) actions.radio(card);
@@ -997,28 +1088,24 @@ function showLogin({ resync = false } = {}): void {
loginEl.hidden = false;
emailForm.hidden = false;
codeForm.hidden = true;
- // Someone already listening is here only to sign in with pl8list.
- guestStart.hidden = !!signedInUser;
- loginCancel.hidden = !signedInUser;
loginError.textContent = resync ? "sign in with pl8list again to sync your library" : "";
- if (signedInUser) $("email").focus();
+ $("email").focus();
}
-loginCancel.addEventListener("click", () => { if (signedInUser) signedIn(signedInUser); });
+/// Nobody signed in on this device: the overlay welcomes them, and one tap plays.
+function showWelcome(): void {
+ Sheet.closeAll();
+ loginEl.hidden = true;
+ $("bar").hidden = true;
+ upNext.hidden = true;
+ started = false;
+ player.pause();
+ startEl.classList.add("welcome");
+ startEl.querySelector(".start-track")!.textContent = "endless riddim from pl8list. like it, and it comes back.";
+ startEl.hidden = false;
+}
-const guestStart = $("guest-start");
-$("guest-btn").addEventListener("click", async (e) => {
- const btn = e.currentTarget as HTMLButtonElement;
- btn.disabled = true;
- loginError.textContent = "";
- try {
- const { user } = await api.postJSON<{ user: User }>("/auth/guest");
- signedIn(user);
- } catch (err) {
- loginError.textContent = (err as Error).message;
- }
- btn.disabled = false;
-});
+loginCancel.addEventListener("click", () => { if (signedInUser) signedIn(signedInUser); else showWelcome(); });
async function withForm(form: HTMLFormElement, fn: () => Promise): Promise {
const buttons = form.querySelectorAll("button");
@@ -1119,10 +1206,28 @@ disconnectBtn.addEventListener("click", async () => {
}
});
+/// A guest's sign-out deletes everything they did: it takes a second tap.
+let forgetArmed = false;
+let forgetTimer = 0;
+
for (const [id, url] of [["logout-btn", "/auth/logout"], ["logout-all-btn", "/account/logout-all"]]) {
- $(id).addEventListener("click", async () => {
+ $(id).addEventListener("click", async (e) => {
+ const btn = e.currentTarget as HTMLButtonElement;
+ if (id === "logout-btn" && signedInUser?.guest && !forgetArmed) {
+ forgetArmed = true;
+ btn.textContent = "tap again: delete your likes, follows and history here";
+ btn.classList.add("danger");
+ clearTimeout(forgetTimer);
+ forgetTimer = window.setTimeout(() => {
+ forgetArmed = false;
+ btn.textContent = "forget me";
+ btn.classList.remove("danger");
+ }, 5000);
+ return;
+ }
try {
await api.postJSON(url);
+ localStorage.removeItem(NUDGE_KEY);
location.reload();
} catch (err) {
toast((err as Error).message, 4000);
@@ -1140,7 +1245,7 @@ deleteForm.addEventListener("submit", async (e) => {
e.preventDefault();
try {
await api.postJSON("/account/delete", { confirm: deleteConfirm.value.trim() });
- for (const key of [FILTERS_KEY, MODE_KEY, HINT_KEY]) localStorage.removeItem(key);
+ for (const key of [FILTERS_KEY, MODE_KEY, HINT_KEY, NUDGE_KEY]) localStorage.removeItem(key);
heard.clear();
location.reload();
} catch (err) {
@@ -1154,15 +1259,18 @@ function signedIn(user: User, pl8list?: Pl8Status): void {
showSync(pl8list);
loginEl.hidden = true;
$("bar").hidden = false;
- accountBtn.textContent = guest ? "?" : (user.name || user.handle)[0]?.toUpperCase() ?? "?";
- accountBtn.style.backgroundColor = guest ? "#ffffff30" : accentForName(user.handle);
- accountBtn.title = guest ? "guest" : `@${user.handle}`;
+ startEl.classList.remove("welcome");
+ accountBtn.textContent = guest ? "sign in" : (user.name || user.handle)[0]?.toUpperCase() ?? "?";
+ accountBtn.classList.toggle("guest", guest);
+ accountBtn.style.backgroundColor = guest ? "var(--glass-strong)" : accentForName(user.handle);
+ accountBtn.title = guest ? "listening as a guest: sign in, or forget me" : `@${user.handle}`;
$("account-handle").textContent = guest ? "listening as a guest" : `@${user.handle}`;
$("delete-handle").textContent = user.handle;
// A guest has one session and nothing on pl8list: signing out forgets them.
$("sync-title").textContent = guest ? "pl8list" : "pl8list sync";
$("sync-btn").textContent = guest ? "sign in with pl8list" : "resync with pl8list";
- $("logout-btn").textContent = guest ? "sign out and forget me" : "sign out";
+ $("logout-btn").textContent = guest ? "forget me" : "sign out";
+ forgetArmed = false;
for (const id of ["logout-all-btn", "delete-open"]) $(id).hidden = guest;
// Typing the login code counts as a user gesture, so playback may start right away.
if (navigator.userActivation?.hasBeenActive) start();
@@ -1171,7 +1279,16 @@ function signedIn(user: User, pl8list?: Pl8Status): void {
}
/// `/?t=handle/slug` opens on that track; the feed carries on after it.
+/// `/?r=handle` opens that artist's radio sheet over the feed.
async function openLinkOrFeed(): Promise {
+ const radio = new URLSearchParams(location.search).get("r");
+ if (radio) {
+ history.replaceState(null, "", location.pathname);
+ api.artist(radio).then(
+ ({ artist }) => station.open(artist.handle, artist.name, api.imgUrl(artist.img)),
+ (err) => toast(`couldn't open that radio: ${(err as Error).message}`, 4000),
+ );
+ }
const link = new URLSearchParams(location.search).get("t")?.split("/");
if (link?.length === 2) {
history.replaceState(null, "", location.pathname);
@@ -1187,5 +1304,5 @@ async function openLinkOrFeed(): Promise {
api.me().then(
(me) => signedIn(me.user, me.pl8list),
- () => showLogin(),
+ () => showWelcome(),
);
diff --git a/web/src/station.ts b/web/src/station.ts
index 31041e2..7d59fea 100644
--- a/web/src/station.ts
+++ b/web/src/station.ts
@@ -36,7 +36,13 @@ export class Station {
private timer = 0;
private known = new Set();
- constructor(private start: (m: Mode) => void) {
+ constructor(
+ private start: (m: Mode) => void,
+ share: (url: string, title: string) => void,
+ ) {
+ $("station-share").addEventListener("click", () => {
+ if (this.shown) share(api.appRadioUrl(this.shown.handle), `${this.shown.name} radio`);
+ });
$("station-close").addEventListener("click", () => this.close());
this.root.addEventListener("click", (e) => { if (e.target === this.root) this.close(); });
this.backBtn.addEventListener("click", () => {
diff --git a/web/src/style.css b/web/src/style.css
index 05162f1..b8e5afc 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -230,6 +230,7 @@ body.zen #bar { display: none; }
color: var(--muted);
}
#sleep-left { text-transform: none; letter-spacing: 0; color: var(--accent); }
+#flares-setting legend small { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.sheet-actions { display: flex; align-items: center; gap: 1rem; }
.sheet-tools { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sheet-tools input[type=search] {
@@ -646,6 +647,20 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
.wave-wrap.hover .wave-tip { opacity: 1; }
.time { width: 100%; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.counts { opacity: 0.8; }
+.to-drop {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.2em;
+ margin-right: auto;
+ padding: 0.05em 0.6em;
+ border: 1px solid var(--line-strong);
+ border-radius: 999px;
+ background: none;
+ color: var(--fg);
+ font-size: inherit;
+}
+.to-drop svg { width: 0.9em; height: 0.9em; }
+.to-drop:hover { border-color: var(--card-accent, var(--accent)); color: var(--card-accent, var(--accent)); }
.actions {
position: absolute;
@@ -839,6 +854,26 @@ body.zen #up-next { display: none; }
@keyframes beckon { to { box-shadow: 0 0 0 2rem transparent; } }
.start-track { margin: 0.4rem 0 0; font-weight: 700; font-size: 1.1rem; text-align: center; padding: 0 1rem; }
.start-hint { margin: 0; color: var(--muted); font-size: 0.85rem; }
+/* First visit: the overlay is the welcome, and the logo and the way to sign in show. */
+.start-logo, .start-welcome { display: none; }
+#start.welcome .start-logo { display: flex; align-items: center; gap: 0.3em; margin: 0 0 1rem; font-size: 2rem; }
+.start-logo svg { width: 1em; height: 1em; }
+.start-logo b { color: var(--accent); }
+#start.welcome .start-welcome {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.6rem;
+ position: absolute;
+ bottom: max(1.5rem, env(safe-area-inset-bottom));
+ max-width: 32rem;
+ padding: 0 1.2rem;
+ text-align: center;
+ cursor: default;
+}
+.start-welcome a { color: inherit; }
+/* A guest's account button says what it is for. */
+.avatar-btn.guest { width: auto; padding: 0 0.9rem; border-radius: 999px; font-weight: 600; font-size: 0.85rem; color: var(--fg); }
/* Radio sheet: a bottom sheet on phones, a centred box elsewhere. */
#station {
@@ -1001,10 +1036,7 @@ button.primary:disabled { opacity: 0.35; cursor: default; }
#code { font-family: ui-monospace, monospace; font-size: 1.4rem; letter-spacing: 0.5em; text-align: center; }
.login-box button[type=submit] { background: var(--accent); border: none; color: #fff; padding: 0.7em; font-weight: 600; }
/* Listening without an account comes first; signing in is the quieter way below. */
-#guest-start { display: flex; flex-direction: column; gap: 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
-#guest-btn { width: 100%; font-size: 1.05rem; padding: 0.8em; }
-#guest-start .or { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.85rem; text-align: center; }
-#guest-start:not([hidden]) ~ #email-form button[type=submit] { background: none; border: 1px solid var(--line-strong); color: var(--fg); }
+.login-box .or { margin: 0; color: var(--muted); font-size: 0.85rem; }
.login-box button[disabled] { opacity: 0.6; cursor: wait; }
.login-links { display: flex; justify-content: space-between; }
.login-box label.check { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--fg); cursor: pointer; }
diff --git a/web/src/visual.ts b/web/src/visual.ts
index 058c9ed..d07de17 100644
--- a/web/src/visual.ts
+++ b/web/src/visual.ts
@@ -6,7 +6,7 @@
// Web Audio, otherwise from the track's waveform at the current position.
import { artistImg } from "./api";
-import { LiquidBlob, SPILL } from "./blob/blob";
+import { type FlareSetting, LiquidBlob, SPILL } from "./blob/blob";
import { lookFor } from "./blob/style";
import type { Card } from "./cards";
import { accentFor, accentForName } from "./color";
@@ -15,9 +15,11 @@ import type { Player } from "./player";
export type VisualsSetting = "liquid" | "simple";
const VISUALS_KEY = "pl8inf.visuals";
+const FLARES_KEY = "pl8inf.flares";
const SLOP = 10; // px before a press on the drop turns it
const REACH = 1.2; // how far past the art's radius the drop can be grabbed
const IDLE_FPS = 15; // a paused drop keeps breathing, slowly and at a low frame rate
+const BAR_LOCK = 2; // kick strength on the downbeat before the bar counts as known
export class Visualizer {
private raf = 0;
@@ -28,6 +30,7 @@ export class Visualizer {
private blob: LiquidBlob | null | undefined;
private reduced = matchMedia("(prefers-reduced-motion: reduce)");
private setting: VisualsSetting = localStorage.getItem(VISUALS_KEY) === "simple" ? "simple" : "liquid";
+ private flareSetting: FlareSetting = (["on", "off"] as const).find((v) => v === localStorage.getItem(FLARES_KEY)) ?? "auto";
private debug: ((f: Features) => void) | null = null;
private dropDebug: ((text: string) => void) | null = null;
/// A press on the drop; `on` once it moved enough to turn it.
@@ -73,12 +76,24 @@ export class Visualizer {
this.attach(this.card, true);
}
+ get flares(): FlareSetting {
+ return this.flareSetting;
+ }
+
+ /// Solar flares round the drop: auto, on or off.
+ set flares(v: FlareSetting) {
+ this.flareSetting = v;
+ localStorage.setItem(FLARES_KEY, v);
+ if (this.blob) this.blob.flareSetting = v;
+ }
+
/// Whether the liquid drop runs: wanted, motion allowed, and WebGL2 works.
private liquid(): LiquidBlob | null {
if (this.setting !== "liquid" || this.reduced.matches || this.blob === null) return null;
if (this.blob === undefined) {
this.blob = LiquidBlob.create(this.touch);
if (this.blob) {
+ this.blob.flareSetting = this.flareSetting;
// Plain art while the GPU is gone; the drop comes back with it.
this.blob.onLost = () => this.card?.el?.classList.remove("liquid");
this.blob.onRestored = () => this.attach(this.card, true);
@@ -87,6 +102,14 @@ export class Visualizer {
return this.blob?.lost ? null : this.blob;
}
+ /// Seconds until the next bar starts, where the analyser hears the music and the
+ /// bar is locked onto its kicks; null otherwise.
+ secondsToBar(): number | null {
+ const f = this.features.f;
+ if (!this.player.mixing || this.player.audio.paused || f.lock < BAR_LOCK) return null;
+ return (1 - f.bar) * 4 * f.period;
+ }
+
/// A play/pause from a tap was taken back by the second tap of a double-tap.
cancelFlash(): void {
this.blob?.settleIcon();
@@ -100,6 +123,7 @@ export class Visualizer {
this.card.el?.classList.remove("liquid", "turning");
this.grab = null;
}
+ if (this.card !== card) this.features.setTempo(card?.track.bpm ?? null);
this.card = card;
const blob = this.liquid();
const slot = card?.el?.querySelector(".art");