From 0a388cdb83fa9ef3dd07b3ffe4729920cd19d987 Mon Sep 17 00:00:00 2001 From: Matt Walsh Date: Tue, 8 Apr 2025 10:40:36 -0500 Subject: [PATCH] clean up settings constructor --- .vscode/launch.json | 3 ++ server/scripts/modules/media.mjs | 7 ++- server/scripts/modules/settings.mjs | 69 ++++++++++++++++-------- server/scripts/modules/utils/setting.mjs | 53 ++++++++++++------ 4 files changed, 94 insertions(+), 38 deletions(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index 97733cd..55e4fb6 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -15,6 +15,9 @@ "**/*.min.js", "**/vendor/**" ], + "runtimeArgs": [ + "--autoplay-policy=no-user-gesture-required" + ] }, { "name": "Data:stations", diff --git a/server/scripts/modules/media.mjs b/server/scripts/modules/media.mjs index 733b2f6..5250653 100644 --- a/server/scripts/modules/media.mjs +++ b/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 diff --git a/server/scripts/modules/settings.mjs b/server/scripts/modules/settings.mjs index babbe61..3bd67d7 100644 --- a/server/scripts/modules/settings.mjs +++ b/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()); diff --git a/server/scripts/modules/utils/setting.mjs b/server/scripts/modules/utils/setting.mjs index 576a297..5b9074f 100644 --- a/server/scripts/modules/utils/setting.mjs +++ b/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();