From fec281dece9263dd446e7dd460f4f4af471af8b4 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Fri, 13 Oct 2023 17:59:30 +0000
Subject: [PATCH] support sliders with profiles

---
 .../components/slidersWithPresets/index.jsx   | 127 +++++++++++++
 .../app/constants/settings/player/index.jsx   |  62 +++----
 .../player/items/player.compressor/index.jsx  |   8 +
 .../settings/player/items/player.eq/index.jsx |   8 +
 packages/app/src/cores/player/presets.js      | 117 ++++++++++++
 .../player/processors/compressorNode/index.js | 120 ++++++++++---
 .../cores/player/processors/eqNode/index.js   | 169 +++++++++++-------
 7 files changed, 483 insertions(+), 128 deletions(-)
 create mode 100644 packages/app/constants/settings/components/slidersWithPresets/index.jsx
 create mode 100644 packages/app/constants/settings/player/items/player.compressor/index.jsx
 create mode 100644 packages/app/constants/settings/player/items/player.eq/index.jsx
 create mode 100644 packages/app/src/cores/player/presets.js

diff --git a/packages/app/constants/settings/components/slidersWithPresets/index.jsx b/packages/app/constants/settings/components/slidersWithPresets/index.jsx
new file mode 100644
index 00000000..634f290f
--- /dev/null
+++ b/packages/app/constants/settings/components/slidersWithPresets/index.jsx
@@ -0,0 +1,127 @@
+import React from "react"
+import { Select, Input, Button, Modal } from "antd"
+import { Icons } from "components/Icons"
+
+import Sliders from "../sliderValues"
+
+export default (props) => {
+    const [selectedPreset, setSelectedPreset] = React.useState(props.controller.presets.currentPresetKey)
+    const [presets, setPresets] = React.useState(props.controller.presets.presets ?? {})
+
+    const createPreset = (key) => {
+        setPresets(props.controller.createPreset(key))
+        setSelectedPreset(key)
+    }
+
+    const handleCreateNewPreset = () => {
+        app.layout.modal.open("create_preset", (props) => {
+            const [presetKey, setPresetKey] = React.useState("")
+
+            return <div
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "10px",
+                    width: "100%",
+                }}
+            >
+                <h3>New preset</h3>
+
+                <Input
+                    placeholder="New preset name"
+                    value={presetKey}
+                    onChange={(e) => {
+                        setPresetKey(e.target.value.trim())
+                    }}
+                />
+
+                <Button
+                    type="primary"
+                    disabled={!presetKey || presetKey.length === 0}
+                    onClick={() => {
+                        createPreset(presetKey)
+
+                        props.close()
+                    }}
+                >
+                    Create
+                </Button>
+            </div>
+        })
+    }
+
+    const handleDeletePreset = () => {
+        Modal.confirm({
+            title: "Delete preset",
+            content: "Are you sure you want to delete this preset?",
+            onOk: () => {
+                props.controller.deletePreset(selectedPreset)
+                setPresets(props.controller.presets.presets ?? {})
+                setSelectedPreset(props.controller.presets.currentPresetKey)
+            }
+        })
+    }
+
+    const options = [
+        {
+            value: "new",
+            label: <span><Icons.MdAdd /> Create new</span>,
+        },
+        ...Object.keys(presets).map((key) => {
+            return {
+                value: key,
+                label: key,
+            }
+        })
+    ]
+
+    React.useEffect(() => {
+        const presets = props.controller.presets.presets ?? {}
+        const preset = presets[selectedPreset]
+
+        if (props.controller.presets.currentPresetKey !== selectedPreset) {
+            props.controller.changePreset(selectedPreset)
+        }
+
+        props.ctx.updateCurrentValue(preset)
+    }, [selectedPreset])
+
+    return <>
+        <div
+            style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "5px",
+            }}
+        >
+            <Icons.MdList
+                style={{
+                    margin: "0"
+                }}
+            />
+            <Select
+                style={{
+                    width: "50%"
+                }}
+                value={selectedPreset}
+                options={options}
+                onChange={(key) => {
+                    if (key === "new") {
+                        handleCreateNewPreset()
+                    } else {
+                        setSelectedPreset(key)
+                    }
+                }}
+            />
+            <Button
+                onClick={handleDeletePreset}
+                icon={<Icons.MdDelete />}
+                disabled={selectedPreset === "default"}
+            />
+        </div>
+
+        <Sliders
+            {...props}
+        />
+    </>
+}
\ No newline at end of file
diff --git a/packages/app/constants/settings/player/index.jsx b/packages/app/constants/settings/player/index.jsx
index 3fcc8935..da9ee37d 100755
--- a/packages/app/constants/settings/player/index.jsx
+++ b/packages/app/constants/settings/player/index.jsx
@@ -1,5 +1,7 @@
 import loadable from "@loadable/component"
 
