split 4/4: player.js (the state machine and the one <audio>, moved as-is), ui/player.js, ui/library.js, ui/sheet.js, ui/taste.js, mashup.js and app.js (boot, window.g, brain.js globals); index.html is markup + CSS + two script tags
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Dhu3iHseRewQ2WpBSVLokG
This commit is contained in:
Claude Fable 5.1 committed
1 parent
cc6c971423
commit
479e110f5e
9 files changed
+1297
-1264
No files matched your search
+173
@@ -0,0 +1,173 @@
|
||||
import { db, tapeById, tapeRows, tapeSpec } from "../store.js";
|
||||
import { $, ids, state, toast } from "../core.js";
|
||||
import { KEYS, drawCover, hash32 } from "../covers.js";
|
||||
import { b64u, resumeStation, stationFrom } from "../app.js";
|
||||
import { stationSheet } from "../ui/sheet.js";
|
||||
import { keepLabel, reactionEmoji } from "../ui/player.js";
|
||||
import { playJob } from "../player.js";
|
||||
import { mashup } from "../mashup.js";
|
||||
export async function listStations() {
|
||||
const list = await db.all("stations"); const box = $("#stations"), row = $("#stationRow"); row.innerHTML = "";
|
||||
box.classList.toggle("hidden", !list.length);
|
||||
for (const s of list) {
|
||||
const d = document.createElement("div"); d.className = "s" + (s.id === state.stationId ? " on" : "");
|
||||
const c = document.createElement("canvas"); c.width = c.height = 144;
|
||||
drawCover(c, { seed: s.seed, title: "", tags: "", bpm: 100, key: KEYS[hash32(s.seed) % 12], energy: 0.5 }, { lit: 0.9 });
|
||||
d.append(c, Object.assign(document.createElement("b"), { textContent: s.name || s.seed }), Object.assign(document.createElement("small"), { textContent: `${s.played || 0} tracks` }));
|
||||
d.addEventListener("click", () => resumeStation(s));
|
||||
const dots = Object.assign(document.createElement("button"), { className: "dots", textContent: "⋯", title: "rename, reset or delete" });
|
||||
dots.addEventListener("click", (e) => { e.stopPropagation(); stationSheet(s.id); });
|
||||
d.append(dots);
|
||||
row.append(d);
|
||||
}
|
||||
}
|
||||
/* the station sheet: rename, reset its taste, delete it (kept tracks stay) */
|
||||
|
||||
export function libNow() {
|
||||
const bar = $("#libNow"); if (!bar) return;
|
||||
const cur = state.current && state.current.spec;
|
||||
for (const d of document.querySelectorAll("#libGrid .t")) { const on = !!(cur && d.dataset.id === cur.id); d.classList.toggle("now", on); d.classList.toggle("paused", on && !state.playing); }
|
||||
if (!cur) { bar.classList.add("hidden"); return; }
|
||||
bar.classList.remove("hidden");
|
||||
drawCover(bar.querySelector("canvas"), cur); bar.querySelector("b").textContent = cur.title; bar.querySelector("small").textContent = (state.station || cur.seed || "").toUpperCase();
|
||||
bar.querySelector("#libPlay svg").innerHTML = state.playing ? '<path d="M6 5h4v14H6zm8 0h4v14h-4z"/>' : '<path d="M8 5v14l11-7z"/>';
|
||||
}
|
||||
$("#libPlay").addEventListener("click", () => $("#play").click());
|
||||
$("#libOpen").addEventListener("click", () => { $("#lib").classList.add("hidden"); $("#player").classList.remove("hidden"); $("#seed").classList.add("hidden"); });
|
||||
|
||||
|
||||
$("#libBtn").addEventListener("click", async () => {
|
||||
const list = await db.all(); const g = $("#libGrid"); g.innerHTML = "";
|
||||
$("#libEmpty").classList.toggle("hidden", list.length > 0);
|
||||
const cur = state.current && state.current.spec;
|
||||
const tile = (t, inKept = false) => {
|
||||
const d = document.createElement("div"); d.className = "t" + (cur && t.id === cur.id ? " on" : "");
|
||||
const art = document.createElement("div"); art.className = "art";
|
||||
const c = document.createElement("canvas"); c.width = c.height = 260; drawCover(c, t.spec); art.append(c);
|
||||
if (t.kept && !inKept) art.append(Object.assign(document.createElement("span"), { className: "kept", textContent: "KEPT" }));
|
||||
const re = reactionEmoji(t.spec.reaction).trim();
|
||||
if (re) art.append(Object.assign(document.createElement("span"), { className: "re", textContent: re, title: t.spec.reaction }));
|
||||
const addT = Object.assign(document.createElement("button"), { className: "addTape", textContent: "＋", title: "add to a tape" });
|
||||
addT.addEventListener("click", (e) => { e.stopPropagation(); pickTape(t); });
|
||||
const fromT = Object.assign(document.createElement("button"), { className: "fromT", textContent: "*", title: "start a station from this track" });
|
||||
fromT.addEventListener("click", (e) => { e.stopPropagation(); $("#lib").classList.add("hidden"); stationFrom(t); });
|
||||
art.append(addT, fromT);
|
||||
d.append(art, Object.assign(document.createElement("b"), { textContent: t.spec.title }), Object.assign(document.createElement("small"), { textContent: `${t.spec.bpm} bpm · ${t.spec.key}${(t.plays || 0) > 1 ? " · ×" + t.plays : ""}`, title: t.spec.seed }));
|
||||
d.dataset.id = t.id; if (state.current && state.current.spec && state.current.spec.id === t.id) { d.classList.add("now"); if (!state.playing) d.classList.add("paused"); }
|
||||
d.addEventListener("click", () => {
|
||||
// the library stays open; the track plays underneath, and the bar at the bottom follows it
|
||||
if (state.current && state.current.spec && state.current.spec.id === t.id) { $("#play").click(); return; }
|
||||
const job = { id: ++ids.seq, spec: { ...t.spec }, blob: t.blob, err: null, done: Promise.resolve() }; state.seed = t.spec.seed; $("#player").classList.remove("hidden"); $("#seed").classList.add("hidden"); state.audio.pause(); playJob(job);
|
||||
});
|
||||
return d;
|
||||
};
|
||||
// kept first, then everything played, grouped by station (channel), newest station first
|
||||
const stations = await db.all("stations"); const byId = Object.fromEntries(stations.map((s) => [s.id, s]));
|
||||
const head = (text, seed, count) => {
|
||||
const h = document.createElement("h3"); h.style.gridColumn = "1/-1";
|
||||
if (seed) { const c = document.createElement("canvas"); c.width = c.height = 44; drawCover(c, { seed, title: "", tags: "", bpm: 100, key: KEYS[hash32(seed) % 12], energy: 0.5 }); h.append(c); }
|
||||
h.append(Object.assign(document.createElement("span"), { textContent: text }));
|
||||
if (count != null) h.append(Object.assign(document.createElement("small"), { textContent: `· ${count}` }));
|
||||
return h;
|
||||
};
|
||||
// tapes first: a strip of mixtapes, and a way to start one
|
||||
const tapes = await db.all("tapes");
|
||||
g.append(head("TAPES", "", tapes.length));
|
||||
const strip = document.createElement("div"); strip.id = "tapeRow";
|
||||
for (const tp of tapes) {
|
||||
const s = document.createElement("div"); s.className = "s";
|
||||
const tc = document.createElement("div"); tc.className = "tc one";
|
||||
const rows = tp.ids.map((id) => list.find((t) => t.id === id)).filter(Boolean);
|
||||
const c = document.createElement("canvas"); c.width = c.height = 180; drawCover(c, tapeSpec(tp, rows)); tc.append(c);
|
||||
s.append(tc, Object.assign(document.createElement("b"), { textContent: tp.name }), Object.assign(document.createElement("small"), { textContent: `${tp.ids.length} tracks` }));
|
||||
s.addEventListener("click", () => openTape(tp.id));
|
||||
strip.append(s);
|
||||
}
|
||||
const nw = document.createElement("div"); nw.className = "s new"; nw.innerHTML = '<div class="tc">＋</div><b>new tape</b>';
|
||||
nw.addEventListener("click", async () => { const name = prompt("Name the tape:", ""); if (!name) return; const tp = { id: "tape-" + Date.now(), name: name.trim().slice(0, 60), ids: [], made: Date.now(), last: Date.now() }; await db.put(tp, "tapes"); openTape(tp.id); });
|
||||
strip.append(nw); g.append(strip);
|
||||
const kept = list.filter((t) => t.kept);
|
||||
if (kept.length) { g.append(head("KEPT", "", kept.length)); for (const t of kept) g.append(tile(t, true)); }
|
||||
const groups = new Map();
|
||||
for (const t of list) { const k = t.spec.stationId || "seed:" + t.spec.seed; if (!groups.has(k)) groups.set(k, []); groups.get(k).push(t); }
|
||||
for (const [k, rows] of groups) {
|
||||
const s = byId[k]; const name = (s && s.name) || rows[0].spec.seed, seed = (s && s.seed) || rows[0].spec.seed;
|
||||
g.append(head(name.toUpperCase(), seed, rows.length));
|
||||
for (const t of rows) g.append(tile(t));
|
||||
}
|
||||
libNow();
|
||||
$("#libCost").textContent = `~$${state.cost.toFixed(2)} of music rendered from this browser · replays from the library are free`;
|
||||
$("#lib").classList.remove("hidden");
|
||||
});
|
||||
$("#libClose").addEventListener("click", () => $("#lib").classList.add("hidden"));
|
||||
|
||||
/* ---------- mixtapes: a named, ordered list of tracks; play through, repeat all, share as a link ---------- */
|
||||
async function pickTape(track) {
|
||||
const p = $("#tapePick"); p.innerHTML = "";
|
||||
const tapes = await db.all("tapes");
|
||||
p.append(Object.assign(document.createElement("h4"), { textContent: "ADD “" + track.spec.title.toUpperCase() + "” TO" }));
|
||||
const add = async (tp) => { if (tp.virtual) { const row = await db.get(track.id); if (row && !row.kept) { row.kept = true; await db.put(row); keepLabel().catch(() => {}); } } else if (!tp.ids.includes(track.id)) { tp.ids.push(track.id); tp.last = Date.now(); await db.put(tp, "tapes"); } p.classList.add("hidden"); toast(`On “${tp.name}”.`); };
|
||||
for (const tp of tapes) { const b = document.createElement("button"); b.textContent = `${tp.name} · ${tp.ids.length}`; b.addEventListener("click", () => add(tp)); p.append(b); }
|
||||
const inp = document.createElement("input"); inp.placeholder = "new tape…"; inp.maxLength = 60;
|
||||
inp.addEventListener("keydown", async (e) => { if (e.key !== "Enter") return; e.preventDefault(); const name = inp.value.trim(); if (!name) return; const tp = { id: "tape-" + Date.now(), name, ids: [], made: Date.now(), last: Date.now() }; await add(tp); });
|
||||
const close = document.createElement("button"); close.textContent = "cancel"; close.addEventListener("click", () => p.classList.add("hidden"));
|
||||
p.append(inp, close); p.classList.remove("hidden"); inp.focus({ preventScroll: true });
|
||||
}
|
||||
state.tape = null; // { id, ids, i, loop } while a tape is playing
|
||||
/* one tape by id. KEPT is virtual (db.all("tapes") writes it from the kept tracks), so it is the one that needs the list */
|
||||
|
||||
async function openTape(id) {
|
||||
const tp = await tapeById(id); if (!tp) return;
|
||||
$("#lib").classList.add("hidden"); $("#tape").classList.remove("hidden"); $("#tape").dataset.id = id;
|
||||
$("#tapeName").value = tp.name; $("#tapeName").disabled = !!tp.virtual; $("#tapeDelete").classList.toggle("hidden", !!tp.virtual);
|
||||
const rows = await tapeRows(tp), list = $("#tapeList"); list.innerHTML = "";
|
||||
drawCover($("#tapeCover canvas"), tapeSpec(tp, rows));
|
||||
$("#tapeEmpty").classList.toggle("hidden", rows.length > 0);
|
||||
$("#tapeLoop").classList.toggle("go", !!(state.tape && state.tape.id === id && state.tape.loop));
|
||||
rows.forEach((t, i) => {
|
||||
const r = document.createElement("div"); r.className = "row" + (state.current && state.current.spec.id === t.id ? " on" : "");
|
||||
const c = document.createElement("canvas"); c.width = c.height = 120; drawCover(c, t.spec);
|
||||
const m = document.createElement("div"); m.className = "m"; m.append(Object.assign(document.createElement("b"), { textContent: `${i + 1}. ${t.spec.title}` }), Object.assign(document.createElement("small"), { textContent: `${t.spec.bpm} bpm · ${t.spec.key} · ${t.spec.seed}` }));
|
||||
const play = () => playTape(tp, i);
|
||||
c.addEventListener("click", play); m.addEventListener("click", play);
|
||||
const ctl = document.createElement("div"); ctl.className = "ctl";
|
||||
const mv = async (d) => { const j = i + d; if (j < 0 || j >= tp.ids.length) return; [tp.ids[i], tp.ids[j]] = [tp.ids[j], tp.ids[i]]; await db.put(tp, "tapes"); openTape(id); };
|
||||
const up = Object.assign(document.createElement("button"), { textContent: "▲", title: "earlier" }), dn = Object.assign(document.createElement("button"), { textContent: "▼", title: "later" }), rm = Object.assign(document.createElement("button"), { textContent: "✕", title: "remove from tape" });
|
||||
up.addEventListener("click", () => mv(-1)); dn.addEventListener("click", () => mv(1));
|
||||
rm.addEventListener("click", async () => { if (tp.virtual) { const row = await db.get(tp.ids[i]); if (row) { row.kept = false; await db.put(row); } } else { tp.ids.splice(i, 1); await db.put(tp, "tapes"); } openTape(id); });
|
||||
ctl.append(up, dn, rm); r.append(c, m, ctl); list.append(r);
|
||||
});
|
||||
}
|
||||
export async function playTape(tp, i, loop) {
|
||||
const rows = await tapeRows(tp); if (!rows.length) return;
|
||||
i = ((i % rows.length) + rows.length) % rows.length;
|
||||
state.tape = { id: tp.id, ids: rows.map((t) => t.id), i, loop: loop ?? (state.tape && state.tape.id === tp.id ? state.tape.loop : false) };
|
||||
$("#tape").classList.add("hidden"); $("#seed").classList.add("hidden"); $("#player").classList.remove("hidden");
|
||||
$("#stationName").textContent = "📼 " + tp.name;
|
||||
const t = rows[i]; state.audio.pause();
|
||||
await playJob({ id: ++ids.seq, spec: t.spec, blob: t.blob, err: null, done: Promise.resolve(), stepping: true });
|
||||
}
|
||||
$("#tapePlay").addEventListener("click", async () => { const tp = await tapeById($("#tape").dataset.id); if (tp) playTape(tp, 0); });
|
||||
$("#tapeLoop").addEventListener("click", async () => { const tp = await tapeById($("#tape").dataset.id); if (!tp) return; const on = !(state.tape && state.tape.id === tp.id && state.tape.loop); if (state.tape && state.tape.id === tp.id) state.tape.loop = on; else await playTape(tp, 0, on); $("#tapeLoop").classList.toggle("go", on); toast(on ? "Repeating the whole tape." : "Tape plays through once."); });
|
||||
$("#tapeName").addEventListener("change", async () => { const tp = await tapeById($("#tape").dataset.id); if (!tp) return; tp.name = $("#tapeName").value.trim().slice(0, 60) || tp.name; await db.put(tp, "tapes"); });
|
||||
$("#tapeDelete").addEventListener("click", async () => { const id = $("#tape").dataset.id; if (!confirm("Delete this tape? The tracks stay in the library.")) return; await db.del(id, "tapes"); if (state.tape && state.tape.id === id) state.tape = null; $("#tape").classList.add("hidden"); $("#libBtn").click(); });
|
||||
/* mashups: up to three tracks in, one out. The DJ writes a sheet that fuses theirs; the renderer is handed the
|
||||
tracks themselves, cut and crossfaded into one reference (OfflineAudioContext, off the playback path, so iOS is
|
||||
fine), and the mash is the station's next track. */
|
||||
|
||||
$("#tapeMash").addEventListener("click", async () => {
|
||||
const tp = await tapeById($("#tape").dataset.id); if (!tp) return;
|
||||
const rows = await tapeRows(tp);
|
||||
$("#tape").classList.add("hidden"); $("#player").classList.remove("hidden"); $("#seed").classList.add("hidden");
|
||||
mashup(rows);
|
||||
});
|
||||
$("#tapeShare").addEventListener("click", async () => {
|
||||
const tp = await tapeById($("#tape").dataset.id); if (!tp) return;
|
||||
const rows = await tapeRows(tp);
|
||||
const payload = { name: tp.name, tracks: rows.map(({ spec: s }) => ({ seed: s.seed, station: s.station || "", title: s.title, tags: s.tags, lyrics: s.lyrics || "", bpm: s.bpm, key: s.key, energy: s.energy, line: s.line || "" })) };
|
||||
const url = `${location.origin}/?tape=${b64u(JSON.stringify(payload))}`;
|
||||
if (navigator.share) { try { await navigator.share({ title: tp.name, text: `${tp.name} · a gandora mixtape, ${rows.length} tracks`, url }); return; } catch {} }
|
||||
try { await navigator.clipboard.writeText(url); toast("Tape link copied. It renders each track for whoever opens it."); } catch { prompt("Copy this link:", url); }
|
||||
});
|
||||
$("#tapeClose").addEventListener("click", () => $("#tape").classList.add("hidden"));
|
||||
// a shared tape (?tape=): make it a tape of this browser's own, rendering each track as it comes up
|
||||
+270
@@ -0,0 +1,270 @@
|
||||
import { $, hooks, mmss, ids, state, toast } from "../core.js";
|
||||
import { db, logEvent, remember, saveStation } from "../store.js";
|
||||
import { drawCover } from "../covers.js";
|
||||
import { playJob } from "../player.js";
|
||||
import { libNow, listStations } from "../ui/library.js";
|
||||
import { cookNext, shareLink } from "../app.js";
|
||||
let trailIds = [];
|
||||
export async function drawTrail() {
|
||||
const el = $("#trail"); if (!el) return;
|
||||
const rows = (await db.all()).filter((t) => t.spec && t.spec.stationId === state.stationId).sort((a, b) => a.made - b.made);
|
||||
trailIds = rows.map((t) => t.id);
|
||||
const cur = state.current && state.current.spec && state.current.spec.id;
|
||||
if (trailIds.length < 2) { el.textContent = ""; return; }
|
||||
el.textContent = "";
|
||||
for (const t of rows) {
|
||||
const c = document.createElement("canvas"); c.width = c.height = 120;
|
||||
drawCover(c, t.spec); c.title = t.spec.title; c.dataset.id = t.id;
|
||||
if (t.kept) c.classList.add("kept"); if (t.id === cur) c.classList.add("on");
|
||||
el.append(c);
|
||||
}
|
||||
const on = el.querySelector(".on"); if (on) on.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
|
||||
}
|
||||
$("#trail").addEventListener("wheel", (e) => { if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) { e.currentTarget.scrollLeft += e.deltaY; e.preventDefault(); } }, { passive: false });
|
||||
$("#trail").addEventListener("click", async (e) => {
|
||||
e.stopPropagation(); // the cover underneath flips to lyrics on click
|
||||
const c = e.target.closest("canvas"); if (!c) return;
|
||||
const id = c.dataset.id; if (state.current && state.current.spec && state.current.spec.id === id) return;
|
||||
const row = await db.get(id); if (!row) return;
|
||||
state.recent = trailIds.slice(); state.pos = trailIds.indexOf(id);
|
||||
state.audio.pause();
|
||||
await playJob({ id: ++ids.seq, spec: row.spec, blob: row.blob, err: null, done: Promise.resolve(), stepping: true });
|
||||
});
|
||||
// step through what has already played this session: -1 back, +1 forward; false when there's nothing there
|
||||
|
||||
export function setPlayIcon() {
|
||||
$("#playIco").innerHTML = state.playing ? '<path d="M6 5h4v14H6zm8 0h4v14h-4z"/>' : '<path d="M8 5v14l11-7z"/>';
|
||||
libNow();
|
||||
}
|
||||
/* the library's own now-playing: ring the tile, keep the bottom bar current */
|
||||
|
||||
/* ---------- reactions: each one edits the taste, and the next cover shows it ---------- */
|
||||
const EMOJI_MEANING = {
|
||||
"🔥": { like: "more exactly like the current track" }, "❤️": { like: "the current track's sound; the listener loves this one" },
|
||||
"😴": { avoid: "this sleepy energy; wake it up", energy: +0.25 }, "🌧️": { like: "sadder, more melancholy, minor keys" },
|
||||
"⚡": { like: "faster and louder", energy: +0.3 }, "🎸": { like: "more guitar" }, "🎹": { like: "more piano and keys" },
|
||||
"🚫": { avoid: "anything like the current track" },
|
||||
};
|
||||
/* where in the track a reaction landed: the second, and the lyric section playing then (sections assumed evenly spread) */
|
||||
function sectionAt(spec, t) {
|
||||
const marks = [...String(spec.lyrics || "").matchAll(/\[([a-z -]+)\]/gi)].map((m) => m[1].toLowerCase());
|
||||
if (!marks.length) return "";
|
||||
const dur = state.audio.duration || spec.seconds || 120;
|
||||
return marks[Math.min(marks.length - 1, Math.floor(t / dur * marks.length))];
|
||||
}
|
||||
|
||||
function markReaction(spec, emoji, t) {
|
||||
const dur = state.audio.duration || spec.seconds || 120;
|
||||
spec.hits = (spec.hits || []).concat([{ e: emoji, t: Math.round(t), s: sectionAt(spec, t) }]).slice(-24);
|
||||
if (state.current.spec === spec) drawTicks(spec, dur);
|
||||
}
|
||||
/* the ticks above the bar: hits within a few percent of each other become one pill reading them in order */
|
||||
export function drawTicks(spec, dur) {
|
||||
const bar = $("#bar"); if (!bar) return;
|
||||
for (const t of bar.querySelectorAll("em")) t.remove();
|
||||
const hits = (spec.hits || []).slice().sort((a, b) => a.t - b.t), groups = [];
|
||||
for (const h of hits) { const g = groups[groups.length - 1]; if (g && h.t - g.at <= dur * 0.04) { g.e.push(h.e); g.last = h.t; } else groups.push({ at: h.t, last: h.t, e: [h.e] }); }
|
||||
let below = false, prevAt = -Infinity;
|
||||
for (const g of groups) {
|
||||
const tick = document.createElement("em"); const shown = g.e.slice(0, 3).join("") + (g.e.length > 3 ? "+" + (g.e.length - 3) : "");
|
||||
tick.textContent = shown; tick.title = `${g.e.join(" ")} at ${mmss(g.at)}${g.last !== g.at ? "–" + mmss(g.last) : ""} · tap to jump there`;
|
||||
below = g.at - prevAt <= dur * 0.12 ? !below : false; prevAt = g.last; // close neighbours alternate sides
|
||||
tick.classList.toggle("below", below);
|
||||
tick.style.left = Math.min(100, (g.at + g.last) / 2 / dur * 100) + "%";
|
||||
tick.addEventListener("click", (e) => { e.stopPropagation(); if (state.audio.duration) state.audio.currentTime = Math.min(state.audio.duration - 0.5, g.at); });
|
||||
bar.append(tick);
|
||||
}
|
||||
}
|
||||
async function react(emoji, text) {
|
||||
const cur = state.current && state.current.spec; if (!cur) return;
|
||||
const m = EMOJI_MEANING[emoji] || (emoji ? { notes: emoji } : null);
|
||||
const at = state.audio.currentTime || 0, sec = sectionAt(cur, at), when = ` at ${mmss(at)}${sec ? " (" + sec + ")" : ""}`;
|
||||
const who = `${cur.title} (${cur.tags.split(",").slice(0, 3).join(",")})${when}`;
|
||||
if (emoji) markReaction(cur, emoji, at);
|
||||
logEvent("react", { e: emoji || undefined, txt: text ? String(text).slice(0, 60) : undefined, at: Math.round(at), st: state.station || state.seed || "", title: cur.title });
|
||||
if (m) {
|
||||
if (m.like) state.taste.like.push(`${m.like} — re ${who}`);
|
||||
if (m.avoid) state.taste.avoid.push(`${m.avoid} — re ${who}`);
|
||||
if (m.notes) state.taste.notes.push(`${m.notes} (an emoji, re ${who})`);
|
||||
cur.reaction = (cur.reaction ? cur.reaction + " " : "") + emoji;
|
||||
}
|
||||
if (text) {
|
||||
state.taste.notes.push(`${text} (re ${who})`); cur.reaction = (cur.reaction ? cur.reaction + " " : "") + `"${text}"`;
|
||||
// "no violin", "less classical, no strings", "more guitar": the named things go on the lists and on the sheet as tag signals
|
||||
const parts = text.toLowerCase().split(/[,;.!]|\band\b/).map((s) => s.trim()).filter(Boolean);
|
||||
for (const p of parts) {
|
||||
const neg = p.match(/^(?:no|not|less|stop|without|drop|enough|never|skip|hate|lose|kill|cut|no more)\s+(?:the\s+|any\s+)?([a-z][a-z0-9 -]{1,30}?)$/);
|
||||
const pos = p.match(/^(?:more|love|loving|keep|add|give me|i like|i love)\s+(?:the\s+|this\s+|that\s+)?([a-z][a-z0-9 -]{1,30}?)$/);
|
||||
if (neg) { state.taste.avoid.push(`${neg[1]} (listener said: "${p}")`); cur.reaction += " -" + neg[1].replace(/\s+/g, "_"); }
|
||||
else if (pos) { state.taste.like.push(`${pos[1]} (listener said: "${p}")`); cur.reaction += " +" + pos[1].replace(/\s+/g, "_"); }
|
||||
}
|
||||
}
|
||||
for (const k of ["like", "avoid", "notes"]) state.taste[k] = state.taste[k].slice(-8);
|
||||
// a next track already in the oven was planned before this was said: it still plays (it's paid for), the one after hears it
|
||||
const later = !!state.nextJob;
|
||||
if (!later) cookNext();
|
||||
saveStation().catch(() => {});
|
||||
remember(state.current, false).catch(() => {}); // the reaction rides with the track in the library
|
||||
toast(`${emoji || "Noted"} — the ${later ? "track after next" : "next track"} hears it.`);
|
||||
if (hooks.reacted) hooks.reacted(emoji, text);
|
||||
}
|
||||
|
||||
|
||||
const tagState = (spec, tag) => { const r = " " + String(spec.reaction || "") + " "; const t = tag.replace(/\s+/g, "_"); const L = r.lastIndexOf(" +" + t + " "), N = r.lastIndexOf(" -" + t + " "), Z = r.lastIndexOf(" ~" + t + " "); const m = Math.max(L, N, Z); return m < 0 || m === Z ? "" : m === L ? "like" : "avoid"; };
|
||||
export const reactionEmoji = (r) => String(r || "").replace(/(?:^|\s)[+\-~][^\s]+/g, "").replace(/"[^"]*"/g, "💬").replace(/\[skipped\]/g, "⏭").replace(/\s+/g, "");
|
||||
state.tagsOpen = false; // the tag row shows a few, and folds the rest behind "… more"
|
||||
export function showTags(spec) {
|
||||
const row = $("#tagRow"); row.innerHTML = ""; const list = $("#tagList"); list.innerHTML = "";
|
||||
const tags = String(spec.tags || "").split(",").map((t) => t.trim()).filter(Boolean).slice(0, 12);
|
||||
const extra = [...String(spec.reaction || "").matchAll(/(?:^|\s)\+([^\s]+)/g)].map((m) => m[1].replace(/_/g, " ")).filter((t) => !tags.includes(t));
|
||||
const total = tags.length + extra.length, liked = [...tags, ...extra].filter((t) => tagState(spec, t)).length;
|
||||
// one line closed: TAGS ▾ · bpm · key; open: every tag as a chip, and + tag
|
||||
const kind = spec.break ? (spec.sponsored ? "sponsored" : "intermission") : spec.mashOf ? "mashup" : spec.remixOf ? "remix" : "";
|
||||
for (const m of [`${spec.bpm} bpm`, spec.key, kind].filter(Boolean)) { const b = document.createElement("button"); b.className = "meta"; b.textContent = m; b.disabled = true; row.append(b); }
|
||||
const f = document.createElement("button"); f.className = "fold"; f.textContent = (state.tagsOpen ? "TAGS ▴" : "TAGS ▾") + (liked && !state.tagsOpen ? ` ·${liked}` : "");
|
||||
f.addEventListener("click", () => { state.tagsOpen = !state.tagsOpen; showTags(spec); }); row.append(f);
|
||||
if (!state.tagsOpen) return;
|
||||
for (const tag of [...tags, ...extra]) {
|
||||
const b = document.createElement("button"); b.textContent = tag; b.className = tagState(spec, tag);
|
||||
b.addEventListener("click", () => tagTap(spec, tag, b));
|
||||
list.append(b);
|
||||
}
|
||||
const add = document.createElement("button"); add.className = "add"; add.textContent = "+ tag";
|
||||
add.addEventListener("click", () => {
|
||||
const inp = document.createElement("input"); inp.placeholder = "more …"; inp.maxLength = 30; list.replaceChild(inp, add); inp.focus();
|
||||
const done = () => { const v = inp.value.trim().toLowerCase(); if (v) { tagTap(spec, v, null, "like"); } else showTags(spec); };
|
||||
inp.addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); done(); } if (e.key === "Escape") showTags(spec); });
|
||||
inp.addEventListener("blur", done);
|
||||
});
|
||||
list.append(add);
|
||||
}
|
||||
function tagTap(spec, tag, btn, force) {
|
||||
const cur = force ? "" : tagState(spec, tag), next = force || (cur === "" ? "like" : cur === "like" ? "avoid" : "");
|
||||
const t = tag.replace(/\s+/g, "_");
|
||||
if (next === "") { spec.reaction = (spec.reaction || "") + " ~" + t; state.taste.like = state.taste.like.filter((s) => !s.startsWith("the tag " + JSON.stringify(tag))); state.taste.avoid = state.taste.avoid.filter((s) => !s.startsWith("the tag " + JSON.stringify(tag))); toast(`${tag}: let go.`); }
|
||||
else {
|
||||
spec.reaction = (spec.reaction || "") + " " + (next === "like" ? "+" : "-") + t;
|
||||
const note = `the tag ${JSON.stringify(tag)}`;
|
||||
state.taste.like = state.taste.like.filter((s) => !s.startsWith(note)); state.taste.avoid = state.taste.avoid.filter((s) => !s.startsWith(note));
|
||||
(next === "like" ? state.taste.like : state.taste.avoid).push(note + (next === "like" ? " — more of this" : " — less of this"));
|
||||
toast(next === "like" ? `More ${tag}.` : `Less ${tag}.`);
|
||||
}
|
||||
for (const k of ["like", "avoid"]) state.taste[k] = state.taste[k].slice(-10);
|
||||
showTags(spec);
|
||||
if (state.current && state.current.spec === spec) remember(state.current, false).catch(() => {});
|
||||
saveStation().catch(() => {});
|
||||
if (!state.nextJob) cookNext();
|
||||
if (typeof rebuildBrains === "function") rebuildBrains().catch(() => {});
|
||||
}
|
||||
$("#lyric").addEventListener("click", () => { const s = $("#say"); s.focus(); s.placeholder = "reply to the DJ…"; });
|
||||
/* lyrics: the DJ's words for the track, under the title; tap LYRICS or the cover */
|
||||
export function showLyrics(spec) {
|
||||
const has = !!(spec.lyrics && spec.lyrics.trim()), p = $("#lyrics");
|
||||
p.innerHTML = ""; p.classList.toggle("none", !has);
|
||||
if (!has) { p.textContent = "instrumental"; return; }
|
||||
for (const line of spec.lyrics.split(/\r?\n/)) {
|
||||
const m = line.match(/^\s*\[([^\]]+)\]\s*$/);
|
||||
if (m) p.append(Object.assign(document.createElement("span"), { className: "sec", textContent: m[1].toUpperCase() }));
|
||||
else p.append(document.createTextNode(line + "\n"));
|
||||
}
|
||||
}
|
||||
function toggleLyrics() {
|
||||
state.lyricsOpen = !state.lyricsOpen;
|
||||
$("#cover").classList.toggle("flipped", state.lyricsOpen); $("#lyricsBtn").classList.toggle("on", state.lyricsOpen);
|
||||
$("#lyricsBtn").textContent = state.lyricsOpen ? "⇄ COVER" : "⇄ LYRICS";
|
||||
}
|
||||
$("#lyricsBtn").addEventListener("click", toggleLyrics);
|
||||
$("#cover").addEventListener("click", toggleLyrics);
|
||||
/* keep: the one and only pin, under the controls; emoji are reactions, not saves */
|
||||
export async function keepLabel() {
|
||||
const b = $("#keep"), cur = state.current && state.current.spec;
|
||||
if (!cur || !cur.id) { b.disabled = true; b.classList.remove("on"); b.textContent = "➕ KEEP"; return; }
|
||||
const row = await db.get(cur.id);
|
||||
b.disabled = false; b.classList.toggle("on", !!(row && row.kept)); b.textContent = row && row.kept ? "✓ KEPT" : "➕ KEEP";
|
||||
$("#share").disabled = false;
|
||||
}
|
||||
$("#share").addEventListener("click", async () => {
|
||||
const url = shareLink(); if (!url) return;
|
||||
const s = state.current.spec, text = `${s.title} · a gandora track from the ${state.station || s.seed} station`;
|
||||
if (navigator.share) { try { await navigator.share({ title: s.title, text, url }); return; } catch {} }
|
||||
try { await navigator.clipboard.writeText(url); toast("Link copied. Whoever opens it gets this song, freshly rendered."); } catch { prompt("Copy this link:", url); }
|
||||
});
|
||||
$("#keep").addEventListener("click", async () => {
|
||||
const cur = state.current && state.current.spec; if (!cur || !cur.id || !state.current.blob) { toast("Still cooking."); return; }
|
||||
const row = await db.get(cur.id);
|
||||
await db.put({ ...(row || { id: cur.id, spec: cur, blob: state.current.blob, made: cur.made }), kept: !(row && row.kept) });
|
||||
await keepLabel(); toast(row && row.kept ? "Unkept." : "Kept — it stays in your library.");
|
||||
});
|
||||
// back to the seed screen keeps the station playing: a small now-playing strip leads back to it
|
||||
$("#back").addEventListener("click", () => {
|
||||
$("#player").classList.add("hidden"); $("#seed").classList.remove("hidden");
|
||||
const cur = state.current && state.current.spec;
|
||||
$("#nowRow").classList.toggle("hidden", !cur);
|
||||
if (cur) { drawCover($("#now canvas"), cur); $("#nowTitle").textContent = `${cur.title} · ${state.station || cur.seed}`; }
|
||||
$("#seedIn").value = ""; $("#seedCover").classList.remove("on"); $("#seedHint").textContent = cur ? "type a new seed for a new station, or pick one below" : "a mood, a line, a place, a word";
|
||||
listStations().catch(() => {});
|
||||
});
|
||||
$("#now").addEventListener("click", () => { $("#seed").classList.add("hidden"); $("#player").classList.remove("hidden"); });
|
||||
/* lock screen / media keys: title, station, the cover, and back · pause · next */
|
||||
export function nowPlaying(spec) {
|
||||
if (!("mediaSession" in navigator)) return;
|
||||
try {
|
||||
const c = document.createElement("canvas"); c.width = c.height = 512; drawCover(c, spec);
|
||||
navigator.mediaSession.metadata = new MediaMetadata({ title: spec.title, artist: state.station || spec.seed, album: "gandora",
|
||||
artwork: [{ src: c.toDataURL("image/png"), sizes: "512x512", type: "image/png" }] });
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const EMOJI_SETS = {
|
||||
"REACT": "🔥 ❤️ ⚡ 😴 🌧️ 🚫 🎸 🎹 🥁 🎤 🎺 🎻 🎷 🪗 🎧 🔊 🔉 🎶 🎵 💃 🕺 🤘 👏 🙌 👍 👎 🤌 💯 🤩 🤯 🤔 😎 😍 🥰 🥺 😭 😢 😤 😱 🤮 💤 🥱 😐 🙄 😬 🤪 🤬 👻",
|
||||
"MOOD": "🌙 🌞 🌅 🌆 🌃 🌌 ⭐ ✨ 🌟 💥 ❄️ 🌊 🌋 🌪️ ☔ 🌈 🍂 🌸 🌹 🌵 🍄 🌍 🏙️ 🏜️ 🏖️ 🏔️ 🚇 🚗 🛸 🚀 🕯️ 💡 🔮 🪄 💎 🔗 ⏳ 🧠 🫀 💀 👽 🤖 🐉 🦋 🐝 🦊 🐱 🐶",
|
||||
"TASTE": "☕ 🍵 🍷 🍺 🥃 🍫 🍭 🍓 🍋 🌶️ 🧈 🍰 🍕 🍜 🥟 🍱 🍼 🧊 🔥 💨 🫧 🌫️ 🪨 🪶 🧵 🧶 🎨 🖼️ 📼 📻 📺 💿 📀 🎛️ 🎚️ 🎙️ 📼 🕳️",
|
||||
};
|
||||
const EMOJI_KEY = "gandora.emoji";
|
||||
function emojiCounts() { try { return JSON.parse(localStorage.getItem(EMOJI_KEY) || "{}"); } catch { return {}; } }
|
||||
function bumpEmoji(e) { const c = emojiCounts(); c[e] = (c[e] || 0) + 1; localStorage.setItem(EMOJI_KEY, JSON.stringify(c)); localStorage.setItem(EMOJI_KEY + ".last", e); }
|
||||
const EMOJI_DEFAULT = ["🔥", "❤️", "😴", "🌧️", "⚡", "🎸", "🚫"];
|
||||
const EMOJI_TRAY = 7;
|
||||
function showEmojiRow() {
|
||||
const c = emojiCounts(), row = $("#emojis"), more = $("#more");
|
||||
const seeded = EMOJI_DEFAULT.map((e, i) => [e, (c[e] || 0) + (EMOJI_TRAY - i) * 0.01]); // defaults keep their order until use says otherwise
|
||||
for (const e of Object.keys(c)) if (!EMOJI_DEFAULT.includes(e)) seeded.push([e, c[e]]);
|
||||
const ranked = seeded.sort((a, b) => b[1] - a[1]).map((x) => x[0]);
|
||||
const last = localStorage.getItem(EMOJI_KEY + ".last");
|
||||
const top = ranked.slice(0, EMOJI_TRAY - 1); if (last && !top.includes(last)) top.push(last); else top.push(...ranked.slice(EMOJI_TRAY - 1, EMOJI_TRAY)); // the last one used always has a slot
|
||||
for (const b of [...row.querySelectorAll("button[data-e]")]) b.remove();
|
||||
for (const e of top) { const b = document.createElement("button"); b.dataset.e = e; b.textContent = e; b.title = (EMOJI_MEANING[e] && (EMOJI_MEANING[e].like || EMOJI_MEANING[e].avoid)) || ""; row.insertBefore(b, more); }
|
||||
}
|
||||
$("#emojis").addEventListener("click", (e) => { const b = e.target.closest("button[data-e]"); if (!b) return; b.classList.add("hit"); setTimeout(() => b.classList.remove("hit"), 300); bumpEmoji(b.dataset.e); react(b.dataset.e); setTimeout(showEmojiRow, 350); });
|
||||
function openPicker() {
|
||||
const p = $("#picker"); p.innerHTML = "";
|
||||
const top = document.createElement("div"); top.className = "top";
|
||||
const inp = document.createElement("input"); inp.placeholder = "or type any emoji…"; inp.maxLength = 8;
|
||||
const go = document.createElement("button"); go.textContent = "SEND"; const close = document.createElement("button"); close.textContent = "CLOSE";
|
||||
const send = () => { const v = inp.value.trim(); if (!v) return; pick(v); };
|
||||
go.addEventListener("click", send); inp.addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); send(); } });
|
||||
close.addEventListener("click", () => p.classList.add("hidden"));
|
||||
top.append(inp, go, close);
|
||||
const pick = (e) => { bumpEmoji(e); react(e); showEmojiRow(); p.classList.add("hidden"); };
|
||||
const c = emojiCounts(), used = Object.entries(c).sort((a, b) => b[1] - a[1]).slice(0, 16).map((x) => x[0]);
|
||||
const sets = used.length ? { "MOST USED": used.join(" "), ...EMOJI_SETS } : EMOJI_SETS;
|
||||
for (const [name, list] of Object.entries(sets)) {
|
||||
p.append(Object.assign(document.createElement("h4"), { textContent: name }));
|
||||
const g = document.createElement("div"); g.className = "g";
|
||||
for (const e of [...new Set(list.split(/\s+/).filter(Boolean))]) { const b = document.createElement("button"); b.type = "button"; b.textContent = e; b.addEventListener("click", (ev) => { ev.preventDefault(); pick(e); }); g.append(b); }
|
||||
p.append(g);
|
||||
}
|
||||
p.append(top); // the type-box last, and no autofocus: the drawer must not raise the keyboard
|
||||
p.classList.remove("hidden");
|
||||
}
|
||||
$("#more").addEventListener("click", () => { const p = $("#picker"); if (p.classList.contains("hidden")) openPicker(); else p.classList.add("hidden"); });
|
||||
showEmojiRow();
|
||||
$("#sayRow").addEventListener("submit", (e) => { e.preventDefault(); const v = $("#say").value.trim(); if (!v) return; $("#say").value = ""; react("", v); });
|
||||
|
||||
/* key box */
|
||||
|
||||
const SHEETS = ["#stationSheet", "#picker", "#tapePick"];
|
||||
function closeSheets() { for (const s of SHEETS) $(s).classList.add("hidden"); $("#scrim").classList.add("hidden"); }
|
||||
$("#scrim").addEventListener("click", closeSheets);
|
||||
new MutationObserver(() => { const open = SHEETS.some((s) => !$(s).classList.contains("hidden")); $("#scrim").classList.toggle("hidden", !open); })
|
||||
.observe(document.body, { attributes: true, attributeFilter: ["class"], subtree: true });
|
||||
+143
@@ -0,0 +1,143 @@
|
||||
import { db } from "../store.js";
|
||||
import { $, state, toast } from "../core.js";
|
||||
import { LOOKS, PALETTES, drawCover } from "../covers.js";
|
||||
import { MODES, PERSONAS, VOICES, speak, voiceLabel } from "../dj.js";
|
||||
import { bed, bedLevel, bedOff, crackle, crackleOff, makeCrackle, toIdle } from "../player.js";
|
||||
import { setUrl, stationFromCurrent } from "../app.js";
|
||||
import { listStations } from "../ui/library.js";
|
||||
export async function stationSheet(id) {
|
||||
const s = await db.get(id, "stations"); if (!s) return;
|
||||
let p = $("#stationSheet"); p.innerHTML = ""; p.scrollTop = 0;
|
||||
p.append(Object.assign(document.createElement("h4"), { textContent: "STATION" }));
|
||||
const x = Object.assign(document.createElement("button"), { className: "x", textContent: "×", title: "close" }); x.setAttribute("aria-label", "close");
|
||||
x.addEventListener("click", () => p.classList.add("hidden")); p.append(x);
|
||||
const name = document.createElement("input"); name.value = s.name || ""; name.placeholder = s.seed; name.maxLength = 60;
|
||||
p.append(Object.assign(document.createElement("label"), { textContent: "name" }), name, Object.assign(document.createElement("label"), { textContent: "seed · " + s.seed + " · " + (s.played || 0) + " tracks" }));
|
||||
const lookRow = document.createElement("div"); lookRow.className = "row"; lookRow.style.marginTop = "8px";
|
||||
p.append(Object.assign(document.createElement("label"), { textContent: "look" }));
|
||||
for (const lk of LOOKS) {
|
||||
const b = Object.assign(document.createElement("button"), { textContent: lk.toUpperCase(), className: (s.look || "rings") === lk ? "go" : "" });
|
||||
b.addEventListener("click", async () => {
|
||||
s.look = lk; await db.put(s, "stations");
|
||||
for (const t of (await db.all()).filter((t) => t.spec.stationId === id)) { t.spec.look = lk; await db.put(t); }
|
||||
if (state.stationId === id) { state.look = lk; if (state.current) { state.current.spec.look = lk; drawCover($("#cover canvas"), state.current.spec); } if (state.nextJob) state.nextJob.spec.look = lk; }
|
||||
for (const x of lookRow.children) x.className = x.textContent === lk.toUpperCase() ? "go" : "";
|
||||
toast(`Look: ${lk}.`);
|
||||
});
|
||||
lookRow.append(b);
|
||||
}
|
||||
p.append(lookRow);
|
||||
const palRow = document.createElement("div"); palRow.className = "row"; palRow.style.marginTop = "8px";
|
||||
p.append(Object.assign(document.createElement("label"), { textContent: "palette" }));
|
||||
for (const pm of PALETTES) {
|
||||
const b = Object.assign(document.createElement("button"), { textContent: pm.toUpperCase(), className: (s.palette || "duo") === pm ? "go" : "" });
|
||||
b.addEventListener("click", async () => {
|
||||
s.palette = pm; await db.put(s, "stations");
|
||||
for (const t of (await db.all()).filter((t) => t.spec.stationId === id)) { t.spec.palette = pm; await db.put(t); }
|
||||
if (state.stationId === id) { state.palette = pm; if (state.current) { state.current.spec.palette = pm; drawCover($("#cover canvas"), state.current.spec); } if (state.nextJob) state.nextJob.spec.palette = pm; }
|
||||
for (const x of palRow.children) x.className = x.textContent === pm.toUpperCase() ? "go" : "";
|
||||
toast(`Palette: ${pm}.`);
|
||||
});
|
||||
palRow.append(b);
|
||||
}
|
||||
p.append(palRow);
|
||||
const modeRow = document.createElement("div"); modeRow.className = "row"; modeRow.style.marginTop = "8px";
|
||||
p.append(Object.assign(document.createElement("label"), { textContent: "mode" }));
|
||||
for (const md of MODES) {
|
||||
const b = Object.assign(document.createElement("button"), { textContent: md.toUpperCase(), className: (s.mode || "music") === md ? "go" : "", title: { music: "songs", freestyle: "an MC off the dome over a beat", asmr: "spoken only, no music", noise: "brown, pink, rain, white, crackle: made here, free", tones: "binaural beats, solfeggio, isochronic: made here, free" }[md] });
|
||||
b.addEventListener("click", async () => {
|
||||
s.mode = md; await db.put(s, "stations");
|
||||
if (state.stationId === id) { state.mode = md; if (state.nextJob && !state.nextJob.blob) state.nextJob = null; }
|
||||
for (const x of modeRow.children) x.className = x.textContent === md.toUpperCase() ? "go" : "";
|
||||
toast(`Mode: ${md}. Takes effect from the next track.`);
|
||||
});
|
||||
modeRow.append(b);
|
||||
}
|
||||
p.append(modeRow);
|
||||
// the DJ: name, voice, speed, persona, folded away unless something is set
|
||||
const dj = document.createElement("details"); dj.open = false;
|
||||
dj.append(Object.assign(document.createElement("summary"), { textContent: "dj" + (s.djName ? " · " + s.djName : "") + (s.djVoice ? " · " + voiceLabel(s.djVoice) : "") }));
|
||||
const pAll = p, pDj = dj; p = dj;
|
||||
const preRow = document.createElement("div"); preRow.className = "row"; preRow.style.marginTop = "4px";
|
||||
const djName = document.createElement("input"); djName.value = s.djName || ""; djName.placeholder = "name (the DJ picks one at the welcome if blank)"; djName.maxLength = 40;
|
||||
const djPersona = document.createElement("input"); djPersona.value = s.djPersona || ""; djPersona.placeholder = "persona: how they talk, e.g. whispery ASMR host"; djPersona.maxLength = 240; djPersona.style.marginTop = "6px";
|
||||
const voiceRow = document.createElement("div"); voiceRow.className = "row"; voiceRow.style.marginTop = "6px";
|
||||
let voice = s.djVoice || "", speed = s.djSpeed || 1;
|
||||
const paintVoices = () => { for (const b of voiceRow.children) b.className = b.dataset.v === voice ? "go" : ""; };
|
||||
for (const v of VOICES) {
|
||||
const b = Object.assign(document.createElement("button"), { textContent: voiceLabel(v).toUpperCase(), title: "tap to hear " + v }); b.dataset.v = v;
|
||||
b.addEventListener("click", async () => {
|
||||
voice = v; paintVoices();
|
||||
if (crackle.preview) { try { crackle.preview.pause(); } catch {} crackle.preview = null; }
|
||||
const mine = crackle.previewSeq = (crackle.previewSeq || 0) + 1;
|
||||
try { const was = { v: state.djVoice, sp: state.djSpeed }; state.djVoice = v; state.djSpeed = speed;
|
||||
const blob = await speak({ lyrics: `Hi, this is ${djName.value.trim() || "your DJ"}, and you're listening to ${s.name || s.seed}.` });
|
||||
state.djVoice = was.v; state.djSpeed = was.sp;
|
||||
if (mine !== crackle.previewSeq) return; // a later tap won
|
||||
if (crackle.preview) { try { crackle.preview.pause(); } catch {} }
|
||||
const a = crackle.preview = new Audio(URL.createObjectURL(blob)); a.volume = state.audio.volume; a.play().catch(() => {}); } catch { toast("Couldn't fetch the voice."); }
|
||||
});
|
||||
voiceRow.append(b);
|
||||
}
|
||||
paintVoices();
|
||||
for (const pr of PERSONAS) {
|
||||
const b = Object.assign(document.createElement("button"), { textContent: pr.id.toUpperCase(), title: pr.persona });
|
||||
b.addEventListener("click", () => { djName.value = pr.name; djPersona.value = pr.persona; voice = pr.voice; speed = pr.speed; spd.value = Math.round(speed * 100); spdOut.textContent = spd.value + "%"; paintVoices(); });
|
||||
preRow.append(b);
|
||||
}
|
||||
const spdRow = document.createElement("div"); spdRow.className = "sl";
|
||||
const spd = document.createElement("input"); spd.type = "range"; spd.min = 60; spd.max = 150; spd.value = Math.round(speed * 100);
|
||||
const spdOut = Object.assign(document.createElement("span"), { textContent: spd.value + "%" });
|
||||
spd.addEventListener("input", () => { speed = spd.value / 100; spdOut.textContent = spd.value + "%"; });
|
||||
spdRow.append(Object.assign(document.createElement("label"), { textContent: "speed" }), spd, spdOut);
|
||||
p.append(preRow, djName, djPersona, voiceRow, spdRow);
|
||||
p = pAll; p.append(pDj);
|
||||
const applyDj = async () => {
|
||||
s.djName = djName.value.trim().slice(0, 40); s.djPersona = djPersona.value.trim().slice(0, 240); s.djVoice = voice; s.djSpeed = speed;
|
||||
if (state.stationId === id) { state.djName = s.djName; state.djPersona = s.djPersona; state.djVoice = s.djVoice; state.djSpeed = s.djSpeed; }
|
||||
};
|
||||
// volume and room tone, for everything (not just this station)
|
||||
for (const [label, key, get, set] of [["volume", "gandora.vol", () => state.audio.volume, (v) => { state.audio.volume = v; }], ["room tone", "gandora.bed", () => (crackle.el ||= makeCrackle()).volume, (v) => { (crackle.el ||= makeCrackle()).volume = v; crackle.base = v; bedLevel(v); }]]) {
|
||||
const sl = document.createElement("div"); sl.className = "sl";
|
||||
const r = document.createElement("input"); r.type = "range"; r.min = 0; r.max = 100; r.value = Math.round(get() * 100);
|
||||
const out = Object.assign(document.createElement("span"), { textContent: r.value + "%" });
|
||||
r.addEventListener("input", () => { set(r.value / 100); out.textContent = r.value + "%"; localStorage.setItem(key, String(r.value / 100)); });
|
||||
sl.append(Object.assign(document.createElement("label"), { textContent: label }), r, out);
|
||||
if (key === "gandora.bed") {
|
||||
const off = Object.assign(document.createElement("button"), { textContent: bedOff() ? "OFF" : "ON", title: "the crackle between tracks" });
|
||||
off.style.cssText = "padding:6px 10px;border-radius:999px;border:1px solid var(--line);font:600 10px var(--font);letter-spacing:.12em";
|
||||
off.addEventListener("click", () => { const now = !bedOff(); localStorage.setItem("gandora.bedoff", now ? "1" : "0"); off.textContent = now ? "OFF" : "ON"; if (now) crackleOff(); else bed(); toast(now ? "Room tone off." : "Room tone on."); });
|
||||
sl.append(off);
|
||||
}
|
||||
p.append(sl);
|
||||
}
|
||||
if (state.stationId === id) {
|
||||
const more = document.createElement("div"); more.className = "row"; more.style.marginTop = "10px"; more.style.justifyContent = "flex-start";
|
||||
const fromT = Object.assign(document.createElement("button"), { textContent: "* STATION FROM THIS TRACK", title: "a new station grown from the track playing now" });
|
||||
fromT.disabled = !(state.current && state.current.blob && !state.current.spec.break);
|
||||
fromT.addEventListener("click", () => { p.classList.add("hidden"); stationFromCurrent(); });
|
||||
const shareS = Object.assign(document.createElement("button"), { textContent: "↗ SHARE STATION", title: "a link that opens this station's seed" });
|
||||
shareS.addEventListener("click", async () => {
|
||||
const url = `${location.origin}/#${encodeURIComponent(s.seed).replace(/%20/g, "+")}`;
|
||||
try { if (navigator.share) await navigator.share({ title: `${s.name || s.seed} · gandora`, url }); else { await navigator.clipboard.writeText(url); toast("Station link copied."); } } catch {}
|
||||
});
|
||||
more.append(fromT, shareS); p.append(more);
|
||||
}
|
||||
const row = document.createElement("div"); row.className = "row";
|
||||
const save = Object.assign(document.createElement("button"), { className: "go", textContent: "SAVE" });
|
||||
save.addEventListener("click", async () => { s.name = name.value.trim().slice(0, 60); await applyDj(); await db.put(s, "stations"); if (state.stationId === id) { state.station = s.name; $("#stationName").textContent = s.name || s.seed; } p.classList.add("hidden"); listStations().catch(() => {}); toast("Saved."); });
|
||||
const reset = Object.assign(document.createElement("button"), { textContent: "RESET TASTE" });
|
||||
reset.addEventListener("click", async () => { if (!confirm("Forget what this station has learned? Its tracks stay.")) return; s.taste = { like: [], avoid: [], notes: [] }; s.history = []; await db.put(s, "stations"); if (state.stationId === id) { state.taste = s.taste; state.history = []; } p.classList.add("hidden"); toast("Taste reset."); });
|
||||
const del = Object.assign(document.createElement("button"), { className: "bad", textContent: "DELETE STATION" });
|
||||
del.addEventListener("click", async () => {
|
||||
if (!confirm(`Delete “${s.name || s.seed}” and its unkept tracks? Kept tracks stay in the library.`)) return;
|
||||
for (const t of (await db.all()).filter((t) => t.spec.stationId === id && !t.kept)) await db.del(t.id);
|
||||
await db.del(id, "stations");
|
||||
if (state.stationId === id) { toIdle(); state.stationId = ""; state.seed = ""; state.station = ""; $("#player").classList.add("hidden"); $("#seed").classList.remove("hidden"); $("#nowRow").classList.add("hidden"); setUrl(); }
|
||||
p.classList.add("hidden"); listStations().catch(() => {}); toast("Station deleted.");
|
||||
});
|
||||
row.append(save, reset, del); p.append(row); p.classList.remove("hidden"); name.focus({ preventScroll: true });
|
||||
}
|
||||
$("#stationName").addEventListener("click", () => { if (state.stationId && !state.tape) stationSheet(state.stationId); });
|
||||
/* links: the URL follows the station (#seed); a share link carries the current track's sheet music (?t=) so the same
|
||||
song opens and renders for whoever follows it, even with nothing stored anywhere */
|
||||
+78
@@ -0,0 +1,78 @@
|
||||
import { $, state, toast } from "../core.js";
|
||||
import { KEYS, drawCover, hash32, keyHue } from "../covers.js";
|
||||
import { db } from "../store.js";
|
||||
import { listStations } from "../ui/library.js";
|
||||
/* ---------- taste: every track as a point (tempo, energy; colour = key), every reaction a signed weight on it.
|
||||
The shading is a kernel estimate of "would like" from the reactions, huebrain-style: lit where the warm ones
|
||||
outweigh the cold ones, dim where the cold ones win, dark where nothing has been heard yet. ---------- */
|
||||
export function reactionWeight(spec) {
|
||||
const r = String(spec.reaction || "");
|
||||
let w = 0;
|
||||
for (const ch of r.replace(/"[^"]*"/g, "")) { if ("🔥❤️⚡🎸🎹".includes(ch) && ch !== "️") w += 1; if ("🚫😴".includes(ch)) w -= 1; }
|
||||
if (/\[skipped\]/.test(r)) w -= 1.5;
|
||||
if (/"[^"]*"/.test(r)) w += 0.3; // words mean engagement, mildly warm
|
||||
return w;
|
||||
}
|
||||
export function drawTaste(rows, title) {
|
||||
const c = $("#tasteMap"), ctx = c.getContext("2d"), W = c.width, H = c.height, pad = 70;
|
||||
const X = (bpm) => pad + (Math.min(180, Math.max(60, bpm)) - 60) / 120 * (W - 2 * pad);
|
||||
const Y = (en) => H - pad - Math.min(1, Math.max(0, en)) * (H - 2 * pad);
|
||||
const pts = rows.map((t) => ({ x: X(+t.spec.bpm || 100), y: Y(+t.spec.energy || 0.5), w: reactionWeight(t.spec) + (t.kept ? 1.5 : 0), hue: keyHue(t.spec.key), minor: /m(in|inor)?\b/i.test(t.spec.key || "") && !/maj/i.test(t.spec.key || ""), t }));
|
||||
ctx.fillStyle = "#121216"; ctx.fillRect(0, 0, W, H);
|
||||
// the field: kernel-weighted reactions, with every played track counting a little as "heard"
|
||||
const cell = 18, sig = 90;
|
||||
for (let gy = pad; gy < H - pad; gy += cell) for (let gx = pad; gx < W - pad; gx += cell) {
|
||||
let like = 0, heard = 0;
|
||||
for (const p of pts) { const d2 = (p.x - gx) ** 2 + (p.y - gy) ** 2, k = Math.exp(-d2 / (2 * sig * sig)); like += k * p.w; heard += k; }
|
||||
if (heard < 0.02) continue;
|
||||
const v = Math.tanh(like / 1.5); // -1..1; 0 means heard but nothing said
|
||||
const a = Math.min(0.5, heard * 0.3);
|
||||
if (Math.abs(v) < 0.05) ctx.fillStyle = `hsl(240 6% 30% / ${a * 0.5})`; // heard, neutral
|
||||
else ctx.fillStyle = v > 0 ? `hsl(44 60% 60% / ${a * Math.abs(v)})` : `hsl(220 30% 45% / ${a * Math.abs(v)})`;
|
||||
ctx.fillRect(gx, gy, cell, cell);
|
||||
}
|
||||
// axes
|
||||
ctx.strokeStyle = "#232329"; ctx.lineWidth = 2; ctx.strokeRect(pad, pad, W - 2 * pad, H - 2 * pad);
|
||||
ctx.fillStyle = "#8a8a96"; ctx.font = `600 ${W * 0.018}px ui-monospace, Menlo, monospace`; ctx.textAlign = "center";
|
||||
for (const b of [60, 90, 120, 150, 180]) ctx.fillText(b + "", X(b), H - pad + 34);
|
||||
ctx.textAlign = "right"; for (const e of [0, 0.5, 1]) ctx.fillText(e === 0 ? "calm" : e === 1 ? "wild" : "·", pad - 14, Y(e) + 6);
|
||||
// the points: colour is the key, size is how much was said about it, ring warm or cold
|
||||
for (const p of pts) {
|
||||
const r = (W * 0.012) * (1 + Math.min(3, Math.abs(p.w)) * 0.35);
|
||||
ctx.beginPath(); ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `hsl(${p.hue} ${p.minor ? 55 : 80}% ${p.minor ? 48 : 62}% / .9)`; ctx.fill();
|
||||
if (p.w !== 0) { ctx.lineWidth = 3; ctx.strokeStyle = p.w > 0 ? "hsl(44 80% 70%)" : "hsl(220 40% 60%)"; ctx.stroke(); }
|
||||
if (p.t.kept) { ctx.beginPath(); ctx.arc(p.x, p.y, r + 7, 0, Math.PI * 2); ctx.lineWidth = 1.5; ctx.strokeStyle = "hsl(44 80% 70% / .7)"; ctx.stroke(); }
|
||||
}
|
||||
const warm = pts.filter((p) => p.w > 0).length, cold = pts.filter((p) => p.w < 0).length;
|
||||
const mean = (f) => pts.length ? pts.reduce((s, p) => s + f(p), 0) / pts.length : 0;
|
||||
const liked = pts.filter((p) => p.w > 0);
|
||||
const lb = liked.length ? Math.round(liked.reduce((s, p) => s + (+p.t.spec.bpm || 100), 0) / liked.length) : null;
|
||||
const le = liked.length ? (liked.reduce((s, p) => s + (+p.t.spec.energy || 0.5), 0) / liked.length) : null;
|
||||
const minors = liked.filter((p) => p.minor).length;
|
||||
$("#tasteNote").textContent = !pts.length ? "Nothing heard here yet." :
|
||||
`${title}: ${pts.length} tracks · ${warm} warm, ${cold} cold · ` + (liked.length ? `what you warmed to sits around ${lb} bpm, ${le < 0.4 ? "calm" : le < 0.7 ? "mid" : "high"} energy, ${minors > liked.length / 2 ? "mostly minor keys" : "mostly major keys"}.` : "react to a few tracks and the lit region appears.");
|
||||
}
|
||||
export async function openTaste() {
|
||||
const rows = await db.all(), stations = await db.all("stations"), byId = Object.fromEntries(stations.map((s) => [s.id, s]));
|
||||
const tabs = $("#tasteTabs"); tabs.innerHTML = "";
|
||||
const groups = [["all", "ALL", "", rows]];
|
||||
const seen = new Map();
|
||||
for (const t of rows) { const k = t.spec.stationId || "seed:" + t.spec.seed; if (!seen.has(k)) seen.set(k, []); seen.get(k).push(t); }
|
||||
for (const [k, list] of seen) { const s = byId[k]; groups.push([k, ((s && s.name) || list[0].spec.seed).toUpperCase(), (s && s.seed) || list[0].spec.seed, list]); }
|
||||
let pick = groups.find((g) => g[0] === state.stationId) || groups[0];
|
||||
const show = () => { for (const b of tabs.children) b.classList.toggle("on", b.dataset.k === pick[0]); drawTaste(pick[3], pick[1]); };
|
||||
for (const g of groups) {
|
||||
const b = document.createElement("button"); b.dataset.k = g[0];
|
||||
if (g[2]) { const c = document.createElement("canvas"); c.width = c.height = 44; drawCover(c, { seed: g[2], title: "", tags: "", bpm: 100, key: KEYS[hash32(g[2]) % 12], energy: 0.5 }); b.append(c); }
|
||||
b.append(document.createTextNode(g[1] + " · " + g[3].length));
|
||||
b.addEventListener("click", () => { pick = g; show(); });
|
||||
tabs.append(b);
|
||||
}
|
||||
show(); $("#taste").classList.remove("hidden");
|
||||
}
|
||||
$("#tasteBtn").addEventListener("click", () => openTaste().catch((e) => toast(e.message)));
|
||||
$("#tasteClose").addEventListener("click", () => $("#taste").classList.add("hidden"));
|
||||
|
||||
listStations().catch(() => {});
|
||||
// a shared track (?t=): open its station and render that song first; a hash (#rainy+trains) just fills the seed
|
||||
Reference in new issue
Block a user