From dc3950b4bcc7c1b3f7bcfacc6631e31abb85665b Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Mon, 16 Sep 2024 12:15:20 +0300
Subject: [PATCH 1/4] OV-308: * replace video player

---
 .../components/upload-video/components/components.ts     | 1 -
 .../common/components/upload-video/upload-video.tsx      | 9 +++------
 .../video-player/components/components.ts                | 0
 .../video-player/components/control/control.tsx          | 2 +-
 .../components/control/libs/constants/constants.ts       | 0
 .../components/control/libs/constants/max-percent.ts     | 0
 .../components/control/libs/constants/max-volume.ts      | 0
 .../components/control/libs/constants/min-volume.ts      | 0
 .../video-player/components/control/libs/enums/enums.ts  | 0
 .../components/control/libs/enums/video-event.ts         | 0
 .../components/control/libs/helpers/get-time.ts          | 0
 .../components/control/libs/helpers/helpers.ts           | 0
 .../video-player/components/video/user-video.tsx         | 0
 .../components => }/video-player/libs/enums/enums.ts     | 0
 .../components => }/video-player/libs/enums/error-id.ts  | 0
 .../video-player/libs/enums/error-message.ts             | 0
 .../video-player/libs/enums/error-title.ts               | 0
 .../video-player/libs/types/player-options.ts            | 0
 .../components => }/video-player/libs/types/types.ts     | 0
 .../video-player/libs/types/video-duration.type.ts       | 0
 .../components => }/video-player/video-player.tsx        | 2 +-
 .../video-player/libs => }/constants/constants.ts        | 0
 .../video-player/libs => }/constants/fps.constant.ts     | 0
 23 files changed, 5 insertions(+), 9 deletions(-)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/components/components.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/components/control/control.tsx (98%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/components/control/libs/constants/constants.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/components/control/libs/constants/max-percent.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/components/control/libs/constants/max-volume.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/components/control/libs/constants/min-volume.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/components/control/libs/enums/enums.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/components/control/libs/enums/video-event.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/components/control/libs/helpers/get-time.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/components/control/libs/helpers/helpers.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/components/video/user-video.tsx (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/libs/enums/enums.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/libs/enums/error-id.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/libs/enums/error-message.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/libs/enums/error-title.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/libs/types/player-options.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/libs/types/types.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/libs/types/video-duration.type.ts (100%)
 rename frontend/src/bundles/common/components/{upload-video/components => }/video-player/video-player.tsx (97%)
 rename frontend/src/bundles/common/{components/upload-video/components/video-player/libs => }/constants/constants.ts (100%)
 rename frontend/src/bundles/common/{components/upload-video/components/video-player/libs => }/constants/fps.constant.ts (100%)

diff --git a/frontend/src/bundles/common/components/upload-video/components/components.ts b/frontend/src/bundles/common/components/upload-video/components/components.ts
index 74cacb545..9fcdd90ed 100644
--- a/frontend/src/bundles/common/components/upload-video/components/components.ts
+++ b/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';
diff --git a/frontend/src/bundles/common/components/upload-video/upload-video.tsx b/frontend/src/bundles/common/components/upload-video/upload-video.tsx
index 3c9722e50..8d57f9798 100644
--- a/frontend/src/bundles/common/components/upload-video/upload-video.tsx
+++ b/frontend/src/bundles/common/components/upload-video/upload-video.tsx
@@ -1,11 +1,8 @@
 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';
 
 const UploadVideo: React.FC = () => {
     const [videoSource, setVideoSource] = useState<string | null>(null);
@@ -45,7 +42,7 @@ const UploadVideo: React.FC = () => {
                         onRemoveVideo={handleRemoveVideo}
                         onSetVideo={handleSetVideo}
                     />
-                    <Button width={'222px'} label={'Next step'} />
+                    <Button width="222px" label="Next step" />
                 </>
             )}
         </Flex>
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/components/components.ts b/frontend/src/bundles/common/components/video-player/components/components.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/components/components.ts
rename to frontend/src/bundles/common/components/video-player/components/components.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/control.tsx b/frontend/src/bundles/common/components/video-player/components/control/control.tsx
similarity index 98%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/components/control/control.tsx
rename to frontend/src/bundles/common/components/video-player/components/control/control.tsx
index a00151ec7..f784e6389 100644
--- a/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/control.tsx
+++ b/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,
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/constants/constants.ts b/frontend/src/bundles/common/components/video-player/components/control/libs/constants/constants.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/constants/constants.ts
rename to frontend/src/bundles/common/components/video-player/components/control/libs/constants/constants.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/constants/max-percent.ts b/frontend/src/bundles/common/components/video-player/components/control/libs/constants/max-percent.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/constants/max-percent.ts
rename to frontend/src/bundles/common/components/video-player/components/control/libs/constants/max-percent.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/constants/max-volume.ts b/frontend/src/bundles/common/components/video-player/components/control/libs/constants/max-volume.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/constants/max-volume.ts
rename to frontend/src/bundles/common/components/video-player/components/control/libs/constants/max-volume.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/constants/min-volume.ts b/frontend/src/bundles/common/components/video-player/components/control/libs/constants/min-volume.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/constants/min-volume.ts
rename to frontend/src/bundles/common/components/video-player/components/control/libs/constants/min-volume.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/enums/enums.ts b/frontend/src/bundles/common/components/video-player/components/control/libs/enums/enums.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/enums/enums.ts
rename to frontend/src/bundles/common/components/video-player/components/control/libs/enums/enums.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/enums/video-event.ts b/frontend/src/bundles/common/components/video-player/components/control/libs/enums/video-event.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/enums/video-event.ts
rename to frontend/src/bundles/common/components/video-player/components/control/libs/enums/video-event.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/helpers/get-time.ts b/frontend/src/bundles/common/components/video-player/components/control/libs/helpers/get-time.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/helpers/get-time.ts
rename to frontend/src/bundles/common/components/video-player/components/control/libs/helpers/get-time.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/helpers/helpers.ts b/frontend/src/bundles/common/components/video-player/components/control/libs/helpers/helpers.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/components/control/libs/helpers/helpers.ts
rename to frontend/src/bundles/common/components/video-player/components/control/libs/helpers/helpers.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/components/video/user-video.tsx b/frontend/src/bundles/common/components/video-player/components/video/user-video.tsx
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/components/video/user-video.tsx
rename to frontend/src/bundles/common/components/video-player/components/video/user-video.tsx
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/libs/enums/enums.ts b/frontend/src/bundles/common/components/video-player/libs/enums/enums.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/libs/enums/enums.ts
rename to frontend/src/bundles/common/components/video-player/libs/enums/enums.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/libs/enums/error-id.ts b/frontend/src/bundles/common/components/video-player/libs/enums/error-id.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/libs/enums/error-id.ts
rename to frontend/src/bundles/common/components/video-player/libs/enums/error-id.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/libs/enums/error-message.ts b/frontend/src/bundles/common/components/video-player/libs/enums/error-message.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/libs/enums/error-message.ts
rename to frontend/src/bundles/common/components/video-player/libs/enums/error-message.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/libs/enums/error-title.ts b/frontend/src/bundles/common/components/video-player/libs/enums/error-title.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/libs/enums/error-title.ts
rename to frontend/src/bundles/common/components/video-player/libs/enums/error-title.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/libs/types/player-options.ts b/frontend/src/bundles/common/components/video-player/libs/types/player-options.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/libs/types/player-options.ts
rename to frontend/src/bundles/common/components/video-player/libs/types/player-options.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/libs/types/types.ts b/frontend/src/bundles/common/components/video-player/libs/types/types.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/libs/types/types.ts
rename to frontend/src/bundles/common/components/video-player/libs/types/types.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/libs/types/video-duration.type.ts b/frontend/src/bundles/common/components/video-player/libs/types/video-duration.type.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/libs/types/video-duration.type.ts
rename to frontend/src/bundles/common/components/video-player/libs/types/video-duration.type.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/video-player.tsx b/frontend/src/bundles/common/components/video-player/video-player.tsx
similarity index 97%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/video-player.tsx
rename to frontend/src/bundles/common/components/video-player/video-player.tsx
index 0d33ac330..d32cc05da 100644
--- a/frontend/src/bundles/common/components/upload-video/components/video-player/video-player.tsx
+++ b/frontend/src/bundles/common/components/video-player/video-player.tsx
@@ -2,11 +2,11 @@ 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';
 
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/libs/constants/constants.ts b/frontend/src/bundles/common/constants/constants.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/libs/constants/constants.ts
rename to frontend/src/bundles/common/constants/constants.ts
diff --git a/frontend/src/bundles/common/components/upload-video/components/video-player/libs/constants/fps.constant.ts b/frontend/src/bundles/common/constants/fps.constant.ts
similarity index 100%
rename from frontend/src/bundles/common/components/upload-video/components/video-player/libs/constants/fps.constant.ts
rename to frontend/src/bundles/common/constants/fps.constant.ts

From 96273ad4c8e96be03a248831dabd629b9a16aa44 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Mon, 16 Sep 2024 13:14:16 +0300
Subject: [PATCH 2/4] OV-308: + className prop to videoPlayer

---
 .../components/upload-video/styles.module.css | 27 +++++++++++++++++
 .../components/upload-video/upload-video.tsx  | 20 +++++--------
 .../components/video-player/video-player.tsx  | 29 ++++++++-----------
 .../timeline/timecursor/timecursor.tsx        |  2 +-
 .../bundles/studio/components/video/video.tsx |  2 +-
 5 files changed, 49 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/bundles/common/components/upload-video/styles.module.css

diff --git a/frontend/src/bundles/common/components/upload-video/styles.module.css b/frontend/src/bundles/common/components/upload-video/styles.module.css
new file mode 100644
index 000000000..c63bb2ceb
--- /dev/null
+++ b/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);
+}
diff --git a/frontend/src/bundles/common/components/upload-video/upload-video.tsx b/frontend/src/bundles/common/components/upload-video/upload-video.tsx
index 8d57f9798..179d6e778 100644
--- a/frontend/src/bundles/common/components/upload-video/upload-video.tsx
+++ b/frontend/src/bundles/common/components/upload-video/upload-video.tsx
@@ -3,6 +3,7 @@ import { useCallback, useState } from '~/bundles/common/hooks/hooks.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);
@@ -16,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} />
                 </>
             ) : (
diff --git a/frontend/src/bundles/common/components/video-player/video-player.tsx b/frontend/src/bundles/common/components/video-player/video-player.tsx
index d32cc05da..5b3ec2949 100644
--- a/frontend/src/bundles/common/components/video-player/video-player.tsx
+++ b/frontend/src/bundles/common/components/video-player/video-player.tsx
@@ -12,9 +12,17 @@ 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,
                 }}
             />
 
