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

refactor: Simplify AudioPlayer component by removing mobile detection logic and streamline download handling; enhance Home layout for better responsiveness

Browse Source
This commit is contained in:
bdim404
2026-02-05 23:30:07 +08:00
parent d01fbe8171
commit f9eaf88807
2 changed files with 45 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,35 +12,16 @@ interface AudioPlayerProps {
jobId: number
}
const isMobileDevice = () => {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}
const AudioPlayer = memo(({ audioUrl, jobId }: AudioPlayerProps) => {
const { t } = useTranslation('common')
const [blobUrl, setBlobUrl] = useState<string>('')
const [isLoading, setIsLoading] = useState(false)
const [loadError, setLoadError] = useState<string | null>(null)
const [useMobileMode, setUseMobileMode] = useState(false)
const previousAudioUrlRef = useRef<string>('')
useEffect(() => {
setUseMobileMode(isMobileDevice())
}, [])
useEffect(() => {
if (!audioUrl || audioUrl === previousAudioUrlRef.current) return
if (useMobileMode) {
const token = localStorage.getItem('token')
const separator = audioUrl.includes('?') ? '&' : '?'
const urlWithToken = token ? `${audioUrl}${separator}token=${token}` : audioUrl
setBlobUrl(urlWithToken)
previousAudioUrlRef.current = audioUrl
setIsLoading(false)
return
}
let active = true
const prevBlobUrl = blobUrl
@@ -76,7 +57,7 @@ const AudioPlayer = memo(({ audioUrl, jobId }: AudioPlayerProps) => {
return () => {
active = false
}
}, [audioUrl, useMobileMode])
}, [audioUrl, blobUrl, t])
useEffect(() => {
return () => {
@@ -85,15 +66,11 @@ const AudioPlayer = memo(({ audioUrl, jobId }: AudioPlayerProps) => {
}, [])
const handleDownload = useCallback(() => {
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])
}, [blobUrl, audioUrl, jobId])
if (isLoading) {
return (

18
qwen3-tts-frontend/src/pages/Home.tsx
View File

@@ -1,7 +1,7 @@
import { useState, useRef, lazy, Suspense, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Navbar } from '@/components/Navbar'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { Card, CardContent } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { User, Palette, Copy } from 'lucide-react'
import type { CustomVoiceFormHandle } from '@/components/tts/CustomVoiceForm'
@@ -47,11 +47,10 @@ function Home() {
onOpenChange={setSidebarOpen}
/>
<main className="flex-1 overflow-y-auto container mx-auto p-3 md:p-6 max-w-[800px] md:max-w-[700px]">
<Card>
<CardHeader>
<main className="flex-1 overflow-y-auto flex items-start md:items-center justify-center">
<div className="w-full container mx-auto p-3 md:p-6 max-w-[800px] md:max-w-[700px]">
<Tabs value={currentTab} onValueChange={setCurrentTab}>
<TabsList className="grid w-full grid-cols-3 h-9">
<TabsList className="grid w-full grid-cols-3 h-9 mb-3">
<TabsTrigger value="custom-voice" variant="default">
<User className="h-4 w-4 md:mr-2" />
<span className="hidden md:inline">{t('customVoiceTab')}</span>
@@ -65,11 +64,9 @@ function Home() {
<span className="hidden md:inline">{t('voiceCloneTab')}</span>
</TabsTrigger>
</TabsList>
</Tabs>
</CardHeader>
<CardContent className="pt-0 px-3 md:px-6">
<Tabs value={currentTab}>
<Card>
<CardContent className="pt-6 px-3 md:px-6 pb-6">
<TabsContent value="custom-voice" className="mt-0">
<Suspense fallback={<FormSkeleton />}>
<CustomVoiceForm ref={customVoiceFormRef} />
@@ -87,9 +84,10 @@ function Home() {
<VoiceCloneForm />
</Suspense>
</TabsContent>
</Tabs>
</CardContent>
</Card>
</Tabs>
</div>
</main>
</div>
</div>