Merge pull request #310 from BinaryStudioAcademy/task/OV-308-add-play…

…er-modal

OV-308: Add player modal

frontend/src/bundles/chat/pages/chat-modal.tsx

@@ -3,7 +3,7 @@ import { useChatCleanup } from '~/bundles/chat/hooks/hooks.js';
 import { actions as chatActions } from '~/bundles/chat/store/chat.js';
 import { type GenerateTextRequestDto } from '~/bundles/chat/types/types.js';
 import {
-    Modal,
+    LibraryModal,
     ModalCloseButton,
     ModalContent,
     ModalOverlay,
@@ -35,25 +35,23 @@ const ChatModal: React.FC<Properties> = ({ isChatOpen, onModalChatClose }) => {
     const { handleCloseChat } = useChatCleanup({ onModalChatClose });
 
     return (
-        <>
-            <Modal
-                closeOnOverlayClick={false}
-                isOpen={isChatOpen}
-                onClose={handleCloseChat}
-                size={'5xl'}
-            >
-                <ModalOverlay />
-                <ModalContent borderRadius={'xl'}>
-                    <ModalCloseButton color="white" />
-                    <Chat
-                        messages={messages}
-                        onSendMessage={handleSendMessage}
-                        headerTitle="GPT4 Script Writer"
-                        headerComment="Your secret to crafting compelling scripts effortlessly!"
-                    />
-                </ModalContent>
-            </Modal>
-        </>
+        <LibraryModal
+            closeOnOverlayClick={false}
+            isOpen={isChatOpen}
+            onClose={handleCloseChat}
+            size="5xl"
+        >
+            <ModalOverlay />
+            <ModalContent borderRadius="xl">
+                <ModalCloseButton color="white" />
+                <Chat
+                    messages={messages}
+                    onSendMessage={handleSendMessage}
+                    headerTitle="GPT4 Script Writer"
+                    headerComment="Your secret to crafting compelling scripts effortlessly!"
+                />
+            </ModalContent>
+        </LibraryModal>
     );
 };
 

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

@@ -5,6 +5,7 @@ export { Input } from './input/input.js';
 export { Link } from './link/link.js';
 export { Loader } from './loader/loader.js';
 export { Logo } from './logo/logo.js';
+export { Modal } from './modal/modal.js';
 export { NotFoundAnimation } from './not-found-animation/not-found-animation.js';
 export { Overlay } from './overlay/overlay.js';
 export { Player } from './player/player.js';
@@ -15,6 +16,7 @@ export { Sidebar } from './sidebar/sidebar.js';
 export { Textarea } from './textarea/textarea.js';
 export { UploadVideo } from './upload-video/upload-video.js';
 export { VideoModal } from './video-modal/video-modal.js';
+export { VideoPlayer } from './video-player/video-player.js';
 export {
     Badge,
     Box,
@@ -37,11 +39,12 @@ export {
     InputGroup,
     InputRightElement,
     Link as LibraryLink,
+    Modal as LibraryModal,
     Menu,
     MenuButton,
     MenuItem,
     MenuList,
-    Modal,
+    ModalBody,
     ModalCloseButton,
     ModalContent,
     ModalOverlay,

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

@@ -0,0 +1,24 @@
+import {
+    LibraryModal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalOverlay,
+} from '~/bundles/common/components/components.js';
+import { type ModalProps } from '~/bundles/common/types/types.js';
+
+import styles from './styles.module.css';
+
+const Modal: React.FC<ModalProps> = ({ children, ...properties }) => {
+    return (
+        <LibraryModal {...properties} isCentered>
+            <ModalOverlay />
+            <ModalContent className={styles['modal-content']}>
+                <ModalCloseButton margin="20px" zIndex={10} />
+                <ModalBody padding={0}>{children}</ModalBody>
+            </ModalContent>
+        </LibraryModal>
+    );
+};
+
+export { Modal };

frontend/src/bundles/common/components/modal/styles.module.css

@@ -0,0 +1,7 @@
+.modal-content {
+    border-radius: 17px;
+    max-width: 90%;
+    max-height: 90%;
+    height: 100%;
+    overflow: auto;
+}

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

@@ -1,3 +1,2 @@
 export { CheckboxForm } from './checkbox-form/checkbox-form.js';
 export { VideoDropzone } from './dropzone/video-dropzone.js';
-export { VideoPlayer } from './video-player/video-player.js';

frontend/src/bundles/common/components/upload-video/styles.module.css

@@ -0,0 +1,27 @@
+.container {
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    max-width: 864px;
+    width: 100%;
+    min-height: 550px;
+    background-color: white;
+    border-radius: 12px;
+    padding: 20px 20px 50px;
+}
+
+.video-player {
+    height: 278px;
+    width: 570px;
+    border: 2px solid transparent;
+    box-sizing: content-box;
+    position: relative;
+    border-radius: 12px;
+    background-color: var(--chakra-colors-gray-200);
+    overflow: hidden;
+    transition: 0.3s;
+}
+
+.video-player:hover {
+    border-color: var(--chakra-colors-background-900);
+}

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

@@ -1,11 +1,9 @@
 import { Button, Flex, Text } from '~/bundles/common/components/components.js';
 import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
 
-import {
-    CheckboxForm,
-    VideoDropzone,
-    VideoPlayer,
-} from './components/components.js';
+import { VideoPlayer } from '../video-player/video-player.js';
+import { CheckboxForm, VideoDropzone } from './components/components.js';
+import styles from './styles.module.css';
 
 const UploadVideo: React.FC = () => {
     const [videoSource, setVideoSource] = useState<string | null>(null);
@@ -19,23 +17,18 @@ const UploadVideo: React.FC = () => {
     }, []);
 
     return (
-        <Flex
-            maxWidth="864px"
-            width="full"
-            backgroundColor="white"
-            minHeight="550px"
-            flexDirection="column"
-            alignItems="center"
-            gap="20px"
-            borderRadius="12px"
-            padding="20px 20px 50px"
-        >
+        <Flex className={styles['container']}>
             <Text color="background.600" variant="title">
                 Upload footage
             </Text>
             {videoSource ? (
                 <>
-                    <VideoPlayer videoSource={videoSource} />
+                    <VideoPlayer
+                        videoSource={videoSource}
+                        className={styles['video-player'] ?? ''}
+                        playerWidth="570px"
+                        playerHeight="278px"
+                    />
                     <CheckboxForm onVideoRemove={handleRemoveVideo} />
                 </>
             ) : (
@@ -45,7 +38,7 @@ const UploadVideo: React.FC = () => {
                         onRemoveVideo={handleRemoveVideo}
                         onSetVideo={handleSetVideo}
                     />
-                    <Button width={'222px'} label={'Next step'} />
+                    <Button width="222px" label="Next step" />
                 </>
             )}
         </Flex>

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

@@ -1,12 +1,5 @@
-import {
-    Modal,
-    ModalBody,
-    ModalCloseButton,
-    ModalContent,
-    ModalOverlay,
-} from '@chakra-ui/react';
-
 import { useChatCleanup } from '~/bundles/chat/hooks/hooks.js';
+import { Modal } from '~/bundles/common/components/components.js';
 
 import { VideoModalContent } from './components/components.js';
 
@@ -21,20 +14,8 @@ const VideoModal: React.FC<Properties> = ({ isOpen, onModalClose }) => {
     });
 
     return (
-        <Modal isOpen={isOpen} onClose={handleCloseChat} isCentered>
-            <ModalOverlay />
-            <ModalContent
-                borderRadius="17px"
-                maxWidth="90%"
-                maxHeight="90%"
-                height="full"
-                overflow="auto"
-            >
-                <ModalCloseButton margin="20px" zIndex={10} />
-                <ModalBody padding={0}>
-                    <VideoModalContent />
-                </ModalBody>
-            </ModalContent>
+        <Modal isOpen={isOpen} onClose={handleCloseChat}>
+            <VideoModalContent />
         </Modal>
     );
 };

frontend/src/bundles/common/components/upload-video/components/video-player/components/control/control.tsx → frontend/src/bundles/common/components/video-player/components/control/control.tsx

@@ -15,7 +15,7 @@ import {
 import {
     type PlayerOptions,
     type VideoDuration,
-} from '~/bundles/common/components/upload-video/components/video-player/libs/types/types.js';
+} from '~/bundles/common/components/video-player/libs/types/types.js';
 import {
     useAnimationFrame,
     useCallback,

frontend/src/bundles/common/components/upload-video/components/video-player/video-player.tsx → frontend/src/bundles/common/components/video-player/video-player.tsx

@@ -2,19 +2,27 @@ import { getVideoMetadata } from '@remotion/media-utils';
 import { type PlayerRef, Player } from '@remotion/player';
 
 import { Box } from '~/bundles/common/components/components.js';
+import { FPS } from '~/bundles/common/constants/constants.js';
 import { useEffect, useRef, useState } from '~/bundles/common/hooks/hooks.js';
 import { notificationService } from '~/bundles/common/services/services.js';
 
 import { Control, UserVideo } from './components/components.js';
-import { FPS } from './libs/constants/constants.js';
 import { ErrorId, ErrorMessage, ErrorTitle } from './libs/enums/enums.js';
 import { type VideoDuration } from './libs/types/types.js';
 
 type Properties = {
     videoSource: string;
+    className: string;
+    playerWidth: string;
+    playerHeight: string;
 };
 
-const VideoPlayer: React.FC<Properties> = ({ videoSource }) => {
+const VideoPlayer: React.FC<Properties> = ({
+    videoSource,
+    className,
+    playerWidth,
+    playerHeight,
+}) => {
     const videoPlayerReference = useRef<PlayerRef>(null);
 
     const [duration, setDuration] = useState<VideoDuration>({
@@ -43,20 +51,7 @@ const VideoPlayer: React.FC<Properties> = ({ videoSource }) => {
     }, [videoSource]);
 
     return (
-        <Box
-            height="278px"
-            width="570px"
-            border="2px solid transparent"
-            boxSizing="content-box"
-            position="relative"
-            borderRadius="12px"
-            backgroundColor="gray.200"
-            overflow="hidden"
-            transition="0.3s"
-            _hover={{
-                borderColor: 'background.900',
-            }}
-        >
+        <Box className={className}>
             <Player
                 component={UserVideo}
                 inputProps={{ src: videoSource }}
@@ -66,8 +61,8 @@ const VideoPlayer: React.FC<Properties> = ({ videoSource }) => {
                 compositionHeight={1080}
                 fps={FPS}
                 style={{
-                    width: '570px',
-                    height: '278px',
+                    width: playerWidth,
+                    height: playerHeight,
                 }}
             />
 

frontend/src/bundles/common/types/types.ts

@@ -2,6 +2,7 @@ export { type AsyncThunkConfig } from './async-thunk-config.type.js';
 export { type RootState } from './root-state.type.js';
 export { type VideoPreview } from './video-preview.type.js';
 export { type VideoScript } from './video-script.type.js';
+export { type ModalProps } from '@chakra-ui/react';
 export {
     type ServerErrorDetail,
     type ServerErrorResponse,

frontend/src/bundles/home/components/player-modal/player-modal.tsx

@@ -0,0 +1,24 @@
+import { Modal, VideoPlayer } from '~/bundles/common/components/components.js';
+
+import styles from './style.module.css';
+
+type Properties = {
+    videoUrl: string;
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+const PlayerModal: React.FC<Properties> = ({ videoUrl, isOpen, onClose }) => {
+    return (
+        <Modal isOpen={isOpen} onClose={onClose}>
+            <VideoPlayer
+                videoSource={videoUrl}
+                className={styles['video-player'] ?? ''}
+                playerWidth="100%"
+                playerHeight="100%"
+            />
+        </Modal>
+    );
+};
+
+export { PlayerModal };

frontend/src/bundles/home/components/player-modal/style.module.css

@@ -0,0 +1,6 @@
+.video-player {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    background-color: var(--chakra-colors-gray-200);
+}

frontend/src/bundles/home/components/video-card/styles.module.css

@@ -1,6 +1,28 @@
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    background-color: rgba(53, 57, 154, 0.3);
+}
+
 .menu-button {
     position: absolute;
     background-color: white;
     top: 5px;
     right: 5px;
 }
+
+.action-button {
+    position: absolute;
+    background-color: white;
+    top: 50%;
+    left: calc(50% - 12.5px);
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}