diff --git a/js/components/MilkdropWindow/Milkdrop.js b/js/components/MilkdropWindow/Milkdrop.js index 9e44cb6f..f1dc30a8 100644 --- a/js/components/MilkdropWindow/Milkdrop.js +++ b/js/components/MilkdropWindow/Milkdrop.js @@ -179,6 +179,24 @@ export default class Milkdrop extends React.Component { } } + async loadPresets(presetFiles) { + const presets = {}; + const milkFiles = Array.from(presetFiles).filter(file => + file.name.endsWith(".milk") + ); + for (let i = 0; i < milkFiles.length; i++) { + const file = milkFiles[i]; + presets[file.name] = { file }; + } + const numPresets = this.props.presets.loadPresets(presets); + this.selectPreset( + await this.props.presets.selectIndex( + Math.floor(Math.random() * numPresets) + ), + PRESET_TRANSITION_SECONDS + ); + } + closePresetOverlay() { this.setState({ presetOverlay: false }); } @@ -196,6 +214,7 @@ export default class Milkdrop extends React.Component { selectPreset={async idx => { this.selectPreset(await this.props.presets.selectIndex(idx), 0); }} + loadPresets={async presetFiles => this.loadPresets(presetFiles)} closeOverlay={() => this.closePresetOverlay()} /> )} diff --git a/js/components/MilkdropWindow/PresetOverlay.js b/js/components/MilkdropWindow/PresetOverlay.js index 1cb28f03..7bc97d22 100644 --- a/js/components/MilkdropWindow/PresetOverlay.js +++ b/js/components/MilkdropWindow/PresetOverlay.js @@ -1,4 +1,5 @@ import React from "react"; +import { promptForFileReferences } from "../../fileUtils"; class PresetOverlay extends React.Component { constructor(props) { @@ -21,7 +22,7 @@ class PresetOverlay extends React.Component { _handleFocusedKeyboardInput = e => { switch (e.keyCode) { case 38: // up arrow - this.setState({ presetIdx: Math.max(this.state.presetIdx - 1, 0) }); + this.setState({ presetIdx: Math.max(this.state.presetIdx - 1, -1) }); e.stopPropagation(); break; case 40: // down arrow @@ -34,7 +35,11 @@ class PresetOverlay extends React.Component { e.stopPropagation(); break; case 13: // enter - this.props.selectPreset(this.state.presetIdx); + if (this.state.presetIdx === -1) { + this.loadLocalDir(); + } else { + this.props.selectPreset(this.state.presetIdx); + } e.stopPropagation(); break; case 27: // escape @@ -44,6 +49,11 @@ class PresetOverlay extends React.Component { } }; + async loadLocalDir() { + const fileReferences = await promptForFileReferences({ directory: true }); + this.props.loadPresets(fileReferences); + } + render() { if (!this.props.presetKeys) { return ( @@ -67,12 +77,13 @@ class PresetOverlay extends React.Component { presetListLen = Math.min(Math.max(presetListLen, 3), numPresets); presetListLen = presetListLen % 2 ? presetListLen : presetListLen - 1; const halfPresetListLen = Math.floor(presetListLen / 2); - let startIdx = Math.max(this.state.presetIdx - halfPresetListLen, 0); + let startIdx = Math.max(this.state.presetIdx - halfPresetListLen, -1); let endIdx = Math.min(startIdx + presetListLen, numPresets); if (endIdx >= numPresets) { - startIdx = Math.max(endIdx - presetListLen, 0); + startIdx = Math.max(endIdx - presetListLen, -1); endIdx = Math.min(startIdx + presetListLen, numPresets); } + startIdx = Math.max(startIdx, 0); // ensure startIdx >= 0 after endIdx is calculated const presets = this.props.presetKeys.slice(startIdx, endIdx); const presetElms = presets.map((presetName, i) => { let color; @@ -94,6 +105,20 @@ class PresetOverlay extends React.Component { ); }); + if (this.state.presetIdx - halfPresetListLen < 0) { + let color; + if (this.state.presetIdx === -1) { + color = "#FF5050"; + } else { + color = "#CCCCCC"; + } + presetElms.unshift( +