@moises.ai/design-system 4.18.6 → 4.18.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Flex, Text, Spinner } from '@radix-ui/themes'
|
|
2
|
-
import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
|
|
2
|
+
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
|
|
3
3
|
import { ArrowLeftIcon } from '../../../icons'
|
|
4
4
|
import { ProjectsListContext } from '../context'
|
|
5
5
|
import { NumberPicker } from '../../NumberPicker/NumberPicker'
|
|
@@ -7,6 +7,8 @@ import { UserIcon } from '../../../icons'
|
|
|
7
7
|
import { Button } from '../../Button/Button'
|
|
8
8
|
import styles from './ProjectTrackVoice.module.css'
|
|
9
9
|
|
|
10
|
+
const DEBOUNCE_MS = 3000
|
|
11
|
+
|
|
10
12
|
const ProjectTrackVoice = ({
|
|
11
13
|
...props
|
|
12
14
|
}) => {
|
|
@@ -20,31 +22,42 @@ const ProjectTrackVoice = ({
|
|
|
20
22
|
const [pitchShiftSelected, setpitchShiftSelected] = useState(hasTransfers ? parseInt(transfers?.[0]?.pitchShift ?? 0) : 0)
|
|
21
23
|
|
|
22
24
|
const [loading, setLoading] = useState(_loading)
|
|
25
|
+
const debounceRef = useRef(null)
|
|
23
26
|
|
|
24
27
|
useEffect(() => {
|
|
25
28
|
setLoading(_loading)
|
|
26
29
|
|
|
27
|
-
if (!
|
|
30
|
+
if (!_loading && hasTransfers) {
|
|
28
31
|
setpitchShiftSelected(parseInt(transfers?.[0]?.pitchShift ?? 0))
|
|
29
32
|
}
|
|
30
33
|
}, [_loading, hasTransfers, transfers])
|
|
31
34
|
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
return () => {
|
|
37
|
+
if (debounceRef.current) clearTimeout(debounceRef.current)
|
|
38
|
+
}
|
|
39
|
+
}, [])
|
|
40
|
+
|
|
32
41
|
const getAudioUrl = useCallback((pitchShift) => {
|
|
33
42
|
return hasTransfers ? transfers?.find((transfer) => parseInt(transfer.pitchShift) === pitchShift)?.audioUrl : audioUrl
|
|
34
43
|
}, [hasTransfers, transfers, audioUrl])
|
|
35
44
|
|
|
36
45
|
const handleChangeTransfer = useCallback((value) => {
|
|
37
46
|
setpitchShiftSelected(value)
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
47
|
+
|
|
48
|
+
if (debounceRef.current) clearTimeout(debounceRef.current)
|
|
49
|
+
debounceRef.current = setTimeout(() => {
|
|
50
|
+
const newAudioUrl = getAudioUrl(value)
|
|
51
|
+
const project = projects.find((project) => project.id === projectId)
|
|
52
|
+
onChangeTransfer?.(project, {
|
|
53
|
+
id,
|
|
54
|
+
title,
|
|
55
|
+
audioUrl: newAudioUrl,
|
|
56
|
+
processTrack: !newAudioUrl,
|
|
57
|
+
pitchShift: value,
|
|
58
|
+
})
|
|
59
|
+
}, DEBOUNCE_MS)
|
|
60
|
+
}, [onChangeTransfer, projectId, id, title, getAudioUrl, projects])
|
|
48
61
|
|
|
49
62
|
const handleClickTrack = useCallback((e) => {
|
|
50
63
|
e.stopPropagation()
|
|
@@ -100,16 +113,18 @@ const ProjectTrackVoice = ({
|
|
|
100
113
|
</Text>
|
|
101
114
|
</Flex>
|
|
102
115
|
|
|
116
|
+
{loading && (
|
|
117
|
+
<Flex align="center" justify="center" pl="2">
|
|
118
|
+
<Spinner />
|
|
119
|
+
</Flex>
|
|
120
|
+
)}
|
|
121
|
+
|
|
103
122
|
{!hasTransfers && !audioUrl && !loading ? (
|
|
104
123
|
<Flex align="center" justify="center" p="2">
|
|
105
124
|
<Button variant="soft" color="gray" size="1">
|
|
106
125
|
{labels.process || 'Process'}
|
|
107
126
|
</Button>
|
|
108
127
|
</Flex>
|
|
109
|
-
) : loading ? (
|
|
110
|
-
<Flex align="center" justify="center" p="2">
|
|
111
|
-
<Spinner />
|
|
112
|
-
</Flex>
|
|
113
128
|
) : (
|
|
114
129
|
<NumberPicker
|
|
115
130
|
min={min}
|