feat: full screen

src/client/component/headline.tsx

@@ -87,6 +87,7 @@ export const Headline = (prop: {
         content?: string;
         toolbar?: string;
     };
+    rightAppbar?: React.ReactNode;
     menu: React.ReactNode;
 }) => {
     const [v, setv] = useState(false);
@@ -175,6 +176,7 @@ export const Headline = (prop: {
                         Ionian
                     </Link>
                     <div style={{ flexGrow: 1 }}></div>
+                    {prop.rightAppbar}
                     <StyledSearchBar>
                         <div
                             style={{

src/client/page/contentinfo.tsx

@@ -1,5 +1,6 @@
-import { Theme, Typography } from "@mui/material";
+import { IconButton, Theme, Typography } from "@mui/material";
-import React, { useEffect, useState } from "react";
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import React, { useEffect, useRef, useState } from "react";
 import { Route, Routes, useLocation, useParams } from "react-router-dom";
 import DocumentAccessor, { Document } from "../accessor/document";
 import { LoadingCircle } from "../component/loading";
@@ -25,6 +26,7 @@ export function ReaderPage(props?: {}) {
     const id = Number.parseInt(match.id ?? "NaN");
     const [info, setInfo] = useState<DocumentState>({ doc: undefined, notfound: false });
     const menu_list = (link?: string) => <CommonMenuList url={link}></CommonMenuList>;
+    const fullScreenTargetRef = useRef<HTMLDivElement | null>(null);
 
     useEffect(() => {
         (async () => {
@@ -56,8 +58,20 @@ export function ReaderPage(props?: {}) {
     } else {
         const ReaderPage = getPresenter(info.doc);
         return (
-            <Headline menu={menu_list(location.pathname)}>
+            <Headline menu={menu_list(location.pathname)} rightAppbar={
-                <ReaderPage doc={info.doc}></ReaderPage>
+            <IconButton
+                edge="start"
+                aria-label="account of current user"
+                                aria-haspopup="true"
+                                onClick={() => {
+                                    if (fullScreenTargetRef.current != null && document.fullscreenEnabled) {
+                                        fullScreenTargetRef.current.requestFullscreen();
+                                    }
+                                }}
+                                color="inherit">
+                <FullscreenIcon/>
+            </IconButton>}>
+                <ReaderPage doc={info.doc} fullScreenTarget={fullScreenTargetRef}></ReaderPage>
             </Headline>
         );
     }

src/client/page/reader/comic.tsx

@@ -1,5 +1,5 @@
 import { Typography, styled } from "@mui/material";
-import React, { useEffect, useState } from "react";
+import React, { RefObject, useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { Document } from "../../accessor/document";
 
@@ -29,7 +29,8 @@ const CurrentView = styled("img")(({theme})=>({
     position: "absolute"
 })); 
 
-export const ComicReader = (props: { doc: Document }) => {
+export const ComicReader = (props: { doc: Document,
+    fullScreenTarget?: RefObject<HTMLDivElement>}) => {
     const additional = props.doc.additional;
     const [searchParams, setSearchParams] = useSearchParams();
 
@@ -68,7 +69,7 @@ export const ComicReader = (props: { doc: Document }) => {
     }, [curPage]);
     // theme.mixins.toolbar.minHeight;
     return (
-        <ViewMain>
+        <ViewMain ref={props.fullScreenTarget}>
             <div onClick={PageDown} style={{left:"0", width: "50%", position:"absolute", height: "100%", zIndex:100}}></div>
             <CurrentView
                 onClick={PageUp}

src/client/page/reader/reader.tsx

@@ -7,6 +7,7 @@ import { VideoReader } from "./video";
 export interface PagePresenterProp {
     doc: Document;
     className?: string;
+    fullScreenTarget?: React.RefObject<HTMLDivElement>;
 }
 interface PagePresenter {
     (prop: PagePresenterProp): JSX.Element;