From 6b9d07418218b24b6e1cc1976360077ccef7b0b7 Mon Sep 17 00:00:00 2001
From: Albina <alblupynos@gmail.com>
Date: Thu, 26 Sep 2024 19:00:36 +0300
Subject: [PATCH] OV-403: * implement review suggestion

---
 .../components/audio-player/audio-player.tsx    |  4 +++-
 .../voices/components/voice-card/voice-card.tsx | 17 +++--------------
 .../components/voice-section/voice-section.tsx  |  3 ++-
 .../src/bundles/voices/constants/constants.ts   |  2 ++
 .../constants/text-for-voices.constant.ts       |  4 ++++
 5 files changed, 14 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/bundles/voices/constants/constants.ts
 create mode 100644 frontend/src/bundles/voices/constants/text-for-voices.constant.ts

diff --git a/frontend/src/bundles/common/components/audio-player/audio-player.tsx b/frontend/src/bundles/common/components/audio-player/audio-player.tsx
index c2655bfca..614209cc3 100644
--- a/frontend/src/bundles/common/components/audio-player/audio-player.tsx
+++ b/frontend/src/bundles/common/components/audio-player/audio-player.tsx
@@ -41,7 +41,9 @@ const AudioPlayer: React.FC<Properties> = ({
         getAudioData(audioUrl)
             .then(({ durationInSeconds }) => {
                 setDurationInFrames(Math.round(durationInSeconds * FPS));
-                onSetDuration && onSetDuration(durationInSeconds);
+                if (onSetDuration) {
+                    onSetDuration(durationInSeconds);
+                }
             })
             .catch(() => {
                 setDurationInFrames(1);
diff --git a/frontend/src/bundles/voices/components/voice-card/voice-card.tsx b/frontend/src/bundles/voices/components/voice-card/voice-card.tsx
index 0c084c507..a7b766313 100644
--- a/frontend/src/bundles/voices/components/voice-card/voice-card.tsx
+++ b/frontend/src/bundles/voices/components/voice-card/voice-card.tsx
@@ -18,6 +18,7 @@ import { IconName, IconSize } from '~/bundles/common/icons/icons.js';
 import { actions as homeActions } from '~/bundles/home/store/home.js';
 import { type Voice } from '~/bundles/home/types/types.js';
 import { Control } from '~/bundles/studio/components/control/control.js';
+import { TEXT_FOR_VOICES } from '~/bundles/voices/constants/constants.js';
 
 type Properties = {
     voice: Voice;
@@ -28,9 +29,6 @@ const VoiceCard: React.FC<Properties> = ({ voice }) => {
     const [isLoading, setIsLoading] = useState(false);
     const dispatch = useAppDispatch();
 
-    const text =
-        'Hello, I can handle video speech for you, choose me if you like it!';
-
     const { isPlaying: playerIsPlaying, url: playerUrl } = useAppSelector(
         ({ home }) => home.voicePlayer,
     );
@@ -53,7 +51,7 @@ const VoiceCard: React.FC<Properties> = ({ voice }) => {
             void dispatch(
                 homeActions.generateScriptSpeechPreview({
                     scriptId: uuidv4(),
-                    text,
+                    text: TEXT_FOR_VOICES,
                     voiceName: voice.shortName,
                 }),
             )
@@ -69,16 +67,7 @@ const VoiceCard: React.FC<Properties> = ({ voice }) => {
                     );
                 });
         },
-        [
-            dispatch,
-            text,
-            url,
-            voice,
-            isPlaying,
-            setUrl,
-            setIsLoading,
-            isLoading,
-        ],
+        [dispatch, url, voice, isPlaying, setUrl, setIsLoading, isLoading],
     );
     const handleLikeClick = useCallback((): void => {
         dispatch(homeActions.toogleVoiceLike(voice.shortName));
diff --git a/frontend/src/bundles/voices/components/voice-section/voice-section.tsx b/frontend/src/bundles/voices/components/voice-section/voice-section.tsx
index 76d67b5dc..051006891 100644
--- a/frontend/src/bundles/voices/components/voice-section/voice-section.tsx
+++ b/frontend/src/bundles/voices/components/voice-section/voice-section.tsx
@@ -6,6 +6,7 @@ import {
     SimpleGrid,
     Text,
 } from '~/bundles/common/components/components.js';
+import { EMPTY_VALUE } from '~/bundles/common/constants/constants.js';
 import { type Voice } from '~/bundles/home/types/types.js';
 import { VoiceCard } from '~/bundles/voices/components/components.js';
 import { VoicesSections } from '~/bundles/voices/enums/voices-sections.js';
@@ -34,7 +35,7 @@ const VoiceSection: React.FC<Properties> = ({ voices, title }) => {
                 </Badge>
             </Flex>
 
-            {voices.length > 0 ? (
+            {voices.length > EMPTY_VALUE ? (
                 title === VoicesSections.MY_VOICES ? (
                     <Box className={styles['horizontal']}>
                         {voices.map((voice) => (
diff --git a/frontend/src/bundles/voices/constants/constants.ts b/frontend/src/bundles/voices/constants/constants.ts
new file mode 100644
index 000000000..624b13d5f
--- /dev/null
+++ b/frontend/src/bundles/voices/constants/constants.ts
@@ -0,0 +1,2 @@
+export { TEXT_FOR_VOICES } from './text-for-voices.constant.js';
+export { EMPTY_VALUE } from 'shared';
diff --git a/frontend/src/bundles/voices/constants/text-for-voices.constant.ts b/frontend/src/bundles/voices/constants/text-for-voices.constant.ts
new file mode 100644
index 000000000..e6f13b4a6
--- /dev/null
+++ b/frontend/src/bundles/voices/constants/text-for-voices.constant.ts
@@ -0,0 +1,4 @@
+const TEXT_FOR_VOICES =
+    'Hello, I can handle video speech for you, choose me if you like it!';
+
+export { TEXT_FOR_VOICES };