Merge pull request #296 from BinaryStudioAcademy/task/OV-295-reset-st…

…ore-when-leaving-studio-page OV-295: Reset store when user leaves studio page
BinaryStudioAcademy · Sep 16, 2024 · 0a017f9 · 0a017f9
2 parents 5e2ce81 + 3e1f1fd
commit 0a017f9
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git a/frontend/src/bundles/studio/components/video-menu/components/mock/menu-mock.tsx b/frontend/src/bundles/studio/components/video-menu/components/mock/menu-mock.tsx
@@ -1,8 +1,7 @@
 const TemplatesContent: React.FC = () => (
     <div>This is the Templates content.</div>
 );
-const AvatarsContent: React.FC = () => <div>This is the Avatars content.</div>;
 const TextContent: React.FC = () => <div>This is the Text content.</div>;
 const AssetsContent: React.FC = () => <div>This is the Assets content.</div>;
 
-export { AssetsContent, AvatarsContent, TemplatesContent, TextContent };
+export { AssetsContent, TemplatesContent, TextContent };
diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx
@@ -15,6 +15,7 @@ import {
     useAppDispatch,
     useAppSelector,
     useCallback,
+    useEffect,
     useRef,
 } from '~/bundles/common/hooks/hooks.js';
 import { notificationService } from '~/bundles/common/services/services.js';
@@ -31,7 +32,7 @@ import {
     VIDEO_SUBMIT_NOTIFICATION_ID,
 } from '../constants/constants.js';
 import { NotificationMessage, NotificationTitle } from '../enums/enums.js';
-import { actions as studioActionCreator } from '../store/studio.js';
+import { actions as studioActions } from '../store/studio.js';
 import styles from './styles.module.css';
 
 const Studio: React.FC = () => {
@@ -44,7 +45,7 @@ const Studio: React.FC = () => {
     const navigate = useNavigate();
 
     const handleResize = useCallback(() => {
-        dispatch(studioActionCreator.changeVideoSize());
+        dispatch(studioActions.changeVideoSize());
     }, [dispatch]);
 
     const handleSubmit = useCallback(() => {
@@ -62,7 +63,7 @@ const Studio: React.FC = () => {
         }
 
         dispatch(
-            studioActionCreator.renderAvatar({
+            studioActions.renderAvatar({
                 avatarName: scene.avatar.name,
                 avatarStyle: scene.avatar.style,
                 text: script?.text,
@@ -86,9 +87,13 @@ const Studio: React.FC = () => {
             });
     }, [dispatch, navigate, scenes, scripts]);
 
+    useEffect(() => {
+        return () => void dispatch(studioActions.resetStudio());
+    }, [dispatch]);
+
     const handleEditVideoName = useCallback(
         (event: React.FocusEvent<HTMLInputElement>): void => {
-            void dispatch(studioActionCreator.setVideoName(event.target.value));
+            void dispatch(studioActions.setVideoName(event.target.value));
         },
         [dispatch],
     );
@@ -135,7 +140,7 @@ const Studio: React.FC = () => {
                 <Player playerRef={playerReference} />
             </Box>
 
-            <VStack alignItems={'stretch'}>
+            <VStack alignItems="stretch">
                 <PlayerControls playerRef={playerReference} />
                 <Box overflowY="auto">
                     <Timeline playerRef={playerReference} />

diff --git a/frontend/src/bundles/studio/store/actions.ts b/frontend/src/bundles/studio/store/actions.ts
@@ -42,9 +42,13 @@ const generateAllScriptsSpeech = createAsyncThunk<
 
         const scripts = state.studio.scripts
             .filter((script) => !script.url)
-            .map(({ id, text, voiceName }) =>
+            .map(({ id, text, voice }) =>
                 dispatch(
-                    generateScriptSpeech({ scriptId: id, text, voiceName }),
+                    generateScriptSpeech({
+                        scriptId: id,
+                        text,
+                        voiceName: voice?.shortName as string,
+                    }),
                 ),
             );
 

diff --git a/frontend/src/bundles/studio/store/slice.ts b/frontend/src/bundles/studio/store/slice.ts
@@ -60,7 +60,6 @@ type State = {
         elapsedTime: number; // ms
     };
     range: Range;
-
     scenes: Array<Scene>;
     scripts: Array<Script>;
     videoSize: VideoPreviewT;
@@ -276,6 +275,13 @@ const { reducer, actions, name } = createSlice({
         ) {
             state.ui.menuActiveItem = action.payload;
         },
+        resetStudio(state) {
+            // TODO: do not overwrite voices on reset
+            return {
+                ...initialState,
+                avatars: state.avatars,
+            };
+        },
     },
     extraReducers(builder) {
         builder.addCase(loadAvatars.pending, (state) => {