Merge pull request #203 from BinaryStudioAcademy/task/OV-147-Create-c…

…reate-avatar-page

OV-147: Create create avatar page

frontend/src/bundles/auth/components/common/form-header/form-header.module.css

@@ -0,0 +1,14 @@
+.logo {
+    margin-bottom: 50px;
+}
+
+.heading {
+    color: white;
+    margin-bottom: 6px;
+    font-size: 30px;
+}
+
+.text {
+    margin-bottom: 24px;
+    font-size: 14px;
+}

frontend/src/bundles/common/components/components.ts

@@ -44,6 +44,7 @@ export {
     Input as LibraryInput,
     Link as LibraryLink,
     Modal as LibraryModal,
+    ListItem,
     Menu,
     MenuButton,
     MenuItem,
@@ -67,6 +68,7 @@ export {
     Tabs,
     Text,
     Tooltip,
+    UnorderedList,
     VStack,
 } from '@chakra-ui/react';
 export { Player as LibraryPlayer } from '@remotion/player';

frontend/src/bundles/common/components/header/header.module.css

@@ -0,0 +1,19 @@
+.header {
+    height: 75px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: var(--chakra-colors-background-900);
+    box-shadow: var(--chakra-shadows-md);
+    z-index: 100;
+    padding: var(--chakra-space-4);
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logoText {
+    font-size: var(--chakra-fontSizes-xl);
+    font-weight: var(--chakra-fontWeights-lighter);
+    color: var(--chakra-colors-white);
+}

frontend/src/bundles/common/components/sidebar/sidebar.module.css

@@ -0,0 +1,38 @@
+.sidebarContainer {
+    background-color: var(--chakra-colors-background-900);
+    height: calc(100vh - 75px);
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 10px;
+    padding-bottom: 20px;
+}
+
+.userBox {
+    margin-bottom: 30px;
+}
+
+.contentBox {
+    flex: 1;
+}
+
+.sidebarItem {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 1rem;
+    font-weight: bold;
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.itemJustifyCenter {
+    justify-content: center;
+}
+
+.itemJustifyStart {
+    justify-content: flex-start;
+}

frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/hooks/hooks.ts

@@ -0,0 +1 @@
+export { useAnimationFrame } from './use-animation-frame.js';

frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/hooks/use-animation-frame.ts

@@ -0,0 +1,29 @@
+import {
+    useCallback,
+    useEffect,
+    useRef,
+} from '~/bundles/common/hooks/hooks.js';
+
+const useAnimationFrame = (
+    nextAnimationFrameHandler: () => void,
+    shouldAnimate = true,
+): void => {
+    const frame = useRef(0);
+
+    const animate = useCallback((): void => {
+        nextAnimationFrameHandler();
+        frame.current = requestAnimationFrame(animate);
+    }, [nextAnimationFrameHandler]);
+
+    useEffect(() => {
+        if (shouldAnimate) {
+            frame.current = requestAnimationFrame(animate);
+        } else {
+            cancelAnimationFrame(frame.current);
+        }
+
+        return (): void => cancelAnimationFrame(frame.current);
+    }, [animate, shouldAnimate]);
+};
+
+export { useAnimationFrame };

frontend/src/bundles/common/components/video-modal/video-modal.module.css

@@ -0,0 +1,108 @@
+.previewContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.previewBox {
+    height: 444px;
+    border-width: 1px;
+    border-color: var(--chakra-colors-gray-300);
+    border-radius: var(--chakra-radii-md);
+    justify-content: center;
+    align-items: center;
+    margin-bottom: var(--chakra-space-4);
+}
+
+.previewInnerBox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--chakra-colors-gray-400);
+}
+
+.previewIcon {
+    padding: 5px;
+    height: 16px;
+}
+
+.previewText {
+    color: var(--chakra-colors-gray-400);
+}
+
+.previewButtonContainer {
+    display: flex;
+    justify-content: center;
+    gap: var(--chakra-space-4);
+}
+
+.previewButton {
+    background-color: var(--chakra-colors-brand-secondary-300);
+    color: white;
+}
+
+.previewButton:hover {
+    background-color: var(--chakra-colors-brand-secondary-600);
+}
+
+.scriptFormContainer {
+    width: 256px;
+    margin-top: 20px;
+}
+
+.scriptFormTextareaTopic {
+    height: 84px;
+}
+
+.scriptFormTextareaAdditionalInfo {
+    height: 64px;
+}
+
+.scriptPlaceholderContainer {
+    width: 100%;
+    padding: 40px;
+    gap: 10px;
+}
+
+.scriptPlaceholderIcon {
+    color: var(--chakra-colors-brand-secondary-300);
+    opacity: 0.5;
+    font-size: 2rem;
+}
+
+.scriptPlaceholderText {
+    color: var(--chakra-colors-gray-400);
+    width: 40%;
+    min-width: 175px;
+    text-align: center;
+    font-style: italic;
+}
+.scriptViewHeading {
+    color: var(--chakra-colors-typography-900);
+    padding: 33px 0px 20px;
+}
+
+.scriptViewTabList {
+    width: max-content;
+    background-color: var(--chakra-colors-gray-100);
+    border-width: 1px;
+    border-radius: var(--chakra-radii-md);
+    padding: var(--chakra-space-1);
+    gap: 10px;
+}
+
+.scriptViewTab {
+    border-radius: var(--chakra-radii-md);
+    padding-left: var(--chakra-space-4);
+    padding-right: var(--chakra-space-4);
+    padding-top: var(--chakra-space-1);
+    padding-bottom: var(--chakra-space-1);
+}
+
+.scriptViewTabPanel {
+    padding: 0;
+}
+
+.scriptViewHStack {
+    justify-content: space-between;
+}

frontend/src/bundles/common/enums/app-route.enum.ts

@@ -5,6 +5,7 @@ const AppRoute = {
     STUDIO: '/studio',
     MY_AVATAR: '/my-avatar',
     ANY: '*',
+    CREATE_AVATAR: '/create-avatar',
 } as const;
 
 export { AppRoute };

frontend/src/bundles/common/icons/icon-name.ts

@@ -2,6 +2,7 @@ import {
     AddIcon,
     ArrowLeftIcon,
     ArrowRightIcon,
+    CheckCircleIcon,
     CloseIcon,
     DownloadIcon,
     ViewIcon,
@@ -58,6 +59,7 @@ const IconName = {
     TEXT: T,
     ADD: AddIcon,
     CLOSE: CloseIcon,
+    CHECK_CIRCLE: CheckCircleIcon,
     OPEN_AI: OpenAi,
     LOGO: Logo,
     LOGO_TEXT: LogoText,

frontend/src/bundles/create-avatar/components/components.ts

@@ -0,0 +1 @@
+export { Instruction } from './instruction/instruction.js';

frontend/src/bundles/create-avatar/components/instruction-list/instruction-list.tsx

@@ -0,0 +1,44 @@
+import {
+    Box,
+    Flex,
+    Icon,
+    ListItem,
+    Text,
+    UnorderedList,
+} from '~/bundles/common/components/components.js';
+import { IconName } from '~/bundles/common/icons/icons.js';
+
+import styles from './styles.module.css';
+
+interface InstructionListProperties {
+    color: string;
+    listItems: string[];
+    title: string;
+}
+
+const InstructionList: React.FC<InstructionListProperties> = ({
+    color,
+    listItems,
+    title,
+}) => (
+    <Box>
+        <Flex gap="5px" marginBottom="30px">
+            <Icon
+                className={styles['icon']}
+                boxSize={5}
+                as={IconName.CHECK_CIRCLE}
+                color={color}
+            />
+            <Text as="span" color={color} variant="bodySmall">
+                {title}
+            </Text>
+        </Flex>
+        <UnorderedList maxWidth="300px">
+            {listItems.map((item, index) => (
+                <ListItem key={index}>{item}</ListItem>
+            ))}
+        </UnorderedList>
+    </Box>
+);
+
+export { InstructionList };

frontend/src/bundles/create-avatar/components/instruction-list/styles.module.css

@@ -0,0 +1,4 @@
+.icon {
+    border-radius: 50%;
+    background-color: white;
+}

frontend/src/bundles/create-avatar/components/instruction/instruction.tsx

@@ -0,0 +1,45 @@
+import { Button, Flex } from '~/bundles/common/components/components.js';
+
+import { InstructionList } from '../instruction-list/instruction-list.js';
+import styles from './styles.module.css';
+
+const screenshotListItems = [
+    'At least 5 minutes of footage',
+    'High resolution camera',
+    'Well-lit quiet environment',
+    'Keep your head centered in the frame',
+    'Ensure face visibility; do not cover your mouth',
+    'Use a tripod or stabilize your phone to avoid shaking',
+];
+
+const avoidListItems = [
+    'Stitches or cuts of your footage',
+    'Talking without pauses',
+    'Fast head movements',
+    'Loud background noise like music',
+    'Shadows or overexposure on your face',
+    'Diverting your gaze or looking around',
+    'Hand gestures above the chest or pointing gestures',
+];
+
+const Instruction: React.FC = () => {
+    return (
+        <Flex className={styles['flex-container']}>
+            <Flex className={styles['inner-flex']}>
+                <InstructionList
+                    color="brand.secondary.50"
+                    listItems={screenshotListItems}
+                    title={'Screenshots'}
+                />
+                <InstructionList
+                    color="brand.secondary.900"
+                    listItems={avoidListItems}
+                    title={'Things to avoid'}
+                />
+            </Flex>
+            <Button label="Next step" width="220px" />
+        </Flex>
+    );
+};
+
+export { Instruction };

frontend/src/bundles/create-avatar/components/instruction/styles.module.css

@@ -0,0 +1,16 @@
+.flex-container {
+    flex-direction: column;
+    background-color: white;
+    padding: 30px;
+    border-radius: 10px;
+    align-items: center;
+    gap: 50px;
+    padding-bottom: 80px;
+}
+
+.inner-flex {
+    color: var(--chakra-colors-typography-600);
+    font-size: 14px;
+    justify-content: center;
+    gap: 40px;
+}

frontend/src/bundles/create-avatar/pages/create-avatar.tsx

@@ -0,0 +1,16 @@
+import { Box } from '~/bundles/common/components/components.js';
+
+import { Instruction } from '../components/components.js';
+import styles from './styles.module.css';
+
+const CreateAvatar: React.FC = () => {
+    return (
+        <Box className={styles['container']}>
+            <Box className={styles['inner-container']}>
+                <Instruction />
+            </Box>
+        </Box>
+    );
+};
+
+export { CreateAvatar };

frontend/src/bundles/create-avatar/pages/styles.module.css

@@ -0,0 +1,11 @@
+.container {
+    background-color: var(--chakra-colors-background-50);
+    height: calc(100vh - 75px);
+    padding: 50px;
+}
+
+.inner-container {
+    max-width: 870px;
+    margin-left: auto;
+    margin-right: auto;
+}