Melodies
{canEdit && (
@@ -962,7 +970,7 @@ export default function MelodyList() {
onSearch={setSearch}
placeholder="Search by name, description, or tags..."
/>
-
+
-
+
+
+
+ {hasAnyFilter
+ ? `Filtered - Showing ${displayRows.length} / ${melodies.length} Melodies | ${offlineTaggedCount} Melodies tagged for Offline`
+ : `Showing all (${melodies.length}) Melodies | ${offlineTaggedCount} Melodies tagged for Offline`}
+
+
{canEdit && (
)}
-
- {displayRows.length} / {total} {total === 1 ? "melody" : "melodies"}
-
diff --git a/frontend/src/melodies/archetypes/ArchetypeList.jsx b/frontend/src/melodies/archetypes/ArchetypeList.jsx
index b3bb876..d538a95 100644
--- a/frontend/src/melodies/archetypes/ArchetypeList.jsx
+++ b/frontend/src/melodies/archetypes/ArchetypeList.jsx
@@ -23,6 +23,158 @@ function copyText(text, onSuccess) {
}
}
+function stepValueToNotation(stepValue) {
+ const v = Number(stepValue || 0) & 0xffff;
+ if (!v) return "0";
+ const bells = [];
+ for (let bit = 0; bit < 16; bit++) {
+ if (v & (1 << bit)) bells.push(String(bit + 1));
+ }
+ return bells.join("+");
+}
+
+async function decodeBinaryToStepsString(file) {
+ const buf = await file.arrayBuffer();
+ const view = new DataView(buf);
+ const values = [];
+ for (let i = 0; i + 1 < buf.byteLength; i += 2) {
+ values.push(view.getUint16(i, false));
+ }
+ return values.map(stepValueToNotation).join(",");
+}
+
+function UploadArchetypeModal({ open, existingArchetypes, onClose, onUploaded }) {
+ const [file, setFile] = useState(null);
+ const [name, setName] = useState("");
+ const [pid, setPid] = useState("");
+ const [submitting, setSubmitting] = useState(false);
+ const [error, setError] = useState("");
+
+ useEffect(() => {
+ if (!open) {
+ setFile(null);
+ setName("");
+ setPid("");
+ setSubmitting(false);
+ setError("");
+ }
+ }, [open]);
+
+ if (!open) return null;
+
+ const submit = async () => {
+ setError("");
+ if (!file) { setError("Please choose a .bin or .bsm file."); return; }
+ if (!name.trim()) { setError("Friendly name is required."); return; }
+ if (!pid.trim()) { setError("PID is required."); return; }
+
+ const dupName = (existingArchetypes || []).find((a) => a.name?.toLowerCase() === name.trim().toLowerCase());
+ if (dupName) { setError(`An archetype with the name "${name.trim()}" already exists.`); return; }
+ const dupPid = (existingArchetypes || []).find((a) => a.pid?.toLowerCase() === pid.trim().toLowerCase());
+ if (dupPid) { setError(`An archetype with the PID "${pid.trim()}" already exists.`); return; }
+
+ setSubmitting(true);
+ try {
+ const steps = await decodeBinaryToStepsString(file);
+ const created = await api.post("/builder/melodies", {
+ name: name.trim(),
+ pid: pid.trim(),
+ steps,
+ });
+ await api.post(`/builder/melodies/${created.id}/build-binary`);
+ onUploaded?.();
+ onClose?.();
+ } catch (err) {
+ setError(err.message || "Failed to upload archetype.");
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ return (
+
e.target === e.currentTarget && !submitting && onClose()}
+ >
+
+
+
+
Upload Archetype
+
Upload .bin/.bsm and save as selectable archetype
+
+
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
setFile(e.target.files?.[0] || null)}
+ className="w-full px-3 py-2 rounded-md text-sm border"
+ disabled={submitting}
+ />
+ {file && (
+
{file.name}
+ )}
+
+
+
+ setName(e.target.value)}
+ className="w-full px-3 py-2 rounded-md text-sm border"
+ placeholder="e.g. Doxology Festive Upload"
+ disabled={submitting}
+ />
+
+
+
+ setPid(e.target.value)}
+ className="w-full px-3 py-2 rounded-md text-sm border"
+ placeholder="e.g. builtin_doxology_upload"
+ disabled={submitting}
+ />
+
+
+
+
+
+
+
+
+
+ );
+}
+
function CodeSnippetModal({ melody, onClose }) {
const [copied, setCopied] = useState(false);
if (!melody) return null;
@@ -127,6 +279,7 @@ export default function ArchetypeList() {
const [assignedModal, setAssignedModal] = useState(null); // { archetype, melodyDetails }
const [loadingAssigned, setLoadingAssigned] = useState(false);
const [primaryLang, setPrimaryLang] = useState("en");
+ const [showUploadModal, setShowUploadModal] = useState(false);
useEffect(() => {
api.get("/settings/melody").then((ms) => setPrimaryLang(ms.primary_language || "en")).catch(() => {});
@@ -259,13 +412,22 @@ export default function ArchetypeList() {
Add Archetypes, and Build binary (.bsm) files and firmware PROGMEM code.