Support Milkdrop fullscreen

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) => (
   <ContextMenuWraper
-    onDoubleClick={props.toggleFullscreen}
     renderContents={() => {
       return (
         <>
@@ -41,7 +44,9 @@ const MilkdropContextMenu = (props: Props) => (
         </>
       );
     }}
-  />
+  >
+    {props.children}
+  </ContextMenuWraper>
 );
 
 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(

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<Size>(getScreenSize());
+  // TODO: We could subscribe to screen size changes.
+  return size;
+}
+
 function Milkdrop(props: Props) {
+  const [isFullscreen, setIsFullscreen] = useState<boolean>(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 (
     <GenWindow title={"Milkdrop"} windowId={WINDOWS.MILKDROP}>
-      {({ height, width }: { width: number; height: number }) => (
-        <Background>
-          <DropTarget handleDrop={props.handlePresetDrop}>
-            {props.overlay && (
-              <PresetOverlay
-                width={width}
-                height={height}
-                onFocusedKeyDown={props.onFocusedKeyDown}
-              />
-            )}
-            <Visualizer
-              width={width}
-              height={height}
-              analyser={props.analyser}
-            />
-          </DropTarget>
-        </Background>
-      )}
+      {(windowSize: { width: number; height: number }) => {
+        const size = isFullscreen ? screenSize : windowSize;
+        return (
+          <MilkdropContextMenu toggleFullscreen={toggleFullscreen}>
+            <Background>
+              <DropTarget handleDrop={props.handlePresetDrop}>
+                {props.overlay && (
+                  <PresetOverlay
+                    {...size}
+                    onFocusedKeyDown={props.onFocusedKeyDown}
+                  />
+                )}
+                <Fullscreen enabled={isFullscreen} onChange={setIsFullscreen}>
+                  {/* TODO: Figure out how to let double clicking exit fullscreen */}
+                  <Visualizer {...size} analyser={props.analyser} />
+                </Fullscreen>
+              </DropTarget>
+            </Background>
+          </MilkdropContextMenu>
+        );
+      }}
     </GenWindow>
   );
 }

package.json

@@ -146,5 +146,8 @@
       "config/jest.*.js"
     ]
   },
-  "prettier": {}
+  "prettier": {},
+  "dependencies": {
+    "react-full-screen": "^0.2.4"
+  }
 }

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"