bdim/Canto
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Enhance AudioPlayer download functionality for mobile devices and update dialog styles

Browse Source
This commit is contained in:
bdim404
2026-02-05 23:13:43 +08:00
parent 740ea52c35
commit d01fbe8171
4 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
qwen3-tts-frontend/src/components/AudioPlayer.tsx
View File

@@ -85,11 +85,15 @@ const AudioPlayer = memo(({ audioUrl, jobId }: AudioPlayerProps) => {
}, [])
const handleDownload = useCallback(() => {
const link = document.createElement('a')
link.href = blobUrl || audioUrl
link.download = `tts-${jobId}-${Date.now()}.wav`
link.click()
}, [blobUrl, audioUrl, jobId])
if (useMobileMode) {
window.open(blobUrl || audioUrl, '_blank')
} else {
const link = document.createElement('a')
link.href = blobUrl || audioUrl
link.download = `tts-${jobId}-${Date.now()}.wav`
link.click()
}
}, [blobUrl, audioUrl, jobId, useMobileMode])
if (isLoading) {
return (
@@ -131,6 +135,8 @@ const AudioPlayer = memo(({ audioUrl, jobId }: AudioPlayerProps) => {
customVolumeControls={[]}
showJumpControls={false}
volume={1}
preload="metadata"
autoPlayAfterSrcChange={false}
/>
</div>
)

2
qwen3-tts-frontend/src/components/ui/alert-dialog.tsx
View File

@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"fixed left-[50%] top-[50%] z-[51] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}

2
qwen3-tts-frontend/src/components/ui/dialog.tsx
View File

@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"fixed left-[50%] top-[50%] z-[51] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}

4
qwen3-tts-frontend/src/index.css
View File

@@ -53,9 +53,9 @@
}
.dark {
--background: 0 0% 5%;
--background: 0 0% 10%;
--foreground: 0 0% 98%;
--card: 0 0% 5%;
--card: 0 0% 14%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 5%;
--popover-foreground: 0 0% 98%;