Actualiser src/features/menu/index.jsx

2026-08-09 16:14:56 +02:00
parent b8c4773625
commit cf07e1a07b
1 changed files with 0 additions and 0 deletions
@@ -0,0 +1,165 @@
+import { useRef, useState, useEffect } from 'react';
+import { Select } from '../utils/components';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  parameterUpdateTab,
+  parameterUpdated,
+  parameterFromFile,
+  parameterRefreshAll,
+  selectEntities,
+} from '../editor/parameters/parameterSlice'; // probably temporarily here
+import { return_store_from_file, return_file_from_store } from '../io';
+import download from 'downloadjs';
+
+export default function Menu() {
+  const [file, setFile] = useState(null);
+  const fileRef = useRef(null);
+  const state = useSelector((state) => selectEntities(state));
+  const activeTab = useSelector((state) => state.parameters.activeTab);
+  const dispatch = useDispatch();
+  const reader = new FileReader();
+  const loadFile = (f) => {
+    reader.onloadend = (e) => {
+      setFile(new Uint8Array(e.target.result));
+    };
+    reader.readAsArrayBuffer(f);
+  };
+
+  useEffect(() => {
+    if (file) {
+      dispatch(parameterFromFile(return_store_from_file(file)));
+    }
+  }, [file, dispatch]);
+
+  useEffect(() => {
+    if (state.patch.mode === 'Vocoder') {
+      dispatch(parameterUpdateTab('Vocoder'));
+    }
+    if (state.patch.mode === 'Single' || state.patch.mode === 'Multiple') {
+      dispatch(parameterUpdateTab('Timbre1'));
+    }
+  }, [state.patch.mode, dispatch]);
+
+  return (
+    <div className="h-screen col-span-1 flex flex-col justify-around border-solid border-r border-gray-300 bg-white px-4">
+      <div className="menu-patch-container">
+        <div className="patch-name">
+          <input
+            className="block w-full rounded-md rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+            placeholder="Patch Name"
+            type="text"
+            maxLength="12"
+            value={state.patch.name}
+            onChange={(e) => {
+              dispatch(
+                parameterUpdated({
+                  id: 'Patch',
+                  changes: { name: e.target.value },
+                })
+              );
+            }}
+          />
+        </div>
+        <div className="my-3 flex flex-col items-center space-y-2">
+          <button
+            className="btn"
+            onClick={() => {
+              dispatch(parameterRefreshAll());
+            }}
+          >
+            New Patch
+          </button>
+          <button
+            className="btn"
+            onClick={() => {
+              fileRef.current.click();
+            }}
+          >
+            Load Patch
+          </button>
+          <button
+            className="btn"
+            onClick={() => {
+              download(
+                return_file_from_store(state),
+                'microKORG_patch.syx',
+                'application/octet-bianry'
+              );
+            }}
+          >
+            Save Patch
+          </button>
+          <input
+            className="hidden"
+            type="file"
+            accept=".syx"
+            ref={fileRef}
+            onChange={(e) => {
+              loadFile(e.target.files[0]);
+            }}
+          />
+        </div>
+        <div className="patch-settings">
+          <Select
+            className="w-full select"
+            value={state.patch.mode}
+            list={[
+              { value: 'Single' },
+              { value: 'Multiple' },
+              { value: 'Vocoder' },
+            ]}
+            onChange={(value) => {
+              dispatch(
+                parameterUpdated({
+                  id: 'patch',
+                  changes: { mode: value },
+                })
+              );
+            }}
+          />
+        </div>
+      </div>
+      <div className="my-1 flex flex-col items-center space-y-2">
+        <button
+          disabled={state.patch.mode === 'Vocoder'}
+          className={activeTab === 'Timbre1' ? `btn btn-active` : `btn`}
+          onClick={() => {
+            dispatch(parameterUpdateTab('Timbre1'));
+          }}
+        >
+          Timbre 1
+        </button>
+        <button
+          disabled={state.patch.mode !== 'Multiple'}
+          className={activeTab === 'Timbre2' ? `btn btn-active` : `btn`}
+          onClick={() => {
+            dispatch(parameterUpdateTab('Timbre2'));
+          }}
+        >
+          Timbre 2
+        </button>
+        <button
+          disabled={state.patch.mode !== 'Vocoder'}
+          className={activeTab === 'Vocoder' ? `btn btn-active` : `btn`}
+          onClick={() => {
+            dispatch(parameterUpdateTab('Vocoder'));
+          }}
+        >
+          Vocoder
+        </button>
+        <button
+          className={activeTab === 'Effects' ? `btn btn-active` : `btn`}
+          onClick={() => {
+            dispatch(parameterUpdateTab('Effects'));
+          }}
+        >
+          Arp/FX
+        </button>
+      </div>
+      <div className="w-full text-center text-xl font-semibold">
+        <span className="text-3xl pb-6">Alapatch</span> <br /> A microKORG Patch
+        Editor
+      </div>
+    </div>
+  );
+}