.gitignore

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

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

@@ -4,8 +4,7 @@ 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, ExitFullScreenIcon, ExitIcon } from "@radix-ui/react-icons";
+import { EnterFullScreenIcon, ExitIcon } from "@radix-ui/react-icons";
-import { useEventListener } from "usehooks-ts";
 import type { Document } from "dbtype/api";
 import { useCallback, useEffect, useRef, useState } from "react";
 
@@ -93,30 +92,12 @@ 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">
@@ -141,8 +122,11 @@ export default function ComicPage({
     return (
         <PageNavItem items={<>
             <NavItem to={`/doc/${params.id}`} name="Back" icon={<ExitIcon />}/>
-            <NavItemButton name={isFullScreen ? "Exit Fullscreen" : "Enter Fullscreen"} icon={isFullScreen ? <ExitFullScreenIcon/> : <EnterFullScreenIcon/>} onClick={()=>{
+            <NavItemButton name="fullscreen" icon={<EnterFullScreenIcon/>} onClick={()=>{
-                toggleFullScreen();
+                const elem = document.documentElement;
+                if (elem.requestFullscreen) {
+                    elem.requestFullscreen();
+                }
             }}  />
             <Popover>
                 <PopoverTrigger>
@@ -153,14 +137,15 @@ 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} 
+            doc={data} totalPage={data.additional.page as number} />
-            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 compile",
+		"compile": "swc src --out-dir dist",
 		"dev": "nodemon -r @swc-node/register --enable-source-maps --exec node app.ts",
-		"start": "node compile/app.js"
+		"start": "node dist/app.js"
 	},
 	"author": "",
 	"license": "ISC",