feat: full screen

This commit is contained in:
monoid 2024-01-02 00:20:11 +09:00
parent aa13213483
commit 8c605af817
4 changed files with 25 additions and 7 deletions

View File

@ -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={{

View File

@ -1,5 +1,6 @@
import { Theme, Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
import { IconButton, Theme, Typography } from "@mui/material";
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)}>
<ReaderPage doc={info.doc}></ReaderPage>
<Headline menu={menu_list(location.pathname)} rightAppbar={
<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>
);
}

View File

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

View File

@ -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;