@moises.ai/design-system 3.4.6 → 3.5.1
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/dist/index.js +2490 -2339
- package/package.json +1 -1
- package/src/components/ProjectsList/ProjectsList.jsx +132 -0
- package/src/components/ProjectsList/ProjectsList.module.css +71 -0
- package/src/components/ProjectsList/ProjectsList.stories.jsx +25 -0
- package/src/components/ProjectsList/utils-stories.js +186 -0
- package/src/components/ProjectsList/utils.jsx +70 -0
- package/src/components/StemGenerationForm/utils/constants.js +7 -5
- package/src/index.jsx +1 -0
package/package.json
CHANGED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import { Flex, Text, Separator, Button } from '@radix-ui/themes'
|
|
2
|
+
import styles from './ProjectsList.module.css'
|
|
3
|
+
import { useState } from 'react'
|
|
4
|
+
import { ArrowLeftIcon, NoMusicIcon, ChevronDownIcon, ChevronUpIcon } from '../../icons'
|
|
5
|
+
import { getIconFromTrackId } from './utils'
|
|
6
|
+
|
|
7
|
+
export const ProjectsList = ({
|
|
8
|
+
projects = [],
|
|
9
|
+
onClickTrack,
|
|
10
|
+
onInsertAllTracks,
|
|
11
|
+
}) => {
|
|
12
|
+
const [openedItem, setOpenedItem] = useState(null)
|
|
13
|
+
const [showAllTracks, setShowAllTracks] = useState(false)
|
|
14
|
+
|
|
15
|
+
const handleClickProject = (projectId) => {
|
|
16
|
+
setShowAllTracks(false)
|
|
17
|
+
|
|
18
|
+
if (openedItem === projectId) {
|
|
19
|
+
setOpenedItem(null)
|
|
20
|
+
} else {
|
|
21
|
+
setOpenedItem(projectId)
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const handleClickShowAllTracks = (e) => {
|
|
26
|
+
e.preventDefault()
|
|
27
|
+
e.stopPropagation()
|
|
28
|
+
setShowAllTracks(!showAllTracks)
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return (
|
|
32
|
+
<Flex direction="column" width="100%">
|
|
33
|
+
{projects.map((project, index) => (
|
|
34
|
+
<Flex
|
|
35
|
+
key={project.id}
|
|
36
|
+
direction="column"
|
|
37
|
+
gap="2"
|
|
38
|
+
p="1"
|
|
39
|
+
className={`${styles.item} ${openedItem === project.id ? styles.opened : ''}`}
|
|
40
|
+
onClick={() => handleClickProject(project.id)}
|
|
41
|
+
>
|
|
42
|
+
<Flex direction="row" gap="3">
|
|
43
|
+
<Flex className={styles.projectCover}>
|
|
44
|
+
<img
|
|
45
|
+
src={project.cover || `https://picsum.photos/48?random=${index}`}
|
|
46
|
+
alt={project.title}
|
|
47
|
+
draggable={false}
|
|
48
|
+
className={styles.projectCoverImage}
|
|
49
|
+
/>
|
|
50
|
+
</Flex>
|
|
51
|
+
|
|
52
|
+
<Flex direction="column" gap="1" align="start" justify="center">
|
|
53
|
+
<Text size="2" className={styles.projectTitle}>
|
|
54
|
+
{project.title}
|
|
55
|
+
</Text>
|
|
56
|
+
|
|
57
|
+
{project.artist && (
|
|
58
|
+
<Text size="1" className={styles.projectArtist}>
|
|
59
|
+
{project.artist}
|
|
60
|
+
</Text>
|
|
61
|
+
)}
|
|
62
|
+
</Flex>
|
|
63
|
+
</Flex>
|
|
64
|
+
|
|
65
|
+
{openedItem === project.id && (
|
|
66
|
+
<Flex direction="column">
|
|
67
|
+
{project.tracks.length === 0 && (
|
|
68
|
+
<Flex direction="row" gap="3" p="5" pt="2" align="center" justify="center">
|
|
69
|
+
<NoMusicIcon width={16} height={16} style={{ color: 'var(--neutral-alpha-10)' }} />
|
|
70
|
+
<Text size="2" style={{ color: 'var(--neutral-alpha-10)' }}>This file has no tracks</Text>
|
|
71
|
+
</Flex>
|
|
72
|
+
)}
|
|
73
|
+
|
|
74
|
+
{project.tracks.length > 0 && (
|
|
75
|
+
<Flex direction="column" gap="1">
|
|
76
|
+
{project.tracks.slice(0, showAllTracks ? project.tracks.length : 6).map((track) => (
|
|
77
|
+
<Flex
|
|
78
|
+
key={track.id}
|
|
79
|
+
direction="row"
|
|
80
|
+
gap="3"
|
|
81
|
+
className={styles.itemTrack}
|
|
82
|
+
onClick={(e) => {
|
|
83
|
+
e.stopPropagation()
|
|
84
|
+
onClickTrack?.(track)
|
|
85
|
+
}}
|
|
86
|
+
>
|
|
87
|
+
<div className={styles.icon}>
|
|
88
|
+
<Flex className={styles.iconTrack}>
|
|
89
|
+
{getIconFromTrackId(track.id)}
|
|
90
|
+
</Flex>
|
|
91
|
+
<ArrowLeftIcon width={16} height={16} className={styles.iconArrowLeft} />
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<Flex direction="column" gap="1" align="start" justify="center">
|
|
95
|
+
<Text size="2" className={styles.trackTitle}>
|
|
96
|
+
{track.title}
|
|
97
|
+
</Text>
|
|
98
|
+
</Flex>
|
|
99
|
+
</Flex>
|
|
100
|
+
))}
|
|
101
|
+
|
|
102
|
+
<Flex direction="row" gap="3" p="2" align="center" justify="center">
|
|
103
|
+
<Button variant="ghost" color="gray" style={{ flex: '1' }}
|
|
104
|
+
onClick={(e) => {
|
|
105
|
+
e.stopPropagation()
|
|
106
|
+
onInsertAllTracks?.(project.tracks)
|
|
107
|
+
}}
|
|
108
|
+
>
|
|
109
|
+
<ArrowLeftIcon width={16} height={16} /> Insert all
|
|
110
|
+
</Button>
|
|
111
|
+
|
|
112
|
+
{project.tracks.length > 6 && (
|
|
113
|
+
<>
|
|
114
|
+
<Separator orientation="vertical" />
|
|
115
|
+
|
|
116
|
+
<Button variant="ghost" color="gray" style={{ flex: '1' }} onClick={handleClickShowAllTracks}>
|
|
117
|
+
{showAllTracks ? 'Show less' : 'Show more'}
|
|
118
|
+
{showAllTracks ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />}
|
|
119
|
+
</Button>
|
|
120
|
+
</>
|
|
121
|
+
)}
|
|
122
|
+
</Flex>
|
|
123
|
+
</Flex>
|
|
124
|
+
)}
|
|
125
|
+
</Flex>
|
|
126
|
+
)}
|
|
127
|
+
</Flex>
|
|
128
|
+
))
|
|
129
|
+
}
|
|
130
|
+
</Flex >
|
|
131
|
+
)
|
|
132
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
.projectTitle {
|
|
2
|
+
color: var(--neutral-12);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.projectArtist {
|
|
6
|
+
color: var(--neutral-alpha-9);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.projectCover {
|
|
10
|
+
width: 48px;
|
|
11
|
+
height: 48px;
|
|
12
|
+
border-radius: var(--radius-3);
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.projectCover img {
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: 100%;
|
|
19
|
+
object-fit: cover;
|
|
20
|
+
pointer-events: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.item {
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
border-radius: var(--radius-4);
|
|
26
|
+
|
|
27
|
+
&.opened {
|
|
28
|
+
background: var(--neutral-alpha-2);
|
|
29
|
+
box-shadow: 0 24px 24px -16px rgba(0, 0, 0, 0.40);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&:hover:not(.opened) {
|
|
33
|
+
background: rgba(216, 244, 246, 0.04);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.itemTrack {
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
border-radius: var(--radius-3);
|
|
40
|
+
|
|
41
|
+
.iconArrowLeft {
|
|
42
|
+
display: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:hover {
|
|
46
|
+
background: var(--neutral-alpha-2);
|
|
47
|
+
box-shadow: 0 24px 24px -16px rgba(0, 0, 0, 0.40);
|
|
48
|
+
|
|
49
|
+
.iconArrowLeft {
|
|
50
|
+
display: block;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.iconTrack {
|
|
54
|
+
display: none;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.trackTitle {
|
|
60
|
+
color: var(--neutral-alpha-12);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.icon {
|
|
64
|
+
width: 48px;
|
|
65
|
+
height: 48px;
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
background: var(--neutral-alpha-2);
|
|
70
|
+
border-radius: var(--radius-3);
|
|
71
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { ProjectsList } from './ProjectsList'
|
|
2
|
+
import { projects } from './utils-stories'
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Components/ProjectsList',
|
|
6
|
+
component: ProjectsList,
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
argTypes: {
|
|
9
|
+
onClickTrack: { action: 'track-clicked' },
|
|
10
|
+
onInsertAllTracks: { action: 'insert-all-tracks' },
|
|
11
|
+
},
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const Default = {
|
|
15
|
+
render: (args) => {
|
|
16
|
+
return (
|
|
17
|
+
<ProjectsList
|
|
18
|
+
{...args}
|
|
19
|
+
/>
|
|
20
|
+
)
|
|
21
|
+
},
|
|
22
|
+
args: {
|
|
23
|
+
projects: projects,
|
|
24
|
+
},
|
|
25
|
+
}
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
export const projects = [
|
|
2
|
+
{
|
|
3
|
+
"id": "3842c898-9e0c-41e8-8927-7d9f67c50bc6",
|
|
4
|
+
"title": "Studio 1",
|
|
5
|
+
"artist": "NPR Music: Tiny Desk Concert",
|
|
6
|
+
"cover": null,
|
|
7
|
+
"duration": 30.72,
|
|
8
|
+
"tracks": [
|
|
9
|
+
{
|
|
10
|
+
"id": "q8pzli0h38ptcxq09h2al",
|
|
11
|
+
"title": "10 seconds short music.mp3",
|
|
12
|
+
"audioUrl": "https://storage.googleapis.com/moises-stage--tasks-us-east1/studio-tracks/3842c898-9e0c-41e8-8927-7d9f67c50bc6/a8ed32b3352517b19379bf3578055e5539d30c82874fe5e3405d8f224c2f1e57.audio"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"id": "j1nvrdhrai85pftttb9bo",
|
|
16
|
+
"title": "solo-drums.m4a",
|
|
17
|
+
"audioUrl": "https://storage.googleapis.com/moises-stage--tasks-us-east1/studio-tracks/3842c898-9e0c-41e8-8927-7d9f67c50bc6/94a8225ec1d738c3ab4da67ae13fce7d84a9e6e1b4b142765839f760ac001b4f.audio"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"id": "b9470aco6y4a9dlef0c035",
|
|
21
|
+
"title": "blink 182 - adams song.mp3",
|
|
22
|
+
"audioUrl": "https://storage.googleapis.com/moises-stage--tasks-us-east1/studio-tracks/3842c898-9e0c-41e8-8927-7d9f67c50bc6/15a1072d5d04c507eebf39b464329572b8b400c76d8f11197a5f83147a336de5.audio"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"id": "4817ab8e-bed6-4ef7-b633-ee79cc56ca30",
|
|
28
|
+
"title": "All Instruments",
|
|
29
|
+
"artist": null,
|
|
30
|
+
"cover": null,
|
|
31
|
+
"duration": 19.924,
|
|
32
|
+
"tracks": [
|
|
33
|
+
{
|
|
34
|
+
"id": "original",
|
|
35
|
+
"title": "original",
|
|
36
|
+
"audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/bass.m4a"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"id": "vocals",
|
|
40
|
+
"title": "vocals",
|
|
41
|
+
"audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/134ecc8d-c3b5-4a75-a088-2e4ce374d6fb/vocals.m4a"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"id": "backing_vocals",
|
|
45
|
+
"title": "backing_vocals",
|
|
46
|
+
"audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/backing_vocals.m4a"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"id": "bass",
|
|
50
|
+
"title": "bass",
|
|
51
|
+
"audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/bass.m4a"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"id": "piano",
|
|
55
|
+
"title": "piano",
|
|
56
|
+
"audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/piano.m4a"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"id": "wind",
|
|
60
|
+
"title": "wind",
|
|
61
|
+
"audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/wind.m4a"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"id": "strings",
|
|
65
|
+
"title": "strings",
|
|
66
|
+
"audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/strings.m4a"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"id": "keys",
|
|
70
|
+
"title": "keys",
|
|
71
|
+
"audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/keys.m4a"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"id": "drums",
|
|
75
|
+
"title": "drums",
|
|
76
|
+
"audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/134ecc8d-c3b5-4a75-a088-2e4ce374d6fb/drums.m4a"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"id": "kick",
|
|
80
|
+
"title": "kick",
|
|
81
|
+
"audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/kick.m4a"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"id": "snare",
|
|
85
|
+
"title": "snare",
|
|
86
|
+
"audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/snare.m4a"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"id": "toms",
|
|
90
|
+
"title": "toms",
|
|
91
|
+
"audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/toms.m4a"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"id": "hat",
|
|
95
|
+
"title": "hat",
|
|
96
|
+
"audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/hat.m4a"
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"id": "cymbals",
|
|
100
|
+
"title": "cymbals",
|
|
101
|
+
"audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/cymbals.m4a"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"id": "other_kit",
|
|
105
|
+
"title": "other_kit",
|
|
106
|
+
"audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/other_kit.m4a"
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"id": "rhythm",
|
|
110
|
+
"title": "rhythm",
|
|
111
|
+
"audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/rhythm.m4a"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"id": "lead",
|
|
115
|
+
"title": "lead",
|
|
116
|
+
"audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/13a3e51f-cafa-46e9-b450-857f4d7cbd1a/lead.m4a"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"id": "electric",
|
|
120
|
+
"title": "electric",
|
|
121
|
+
"audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/134ecc8d-c3b5-4a75-a088-2e4ce374d6fb/electric.m4a"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"id": "acoustic",
|
|
125
|
+
"title": "acoustic",
|
|
126
|
+
"audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/SEPARATE_CUSTOM/134ecc8d-c3b5-4a75-a088-2e4ce374d6fb/acoustic.m4a"
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"id": "guitars",
|
|
130
|
+
"title": "guitars",
|
|
131
|
+
"audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/e21c0c85-7555-4280-ad72-9de7b274c24f/guitars.m4a"
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"id": "other",
|
|
135
|
+
"title": "other",
|
|
136
|
+
"audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/e21c0c85-7555-4280-ad72-9de7b274c24f/other.m4a"
|
|
137
|
+
}
|
|
138
|
+
]
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"id": "2244f646-dd1c-4986-b885-1e1929593b46",
|
|
142
|
+
"title": "Empty Project",
|
|
143
|
+
"artist": null,
|
|
144
|
+
"cover": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks2/operations/FILEMETADATA_A/306fc1a9-f157-4bce-a66d-fa2f48208f3d/cover.jpeg",
|
|
145
|
+
"duration": 1062.0343,
|
|
146
|
+
"tracks": []
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"id": "3612a641-b86c-408e-b296-b9f0fdbeb108",
|
|
150
|
+
"title": "حسين الجسمي - بشرة خير (فيديو كليب) | Hussain Al Jassmi - Boshret Kheir | 2014",
|
|
151
|
+
"artist": null,
|
|
152
|
+
"cover": null,
|
|
153
|
+
"duration": 227.0215,
|
|
154
|
+
"tracks": [
|
|
155
|
+
{
|
|
156
|
+
"id": "bass",
|
|
157
|
+
"title": "bass",
|
|
158
|
+
"audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/09239f2d-f93f-4924-86a0-2277e5ba35ea/bass.m4a"
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"id": "other",
|
|
162
|
+
"title": "other",
|
|
163
|
+
"audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/09239f2d-f93f-4924-86a0-2277e5ba35ea/other.m4a"
|
|
164
|
+
}
|
|
165
|
+
]
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"id": "45f6b090-741a-4530-a7e5-b336cfb6ca9a",
|
|
169
|
+
"title": "Black Dog",
|
|
170
|
+
"artist": "Led Zeppelin",
|
|
171
|
+
"cover": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks2/operations/FILEMETADATA_A/76477978-88b0-4dd1-b729-ad760b9f1b9c/cover.jpeg",
|
|
172
|
+
"duration": 296.8065,
|
|
173
|
+
"tracks": [
|
|
174
|
+
{
|
|
175
|
+
"id": "bass",
|
|
176
|
+
"title": "bass",
|
|
177
|
+
"audioUrl": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/e4325003-662f-4aeb-b75a-14797654828a/bass.m4a"
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"id": "other",
|
|
181
|
+
"title": "other",
|
|
182
|
+
"audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/e4325003-662f-4aeb-b75a-14797654828a/other.m4a"
|
|
183
|
+
}
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
]
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import {
|
|
2
|
+
SpliterIcon,
|
|
3
|
+
VocalIcon,
|
|
4
|
+
VocalsBackgroundIcon,
|
|
5
|
+
DrumsIcon,
|
|
6
|
+
BassIcon,
|
|
7
|
+
IsolateDrumsIcon,
|
|
8
|
+
PianoIcon,
|
|
9
|
+
WindIcon,
|
|
10
|
+
StringsIcon,
|
|
11
|
+
KeysIcon,
|
|
12
|
+
KickdrumIcon,
|
|
13
|
+
SnareIcon,
|
|
14
|
+
TomsIcon,
|
|
15
|
+
HiHatIcon,
|
|
16
|
+
CymbalsIcon,
|
|
17
|
+
ElectricGuitarIcon,
|
|
18
|
+
AcousticGuitarIcon,
|
|
19
|
+
MusicIcon,
|
|
20
|
+
SparkBarsIcon,
|
|
21
|
+
} from '../../icons'
|
|
22
|
+
|
|
23
|
+
export const getIconFromTrackId = (trackId) => {
|
|
24
|
+
switch (trackId) {
|
|
25
|
+
case 'original':
|
|
26
|
+
return <SpliterIcon />
|
|
27
|
+
case 'vocals':
|
|
28
|
+
return <VocalIcon />
|
|
29
|
+
case 'backing_vocals':
|
|
30
|
+
return <VocalsBackgroundIcon />
|
|
31
|
+
case 'drums':
|
|
32
|
+
return <DrumsIcon />
|
|
33
|
+
case 'bass':
|
|
34
|
+
return <BassIcon />
|
|
35
|
+
case 'guitars':
|
|
36
|
+
return <ElectricGuitarIcon />
|
|
37
|
+
case 'other_kit':
|
|
38
|
+
return <IsolateDrumsIcon />
|
|
39
|
+
case "piano":
|
|
40
|
+
return <PianoIcon />
|
|
41
|
+
case "wind":
|
|
42
|
+
return <WindIcon />
|
|
43
|
+
case "strings":
|
|
44
|
+
return <StringsIcon />
|
|
45
|
+
case "keys":
|
|
46
|
+
return <KeysIcon />
|
|
47
|
+
case "kick":
|
|
48
|
+
return <KickdrumIcon />
|
|
49
|
+
case "snare":
|
|
50
|
+
return <SnareIcon />
|
|
51
|
+
case "toms":
|
|
52
|
+
return <TomsIcon />
|
|
53
|
+
case "hat":
|
|
54
|
+
return <HiHatIcon />
|
|
55
|
+
case "cymbals":
|
|
56
|
+
return <CymbalsIcon />
|
|
57
|
+
case "rhythm":
|
|
58
|
+
return <ElectricGuitarIcon />
|
|
59
|
+
case "lead":
|
|
60
|
+
return <ElectricGuitarIcon />
|
|
61
|
+
case "electric":
|
|
62
|
+
return <AcousticGuitarIcon />
|
|
63
|
+
case "acoustic":
|
|
64
|
+
return <AcousticGuitarIcon />
|
|
65
|
+
case 'other':
|
|
66
|
+
return <MusicIcon />
|
|
67
|
+
default:
|
|
68
|
+
return <SparkBarsIcon />
|
|
69
|
+
}
|
|
70
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export const FORM_DEFAULTS = {
|
|
2
|
-
steps:
|
|
2
|
+
steps: 30,
|
|
3
3
|
guidanceScale: null,
|
|
4
4
|
autoGuidanceScale: true,
|
|
5
5
|
instrument: 'generic',
|
|
@@ -12,13 +12,15 @@ export const FORM_DEFAULTS = {
|
|
|
12
12
|
guidanceClap: null, // Conditioning strictness (clap)
|
|
13
13
|
guidanceContextAudio: null, // Context strictness (context_audio)
|
|
14
14
|
guidanceContextChroma: null, // Harmonic strictness (context_chroma)
|
|
15
|
-
useProjectChords:
|
|
15
|
+
useProjectChords: false, // Use project chords for generation
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
export const GUIDANCE_SCALE_DEFAULTS = {
|
|
19
|
-
generic: { clap:
|
|
20
|
-
bass: { clap:
|
|
21
|
-
guitar: { clap:
|
|
19
|
+
generic: { clap: 4, context: 4, chroma: 4 },
|
|
20
|
+
bass: { clap: 2, context: 2, chroma: 2 },
|
|
21
|
+
guitar: { clap: 2, context: 2, chroma: 2 },
|
|
22
|
+
strings: { clap: 2, context: 2, chroma: 2 },
|
|
23
|
+
keys: { clap: 2, context: 2, chroma: 2 },
|
|
22
24
|
// Drums does not support chroma/harmonic guidance
|
|
23
25
|
drums: { clap: 2, context: 2, chroma: 0 },
|
|
24
26
|
}
|
package/src/index.jsx
CHANGED
|
@@ -149,3 +149,4 @@ export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
|
|
|
149
149
|
|
|
150
150
|
export { InstrumentSelector } from './components/InstrumentSelector/InstrumentSelector'
|
|
151
151
|
export { Card as CardWidget } from './components/Card/Card'
|
|
152
|
+
export { ProjectsList } from './components/ProjectsList/ProjectsList'
|