OV-18: add videomodal component

frontend/package.json

@@ -27,9 +27,12 @@
         "vite": "5.4.0"
     },
     "dependencies": {
+        "@chakra-ui/icons": "2.1.1",
         "@chakra-ui/react": "2.8.2",
         "@emotion/react": "11.13.0",
         "@emotion/styled": "11.13.0",
+        "@fortawesome/free-solid-svg-icons": "6.6.0",
+        "@fortawesome/react-fontawesome": "0.2.2",
         "@reduxjs/toolkit": "2.2.7",
         "formik": "2.4.6",
         "framer-motion": "11.3.24",

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 { RouterProvider } from './router-provider/router-provider.js';
+export { VideoModal } from './video-modal/video-modal.js';
 export {
     Box,
     Circle,

frontend/src/bundles/common/components/video-modal/components/components.ts

@@ -0,0 +1 @@
+export { VideoModalContent } from './video-modal-content/video-modal-content.js';

frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/components.ts

@@ -0,0 +1,2 @@
+export { Tab } from './tab/tab.js';
+export { VideoPreview } from './video-preview/video-preview.js';

frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/tab/tab.tsx

@@ -0,0 +1,29 @@
+import { Icon, Tab as ChakraTab } from '@chakra-ui/react';
+import { type IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+type Properties = {
+    label: string;
+    icon: IconDefinition;
+};
+
+const Tab = ({ label, icon }: Properties): JSX.Element => {
+    return (
+        <ChakraTab
+            justifyContent="stretch"
+            borderRadius="10px"
+            textAlign="left"
+            _selected={{ backgroundColor: 'gray.300' }}
+        >
+            <Icon
+                as={FontAwesomeIcon}
+                icon={icon}
+                padding="5px"
+                height="16px"
+            />{' '}
+            {label}
+        </ChakraTab>
+    );
+};
+
+export { Tab };

frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/enums.ts

@@ -0,0 +1,2 @@
+export { VideoPreview } from './video-preview.enum.js';
+export { VideoSizeLabel } from './video-sizes.enum.js';

frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/video-preview.enum.ts

@@ -0,0 +1,6 @@
+const VideoPreview = {
+    PORTRAIT: 'portrait',
+    LANDSCAPE: 'landscape',
+} as const;
+
+export { VideoPreview };

frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/enums/video-sizes.enum.ts

@@ -0,0 +1,6 @@
+const VideoSizeLabel = {
+    PORTRAIT: '1080 x 1920',
+    LANDSCAPE: '1920 x 1080',
+} as const;
+
+export { VideoSizeLabel };

frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/types/types.ts

@@ -0,0 +1 @@
+export { type VideoPreview } from './video-preview.type.js';

frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/libs/types/video-preview.type.ts

@@ -0,0 +1,3 @@
+type VideoPreview = 'portrait' | 'landscape';
+
+export { type VideoPreview };

frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx

@@ -0,0 +1,78 @@
+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 {
+    VideoPreview as VideoPreviewValues,
+    VideoSizeLabel,
+} from './libs/enums/enums.js';
+import { type VideoPreview as VideoPreviewType } from './libs/types/types.js';
+
+const VideoPreview = (): JSX.Element => {
+    const [view, setView] = useState<VideoPreviewType>(
+        VideoPreviewValues.PORTRAIT,
+    );
+
+    const handleSetPortraitView = useCallback((): void => {
+        setView(VideoPreviewValues.PORTRAIT);
+    }, []);
+
+    const handleSetLandscapeView = useCallback((): void => {
+        setView(VideoPreviewValues.LANDSCAPE);
+    }, []);
+
+    return (
+        <Flex flexDirection="column" alignItems="center">
+            <Flex
+                width={view === VideoPreviewValues.PORTRAIT ? '250px' : '720px'}
+                height="444px"
+                borderWidth="1px"
+                borderColor="gray.300"
+                borderRadius="md"
+                justifyContent="center"
+                alignItems="center"
+                mb={4}
+            >
+                <Flex
+                    flexDirection="column"
+                    alignItems="center"
+                    color="gray.400"
+                >
+                    <Icon
+                        as={FontAwesomeIcon}
+                        icon={faPlay}
+                        padding="5px"
+                        height="16px"
+                    />
+                    <Text color="gray.400">
+                        {view === VideoPreviewValues.PORTRAIT
+                            ? VideoSizeLabel.PORTRAIT
+                            : VideoSizeLabel.LANDSCAPE}
+                    </Text>
+                </Flex>
+            </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>
+            </Flex>
+        </Flex>
+    );
+};
+
+export { VideoPreview };

frontend/src/bundles/common/components/video-modal/components/video-modal-content/video-modal-content.tsx

@@ -0,0 +1,29 @@
+import { TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import { faPlay } from '@fortawesome/free-solid-svg-icons/faPlay';
+
+import { Tab, VideoPreview } from './components/components.js';
+
+const VideoModalContent = (): JSX.Element => {
+    return (
+        <Tabs orientation="vertical" variant="unstyled" height="full">
+            <TabList
+                backgroundColor="gray.100"
+                padding="20px 20px 20px"
+                minWidth="290px"
+            >
+                <Tab icon={faPlay} label="Start from scratch" />
+            </TabList>
+            <TabPanels
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <TabPanel>
+                    <VideoPreview />
+                </TabPanel>
+            </TabPanels>
+        </Tabs>
+    );
+};
+
+export { VideoModalContent };

frontend/src/bundles/common/components/video-modal/video-modal.tsx

@@ -0,0 +1,44 @@
+import {
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalHeader,
+    ModalOverlay,
+} from '@chakra-ui/react';
+
+import { VideoModalContent } from './components/components.js';
+
+type Properties = {
+    isOpen: boolean;
+    onModalClose: () => void;
+};
+
+const VideoModal = ({ isOpen, onModalClose }: Properties): JSX.Element => {
+    return (
+        <Modal isOpen={isOpen} onClose={onModalClose} isCentered>
+            <ModalOverlay />
+            <ModalContent
+                borderRadius="17px"
+                maxWidth="90%"
+                maxHeight="90%"
+                height="full"
+                overflow="auto"
+            >
+                <ModalHeader
+                    backgroundColor="gray.100"
+                    width="290px"
+                    padding="33px 44px 0px"
+                >
+                    Create video
+                </ModalHeader>
+                <ModalCloseButton margin="20px" />
+                <ModalBody padding="0px">
+                    <VideoModalContent />
+                </ModalBody>
+            </ModalContent>
+        </Modal>
+    );
+};
+
+export { VideoModal };