@moises.ai/design-system 4.18.10 → 4.18.11

package/dist/index.js

@@ -8532,7 +8532,9 @@ const nb = ({
   }, [n, m, f, C, h, c]), R = J((w) => {
     w.preventDefault(), w.stopPropagation(), y(!k);
   }, [k]), E = J((w) => {
-    w.stopPropagation(), g == null || g(i);
+    w.stopPropagation();
+    const B = i.filter((x) => !x.loading && x.transfers.length > 0);
+    g == null || g(B);
   }, [g, i]);
   return /* @__PURE__ */ v(
     S,
@@ -8565,7 +8567,7 @@ const nb = ({
           )
         ] }),
         m === n && /* @__PURE__ */ v(S, { direction: "column", children: [
-          i.length === 0 && !l && /* @__PURE__ */ v(S, { direction: "row", gap: "3", p: "5", pt: "2", align: "center", justify: "center", children: [
+          o !== "voice" && i.length === 0 && !l && /* @__PURE__ */ v(S, { direction: "row", gap: "3", p: "5", pt: "2", align: "center", justify: "center", children: [
             /* @__PURE__ */ a(Bd, { width: 16, height: 16, style: { color: "var(--neutral-alpha-10)" } }),
             /* @__PURE__ */ a(H, { size: "2", style: { color: "var(--neutral-alpha-10)" }, children: u.noTracks || "This file has no tracks" })
           ] }),
@@ -8775,7 +8777,7 @@ const nb = ({
   const y = ae(() => {
     if (!g && h || g && f === null)
       return !0;
-    if (f) {
+    if (f !== null) {
       const E = u.find((w) => parseInt(w.pitchShift) === f);
       return (E == null ? void 0 : E.loading) === !0 || !(E != null && E.audioUrl);
     }
@@ -8825,8 +8827,20 @@ const nb = ({
             children: /* @__PURE__ */ a(H, { size: "2", asChild: !0, children: /* @__PURE__ */ a("span", { className: ln.trackTitle, children: c }) })
           }
         ),
-        y && /* @__PURE__ */ a(S, { align: "center", justify: "center", pl: "2", children: /* @__PURE__ */ a(Sn, {}) }),
-        !g && !p && !y ? /* @__PURE__ */ a(S, { align: "center", justify: "center", pr: "2", children: /* @__PURE__ */ a(Oe, { variant: "soft", color: "gray", size: "1", children: o.process || "Process" }) }) : g ? /* @__PURE__ */ a(
+        (g || p) && y && /* @__PURE__ */ a(S, { align: "center", justify: "center", pl: "2", children: /* @__PURE__ */ a(Sn, {}) }),
+        !g && !p ? /* @__PURE__ */ a(S, { align: "center", justify: "center", pr: "2", pr: "0", children: /* @__PURE__ */ a(
+          Oe,
+          {
+            variant: "soft",
+            color: "gray",
+            size: "1",
+            disabled: y,
+            loading: y,
+            onClick: R,
+            style: { minWidth: "63px" },
+            children: o.process || "Process"
+          }
+        ) }) : g ? /* @__PURE__ */ a(
           Cb,
           {
             min: m,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.18.10",
+  "version": "4.18.11",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/ProjectsList/ProjectItem/ProjectItem.jsx

@@ -53,7 +53,8 @@ const ProjectItem = ({
 
   const handleInsertAllTracks = useCallback((e) => {
     e.stopPropagation()
-    onInsertAllTracks?.(allTracks)
+    const tracksFiltered = allTracks.filter((track) => !track.loading && track.transfers.length > 0)
+    onInsertAllTracks?.(tracksFiltered)
   }, [onInsertAllTracks, allTracks])
 
   return (
@@ -100,7 +101,7 @@ const ProjectItem = ({
 
       {openedItem === id && (
         <Flex direction="column">
-          {allTracks.length === 0 && !loading && (
+          {type !== 'voice' && allTracks.length === 0 && !loading && (
             <Flex direction="row" gap="3" p="5" pt="2" align="center" justify="center">
               <NoMusicIcon width={16} height={16} style={{ color: 'var(--neutral-alpha-10)' }} />
               <Text size="2" style={{ color: 'var(--neutral-alpha-10)' }}>{labels.noTracks || 'This file has no tracks'}</Text>

package/src/components/ProjectsList/ProjectTrackVoice/ProjectTrackVoice.jsx

@@ -31,7 +31,7 @@ const ProjectTrackVoice = ({ ...props }) => {
       return true
     }
 
-    if (pitchShiftSelected) {
+    if (pitchShiftSelected !== null) {
       const currentTransfer = transfers.find((transfer) => parseInt(transfer.pitchShift) === pitchShiftSelected)
       return currentTransfer?.loading === true || !currentTransfer?.audioUrl
     }
@@ -104,15 +104,23 @@ const ProjectTrackVoice = ({ ...props }) => {
           </Text>
         </Flex>
 
-        {loading && (
+        {(hasTransfers || audioUrl) && loading && (
           <Flex align="center" justify="center" pl="2">
             <Spinner />
           </Flex>
         )}
 
-        {!hasTransfers && !audioUrl && !loading ? (
-          <Flex align="center" justify="center" pr="2">
-            <Button variant="soft" color="gray" size="1">
+        {!hasTransfers && !audioUrl ? (
+          <Flex align="center" justify="center" pr="2" pr="0">
+            <Button
+              variant="soft"
+              color="gray"
+              size="1"
+              disabled={loading}
+              loading={loading}
+              onClick={handleClickTrack}
+              style={{ minWidth: '63px' }}
+            >
               {labels.process || 'Process'}
             </Button>
           </Flex>

package/src/components/ProjectsList/ProjectsList.stories.jsx

@@ -261,6 +261,13 @@ export const WithTrackVoiceStates = {
       "duration": 30.72,
       "type": "voice",
       "tracks": [
+        {
+          "id": "q8pzli0h38ptcxq09h2al-0",
+          "title": "Ana",
+          "type": "voice",
+          "cover": "https://picsum.photos/101/101",
+          "transfers": [],
+        },
         {
           "id": "q8pzli0h38ptcx211133q09h2al-0",
           "title": "Joyce",
@@ -268,11 +275,15 @@ export const WithTrackVoiceStates = {
           "loading": true,
         },
         {
-          "id": "q8pzli0h38ptcxq09h2al-0",
-          "title": "Ana",
+          "id": "q8pzli0h38ptcx211133q09h2al-0",
+          "title": "Carlos",
           "type": "voice",
-          "cover": "https://picsum.photos/101/101",
-          "transfers": [],
+          "loading": true,
+          "transfers": [{
+            "id": "q8pzli0h38ptcxq09h1122al",
+            "pitchShift": "12",
+            "audioUrl": null
+          }],
         },
         {
           "id": "q8pzli0h38ptcxq09h2al3-0",
@@ -288,6 +299,21 @@ export const WithTrackVoiceStates = {
             "pitchShift": "13",
             "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/0a6c2a03-320e-49f2-9ea6-a5ad7bbb6141/vocals.m4a"
           }],
+        },
+        {
+          "id": "q8pzli0h38ptcxq09h2al3-0",
+          "title": "Claudia",
+          "type": "voice",
+          "cover": "https://picsum.photos/105/105",
+          "transfers": [{
+            "id": "q8pzli0h38ptcxq09h1122al",
+            "pitchShift": "1",
+            "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/0b926e1f-52ce-4581-9f76-09545eed1c61/vocals.m4"
+          }, {
+            "id": "q8pzli0h38ptcxq03339h2al2",
+            "pitchShift": "2",
+            "audioUrl": null
+          }],
         }
       ]
     }],