diff --git a/js/actionCreators/index.ts b/js/actionCreators/index.ts index 3bd58855..85cf4449 100644 --- a/js/actionCreators/index.ts +++ b/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 }); + }; +} diff --git a/js/actionCreators/milkdrop.ts b/js/actionCreators/milkdrop.ts index d8c8e611..aec8fd38 100644 --- a/js/actionCreators/milkdrop.ts +++ b/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 }; } diff --git a/js/actionCreators/windows.ts b/js/actionCreators/windows.ts index 13c3a67d..c57a7a3d 100644 --- a/js/actionCreators/windows.ts +++ b/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 }; } diff --git a/js/components/App.tsx b/js/components/App.tsx index f24ceb82..83002ae9 100644 --- a/js/components/App.tsx +++ b/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 { _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, diff --git a/js/components/FocusTarget.tsx b/js/components/FocusTarget.tsx index 87e8b8c3..b3a5deae 100644 --- a/js/components/FocusTarget.tsx +++ b/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(null); useEffect(() => { @@ -48,6 +52,7 @@ function FocusTarget(props: Props) {
diff --git a/js/components/MainWindow/index.tsx b/js/components/MainWindow/index.tsx index f97ba3d8..bf9e609c 100644 --- a/js/components/MainWindow/index.tsx +++ b/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; diff --git a/js/components/PlaylistWindow/PlaylistShade.tsx b/js/components/PlaylistWindow/PlaylistShade.tsx index 2f9bf4fc..8b5e2146 100644 --- a/js/components/PlaylistWindow/PlaylistShade.tsx +++ b/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[]; } diff --git a/js/reducers/windows.ts b/js/reducers/windows.ts index 6c6c96cd..a04f183f 100644 --- a/js/reducers/windows.ts +++ b/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; diff --git a/js/selectors.ts b/js/selectors.ts index b2457f48..b895baf4 100644 --- a/js/selectors.ts +++ b/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; } diff --git a/js/serializedStates/v1Types.ts b/js/serializedStates/v1Types.ts index 533f988e..d94450d2 100644 --- a/js/serializedStates/v1Types.ts +++ b/js/serializedStates/v1Types.ts @@ -13,7 +13,7 @@ export interface WindowsSerializedStateV1 { position: { x: number; y: number }; }; }; - focused: string; + focused: string | null; } export interface DisplaySerializedStateV1 { diff --git a/js/types.ts b/js/types.ts index 87e80581..ce777bdb 100644 --- a/js/types.ts +++ b/js/types.ts @@ -338,7 +338,7 @@ export type Action = } | { type: "SET_FOCUSED_WINDOW"; - window: WindowId; + window: WindowId | null; } | { type: "TOGGLE_WINDOW_SHADE_MODE";