From 60e47b5228a692c2d434e5bbb8bc518551645c1f Mon Sep 17 00:00:00 2001
From: XCODE89 <maph0989@gmail.com>
Date: Tue, 24 Sep 2024 00:52:25 -0300
Subject: [PATCH] OV-399: + Add horizontal scroll to recent videos

---
 .../components/main-content/main-content.tsx  | 12 ++++++--
 .../video-section/styles.module.css           |  6 ++++
 .../video-section/video-section.tsx           | 30 +++++++++++++++----
 .../src/bundles/home/enums/video-gallery.ts   |  6 ++++
 frontend/src/bundles/home/pages/home.tsx      |  2 +-
 5 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/bundles/home/components/video-section/styles.module.css
 create mode 100644 frontend/src/bundles/home/enums/video-gallery.ts

diff --git a/frontend/src/bundles/home/components/main-content/main-content.tsx b/frontend/src/bundles/home/components/main-content/main-content.tsx
index 71402f8f0..99ac4a842 100644
--- a/frontend/src/bundles/home/components/main-content/main-content.tsx
+++ b/frontend/src/bundles/home/components/main-content/main-content.tsx
@@ -3,12 +3,14 @@ import {
     Loader,
     Overlay,
 } from '~/bundles/common/components/components.js';
+import { useCollapse } from '~/bundles/common/components/sidebar/hooks/use-collapse.hook.js';
 import { DataStatus } from '~/bundles/common/enums/enums.js';
 import {
     useAppDispatch,
     useAppSelector,
     useEffect,
 } from '~/bundles/common/hooks/hooks.js';
+import { VideoGallery } from '~/bundles/home/enums/video-gallery.js';
 import { actions as homeActions } from '~/bundles/home/store/home.js';
 
 import { VideoSection } from '../components.js';
@@ -16,6 +18,7 @@ import styles from './styles.module.css';
 
 const MainContent: React.FC = () => {
     const dispatch = useAppDispatch();
+    const { isCollapsed } = useCollapse();
 
     const { videos, dataStatus } = useAppSelector(({ home }) => home);
 
@@ -26,13 +29,16 @@ const MainContent: React.FC = () => {
     }, [dispatch]);
 
     return (
-        <Box className={styles['main-content']}>
+        <Box
+            className={styles['main-content']}
+            w={isCollapsed ? 'calc(100vw - 60px)' : 'calc(100vw - 270px)'}
+        >
             <Overlay isOpen={dataStatus === DataStatus.PENDING}>
                 <Loader />
             </Overlay>
 
-            <VideoSection videos={videos} title="Recent videos" />
-            <VideoSection videos={videos} title="Videos" />
+            <VideoSection videos={videos} title={VideoGallery.RECENT_VIDEOS} />
+            <VideoSection videos={videos} title={VideoGallery.VIDEOS} />
         </Box>
     );
 };
diff --git a/frontend/src/bundles/home/components/video-section/styles.module.css b/frontend/src/bundles/home/components/video-section/styles.module.css
new file mode 100644
index 000000000..64d222997
--- /dev/null
+++ b/frontend/src/bundles/home/components/video-section/styles.module.css
@@ -0,0 +1,6 @@
+.horizontal {
+    display: flex;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #c1c1c1 #f1f1f1;
+}
diff --git a/frontend/src/bundles/home/components/video-section/video-section.tsx b/frontend/src/bundles/home/components/video-section/video-section.tsx
index f65803267..68df2a31c 100644
--- a/frontend/src/bundles/home/components/video-section/video-section.tsx
+++ b/frontend/src/bundles/home/components/video-section/video-section.tsx
@@ -8,7 +8,9 @@ import {
 } from '~/bundles/common/components/components.js';
 import { type VideoGetAllItemResponseDto } from '~/bundles/home/types/types.js';
 
+import { VideoGallery } from '../../enums/video-gallery.js';
 import { VideoCard } from '../components.js';
+import styles from './styles.module.css';
 
 type Properties = {
     videos: Array<VideoGetAllItemResponseDto> | [];
@@ -33,11 +35,29 @@ const VideoSection: React.FC<Properties> = ({ videos, title }) => {
             </Flex>
 
             {videos.length > 0 ? (
-                <SimpleGrid columns={{ sm: 2, md: 3, lg: 4 }} spacing="20px">
-                    {videos.map(({ id, ...video }) => (
-                        <VideoCard key={id} id={id} {...video} />
-                    ))}
-                </SimpleGrid>
+                title === VideoGallery.RECENT_VIDEOS ? (
+                    <Box className={styles['horizontal']}>
+                        {videos.map(({ id, ...video }) => (
+                            <Box
+                                key={id}
+                                flex="0 0 auto"
+                                marginRight="20px"
+                                width="250px"
+                            >
+                                <VideoCard id={id} {...video} />
+                            </Box>
+                        ))}
+                    </Box>
+                ) : (
+                    <SimpleGrid
+                        columns={{ sm: 2, md: 3, lg: 4 }}
+                        spacing="20px"
+                    >
+                        {videos.map(({ id, ...video }) => (
+                            <VideoCard key={id} id={id} {...video} />
+                        ))}
+                    </SimpleGrid>
+                )
             ) : (
                 <Text color="typography.600" variant="body1">
                     You have no videos right now.
diff --git a/frontend/src/bundles/home/enums/video-gallery.ts b/frontend/src/bundles/home/enums/video-gallery.ts
new file mode 100644
index 000000000..cf4d0c320
--- /dev/null
+++ b/frontend/src/bundles/home/enums/video-gallery.ts
@@ -0,0 +1,6 @@
+const VideoGallery = {
+    VIDEOS: 'Videos',
+    RECENT_VIDEOS: 'Recent videos',
+} as const;
+
+export { VideoGallery };
diff --git a/frontend/src/bundles/home/pages/home.tsx b/frontend/src/bundles/home/pages/home.tsx
index 6b4381356..360c907d2 100644
--- a/frontend/src/bundles/home/pages/home.tsx
+++ b/frontend/src/bundles/home/pages/home.tsx
@@ -8,7 +8,7 @@ import { MainContent } from '../components/components.js';
 
 const Home: React.FC = () => {
     return (
-        <Box bg="background.900" minHeight="100vh" overflow="auto">
+        <Box bg="background.900" minHeight="100vh">
             <Header />
             <Sidebar>
                 <MainContent />