a simple web player for subsonic
tinysub.devins.page
subsonic
navidrome
javascript
1<script lang="ts">
2 import Modal from "./Modal.svelte";
3 import { logout, settings, t } from "./app.svelte.js";
4 let { open = $bindable(false) } = $props();
5</script>
6
7<Modal bind:open title={t("settings")}>
8 <div class="grid">
9 <div class="sec">
10 <h3>{t("general")}</h3>
11 <div class="row">
12 <span>{t("scrobbling")}</span>
13 <input type="checkbox" bind:checked={settings.scrobbling} />
14 </div>
15 <div class="row">
16 <span>{t("replaygain")}</span>
17 <select bind:value={settings.replayGainMode}>
18 <option value="off">{t("off")}</option>
19 <option value="track">{t("track")}</option>
20 <option value="album">{t("album")}</option>
21 </select>
22 </div>
23 <div class="row">
24 <span>{t("language")}</span>
25 <select bind:value={settings.lang}>
26 <option value="en">english</option>
27 <option value="es">español</option>
28 </select>
29 </div>
30 </div>
31 <div class="sec">
32 <h3>{t("ui")}</h3>
33 <div class="row">
34 <span>{t("dynamic_colors")}</span>
35 <input type="checkbox" bind:checked={settings.dynamicColors} />
36 </div>
37 <div class="row">
38 <span>{t("dynamic_favicon")}</span>
39 <input type="checkbox" bind:checked={settings.dynamicFavicon} />
40 </div>
41 <div class="row">
42 <span>{t("rounded_covers")}</span>
43 <input type="checkbox" bind:checked={settings.roundedArt} />
44 </div>
45 <div class="row">
46 <span>{t("transparent_bg")}</span>
47 <input type="checkbox" bind:checked={settings.transparentBackgrounds} />
48 </div>
49 <div class="row">
50 <span>{t("transparent_borders")}</span>
51 <input type="checkbox" bind:checked={settings.transparentOutlines} />
52 </div>
53 <div class="row">
54 <span>{t("show_queue_stats")}</span>
55 <input type="checkbox" bind:checked={settings.showQueueStats} />
56 </div>
57 <div class="row">
58 <span
59 >{t("sidebar_width")} (<span class="num"
60 >{Math.round(settings.sidebarWidth)}rem</span
61 >)</span
62 >
63 <div class="val">
64 <input
65 type="range"
66 min="16"
67 max="48"
68 step="1"
69 bind:value={settings.sidebarWidth}
70 />
71 </div>
72 </div>
73 </div>
74 <div class="sec">
75 <h3>{t("table_columns")}</h3>
76 <div class="row">
77 <span>{t("show_artist")}</span>
78 <input type="checkbox" bind:checked={settings.enableArtist} />
79 </div>
80 <div class="row">
81 <span>{t("show_album")}</span>
82 <input type="checkbox" bind:checked={settings.enableAlbum} />
83 </div>
84 <div class="row">
85 <span>{t("show_quality")}</span>
86 <input type="checkbox" bind:checked={settings.enableQuality} />
87 </div>
88 <div class="row">
89 <span>{t("show_duration")}</span>
90 <input type="checkbox" bind:checked={settings.enableDuration} />
91 </div>
92 <div class="row">
93 <span>{t("show_disc")}</span>
94 <input type="checkbox" bind:checked={settings.enableDisc} />
95 </div>
96 <div class="row">
97 <span>{t("show_track")}</span>
98 <input type="checkbox" bind:checked={settings.enableTrackNum} />
99 </div>
100 <div class="row">
101 <span>{t("show_queue_num")}</span>
102 <input type="checkbox" bind:checked={settings.enableQueueNum} />
103 </div>
104 <div class="row">
105 <span>{t("show_favorites")}</span>
106 <input type="checkbox" bind:checked={settings.enableFavorites} />
107 </div>
108 <div class="row">
109 <span>{t("show_ratings")}</span>
110 <input type="checkbox" bind:checked={settings.enableRatings} />
111 </div>
112 </div>
113 <div class="sec">
114 <h3>{t("artwork_sizes")}</h3>
115 {#each [{ label: t("artist"), key: "artArtist" }, { label: t("album"), key: "artAlbum" }, { label: t("playlist"), key: "artPlaylist" }, { label: t("song"), key: "artSong" }, { label: t("now_playing"), key: "artNow" }] as { label, key }}
116 <div class="row">
117 <span
118 >{label} (<span class="num"
119 >{settings[key as keyof typeof settings]}px</span
120 >)</span
121 >
122 <div class="val">
123 <input
124 type="range"
125 min="0"
126 max="192"
127 step="8"
128 bind:value={settings[key as keyof typeof settings]}
129 />
130 </div>
131 </div>
132 {/each}
133 </div>
134 </div>
135 <button class="logout" onclick={logout}>{t("logout")}</button>
136</Modal>
137
138<style>
139 h3 {
140 border-block-end: 1px solid var(--border-text);
141 padding-block-end: 0.25rem;
142 margin-block: 0 0.5rem;
143 }
144 .grid {
145 display: grid;
146 grid-template-columns: repeat(2, 1fr);
147 gap: 1.5rem;
148 margin-block-end: 1rem;
149 }
150 @media (max-width: 32rem) {
151 .grid {
152 grid-template-columns: 1fr;
153 }
154 }
155 .sec {
156 display: flex;
157 flex-direction: column;
158 gap: 0.5rem;
159 }
160 .row {
161 display: flex;
162 justify-content: space-between;
163 align-items: center;
164 gap: 1rem;
165 }
166 .logout {
167 inline-size: 100%;
168 }
169 .val {
170 display: flex;
171 align-items: center;
172 gap: 0.5rem;
173 }
174 .num {
175 font-family: monospace;
176 }
177</style>