@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/VoiceConversionForm/ClickableAvatar/ClickableAvatar.jsx

@@ -0,0 +1,40 @@
+import { Avatar as AvatarComponent, Box } from '@radix-ui/themes'
+import styles from './ClickableAvatar.module.css'
+import classNames from 'classnames'
+import { useState } from 'react'
+import { getProxiedAvatarUrl } from '../../../utils/avatarUtils'
+
+export const ClickableAvatar = ({ isPlaying, image, name, children }) => {
+  const [isHovered, setIsHovered] = useState(false)
+
+  const proxiedImage = getProxiedAvatarUrl(image)
+
+  return (
+    <Box
+      position="relative"
+      width="100%"
+      height="100%"
+      className={styles.avatarContainer}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <AvatarComponent
+        src={proxiedImage}
+        style={{
+          width: '100%',
+          height: '100%',
+          borderRadius: '4px',
+        }}
+        fallback={name?.substring(0, 2)}
+      />
+
+      <div
+        className={classNames(styles.overlay, {
+          [styles.showOverlay]: isPlaying || isHovered,
+        })}
+      >
+        {children}
+      </div>
+    </Box>
+  )
+}

package/src/components/VoiceConversionForm/ClickableAvatar/ClickableAvatar.module.css

@@ -0,0 +1,21 @@
+.overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(0, 0, 0, 0.65);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.showOverlay {
+  opacity: 1;
+  pointer-events: all;
+}

package/src/components/VoiceConversionForm/Concurrency/Concurrency.jsx

@@ -0,0 +1,53 @@
+import { Flex, Text } from '@radix-ui/themes'
+import { MessageWithAction } from '../../MessageWithAction/MessageWithAction'
+import { Info2Icon } from '../../../icons'
+import styles from './Concurrency.module.css'
+import { useEffect } from 'react'
+
+export const Concurrency = ({
+  showUpgrade,
+  onClickUpgrade,
+  i18n = { _: (text) => text },
+  onMountConcurrency,
+}) => {
+  useEffect(() => {
+    if (onMountConcurrency) {
+      onMountConcurrency()
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <MessageWithAction
+      type="info"
+      showIcon={false}
+      className={styles.messageWithActionCustom}
+    >
+      <Flex direction="row" gap="2">
+        <Flex className={styles.infoIcon}>
+          <Info2Icon width={16} height={16} />
+        </Flex>
+        <Text size="2" className={styles.neutral11}>
+          {i18n._(
+            'You’ve reached the simultaneous voice conversion limit. Wait to finish before continuing.',
+          )}
+          {showUpgrade && (
+            <Text size="2" className={styles.neutral11} weight="bold">
+              {' '}
+              {i18n._('Unlock up to 10 simultaneous conversions,')}{' '}
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault()
+                  onClickUpgrade?.()
+                }}
+                className={styles.upgradeButton}
+              >
+                {i18n._('upgrade to PRO.')}
+              </button>
+            </Text>
+          )}
+        </Text>
+      </Flex>
+    </MessageWithAction>
+  )
+}

package/src/components/VoiceConversionForm/Concurrency/Concurrency.module.css

@@ -0,0 +1,26 @@
+
+.neutral11{ 
+  color: var(--neutral-alpha-11);
+}
+
+.infoIcon {
+  color: var(--neutral-alpha-11);
+  width: 16px;
+}
+
+.messageWithActionCustom {
+  border-radius: 8px !important;
+  padding: 8px 12px !important;
+}
+
+.upgradeButton {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  color: var(--neutral-alpha-11);
+  font-weight: bold;
+  font-size: 14px;
+
+}

package/src/components/VoiceConversionForm/GenerationStatus/GenerationStatus.jsx

