Support preset cycling

js/actionCreators/index.ts

@@ -104,7 +104,8 @@ export {
   appendPresetFileList,
   handlePresetDrop,
   loadPresets,
-  toggleRandomizePresets
+  toggleRandomizePresets,
+  togglePresetCycling
 } from "./milkdrop";
 
 import * as Selectors from "../selectors";

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 };
+}

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";

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)),

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;
   }

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;
+}

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;