forked from flow/vue3js-app-proposal-for-sdk-claude
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:
parent
c52b0bf9cf
commit
338ea5be49
25
audiowidget.tmpl.stub
Normal file
25
audiowidget.tmpl.stub
Normal 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 %}
|
||||
@ -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,
|
||||
]);
|
||||
};
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user