@@ -0,0 +1,49 @@
+import { MessageWithAction, Text } from '../../../index'
+import { GenerationSourceCallout } from '../../GenerationSourceCallout/GenerationSourceCallout'
+
+export function GenerationStatus({
+  trackId,
+  trackName,
+  i18n = { _: (text) => text },
+  onRemoveTrack,
+  onSelectTrack,
+}) {
+  const calloutTooltip = i18n._('The selected track to convert')
+
+  //when user click on dropdownMenu in track
+  if (trackId) {
+    return (
+      <GenerationSourceCallout
+        trackName={trackName}
+        onClick={onRemoveTrack}
+        ctaLabel={i18n._('Remove')}
+        tooltopContent={calloutTooltip}
+      />
+    )
+  }
+
+  //when user add a track from ingestion
+  if (trackName) {
+    return (
+      <GenerationSourceCallout
+        trackName={trackName}
+        onClick={onRemoveTrack}
+        ctaLabel={i18n._('Remove')}
+        tooltopContent={calloutTooltip}
+      />
+    )
+  }
+
+  return (
+    <>
+      <MessageWithAction
+        ctaLabel={i18n._('Select')}
+        onClick={onSelectTrack}
+        showIcon={false}
+        showBackground={false}
+      >
+        <Text size="2">{i18n._('Select audio file to convert ')}</Text>
+      </MessageWithAction>
+    </>
+  )
+}

package/src/components/VoiceConversionForm/VoiceConversionForm.jsx

