From 338ea5be49c3e40db3de10357b35297c50bb0d84 Mon Sep 17 00:00:00 2001
From: c0dev0id <sh+git@codevoid.de>
Date: Wed, 24 Jun 2026 13:16:28 +0200
Subject: [PATCH] Fix result display: audio player, error message, correct
 field names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use file_accomplished (not frozen+!error) to gate audio player
- Use errors field (was .error — wrong name, always falsy)
- Render <audio controls> instead of bare download link
- Add audiowidget.tmpl.stub for server-side customization
---
 audiowidget.tmpl.stub       | 25 +++++++++++++++++++++++++
 static/components/PaneCP.js | 18 +++++++++++++-----
 2 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 audiowidget.tmpl.stub

diff --git a/audiowidget.tmpl.stub b/audiowidget.tmpl.stub
new file mode 100644
index 0000000..dbe5857
--- /dev/null
+++ b/audiowidget.tmpl.stub
@@ -0,0 +1,25 @@
+{# audiowidget.tmpl.stub
+   Copy to neusician/templates/ and rename to audiowidget.tmpl.
+   Include from base.tmpl or any score page with:
+       {% include 'audiowidget.tmpl' %}
+
+   Variables expected in context (all provided by /sompyle/status.json
+   via the sompyler_status_json route):
+     result_url   – URL to the rendered audio file (e.g. /sompyle/result.mp3)
+     errors       – non-empty string on synthesis failure, else empty/absent
+
+   The default JS audio widget in PaneCP renders a plain <audio> element.
+   Replace or extend this stub to match your site's look and feel.
+#}
+
+{% if errors %}
+  <div class="se-error">{{ errors }}</div>
+{% elif result_url %}
+  <figure class="audio-result">
+    <figcaption>Rendered result</figcaption>
+    <audio controls preload="metadata">
+      <source src="{{ result_url }}" type="audio/mpeg">
+      <a href="{{ result_url }}">Download MP3</a>
+    </audio>
+  </figure>
+{% endif %}
diff --git a/static/components/PaneCP.js b/static/components/PaneCP.js
index 9dac7c9..8f158fb 100644
--- a/static/components/PaneCP.js
+++ b/static/components/PaneCP.js
@@ -110,14 +110,22 @@ export const PaneCP = {
                 // Export error
                 exportError.value ? h('div', { class: 'se-error' }, exportError.value) : null,
 
-                // Status poller
+                // Status poller (while running)
                 store.synthesisStatus && !store.synthesisStatus.frozen
                     ? h(StatusPoller, { store }) : null,
 
-                // Result link
-                store.synthesisStatus?.frozen && !store.synthesisStatus?.error
-                    ? h('a', { href: '/sompyle/result.mp3', style: 'display:block;margin-top:0.5rem' },
-                        'Download result') : null,
+                // Synthesis error
+                store.synthesisStatus?.frozen && store.synthesisStatus?.errors
+                    ? h('div', { class: 'se-error', style: 'margin-top:0.5rem' },
+                        store.synthesisStatus.errors) : null,
+
+                // Audio result
+                store.synthesisStatus?.file_accomplished
+                    ? h('audio', {
+                        controls: true,
+                        src: '/sompyle/result.mp3',
+                        style: 'display:block;width:100%;margin-top:0.5rem',
+                      }) : null,
             ]);
         };
     },