初始化

wwf

2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
'use client'
import { useState } from 'react'
import { useParams, usePathname } from 'next/navigation'
import {
  RiVolumeUpLine,
} from '@remixicon/react'
import { t } from 'i18next'
import Tooltip from '@/app/components/base/tooltip'
import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 
type AudioBtnProps = {
  id?: string
  voice?: string
  value?: string
}
 
type AudioState = 'initial' | 'loading' | 'playing' | 'paused' | 'ended'
 
const AudioBtn = ({
  id,
  voice,
  value,
}: AudioBtnProps) => {
  const [audioState, setAudioState] = useState<AudioState>('initial')
 
  const params = useParams()
  const pathname = usePathname()
  const audio_finished_call = (event: string): any => {
    switch (event) {
      case 'ended':
        setAudioState('ended')
        break
      case 'paused':
        setAudioState('ended')
        break
      case 'loaded':
        setAudioState('loading')
        break
      case 'play':
        setAudioState('playing')
        break
      case 'error':
        setAudioState('ended')
        break
    }
  }
  let url = ''
  let isPublic = false
 
  if (params.token) {
    url = '/text-to-audio'
    isPublic = true
  }
  else if (params.appId) {
    if (pathname.search('explore/installed') > -1)
      url = `/installed-apps/${params.appId}/text-to-audio`
    else
      url = `/apps/${params.appId}/text-to-audio`
  }
  const handleToggle = async () => {
    if (audioState === 'playing' || audioState === 'loading') {
      setTimeout(() => setAudioState('paused'), 1)
      AudioPlayerManager.getInstance().getAudioPlayer(url, isPublic, id, value, voice, audio_finished_call).pauseAudio()
    }
    else {
      setTimeout(() => setAudioState('loading'), 1)
      AudioPlayerManager.getInstance().getAudioPlayer(url, isPublic, id, value, voice, audio_finished_call).playAudio()
    }
  }
 
  const tooltipContent = {
    initial: t('appApi.play'),
    ended: t('appApi.play'),
    paused: t('appApi.pause'),
    playing: t('appApi.playing'),
    loading: t('appApi.loading'),
  }[audioState]
 
  return (
    <Tooltip
      popupContent={tooltipContent}
    >
      <ActionButton
        state={
          audioState === 'loading' || audioState === 'playing'
            ? ActionButtonState.Active
            : ActionButtonState.Default
        }
        onClick={handleToggle}
        disabled={audioState === 'loading'}
      >
        <RiVolumeUpLine className='h-4 w-4' />
      </ActionButton>
    </Tooltip>
  )
}
 
export default AudioBtn