Fix result display: audio player, error message, correct field names

- 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
This commit is contained in:
c0dev0id 2026-06-24 13:16:28 +02:00
parent c52b0bf9cf
commit 338ea5be49
2 changed files with 38 additions and 5 deletions

25
audiowidget.tmpl.stub Normal file
View File

@ -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 %}

View File

@ -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,
]);
};
},