diff --git a/js/actionCreators/index.ts b/js/actionCreators/index.ts index 8db758f4..09525dcd 100644 --- a/js/actionCreators/index.ts +++ b/js/actionCreators/index.ts @@ -104,7 +104,8 @@ export { appendPresetFileList, handlePresetDrop, loadPresets, - toggleRandomizePresets + toggleRandomizePresets, + togglePresetCycling } from "./milkdrop"; import * as Selectors from "../selectors"; diff --git a/js/actionCreators/milkdrop.ts b/js/actionCreators/milkdrop.ts index 888d84ab..c66b8126 100644 --- a/js/actionCreators/milkdrop.ts +++ b/js/actionCreators/milkdrop.ts @@ -5,7 +5,8 @@ import { RESOLVE_PRESET_AT_INDEX, TOGGLE_PRESET_OVERLAY, PRESET_REQUESTED, - TOGGLE_RANDOMIZE_PRESETS + TOGGLE_RANDOMIZE_PRESETS, + TOGGLE_PRESET_CYCLING } from "../actionTypes"; import * as Selectors from "../selectors"; import { @@ -196,3 +197,7 @@ export function togglePresetOverlay(): Dispatchable { export function toggleRandomizePresets(): Dispatchable { return { type: TOGGLE_RANDOMIZE_PRESETS }; } + +export function togglePresetCycling(): Dispatchable { + return { type: TOGGLE_PRESET_CYCLING }; +} diff --git a/js/actionTypes.ts b/js/actionTypes.ts index 94ec80fc..3a82bbe8 100644 --- a/js/actionTypes.ts +++ b/js/actionTypes.ts @@ -84,3 +84,4 @@ export const SELECT_PRESET_AT_INDEX = "SELECT_PRESET_AT_INDEX"; export const TOGGLE_PRESET_OVERLAY = "TOGGLE_PRESET_OVERLAY"; export const PRESET_REQUESTED = "PRESET_REQUESTED"; export const TOGGLE_RANDOMIZE_PRESETS = "TOGGLE_RANDOMIZE_PRESETS"; +export const TOGGLE_PRESET_CYCLING = "TOGGLE_PRESET_CYCLING"; diff --git a/js/components/MilkdropWindow/index.tsx b/js/components/MilkdropWindow/index.tsx index b308ad24..97bb6d39 100644 --- a/js/components/MilkdropWindow/index.tsx +++ b/js/components/MilkdropWindow/index.tsx @@ -21,6 +21,7 @@ const MILLISECONDS_BETWEEN_PRESET_TRANSITIONS = 15000; interface StateProps { desktop: boolean; overlay: boolean; + presetsAreCycling: boolean; } interface DispatchProps { @@ -29,6 +30,7 @@ interface DispatchProps { togglePresetOverlay(): void; selectRandomPreset(): void; toggleRandomize(): void; + toggleCycling(): void; handlePresetDrop(e: React.DragEvent): void; selectNextPreset(transitionType?: TransitionType): void; selectPreviousPreset(transitionType?: TransitionType): void; @@ -71,8 +73,7 @@ function Milkdrop(props: Props) { break; case 145: // scroll lock case 125: // F14 (scroll lock for OS X) - // this.presetCycle = !this.presetCycle; - // this._restartCycling(); + props.toggleCycling(); break; } }); @@ -80,12 +81,15 @@ function Milkdrop(props: Props) { // Cycle presets useEffect(() => { + if (!props.presetsAreCycling) { + return; + } const intervalId = setInterval( - props.selectRandomPreset, + props.selectNextPreset, MILLISECONDS_BETWEEN_PRESET_TRANSITIONS ); return () => clearImmediate(intervalId); - }, [props.selectRandomPreset]); + }, [props.selectNextPreset, props.presetsAreCycling]); const toggleFullscreen = useCallback(() => setIsFullscreen(!isFullscreen), [ setIsFullscreen @@ -133,7 +137,8 @@ function Milkdrop(props: Props) { const mapStateToProps = (state: AppState): StateProps => ({ desktop: Selectors.getMilkdropDesktopEnabled(state), - overlay: Selectors.getPresetOverlayOpen(state) + overlay: Selectors.getPresetOverlayOpen(state), + presetsAreCycling: Selectors.getPresetsAreCycling(state) }); const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ @@ -142,6 +147,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ togglePresetOverlay: () => dispatch(Actions.togglePresetOverlay()), selectRandomPreset: () => dispatch(Actions.selectRandomPreset()), toggleRandomize: () => dispatch(Actions.toggleRandomizePresets()), + toggleCycling: () => dispatch(Actions.togglePresetCycling()), handlePresetDrop: e => dispatch(Actions.handlePresetDrop(e)), selectNextPreset: (transitionType?: TransitionType) => dispatch(Actions.selectNextPreset(transitionType)), diff --git a/js/reducers/milkdrop.ts b/js/reducers/milkdrop.ts index 674a42d7..af0c7c78 100644 --- a/js/reducers/milkdrop.ts +++ b/js/reducers/milkdrop.ts @@ -7,7 +7,8 @@ import { SELECT_PRESET_AT_INDEX, TOGGLE_PRESET_OVERLAY, PRESET_REQUESTED, - TOGGLE_RANDOMIZE_PRESETS + TOGGLE_RANDOMIZE_PRESETS, + TOGGLE_PRESET_CYCLING } from "../actionTypes"; import * as Utils from "../utils"; import { TransitionType } from "../types"; @@ -21,6 +22,7 @@ export interface MilkdropState { butterchurn: any; transitionType: TransitionType; randomize: boolean; + cycling: boolean; } const defaultMilkdropState = { @@ -31,7 +33,8 @@ const defaultMilkdropState = { currentPresetIndex: null, butterchurn: null, transitionType: TransitionType.DEFAULT, - randomize: true + randomize: true, + cycling: true }; export const milkdrop = ( @@ -79,6 +82,8 @@ export const milkdrop = ( return { ...state, overlay: !state.overlay }; case TOGGLE_RANDOMIZE_PRESETS: return { ...state, randomize: !state.randomize }; + case TOGGLE_PRESET_CYCLING: + return { ...state, cycling: !state.cycling }; default: return state; } diff --git a/js/selectors.ts b/js/selectors.ts index 1a0b33aa..20281b6a 100644 --- a/js/selectors.ts +++ b/js/selectors.ts @@ -648,3 +648,7 @@ export function getPresetNames(state: AppState): string[] { export function getPresetOverlayOpen(state: AppState): boolean { return state.milkdrop.overlay; } + +export function getPresetsAreCycling(state: AppState): boolean { + return state.milkdrop.cycling; +} diff --git a/js/types.ts b/js/types.ts index 503f359d..939611f2 100644 --- a/js/types.ts +++ b/js/types.ts @@ -478,6 +478,7 @@ export type Action = | { type: "TOGGLE_RANDOMIZE_PRESETS"; } + | { type: "TOGGLE_PRESET_CYCLING" } | { type: "RESOLVE_PRESET_AT_INDEX"; index: number;