clean up settings constructor

.vscode/launch.json

@@ -15,6 +15,9 @@
 				"**/*.min.js",
 				"**/vendor/**"
 			],
+			"runtimeArgs": [
+				"--autoplay-policy=no-user-gesture-required"
+			]
 		},
 		{
 			"name": "Data:stations",

server/scripts/modules/media.mjs

@@ -5,7 +5,12 @@ let playlist;
 let currentTrack = 0;
 let player;
 
-const mediaPlaying = new Setting('mediaPlaying', 'Media Playing', 'boolean', false, null, true);
+const mediaPlaying = new Setting('mediaPlaying', {
+	name: 'Media Playing',
+	type: 'boolean',
+	defaultValue: false,
+	sticky: true,
+});
 
 document.addEventListener('DOMContentLoaded', () => {
 	// add the event handler to the page

server/scripts/modules/settings.mjs

@@ -8,27 +8,54 @@ document.addEventListener('DOMContentLoaded', () => {
 const settings = { speed: { value: 1.0 } };
 
 const init = () => {
-	// create settings
-	settings.wide = new Setting('wide', 'Widescreen', 'checkbox', false, wideScreenChange, true);
-	settings.kiosk = new Setting('kiosk', 'Kiosk', 'checkbox', false, kioskChange, false);
-	settings.speed = new Setting('speed', 'Speed', 'select', 1.0, null, true, [
-		[0.5, 'Very Fast'],
-		[0.75, 'Fast'],
-		[1.0, 'Normal'],
-		[1.25, 'Slow'],
-		[1.5, 'Very Slow'],
-	]);
-	settings.units = new Setting('units', 'Units', 'select', 'us', unitChange, true, [
-		['us', 'US'],
-		['si', 'Metric'],
-	]);
-	settings.refreshTime = new Setting('refreshTime', 'Refresh Time', 'select', 600_000, null, false, [
-		[30_000, 'TESTING'],
-		[300_000, '5 minutes'],
-		[600_000, '10 minutes'],
-		[900_000, '15 minutes'],
-		[1_800_000, '30 minutes'],
-	]);
+	// create settings see setting.mjs for defaults
+	settings.wide = new Setting('wide', {
+		name: 'Widescreen',
+		defaultValue: false,
+		changeAction: wideScreenChange,
+		sticky: true,
+	});
+	settings.kiosk = new Setting('kiosk', {
+		name: 'Kiosk',
+		defaultValue: false,
+		changeAction: kioskChange,
+		sticky: false,
+	});
+	settings.speed = new Setting('speed', {
+		name: 'Speed',
+		type: 'select',
+		defaultValue: 1.0,
+		values: [
+			[0.5, 'Very Fast'],
+			[0.75, 'Fast'],
+			[1.0, 'Normal'],
+			[1.25, 'Slow'],
+			[1.5, 'Very Slow'],
+		],
+	});
+	settings.units = new Setting('units', {
+		name: 'Units',
+		type: 'select',
+		defaultValue: 'us',
+		changeAction: unitChange,
+		values: [
+			['us', 'US'],
+			['si', 'Metric'],
+		],
+	});
+	settings.refreshTime = new Setting('refreshTime', {
+		type: 'select',
+		defaultValue: 600_000,
+		sticky: false,
+		values: [
+			[30_000, 'TESTING'],
+			[300_000, '5 minutes'],
+			[600_000, '10 minutes'],
+			[900_000, '15 minutes'],
+			[1_800_000, '30 minutes'],
+		],
+		visible: false,
+	});
 
 	// generate html objects
 	const settingHtml = Object.values(settings).map((d) => d.generate());

server/scripts/modules/utils/setting.mjs

@@ -2,41 +2,58 @@ import { parseQueryString } from '../share.mjs';
 
 const SETTINGS_KEY = 'Settings';
 
+const DEFAULTS = {
+	shortName: undefined,
+	name: undefined,
+	type: 'checkbox',
+	defaultValue: undefined,
+	changeAction: () => { },
+	sticky: true,
+	values: [],
+	visible: true,
+};
+
 class Setting {
-	constructor(shortName, name, type, defaultValue, changeAction, sticky, values) {
-		// store values
+	constructor(shortName, _options) {
+		if (shortName === undefined) {
+			throw new Error('No name provided for setting');
+		}
+		// merge options with defaults
+		const options = { ...DEFAULTS, ...(_options ?? {}) };
+
+		// store values and combine with defaults
 		this.shortName = shortName;
-		this.name = name;
-		this.defaultValue = defaultValue;
-		this.myValue = defaultValue;
-		this.type = type ?? 'checkbox';
-		this.sticky = sticky;
-		this.values = values;
-		// a default blank change function is provided
-		this.changeAction = changeAction ?? (() => { });
+		this.name = options.name ?? shortName;
+		this.defaultValue = options.defaultValue;
+		this.myValue = this.defaultValue;
+		this.type = options?.type;
+		this.sticky = options.sticky;
+		this.values = options.values;
+		this.visible = options.visible;
+		this.changeAction = options.changeAction;
 
 		// get value from url
-		const urlValue = parseQueryString()?.[`settings-${shortName}-${type}`];
+		const urlValue = parseQueryString()?.[`settings-${shortName}-${this.type}`];
 		let urlState;
-		if (type === 'checkbox' && urlValue !== undefined) {
+		if (this.type === 'checkbox' && urlValue !== undefined) {
 			urlState = urlValue === 'true';
 		}
-		if (type === 'select' && urlValue !== undefined) {
+		if (this.type === 'select' && urlValue !== undefined) {
 			urlState = parseFloat(urlValue);
 		}
-		if (type === 'select' && urlValue !== undefined && Number.isNaN(urlState)) {
+		if (this.type === 'select' && urlValue !== undefined && Number.isNaN(urlState)) {
 			// couldn't parse as a float, store as a string
 			urlState = urlValue;
 		}
 
 		// get existing value if present
 		const storedValue = urlState ?? this.getFromLocalStorage();
-		if (sticky && storedValue !== null) {
+		if ((this.sticky || urlValue !== undefined) && storedValue !== null) {
 			this.myValue = storedValue;
 		}
 
 		// call the change function on startup
-		switch (type) {
+		switch (this.type) {
 			case 'select':
 				this.selectChange({ target: { value: this.myValue } });
 				break;
@@ -142,6 +159,7 @@ class Setting {
 				if (storedValue !== undefined) {
 					switch (this.type) {
 						case 'boolean':
+						case 'checkbox':
 							return storedValue;
 						case 'select':
 							return storedValue;
@@ -187,6 +205,9 @@ class Setting {
 	}
 
 	generate() {
+		// don't generate a control for not visible items
+		if (!this.visible) return '';
+		// call the appropriate control generator
 		switch (this.type) {
 			case 'select':
 				return this.generateSelect();