From 5d9289a71fbc433db4d782d91f90627fcb42f40b Mon Sep 17 00:00:00 2001 From: stefano-lacorazza <112132737+stefano-lacorazza@users.noreply.github.com> Date: Fri, 20 Sep 2024 16:57:41 -0500 Subject: [PATCH 1/3] OV-349: + add warning modal when the scenes exceed the scripts --- .../src/bundles/studio/helpers/helpers.ts | 1 + .../studio/helpers/scenes-exceed-scripts.ts | 16 ++++++++++ frontend/src/bundles/studio/pages/studio.tsx | 29 +++++++++++++++++-- 3 files changed, 43 insertions(+), 3 deletions(-) create mode 100644 frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts diff --git a/frontend/src/bundles/studio/helpers/helpers.ts b/frontend/src/bundles/studio/helpers/helpers.ts index df8630b95..ab1113d36 100644 --- a/frontend/src/bundles/studio/helpers/helpers.ts +++ b/frontend/src/bundles/studio/helpers/helpers.ts @@ -4,4 +4,5 @@ export { getNewItemIndexBySpan } from './get-new-item-index.js'; export { calculateTotalMilliseconds } from './get-total-time.js'; export { getVoicesConfigs } from './get-voices-configs.helper.js'; export { reorderItemsByIndexes } from './reorder-items.js'; +export { scenesExceedScripts } from './scenes-exceed-scripts.js'; export { setItemsSpan } from './set-items-span.js'; diff --git a/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts b/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts new file mode 100644 index 000000000..ed6773451 --- /dev/null +++ b/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts @@ -0,0 +1,16 @@ +import { type Scene, type Script } from '../types/types.js'; + +const scenesExceedScripts = (scenes: Scene[], scripts: Script[]): boolean => { + const totalScenesDuration = scenes.reduce( + (accumulator, scene) => accumulator + scene.duration, + 0, + ); + const totalScriptsDuration = scripts.reduce( + (accumulator, script) => accumulator + script.duration, + 0, + ); + + return totalScenesDuration > totalScriptsDuration; +}; + +export { scenesExceedScripts }; diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx index 1fbf71ef2..3aabb1eb8 100644 --- a/frontend/src/bundles/studio/pages/studio.tsx +++ b/frontend/src/bundles/studio/pages/studio.tsx @@ -23,6 +23,7 @@ import { useLocation, useNavigate, useRef, + useState, } from '~/bundles/common/hooks/hooks.js'; import { IconName } from '~/bundles/common/icons/icons.js'; import { notificationService } from '~/bundles/common/services/services.js'; @@ -33,6 +34,7 @@ import { Timeline, VideoMenu, VideoNameInput, + WarningModal, } from '../components/components.js'; import { SCRIPT_AND_AVATAR_ARE_REQUIRED, @@ -42,12 +44,13 @@ import { VIDEO_SUBMIT_NOTIFICATION_ID, } from '../constants/constants.js'; import { NotificationMessage, NotificationTitle } from '../enums/enums.js'; -import { getVoicesConfigs } from '../helpers/helpers.js'; +import { getVoicesConfigs, scenesExceedScripts } from '../helpers/helpers.js'; import { selectVideoDataById } from '../store/selectors.js'; import { actions as studioActions } from '../store/studio.js'; const Studio: React.FC = () => { const { state: locationState } = useLocation(); + const [isModalOpen, setIsModalOpen] = useState(false); const videoData = useAppSelector((state) => selectVideoDataById(state, locationState?.id), @@ -60,6 +63,14 @@ const Studio: React.FC = () => { const dispatch = useAppDispatch(); const navigate = useNavigate(); + const handleOpenModal = useCallback(() => { + setIsModalOpen(true); + }, []); + + const handleCloseModal = useCallback(() => { + setIsModalOpen(false); + }, []); + useEffect((): void => { if (videoData) { void dispatch(studioActions.loadVideoData(videoData)); @@ -70,11 +81,10 @@ const Studio: React.FC = () => { dispatch(studioActions.changeVideoSize()); }, [dispatch]); - const handleSubmit = useCallback(() => { + const handleConfirmSubmit = useCallback(() => { // TODO: REPLACE LOGIC WITH MULTIPLE SCENES const scene = scenes[0]; const script = scripts[0]; - if (!scene?.avatar || !script) { notificationService.warn({ id: SCRIPT_AND_AVATAR_ARE_REQUIRED, @@ -106,6 +116,14 @@ const Studio: React.FC = () => { }); }, [dispatch, navigate, scenes, scripts]); + const handleSubmit = useCallback(() => { + if (scenesExceedScripts(scenes, scripts)) { + handleOpenModal(); + } else { + handleConfirmSubmit(); + } + }, [handleConfirmSubmit, handleOpenModal, scenes, scripts]); + useEffect(() => { return () => { dispatch(studioActions.resetStudio()); @@ -171,6 +189,11 @@ const Studio: React.FC = () => { display="flex" flexDirection="column" > +
Date: Tue, 24 Sep 2024 05:33:44 -0500 Subject: [PATCH 2/3] OV-349: * fix magic numbers --- .../src/bundles/studio/helpers/scenes-exceed-scripts.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts b/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts index ed6773451..832dcd6d3 100644 --- a/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts +++ b/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts @@ -1,16 +1,18 @@ import { type Scene, type Script } from '../types/types.js'; +const INITIAL_DURATION = 0; + const scenesExceedScripts = (scenes: Scene[], scripts: Script[]): boolean => { const totalScenesDuration = scenes.reduce( (accumulator, scene) => accumulator + scene.duration, - 0, + INITIAL_DURATION, ); const totalScriptsDuration = scripts.reduce( (accumulator, script) => accumulator + script.duration, - 0, + INITIAL_DURATION, ); return totalScenesDuration > totalScriptsDuration; }; -export { scenesExceedScripts }; +export { scenesExceedScripts }; \ No newline at end of file From 9f990099fead42acc5b27e9eda5e55cd5fc90700 Mon Sep 17 00:00:00 2001 From: stefano-lacorazza <112132737+stefano-lacorazza@users.noreply.github.com> Date: Tue, 24 Sep 2024 05:37:58 -0500 Subject: [PATCH 3/3] OV-349: + add final newline --- frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts b/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts index 832dcd6d3..06621a128 100644 --- a/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts +++ b/frontend/src/bundles/studio/helpers/scenes-exceed-scripts.ts @@ -15,4 +15,4 @@ const scenesExceedScripts = (scenes: Scene[], scripts: Script[]): boolean => { return totalScenesDuration > totalScriptsDuration; }; -export { scenesExceedScripts }; \ No newline at end of file +export { scenesExceedScripts };