Fix - Downloader Settings, TidalTags Settings order, sharedStorage db…

… close on undefined
Inrixia · Jun 22, 2024 · 83d9caa · 83d9caa
1 parent 3f7886f
commit 83d9caa
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/plugins/SongDownloader/src/Settings.ts b/plugins/SongDownloader/src/Settings.ts
@@ -1,17 +1,19 @@
 import { html } from "@neptune/voby";
 import { getSettings } from "@inrixia/lib/storage";
 import { AudioQualityInverse, AudioQuality, validQualitiesSettings } from "@inrixia/lib/AudioQualityTypes";
+import { DropdownSelect } from "@inrixia/lib/components/DropdownSelect";
 
 export const settings = getSettings({
 	desiredDownloadQuality: AudioQuality.HiRes,
 	defaultDownloadPath: "",
 });
-export const Settings = () => html`<div">
-	<h3 class="settings-header">Download Quality</h3>
-	<p class="settings-explainer">Select the desired max download quality:</p>
-	<select id="qualityDropdown" onChange=${(event: { target: { value: unknown } }) => (settings.desiredDownloadQuality = <AudioQuality>event.target.value)}>
-		${validQualitiesSettings.map((quality) => html`<option value=${quality} selected=${settings.desiredDownloadQuality === quality}>${AudioQualityInverse[quality]}</option>`)}
-	</select>
+export const Settings = () => html`<div>
+	<${DropdownSelect}
+		selected=${settings.desiredDownloadQuality}
+		onSelected=${(selected: AudioQuality) => (settings.desiredDownloadQuality = selected)}
+		options=${validQualitiesSettings}
+		title="Download Quality"
+	/>
 
 	<h3 class="settings-header">Download Path</h3>
 	<p class="settings-explainer">System path to save to. Doing so will disable download prompt</p>

diff --git a/plugins/SongDownloader/src/index.ts b/plugins/SongDownloader/src/index.ts
@@ -16,8 +16,9 @@ import { TrackItemCache } from "@inrixia/lib/Caches/TrackItemCache";
 import { Tracer } from "@inrixia/lib/trace";
 const trace = Tracer("[SongDownloader]");
 
-import { settings } from "./Settings";
 import safeUnload from "@inrixia/lib/safeUnload";
+
+import { settings } from "./Settings";
 export { Settings } from "./Settings";
 
 type DownloadButtoms = Record<string, HTMLButtonElement>;

diff --git a/plugins/TidalTags/src/Settings.ts b/plugins/TidalTags/src/Settings.ts
@@ -14,6 +14,6 @@ export const Settings = () => html`<div>
 	<${SwitchSetting} checked=${settings.showTags} onClick=${() => (settings.showTags = !settings.showTags)} title="Display tags" />
 	<${SwitchSetting} checked=${settings.showAtmosQuality} onClick=${() => (settings.showAtmosQuality = !settings.showAtmosQuality)} title="Display atmos tags" />
 	<${SwitchSetting} checked=${settings.showFLACInfoBorder} onClick=${() => (settings.showFLACInfoBorder = !settings.showFLACInfoBorder)} title="Display a border around the FLAC Info" />
-	<${SwitchSetting} checked=${settings.infoColumnColors} onClick=${() => (settings.infoColumnColors = !settings.infoColumnColors)} title="Display FLAC info columns" />
-	<${SwitchSetting} checked=${settings.displayInfoColumns} onClick=${() => (settings.displayInfoColumns = !settings.displayInfoColumns)} title="Display FLAC info columns in color" />
+	<${SwitchSetting} checked=${settings.displayInfoColumns} onClick=${() => (settings.displayInfoColumns = !settings.displayInfoColumns)} title="Display FLAC info columns" />
+	<${SwitchSetting} checked=${settings.infoColumnColors} onClick=${() => (settings.infoColumnColors = !settings.infoColumnColors)} title="Display FLAC info columns in color" />
 </div>`;
diff --git a/plugins/_lib/components/DropdownSelect.ts b/plugins/_lib/components/DropdownSelect.ts
@@ -0,0 +1,17 @@
+import { html } from "@neptune/voby";
+
+type DropdownSelectProps = { selected: string; onSelect?: (selected: string) => void; options: string[]; title: string };
+export const DropdownSelect = ({ selected, onSelect, options, title }: DropdownSelectProps) => {
+	const onChange = (event: Event) => {
+		const target = event.target as HTMLSelectElement;
+		if (onSelect) onSelect(target.value);
+	};
+	return html`
+		<div style="margin-bottom: 15px;display: flex;justify-content: space-between;align-items: center;">
+			<label for="dropdown-${title}" style="font-size: 1.2em;margin-right: 10px;">${title}</label>
+			<select id="dropdown-${title}" value=${selected} onChange=${onChange} style="flex-grow: 1;">
+				${options.map((option) => html`<option value=${option} selected=${option === selected}>${option}</option>`)}
+			</select>
+		</div>
+	`;
+};
diff --git a/plugins/_lib/sharedStorage.ts b/plugins/_lib/sharedStorage.ts
@@ -30,7 +30,7 @@ export class SharedObjectStore<K extends IDBValidKey, V> {
 		}
 	}
 	public static close() {
-		return this.db.then((db) => db.close());
+		return this.db?.then((db) => db.close());
 	}
 
 	private readonly _memCache = new Map<K, V>();