diff --git a/js/components/MilkdropWindow/MilkdropContextMenu.tsx b/js/components/MilkdropWindow/MilkdropContextMenu.tsx index de742b8d..a2e3e2a3 100644 --- a/js/components/MilkdropWindow/MilkdropContextMenu.tsx +++ b/js/components/MilkdropWindow/MilkdropContextMenu.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { ReactNode } from "react"; import { Hr, Node } from "../ContextMenu"; import { connect } from "react-redux"; import { WINDOWS } from "../../constants"; @@ -12,16 +12,19 @@ interface StateProps { } interface DispatchProps { - toggleFullscreen(): void; closeWindow(): void; toggleDesktop(): void; } -type Props = StateProps & DispatchProps; +interface OwnProps { + toggleFullscreen(): void; + children: ReactNode; +} + +type Props = StateProps & DispatchProps & OwnProps; const MilkdropContextMenu = (props: Props) => ( { return ( <> @@ -41,7 +44,9 @@ const MilkdropContextMenu = (props: Props) => ( ); }} - /> + > + {props.children} + ); const mapStateToProps = (state: AppState): StateProps => ({ @@ -50,10 +55,7 @@ const mapStateToProps = (state: AppState): StateProps => ({ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ closeWindow: () => dispatch(Actions.closeWindow(WINDOWS.MILKDROP)), - toggleDesktop: () => dispatch(Actions.toggleMilkdropDesktop()), - toggleFullscreen: () => { - throw new Error("Implement fullscreen"); - } + toggleDesktop: () => dispatch(Actions.toggleMilkdropDesktop()) }); export default connect( diff --git a/js/components/MilkdropWindow/index.tsx b/js/components/MilkdropWindow/index.tsx index f0a9b42a..a1863e3e 100644 --- a/js/components/MilkdropWindow/index.tsx +++ b/js/components/MilkdropWindow/index.tsx @@ -1,5 +1,5 @@ -// @ts-ignore #hook-types -import React, { useEffect, useState, useRef } from "react"; +import React, { useEffect, useState, useCallback } from "react"; +import Fullscreen from "react-full-screen"; import { connect } from "react-redux"; import GenWindow from "../GenWindow"; import { WINDOWS } from "../../constants"; @@ -12,6 +12,7 @@ import "../../../css/milkdrop-window.css"; import Background from "./Background"; import PresetOverlay from "./PresetOverlay"; import DropTarget from "../DropTarget"; +import MilkdropContextMenu from "./MilkdropContextMenu"; const MILLISECONDS_BETWEEN_PRESET_TRANSITIONS = 15000; @@ -37,7 +38,25 @@ interface OwnProps { type Props = StateProps & DispatchProps & OwnProps; +interface Size { + width: number; + height: number; +} + +function getScreenSize(): Size { + return { + width: window.screen.width, + height: window.screen.height + }; +} +function useScreenSize() { + const [size, setSize] = useState(getScreenSize()); + // TODO: We could subscribe to screen size changes. + return size; +} + function Milkdrop(props: Props) { + const [isFullscreen, setIsFullscreen] = useState(false); // Handle keyboard events useEffect(() => { return props.onFocusedKeyDown(e => { @@ -80,26 +99,35 @@ function Milkdrop(props: Props) { return () => clearImmediate(intervalId); }, [props.selectRandomPreset]); + const toggleFullscreen = useCallback(() => setIsFullscreen(!isFullscreen), [ + setIsFullscreen + ]); + + const screenSize = useScreenSize(); + return ( - {({ height, width }: { width: number; height: number }) => ( - - - {props.overlay && ( - - )} - - - - )} + {(windowSize: { width: number; height: number }) => { + const size = isFullscreen ? screenSize : windowSize; + return ( + + + + {props.overlay && ( + + )} + + {/* TODO: Figure out how to let double clicking exit fullscreen */} + + + + + + ); + }} ); } diff --git a/package.json b/package.json index 1422b079..e84d9765 100644 --- a/package.json +++ b/package.json @@ -146,5 +146,8 @@ "config/jest.*.js" ] }, - "prettier": {} + "prettier": {}, + "dependencies": { + "react-full-screen": "^0.2.4" + } } diff --git a/yarn.lock b/yarn.lock index 53332d66..8927335d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4274,6 +4274,10 @@ fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" +fscreen@^1.0.1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/fscreen/-/fscreen-1.0.2.tgz#c4c51d96d819d75a19d728e0df445f9be9bb984f" + fsevents@^1.0.0: version "1.1.3" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8" @@ -8348,6 +8352,13 @@ react-dom@^16.8.1: prop-types "^15.6.2" scheduler "^0.13.1" +react-full-screen@^0.2.4: + version "0.2.4" + resolved "https://registry.yarnpkg.com/react-full-screen/-/react-full-screen-0.2.4.tgz#e5bda9535abb6523b65e0e46526c8f21be65ef7e" + dependencies: + "@types/react" "*" + fscreen "^1.0.1" + react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1: version "16.8.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.1.tgz#a80141e246eb894824fb4f2901c0c50ef31d4cdb"