From d238a12b8c8d18f358e7a11dd87c8ecd938952d9 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Fri, 8 Mar 2019 19:22:59 -0800
Subject: [PATCH] Implement Desktop mode

---
 js/components/MilkdropWindow/index.tsx | 30 +++++++++++---------------
 js/hooks.ts                            | 27 +++++++++++++++++++++++
 js/utils.ts                            |  7 ++++++
 3 files changed, 47 insertions(+), 17 deletions(-)
 create mode 100644 js/hooks.ts

diff --git a/js/components/MilkdropWindow/index.tsx b/js/components/MilkdropWindow/index.tsx
index a1863e3e..bfc7b5b8 100644
--- a/js/components/MilkdropWindow/index.tsx
+++ b/js/components/MilkdropWindow/index.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useCallback } from "react";
 import Fullscreen from "react-full-screen";
 import { connect } from "react-redux";
+import { useWindowSize, useScreenSize } from "../../hooks";
 import GenWindow from "../GenWindow";
 import { WINDOWS } from "../../constants";
 import * as Selectors from "../../selectors";
@@ -13,6 +14,7 @@ import Background from "./Background";
 import PresetOverlay from "./PresetOverlay";
 import DropTarget from "../DropTarget";
 import MilkdropContextMenu from "./MilkdropContextMenu";
+import Desktop from "./Desktop";
 
 const MILLISECONDS_BETWEEN_PRESET_TRANSITIONS = 15000;
 
@@ -38,23 +40,6 @@ 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
@@ -104,6 +89,17 @@ function Milkdrop(props: Props) {
   ]);
 
   const screenSize = useScreenSize();
+  const windowSize = useWindowSize();
+
+  if (props.desktop) {
+    return (
+      <Desktop>
+        <MilkdropContextMenu toggleFullscreen={toggleFullscreen}>
+          <Visualizer {...windowSize} analyser={props.analyser} />
+        </MilkdropContextMenu>
+      </Desktop>
+    );
+  }
 
   return (
     <GenWindow title={"Milkdrop"} windowId={WINDOWS.MILKDROP}>
diff --git a/js/hooks.ts b/js/hooks.ts
new file mode 100644
index 00000000..2d2144ba
--- /dev/null
+++ b/js/hooks.ts
@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+import * as Utils from "./utils";
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+export function useScreenSize() {
+  const [size, setSize] = useState<Size>(Utils.getScreenSize());
+  // TODO: We could subscribe to screen size changes.
+  return size;
+}
+
+export function useWindowSize() {
+  const [size, setSize] = useState<Size>(Utils.getWindowSize());
+  const hander = Utils.throttle(() => {
+    setSize(Utils.getWindowSize());
+  }, 100) as () => void;
+  useEffect(() => {
+    window.addEventListener("resize", hander);
+    return () => {
+      window.removeEventListener("resize", hander);
+    };
+  }, [setSize]);
+  return size;
+}
diff --git a/js/utils.ts b/js/utils.ts
index b46f1a55..13ebd16e 100644
--- a/js/utils.ts
+++ b/js/utils.ts
@@ -370,6 +370,13 @@ export function getWindowSize(): { width: number; height: number } {
   };
 }
 
+export function getScreenSize(): { width: number; height: number } {
+  return {
+    width: window.screen.width,
+    height: window.screen.height
+  };
+}
+
 export function weakMapMemoize<T extends object, R>(
   func: (value: T) => R
 ): (value: T) => R {