Make impossible states impossible

js/actionCreators/index.ts

@@ -9,7 +9,8 @@ import {
   UNSET_FOCUS,
   LOAD_SERIALIZED_STATE,
   LOAD_DEFAULT_SKIN,
-  SET_MILKDROP_DESKTOP
+  SET_MILKDROP_DESKTOP,
+  SET_MILKDROP_FULLSCREEN
 } from "../actionTypes";
 import { WINDOWS } from "../constants";
 import { Dispatchable } from "../types";
@@ -172,3 +173,14 @@ export function toggleMilkdropDesktop(): Dispatchable {
     }
   };
 }
+
+export function setMilkdropFullscreen(enabled: boolean): Dispatchable {
+  return { type: SET_MILKDROP_FULLSCREEN, enabled };
+}
+export function toggleMilkdropFullscreen(): Dispatchable {
+  return (dispatch, getState) => {
+    dispatch(
+      setMilkdropFullscreen(!Selectors.getMilkdropFullscreenEnabled(getState()))
+    );
+  };
+}

js/actionTypes.ts

@@ -86,3 +86,4 @@ export const PRESET_REQUESTED = "PRESET_REQUESTED";
 export const TOGGLE_RANDOMIZE_PRESETS = "TOGGLE_RANDOMIZE_PRESETS";
 export const TOGGLE_PRESET_CYCLING = "TOGGLE_PRESET_CYCLING";
 export const SCHEDULE_MILKDROP_MESSAGE = "SCHEDULE_MILKDROP_MESSAGE";
+export const SET_MILKDROP_FULLSCREEN = "SET_MILKDROP_FULLSCREEN";

js/components/MilkdropWindow/MilkdropContextMenu.tsx

@@ -9,15 +9,16 @@ import ContextMenuWraper from "../ContextMenuWrapper";
 
 interface StateProps {
   desktop: boolean;
+  fullscreen: boolean;
 }
 
 interface DispatchProps {
   closeWindow(): void;
   toggleDesktop(): void;
+  toggleFullscreen(): void;
 }
 
 interface OwnProps {
-  toggleFullscreen(): void;
   children: ReactNode;
 }
 
@@ -50,12 +51,14 @@ const MilkdropContextMenu = (props: Props) => (
 );
 
 const mapStateToProps = (state: AppState): StateProps => ({
-  desktop: Selectors.getMilkdropDesktopEnabled(state)
+  desktop: Selectors.getMilkdropDesktopEnabled(state),
+  fullscreen: Selectors.getMilkdropFullscreenEnabled(state)
 });
 
 const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
   closeWindow: () => dispatch(Actions.closeWindow(WINDOWS.MILKDROP)),