+
+
 export default {
     id: "player",
     icon: "PlayCircleOutlined",
@@ -104,27 +106,10 @@ export default {
             group: "general",
             description: "Adjust compression values (Warning: may cause distortion when changing values)",
             experimental: true,
-            extraActions: [
-                {
-                    id: "reset",
-                    title: "Reset",
-                    icon: "MdRefresh",
-                    onClick: (ctx) => {
-                        const values = app.cores.player.compressor.resetDefaultValues()
-
-                        ctx.updateCurrentValue(values)
-                    }
-                }
-            ],
-            defaultValue: () => {
-                return app.cores.player.compressor.values
+            dependsOn: {
+                "player.compressor": true
             },
-            onUpdate: (value) => {
-                app.cores.player.compressor.modifyValues(value)
-
-                return value
-            },
-            component: loadable(() => import("../components/sliderValues")),
+            component: loadable(() => import("./items/player.compressor")),
             props: {
                 valueFormat: (value) => `${value}dB`,
                 sliders: [
@@ -163,8 +148,22 @@ export default {
                     },
                 ],
             },
-            dependsOn: {
-                "player.compressor": true
+            extraActions: [
+                {
+                    id: "reset",
+                    title: "Reset",
+                    icon: "MdRefresh",
+                    onClick: async (ctx) => {
+                        const values = await app.cores.player.compressor.resetDefaultValues()
+
+                        ctx.updateCurrentValue(values)
+                    }
+                }
+            ],
+            onUpdate: (value) => {
+                app.cores.player.compressor.modifyValues(value)
+
+                return value
             },
             storaged: false,
         },
@@ -201,7 +200,7 @@ export default {
             group: "general",
             icon: "MdGraphicEq",
             description: "Enable equalizer for audio output",
-            component: loadable(() => import("../components/sliderValues")),
+            component: loadable(() => import("./items/player.eq")),
             extraActions: [
                 {
                     id: "reset",
@@ -212,12 +211,12 @@ export default {
 
                         ctx.updateCurrentValue(values)
                     }
-                }
+                },
             ],
             usePadding: false,
             props: {
                 valueFormat: (value) => `${value}dB`,
-                marks:[
+                marks: [
                     {
                         value: 0,
                     }
@@ -286,20 +285,9 @@ export default {
                     }
                 ]
             },
-            defaultValue: () => {
-                const values = app.cores.player.eq.values().eqValues
-
-                return Object.keys(values).reduce((acc, key) => {
-                    acc[key] = values[key].gain
-
-                    return acc
-                }, {})
-            },
             onUpdate: (value) => {
                 const values = Object.keys(value).reduce((acc, key) => {
-                    acc[key] = {
-                        gain: value[key]
-                    }
+                    acc[key] = value[key]
 
                     return acc
                 }, {})
diff --git a/packages/app/constants/settings/player/items/player.compressor/index.jsx b/packages/app/constants/settings/player/items/player.compressor/index.jsx
new file mode 100644
index 00000000..caafdb6d
--- /dev/null
+++ b/packages/app/constants/settings/player/items/player.compressor/index.jsx
@@ -0,0 +1,8 @@
+import SlidersWithPresets from "../../../components/slidersWithPresets"
+
+export default (props) => {
+    return <SlidersWithPresets
+        {...props}
+        controller={app.cores.player.compressor}
+    />
+}
\ No newline at end of file
diff --git a/packages/app/constants/settings/player/items/player.eq/index.jsx b/packages/app/constants/settings/player/items/player.eq/index.jsx
new file mode 100644
index 00000000..52ea7de6
--- /dev/null
+++ b/packages/app/constants/settings/player/items/player.eq/index.jsx
@@ -0,0 +1,8 @@
+import SlidersWithPresets from "../../../components/slidersWithPresets"
+
+export default (props) => {
+    return <SlidersWithPresets
+        {...props}
+        controller={app.cores.player.eq}
+    />
+}
\ No newline at end of file
diff --git a/packages/app/src/cores/player/presets.js b/packages/app/src/cores/player/presets.js
new file mode 100644
index 00000000..a8fa40cb
--- /dev/null
+++ b/packages/app/src/cores/player/presets.js
@@ -0,0 +1,117 @@
+import AudioPlayerStorage from "./player.storage"
+
+export default class Presets {
+    constructor({
+        storage_key,
+        defaultPresetValue,
+    }) {
+        if (!storage_key) {
+            throw new Error("storage_key is required")
+        }
+
+        this.storage_key = storage_key
+        this.defaultPresetValue = defaultPresetValue
+
+        return this
+    }
+
+    get presets() {
+        return AudioPlayerStorage.get(`${this.storage_key}_presets`) ?? {
+            default: this.defaultPresetValue
+        }
+    }
+
+    set presets(presets) {
+        AudioPlayerStorage.set(`${this.storage_key}_presets`, presets)
+
+        return presets
+    }
+
+    set currentPresetKey(key) {
+        AudioPlayerStorage.set(`${this.storage_key}_current-key`, key)
+
+        return key
+    }
+
+    get currentPresetKey() {
+        return AudioPlayerStorage.get(`${this.storage_key}_current-key`) ?? "default"
+    }
+
+    get currentPresetValues() {
+        const presets = this.presets
+        const key = this.currentPresetKey
+
+        if (!presets || !presets[key]) {
+            return this.defaultPresetValue
+        }
+
+        return presets[key]
+    }
+
+    deletePreset(key) {
+        if (key === "default") {
+            app.message.error("Cannot delete default preset")
+            return false
+        }
+
+        if (this.currentPresetKey === key) {
+            this.changePreset("default")
+        }
+
+        let presets = this.presets
+
+        delete presets[key]
+
+        this.presets = presets
+
+        return presets
+    }
+
+    createPreset(key, values) {
+        let presets = this.presets
+
+        if (presets[key]) {
+            app.message.error("Preset already exists")
+            return false
+        }
+
+        presets[key] = values ?? this.defaultPresetValue
+
+        this.presets = presets
+
+        return presets[key]
+    }
+
+    changePreset(key) {
+        let presets = this.presets
+
+        // create new one
+        if (!presets[key]) {
+            presets[key] = this.defaultPresetValue
+
+            this.presets = presets
+        }
+
+        this.currentPresetKey = key
+
+        return presets[key]
+    }
+
+    setToCurrent(values) {
+        let preset = this.currentPresetValues
+
+        preset = {
+            ...preset,
+            ...values,
+        }
+
+        // update presets
+        let presets = this.presets
+
+        presets[this.currentPresetKey] = preset
+
+        this.presets = presets
+
+        return preset
+    }
+}
\ No newline at end of file
diff --git a/packages/app/src/cores/player/processors/compressorNode/index.js b/packages/app/src/cores/player/processors/compressorNode/index.js
index 14aa0083..26439949 100644
--- a/packages/app/src/cores/player/processors/compressorNode/index.js
+++ b/packages/app/src/cores/player/processors/compressorNode/index.js
@@ -1,40 +1,110 @@
-import AudioPlayerStorage from "../../player.storage"
+import { Modal } from "antd"
 import ProcessorNode from "../node"
+import Presets from "../../presets"
 
 export default class CompressorProcessorNode extends ProcessorNode {
+    constructor(props) {
+        super(props)
+
+        this.presets_controller = new Presets({
+            storage_key: "compressor",
+            defaultPresetValue: {
+                threshold: -50,
+                knee: 40,
+                ratio: 12,
+                attack: 0.003,
+                release: 0.25,
+            },
+        })
+
+        this.state = {
+            compressorValues: this.presets_controller.currentPresetValues,
+        }
+
+        this.exposeToPublic = {
+            presets: new Proxy(this.presets_controller, {
+                get: function (target, key) {
+                    if (!key) {
+                        return target
+                    }
+
+                    return target[key]
+                }
+            }),
+            deletePreset: this.deletePreset.bind(this),
+            createPreset: this.createPreset.bind(this),
+            changePreset: this.changePreset.bind(this),
+            resetDefaultValues: this.resetDefaultValues.bind(this),
+            modifyValues: this.modifyValues.bind(this),
+            detach: this._detach.bind(this),
+            attach: this._attach.bind(this),
+            values: this.state.compressorValues,
+        }
+    }
+
     static refName = "compressor"
     static dependsOnSettings = ["player.compressor"]
-    static defaultCompressorValues = {
-        threshold: -50,
-        knee: 40,
-        ratio: 12,
-        attack: 0.003,
-        release: 0.25,
+
+    deletePreset(key) {
+        this.changePreset("default")
+
+        this.presets_controller.deletePreset(key)
+
+        return this.presets_controller.presets
     }
 
-    state = {
-        compressorValues: AudioPlayerStorage.get("compressor") ?? CompressorProcessorNode.defaultCompressorValues,
+    createPreset(key, values) {
+        this.state = {
+            ...this.state,
+            compressorValues: this.presets_controller.createPreset(key, values),
+        }
+
+        this.presets_controller.changePreset(key)
+
+        return this.presets_controller.presets
     }
 
-    exposeToPublic = {
-        modifyValues: function (values) {
-            this.state.compressorValues = {
-                ...this.state.compressorValues,
-                ...values,
-            }
+    changePreset(key) {
+        const values = this.presets_controller.changePreset(key)
 
-            AudioPlayerStorage.set("compressor", this.state.compressorValues)
+        this.state = {
+            ...this.state,
+            compressorValues: values,
+        }
 
-            this.applyValues()
-        }.bind(this),
-        resetDefaultValues: function () {
-            this.exposeToPublic.modifyValues(CompressorProcessorNode.defaultCompressorValues)
+        this.applyValues()
 
-            return this.state.compressorValues
-        }.bind(this),
-        detach: this._detach.bind(this),
-        attach: this._attach.bind(this),
-        values: this.state.compressorValues,
+        return values
+    }
+
+    modifyValues(values) {
+        values = this.presets_controller.setToCurrent(values)
+
+        this.state.compressorValues = {
+            ...this.state.compressorValues,
+            ...values,
+        }
+
+        this.applyValues()
+
+        return this.state.compressorValues
+    }
+
+    async resetDefaultValues() {
+        return await new Promise((resolve) => {
+            Modal.confirm({
+                title: "Reset to default values?",
+                content: "Are you sure you want to reset to default values?",
+                onOk: () => {
+                    this.modifyValues(this.presets_controller.defaultPresetValue)
+
+                    resolve(this.state.compressorValues)
+                },
+                onCancel: () => {
+                    resolve(this.state.compressorValues)
+                }
+            })
+        })
     }
 
     async init(AudioContext) {
diff --git a/packages/app/src/cores/player/processors/eqNode/index.js b/packages/app/src/cores/player/processors/eqNode/index.js
index 41b8c3ec..88f4066e 100644
--- a/packages/app/src/cores/player/processors/eqNode/index.js
+++ b/packages/app/src/cores/player/processors/eqNode/index.js
@@ -1,70 +1,119 @@
+import { Modal } from "antd"
 import ProcessorNode from "../node"
-import AudioPlayerStorage from "../../player.storage"
+import Presets from "../../presets"
 
 export default class EqProcessorNode extends ProcessorNode {
-    static refName = "eq"
-    static lock = true
+    constructor(props) {
+        super(props)
 
-    static defaultEqValue = {
-        32: {
-            gain: 0,
-        },
-        64: {
-            gain: 0,
-        },
-        125: {
-            gain: 0,
-        },
-        250: {
-            gain: 0,
-        },
-        500: {
-            gain: 0,
-        },
-        1000: {
-            gain: 0,
-        },
-        2000: {
-            gain: 0,
-        },
-        4000: {
-            gain: 0,
-        },
-        8000: {
-            gain: 0,
-        },
-        16000: {
-            gain: 0,
+        this.presets_controller = new Presets({
+            storage_key: "eq",
+            defaultPresetValue: {
+                32: 0,
+                64: 0,
+                125: 0,
+                250: 0,
+                500: 0,
+                1000: 0,
+                2000: 0,
+                4000: 0,
+                8000: 0,
+                16000: 0,
+            },
+        })
+
+        this.state = {
+            eqValues: this.presets_controller.currentPresetValues,
+        }
+
+        this.exposeToPublic = {
+            presets: new Proxy(this.presets_controller, {
+                get: function (target, key) {
+                    if (!key) {
+                        return target
+                    }
+
+                    return target[key]
+                },
+            }),
+            deletePreset: this.deletePreset.bind(this),
+            createPreset: this.createPreset.bind(this),
+            changePreset: this.changePreset.bind(this),
+            modifyValues: this.modifyValues.bind(this),
+            resetDefaultValues: this.resetDefaultValues.bind(this),
         }
     }
 
-    state = {
-        eqValues: AudioPlayerStorage.get("eq_values") ?? EqProcessorNode.defaultEqValue,
+    static refName = "eq"
+    static lock = true
+
+    deletePreset(key) {
+        this.changePreset("default")
+
+        this.presets_controller.deletePreset(key)
+
+        return this.presets_controller.presets
     }
 
-    exposeToPublic = {
-        modifyValues: function (values) {
-            Object.keys(values).forEach((key) => {
-                if (isNaN(key)) {
-                    delete values[key]
-                }
-            })
+    createPreset(key, values) {
+        this.state = {
+            ...this.state,
+            eqValues: this.presets_controller.createPreset(key, values),
+        }
 
-            this.state.eqValues = {
-                ...this.state.eqValues,
-                ...values,
+        this.presets_controller.changePreset(key)
+
+        return this.presets_controller.presets
+    }
+
+    changePreset(key) {
+        const values = this.presets_controller.changePreset(key)
+
+        this.state = {
+            ...this.state,
+            eqValues: values,
+        }
+
+        this.applyValues()
+
+        return values
+    }
+
+    modifyValues(values) {
+        values = this.presets_controller.setToCurrent(values)
+
+        this.state = {
+            ...this.state,
+            eqValues: values,
+        }
+
+        this.applyValues()
+
+        return values
+    }
+
+    resetDefaultValues() {
+        Modal.confirm({
+            title: "Reset to default values?",
+            content: "Are you sure you want to reset to default values?",
+            onOk: () => {
+                this.modifyValues(this.presets_controller.defaultPresetValue)
             }
+        })
 
-            AudioPlayerStorage.set("eq_values", this.state.eqValues)
+        return this.state.eqValues
+    }
 
-            this.applyValues()
-        }.bind(this),
-        resetDefaultValues: function () {
-            this.exposeToPublic.modifyValues(EqProcessorNode.defaultEqValue)
+    applyValues() {
+        // apply to current instance
+        this.processor.eqNodes.forEach((processor) => {
+            const gainValue = this.state.eqValues[processor.frequency.value]
 
-            return this.state
-        }.bind(this),
-        values: () => this.state,
+            if (processor.gain.value !== gainValue) {
+                console.debug(`[EQ] Applying values to ${processor.frequency.value} Hz frequency with gain ${gainValue}`)
+                processor.gain.value = gainValue
+            }
+        })
     }
 
     async init() {
@@ -81,7 +130,7 @@ export default class EqProcessorNode extends ProcessorNode {
         const values = Object.entries(this.state.eqValues).map((entry) => {
             return {
                 freq: parseFloat(entry[0]),
-                gain: parseFloat(entry[1].gain),
+                gain: parseFloat(entry[1]),
             }
         })
 
@@ -116,16 +165,4 @@ export default class EqProcessorNode extends ProcessorNode {
         // set last processor for processor node can properly connect to the next node
         this.processor._last = this.processor.eqNodes.at(-1)
     }
-
-    applyValues() {
-        // apply to current instance
-        this.processor.eqNodes.forEach((processor) => {
-            const gainValue = this.state.eqValues[processor.frequency.value].gain
-
-            if (processor.gain.value !== gainValue) {
-                console.debug(`[EQ] Applying values to ${processor.frequency.value} Hz frequency with gain ${gainValue}`)
-                processor.gain.value = this.state.eqValues[processor.frequency.value].gain
-            }
-        })
-    }
 }
\ No newline at end of file