devops/encoach_frontend_new_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Made-with: Cursor
This commit is contained in:
Yamen Ahmad
2026-04-12 02:33:35 +04:00
parent f17c94ccd6
commit 7dce59929d
1 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/GenerationPage.tsx
View File

@@ -263,7 +263,12 @@ export default function GenerationPage() {
if (activeModule !== "listening") return; if (activeModule !== "listening") return;
const st = getModuleState("listening"); const st = getModuleState("listening");
const sections = [...st.listeningSections]; 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 }); updateModuleState("listening", { listeningSections: sections });
toast({ title: "Audio generated" }); 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" />} {generateAudioMut.isPending ? <Loader2 className="h-3 w-3 mr-1 animate-spin" /> : <Play className="h-3 w-3 mr-1" />}
Generate Audio Generate Audio
</Button> </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> </CollapsibleContent>
</Collapsible> </Collapsible>
</CardContent> </CardContent>