@moises.ai/design-system 4.15.3 → 4.15.5

package/package.json

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

package/src/components/PreviewCard/PreviewCard.jsx

@@ -184,6 +184,10 @@ export const PreviewCard = forwardRef(function PreviewCard(
 
   const handleInteraction = useCallback(
     (ws, newTime) => {
+      if (!showSkeleton) {
+        onSelect?.()
+      }
+
       if (!wavegroup) return
 
       const previousActive = wavegroup.state.active
@@ -228,7 +232,7 @@ export const PreviewCard = forwardRef(function PreviewCard(
         isPlaying: wasPlaying,
       }))
     },
-    [wavegroup, isSafari, progressColor],
+    [wavegroup, isSafari, progressColor, showSkeleton, onSelect],
   )
 
   const onFinish = useCallback(() => {
@@ -288,38 +292,18 @@ export const PreviewCard = forwardRef(function PreviewCard(
       <button
         type="button"
         className={classNames(styles.leftButton, isPlaying && styles.isPlaying)}
-        onClick={(e) => {
-          e.stopPropagation()
-          handleTogglePlay()
-        }}
+        onClick={handleTogglePlay}
         disabled={showSkeleton}
         aria-label={isPlaying ? 'Pause' : 'Play'}
       >
-        <span className={styles.equalizer} aria-hidden="true">
-          <span className={styles.equalizerBar} />
-          <span className={styles.equalizerBar} />
-          <span className={styles.equalizerBar} />
-          <span className={styles.equalizerBar} />
-          <span className={styles.equalizerBar} />
-        </span>
-        <PauseIcon
-          width={18}
-          height={18}
-          className={styles.pauseOnHover}
-          aria-hidden="true"
-        />
-        <PlayIcon
-          width={18}
-          height={18}
-          className={styles.playIcon}
-          aria-hidden="true"
-        />
+        {isPlaying ? (
+          <PauseIcon width={18} height={18} aria-hidden="true" />
+        ) : (
+          <PlayIcon width={18} height={18} aria-hidden="true" />
+        )}
       </button>
 
-      <div
-        className={styles.waveformContainer}
-        onClick={(e) => e.stopPropagation()}
-      >
+      <div className={styles.waveformContainer}>
         {audio && (
           <WavesurferPlayer
             url={audio}
@@ -327,7 +311,7 @@ export const PreviewCard = forwardRef(function PreviewCard(
             progressColor={progressColor}
             normalize
             barWidth={2}
-            barHeight={6}
+            barHeight={1}
             cursorWidth={0}
             height={40}
             onReady={onReady}
@@ -341,11 +325,7 @@ export const PreviewCard = forwardRef(function PreviewCard(
         )}
       </div>
 
-      {actions && (
-        <div className={styles.actions} onClick={(e) => e.stopPropagation()}>
-          {actions}
-        </div>
-      )}
+      {actions && <div className={styles.actions}>{actions}</div>}
     </div>
   )
 })

package/src/components/PreviewCard/PreviewCard.module.css

@@ -10,62 +10,11 @@
   }
 }
 
-@keyframes equalizerBar1 {
-  0%,
-  100% {
-    height: 17px;
-  }
-  50% {
-    height: 7px;
-  }
-}
-
-@keyframes equalizerBar2 {
-  0%,
-  100% {
-    height: 5px;
-  }
-  50% {
-    height: 17px;
-  }
-}
-
-@keyframes equalizerBar3 {
-  0%,
-  100% {
-    height: 21px;
-  }
-  50% {
-    height: 9px;
-  }
-}
-
-@keyframes equalizerBar4 {
-  0%,
-  100% {
-    height: 17px;
-  }
-  50% {
-    height: 5px;
-  }
-}
-
-@keyframes equalizerBar5 {
-  0%,
-  100% {
-    height: 7px;
-  }
-  50% {
-    height: 17px;
-  }
-}
-
 .previewCard {
   display: flex;
   align-items: center;
   gap: 12px;
   width: 100%;
-  max-width: 344px;
   padding: 4px;
   border-radius: 8px;
   border: 1px solid var(--neutral-alpha-4);
@@ -138,72 +87,6 @@
   opacity: 0;
 }
 
-.equalizer {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  gap: 1.8px;
-  width: 19px;
-  height: 21px;
-}
-
-.equalizerBar {
-  display: block;
-  width: 2px;
-  border-radius: 4.8px;
-  background: var(--neutral-alpha-11);
-  flex-shrink: 0;
-}
-
-.equalizerBar:nth-child(1) {
-  height: 17px;
-  animation: equalizerBar1 0.8s ease-in-out infinite;
-}
-
-.equalizerBar:nth-child(2) {
-  height: 5px;
-  animation: equalizerBar2 0.8s ease-in-out infinite;
-}
-
-.equalizerBar:nth-child(3) {
-  height: 21px;
-  animation: equalizerBar3 0.8s ease-in-out infinite;
-}
-
-.equalizerBar:nth-child(4) {
-  height: 17px;
-  animation: equalizerBar4 0.8s ease-in-out infinite;
-}
-
-.equalizerBar:nth-child(5) {
-  height: 7px;
-  animation: equalizerBar5 0.8s ease-in-out infinite;
-}
-
-.pauseOnHover {
-  display: none;
-}
-
-.playIcon {
-  display: flex;
-}
-
-.leftButton.isPlaying .equalizer {
-  display: flex;
-}
-
-.leftButton.isPlaying .playIcon {
-  display: none !important;
-}
-
-.previewCard.playing:has(.leftButton:hover) .equalizer {
-  display: none;
-}
-
-.previewCard.playing:has(.leftButton:hover) .pauseOnHover {
-  display: flex;
-}
-
 .waveformContainer {
   position: relative;
   flex: 1 1 0;
@@ -213,11 +96,12 @@
   cursor: pointer;
 }
 
-.waveformContainer :global(wave) {
-  display: block;
+.waveformContainer > div {
+  width: 100%;
+  height: 40px;
 }
 
-.skeleton .waveformContainer :global(wave) {
+.skeleton .waveformContainer > div {
   visibility: hidden;
 }