diff --git a/frontend/src/bundles/studio/components/timeline/timecursor/timecursor.tsx b/frontend/src/bundles/studio/components/timeline/timecursor/timecursor.tsx
index 565b5242e..bd3db5339 100644
--- a/frontend/src/bundles/studio/components/timeline/timecursor/timecursor.tsx
+++ b/frontend/src/bundles/studio/components/timeline/timecursor/timecursor.tsx
@@ -2,7 +2,7 @@ import { type PlayerRef } from '@remotion/player';
 import { type RefObject } from 'react';
 
 import { Box } from '~/bundles/common/components/components.js';
-import { FPS } from '~/bundles/common/components/upload-video/components/video-player/libs/constants/fps.constant.js';
+import { FPS } from '~/bundles/common/constants/constants.js';
 import {
     useAnimationFrame,
     useAppDispatch,
diff --git a/frontend/src/bundles/studio/components/video/video.tsx b/frontend/src/bundles/studio/components/video/video.tsx
index b42be21ea..8bdc0c5d8 100644
--- a/frontend/src/bundles/studio/components/video/video.tsx
+++ b/frontend/src/bundles/studio/components/video/video.tsx
@@ -4,7 +4,7 @@ import {
     RemotionImg,
     Series,
 } from '~/bundles/common/components/components.js';
-import { FPS } from '~/bundles/common/components/upload-video/components/video-player/libs/constants/constants.js';
+import { FPS } from '~/bundles/common/constants/constants.js';
 import { type Scene, type Script } from '~/bundles/studio/types/types.js';
 
 import styles from './styles.module.css';

From 5fd37e7b92f6f54106d6fd1d8ab870e136b5b685 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Mon, 16 Sep 2024 14:34:18 +0300
Subject: [PATCH 3/4] OV-308: + player modal

---
 .../src/bundles/chat/pages/chat-modal.tsx     | 38 +++++++-------
 .../bundles/common/components/components.ts   |  5 +-
 .../bundles/common/components/modal/modal.tsx | 24 +++++++++
 .../common/components/modal/styles.module.css |  7 +++
 .../components/video-modal/video-modal.tsx    | 25 ++-------
 frontend/src/bundles/common/types/types.ts    |  1 +
 .../components/player-modal/player-modal.tsx  | 24 +++++++++
 .../components/player-modal/style.module.css  |  6 +++
 .../components/video-card/styles.module.css   | 22 ++++++++
 .../home/components/video-card/video-card.tsx | 51 +++++++++++--------
 10 files changed, 140 insertions(+), 63 deletions(-)
 create mode 100644 frontend/src/bundles/common/components/modal/modal.tsx
 create mode 100644 frontend/src/bundles/common/components/modal/styles.module.css
 create mode 100644 frontend/src/bundles/home/components/player-modal/player-modal.tsx
 create mode 100644 frontend/src/bundles/home/components/player-modal/style.module.css

diff --git a/frontend/src/bundles/chat/pages/chat-modal.tsx b/frontend/src/bundles/chat/pages/chat-modal.tsx
index 7001cfcd9..1a9a30c73 100644
--- a/frontend/src/bundles/chat/pages/chat-modal.tsx
+++ b/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>
     );
 };
 
diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index a28a651de..7f464752f 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/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,
diff --git a/frontend/src/bundles/common/components/modal/modal.tsx b/frontend/src/bundles/common/components/modal/modal.tsx
new file mode 100644
index 000000000..26f435de1
--- /dev/null
+++ b/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> = (properties) => {
+    return (
+        <LibraryModal {...properties} isCentered>
+            <ModalOverlay />
+            <ModalContent className={styles['modal-content']}>
+                <ModalCloseButton margin="20px" zIndex={10} />
+                <ModalBody padding={0}>{properties.children}</ModalBody>
+            </ModalContent>
+        </LibraryModal>
+    );
+};
+
+export { Modal };
diff --git a/frontend/src/bundles/common/components/modal/styles.module.css b/frontend/src/bundles/common/components/modal/styles.module.css
new file mode 100644
index 000000000..95b21da67
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/src/bundles/common/components/video-modal/video-modal.tsx b/frontend/src/bundles/common/components/video-modal/video-modal.tsx
index 7ddbefc10..b23b8e179 100644
--- a/frontend/src/bundles/common/components/video-modal/video-modal.tsx
+++ b/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>
     );
 };
diff --git a/frontend/src/bundles/common/types/types.ts b/frontend/src/bundles/common/types/types.ts
index 0518e0d3e..891387ff2 100644
--- a/frontend/src/bundles/common/types/types.ts
+++ b/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,
diff --git a/frontend/src/bundles/home/components/player-modal/player-modal.tsx b/frontend/src/bundles/home/components/player-modal/player-modal.tsx
new file mode 100644
index 000000000..3fba8cbd4
--- /dev/null
+++ b/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 };
diff --git a/frontend/src/bundles/home/components/player-modal/style.module.css b/frontend/src/bundles/home/components/player-modal/style.module.css
new file mode 100644
index 000000000..7c62d1856
--- /dev/null
+++ b/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);
+}
diff --git a/frontend/src/bundles/home/components/video-card/styles.module.css b/frontend/src/bundles/home/components/video-card/styles.module.css
index 5e972e469..ac6990634 100644
--- a/frontend/src/bundles/home/components/video-card/styles.module.css
+++ b/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;
+}
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 ac9d8c299..35fe2129e 100644
--- a/frontend/src/bundles/home/components/video-card/video-card.tsx
+++ b/frontend/src/bundles/home/components/video-card/video-card.tsx
@@ -12,8 +12,10 @@ import {
     MenuList,
     Text,
 } from '~/bundles/common/components/components.js';
