packages/client/src/page/reader/comicPage.tsx

@@ -4,7 +4,8 @@ import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { useGalleryDoc } from "@/hook/useGalleryDoc.ts";
 import { cn } from "@/lib/utils";
-import { EnterFullScreenIcon, ExitIcon } from "@radix-ui/react-icons";
+import { EnterFullScreenIcon, ExitFullScreenIcon, ExitIcon } from "@radix-ui/react-icons";
+import { useEventListener } from "usehooks-ts";
 import type { Document } from "dbtype/api";
 import { useCallback, useEffect, useRef, useState } from "react";
 
@@ -92,12 +93,30 @@ function clip(val: number, min: number, max: number): number {
     return Math.max(min, Math.min(max, val));
 }
 
+function useFullScreen() {
+    const ref = useRef<HTMLElement>(document.documentElement);
+    const [isFullScreen, setIsFullScreen] = useState(false);
+
+    const toggleFullScreen = useCallback(() => {
+        if (isFullScreen) {
+            document.exitFullscreen();
+        } else {
+            document.documentElement.requestFullscreen();
+        }
+    }, [isFullScreen]);
+
+    useEventListener("fullscreenchange", () => {
+        setIsFullScreen(!!document.fullscreenElement);
+    }, ref);
+    return { isFullScreen, toggleFullScreen };
+}
+
 export default function ComicPage({
     params
 }: ComicPageProps) {
     const { data, error, isLoading } = useGalleryDoc(params.id);
     const [curPage, setCurPage] = useState(0);
-
+    const { isFullScreen, toggleFullScreen } = useFullScreen();
     if (isLoading) {
         // TODO: Add a loading spinner
         return <div className="p-4">
@@ -122,11 +141,8 @@ export default function ComicPage({
     return (
         <PageNavItem items={<>
             <NavItem to={`/doc/${params.id}`} name="Back" icon={<ExitIcon />}/>
-            <NavItemButton name="fullscreen" icon={<EnterFullScreenIcon/>} onClick={()=>{
+            <NavItemButton name={isFullScreen ? "Exit Fullscreen" : "Enter Fullscreen"} icon={isFullScreen ? <ExitFullScreenIcon/> : <EnterFullScreenIcon/>} onClick={()=>{
-                const elem = document.documentElement;
+                toggleFullScreen();
-                if (elem.requestFullscreen) {
-                    elem.requestFullscreen();
-                }
             }}  />
             <Popover>
                 <PopoverTrigger>
@@ -137,15 +153,14 @@ export default function ComicPage({
                             setCurPage(clip(Number.parseInt(e.target.value) - 1, 
                             0, 
                             (data.additional.page as number) - 1))} />
-                    <div className="flex">
-                    </div>
                 </PopoverContent>
             </Popover>
         </>}>
             <ComicViewer
             curPage={curPage}
             onChangePage={setCurPage}
-            doc={data} totalPage={data.additional.page as number} />
+            doc={data} 
+            totalPage={data.additional.page as number} />
         </PageNavItem>
     )
 }