feat: convert user configuration to YAML (#94)

Co-authored-by: Borewit <Borewit@users.noreply.github.com>

Author: Borewit

.gitignore

@@ -1,2 +1,5 @@
 **/node_modules
 package-lock.json
+
+# User configuration
+public/config.yaml

docs/server.md

@@ -14,15 +14,15 @@ You can also run the app locally with Node.js - see the [Building audioMotion](b
 !> **Playlists, Presets and Custom gradients** are saved to the browser's storage and will only be accessible in the same browser they were saved.
 The storage is also tied to the server **address and port**, so if any of those change, data saved on a different address/port won't be accessible.
 
-## config.json file
+## config.yaml file
 
-A **config.json** file in the same directory as audioMotion's _index.html_ allows you to configure some server options.
+A **config.yaml** file in the same directory as audioMotion's _index.html_ allows you to configure some server options.
 
-```config.json
+```yaml
 {
-  "defaultAccessMode": "local",
-  "enableLocalAccess": true,
-  "frontPanel": "open"
+  defaultAccessMode: local
+  enableLocalAccess: true
+  frontPanel: open
 }
 ```
 
@@ -40,7 +40,7 @@ The following URL parameters can also be used when accessing audioMotion:
 |-----------|-----------------|-------------|
 | **debug** | *none* | If present in the URL, app starts in [debug mode](users-manual.md#debug), which may help identify issues during the initialization stage
 | **mode**  | `local` \| `server` | Starts audioMotion in the desired access mode (local access must be enabled on the server)
-| **frontPanel** | `open` \| `close` | Same as the corresponding `config.json` option, but overrides the server configuration
+| **frontPanel** | `open` \| `close` | Same as the corresponding `config.yaml` option, but overrides the server configuration
 
 Use an **&** character to separate multiple parameters. Example usage:
 

package.json

@@ -17,6 +17,7 @@
     "css-minimizer-webpack-plugin": "^7.0.0",
     "http-server": "^14.1.1",
     "idb-keyval": "^6.2.1",
+    "js-yaml": "^4.1.0",
     "mini-css-extract-plugin": "^2.9.0",
     "music-metadata-browser": "^2.5.10",
     "notie": "^4.3.1",

public/config.json.example

@@ -0,0 +1,11 @@
+# Initial (first run) file access mode - user’s device or /music directory on serve
+# local | server
+defaultAccessMode: local
+
+# Whether to enable access to local device (true allows user to switch between local or server)
+# true | false
+enableLocalAccess: true
+
+# Initial state of the Media Panel (“close” expands the analyzer area)
+# open | close
+frontPanel: open

public/config.yaml.example

@@ -35,6 +35,7 @@ import * as fileExplorer from './file-explorer.js';
 import * as mm from 'music-metadata-browser';
 import './scrollIntoViewIfNeeded-polyfill.js';
 import { get, set, del } from 'idb-keyval';
+import * as yaml from 'js-yaml';
 
 import Sortable, { MultiDrag } from 'sortablejs';
 Sortable.mount( new MultiDrag() );
@@ -156,7 +157,7 @@ const OSD_SIZE_S = '0',
 	  OSD_SIZE_M = '1',
 	  OSD_SIZE_L = '2';
 
-// Valid values for the `frontPanel` URL parameter and config.json option
+// Valid values for the `frontPanel` URL parameter and config.yaml option
 const PANEL_CLOSE = 'close',
 	  PANEL_OPEN  = 'open';
 
@@ -208,7 +209,7 @@ const SCALEXY_OFF  = 0,
 	  SCALEX_NOTES = 2;
 
 // Server configuration filename and default values
-const SERVERCFG_FILE     = 'config.json',
+const SERVERCFG_FILE     = 'config.yaml',
 	  SERVERCFG_DEFAULTS = {
 	  	defaultAccessMode: FILEMODE_LOCAL,
 		enableLocalAccess: true,
@@ -837,7 +838,7 @@ let audioElement = [],
 	randomModeTimer,
 	serverHasMedia,				// music directory found on web server
 	skipping = false,
-	supportsFileSystemAPI,		// browser supports File System API (may be disabled via config.json)
+	supportsFileSystemAPI,		// browser supports File System API (may be disabled via config.yaml)
 	useFileSystemAPI,			// load music from local device when in web server mode
 	userPresets,
 	waitingMetadata = 0,
@@ -5179,17 +5180,18 @@ function updateRangeValue( el ) {
 		}
 	}
 
-	// Load server configuration options from config.json
+	// Load server configuration options from config.yaml
 	let response;
 
 	try {
 		response = await fetch( SERVERCFG_FILE );
 	}
 	catch( e ) {}
 
-	let serverConfig = response && response.ok ? await response.text() : '{}';
+	let serverConfig = response && response.ok ? await response.text() : '';
+
 	try {
-		serverConfig = JSON.parse( serverConfig );
+		serverConfig = yaml.load(serverConfig);
 	}
 	catch( err ) {
 		consoleLog( `Error parsing ${ SERVERCFG_FILE } - ${ err }`, true );