+import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
 import { IconName, IconSize } from '~/bundles/common/icons/icons.js';
 
+import { PlayerModal } from '../player-modal/player-modal.js';
 import styles from './styles.module.css';
 
 type Properties = {
@@ -22,23 +24,26 @@ type Properties = {
 };
 
 const VideoCard: React.FC<Properties> = ({ name, url }) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const handleIconClick = useCallback(() => {
+        if (url) {
+            setIsModalOpen(true);
+        }
+    }, [url]);
+
+    const handleModalClose = useCallback(() => {
+        setIsModalOpen(false);
+    }, []);
+
     return (
         <Box borderRadius="8px" bg="white" padding="7px">
             <Box position="relative" role="group">
                 <Image src={photo} alt="Video preview" borderRadius="5px" />
 
-                {/* Overlay effect */}
                 <Box
-                    position="absolute"
-                    top="0"
-                    left="0"
-                    width="100%"
-                    height="100%"
-                    bg="rgba(53, 57, 154, 0.3)"
-                    opacity="0"
-                    transition="opacity 0.3s ease"
                     _groupHover={{ opacity: 1 }}
-                    borderRadius="5px"
+                    className={styles['overlay']}
                 />
 
                 <Menu>
@@ -70,18 +75,18 @@ const VideoCard: React.FC<Properties> = ({ name, url }) => {
                 </Menu>
 
                 <IconButton
-                    aria-label="Edit video"
-                    isRound={true}
+                    isRound
                     size="lg"
-                    position="absolute"
-                    bg="white"
-                    top="50%"
-                    left="calc(50% - 12.5px)"
-                    transform="translate(-50%, -50%)"
-                    opacity="0"
-                    transition="opacity 0.3s ease"
+                    aria-label={url ? 'Play video' : 'Edit video'}
                     _groupHover={{ opacity: 1 }}
-                    icon={<Icon as={IconName.PEN} color="background.600" />}
+                    onClick={handleIconClick}
+                    className={styles['action-button']}
+                    icon={
+                        <Icon
+                            as={url ? IconName.PLAY : IconName.PEN}
+                            color="background.600"
+                        />
+                    }
                 />
             </Box>
 
@@ -98,6 +103,12 @@ const VideoCard: React.FC<Properties> = ({ name, url }) => {
                     </Text>
                 </Flex>
             </Box>
+
+            <PlayerModal
+                videoUrl={url}
+                isOpen={isModalOpen}
+                onClose={handleModalClose}
+            />
         </Box>
     );
 };

From d7e7bcefae5d0066687a07982b6eb60a79badce5 Mon Sep 17 00:00:00 2001
From: Oleksandra Nedashkivska <alexandranedashkovskaya10@gmail.com>
Date: Mon, 16 Sep 2024 14:38:57 +0300
Subject: [PATCH 4/4] OV-308: * fix modal usage

---
 frontend/src/bundles/common/components/modal/modal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/bundles/common/components/modal/modal.tsx b/frontend/src/bundles/common/components/modal/modal.tsx
index 26f435de1..a7c2548b6 100644
--- a/frontend/src/bundles/common/components/modal/modal.tsx
+++ b/frontend/src/bundles/common/components/modal/modal.tsx
@@ -9,13 +9,13 @@ import { type ModalProps } from '~/bundles/common/types/types.js';
 
 import styles from './styles.module.css';
 
-const Modal: React.FC<ModalProps> = (properties) => {
+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}>{properties.children}</ModalBody>
+                <ModalBody padding={0}>{children}</ModalBody>
             </ModalContent>
         </LibraryModal>
     );