Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/next' into task/OV-162-play-butt…
Browse files Browse the repository at this point in the history
…on-control-cursor
  • Loading branch information
Sanchousina committed Sep 11, 2024
2 parents 6a94555 + 12278ef commit 6cc92ea
Show file tree
Hide file tree
Showing 22 changed files with 458 additions and 140 deletions.
13 changes: 11 additions & 2 deletions frontend/src/app/app.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,22 @@
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());
});
const verifyTokenAndLoadUser = async (): Promise<void> => {
const hasToken = await storage.has(StorageKey.TOKEN);

if (hasToken) {
void dispatch(authActions.loadCurrentUser());
}
};

void verifyTokenAndLoadUser();
}, [dispatch]);
return (
<>
<RouterOutlet />
Expand Down
6 changes: 2 additions & 4 deletions frontend/src/bundles/auth/pages/auth.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,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(
Expand All @@ -42,7 +40,7 @@ const Auth: React.FC = () => {
[dispatch],
);

if (dataStatus === DataStatus.FULFILLED) {
if (user) {
return <Navigate to={AppRoute.ROOT} replace />;
}

Expand Down
5 changes: 4 additions & 1 deletion frontend/src/bundles/common/components/components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,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 { NotFoundAnimation } from './not-found-animation/not-found-animation.js';
export { Overlay } from './overlay/overlay.js';
export { Player } from './player/player.js';
export { ProtectedRoute } from './protected-route/protected-route.js';
Expand Down Expand Up @@ -40,14 +41,16 @@ export {
SliderThumb,
SliderTrack,
Spacer,
Spinner,
Stack,
Tab,
Text,
Tooltip,
VStack,
} from '@chakra-ui/react';
export { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
export { Player as LibraryPlayer } from '@remotion/player';
export { FormikProvider as FormProvider } from 'formik';
export { Fragment } from 'react';
export { Provider as StoreProvider } from 'react-redux';
export { Navigate, Outlet as RouterOutlet } from 'react-router-dom';
export { Audio } from 'remotion';
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
const CIRCLE_VARIANTS = {
animate: {
r: [1, 5, 10, 15, 20],
opacity: [0.9, 0.3, 0.2, 0.1, 0],
},
};

const CIRCLE_TRANSITION = {
repeat: Number.POSITIVE_INFINITY,
ease: 'easeOut',
duration: 2,
};

export { CIRCLE_TRANSITION, CIRCLE_VARIANTS };
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { motion } from 'framer-motion';

import {
CIRCLE_TRANSITION,
CIRCLE_VARIANTS,
} from '../not-found-animation/constants/constants.js';

const NotFoundAnimation: React.FC = () => (
<motion.svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 82.7"
width="500"
height="400"
aria-hidden="true"
>
<g>
<text
transform="matrix(1.2187 0 0 1 13 75.6393)"
fill="white"
fontSize="83"
fontFamily="FootlightMTLight"
aria-hidden="true"
>
4
</text>
<text
transform="matrix(1.2187 0 0 1 133 73.6393)"
fill="white"
fontSize="83"
fontFamily="FootlightMTLight"
aria-hidden="true"
>
4
</text>
</g>
<g>
<motion.path
d="M81.8,29.2c4.1-5.7,10.7-9.4,18.3-9.4c6.3,0,12.1,2.7,16.1,6.9c0.6-0.4,1.1-0.7,1.7-1.1
c-4.4-4.8-10.8-7.9-17.8-7.9c-8.3,0-15.6,4.2-20,10.6C80.7,28.5,81.3,28.8,81.8,29.2z"
fill="white"
aria-hidden="true"
/>
<motion.path
d="M118.1,53.7c-4,5.7-10.7,9.5-18.2,9.5c-6.3,0-12.1-2.6-16.2-6.8c-0.6,0.4-1.1,0.7-1.7,1.1
c4.4,4.8,10.8,7.8,17.9,7.8c8.3,0,15.6-4.3,19.9-10.7C119.2,54.5,118.6,54.1,118.1,53.7z"
fill="white"
aria-hidden="true"
/>
<motion.circle
cx="100"
cy="41"
r="1"
fill="white"
variants={CIRCLE_VARIANTS}
animate="animate"
transition={CIRCLE_TRANSITION}
/>
</g>
</motion.svg>
);

export { NotFoundAnimation };
2 changes: 1 addition & 1 deletion frontend/src/bundles/common/components/overlay/overlay.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Overlay = ({ isOpen, children }: Properties): JSX.Element => {
return (
<Fade in={isOpen} hidden={!isOpen} className={styles['overlay']}>
<Flex
background="shadow.700"
background="background.600"
color="white"
justifyContent="center"
alignItems="center"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import { Loader, Navigate } from '~/bundles/common/components/components.js';
import {
Loader,
Navigate,
Overlay,
} from '~/bundles/common/components/components.js';
import { AppRoute, DataStatus } from '~/bundles/common/enums/enums.js';
import { useAppSelector } from '~/bundles/common/hooks/hooks.js';

Expand All @@ -10,10 +14,14 @@ const ProtectedRoute: React.FC<Properties> = ({ children }) => {
const { user, dataStatus } = useAppSelector((state) => state.auth);

if (dataStatus === DataStatus.PENDING) {
return <Loader />;
return (
<Overlay isOpen>
<Loader />
</Overlay>
);
}

if (dataStatus === DataStatus.REJECTED) {
if (!user) {
return <Navigate to={AppRoute.SIGN_IN} replace />;
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import { Icon, Text, VStack } from '@chakra-ui/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { IconName } from '~/bundles/common/icons/icons.js';

const GenerateScriptPlaceholder: React.FC = () => {
return (
<VStack w="full" p="40px" gap="10px">
<Icon
as={FontAwesomeIcon}
icon={IconName.SCROLL}
as={IconName.SCROLL}
color="brand.secondary.300"
opacity="0.5"
size="2x"
boxSize={10}
/>
<Text
color="gray.400"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,28 @@
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 { Button } from '@chakra-ui/react';

import {
Flex,
Icon,
Link,
Text,
} from '~/bundles/common/components/components.js';
import { AppRoute } from '~/bundles/common/enums/enums.js';
import {
useAppDispatch,
useCallback,
useState,
} from '~/bundles/common/hooks/hooks.js';
import { IconName } from '~/bundles/common/icons/icons.js';
import { type VideoPreview as VideoPreviewT } from '~/bundles/common/types/types.js';
import { actions as studioActions } from '~/bundles/studio/store/studio.js';

import {
VideoPreview as VideoPreviewValues,
VideoSizeLabel,
} from './libs/enums/enums.js';

const VideoPreview: React.FC = () => {
const dispatch = useAppDispatch();
const [view, setView] = useState<VideoPreviewT>(
VideoPreviewValues.PORTRAIT,
);
Expand All @@ -23,6 +35,10 @@ const VideoPreview: React.FC = () => {
setView(VideoPreviewValues.LANDSCAPE);
}, []);

const handleClick = useCallback((): void => {
dispatch(studioActions.setVideoSize(view));
}, [dispatch, view]);

return (
<Flex flexDirection="column" alignItems="center">
<Flex
Expand All @@ -40,12 +56,7 @@ const VideoPreview: React.FC = () => {
alignItems="center"
color="gray.400"
>
<Icon
as={FontAwesomeIcon}
icon={faPlay}
padding="5px"
height="16px"
/>
<Icon as={IconName.PLAY} padding="5px" height="16px" />
<Text color="gray.400">
{view === VideoPreviewValues.PORTRAIT
? VideoSizeLabel.PORTRAIT
Expand All @@ -55,22 +66,28 @@ const VideoPreview: React.FC = () => {
</Flex>

<Flex justifyContent="center" gap={4}>
<Button
backgroundColor="brand.secondary.300"
color="white"
onMouseEnter={handleSetLandscapeView}
_hover={{ bg: 'brand.secondary.600' }}
>
Use landscape
</Button>
<Button
backgroundColor="brand.secondary.300"
color="white"
onMouseEnter={handleSetPortraitView}
_hover={{ bg: 'brand.secondary.600' }}
>
Use portrait
</Button>
<Link to={AppRoute.STUDIO}>
<Button
backgroundColor="brand.secondary.300"
color="white"
onMouseEnter={handleSetLandscapeView}
onClick={handleClick}
_hover={{ bg: 'brand.secondary.600' }}
>
Use landscape
</Button>
</Link>
<Link to={AppRoute.STUDIO}>
<Button
backgroundColor="brand.secondary.300"
color="white"
onMouseEnter={handleSetPortraitView}
onClick={handleClick}
_hover={{ bg: 'brand.secondary.600' }}
>
Use portrait
</Button>
</Link>
</Flex>
</Flex>
);
Expand Down
71 changes: 46 additions & 25 deletions frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,64 @@ import {
faBackwardStep,
faCircleUser,
faCloudArrowDown,
faCloudArrowUp,
faEllipsisVertical,
faFileLines,
faFont,
faForwardStep,
faHouse,
faPause,
faPen,
faPlay,
faRightFromBracket,
faScroll,
faStop,
faT,
faTableColumns,
faVolumeHigh,
faVolumeOff,
} 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 fileLinesIcon = iconConverter(faFileLines);

const CloudArrowDownIcon = iconConverter(faCloudArrowDown);
const VolumeHighIcon = iconConverter(faVolumeHigh);
const VolumeOffIcon = iconConverter(faVolumeOff);
const FileLinesIcon = iconConverter(faFileLines);
const CircleUser = iconConverter(faCircleUser);
const BackwardStep = iconConverter(faBackwardStep);
const FileLines = iconConverter(faFileLines);
const CloudArrowUp = iconConverter(faCloudArrowUp);
const EllipsisVertical = iconConverter(faEllipsisVertical);
const Font = iconConverter(faFont);
const House = iconConverter(faHouse);
const Pen = iconConverter(faPen);
const Play = iconConverter(faPlay);
const RightFromBracket = iconConverter(faRightFromBracket);
const Scroll = iconConverter(faScroll);
const T = iconConverter(faT);
const TableColumns = iconConverter(faTableColumns);
const ForwardStep = iconConverter(faForwardStep);
const Pause = iconConverter(faPause);
const CloudArrowDown = iconConverter(faCloudArrowDown);
const VolumeHigh = iconConverter(faVolumeHigh);
const VolumeOff = iconConverter(faVolumeOff);
const Stop = iconConverter(faStop);

export {
backwardStepIcon,
CircleUserIcon,
CloudArrowDownIcon,
FileLinesIcon,
fileLinesIcon,
forwardStepIcon,
HouseIcon,
pauseIcon,
playIcon,
RightFromBracketIcon,
VolumeHighIcon,
VolumeOffIcon,
BackwardStep,
CircleUser,
CloudArrowDown,
CloudArrowUp,
EllipsisVertical,
FileLines,
Font,
ForwardStep,
House,
Pause,
Pen,
Play,
RightFromBracket,
Scroll,
Stop,
T,
TableColumns,
VolumeHigh,
VolumeOff,
};
Loading

0 comments on commit 6cc92ea

Please sign in to comment.