bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CODEX - Varioues Fixes, and Replaced the Playback Modal with VIEW modal

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-23 10:34:10 +02:00
parent 12e793aa7e
commit 3a2362b7fd
5 changed files with 484 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
frontend/src/melodies/BinaryTableModal.jsx Normal file
View File

@@ -0,0 +1,228 @@
import { useEffect, useState } from "react";
const NOTE_LABELS = "ABCDEFGHIJKLMNOP";
function parseBellNotation(notation) {
const raw = String(notation || "").trim();
if (raw === "0" || !raw) return 0;
let value = 0;
for (const part of raw.split("+")) {
const n = Number.parseInt(part.trim(), 10);
if (Number.isInteger(n) && n >= 1 && n <= 16) value |= 1 << (n - 1);
}
return value;
}
function parseStepsString(stepsStr) {
if (!stepsStr || !String(stepsStr).trim()) return [];
return String(stepsStr).trim().split(",").map((s) => parseBellNotation(s));
}
function normalizeFileUrl(url) {
if (!url || typeof url !== "string") return null;
if (url.startsWith("http") || url.startsWith("/api")) return url;
if (url.startsWith("/")) return `/api${url}`;
return `/api/${url}`;
}
async function fetchBinaryResponse(url) {
const token = localStorage.getItem("access_token");
try {
const res = await fetch(url, {
headers: token ? { Authorization: `Bearer ${token}` } : {},
});
if (res.ok) return res;
if (url.startsWith("http")) {
const retry = await fetch(url);
if (retry.ok) return retry;
throw new Error(`Failed to fetch binary: ${retry.statusText || retry.status}`);
}
throw new Error(`Failed to fetch binary: ${res.statusText || res.status}`);
} catch {
if (url.startsWith("http")) {
const retry = await fetch(url);
if (retry.ok) return retry;
throw new Error(`Failed to fetch binary: ${retry.statusText || retry.status}`);
}
throw new Error("Failed to fetch binary");
}
}
async function decodeBsmBinary(url) {
const res = await fetchBinaryResponse(url);
const buf = await res.arrayBuffer();
const view = new DataView(buf);
const steps = [];
for (let i = 0; i + 1 < buf.byteLength; i += 2) {
steps.push(view.getUint16(i, false));
}
return steps;
}
export default function BinaryTableModal({ open, melody, builtMelody, files, archetypeCsv, onClose }) {
const info = melody?.information || {};
const [steps, setSteps] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
useEffect(() => {
if (!open) {
setSteps([]);
setLoading(false);
setError("");
return;
}
const binaryUrlCandidate = builtMelody?.binary_url
? `/api${builtMelody.binary_url}`
: files?.binary_url || melody?.url || null;
const binaryUrl = normalizeFileUrl(binaryUrlCandidate);
const csv = archetypeCsv || info.archetype_csv || null;
if (binaryUrl) {
setLoading(true);
setError("");
decodeBsmBinary(binaryUrl)
.then((decoded) => setSteps(decoded))
.catch((err) => {
if (csv) {
setSteps(parseStepsString(csv));
setError("");
return;
}
setError(err.message || "Failed to load melody data.");
})
.finally(() => setLoading(false));
return;
}
if (csv) {
setSteps(parseStepsString(csv));
setError("");
return;
}
setError("No binary or archetype data available for this melody.");
}, [open]); // eslint-disable-line react-hooks/exhaustive-deps
if (!open) return null;
const detectedNoteCount = steps.reduce((max, stepValue) => {
let highest = 0;
for (let bit = 15; bit >= 0; bit--) {
if (stepValue & (1 << bit)) {
highest = bit + 1;
break;
}
}
return Math.max(max, highest);
}, 0);
const gridNoteCount = Math.max(1, Math.min(16, Number(info.totalNotes || 0) || detectedNoteCount || 1));
return (
<div
className="fixed inset-0 flex items-center justify-center z-50"
style={{ backgroundColor: "rgba(0,0,0,0.7)" }}
onClick={(e) => e.target === e.currentTarget && onClose()}
>
<div
className="w-full rounded-lg border shadow-xl"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)", maxWidth: "1100px" }}
>
<div className="flex items-center justify-between px-6 py-4 border-b" style={{ borderColor: "var(--border-primary)" }}>
<div>
<h2 className="text-lg font-semibold" style={{ color: "var(--text-heading)" }}>Archetype View</h2>
<p className="text-xs mt-0.5" style={{ color: "var(--text-muted)" }}>{steps.length} steps</p>
</div>
<button onClick={onClose} className="text-xl leading-none" style={{ color: "var(--text-muted)" }}>&times;</button>
</div>
<div className="px-6 py-5 space-y-4">
{loading && <p className="text-sm text-center py-4" style={{ color: "var(--text-muted)" }}>Loading binary...</p>}
{error && (
<div
className="text-sm rounded-md p-3 border"
style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}
>
{error}
</div>
)}
{!loading && !error && steps.length > 0 && (
<div className="rounded-md border overflow-auto" style={{ borderColor: "var(--border-primary)", maxHeight: "520px" }}>
<table className="min-w-max border-separate border-spacing-0 text-xs">
<thead>
<tr>
<th
className="sticky top-0 left-0 z-20 px-2 py-1.5 text-left border-b border-r"
style={{ backgroundColor: "var(--bg-primary)", borderColor: "var(--border-primary)", color: "var(--text-muted)" }}
>
Note \ Step
</th>
{steps.map((_, stepIdx) => (
<th
key={stepIdx}
className="sticky top-0 z-10 px-2 py-1.5 text-center border-b border-r"
style={{ minWidth: "40px", backgroundColor: "var(--bg-primary)", borderColor: "var(--border-primary)", color: "var(--text-muted)" }}
>
{stepIdx + 1}
</th>
))}
</tr>
</thead>
<tbody>
{Array.from({ length: gridNoteCount }, (_, noteIdx) => (
<tr key={noteIdx}>
<th
className="sticky left-0 z-[1] px-2 py-1.5 text-left border-b border-r"
style={{ backgroundColor: "var(--bg-primary)", borderColor: "var(--border-primary)", color: "var(--text-secondary)" }}
>
{NOTE_LABELS[noteIdx]}
</th>
{steps.map((stepValue, stepIdx) => {
const enabled = Boolean(stepValue & (1 << noteIdx));
return (
<td
key={`${noteIdx}-${stepIdx}`}
className="border-b border-r"
style={{ width: "40px", height: "40px", borderColor: "var(--border-primary)" }}
>
<span className="w-full h-full flex items-center justify-center" aria-hidden="true">
<span
style={{
width: "60%",
height: "60%",
borderRadius: "9999px",
backgroundColor: "var(--btn-primary)",
opacity: enabled ? 1 : 0,
transform: enabled ? "scale(1)" : "scale(0.4)",
boxShadow: enabled ? "0 0 10px 3px rgba(116, 184, 22, 0.5)" : "none",
transition: "opacity 140ms ease, transform 140ms ease, box-shadow 180ms ease",
}}
/>
</span>
</td>
);
})}
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
<div className="flex justify-end px-6 py-4 border-t" style={{ borderColor: "var(--border-primary)" }}>
<button
onClick={onClose}
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)" }}
>
Close
</button>
</div>
</div>
</div>
);
}

52
frontend/src/melodies/MelodyDetail.jsx
View File

@@ -5,6 +5,7 @@ import { useAuth } from "../auth/AuthContext";
import ConfirmDialog from "../components/ConfirmDialog";
import SpeedCalculatorModal from "./SpeedCalculatorModal";
import PlaybackModal from "./PlaybackModal";
import BinaryTableModal from "./BinaryTableModal";
function fallbackCopy(text, onSuccess) {
const ta = document.createElement("textarea");
@@ -54,12 +55,6 @@ function normalizeFileUrl(url) {
return `/api/${url}`;
}
function hueForDepth(index, count) {
const safeCount = Math.max(1, count);
const t = Math.max(0, Math.min(1, index / safeCount));
return 190 + (15 - 190) * t;
}
function Field({ label, children }) {
return (
<div>
@@ -128,6 +123,7 @@ export default function MelodyDetail() {
const [codeCopied, setCodeCopied] = useState(false);
const [showSpeedCalc, setShowSpeedCalc] = useState(false);
const [showPlayback, setShowPlayback] = useState(false);
const [showBinaryView, setShowBinaryView] = useState(false);
const [offlineSaving, setOfflineSaving] = useState(false);
useEffect(() => {
@@ -482,9 +478,6 @@ export default function MelodyDetail() {
{settings.noteAssignments?.length > 0 ? (
<div className="flex flex-wrap gap-1.5">
{settings.noteAssignments.map((assignedBell, noteIdx) => {
const noteHue = hueForDepth(noteIdx, settings.noteAssignments.length - 1);
const bellDepthIdx = Math.max(0, Math.min(15, (assignedBell || 1) - 1));
const bellHue = hueForDepth(bellDepthIdx, 15);
return (
<div
key={noteIdx}
@@ -493,16 +486,15 @@ export default function MelodyDetail() {
minWidth: "36px",
padding: "4px 6px",
backgroundColor: "var(--bg-card-hover)",
borderColor: `hsla(${noteHue}, 65%, 55%, 0.45)`,
boxShadow: `0 0 6px hsla(${noteHue}, 75%, 55%, 0.25) inset`,
borderColor: "var(--border-primary)",
}}
>
<span className="text-xs font-bold leading-tight" style={{ color: `hsl(${noteHue}, 80%, 72%)` }}>
<span className="text-xs font-bold leading-tight" style={{ color: "var(--text-secondary)" }}>
{String.fromCharCode(65 + noteIdx)}
</span>
<div className="w-full my-0.5" style={{ height: "1px", backgroundColor: "var(--border-primary)" }} />
<span className="text-xs leading-tight" style={{ color: assignedBell > 0 ? `hsl(${bellHue}, 80%, 70%)` : "var(--text-muted)" }}>
{assignedBell > 0 ? assignedBell : "—"}
<span className="text-xs leading-tight" style={{ color: "var(--text-muted)" }}>
{assignedBell > 0 ? assignedBell : "-"}
</span>
</div>
);
@@ -561,11 +553,19 @@ export default function MelodyDetail() {
e.preventDefault();
try {
const token = localStorage.getItem("access_token");
let res = await fetch(binaryUrl, {
let res = null;
try {
res = await fetch(binaryUrl, {
headers: token ? { Authorization: `Bearer ${token}` } : {},
});
// For external URLs (e.g. Firebase Storage), retry without auth header
if (!res.ok && binaryUrl.startsWith("http")) {
} catch {
if (binaryUrl.startsWith("http")) {
res = await fetch(binaryUrl);
} else {
throw new Error("Download failed: network error");
}
}
if ((!res || !res.ok) && binaryUrl.startsWith("http")) {
res = await fetch(binaryUrl);
}
if (!res.ok) throw new Error(`Download failed: ${res.statusText}`);
@@ -577,7 +577,7 @@ export default function MelodyDetail() {
a.click();
URL.revokeObjectURL(objectUrl);
} catch (err) {
console.error(err);
setError(err.message);
}
};
@@ -601,7 +601,7 @@ export default function MelodyDetail() {
</button>
<button
type="button"
onClick={() => setShowPlayback(true)}
onClick={() => setShowBinaryView(true)}
className="px-2 py-0.5 text-xs rounded-full"
style={{ color: "var(--text-secondary)", backgroundColor: "var(--bg-card-hover)" }}
>
@@ -634,11 +634,11 @@ export default function MelodyDetail() {
})()}
</Field>
<Field label="Audio Preview">
{files.preview_url ? (
{normalizeFileUrl(files.preview_url) ? (
<div className="space-y-1">
<audio controls src={files.preview_url} className="h-8" />
<audio controls src={normalizeFileUrl(files.preview_url)} className="h-8" />
<a
href={files.preview_url}
href={normalizeFileUrl(files.preview_url)}
target="_blank"
rel="noopener noreferrer"
className="underline text-xs"
@@ -757,6 +757,14 @@ export default function MelodyDetail() {
archetypeCsv={melody?.information?.archetype_csv || null}
onClose={() => setShowPlayback(false)}
/>
<BinaryTableModal
open={showBinaryView}
melody={melody}
builtMelody={builtMelody}
files={files}
archetypeCsv={melody?.information?.archetype_csv || null}
onClose={() => setShowBinaryView(false)}
/>
<SpeedCalculatorModal
open={showSpeedCalc}

45
frontend/src/melodies/MelodyForm.jsx
View File

@@ -7,6 +7,7 @@ import SelectArchetypeModal from "./archetypes/SelectArchetypeModal";
import BuildOnTheFlyModal from "./archetypes/BuildOnTheFlyModal";
import SpeedCalculatorModal from "./SpeedCalculatorModal";
import PlaybackModal from "./PlaybackModal";
import BinaryTableModal from "./BinaryTableModal";
import {
getLocalizedValue,
getLanguageName,
@@ -115,6 +116,7 @@ export default function MelodyForm() {
const [showBuildOnTheFly, setShowBuildOnTheFly] = useState(false);
const [showSpeedCalc, setShowSpeedCalc] = useState(false);
const [showPlayback, setShowPlayback] = useState(false);
const [showBinaryView, setShowBinaryView] = useState(false);
const [builtMelody, setBuiltMelody] = useState(null);
const [assignedBinaryName, setAssignedBinaryName] = useState(null);
const [assignedBinaryPid, setAssignedBinaryPid] = useState(null);
@@ -218,10 +220,19 @@ export default function MelodyForm() {
if (!fileUrl) return;
try {
const token = localStorage.getItem("access_token");
let res = await fetch(fileUrl, {
let res = null;
try {
res = await fetch(fileUrl, {
headers: token ? { Authorization: `Bearer ${token}` } : {},
});
if (!res.ok && fileUrl.startsWith("http")) {
} catch {
if (fileUrl.startsWith("http")) {
res = await fetch(fileUrl);
} else {
throw new Error("Download failed: network error");
}
}
if ((!res || !res.ok) && fileUrl.startsWith("http")) {
res = await fetch(fileUrl);
}
if (!res.ok) throw new Error(`Download failed: ${res.statusText}`);
@@ -764,7 +775,7 @@ export default function MelodyForm() {
</button>
<button
type="button"
onClick={() => setShowPlayback(true)}
onClick={() => setShowBinaryView(true)}
className="px-2 py-0.5 text-xs rounded-full"
style={{ color: "var(--text-secondary)", backgroundColor: "var(--bg-card-hover)" }}
>
@@ -786,7 +797,7 @@ export default function MelodyForm() {
<button
type="button"
onClick={() => binaryInputRef.current?.click()}
className="px-3 py-1.5 text-xs rounded-full transition-colors"
className="px-3 py-1.5 text-xs rounded-md transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-secondary)", border: "1px solid var(--border-primary)" }}
>
Choose Binary File
@@ -844,17 +855,23 @@ export default function MelodyForm() {
</div>
<div>
<label className="block text-sm font-medium mb-1" style={labelStyle}>Audio Preview (.mp3)</label>
{existingFiles.preview_url ? (
{normalizeFileUrl(existingFiles.preview_url) ? (
<div className="mb-2 space-y-1">
{(() => {
const previewUrl = normalizeFileUrl(existingFiles.preview_url);
const previewName = resolveFilename(previewUrl, "preview.mp3");
return (
<a
href={existingFiles.preview_url}
onClick={(e) => downloadExistingFile(existingFiles.preview_url, resolveFilename(existingFiles.preview_url, "preview.mp3"), e)}
href={previewUrl}
onClick={(e) => downloadExistingFile(previewUrl, previewName, e)}
className="underline text-xs"
style={{ color: "var(--accent)" }}
>
{resolveFilename(existingFiles.preview_url, "Click to Download")}
{resolveFilename(previewUrl, "Click to Download")}
</a>
<audio controls src={existingFiles.preview_url} className="h-8" />
);
})()}
<audio controls src={normalizeFileUrl(existingFiles.preview_url)} className="h-8" />
</div>
) : (
<p className="text-xs mb-2" style={mutedStyle}>No preview uploaded</p>
@@ -869,7 +886,7 @@ export default function MelodyForm() {
<button
type="button"
onClick={() => previewInputRef.current?.click()}
className="px-3 py-1.5 text-xs rounded-full transition-colors"
className="px-3 py-1.5 text-xs rounded-md transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-secondary)", border: "1px solid var(--border-primary)" }}
>
Choose Preview File
@@ -951,6 +968,14 @@ export default function MelodyForm() {
archetypeCsv={information.archetype_csv || null}
onClose={() => setShowPlayback(false)}
/>
<BinaryTableModal
open={showBinaryView}
melody={{ id: id || savedMelodyId || "preview", information, default_settings: settings, type, url, uid, pid }}
builtMelody={builtMelody}
files={{ binary_url: normalizeFileUrl(existingFiles.binary_url || url || null) }}
archetypeCsv={information.archetype_csv || null}
onClose={() => setShowBinaryView(false)}
/>
{isEdit && (
<>

56
frontend/src/melodies/MelodyList.jsx
View File

@@ -4,7 +4,7 @@ import api from "../api/client";
import { useAuth } from "../auth/AuthContext";
import SearchBar from "../components/SearchBar";
import ConfirmDialog from "../components/ConfirmDialog";
import PlaybackModal from "./PlaybackModal";
import BinaryTableModal from "./BinaryTableModal";
import {
getLocalizedValue,
getLanguageName,
@@ -140,12 +140,6 @@ function formatRelativeTime(isoValue) {
return `${diffYears} year${diffYears === 1 ? "" : "s"} ago`;
}
function hueForDepth(index, count) {
const safeCount = Math.max(1, count);
const t = Math.max(0, Math.min(1, index / safeCount));
return 190 + (15 - 190) * t; // high notes blue-ish -> deep notes warm red
}
function getBinaryUrl(row) {
const candidate = row?.url;
if (!candidate || typeof candidate !== "string") return null;
@@ -407,11 +401,19 @@ export default function MelodyList() {
try {
const token = localStorage.getItem("access_token");
let res = await fetch(binaryUrl, {
let res = null;
try {
res = await fetch(binaryUrl, {
headers: token ? { Authorization: `Bearer ${token}` } : {},
});
if (!res.ok && binaryUrl.startsWith("http")) {
} catch {
if (binaryUrl.startsWith("http")) {
res = await fetch(binaryUrl);
} else {
throw new Error("Download failed: network error");
}
}
if ((!res || !res.ok) && binaryUrl.startsWith("http")) {
res = await fetch(binaryUrl);
}
if (!res.ok) throw new Error(`Download failed: ${res.statusText}`);
@@ -495,6 +497,12 @@ export default function MelodyList() {
};
const isVisible = (key) => visibleColumns.includes(key);
const orderedColumnPickerColumns = useMemo(() => {
const byKey = new Map(ALL_COLUMNS.map((c) => [c.key, c]));
const visibleOrdered = visibleColumns.map((k) => byKey.get(k)).filter(Boolean);
const hidden = ALL_COLUMNS.filter((c) => !visibleColumns.includes(c.key));
return [...visibleOrdered, ...hidden];
}, [visibleColumns]);
const getDisplayName = (nameVal) => getLocalizedValue(nameVal, displayLang, "Untitled");
@@ -745,11 +753,6 @@ export default function MelodyList() {
return ds.noteAssignments?.length > 0 ? (
<div className="flex flex-nowrap gap-1 whitespace-nowrap">
{ds.noteAssignments.map((assignedBell, noteIdx) => (
(() => {
const noteHue = hueForDepth(noteIdx, ds.noteAssignments.length - 1);
const bellDepthIdx = Math.max(0, Math.min(15, (assignedBell || 1) - 1));
const bellHue = hueForDepth(bellDepthIdx, 15);
return (
<div
key={noteIdx}
className="flex flex-col items-center rounded-md border"
@@ -757,20 +760,17 @@ export default function MelodyList() {
minWidth: "26px",
padding: "3px 3px",
backgroundColor: "var(--bg-card-hover)",
borderColor: `hsla(${noteHue}, 65%, 55%, 0.45)`,
boxShadow: `0 0 6px hsla(${noteHue}, 75%, 55%, 0.25) inset`,
borderColor: "var(--border-primary)",
}}
>
<span className="text-xs font-bold leading-tight" style={{ color: `hsl(${noteHue}, 80%, 72%)` }}>
<span className="text-xs font-bold leading-tight" style={{ color: "var(--text-secondary)" }}>
{NOTE_LABELS[noteIdx]}
</span>
<div className="w-full my-0.5" style={{ height: "1px", backgroundColor: "var(--border-primary)" }} />
<span className="text-xs leading-tight" style={{ color: assignedBell > 0 ? `hsl(${bellHue}, 80%, 70%)` : "var(--text-muted)" }}>
{assignedBell > 0 ? assignedBell : "—"}
<span className="text-xs leading-tight" style={{ color: "var(--text-muted)" }}>
{assignedBell > 0 ? assignedBell : "-"}
</span>
</div>
);
})()
))}
</div>
) : (
@@ -1039,7 +1039,7 @@ export default function MelodyList() {
borderColor: "var(--border-primary)",
}}
>
{ALL_COLUMNS.map((col) => {
{orderedColumnPickerColumns.map((col) => {
const orderIdx = visibleColumns.indexOf(col.key);
const canMove = orderIdx >= 0;
return (
@@ -1063,18 +1063,18 @@ export default function MelodyList() {
onClick={() => moveColumn(col.key, "up")}
className="text-[10px] px-1 rounded border"
style={{ borderColor: "var(--border-primary)", color: "var(--text-muted)", background: "transparent" }}
title="Move left"
title="Move up"
>
←
↑
</button>
<button
type="button"
onClick={() => moveColumn(col.key, "down")}
className="text-[10px] px-1 rounded border"
style={{ borderColor: "var(--border-primary)", color: "var(--text-muted)", background: "transparent" }}
title="Move right"
title="Move down"
>
→
↓
</button>
</span>
)}
@@ -1327,7 +1327,7 @@ export default function MelodyList() {
</div>
)}
<PlaybackModal
<BinaryTableModal
open={!!viewRow}
melody={viewRow || null}
builtMelody={null}

338
frontend/src/melodies/PlaybackModal.jsx
View File

@@ -1,8 +1,4 @@
import { useState, useEffect, useRef, useCallback } from "react";
// ============================================================================
// Web Audio Engine
// ============================================================================
import { useState, useEffect, useRef, useCallback } from "react";
function bellFrequency(bellNumber) {
return 880 * Math.pow(Math.pow(2, 1 / 12), -2 * (bellNumber - 1));
@@ -35,19 +31,19 @@ function playStep(audioCtx, stepValue, beatDurationMs) {
}
function parseBellNotation(notation) {
notation = notation.trim();
if (notation === "0" || !notation) return 0;
const raw = String(notation || "").trim();
if (raw === "0" || !raw) return 0;
let value = 0;
for (const part of notation.split("+")) {
const n = parseInt(part.trim(), 10);
if (!isNaN(n) && n >= 1 && n <= 16) value |= 1 << (n - 1);
for (const part of raw.split("+")) {
const n = Number.parseInt(part.trim(), 10);
if (Number.isInteger(n) && n >= 1 && n <= 16) value |= 1 << (n - 1);
}
return value;
}
function parseStepsString(stepsStr) {
if (!stepsStr || !stepsStr.trim()) return [];
return stepsStr.trim().split(",").map((s) => parseBellNotation(s));
if (!stepsStr || !String(stepsStr).trim()) return [];
return String(stepsStr).trim().split(",").map((s) => parseBellNotation(s));
}
function normalizePlaybackUrl(url) {
@@ -57,29 +53,31 @@ function normalizePlaybackUrl(url) {
return `/api/${url}`;
}
async function decodeBsmBinary(url) {
// Try with auth token first (for our API endpoints), then without (for Firebase URLs)
async function fetchBinaryResponse(url) {
const token = localStorage.getItem("access_token");
let res = null;
try {
res = await fetch(url, {
const res = await fetch(url, {
headers: token ? { Authorization: `Bearer ${token}` } : {},
});
} catch {
throw new Error("Failed to fetch binary: network error");
if (res.ok) return res;
if (url.startsWith("http")) {
const retry = await fetch(url);
if (retry.ok) return retry;
throw new Error(`Failed to fetch binary: ${retry.statusText || retry.status}`);
}
// If unauthorized and it looks like a Firebase URL, try without auth header
if (!res.ok && res.status === 401 && url.startsWith("http")) {
try {
res = await fetch(url);
} catch {
throw new Error("Failed to fetch binary: network error");
throw new Error(`Failed to fetch binary: ${res.statusText || res.status}`);
} catch (err) {
if (url.startsWith("http")) {
const retry = await fetch(url);
if (retry.ok) return retry;
throw new Error(`Failed to fetch binary: ${retry.statusText || retry.status}`);
}
throw err;
}
}
if (!res.ok) throw new Error(`Failed to fetch binary: ${res.statusText}`);
async function decodeBsmBinary(url) {
const res = await fetchBinaryResponse(url);
const buf = await res.arrayBuffer();
const view = new DataView(buf);
const steps = [];
@@ -89,10 +87,6 @@ async function decodeBsmBinary(url) {
return steps;
}
// ============================================================================
// Speed math — exponential mapping
// ============================================================================
function mapPercentageToSpeed(percent, minSpeed, maxSpeed) {
if (minSpeed == null || maxSpeed == null) return null;
const t = Math.max(0, Math.min(100, percent)) / 100;
@@ -102,38 +96,22 @@ function mapPercentageToSpeed(percent, minSpeed, maxSpeed) {
return Math.round(a * Math.pow(b / a, t));
}
// ============================================================================
// Apply note assignments: map archetype note bits → assigned bell bits
//
// The archetype steps encode which NOTES fire using bit flags (note 1 = bit 0,
// note 2 = bit 1, etc). noteAssignments[noteIdx] gives the bell number to fire
// for that note (0 = silence / no bell). We rebuild the step value using the
// assigned bells instead of the raw note numbers.
// ============================================================================
function applyNoteAssignments(rawStepValue, noteAssignments) {
if (!noteAssignments || noteAssignments.length === 0) return rawStepValue;
let result = 0;
for (let bit = 0; bit < 16; bit++) {
if (rawStepValue & (1 << bit)) {
const noteIdx = bit; // bit 0 = note 1, bit 1 = note 2, ...
const assignedBell = noteAssignments[noteIdx];
const assignedBell = noteAssignments[bit];
if (assignedBell && assignedBell > 0) {
result |= 1 << (assignedBell - 1);
}
// assignedBell === 0 means silence — do not set any bell bit
}
}
return result;
}
// ============================================================================
// Component
// ============================================================================
const mutedStyle = { color: "var(--text-muted)" };
const labelStyle = { color: "var(--text-secondary)" };
const NOTE_LABELS = "ABCDEFGHIJKLMNOP";
export default function PlaybackModal({ open, melody, builtMelody, files, archetypeCsv, onClose }) {
@@ -151,8 +129,6 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
const [speedPercent, setSpeedPercent] = useState(50);
const [toneLengthMs, setToneLengthMs] = useState(80);
const [loopEnabled, setLoopEnabled] = useState(true);
// activeBells: Set of bell numbers currently lit (for flash effect)
const [activeBells, setActiveBells] = useState(new Set());
const audioCtxRef = useRef(null);
@@ -168,7 +144,7 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
useEffect(() => { stepsRef.current = steps; }, [steps]);
useEffect(() => { speedMsRef.current = speedMs; }, [speedMs]);
useEffect(() => { toneLengthRef.current = toneLengthMs; }, [toneLengthMs]);
useEffect(() => { noteAssignmentsRef.current = noteAssignments; }, [noteAssignments]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => { noteAssignmentsRef.current = noteAssignments; }, [noteAssignments]);
useEffect(() => { loopEnabledRef.current = loopEnabled; }, [loopEnabled]);
const stopPlayback = useCallback(() => {
@@ -182,7 +158,6 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
setActiveBells(new Set());
}, []);
// Load steps on open
useEffect(() => {
if (!open) {
stopPlayback();
@@ -217,7 +192,7 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
setLoadError("");
return;
}
setLoadError(err.message);
setLoadError(err.message || "Failed to load melody data.");
})
.finally(() => setLoading(false));
return;
@@ -249,16 +224,12 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
if (!currentSteps.length) return;
const playFrom = stepIndex % currentSteps.length;
const ctx = ensureAudioCtx();
const rawStepValue = currentSteps[playFrom];
// Map archetype notes → assigned bells
const stepValue = applyNoteAssignments(rawStepValue, noteAssignmentsRef.current);
setCurrentStep(playFrom);
// Flash active bells for tone length, then clear
const bellsNow = new Set();
for (let bit = 0; bit < 16; bit++) {
if (stepValue & (1 << bit)) bellsNow.add(bit + 1);
@@ -267,27 +238,19 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
playStep(ctx, stepValue, toneLengthRef.current);
// Clear bell highlight after tone length
const flashTimer = setTimeout(() => {
setActiveBells(new Set());
}, toneLengthRef.current);
// Schedule next step after step interval
const flashTimer = setTimeout(() => setActiveBells(new Set()), toneLengthRef.current);
const timer = setTimeout(() => {
const next = playFrom + 1;
if (next >= stepsRef.current.length) {
if (loopEnabledRef.current) {
scheduleStep(0);
} else {
stopPlayback();
}
if (loopEnabledRef.current) scheduleStep(0);
else stopPlayback();
return;
}
scheduleStep(next);
}, speedMsRef.current);
playbackRef.current = { timer, flashTimer, stepIndex: playFrom };
}, [stopPlayback]); // eslint-disable-line react-hooks/exhaustive-deps
}, [stopPlayback]);
const handlePlay = () => {
if (!stepsRef.current.length) return;
@@ -295,15 +258,9 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
scheduleStep(0);
};
const handleStop = () => {
stopPlayback();
};
if (!open) return null;
const totalSteps = steps.length;
// Compute which bells are actually used (after assignment mapping)
const allBellsUsed = steps.reduce((set, v) => {
const mapped = applyNoteAssignments(v, noteAssignments);
for (let bit = 0; bit < 16; bit++) {
@@ -338,66 +295,39 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
style={{
backgroundColor: "var(--bg-card)",
borderColor: "var(--border-primary)",
maxWidth: "480px",
maxWidth: "1100px",
}}
>
{/* Header */}
<div
className="flex items-center justify-between px-6 py-4 border-b"
style={{ borderColor: "var(--border-primary)" }}
>
<div className="flex items-center justify-between px-6 py-4 border-b" style={{ borderColor: "var(--border-primary)" }}>
<div>
<h2 className="text-lg font-semibold" style={{ color: "var(--text-heading)" }}>
Melody Playback
</h2>
<p className="text-xs mt-0.5" style={mutedStyle}>
{melody?.information?.name?.en || "Melody"} — looping
</p>
<h2 className="text-lg font-semibold" style={{ color: "var(--text-heading)" }}>Melody Playback</h2>
<p className="text-xs mt-0.5" style={mutedStyle}>{melody?.information?.name?.en || "Melody"} - looping</p>
</div>
<button
onClick={() => { stopPlayback(); onClose(); }}
className="text-xl leading-none"
style={mutedStyle}
>
&times;
</button>
<button onClick={() => { stopPlayback(); onClose(); }} className="text-xl leading-none" style={mutedStyle}>&times;</button>
</div>
{/* Body */}
<div className="px-6 py-5 space-y-5">
{loading && (
<p className="text-sm text-center py-4" style={mutedStyle}>Loading binary...</p>
)}
{loading && <p className="text-sm text-center py-4" style={mutedStyle}>Loading binary...</p>}
{loadError && (
<div
className="text-sm rounded-md p-3 border"
style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}
>
<div className="text-sm rounded-md p-3 border" style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}>
{loadError}
</div>
)}
{!loading && !loadError && totalSteps > 0 && (
<>
{/* Step info */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
<div className="space-y-4">
<div className="flex items-center justify-between">
<span className="text-xs" style={mutedStyle}>
{totalSteps} steps &nbsp;·&nbsp; {allBellsUsed.size} bell{allBellsUsed.size !== 1 ? "s" : ""}
</span>
{currentStep >= 0 && (
<span className="text-xs font-mono" style={{ color: "var(--accent)" }}>
Step {currentStep + 1} / {totalSteps}
</span>
)}
<span className="text-xs" style={mutedStyle}>{totalSteps} steps · {allBellsUsed.size} bell{allBellsUsed.size !== 1 ? "s" : ""}</span>
{currentStep >= 0 && <span className="text-xs font-mono" style={{ color: "var(--accent)" }}>Step {currentStep + 1} / {totalSteps}</span>}
</div>
{/* Note → Bell assignment visualizer (shows when assignments exist) */}
{noteAssignments.length > 0 ? (
{noteAssignments.length > 0 && (
<div>
<p className="text-xs mb-2" style={mutedStyle}>Note → Assigned Bell</p>
<p className="text-xs mb-2" style={mutedStyle}>Note to Assigned Bell</p>
<div className="flex flex-wrap gap-1.5">
{noteAssignments.map((assignedBell, noteIdx) => {
// A note is active (flashing) if its assigned bell is currently lit in activeBells
const firesABell = assignedBell && assignedBell > 0;
const isActive = firesABell && activeBells.has(assignedBell);
return (
@@ -407,32 +337,20 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
style={{
minWidth: "36px",
padding: "4px 6px",
backgroundColor: isActive && firesABell
? "var(--accent)"
: isActive && !firesABell
? "rgba(156,163,175,0.15)"
: "var(--bg-card-hover)",
backgroundColor: isActive && firesABell ? "var(--accent)" : "var(--bg-card-hover)",
borderColor: isActive ? "var(--accent)" : "var(--border-primary)",
transform: isActive && firesABell ? "scale(1.1)" : "scale(1)",
opacity: isActive && !firesABell ? 0.5 : 1,
}}
>
<span className="text-xs font-bold leading-tight" style={{ color: isActive && firesABell ? "var(--bg-primary)" : "var(--text-secondary)" }}>
{NOTE_LABELS[noteIdx]}
</span>
<span className="text-xs font-bold leading-tight" style={{ color: isActive && firesABell ? "var(--bg-primary)" : "var(--text-secondary)" }}>{NOTE_LABELS[noteIdx]}</span>
<div className="w-full my-0.5" style={{ height: "1px", backgroundColor: isActive && firesABell ? "rgba(255,255,255,0.4)" : "var(--border-primary)" }} />
<span className="text-xs leading-tight" style={{ color: isActive && firesABell ? "var(--bg-primary)" : "var(--text-muted)" }}>
{assignedBell > 0 ? assignedBell : "—"}
</span>
<span className="text-xs leading-tight" style={{ color: isActive && firesABell ? "var(--bg-primary)" : "var(--text-muted)" }}>{assignedBell > 0 ? assignedBell : "-"}</span>
</div>
);
})}
</div>
<p className="text-xs mt-1" style={mutedStyle}>Top = Note, Bottom = Bell assigned</p>
</div>
) : null}
)}
{/* Active Bell circles (always shown) */}
{maxBell > 0 && (
<div>
<p className="text-xs mb-2" style={mutedStyle}>Active Bells</p>
@@ -448,8 +366,6 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
backgroundColor: isActive ? "#22c55e" : isUsed ? "var(--bg-card-hover)" : "var(--bg-primary)",
color: isActive ? "#fff" : isUsed ? "var(--text-secondary)" : "var(--border-primary)",
border: `2px solid ${isActive ? "#22c55e" : "var(--border-primary)"}`,
transition: "background-color 0.05s, border-color 0.05s",
transform: isActive ? "scale(1.15)" : "scale(1)",
}}
>
{b}
@@ -459,59 +375,59 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
</div>
</div>
)}
</div>
{/* Play / Stop */}
<div className="space-y-4">
<div className="flex items-center gap-3">
{!playing ? (
<button
onClick={handlePlay}
className="px-5 py-2 text-sm rounded-md font-medium transition-colors"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
>
<button onClick={handlePlay} className="px-5 py-2 text-sm rounded-md font-medium transition-colors" style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}>
Play
</button>
) : (
<button
onClick={handleStop}
className="px-5 py-2 text-sm rounded-md font-medium transition-colors"
style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}
>
<button onClick={stopPlayback} className="px-5 py-2 text-sm rounded-md font-medium transition-colors" style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}>
Stop
</button>
)}
<label className="inline-flex items-center gap-2 text-xs" style={mutedStyle}>
<input
type="checkbox"
checked={loopEnabled}
onChange={(e) => setLoopEnabled(e.target.checked)}
className="h-3.5 w-3.5 rounded"
/>
<input type="checkbox" checked={loopEnabled} onChange={(e) => setLoopEnabled(e.target.checked)} className="h-3.5 w-3.5 rounded" />
Loop
</label>
</div>
{/* Steps matrix */}
<div>
<div className="flex items-center justify-between mb-1.5">
<label className="text-sm font-medium" style={labelStyle}>Speed</label>
<div className="text-right">
<span className="text-sm font-bold" style={{ color: "var(--accent)" }}>{speedPercent}%</span>
{hasSpeedInfo && <span className="text-xs ml-2" style={mutedStyle}>({speedMs} ms/step)</span>}
</div>
</div>
<input type="range" min="1" max="100" step="1" value={speedPercent} onChange={(e) => setSpeedPercent(Number(e.target.value))} className="w-full h-2 rounded-lg appearance-none cursor-pointer" />
</div>
<div>
<div className="flex items-center justify-between mb-1.5">
<label className="text-sm font-medium" style={labelStyle}>Tone Length</label>
<span className="text-sm font-bold" style={{ color: "var(--accent)" }}>{toneLengthMs} ms</span>
</div>
<input type="range" min="20" max="400" step="10" value={toneLengthMs} onChange={(e) => setToneLengthMs(Number(e.target.value))} className="w-full h-2 rounded-lg appearance-none cursor-pointer" />
</div>
</div>
</div>
<div>
<p className="text-xs mb-2" style={mutedStyle}>Note/Step Matrix</p>
<div
className="rounded-md border overflow-auto"
style={{ borderColor: "var(--border-primary)", maxHeight: "280px" }}
>
<div className="rounded-md border overflow-auto" style={{ borderColor: "var(--border-primary)", maxHeight: "340px" }}>
<table className="min-w-max border-separate border-spacing-0 text-xs">
<thead>
<tr>
<th
className="sticky top-0 left-0 z-20 px-2 py-1.5 text-left border-b border-r"
style={{ backgroundColor: "var(--bg-primary)", borderColor: "var(--border-primary)", color: "var(--text-muted)" }}
>
Note \ Step
</th>
<th className="sticky top-0 left-0 z-20 px-2 py-1.5 text-left border-b border-r" style={{ backgroundColor: "var(--bg-primary)", borderColor: "var(--border-primary)", color: "var(--text-muted)" }}>Note \\ Step</th>
{steps.map((_, stepIdx) => (
<th
key={stepIdx}
className="sticky top-0 z-10 px-2 py-1.5 text-center border-b border-r"
style={{
minWidth: "36px",
minWidth: "40px",
backgroundColor: currentStep === stepIdx ? "rgba(116,184,22,0.2)" : "var(--bg-primary)",
borderColor: "var(--border-primary)",
color: currentStep === stepIdx ? "var(--accent)" : "var(--text-muted)",
@@ -524,45 +440,41 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
</thead>
<tbody>
{Array.from({ length: gridNoteCount }, (_, noteIdx) => (
<tr
key={noteIdx}
>
<th
className="sticky left-0 z-[1] px-2 py-1.5 text-left border-b border-r"
style={{ backgroundColor: "var(--bg-primary)", borderColor: "var(--border-primary)", color: "var(--text-secondary)" }}
>
{NOTE_LABELS[noteIdx]}
</th>
<tr key={noteIdx}>
<th className="sticky left-0 z-[1] px-2 py-1.5 text-left border-b border-r" style={{ backgroundColor: "var(--bg-primary)", borderColor: "var(--border-primary)", color: "var(--text-secondary)" }}>{NOTE_LABELS[noteIdx]}</th>
{steps.map((stepValue, stepIdx) => {
const enabled = Boolean(stepValue & (1 << noteIdx));
const isCurrent = currentStep === stepIdx;
const assignedBell = Number(noteAssignments[noteIdx] || 0);
const dotLabel = assignedBell > 0 ? assignedBell : noteIdx + 1;
return (
<td
key={`${noteIdx}-${stepIdx}`}
className="border-b border-r"
style={{
width: "36px",
height: "36px",
width: "40px",
height: "40px",
borderColor: "var(--border-primary)",
backgroundColor: isCurrent ? "rgba(116,184,22,0.06)" : "transparent",
}}
>
<span className="w-full h-full flex items-center justify-center" aria-hidden="true">
<span
className="w-full h-full flex items-center justify-center"
aria-hidden="true"
>
<span
className="flex items-center justify-center text-[10px] font-semibold"
style={{
width: "54%",
height: "54%",
width: "68%",
height: "68%",
borderRadius: "9999px",
backgroundColor: "var(--btn-primary)",
color: "var(--text-white)",
opacity: enabled ? 1 : 0,
transform: enabled ? "scale(1)" : "scale(0.4)",
boxShadow: enabled ? "0 0 10px 3px rgba(116, 184, 22, 0.5)" : "none",
transition: "opacity 140ms ease, transform 140ms ease, box-shadow 180ms ease",
}}
/>
>
{enabled ? dotLabel : ""}
</span>
</span>
</td>
);
@@ -574,77 +486,17 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
</div>
</div>
{/* Speed Slider */}
<div>
<div className="flex items-center justify-between mb-1.5">
<label className="text-sm font-medium" style={labelStyle}>Speed</label>
<div className="text-right">
<span className="text-sm font-bold" style={{ color: "var(--accent)" }}>
{speedPercent}%
</span>
{hasSpeedInfo && (
<span className="text-xs ml-2" style={mutedStyle}>
({speedMs} ms/step)
</span>
)}
</div>
</div>
<input
type="range"
min="1"
max="100"
step="1"
value={speedPercent}
onChange={(e) => setSpeedPercent(Number(e.target.value))}
className="w-full h-2 rounded-lg appearance-none cursor-pointer"
/>
<div className="flex justify-between text-xs mt-0.5" style={mutedStyle}>
<span>1% (slowest)</span>
<span>100% (fastest)</span>
</div>
{!hasSpeedInfo && (
<p className="text-xs mt-1.5" style={{ color: "var(--warning, #f59e0b)" }}>
No MIN/MAX speed set for this melody — using linear fallback.
No MIN/MAX speed set for this melody - using linear fallback.
</p>
)}
</div>
{/* Tone Length Slider */}
<div>
<div className="flex items-center justify-between mb-1.5">
<label className="text-sm font-medium" style={labelStyle}>Tone Length</label>
<span className="text-sm font-bold" style={{ color: "var(--accent)" }}>
{toneLengthMs} ms
</span>
</div>
<input
type="range"
min="20"
max="400"
step="10"
value={toneLengthMs}
onChange={(e) => setToneLengthMs(Number(e.target.value))}
className="w-full h-2 rounded-lg appearance-none cursor-pointer"
/>
<div className="flex justify-between text-xs mt-0.5" style={mutedStyle}>
<span>Short (20 ms)</span>
<span>Long (400 ms)</span>
</div>
</div>
</>
)}
</div>
{/* Footer */}
<div
className="flex justify-end px-6 py-4 border-t"
style={{ borderColor: "var(--border-primary)" }}
>
<button
onClick={() => { stopPlayback(); onClose(); }}
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)" }}
>
<div className="flex justify-end px-6 py-4 border-t" style={{ borderColor: "var(--border-primary)" }}>
<button onClick={() => { stopPlayback(); onClose(); }} className="px-4 py-2 text-sm rounded-md transition-colors" style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)" }}>
Close
</button>
</div>