Make focus nullable

js/actionCreators/index.ts

@@ -11,12 +11,18 @@ import {
   LOAD_DEFAULT_SKIN,
   SET_MILKDROP_DESKTOP,
   SET_MILKDROP_FULLSCREEN,
+  TOGGLE_PRESET_OVERLAY,
 } from "../actionTypes";
 import { WINDOWS } from "../constants";
 import { Thunk, Action } from "../types";
 import { SerializedStateV1 } from "../serializedStates/v1Types";
 import * as Selectors from "../selectors";
-import { ensureWindowsAreOnScreen, showWindow, hideWindow } from "./windows";
+import {
+  ensureWindowsAreOnScreen,
+  showWindow,
+  hideWindow,
+  setFocusedWindow,
+} from "./windows";
 
 export {
   toggleDoubleSizeMode,
@@ -103,7 +109,6 @@ export {
   selectRandomPreset,
   selectNextPreset,
   selectPreviousPreset,
-  togglePresetOverlay,
   appendPresetFileList,
   handlePresetDrop,
   loadPresets,
@@ -184,3 +189,13 @@ export function toggleMilkdropFullscreen(): Thunk {
     );
   };
 }
+
+export function togglePresetOverlay(): Thunk {
+  return (dispatch, getState) => {
+    if (Selectors.getPresetOverlayOpen(getState())) {
+      dispatch(setFocusedWindow(WINDOWS.MILKDROP));
+    }
+
+    dispatch({ type: TOGGLE_PRESET_OVERLAY });
+  };
+}

js/actionCreators/milkdrop.ts

@@ -190,10 +190,6 @@ export function handlePresetDrop(e: React.DragEvent): Thunk {
   return appendPresetFileList(e.dataTransfer.files);
 }
 
-export function togglePresetOverlay(): Action {
-  return { type: TOGGLE_PRESET_OVERLAY };
-}
-
 export function toggleRandomizePresets(): Action {
   return { type: TOGGLE_RANDOMIZE_PRESETS };
 }

js/actionCreators/windows.ts

@@ -96,7 +96,7 @@ export function showWindow(windowId: WindowId): Action {
   return { type: SET_WINDOW_VISIBILITY, windowId, hidden: false };
 }
 
-export function setFocusedWindow(window: WindowId): Action {
+export function setFocusedWindow(window: WindowId | null): Action {
   return { type: SET_FOCUSED_WINDOW, window };
 }
 

js/components/App.tsx

@@ -30,7 +30,6 @@ import Media from "../media";
 interface StateProps {
   visualizerStyle: string;
   status: MediaStatus;
-  focused: WindowId;
   closed: boolean;
   // TODO: Get only the info we really need
   genWindowsInfo: { [windowId: string]: WebampWindow };
@@ -51,7 +50,7 @@ interface OwnProps {
 type Props = StateProps & DispatchProps & OwnProps;
 
 /**
- * Constructs the windows to render, and tracks focus.
+ * Constructs the windows to render
  */
 class App extends React.Component<Props> {
   _webampNode: HTMLDivElement | null;
@@ -159,7 +158,6 @@ const mapStateToProps = (state: AppState): StateProps => {
   return {
     visualizerStyle: Selectors.getVisualizerStyle(state),
     status: state.media.status,
-    focused: state.windows.focused,
     closed: state.display.closed,
     genWindowsInfo: state.windows.genWindows,
     zIndex: state.display.zIndex,

js/components/FocusTarget.tsx

@@ -5,10 +5,10 @@ import * as Selectors from "../selectors";
 import { connect } from "react-redux";
 
 interface DispatchProps {
-  setFocus(windowId: WindowId): void;
+  setFocus(windowId: WindowId | null): void;
 }
 interface StateProps {
-  focusedWindowId: WindowId;
+  focusedWindowId: WindowId | null;
 }
 
 interface OwnProps {
@@ -28,6 +28,10 @@ function FocusTarget(props: Props) {
     }
   }, [windowId, focusedWindowId, setFocus]);
 
+  const blurHandler = useCallback(() => {
+    setFocus(null);
+  }, [setFocus]);
+
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -48,6 +52,7 @@ function FocusTarget(props: Props) {
     <div
       ref={ref}
       onMouseDown={focusHandler}
+      onBlur={blurHandler}
       tabIndex={-1}
       style={{ height: "100%", width: "100%" }}
     >

js/components/MainWindow/index.tsx

@@ -47,7 +47,7 @@ import {
 import FocusTarget from "../FocusTarget";
 
 interface StateProps {
-  focused: WindowId;
+  focused: WindowId | null;
   loading: boolean;
   doubled: boolean;
   mainShade: boolean;

js/components/PlaylistWindow/PlaylistShade.tsx

@@ -21,7 +21,7 @@ interface StateProps {
   name: string | null;
   duration: number | null;
   playlistSize: [number, number];
-  focused: WindowId;
+  focused: WindowId | null;
   trackOrder: number[];
 }
 

js/reducers/windows.ts

@@ -47,7 +47,7 @@ export interface WindowInfo {
   y: number;
 }
 export interface WindowsState {
-  focused: string;
+  focused: WindowId | null;
   genWindows: { [name: string]: WebampWindow };
   browserWindowSize: { height: number; width: number };
   positionsAreRelative: boolean;

js/selectors.ts

@@ -417,7 +417,7 @@ export function getWindowHidden(state: AppState) {
   return (windowId: WindowId) => state.windows.genWindows[windowId].hidden;
 }
 
-export function getFocusedWindow(state: AppState): WindowId {
+export function getFocusedWindow(state: AppState): WindowId | null {
   return state.windows.focused;
 }
 

js/serializedStates/v1Types.ts

@@ -13,7 +13,7 @@ export interface WindowsSerializedStateV1 {
       position: { x: number; y: number };
     };
   };
-  focused: string;
+  focused: string | null;
 }
 
 export interface DisplaySerializedStateV1 {

js/types.ts

@@ -338,7 +338,7 @@ export type Action =
     }
   | {
       type: "SET_FOCUSED_WINDOW";
-      window: WindowId;
+      window: WindowId | null;
     }
   | {
       type: "TOGGLE_WINDOW_SHADE_MODE";