|
|
|
@ -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={()=>{
|
|
|
|
|
const elem = document.documentElement;
|
|
|
|
|
if (elem.requestFullscreen) {
|
|
|
|
|
elem.requestFullscreen();
|
|
|
|
|
}
|
|
|
|
|
<NavItemButton name={isFullScreen ? "Exit Fullscreen" : "Enter Fullscreen"} icon={isFullScreen ? <ExitFullScreenIcon/> : <EnterFullScreenIcon/>} onClick={()=>{
|
|
|
|
|
toggleFullScreen();
|
|
|
|
|
}} />
|
|
|
|
|
<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>
|
|
|
|
|
)
|
|
|
|
|
}
|