@@ -0,0 +1,231 @@
+import { useState, useCallback, useMemo, useEffect } from 'react'
+import { Flex, Box, Text } from '@radix-ui/themes'
+import { FooterPanel } from '../FooterPanel/FooterPanel'
+import { MessageWithAction } from '../MessageWithAction/MessageWithAction'
+import { VoiceList } from './VoiceList/VoiceList'
+import { VoiceDetails } from './VoiceDetails/VoiceDetails'
+import { BesideFooter } from './BesideFooter/BesideFooter'
+import { Concurrency } from './Concurrency/Concurrency'
+import { GenerationStatus } from './GenerationStatus/GenerationStatus'
+import { useSubmitWithFeedback } from '../../utils/useSubmitWithFeedback'
+import styles from './VoiceConversionForm.module.css'
+
+export const VoiceConversionForm = ({
+  voices,
+  formState,
+  onFormStateChange,
+  onVoiceDetailsClick,
+  onBackToList,
+  voiceDetailsId,
+  i18n = { _: (text) => text },
+  isLoading,
+  limitReached,
+  error,
+  onSubmit,
+  onSelectTrack,
+  onMountConcurrency,
+  showUpgradeConcurrency,
+  onClickUpgradeConcurrency,
+  onRemoveTrack,
+}) => {
+  const [selectedId, setSelectedId] = useState(null)
+  const [playingItem, setPlayingItem] = useState(null)
+  const { submitted, handleSubmit } = useSubmitWithFeedback(onSubmit)
+
+  const [wavegroupState, setWavegroupState] = useState({
+    lastPlayed: null,
+    active: null,
+    isPlaying: false,
+    id: 'voice-form',
+  })
+
+  const handleSelect = useCallback(
+    (value) => {
+      setSelectedId(value)
+
+      const selectedVoice = voices.find((voice) => voice.identifier === value)
+      onFormStateChange((prevState) => ({
+        ...prevState,
+        selectedVoice: selectedVoice,
+      }))
+    },
+    [voices, onFormStateChange],
+  )
+
+  const handleAvatarClick = useCallback(
+    (id) => {
+      if (playingItem !== id) {
+        setPlayingItem(id)
+      }
+    },
+    [playingItem, setPlayingItem],
+  )
+
+  const handleDetailsClick = useCallback(
+    (id) => {
+      setPlayingItem(null)
+      if (wavegroupState.active) {
+        wavegroupState.active.pause()
+      }
+      setWavegroupState((prevState) => ({
+        ...prevState,
+        isPlaying: false,
+        active: null,
+      }))
+      onVoiceDetailsClick(id)
+    },
+    [onVoiceDetailsClick, wavegroupState],
+  )
+
+  const wavegroup = useMemo(
+    () => ({
+      state: wavegroupState,
+      setter: setWavegroupState,
+    }),
+    [wavegroupState],
+  )
+
+  const detailedItem = useMemo(
+    () =>
+      voices.find((item) => item.identifier === voiceDetailsId) || voices[0],
+    [voices, voiceDetailsId],
+  )
+
+  const hasAudio = useMemo(
+    () => !!(formState.trackName || formState.trackId || formState.customAudio),
+    [formState.trackName, formState.trackId, formState.customAudio],
+  )
+
+  const onConvertVoice = useCallback(() => {
+    if (!voiceDetailsId) {
+      handleSubmit()
+      return
+    }
+
+    if (detailedItem) {
+      handleSelect(detailedItem.identifier)
+      onBackToList()
+      onFormStateChange((prev) => {
+        if (prev.selectedVoice?.identifier === detailedItem.identifier)
+          return prev
+        return { ...prev, selectedVoice: detailedItem }
+      })
+    }
+
+    if (hasAudio) {
+      if (detailedItem) {
+        handleSubmit({ selectedVoice: detailedItem })
+      } else {
+        handleSubmit()
+      }
+    }
+  }, [voiceDetailsId, handleSubmit, detailedItem, handleSelect, onBackToList])
+
+  // Reset playingItem when audio finishes
+  useEffect(() => {
+    if (wavegroupState.isPlaying === false) {
+      setPlayingItem(null)
+    } else if (wavegroupState.isPlaying === true && wavegroupState.active) {
+      const activeItemId = voices.find(
+        (item) =>
+          wavegroupState.active &&
+          item.metadata.previewUrl === wavegroupState.active.url,
+      )?.identifier
+
+      if (activeItemId) {
+        setPlayingItem(activeItemId)
+      }
+    }
+  }, [wavegroupState, voices])
+
+  return (
+    <Flex direction="column" height="100%">
+      <VoiceList
+        voices={voices}
+        selectedId={selectedId}
+        handleSelect={handleSelect}
+        playingItem={playingItem}
+        handleAvatarClick={handleAvatarClick}
+        handleDetailsClick={handleDetailsClick}
+        wavegroup={wavegroup}
+        setPlayingItem={setPlayingItem}
+        style={{ display: voiceDetailsId ? 'none' : 'block' }}
+        i18n={i18n}
+      />
+      {voiceDetailsId && (
+        <VoiceDetails item={detailedItem} wavegroup={wavegroup} i18n={i18n} />
+      )}
+
+      <Box className={styles.footerVoiceForm}>
+        <FooterPanel
+          title={
+            voiceDetailsId ? i18n._('Use this model') : i18n._('Convert Voice')
+          }
+          disabled={
+            limitReached ||
+            ((!formState?.trackName || !formState?.selectedVoice) &&
+              !voiceDetailsId)
+          }
+          besideFooter={
+            <BesideFooter
+              formState={formState}
+              onFormStateChange={onFormStateChange}
+              disabled={limitReached}
+              i18n={i18n}
+            />
+          }
+          loading={isLoading}
+          size="2"
+          onClick={onConvertVoice}
+          color="cyan"
+          style={{
+            paddingBottom: '12px',
+            paddingRight: '12px',
+          }}
+        >
+          <Flex
+            pt="4"
+            width="100%"
+            style={{
+              borderTop: '1px solid var(--neutral-alpha-3)',
+            }}
+          >
+            {limitReached && (
+              <Concurrency
+                showUpgrade={showUpgradeConcurrency}
+                onClickUpgrade={onClickUpgradeConcurrency}
+                i18n={i18n}
+                onMountConcurrency={onMountConcurrency}
+              />
+            )}
+            {!limitReached && !submitted && !error && !voiceDetailsId && (
+              <GenerationStatus
+                trackId={formState.trackId}
+                trackName={formState.trackName}
+                i18n={i18n}
+                onSelectTrack={onSelectTrack}
+                onRemoveTrack={onRemoveTrack}
+              />
+            )}
+            {!limitReached && submitted && !error && !voiceDetailsId && (
+              <MessageWithAction showIcon={false} showBackground={false}>
+                <Text size="2">{i18n._('Voice conversion initialized!')}</Text>
+              </MessageWithAction>
+            )}
+            {!limitReached && error && !voiceDetailsId && (
+              <MessageWithAction
+                type="error"
+                showIcon={false}
+                showBackground={false}
+              >
+                <Text size="2">{error}</Text>
+              </MessageWithAction>
+            )}
+          </Flex>
+        </FooterPanel>
+      </Box>
+    </Flex>
+  )
+}
+
+VoiceConversionForm.displayName = 'VoiceConversionForm'

package/src/components/VoiceConversionForm/VoiceConversionForm.module.css

@@ -0,0 +1,9 @@
+
+.footerVoiceForm {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-top: 1px solid var(--color-border);
+  margin-top: auto;
+}