From 84fbccaf6ec748da51bc75f48becd85ece244978 Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Thu, 22 Aug 2024 16:18:57 -0400 Subject: [PATCH 01/34] OV-44: + not found page --- .../common/components/not-found/not-found.tsx | 79 +++++++++++++++++++ .../src/router/routes/protected-routes.tsx | 5 +- 2 files changed, 81 insertions(+), 3 deletions(-) create mode 100644 frontend/src/bundles/common/components/not-found/not-found.tsx diff --git a/frontend/src/bundles/common/components/not-found/not-found.tsx b/frontend/src/bundles/common/components/not-found/not-found.tsx new file mode 100644 index 000000000..9e5de2c21 --- /dev/null +++ b/frontend/src/bundles/common/components/not-found/not-found.tsx @@ -0,0 +1,79 @@ +import { Box, Center, Text } from '@chakra-ui/react'; +import { motion } from 'framer-motion'; + +const NotFound: React.FC = () => { + const circleAnimation = { + r: [1, 5, 10, 15, 20], + opacity: [0.9, 0.3, 0.2, 0.1, 0], + }; + + const circleTransition = { + repeat: Number.POSITIVE_INFINITY, + ease: 'easeOut', + duration: 2, + }; + + return ( +
+ + + + + 4 + + + 4 + + + + + + + + + + [Page not found] + + +
+ ); +}; + +export { NotFound }; diff --git a/frontend/src/router/routes/protected-routes.tsx b/frontend/src/router/routes/protected-routes.tsx index 4724f0a4b..942cc7068 100644 --- a/frontend/src/router/routes/protected-routes.tsx +++ b/frontend/src/router/routes/protected-routes.tsx @@ -1,5 +1,4 @@ -import { Navigate } from 'react-router-dom'; - +import { NotFound } from '~/bundles/common/components/not-found/not-found.js'; import { AppRoute } from '~/bundles/common/enums/app-route.enum.js'; import { Studio } from '~/bundles/studio/pages/studio.js'; @@ -16,7 +15,7 @@ const protectedRoutes = { }, { path: AppRoute.ANY, - element: , + element: , }, ], }; From b6f8b5f42f39a504cb8d4b51be0723b86c3860b8 Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Thu, 22 Aug 2024 23:28:10 -0400 Subject: [PATCH 02/34] OV-44: * import corrections --- frontend/src/bundles/common/components/components.ts | 1 + frontend/src/bundles/common/hooks/hooks.ts | 2 +- frontend/src/router/components/protected-route.tsx | 8 ++------ frontend/src/router/routes.tsx | 2 +- frontend/src/router/routes/protected-routes.tsx | 5 ++--- 5 files changed, 7 insertions(+), 11 deletions(-) diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index ab06c5910..003ecaa49 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -3,6 +3,7 @@ export { Header } from './header/header.js'; export { Input } from './input/input.js'; export { Link } from './link/link.js'; export { Loader } from './loader/loader.js'; +export { NotFound } from './not-found/not-found.js'; export { Overlay } from './overlay/overlay.js'; export { RouterProvider } from './router-provider/router-provider.js'; export { VideoModal } from './video-modal/video-modal.js'; diff --git a/frontend/src/bundles/common/hooks/hooks.ts b/frontend/src/bundles/common/hooks/hooks.ts index 2c429faa8..084ce65f6 100644 --- a/frontend/src/bundles/common/hooks/hooks.ts +++ b/frontend/src/bundles/common/hooks/hooks.ts @@ -3,4 +3,4 @@ export { useAppForm } from './use-app-form/use-app-form.hook.js'; export { useAppSelector } from './use-app-selector/use-app-selector.hook.js'; export { useField as useFormField } from 'formik'; export { useCallback, useEffect, useMemo, useState } from 'react'; -export { useLocation } from 'react-router-dom'; +export { Navigate, useLocation } from 'react-router-dom'; diff --git a/frontend/src/router/components/protected-route.tsx b/frontend/src/router/components/protected-route.tsx index 130755f91..91a6c27ed 100644 --- a/frontend/src/router/components/protected-route.tsx +++ b/frontend/src/router/components/protected-route.tsx @@ -1,13 +1,9 @@ -import { Navigate } from 'react-router-dom'; - import { RouterOutlet } from '~/bundles/common/components/components.js'; import { AppRoute } from '~/bundles/common/enums/app-route.enum.js'; -// import { useAppSelector } from '~/bundles/common/hooks/hooks.js'; +import { Navigate } from '~/bundles/common/hooks/hooks.js'; const ProtectedRoute: React.FC = () => { - // const user = useAppSelector((state) => state.auth.user); - - // TODO: for implementing persistence. The following line is temporary + // TODO: When persistence is implemented, the user will be taken from the store. The following line is temporary const user = true; if (!user) { diff --git a/frontend/src/router/routes.tsx b/frontend/src/router/routes.tsx index 9131d0b2c..d744e70a1 100644 --- a/frontend/src/router/routes.tsx +++ b/frontend/src/router/routes.tsx @@ -1,5 +1,5 @@ import { App } from '~/app/app.js'; -import { AppRoute } from '~/bundles/common/enums/app-route.enum.js'; +import { AppRoute } from '~/bundles/common/enums/enums.js'; import { protectedRoutes } from './routes/protected-routes.js'; import { publicRoutes } from './routes/public-routes.js'; diff --git a/frontend/src/router/routes/protected-routes.tsx b/frontend/src/router/routes/protected-routes.tsx index 942cc7068..a7b1dcd19 100644 --- a/frontend/src/router/routes/protected-routes.tsx +++ b/frontend/src/router/routes/protected-routes.tsx @@ -1,5 +1,5 @@ -import { NotFound } from '~/bundles/common/components/not-found/not-found.js'; -import { AppRoute } from '~/bundles/common/enums/app-route.enum.js'; +import { NotFound } from '~/bundles/common/components/components.js'; +import { AppRoute } from '~/bundles/common/enums/enums.js'; import { Studio } from '~/bundles/studio/pages/studio.js'; import { ProtectedRoute } from '../components/protected-route.js'; @@ -8,7 +8,6 @@ const protectedRoutes = { path: AppRoute.ROOT, element: , children: [ - //TODO Add protected routes here in element property and specify the correct path { path: AppRoute.STUDIO, element: , From b654f130ba0dde5e33a48f34fdd5c6c1608c4e7d Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Fri, 23 Aug 2024 07:00:59 -0400 Subject: [PATCH 03/34] OV-44: * text color --- .../components/not-found => auth/pages}/not-found.tsx | 5 +++-- frontend/src/bundles/common/components/components.ts | 1 - frontend/src/router/routes/protected-routes.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) rename frontend/src/bundles/{common/components/not-found => auth/pages}/not-found.tsx (96%) diff --git a/frontend/src/bundles/common/components/not-found/not-found.tsx b/frontend/src/bundles/auth/pages/not-found.tsx similarity index 96% rename from frontend/src/bundles/common/components/not-found/not-found.tsx rename to frontend/src/bundles/auth/pages/not-found.tsx index 9e5de2c21..5bd484e04 100644 --- a/frontend/src/bundles/common/components/not-found/not-found.tsx +++ b/frontend/src/bundles/auth/pages/not-found.tsx @@ -1,6 +1,7 @@ -import { Box, Center, Text } from '@chakra-ui/react'; import { motion } from 'framer-motion'; +import { Box, Center, Text } from '~/bundles/common/components/components.js'; + const NotFound: React.FC = () => { const circleAnimation = { r: [1, 5, 10, 15, 20], @@ -65,7 +66,7 @@ const NotFound: React.FC = () => { diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index 003ecaa49..ab06c5910 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -3,7 +3,6 @@ export { Header } from './header/header.js'; export { Input } from './input/input.js'; export { Link } from './link/link.js'; export { Loader } from './loader/loader.js'; -export { NotFound } from './not-found/not-found.js'; export { Overlay } from './overlay/overlay.js'; export { RouterProvider } from './router-provider/router-provider.js'; export { VideoModal } from './video-modal/video-modal.js'; diff --git a/frontend/src/router/routes/protected-routes.tsx b/frontend/src/router/routes/protected-routes.tsx index a7b1dcd19..e9c2a69f8 100644 --- a/frontend/src/router/routes/protected-routes.tsx +++ b/frontend/src/router/routes/protected-routes.tsx @@ -1,4 +1,4 @@ -import { NotFound } from '~/bundles/common/components/components.js'; +import { NotFound } from '~/bundles/auth/pages/not-found.js'; import { AppRoute } from '~/bundles/common/enums/enums.js'; import { Studio } from '~/bundles/studio/pages/studio.js'; From e1899274c9e995b499a95042fc78f95e259ca6cd Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Fri, 23 Aug 2024 07:05:03 -0400 Subject: [PATCH 04/34] OV-44: * organization --- frontend/src/bundles/auth/pages/not-found.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/frontend/src/bundles/auth/pages/not-found.tsx b/frontend/src/bundles/auth/pages/not-found.tsx index 5bd484e04..618f3910e 100644 --- a/frontend/src/bundles/auth/pages/not-found.tsx +++ b/frontend/src/bundles/auth/pages/not-found.tsx @@ -64,12 +64,7 @@ const NotFound: React.FC = () => { /> - + [Page not found] From 9e5955f18af38fa5704dd4c7657dabf738e5f160 Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Fri, 23 Aug 2024 11:05:43 -0400 Subject: [PATCH 05/34] OV-44: * organization --- frontend/src/bundles/{auth => common}/pages/not-found.tsx | 0 frontend/src/router/routes/protected-routes.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename frontend/src/bundles/{auth => common}/pages/not-found.tsx (100%) diff --git a/frontend/src/bundles/auth/pages/not-found.tsx b/frontend/src/bundles/common/pages/not-found.tsx similarity index 100% rename from frontend/src/bundles/auth/pages/not-found.tsx rename to frontend/src/bundles/common/pages/not-found.tsx diff --git a/frontend/src/router/routes/protected-routes.tsx b/frontend/src/router/routes/protected-routes.tsx index e9c2a69f8..fec8754a5 100644 --- a/frontend/src/router/routes/protected-routes.tsx +++ b/frontend/src/router/routes/protected-routes.tsx @@ -1,5 +1,5 @@ -import { NotFound } from '~/bundles/auth/pages/not-found.js'; import { AppRoute } from '~/bundles/common/enums/enums.js'; +import { NotFound } from '~/bundles/common/pages/not-found.js'; import { Studio } from '~/bundles/studio/pages/studio.js'; import { ProtectedRoute } from '../components/protected-route.js'; From 7a1f22cd81b9fa0b72d22dcc3f373f4c4326bccb Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Mon, 26 Aug 2024 07:13:35 -0400 Subject: [PATCH 06/34] OV-44: * modularization --- .../src/bundles/common/pages/not-found.tsx | 75 ------------------- .../common/pages/not-found/animated404.tsx | 70 +++++++++++++++++ .../common/pages/not-found/not-found.tsx | 22 ++++++ .../src/router/routes/protected-routes.tsx | 2 +- 4 files changed, 93 insertions(+), 76 deletions(-) delete mode 100644 frontend/src/bundles/common/pages/not-found.tsx create mode 100644 frontend/src/bundles/common/pages/not-found/animated404.tsx create mode 100644 frontend/src/bundles/common/pages/not-found/not-found.tsx diff --git a/frontend/src/bundles/common/pages/not-found.tsx b/frontend/src/bundles/common/pages/not-found.tsx deleted file mode 100644 index 618f3910e..000000000 --- a/frontend/src/bundles/common/pages/not-found.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { motion } from 'framer-motion'; - -import { Box, Center, Text } from '~/bundles/common/components/components.js'; - -const NotFound: React.FC = () => { - const circleAnimation = { - r: [1, 5, 10, 15, 20], - opacity: [0.9, 0.3, 0.2, 0.1, 0], - }; - - const circleTransition = { - repeat: Number.POSITIVE_INFINITY, - ease: 'easeOut', - duration: 2, - }; - - return ( -
- - - - - 4 - - - 4 - - - - - - - - - - [Page not found] - - -
- ); -}; - -export { NotFound }; diff --git a/frontend/src/bundles/common/pages/not-found/animated404.tsx b/frontend/src/bundles/common/pages/not-found/animated404.tsx new file mode 100644 index 000000000..57798ae5d --- /dev/null +++ b/frontend/src/bundles/common/pages/not-found/animated404.tsx @@ -0,0 +1,70 @@ +import { motion } from 'framer-motion'; + +const circleVariants = { + animate: { + r: [1, 5, 10, 15, 20], + opacity: [0.9, 0.3, 0.2, 0.1, 0], + }, +}; + +const circleTransition = { + repeat: Number.POSITIVE_INFINITY, + ease: 'easeOut', + duration: 2, +}; + +const Animated404: React.FC = () => ( + +); + +export { Animated404 }; diff --git a/frontend/src/bundles/common/pages/not-found/not-found.tsx b/frontend/src/bundles/common/pages/not-found/not-found.tsx new file mode 100644 index 000000000..9d2b580bd --- /dev/null +++ b/frontend/src/bundles/common/pages/not-found/not-found.tsx @@ -0,0 +1,22 @@ +import { + Box, + Center, + Heading, +} from '~/bundles/common/components/components.js'; + +import { Animated404 } from './animated404.js'; + +const NotFound: React.FC = () => { + return ( +
+ + + + Page not found + + +
+ ); +}; + +export { NotFound }; diff --git a/frontend/src/router/routes/protected-routes.tsx b/frontend/src/router/routes/protected-routes.tsx index fec8754a5..4b261be41 100644 --- a/frontend/src/router/routes/protected-routes.tsx +++ b/frontend/src/router/routes/protected-routes.tsx @@ -1,5 +1,5 @@ import { AppRoute } from '~/bundles/common/enums/enums.js'; -import { NotFound } from '~/bundles/common/pages/not-found.js'; +import { NotFound } from '~/bundles/common/pages/not-found/not-found.js'; import { Studio } from '~/bundles/studio/pages/studio.js'; import { ProtectedRoute } from '../components/protected-route.js'; From ff6a2157dff7bedeb0e0faa759ec16597da36785 Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Wed, 28 Aug 2024 02:29:58 -0400 Subject: [PATCH 07/34] OV-44: * imports --- .../src/bundles/common/components/components.ts | 2 +- frontend/src/bundles/common/hooks/hooks.ts | 2 +- .../bundles/common/pages/not-found/animated404.tsx | 13 +------------ .../common/pages/not-found/animation-config.ts | 14 ++++++++++++++ frontend/src/router/components/protected-route.tsx | 5 ++--- frontend/src/router/routes/public-routes.tsx | 2 +- 6 files changed, 20 insertions(+), 18 deletions(-) create mode 100644 frontend/src/bundles/common/pages/not-found/animation-config.ts diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index ab06c5910..96336e367 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -26,4 +26,4 @@ export { } from '@chakra-ui/react'; export { FormikProvider as FormProvider } from 'formik'; export { Provider as StoreProvider } from 'react-redux'; -export { Outlet as RouterOutlet } from 'react-router-dom'; +export { Navigate, Outlet as RouterOutlet } from 'react-router-dom'; diff --git a/frontend/src/bundles/common/hooks/hooks.ts b/frontend/src/bundles/common/hooks/hooks.ts index 084ce65f6..2c429faa8 100644 --- a/frontend/src/bundles/common/hooks/hooks.ts +++ b/frontend/src/bundles/common/hooks/hooks.ts @@ -3,4 +3,4 @@ export { useAppForm } from './use-app-form/use-app-form.hook.js'; export { useAppSelector } from './use-app-selector/use-app-selector.hook.js'; export { useField as useFormField } from 'formik'; export { useCallback, useEffect, useMemo, useState } from 'react'; -export { Navigate, useLocation } from 'react-router-dom'; +export { useLocation } from 'react-router-dom'; diff --git a/frontend/src/bundles/common/pages/not-found/animated404.tsx b/frontend/src/bundles/common/pages/not-found/animated404.tsx index 57798ae5d..43863c9d4 100644 --- a/frontend/src/bundles/common/pages/not-found/animated404.tsx +++ b/frontend/src/bundles/common/pages/not-found/animated404.tsx @@ -1,17 +1,6 @@ import { motion } from 'framer-motion'; -const circleVariants = { - animate: { - r: [1, 5, 10, 15, 20], - opacity: [0.9, 0.3, 0.2, 0.1, 0], - }, -}; - -const circleTransition = { - repeat: Number.POSITIVE_INFINITY, - ease: 'easeOut', - duration: 2, -}; +import { circleTransition,circleVariants } from './animation-config.js'; const Animated404: React.FC = () => ( { // TODO: When persistence is implemented, the user will be taken from the store. The following line is temporary diff --git a/frontend/src/router/routes/public-routes.tsx b/frontend/src/router/routes/public-routes.tsx index ead9cf5ff..852a3e7cc 100644 --- a/frontend/src/router/routes/public-routes.tsx +++ b/frontend/src/router/routes/public-routes.tsx @@ -1,5 +1,5 @@ import { Auth } from '~/bundles/auth/pages/auth.js'; -import { AppRoute } from '~/bundles/common/enums/app-route.enum.js'; +import { AppRoute } from '~/bundles/common/enums/enums.js'; const publicRoutes = [ { From a8c38351d42744a04fea5172cbf90ef4ec74fd3b Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Wed, 28 Aug 2024 02:31:50 -0400 Subject: [PATCH 08/34] OV-44: * imports --- frontend/src/bundles/common/pages/not-found/animated404.tsx | 2 +- .../src/bundles/common/pages/not-found/animation-config.ts | 2 +- frontend/src/router/components/protected-route.tsx | 5 ++++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/frontend/src/bundles/common/pages/not-found/animated404.tsx b/frontend/src/bundles/common/pages/not-found/animated404.tsx index 43863c9d4..968c246de 100644 --- a/frontend/src/bundles/common/pages/not-found/animated404.tsx +++ b/frontend/src/bundles/common/pages/not-found/animated404.tsx @@ -1,6 +1,6 @@ import { motion } from 'framer-motion'; -import { circleTransition,circleVariants } from './animation-config.js'; +import { circleTransition, circleVariants } from './animation-config.js'; const Animated404: React.FC = () => ( { From 0631d153ef143147ac6ddd4ff05fdb7c2a23f639 Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Wed, 28 Aug 2024 03:24:15 -0400 Subject: [PATCH 09/34] OV-44: * Routes in an object --- .../src/router/components/protected-route.tsx | 18 +++++------- frontend/src/router/routes.tsx | 29 +++++++++++++++++-- .../src/router/routes/protected-routes.tsx | 22 -------------- frontend/src/router/routes/public-routes.tsx | 15 ---------- 4 files changed, 33 insertions(+), 51 deletions(-) delete mode 100644 frontend/src/router/routes/protected-routes.tsx delete mode 100644 frontend/src/router/routes/public-routes.tsx diff --git a/frontend/src/router/components/protected-route.tsx b/frontend/src/router/components/protected-route.tsx index 27f02b05d..c003d8187 100644 --- a/frontend/src/router/components/protected-route.tsx +++ b/frontend/src/router/components/protected-route.tsx @@ -1,18 +1,14 @@ -import { - Navigate, - RouterOutlet, -} from '~/bundles/common/components/components.js'; +import { Navigate } from '~/bundles/common/components/components.js'; import { AppRoute } from '~/bundles/common/enums/enums.js'; -const ProtectedRoute: React.FC = () => { +interface Properties { + children: React.ReactNode; +} + +const ProtectedRoute: React.FC = ({ children }) => { // TODO: When persistence is implemented, the user will be taken from the store. The following line is temporary const user = true; - - if (!user) { - return ; - } - - return ; + return user ? children : ; }; export { ProtectedRoute }; diff --git a/frontend/src/router/routes.tsx b/frontend/src/router/routes.tsx index d744e70a1..27bfac8bd 100644 --- a/frontend/src/router/routes.tsx +++ b/frontend/src/router/routes.tsx @@ -1,14 +1,37 @@ import { App } from '~/app/app.js'; +import { Auth } from '~/bundles/auth/pages/auth.js'; import { AppRoute } from '~/bundles/common/enums/enums.js'; +import { NotFound } from '~/bundles/common/pages/not-found/not-found.js'; +import { Studio } from '~/bundles/studio/pages/studio.js'; -import { protectedRoutes } from './routes/protected-routes.js'; -import { publicRoutes } from './routes/public-routes.js'; +import { ProtectedRoute } from './components/protected-route.js'; const routes = [ { path: AppRoute.ROOT, element: , - children: [protectedRoutes, ...publicRoutes], + children: [ + { + path: AppRoute.SIGN_IN, + element: , + }, + { + path: AppRoute.SIGN_UP, + element: , + }, + { + path: AppRoute.STUDIO, + element: ( + + , + + ), + }, + { + path: AppRoute.ANY, + element: , + }, + ], }, ]; diff --git a/frontend/src/router/routes/protected-routes.tsx b/frontend/src/router/routes/protected-routes.tsx deleted file mode 100644 index 4b261be41..000000000 --- a/frontend/src/router/routes/protected-routes.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { AppRoute } from '~/bundles/common/enums/enums.js'; -import { NotFound } from '~/bundles/common/pages/not-found/not-found.js'; -import { Studio } from '~/bundles/studio/pages/studio.js'; - -import { ProtectedRoute } from '../components/protected-route.js'; - -const protectedRoutes = { - path: AppRoute.ROOT, - element: , - children: [ - { - path: AppRoute.STUDIO, - element: , - }, - { - path: AppRoute.ANY, - element: , - }, - ], -}; - -export { protectedRoutes }; diff --git a/frontend/src/router/routes/public-routes.tsx b/frontend/src/router/routes/public-routes.tsx deleted file mode 100644 index 852a3e7cc..000000000 --- a/frontend/src/router/routes/public-routes.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Auth } from '~/bundles/auth/pages/auth.js'; -import { AppRoute } from '~/bundles/common/enums/enums.js'; - -const publicRoutes = [ - { - path: AppRoute.SIGN_IN, - element: , - }, - { - path: AppRoute.SIGN_UP, - element: , - }, -]; - -export { publicRoutes }; From c807521ba57fa1e59751e8e251a65098fe3be4c3 Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Wed, 28 Aug 2024 08:51:10 -0400 Subject: [PATCH 10/34] OV-44: * protectedROutes in common --- frontend/src/bundles/common/components/components.ts | 1 + .../common/components/protected-route}/protected-route.tsx | 0 frontend/src/router/routes.tsx | 2 +- 3 files changed, 2 insertions(+), 1 deletion(-) rename frontend/src/{router/components => bundles/common/components/protected-route}/protected-route.tsx (100%) diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index 3d1be7085..356d3504f 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -5,6 +5,7 @@ export { Link } from './link/link.js'; export { Loader } from './loader/loader.js'; export { Overlay } from './overlay/overlay.js'; export { Player } from './player/player.js'; +export { ProtectedRoute } from './protected-route/protected-route.js'; export { RouterProvider } from './router-provider/router-provider.js'; export { VideoModal } from './video-modal/video-modal.js'; export { DownloadIcon } from '@chakra-ui/icons'; diff --git a/frontend/src/router/components/protected-route.tsx b/frontend/src/bundles/common/components/protected-route/protected-route.tsx similarity index 100% rename from frontend/src/router/components/protected-route.tsx rename to frontend/src/bundles/common/components/protected-route/protected-route.tsx diff --git a/frontend/src/router/routes.tsx b/frontend/src/router/routes.tsx index 27bfac8bd..7058b845b 100644 --- a/frontend/src/router/routes.tsx +++ b/frontend/src/router/routes.tsx @@ -4,7 +4,7 @@ import { AppRoute } from '~/bundles/common/enums/enums.js'; import { NotFound } from '~/bundles/common/pages/not-found/not-found.js'; import { Studio } from '~/bundles/studio/pages/studio.js'; -import { ProtectedRoute } from './components/protected-route.js'; +import { ProtectedRoute } from '../bundles/common/components/protected-route/protected-route.js'; const routes = [ { From f0dd5c3cf3da2a700a608bfda5163161dd189b28 Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Wed, 28 Aug 2024 09:04:59 -0400 Subject: [PATCH 11/34] OV-44: * animated404 in common folder --- .../not-found => components/animated404}/animated404.tsx | 9 ++++++--- .../animated404/libs/constants}/animation-config.ts | 6 +++--- frontend/src/bundles/common/components/components.ts | 1 + .../src/bundles/common/pages/not-found/not-found.tsx | 2 +- frontend/src/router/routes.tsx | 2 +- 5 files changed, 12 insertions(+), 8 deletions(-) rename frontend/src/bundles/common/{pages/not-found => components/animated404}/animated404.tsx (89%) rename frontend/src/bundles/common/{pages/not-found => components/animated404/libs/constants}/animation-config.ts (63%) diff --git a/frontend/src/bundles/common/pages/not-found/animated404.tsx b/frontend/src/bundles/common/components/animated404/animated404.tsx similarity index 89% rename from frontend/src/bundles/common/pages/not-found/animated404.tsx rename to frontend/src/bundles/common/components/animated404/animated404.tsx index 968c246de..23e0dd927 100644 --- a/frontend/src/bundles/common/pages/not-found/animated404.tsx +++ b/frontend/src/bundles/common/components/animated404/animated404.tsx @@ -1,6 +1,9 @@ import { motion } from 'framer-motion'; -import { circleTransition, circleVariants } from './animation-config.js'; +import { + CIRCLE_TRANSITION, + CIRCLE_VARIANTS, +} from './libs/constants/animation-config.js'; const Animated404: React.FC = () => ( ( cy="41" r="1" fill="white" - variants={circleVariants} + variants={CIRCLE_VARIANTS} animate="animate" - transition={circleTransition} + transition={CIRCLE_TRANSITION} /> diff --git a/frontend/src/bundles/common/pages/not-found/animation-config.ts b/frontend/src/bundles/common/components/animated404/libs/constants/animation-config.ts similarity index 63% rename from frontend/src/bundles/common/pages/not-found/animation-config.ts rename to frontend/src/bundles/common/components/animated404/libs/constants/animation-config.ts index d43fb320b..881593600 100644 --- a/frontend/src/bundles/common/pages/not-found/animation-config.ts +++ b/frontend/src/bundles/common/components/animated404/libs/constants/animation-config.ts @@ -1,14 +1,14 @@ -const circleVariants = { +const CIRCLE_VARIANTS = { animate: { r: [1, 5, 10, 15, 20], opacity: [0.9, 0.3, 0.2, 0.1, 0], }, }; -const circleTransition = { +const CIRCLE_TRANSITION = { repeat: Number.POSITIVE_INFINITY, ease: 'easeOut', duration: 2, }; -export { circleTransition, circleVariants }; +export { CIRCLE_TRANSITION, CIRCLE_VARIANTS }; diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index 356d3504f..97c7945e2 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -1,3 +1,4 @@ +export { Animated404 } from './animated404/animated404.js'; export { Button } from './button/button.js'; export { Header } from './header/header.js'; export { Input } from './input/input.js'; diff --git a/frontend/src/bundles/common/pages/not-found/not-found.tsx b/frontend/src/bundles/common/pages/not-found/not-found.tsx index 9d2b580bd..be3ba311b 100644 --- a/frontend/src/bundles/common/pages/not-found/not-found.tsx +++ b/frontend/src/bundles/common/pages/not-found/not-found.tsx @@ -4,7 +4,7 @@ import { Heading, } from '~/bundles/common/components/components.js'; -import { Animated404 } from './animated404.js'; +import { Animated404 } from '../../components/animated404/animated404.js'; const NotFound: React.FC = () => { return ( diff --git a/frontend/src/router/routes.tsx b/frontend/src/router/routes.tsx index 7058b845b..8ab4b444b 100644 --- a/frontend/src/router/routes.tsx +++ b/frontend/src/router/routes.tsx @@ -4,7 +4,7 @@ import { AppRoute } from '~/bundles/common/enums/enums.js'; import { NotFound } from '~/bundles/common/pages/not-found/not-found.js'; import { Studio } from '~/bundles/studio/pages/studio.js'; -import { ProtectedRoute } from '../bundles/common/components/protected-route/protected-route.js'; +import { ProtectedRoute } from '../bundles/common/components/components.js'; const routes = [ { From 2ffc1ff6732f25f558b3e56d836e9854485a22a0 Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Sat, 31 Aug 2024 08:08:31 -0400 Subject: [PATCH 12/34] OV-44: * file name format --- .../common/components/animated404/animated404.tsx | 2 +- .../libs/constants/{animation-config.ts => constants.ts} | 0 .../components/protected-route/protected-route.tsx | 5 +++-- frontend/src/router/routes.tsx | 9 +++++++++ 4 files changed, 13 insertions(+), 3 deletions(-) rename frontend/src/bundles/common/components/animated404/libs/constants/{animation-config.ts => constants.ts} (100%) diff --git a/frontend/src/bundles/common/components/animated404/animated404.tsx b/frontend/src/bundles/common/components/animated404/animated404.tsx index 23e0dd927..d312f30da 100644 --- a/frontend/src/bundles/common/components/animated404/animated404.tsx +++ b/frontend/src/bundles/common/components/animated404/animated404.tsx @@ -3,7 +3,7 @@ import { motion } from 'framer-motion'; import { CIRCLE_TRANSITION, CIRCLE_VARIANTS, -} from './libs/constants/animation-config.js'; +} from './libs/constants/constants.js'; const Animated404: React.FC = () => ( = ({ children }) => { - // TODO: When persistence is implemented, the user will be taken from the store. The following line is temporary - const user = true; + const user = useAppSelector((state) => state.auth.user); return user ? children : ; }; diff --git a/frontend/src/router/routes.tsx b/frontend/src/router/routes.tsx index f7499e13d..a72997dc6 100644 --- a/frontend/src/router/routes.tsx +++ b/frontend/src/router/routes.tsx @@ -3,6 +3,7 @@ import { Auth } from '~/bundles/auth/pages/auth.js'; import { ProtectedRoute } from '~/bundles/common/components/components.js'; import { AppRoute } from '~/bundles/common/enums/enums.js'; import { NotFound } from '~/bundles/common/pages/not-found/not-found.js'; +import { Home } from '~/bundles/home/pages/home.js'; import { Studio } from '~/bundles/studio/pages/studio.js'; const routes = [ @@ -18,6 +19,14 @@ const routes = [ path: AppRoute.SIGN_UP, element: , }, + { + path: AppRoute.ROOT, + element: ( + + , + + ), + }, { path: AppRoute.STUDIO, element: ( From 86264209d211bf5d08a889c4190a5c4d8d48a26f Mon Sep 17 00:00:00 2001 From: JKaypa Date: Mon, 2 Sep 2024 18:02:24 -0500 Subject: [PATCH 13/34] OV-135: * refactor icons, convert them to chakra icons type and remove as={FontAwesomeIcons} property --- .../bundles/common/components/components.ts | 1 - .../generate-script-placeholder.tsx | 6 +-- .../components/tab/tab.tsx | 12 ++---- .../video-preview/video-preview.tsx | 11 ++---- .../icons/helper/icon-conversion.helper.ts | 35 ++++++++++++++++- .../src/bundles/common/icons/icon-name.ts | 38 +++++++++---------- .../home/components/video-card/video-card.tsx | 13 +------ .../video-menu/components/mock/menu-mock.tsx | 8 +--- .../components/video-menu/video-menu.tsx | 13 +++---- 9 files changed, 68 insertions(+), 69 deletions(-) diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index 9c54c56a4..6a2c567dd 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -32,7 +32,6 @@ export { Text, VStack, } from '@chakra-ui/react'; -export { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export { FormikProvider as FormProvider } from 'formik'; export { Provider as StoreProvider } from 'react-redux'; export { Outlet as RouterOutlet } from 'react-router-dom'; diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx index 174022892..1cf38836b 100644 --- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx +++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx @@ -1,5 +1,4 @@ import { Icon, Text, VStack } from '@chakra-ui/react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { IconName } from '~/bundles/common/icons/icons.js'; @@ -7,11 +6,10 @@ const GenerateScriptPlaceholder: React.FC = () => { return ( = ({ label, icon }) => { @@ -15,12 +14,7 @@ const Tab: React.FC = ({ label, icon }) => { textAlign="left" _selected={{ backgroundColor: 'gray.300' }} > - + {label} diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx index ae53b30d6..542d88dd5 100644 --- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx +++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx @@ -1,8 +1,8 @@ import { Button, Flex, Icon, Text } from '@chakra-ui/react'; -import { faPlay } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useCallback, useState } from 'react'; +import { IconName } from '~/bundles/common/icons/icons.js'; + import { VideoPreview as VideoPreviewValues, VideoSizeLabel, @@ -39,12 +39,7 @@ const VideoPreview: React.FC = () => { alignItems="center" color="gray.400" > - + {view === VideoPreviewValues.PORTRAIT ? VideoSizeLabel.PORTRAIT diff --git a/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts b/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts index d899d1ba6..98cf81801 100644 --- a/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts +++ b/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts @@ -1,13 +1,44 @@ import { faCircleUser, + faCloudArrowUp, + faEllipsisVertical, + faFileLines, + faFont, faHouse, + faPen, + faPlay, faRightFromBracket, + faScroll, + faT, + faTableColumns, } from '@fortawesome/free-solid-svg-icons'; import { iconConverter } from './icon-converter.helper.js'; +const CircleUserIcon = iconConverter(faCircleUser); +const CloudArrowUpIcon = iconConverter(faCloudArrowUp); +const EllipsisVerticalIcon = iconConverter(faEllipsisVertical); +const FileLinesIcon = iconConverter(faFileLines); +const FontIcon = iconConverter(faFont); const HouseIcon = iconConverter(faHouse); +const PenIcon = iconConverter(faPen); +const PlayIcon = iconConverter(faPlay); const RightFromBracketIcon = iconConverter(faRightFromBracket); -const CircleUserIcon = iconConverter(faCircleUser); +const ScrollIcon = iconConverter(faScroll); +const TIcon = iconConverter(faT); +const TableColumnsIcon = iconConverter(faTableColumns); -export { CircleUserIcon, HouseIcon, RightFromBracketIcon }; +export { + CircleUserIcon, + CloudArrowUpIcon, + EllipsisVerticalIcon, + FileLinesIcon, + FontIcon, + HouseIcon, + PenIcon, + PlayIcon, + RightFromBracketIcon, + ScrollIcon, + TableColumnsIcon, + TIcon, +}; diff --git a/frontend/src/bundles/common/icons/icon-name.ts b/frontend/src/bundles/common/icons/icon-name.ts index a66baeed9..05ce3fa52 100644 --- a/frontend/src/bundles/common/icons/icon-name.ts +++ b/frontend/src/bundles/common/icons/icon-name.ts @@ -5,42 +5,40 @@ import { ViewIcon, ViewOffIcon, } from '@chakra-ui/icons'; -import { - faCloudArrowUp, - faEllipsisVertical, - faFileLines, - faFont, - faPen, - faPlay, - faScroll, - faT, - faTableColumns, -} from '@fortawesome/free-solid-svg-icons'; import { CircleUserIcon, + CloudArrowUpIcon, + EllipsisVerticalIcon, + FileLinesIcon, + FontIcon, HouseIcon, + PenIcon, + PlayIcon, RightFromBracketIcon, + ScrollIcon, + TableColumnsIcon, + TIcon, } from './helper/icon-conversion.helper.js'; const IconName = { - PEN: faPen, + PEN: PenIcon, HOME: HouseIcon, LOG_OUT: RightFromBracketIcon, ARROW_LEFT: ArrowLeftIcon, ARROW_RIGHT: ArrowRightIcon, - FILE_LINES: faFileLines, - PLAY: faPlay, - SCROLL: faScroll, - OPTIONS_VERTICAL: faEllipsisVertical, + FILE_LINES: FileLinesIcon, + PLAY: PlayIcon, + SCROLL: ScrollIcon, + OPTIONS_VERTICAL: EllipsisVerticalIcon, DOWNLOAD: DownloadIcon, VIEW: ViewIcon, VIEW_OFF: ViewOffIcon, AVATAR: CircleUserIcon, - UPLOAD: faCloudArrowUp, - TEMPLATE: faTableColumns, - SCRIPT: faFont, - TEXT: faT, + UPLOAD: CloudArrowUpIcon, + TEMPLATE: TableColumnsIcon, + SCRIPT: FontIcon, + TEXT: TIcon, } as const; export { IconName }; diff --git a/frontend/src/bundles/home/components/video-card/video-card.tsx b/frontend/src/bundles/home/components/video-card/video-card.tsx index e76ec82a4..96ba3209a 100644 --- a/frontend/src/bundles/home/components/video-card/video-card.tsx +++ b/frontend/src/bundles/home/components/video-card/video-card.tsx @@ -1,5 +1,3 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; - import photo from '~/assets/img/photo.png'; import { Box, @@ -43,8 +41,7 @@ const VideoCard: React.FC = () => { _groupHover={{ opacity: 1 }} icon={ } @@ -62,13 +59,7 @@ const VideoCard: React.FC = () => { opacity="0" transition="opacity 0.3s ease" _groupHover={{ opacity: 1 }} - icon={ - - } + icon={} /> 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 index 84d1c00e9..ebbc172f5 100644 --- 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,4 @@ -import { - Flex, - FontAwesomeIcon, - Icon, -} from '~/bundles/common/components/components.js'; +import { Flex, Icon } from '~/bundles/common/components/components.js'; import { IconName } from '~/bundles/common/icons/icons.js'; const TemplatesContent: React.FC = () => ( @@ -13,7 +9,7 @@ const ScriptHeader: React.FC = () => (
Script
- +
); diff --git a/frontend/src/bundles/studio/components/video-menu/video-menu.tsx b/frontend/src/bundles/studio/components/video-menu/video-menu.tsx index a0a13bfd7..201187f58 100644 --- a/frontend/src/bundles/studio/components/video-menu/video-menu.tsx +++ b/frontend/src/bundles/studio/components/video-menu/video-menu.tsx @@ -1,7 +1,4 @@ -import { - FontAwesomeIcon, - Icon, -} from '~/bundles/common/components/components.js'; +import { Icon } from '~/bundles/common/components/components.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; import { IconName } from '~/bundles/common/icons/icons.js'; @@ -45,7 +42,7 @@ const VideoMenu: React.FC = () => { const menuItems: MenuItem[] = [ { label: 'Templates', - icon: , + icon: , onClick: () => handleMenuClick('Templates', ), }, { @@ -55,17 +52,17 @@ const VideoMenu: React.FC = () => { }, { label: 'Script', - icon: , + icon: , onClick: () => handleMenuClick(, ), }, { label: 'Text', - icon: , + icon: , onClick: () => handleMenuClick('Text', ), }, { label: 'Assets', - icon: , + icon: , onClick: () => handleMenuClick('Assets', ), }, ]; From e2bb6268bb56ad7fbeda0c06225b53d617593b37 Mon Sep 17 00:00:00 2001 From: XCODE89 Date: Fri, 6 Sep 2024 08:51:53 -0400 Subject: [PATCH 14/34] OV-44: * updated with next --- frontend/src/routes/routes.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/routes/routes.tsx b/frontend/src/routes/routes.tsx index 30fdc4cac..1e0890b80 100644 --- a/frontend/src/routes/routes.tsx +++ b/frontend/src/routes/routes.tsx @@ -2,6 +2,7 @@ import { App } from '~/app/app.js'; import { Auth } from '~/bundles/auth/pages/auth.js'; import { ProtectedRoute } from '~/bundles/common/components/components.js'; import { AppRoute } from '~/bundles/common/enums/enums.js'; +import { NotFound } from '~/bundles/common/pages/not-found/not-found.js'; import { Home } from '~/bundles/home/pages/home.js'; import { MyAvatar } from '~/bundles/my-avatar/pages/my-avatar.js'; import { Studio } from '~/bundles/studio/pages/studio.js'; @@ -43,6 +44,10 @@ const routes = [ ), }, + { + path: AppRoute.ANY, + element: , + }, ], }, ]; From 07f6331849dd9023ee46448909617c01e446f2b5 Mon Sep 17 00:00:00 2001 From: JKaypa Date: Fri, 6 Sep 2024 08:27:49 -0500 Subject: [PATCH 15/34] OV-187: * fix logout redirection --- frontend/src/bundles/auth/pages/auth.tsx | 6 ++---- .../common/components/protected-route/protected-route.tsx | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/frontend/src/bundles/auth/pages/auth.tsx b/frontend/src/bundles/auth/pages/auth.tsx index deae7cbd2..733072ff6 100644 --- a/frontend/src/bundles/auth/pages/auth.tsx +++ b/frontend/src/bundles/auth/pages/auth.tsx @@ -18,9 +18,7 @@ import { actions as authActions } from '../store/auth.js'; const Auth: React.FC = () => { const dispatch = useAppDispatch(); - const { dataStatus } = useAppSelector(({ auth }) => ({ - dataStatus: auth.dataStatus, - })); + const { dataStatus, user } = useAppSelector(({ auth }) => auth); const { pathname } = useLocation(); const handleSignInSubmit = useCallback( @@ -37,7 +35,7 @@ const Auth: React.FC = () => { [dispatch], ); - if (dataStatus === DataStatus.FULFILLED) { + if (user) { return ; } diff --git a/frontend/src/bundles/common/components/protected-route/protected-route.tsx b/frontend/src/bundles/common/components/protected-route/protected-route.tsx index f47d6b46b..7193218a7 100644 --- a/frontend/src/bundles/common/components/protected-route/protected-route.tsx +++ b/frontend/src/bundles/common/components/protected-route/protected-route.tsx @@ -13,7 +13,7 @@ const ProtectedRoute: React.FC = ({ children }) => { return ; } - if (dataStatus === DataStatus.REJECTED) { + if (!user) { return ; } From c488380a30dbcb588991fcae0640f306a0537341 Mon Sep 17 00:00:00 2001 From: JKaypa Date: Fri, 6 Sep 2024 11:52:07 -0500 Subject: [PATCH 16/34] OV-187: * fix loadcurrentuser call --- frontend/src/app/app.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx index 4d2278bdc..6108e033a 100644 --- a/frontend/src/app/app.tsx +++ b/frontend/src/app/app.tsx @@ -1,13 +1,18 @@ import { actions as authActions } from '~/bundles/auth/store/auth.js'; import { RouterOutlet } from '~/bundles/common/components/components.js'; import { useAppDispatch, useEffect } from '~/bundles/common/hooks/hooks.js'; +import { storage, StorageKey } from '~/framework/storage/storage.js'; const App: React.FC = () => { const dispatch = useAppDispatch(); useEffect(() => { - void dispatch(authActions.loadCurrentUser()); - }); + void storage.has(StorageKey.TOKEN).then((hasToken) => { + if (hasToken) { + void dispatch(authActions.loadCurrentUser()); + } + }); + }, [dispatch]); return ( <> From 2b8a1a48b53b84d346f1148cb9769c1965138fab Mon Sep 17 00:00:00 2001 From: JKaypa Date: Mon, 2 Sep 2024 18:02:24 -0500 Subject: [PATCH 17/34] OV-135: * refactor icons, convert them to chakra icons type and remove as={FontAwesomeIcons} property --- .../bundles/common/components/components.ts | 1 - .../generate-script-placeholder.tsx | 6 +-- .../video-preview/video-preview.tsx | 10 +--- .../icons/helper/icon-conversion.helper.ts | 43 ++++++++++++---- .../src/bundles/common/icons/icon-name.ts | 50 +++++++++---------- .../home/components/video-card/video-card.tsx | 13 +---- .../components/video-menu/video-menu.tsx | 13 ++--- 7 files changed, 68 insertions(+), 68 deletions(-) diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index c069377ae..5757a3047 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -38,7 +38,6 @@ export { Tooltip, VStack, } from '@chakra-ui/react'; -export { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export { FormikProvider as FormProvider } from 'formik'; export { Fragment } from 'react'; export { Provider as StoreProvider } from 'react-redux'; diff --git a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx index 174022892..1cf38836b 100644 --- a/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx +++ b/frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/generate-script-placeholder/generate-script-placeholder.tsx @@ -1,5 +1,4 @@ import { Icon, Text, VStack } from '@chakra-ui/react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { IconName } from '~/bundles/common/icons/icons.js'; @@ -7,11 +6,10 @@ const GenerateScriptPlaceholder: React.FC = () => { return ( { alignItems="center" color="gray.400" > - + {view === VideoPreviewValues.PORTRAIT ? VideoSizeLabel.PORTRAIT diff --git a/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts b/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts index 26dfac4eb..af32407d0 100644 --- a/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts +++ b/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts @@ -1,32 +1,55 @@ import { faBackwardStep, faCircleUser, + faCloudArrowUp, + faEllipsisVertical, faFileLines, + faFont, faForwardStep, faHouse, faPause, + faPen, faPlay, faRightFromBracket, + faScroll, + faT, + faTableColumns, } from '@fortawesome/free-solid-svg-icons'; import { iconConverter } from './icon-converter.helper.js'; -const HouseIcon = iconConverter(faHouse); -const RightFromBracketIcon = iconConverter(faRightFromBracket); const CircleUserIcon = iconConverter(faCircleUser); -const backwardStepIcon = iconConverter(faBackwardStep); -const forwardStepIcon = iconConverter(faForwardStep); -const pauseIcon = iconConverter(faPause); -const playIcon = iconConverter(faPlay); +const BackwardStepIcon = iconConverter(faBackwardStep); +const ForwardStepIcon = iconConverter(faForwardStep); +const PauseIcon = iconConverter(faPause); +const PlayIcon = iconConverter(faPlay); const fileLinesIcon = iconConverter(faFileLines); +const CloudArrowUpIcon = iconConverter(faCloudArrowUp); +const EllipsisVerticalIcon = iconConverter(faEllipsisVertical); +const FileLinesIcon = iconConverter(faFileLines); +const FontIcon = iconConverter(faFont); +const HouseIcon = iconConverter(faHouse); +const PenIcon = iconConverter(faPen); +const RightFromBracketIcon = iconConverter(faRightFromBracket); +const ScrollIcon = iconConverter(faScroll); +const TIcon = iconConverter(faT); +const TableColumnsIcon = iconConverter(faTableColumns); export { - backwardStepIcon, + BackwardStepIcon, CircleUserIcon, + CloudArrowUpIcon, + EllipsisVerticalIcon, + FileLinesIcon, fileLinesIcon, - forwardStepIcon, + FontIcon, + ForwardStepIcon, HouseIcon, - pauseIcon, - playIcon, + PauseIcon, + PenIcon, + PlayIcon, RightFromBracketIcon, + ScrollIcon, + TableColumnsIcon, + TIcon, }; diff --git a/frontend/src/bundles/common/icons/icon-name.ts b/frontend/src/bundles/common/icons/icon-name.ts index f9ba71251..0da14c769 100644 --- a/frontend/src/bundles/common/icons/icon-name.ts +++ b/frontend/src/bundles/common/icons/icon-name.ts @@ -7,50 +7,48 @@ import { ViewIcon, ViewOffIcon, } from '@chakra-ui/icons'; -import { - faCloudArrowUp, - faEllipsisVertical, - faFont, - faPen, - faScroll, - faT, - faTableColumns, -} from '@fortawesome/free-solid-svg-icons'; import { - backwardStepIcon, + BackwardStepIcon, CircleUserIcon, - fileLinesIcon, - forwardStepIcon, + CloudArrowUpIcon, + EllipsisVerticalIcon, + FileLinesIcon, + FontIcon, + ForwardStepIcon, HouseIcon, - pauseIcon, - playIcon, + PauseIcon, + PenIcon, + PlayIcon, RightFromBracketIcon, + ScrollIcon, + TableColumnsIcon, + TIcon, } from './helper/icon-conversion.helper.js'; const IconName = { - PEN: faPen, + PEN: PenIcon, HOME: HouseIcon, LOG_OUT: RightFromBracketIcon, ARROW_LEFT: ArrowLeftIcon, ARROW_RIGHT: ArrowRightIcon, - FILE_LINES: fileLinesIcon, - PLAY: playIcon, - PLAY_STEP_BACK: backwardStepIcon, - PLAY_STEP_NEXT: forwardStepIcon, - PAUSE: pauseIcon, - SCROLL: faScroll, - OPTIONS_VERTICAL: faEllipsisVertical, + PLAY: PlayIcon, + PLAY_STEP_BACK: BackwardStepIcon, + PLAY_STEP_NEXT: ForwardStepIcon, + PAUSE: PauseIcon, + FILE_LINES: FileLinesIcon, + SCROLL: ScrollIcon, + OPTIONS_VERTICAL: EllipsisVerticalIcon, DOWNLOAD: DownloadIcon, VIEW: ViewIcon, VIEW_OFF: ViewOffIcon, AVATAR: CircleUserIcon, - UPLOAD: faCloudArrowUp, - TEMPLATE: faTableColumns, - SCRIPT: faFont, - TEXT: faT, ADD: AddIcon, CLOSE: CloseIcon, + UPLOAD: CloudArrowUpIcon, + TEMPLATE: TableColumnsIcon, + SCRIPT: FontIcon, + TEXT: TIcon, } as const; export { IconName }; diff --git a/frontend/src/bundles/home/components/video-card/video-card.tsx b/frontend/src/bundles/home/components/video-card/video-card.tsx index e76ec82a4..96ba3209a 100644 --- a/frontend/src/bundles/home/components/video-card/video-card.tsx +++ b/frontend/src/bundles/home/components/video-card/video-card.tsx @@ -1,5 +1,3 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; - import photo from '~/assets/img/photo.png'; import { Box, @@ -43,8 +41,7 @@ const VideoCard: React.FC = () => { _groupHover={{ opacity: 1 }} icon={ } @@ -62,13 +59,7 @@ const VideoCard: React.FC = () => { opacity="0" transition="opacity 0.3s ease" _groupHover={{ opacity: 1 }} - icon={ - - } + icon={} /> diff --git a/frontend/src/bundles/studio/components/video-menu/video-menu.tsx b/frontend/src/bundles/studio/components/video-menu/video-menu.tsx index 14df6932d..62bdf10e6 100644 --- a/frontend/src/bundles/studio/components/video-menu/video-menu.tsx +++ b/frontend/src/bundles/studio/components/video-menu/video-menu.tsx @@ -1,7 +1,4 @@ -import { - FontAwesomeIcon, - Icon, -} from '~/bundles/common/components/components.js'; +import { Icon } from '~/bundles/common/components/components.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; import { IconName } from '~/bundles/common/icons/icons.js'; @@ -41,7 +38,7 @@ const VideoMenu: React.FC = () => { const menuItems: MenuItem[] = [ { label: 'Templates', - icon: , + icon: , onClick: () => handleMenuClick('Templates', ), }, { @@ -51,17 +48,17 @@ const VideoMenu: React.FC = () => { }, { label: 'Script', - icon: , + icon: , onClick: () => handleMenuClick('Script', ), }, { label: 'Text', - icon: , + icon: , onClick: () => handleMenuClick('Text', ), }, { label: 'Assets', - icon: , + icon: , onClick: () => handleMenuClick('Assets', ), }, ]; From 1f5052d51a0fd3fa09ff2c11e2ec4d70aa1b993b Mon Sep 17 00:00:00 2001 From: Oleksandra Nedashkivska Date: Mon, 9 Sep 2024 15:30:40 +0300 Subject: [PATCH 18/34] OV-202: + audio player --- .../components/audio-player/audio-player.tsx | 70 +++++++++++++++++++ .../audio-player/constants/constants.ts | 3 + .../audio-player/enums/audio-event.ts | 5 ++ .../components/audio-player/enums/enums.ts | 1 + 4 files changed, 79 insertions(+) create mode 100644 frontend/src/bundles/studio/components/audio-player/audio-player.tsx create mode 100644 frontend/src/bundles/studio/components/audio-player/constants/constants.ts create mode 100644 frontend/src/bundles/studio/components/audio-player/enums/audio-event.ts create mode 100644 frontend/src/bundles/studio/components/audio-player/enums/enums.ts diff --git a/frontend/src/bundles/studio/components/audio-player/audio-player.tsx b/frontend/src/bundles/studio/components/audio-player/audio-player.tsx new file mode 100644 index 000000000..5e54cf3d3 --- /dev/null +++ b/frontend/src/bundles/studio/components/audio-player/audio-player.tsx @@ -0,0 +1,70 @@ +import { getAudioData } from '@remotion/media-utils'; +import { type PlayerRef } from '@remotion/player'; + +import { + Audio, + LibraryPlayer, +} from '~/bundles/common/components/components.js'; +import { useEffect, useRef, useState } from '~/bundles/common/hooks/hooks.js'; + +import { FPS } from './constants/constants.js'; +import { AudioEvent } from './enums/enums.js'; + +type Properties = { + isPlaying: boolean; + audioUrl: string; + handleAudioEnd: () => void; +}; + +const AudioPlayer: React.FC = ({ + isPlaying, + audioUrl, + handleAudioEnd, +}) => { + const playerReference = useRef(null); + + const [durationInFrames, setDurationInFrames] = useState(1); + + useEffect(() => { + if (isPlaying) { + playerReference.current?.play(); + } else { + playerReference.current?.pauseAndReturnToPlayStart(); + } + }, [isPlaying]); + + useEffect(() => { + getAudioData(audioUrl) + .then(({ durationInSeconds }) => { + setDurationInFrames(Math.round(durationInSeconds * FPS)); + }) + .catch(() => { + setDurationInFrames(1); + }); + }, [audioUrl]); + + useEffect(() => { + const player = playerReference.current; + + player?.addEventListener(AudioEvent.ENDED, handleAudioEnd); + + return () => { + player?.removeEventListener(AudioEvent.ENDED, handleAudioEnd); + }; + }, [handleAudioEnd, playerReference]); + + return ( + + ); +}; + +export { AudioPlayer }; diff --git a/frontend/src/bundles/studio/components/audio-player/constants/constants.ts b/frontend/src/bundles/studio/components/audio-player/constants/constants.ts new file mode 100644 index 000000000..8d67fab57 --- /dev/null +++ b/frontend/src/bundles/studio/components/audio-player/constants/constants.ts @@ -0,0 +1,3 @@ +const FPS = 30; + +export { FPS }; diff --git a/frontend/src/bundles/studio/components/audio-player/enums/audio-event.ts b/frontend/src/bundles/studio/components/audio-player/enums/audio-event.ts new file mode 100644 index 000000000..c73a7ba41 --- /dev/null +++ b/frontend/src/bundles/studio/components/audio-player/enums/audio-event.ts @@ -0,0 +1,5 @@ +const AudioEvent = { + ENDED: 'ended', +} as const; + +export { AudioEvent }; diff --git a/frontend/src/bundles/studio/components/audio-player/enums/enums.ts b/frontend/src/bundles/studio/components/audio-player/enums/enums.ts new file mode 100644 index 000000000..b72678ea2 --- /dev/null +++ b/frontend/src/bundles/studio/components/audio-player/enums/enums.ts @@ -0,0 +1 @@ +export { AudioEvent } from './audio-event.js'; From 4211142b3ea63f698d11cfe225317f6d0714f159 Mon Sep 17 00:00:00 2001 From: Oleksandra Nedashkivska Date: Mon, 9 Sep 2024 15:32:15 +0300 Subject: [PATCH 19/34] OV-202: * editScript reducer --- frontend/src/bundles/studio/store/slice.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/frontend/src/bundles/studio/store/slice.ts b/frontend/src/bundles/studio/store/slice.ts index 5e76ea7d9..d3ccd550b 100644 --- a/frontend/src/bundles/studio/store/slice.ts +++ b/frontend/src/bundles/studio/store/slice.ts @@ -86,12 +86,21 @@ const { reducer, actions, name } = createSlice({ state.scripts.push(script); }, - editScript(state, action: PayloadAction>) { - const { id, text } = action.payload; + editScript( + state, + action: PayloadAction< + Required> & Partial