feat: fullscreen exit

.gitignore

@@ -14,6 +14,8 @@ app/**
 settings.json
 comic_config.json
 **/comic_config.json
+compiled/
+deploy-scripts/
 
 .pnpm-store/**
 .env

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>
     )
 }

packages/server/package.json

@@ -4,9 +4,9 @@
 	"description": "",
 	"main": "build/app.js",
 	"scripts": {
-		"compile": "swc src --out-dir dist",
+		"compile": "swc src --out-dir compile",
 		"dev": "nodemon -r @swc-node/register --enable-source-maps --exec node app.ts",
-		"start": "node dist/app.js"
+		"start": "node compile/app.js"
 	},
 	"author": "",
 	"license": "ISC",