settings: the long lists use the app's own chooser — the sort menu's popover under a pill — instead of native selects the webview draws with the OS's text
This commit is contained in:
KeelrLeek committed
1 parent
7e291cfccc
commit
07ac3d3631
2 files changed
+167
-49
No files matched your search
+18
-49
@@ -10,6 +10,7 @@
|
||||
import { applyGlass } from "../lib/glass.js";
|
||||
import * as api from "../lib/api.js";
|
||||
import Icon from "../components/Icon.svelte";
|
||||
import Chooser from "../components/Chooser.svelte";
|
||||
import {
|
||||
community,
|
||||
refreshFreenet,
|
||||
@@ -311,6 +312,19 @@
|
||||
return d.toLocaleDateString([], { month: "short", day: "numeric" });
|
||||
}
|
||||
|
||||
// ---- the long lists, as [value, label] for the chooser -------------------
|
||||
const RETENTION = [["1", "1 day"], ["3", "3 days"], ["7", "1 week"], ["14", "2 weeks"], ["30", "1 month (recommended)"], ["90", "3 months"], ["forever", "Forever — save to library"]];
|
||||
const CACHE = [["512", "512 MB"], ["1024", "1 GB"], ["2048", "2 GB (recommended)"], ["5120", "5 GB"], ["10240", "10 GB"], ["20480", "20 GB"], ["0", "Unlimited"]];
|
||||
const MIN_QUALITY = [["any", "Any quality"], ["kbps192", "192 kbps and up"], ["kbps256", "256 kbps and up"], ["kbps320", "320 kbps and up"], ["lossless", "Lossless only"]];
|
||||
const audioOutputs = $derived.by(() => {
|
||||
if (!settings) return [];
|
||||
const out = [["", "System default (recommended)"]];
|
||||
const cur = settings.audio_output_device;
|
||||
if (cur && !settings.audio_output_devices.includes(cur)) out.push([cur, `${cur} (unavailable)`]);
|
||||
for (const d of settings.audio_output_devices) out.push([d, d]);
|
||||
return out;
|
||||
});
|
||||
|
||||
// ---- the index ---------------------------------------------------------
|
||||
const SECTIONS = [
|
||||
{ id: "account", title: "Account", group: "You" },
|
||||
@@ -533,17 +547,7 @@
|
||||
<div class="name">Audio output</div>
|
||||
<div class="hint">System default follows Windows when headphones or speakers change.</div>
|
||||
</div>
|
||||
<div class="ctl">
|
||||
<select class="menu" value={settings.audio_output_device ?? ""} disabled={saving} onchange={(e) => setAudioOutput(e.currentTarget.value)}>
|
||||
<option value="">System default (recommended)</option>
|
||||
{#if settings.audio_output_device && !settings.audio_output_devices.includes(settings.audio_output_device)}
|
||||
<option value={settings.audio_output_device}>{settings.audio_output_device} (unavailable)</option>
|
||||
{/if}
|
||||
{#each settings.audio_output_devices as device (device)}
|
||||
<option value={device}>{device}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="ctl"><Chooser options={audioOutputs} value={settings.audio_output_device ?? ""} onchange={(v) => setAudioOutput(v)} disabled={saving} /></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="label">
|
||||
@@ -611,34 +615,14 @@
|
||||
<div class="name">Keep streamed tracks</div>
|
||||
<div class="hint">Streamed songs stay in a private cache for instant replay — not in your library. Forever adds everything you stream to the library instead.</div>
|
||||
</div>
|
||||
<div class="ctl">
|
||||
<select class="menu" value={settings.stream_keep_forever ? "forever" : String(settings.stream_retention_days)} disabled={saving} onchange={(e) => setStreamRetention(e.currentTarget.value)}>
|
||||
<option value="1">1 day</option>
|
||||
<option value="3">3 days</option>
|
||||
<option value="7">1 week</option>
|
||||
<option value="14">2 weeks</option>
|
||||
<option value="30">1 month (recommended)</option>
|
||||
<option value="90">3 months</option>
|
||||
<option value="forever">Forever — save to library</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ctl"><Chooser options={RETENTION} value={settings.stream_keep_forever ? "forever" : String(settings.stream_retention_days)} onchange={(v) => setStreamRetention(v)} disabled={saving} /></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="label">
|
||||
<div class="name">Cache size limit</div>
|
||||
<div class="hint">Oldest streamed tracks are removed first once the cache passes this size. Saved and downloaded music is never touched.</div>
|
||||
</div>
|
||||
<div class="ctl">
|
||||
<select class="menu" value={String(settings.stream_cache_max_mb)} disabled={saving} onchange={(e) => setStreamCacheMax(e.currentTarget.value)}>
|
||||
<option value="512">512 MB</option>
|
||||
<option value="1024">1 GB</option>
|
||||
<option value="2048">2 GB (recommended)</option>
|
||||
<option value="5120">5 GB</option>
|
||||
<option value="10240">10 GB</option>
|
||||
<option value="20480">20 GB</option>
|
||||
<option value="0">Unlimited</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ctl"><Chooser options={CACHE} value={String(settings.stream_cache_max_mb)} onchange={(v) => setStreamCacheMax(v)} disabled={saving} /></div>
|
||||
</div>
|
||||
<div class="foot">Retention counts from the last time a track was played. Tracks you save stay in your library regardless.</div>
|
||||
</div>
|
||||
@@ -721,15 +705,7 @@
|
||||
<div class="name">Minimum</div>
|
||||
<div class="hint">Reject files below this floor. Lossy files must report a bitrate to qualify.</div>
|
||||
</div>
|
||||
<div class="ctl">
|
||||
<select class="menu" value={sourcePrefsFor(mode.key).min} disabled={saving} onchange={(e) => setSourcePref(mode.key, "min", e.currentTarget.value)}>
|
||||
<option value="any">Any quality</option>
|
||||
<option value="kbps192">192 kbps and up</option>
|
||||
<option value="kbps256">256 kbps and up</option>
|
||||
<option value="kbps320">320 kbps and up</option>
|
||||
<option value="lossless">Lossless only</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ctl"><Chooser options={MIN_QUALITY} value={sourcePrefsFor(mode.key).min} onchange={(v) => setSourcePref(mode.key, "min", v)} disabled={saving} /></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="label">
|
||||
@@ -876,13 +852,6 @@
|
||||
.seg button.on { background: var(--accent); color: #000; }
|
||||
.seg button:hover:not(.on):not(:disabled) { color: #fff; }
|
||||
.seg button:disabled { opacity: 0.6; cursor: default; }
|
||||
/* a long list stays a real <select>, dressed as the menu pill */
|
||||
.menu { appearance: none; -webkit-appearance: none; height: 32px; padding: 0 30px 0 14px; border-radius: 99px; border: none; background-color: var(--surf-hi); color: #fff; font-size: 12.5px; font-weight: 800; outline: none; cursor: pointer; max-width: 320px;
|
||||
background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
|
||||
background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
|
||||
.menu:hover { background-color: var(--bg-press); }
|
||||
.menu:disabled { opacity: 0.6; cursor: default; }
|
||||
.menu option { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; }
|
||||
.ax-ghost { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 99px; font-size: 12px; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.28); transition: 0.18s; white-space: nowrap; }
|
||||
.ax-ghost:hover:not(:disabled) { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
|
||||
.ax-ghost.sm { height: 28px; padding: 0 11px; font-size: 11px; }
|
||||
|
||||
Reference in new issue
Block a user