From 95110099947cfaaba61b585f85e6a9794f41120c Mon Sep 17 00:00:00 2001
From: Rakesh Merugu <mrakesh0608@outlook.com>
Date: Sun, 23 Jun 2024 23:04:30 +0530
Subject: [PATCH] feat: full screen mode in manga reader

---
 src/components/AnimeCard.tsx       |  2 +-
 src/components/MangaCard.tsx       | 14 ++----
 src/hooks/useFullScreenMode.tsx    | 38 ++++++++++++++++
 src/screens/mangaDetailsScreen.tsx | 43 +++++++++----------
 src/screens/mangaReaderScreen.tsx  | 69 +++++++++++++++++++++++-------
 5 files changed, 117 insertions(+), 49 deletions(-)
 create mode 100644 src/hooks/useFullScreenMode.tsx

diff --git a/src/components/AnimeCard.tsx b/src/components/AnimeCard.tsx
index f4b42fc..39d9bf9 100644
--- a/src/components/AnimeCard.tsx
+++ b/src/components/AnimeCard.tsx
@@ -27,7 +27,7 @@ export function AnimeCard({ data, onClick }: { data: any; onClick?: () => void }
         <SearchResultCard
             onClick={onClick || detailsClickHandler}
             data={{
-                ...(data as any),
+                ...data,
                 episodes,
                 title: data.title ?? data.jp_name,
             }}
diff --git a/src/components/MangaCard.tsx b/src/components/MangaCard.tsx
index 4b38950..8573010 100644
--- a/src/components/MangaCard.tsx
+++ b/src/components/MangaCard.tsx
@@ -34,16 +34,10 @@ export function MangaCard({ data }: { data: TManga }) {
     return (
         <SearchResultCard
             onClick={exploreCardHandler}
-            data={
-                {
-                    poster: data.poster,
-                    title: data.title,
-                    episodes,
-                    type: data.type,
-                    rank: data.rank,
-                    score: data.score,
-                } as any
-            }
+            data={{
+                ...data,
+                episodes,
+            }}
         />
     );
 }
diff --git a/src/hooks/useFullScreenMode.tsx b/src/hooks/useFullScreenMode.tsx
new file mode 100644
index 0000000..3ed2ca5
--- /dev/null
+++ b/src/hooks/useFullScreenMode.tsx
@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export function useFullScreenMode() {
+    const ref = useRef<HTMLDivElement | null>(null);
+
+    const [isFullScreen, setIsFullScreen] = useState(false);
+
+    const handleFullScreen = useCallback(async () => {
+        if (document.fullscreenElement) document.exitFullscreen();
+        else ref.current?.requestFullscreen();
+    }, [ref]);
+
+    const handleFullscreenchange = useCallback(
+        (e: Event) => {
+            console.log('full-screen-change-event', e);
+            setIsFullScreen(!isFullScreen);
+        },
+        [setIsFullScreen, isFullScreen],
+    );
+    const handleKeyDown = useCallback(
+        (event: KeyboardEvent) => {
+            if (['f', 'F'].includes(event.key)) handleFullScreen();
+        },
+        [handleFullScreen],
+    );
+
+    useEffect(() => {
+        ref.current?.addEventListener('fullscreenchange', handleFullscreenchange);
+        return () => ref.current?.removeEventListener('fullscreenchange', handleFullscreenchange);
+    }, [ref, handleFullscreenchange]);
+
+    useEffect(() => {
+        window?.addEventListener('keydown', handleKeyDown);
+        return () => window?.removeEventListener('keydown', handleKeyDown);
+    }, [handleKeyDown]);
+
+    return { fullScreenRef: ref, handleFullScreen, isFullScreen };
+}
diff --git a/src/screens/mangaDetailsScreen.tsx b/src/screens/mangaDetailsScreen.tsx
index 82f2cde..b8e3bcf 100644
--- a/src/screens/mangaDetailsScreen.tsx
+++ b/src/screens/mangaDetailsScreen.tsx
@@ -204,18 +204,20 @@ export function MangaDetailsScreen() {
                             {volTxt}
                         </Text>
                         <Stack align={'center'} justify={'center'} direction={'row'} mt={6}>
-                            <Badge
-                                px={2}
-                                py={1}
-                                fontWeight={'400'}
-                                sx={{
-                                    display: 'flex',
-                                    justifyContent: 'content',
-                                    alignItems: 'center',
-                                }}>
-                                <Icon as={FiMonitor} />
-                                <Text ml="1">{data?.type}</Text>
-                            </Badge>
+                            {data?.type ? (
+                                <Badge
+                                    px={2}
+                                    py={1}
+                                    fontWeight={'400'}
+                                    sx={{
+                                        display: 'flex',
+                                        justifyContent: 'content',
+                                        alignItems: 'center',
+                                    }}>
+                                    <Icon as={FiMonitor} />
+                                    <Text ml="1">{data?.type}</Text>
+                                </Badge>
+                            ) : null}
                             {data?.status && (
                                 <Badge px={2} py={1} fontWeight={'400'}>
                                     {data?.status}
@@ -247,18 +249,15 @@ export function MangaDetailsScreen() {
 
                         {data.genres?.length ? (
                             <div>
-                                <Text fontWeight={600} color={'gray.500'} size="sm" mt={4}>
+                                <Text fontWeight={600} color={'gray.500'} size="sm" my={2}>
                                     Genre
                                 </Text>
                                 <Box>
-                                    {data.genres &&
-                                        data.genres.map((item, index) => {
-                                            return (
-                                                <Tag key={index} mr={2}>
-                                                    {item}
-                                                </Tag>
-                                            );
-                                        })}
+                                    {data.genres?.map((item, index) => (
+                                        <Tag key={index} mr={2}>
+                                            {item}
+                                        </Tag>
+                                    ))}
                                 </Box>
                             </div>
                         ) : null}
@@ -269,7 +268,7 @@ export function MangaDetailsScreen() {
                                 alignItems: 'flex-end',
                             }}>
                             {isLoading ? (
-                                <Skeleton p={2} m={2} width={'48px'} height={'48px'}></Skeleton>
+                                <Skeleton p={2} m={2} width={'48px'} height={'48px'} />
                             ) : (
                                 <Button onClick={handleRead}>Read</Button>
                             )}
diff --git a/src/screens/mangaReaderScreen.tsx b/src/screens/mangaReaderScreen.tsx
index 7a4711d..cd07b3c 100644
--- a/src/screens/mangaReaderScreen.tsx
+++ b/src/screens/mangaReaderScreen.tsx
@@ -1,12 +1,14 @@
-import { Box, Center, Flex, Heading, Image, Skeleton, Text } from '@chakra-ui/react';
+import { Box, Center, Flex, Heading, Icon, Image, Skeleton, Text, Tooltip } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useMemo, useState } from 'react';
+import { GoScreenFull, GoScreenNormal } from 'react-icons/go';
 import { useSearchParams } from 'react-router-dom';
 import { GoBackBtn } from 'src/components/GoBackBtn';
 import { localImagesPath } from 'src/constants/images';
 import server from 'src/utils/axios';
 
 import { TMangaChapters, getMangaDetails } from './getMangaDetails';
+import { useFullScreenMode } from '../hooks/useFullScreenMode';
 
 export function MangaReaderScreen() {
     const [searchParams] = useSearchParams();
@@ -93,8 +95,11 @@ function MangaReader({ chapters, isLoading }: { chapters: TMangaChapters; isLoad
         }
     }, [chapters]);
 
+    const { isFullScreen, fullScreenRef, handleFullScreen } = useFullScreenMode();
+
     return (
         <div
+            ref={fullScreenRef}
             style={{
                 display: 'flex',
                 flexGrow: 1,
@@ -110,7 +115,7 @@ function MangaReader({ chapters, isLoading }: { chapters: TMangaChapters; isLoad
                     flexGrow: 1,
                     flexDirection: 'column',
                 }}>
-                <Text p={2} fontSize="large" fontWeight={'bold'} position={'sticky'}>
+                <Text p={2} fontSize="large" fontWeight={'bold'}>
                     Chapters
                 </Text>
 
@@ -142,24 +147,50 @@ function MangaReader({ chapters, isLoading }: { chapters: TMangaChapters; isLoad
                     />
                 </Flex>
             </div>
-            <Box
-                sx={{
+            <div
+                style={{
                     width: '100%',
                     display: 'flex',
                     flexGrow: 1,
-
-                    overflowY: 'auto',
-                    '&::-webkit-scrollbar': {
-                        width: '8px',
-                        borderRadius: '8px',
-                        backgroundColor: `rgba(255, 255, 255, 0.2)`,
-                    },
-                    '&::-webkit-scrollbar-thumb': {
-                        backgroundColor: `rgba(255, 255, 255, 0.2)`,
-                    },
+                    flexDirection: 'column',
+                    rowGap: 10,
                 }}>
-                <MangaChapterImages currentChapter={currentChapter} />
-            </Box>
+                <div
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                    }}>
+                    <Tooltip
+                        label={isFullScreen ? 'Exit Full Screen' : 'Full Screen'}
+                        placement="top">
+                        <Box
+                            style={{
+                                cursor: 'pointer',
+                            }}
+                            onClick={handleFullScreen}>
+                            <Icon as={isFullScreen ? GoScreenNormal : GoScreenFull} w={8} h={8} />
+                        </Box>
+                    </Tooltip>
+                </div>
+                <Box
+                    sx={{
+                        width: '100%',
+                        display: 'flex',
+                        flexGrow: 1,
+
+                        overflowY: 'auto',
+                        '&::-webkit-scrollbar': {
+                            width: '8px',
+                            borderRadius: '8px',
+                            backgroundColor: `rgba(255, 255, 255, 0.2)`,
+                        },
+                        '&::-webkit-scrollbar-thumb': {
+                            backgroundColor: `rgba(255, 255, 255, 0.2)`,
+                        },
+                    }}>
+                    <MangaChapterImages currentChapter={currentChapter} />
+                </Box>
+            </div>
         </div>
     );
 }
@@ -307,6 +338,12 @@ function MangaChapterImages({
                     alt={`manga-chapter-${idx}-image`}
                     width={'65%'}
                     style={{
+                        userSelect: 'none',
+                        msUserSelect: 'none',
+                        MozUserSelect: 'none',
+                        WebkitUserSelect: 'none',
+                        msTouchSelect: 'none',
+                        pointerEvents: 'none',
                         borderRadius: 20,
                         objectFit: 'contain',
                     }}