-  toggleDesktop: () => dispatch(Actions.toggleMilkdropDesktop())
+  toggleDesktop: () => dispatch(Actions.toggleMilkdropDesktop()),
+  toggleFullscreen: () => dispatch(Actions.toggleMilkdropFullscreen())
 });
 
 export default connect(

js/components/MilkdropWindow/index.tsx

@@ -20,6 +20,7 @@ const MILLISECONDS_BETWEEN_PRESET_TRANSITIONS = 15000;
 
 interface StateProps {
   desktop: boolean;
+  fullscreen: boolean;
   overlay: boolean;
   presetsAreCycling: boolean;
   trackTitle: string | null;
@@ -28,6 +29,8 @@ interface StateProps {
 interface DispatchProps {
   closeWindow(): void;
   toggleDesktop(): void;
+  toggleFullscreen(): void;
+  setFullscreen(fullscreen: boolean): void;
   togglePresetOverlay(): void;
   selectRandomPreset(): void;
   toggleRandomize(): void;
@@ -48,7 +51,6 @@ interface OwnProps {
 type Props = StateProps & DispatchProps & OwnProps;
 
 function Milkdrop(props: Props) {
-  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
   // Handle keyboard events
   useEffect(() => {
     return props.onFocusedKeyDown(e => {
@@ -95,18 +97,13 @@ function Milkdrop(props: Props) {
     return () => clearImmediate(intervalId);
   }, [props.selectNextPreset, props.presetsAreCycling]);
 
-  const toggleFullscreen = useCallback(() => setIsFullscreen(!isFullscreen), [
-    setIsFullscreen,
-    isFullscreen
-  ]);
-
   const screenSize = useScreenSize();
   const windowSize = useWindowSize();
 
   if (props.desktop) {
     return (
       <Desktop>
-        <MilkdropContextMenu toggleFullscreen={toggleFullscreen}>
+        <MilkdropContextMenu>
           <Visualizer {...windowSize} analyser={props.analyser} />
         </MilkdropContextMenu>
       </Desktop>
@@ -116,9 +113,9 @@ function Milkdrop(props: Props) {
   return (
     <GenWindow title={"Milkdrop"} windowId={WINDOWS.MILKDROP}>
       {(windowSize: { width: number; height: number }) => {
-        const size = isFullscreen ? screenSize : windowSize;
+        const size = props.fullscreen ? screenSize : windowSize;
         return (
-          <MilkdropContextMenu toggleFullscreen={toggleFullscreen}>
+          <MilkdropContextMenu>
             <Background>
               <DropTarget handleDrop={props.handlePresetDrop}>
                 {props.overlay && (
@@ -127,8 +124,11 @@ function Milkdrop(props: Props) {
                     onFocusedKeyDown={props.onFocusedKeyDown}
                   />
                 )}
-                <Fullscreen enabled={isFullscreen} onChange={setIsFullscreen}>
-                  <div onDoubleClick={toggleFullscreen}>
+                <Fullscreen
+                  enabled={props.fullscreen}
+                  onChange={props.setFullscreen}
+                >
+                  <div onDoubleClick={props.toggleFullscreen}>
                     <Visualizer {...size} analyser={props.analyser} />
                   </div>
                 </Fullscreen>
@@ -143,6 +143,7 @@ function Milkdrop(props: Props) {
 
 const mapStateToProps = (state: AppState): StateProps => ({
   desktop: Selectors.getMilkdropDesktopEnabled(state),
+  fullscreen: Selectors.getMilkdropFullscreenEnabled(state),
   overlay: Selectors.getPresetOverlayOpen(state),
   presetsAreCycling: Selectors.getPresetsAreCycling(state),
   trackTitle: Selectors.getCurrentTrackDisplayName(state)
@@ -151,6 +152,9 @@ const mapStateToProps = (state: AppState): StateProps => ({
 const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
   closeWindow: () => dispatch(Actions.closeWindow(WINDOWS.MILKDROP)),
   toggleDesktop: () => dispatch(Actions.toggleMilkdropDesktop()),
+  toggleFullscreen: () => dispatch(Actions.toggleMilkdropFullscreen()),
+  setFullscreen: (fullscreen: boolean) =>
+    dispatch(Actions.setMilkdropFullscreen(fullscreen)),
   togglePresetOverlay: () => dispatch(Actions.togglePresetOverlay()),
   selectRandomPreset: () => dispatch(Actions.selectRandomPreset()),
   toggleRandomize: () => dispatch(Actions.toggleRandomizePresets()),

js/reducers/milkdrop.ts

@@ -1,6 +1,7 @@
 import { Action, StatePreset } from "../types";
 import {
   SET_MILKDROP_DESKTOP,
+  SET_MILKDROP_FULLSCREEN,
   GOT_BUTTERCHURN_PRESETS,
   GOT_BUTTERCHURN,
   RESOLVE_PRESET_AT_INDEX,
@@ -20,7 +21,7 @@ interface Message {
 }
 
 export interface MilkdropState {
-  desktop: boolean;
+  display: "WINDOW" | "DESKTOP" | "FULLSCREEN";
   overlay: boolean;
   presetHistory: number[];
   presets: StatePreset[];
@@ -34,8 +35,8 @@ export interface MilkdropState {
   message: Message | null;
 }
 
-const defaultMilkdropState = {
-  desktop: false,
+const defaultMilkdropState: MilkdropState = {
+  display: "WINDOW",
   overlay: false,
   presetHistory: [],
   presets: [],
@@ -53,7 +54,9 @@ export const milkdrop = (
 ): MilkdropState => {
   switch (action.type) {
     case SET_MILKDROP_DESKTOP:
-      return { ...state, desktop: action.enabled };
+      return { ...state, display: action.enabled ? "DESKTOP" : "WINDOW" };
+    case SET_MILKDROP_FULLSCREEN:
+      return { ...state, display: action.enabled ? "FULLSCREEN" : "WINDOW" };
     case GOT_BUTTERCHURN:
       return { ...state, butterchurn: action.butterchurn };
     case GOT_BUTTERCHURN_PRESETS:

js/selectors.ts

@@ -611,7 +611,11 @@ export function getDebugData(state: AppState) {
 }
 
 export function getMilkdropDesktopEnabled(state: AppState): boolean {
-  return state.milkdrop.desktop;
+  return state.milkdrop.display === "DESKTOP";
+}
+
+export function getMilkdropFullscreenEnabled(state: AppState): boolean {
+  return state.milkdrop.display === "FULLSCREEN";
 }
 
 export function getPresets(state: AppState): any {

js/types.ts

@@ -467,6 +467,10 @@ export type Action =
       type: "SET_MILKDROP_DESKTOP";
       enabled: boolean;
     }
+  | {
+      type: "SET_MILKDROP_FULLSCREEN";
+      enabled: boolean;
+    }
   | { type: "PRESET_REQUESTED"; index: number; addToHistory: boolean }
   | {
       type: "GOT_BUTTERCHURN_PRESETS";