feat: add inline audio player for generated listening audio in Generation page

Made-with: Cursor
This commit is contained in:
Yamen Ahmad
2026-04-12 02:33:35 +04:00
parent f17c94ccd6
commit 7dce59929d

View File

@@ -263,7 +263,12 @@ export default function GenerationPage() {
if (activeModule !== "listening") return;
const st = getModuleState("listening");
const sections = [...st.listeningSections];
sections[vars.sectionIndex] = { ...sections[vars.sectionIndex], audioUrl: res.audio_url || "" };
let url = res.audio_url || "";
if (!url && res.audio_base64) {
const ct = res.content_type || "audio/mpeg";
url = `data:${ct};base64,${res.audio_base64}`;
}
sections[vars.sectionIndex] = { ...sections[vars.sectionIndex], audioUrl: url };
updateModuleState("listening", { listeningSections: sections });
toast({ title: "Audio generated" });
},
@@ -648,7 +653,12 @@ export default function GenerationPage() {
{generateAudioMut.isPending ? <Loader2 className="h-3 w-3 mr-1 animate-spin" /> : <Play className="h-3 w-3 mr-1" />}
Generate Audio
</Button>
{sec.audioUrl && <p className="text-xs text-green-600 mt-1">Audio ready</p>}
{sec.audioUrl && (
<div className="mt-2 space-y-1">
<p className="text-xs text-green-600">Audio ready</p>
<audio controls src={sec.audioUrl} className="w-full h-8" />
</div>
)}
</CollapsibleContent>
</Collapsible>
</CardContent>