332 lines
12 KiB
JavaScript
332 lines
12 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import { useParams, useNavigate } from "react-router-dom";
|
|
import api from "../api/client";
|
|
import { useAuth } from "../auth/AuthContext";
|
|
import ConfirmDialog from "../components/ConfirmDialog";
|
|
import {
|
|
getLocalizedValue,
|
|
getLanguageName,
|
|
normalizeColor,
|
|
formatDuration,
|
|
} from "./melodyUtils";
|
|
|
|
function Field({ label, children }) {
|
|
return (
|
|
<div>
|
|
<dt className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>
|
|
{label}
|
|
</dt>
|
|
<dd className="mt-1 text-sm" style={{ color: "var(--text-primary)" }}>{children || "-"}</dd>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function MelodyDetail() {
|
|
const { id } = useParams();
|
|
const navigate = useNavigate();
|
|
const { hasRole } = useAuth();
|
|
const canEdit = hasRole("superadmin", "melody_editor");
|
|
|
|
const [melody, setMelody] = useState(null);
|
|
const [files, setFiles] = useState({});
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
const [showDelete, setShowDelete] = useState(false);
|
|
const [displayLang, setDisplayLang] = useState("en");
|
|
const [melodySettings, setMelodySettings] = useState(null);
|
|
|
|
useEffect(() => {
|
|
api.get("/settings/melody").then((ms) => {
|
|
setMelodySettings(ms);
|
|
setDisplayLang(ms.primary_language || "en");
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [id]);
|
|
|
|
const loadData = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [m, f] = await Promise.all([
|
|
api.get(`/melodies/${id}`),
|
|
api.get(`/melodies/${id}/files`),
|
|
]);
|
|
setMelody(m);
|
|
setFiles(f);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
try {
|
|
await api.delete(`/melodies/${id}`);
|
|
navigate("/melodies");
|
|
} catch (err) {
|
|
setError(err.message);
|
|
setShowDelete(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <div className="text-center py-8" style={{ color: "var(--text-muted)" }}>Loading...</div>;
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div
|
|
className="text-sm rounded-md p-3 border"
|
|
style={{
|
|
backgroundColor: "var(--danger-bg)",
|
|
borderColor: "var(--danger)",
|
|
color: "var(--danger-text)",
|
|
}}
|
|
>
|
|
{error}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!melody) return null;
|
|
|
|
const info = melody.information || {};
|
|
const settings = melody.default_settings || {};
|
|
const languages = melodySettings?.available_languages || ["en"];
|
|
const displayName = getLocalizedValue(info.name, displayLang, "Untitled Melody");
|
|
|
|
const badgeStyle = (active) => ({
|
|
backgroundColor: active ? "var(--success-bg)" : "var(--bg-card-hover)",
|
|
color: active ? "var(--success-text)" : "var(--text-muted)",
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<button
|
|
onClick={() => navigate("/melodies")}
|
|
className="text-sm mb-2 inline-block"
|
|
style={{ color: "var(--accent)" }}
|
|
>
|
|
← Back to Melodies
|
|
</button>
|
|
<div className="flex items-center gap-3">
|
|
<h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>{displayName}</h1>
|
|
{languages.length > 1 && (
|
|
<select
|
|
value={displayLang}
|
|
onChange={(e) => setDisplayLang(e.target.value)}
|
|
className="text-xs px-2 py-1 rounded border"
|
|
>
|
|
{languages.map((l) => (
|
|
<option key={l} value={l}>
|
|
{getLanguageName(l)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{canEdit && (
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => navigate(`/melodies/${id}/edit`)}
|
|
className="px-4 py-2 text-sm rounded-md transition-colors"
|
|
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
onClick={() => setShowDelete(true)}
|
|
className="px-4 py-2 text-sm rounded-md transition-colors"
|
|
style={{ backgroundColor: "var(--danger-btn)", color: "#fff" }}
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
|
{/* Left column */}
|
|
<div className="space-y-6">
|
|
{/* Melody Information */}
|
|
<section
|
|
className="rounded-lg p-6 border"
|
|
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
|
>
|
|
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
|
|
Melody Information
|
|
</h2>
|
|
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
<Field label="Type">
|
|
<span className="capitalize">{melody.type}</span>
|
|
</Field>
|
|
<Field label="Tone">
|
|
<span className="capitalize">{info.melodyTone}</span>
|
|
</Field>
|
|
<Field label="Total Active Notes (bells)">{info.totalNotes}</Field>
|
|
<Field label="Steps">{info.steps}</Field>
|
|
<Field label="Min Speed">{info.minSpeed}</Field>
|
|
<Field label="Max Speed">{info.maxSpeed}</Field>
|
|
<Field label="Color">
|
|
{info.color ? (
|
|
<span className="inline-flex items-center gap-2">
|
|
<span
|
|
className="w-4 h-4 rounded inline-block border"
|
|
style={{ backgroundColor: normalizeColor(info.color), borderColor: "var(--border-primary)" }}
|
|
/>
|
|
{info.color}
|
|
</span>
|
|
) : (
|
|
"-"
|
|
)}
|
|
</Field>
|
|
<Field label="True Ring">
|
|
<span className="px-2 py-0.5 text-xs rounded-full" style={badgeStyle(info.isTrueRing)}>
|
|
{info.isTrueRing ? "Yes" : "No"}
|
|
</span>
|
|
</Field>
|
|
<div className="col-span-2 md:col-span-3">
|
|
<Field label="Description">
|
|
{getLocalizedValue(info.description, displayLang)}
|
|
</Field>
|
|
</div>
|
|
<div className="col-span-2 md:col-span-3">
|
|
<Field label="Custom Tags">
|
|
{info.customTags?.length > 0 ? (
|
|
<div className="flex flex-wrap gap-1 mt-1">
|
|
{info.customTags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="px-2 py-0.5 text-xs rounded-full"
|
|
style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
"-"
|
|
)}
|
|
</Field>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
|
|
{/* Identifiers */}
|
|
<section
|
|
className="rounded-lg p-6 border"
|
|
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
|
>
|
|
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
|
|
Identifiers
|
|
</h2>
|
|
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
<Field label="Document ID">{melody.id}</Field>
|
|
<Field label="PID (Playback ID)">{melody.pid}</Field>
|
|
<Field label="UID">{melody.uid}</Field>
|
|
<div className="col-span-2 md:col-span-3">
|
|
<Field label="URL">{melody.url}</Field>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
</div>
|
|
|
|
{/* Right column */}
|
|
<div className="space-y-6">
|
|
{/* Default Settings */}
|
|
<section
|
|
className="rounded-lg p-6 border"
|
|
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
|
>
|
|
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
|
|
Default Settings
|
|
</h2>
|
|
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
<Field label="Speed">{settings.speed}%</Field>
|
|
<Field label="Duration">{formatDuration(settings.duration)}</Field>
|
|
<Field label="Total Run Duration">{settings.totalRunDuration}</Field>
|
|
<Field label="Pause Duration">{settings.pauseDuration}</Field>
|
|
<Field label="Infinite Loop">
|
|
<span className="px-2 py-0.5 text-xs rounded-full" style={badgeStyle(settings.infiniteLoop)}>
|
|
{settings.infiniteLoop ? "Yes" : "No"}
|
|
</span>
|
|
</Field>
|
|
<div className="col-span-2 md:col-span-3">
|
|
<Field label="Echo Ring">
|
|
{settings.echoRing?.length > 0
|
|
? settings.echoRing.join(", ")
|
|
: "-"}
|
|
</Field>
|
|
</div>
|
|
<div className="col-span-2 md:col-span-3">
|
|
<Field label="Note Assignments">
|
|
{settings.noteAssignments?.length > 0
|
|
? settings.noteAssignments.join(", ")
|
|
: "-"}
|
|
</Field>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
|
|
{/* Files */}
|
|
<section
|
|
className="rounded-lg p-6 border"
|
|
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
|
>
|
|
<h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>Files</h2>
|
|
<dl className="space-y-4">
|
|
<Field label="Binary File">
|
|
{files.binary_url ? (
|
|
<a
|
|
href={files.binary_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline"
|
|
style={{ color: "var(--accent)" }}
|
|
>
|
|
Download binary
|
|
</a>
|
|
) : (
|
|
<span style={{ color: "var(--text-muted)" }}>Not uploaded</span>
|
|
)}
|
|
</Field>
|
|
<Field label="Audio Preview">
|
|
{files.preview_url ? (
|
|
<div className="space-y-1">
|
|
<audio controls src={files.preview_url} className="h-8" />
|
|
<a
|
|
href={files.preview_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline text-xs"
|
|
style={{ color: "var(--accent)" }}
|
|
>
|
|
Download preview
|
|
</a>
|
|
</div>
|
|
) : (
|
|
<span style={{ color: "var(--text-muted)" }}>Not uploaded</span>
|
|
)}
|
|
</Field>
|
|
</dl>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<ConfirmDialog
|
|
open={showDelete}
|
|
title="Delete Melody"
|
|
message={`Are you sure you want to delete "${displayName}"? This will also delete any uploaded files. This action cannot be undone.`}
|
|
onConfirm={handleDelete}
|
|
onCancel={() => setShowDelete(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|