diff --git a/js/actionCreators/index.ts b/js/actionCreators/index.ts index 53ea5305..34560671 100644 --- a/js/actionCreators/index.ts +++ b/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())) + ); + }; +} diff --git a/js/actionTypes.ts b/js/actionTypes.ts index 44eb675f..8daa196b 100644 --- a/js/actionTypes.ts +++ b/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"; diff --git a/js/components/MilkdropWindow/MilkdropContextMenu.tsx b/js/components/MilkdropWindow/MilkdropContextMenu.tsx index a2e3e2a3..9fe8981f 100644 --- a/js/components/MilkdropWindow/MilkdropContextMenu.tsx +++ b/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( diff --git a/js/components/MilkdropWindow/index.tsx b/js/components/MilkdropWindow/index.tsx index 8a381e94..f8dc13f9 100644 --- a/js/components/MilkdropWindow/index.tsx +++ b/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(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 ( - + @@ -116,9 +113,9 @@ function Milkdrop(props: Props) { return ( {(windowSize: { width: number; height: number }) => { - const size = isFullscreen ? screenSize : windowSize; + const size = props.fullscreen ? screenSize : windowSize; return ( - + {props.overlay && ( @@ -127,8 +124,11 @@ function Milkdrop(props: Props) { onFocusedKeyDown={props.onFocusedKeyDown} /> )} - -
+ +
@@ -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()), diff --git a/js/reducers/milkdrop.ts b/js/reducers/milkdrop.ts index 78f9b2e1..282c63bf 100644 --- a/js/reducers/milkdrop.ts +++ b/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: diff --git a/js/selectors.ts b/js/selectors.ts index bb09a9af..c0e9d504 100644 --- a/js/selectors.ts +++ b/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 { diff --git a/js/types.ts b/js/types.ts index 46629658..26694495 100644 --- a/js/types.ts +++ b/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";