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"