CODEX - Varioues Fixes, and Replaced the Playback Modal with VIEW modal
This commit is contained in:
@@ -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 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");
|
||||
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 (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,180 +295,139 @@ 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}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<button onClick={() => { stopPlayback(); onClose(); }} className="text-xl leading-none" style={mutedStyle}>×</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="flex items-center justify-between">
|
||||
<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 ? (
|
||||
<div>
|
||||
<p className="text-xs mb-2" style={mutedStyle}>Note → 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 (
|
||||
<div
|
||||
key={noteIdx}
|
||||
className="flex flex-col items-center rounded-md border transition-all"
|
||||
style={{
|
||||
minWidth: "36px",
|
||||
padding: "4px 6px",
|
||||
backgroundColor: isActive && firesABell
|
||||
? "var(--accent)"
|
||||
: isActive && !firesABell
|
||||
? "rgba(156,163,175,0.15)"
|
||||
: "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>
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<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 · {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>
|
||||
<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>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{Array.from({ length: maxBell }, (_, i) => i + 1).map((b) => {
|
||||
const isActive = activeBells.has(b);
|
||||
const isUsed = allBellsUsed.has(b);
|
||||
return (
|
||||
<div
|
||||
key={b}
|
||||
className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold"
|
||||
style={{
|
||||
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}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{noteAssignments.length > 0 && (
|
||||
<div>
|
||||
<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) => {
|
||||
const firesABell = assignedBell && assignedBell > 0;
|
||||
const isActive = firesABell && activeBells.has(assignedBell);
|
||||
return (
|
||||
<div
|
||||
key={noteIdx}
|
||||
className="flex flex-col items-center rounded-md border transition-all"
|
||||
style={{
|
||||
minWidth: "36px",
|
||||
padding: "4px 6px",
|
||||
backgroundColor: isActive && firesABell ? "var(--accent)" : "var(--bg-card-hover)",
|
||||
borderColor: isActive ? "var(--accent)" : "var(--border-primary)",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{maxBell > 0 && (
|
||||
<div>
|
||||
<p className="text-xs mb-2" style={mutedStyle}>Active Bells</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{Array.from({ length: maxBell }, (_, i) => i + 1).map((b) => {
|
||||
const isActive = activeBells.has(b);
|
||||
const isUsed = allBellsUsed.has(b);
|
||||
return (
|
||||
<div
|
||||
key={b}
|
||||
className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold"
|
||||
style={{
|
||||
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)"}`,
|
||||
}}
|
||||
>
|
||||
{b}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<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)" }}>
|
||||
Play
|
||||
</button>
|
||||
) : (
|
||||
<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" />
|
||||
Loop
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
)}
|
||||
|
||||
{/* Play / Stop */}
|
||||
<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)" }}
|
||||
>
|
||||
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)" }}
|
||||
>
|
||||
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"
|
||||
/>
|
||||
Loop
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Steps matrix */}
|
||||
<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.
|
||||
</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>
|
||||
{!hasSpeedInfo && (
|
||||
<p className="text-xs mt-1.5" style={{ color: "var(--warning, #f59e0b)" }}>
|
||||
No MIN/MAX speed set for this melody - using linear fallback.
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user