a simple web player for subsonic
tinysub.devins.page
subsonic
navidrome
javascript
chore: adjust default settings
+15
-15
+4
-5
src/css/base.css
+4
-5
src/css/base.css
···
18
18
--error-color: hsl(0 80% 50%);
19
19
20
20
/* cover art sizing (customize via settings) */
21
-
--icon: 16px;
22
-
--art-album: 32px;
23
-
--art-artist: 0px;
24
-
--art-song: 0px;
21
+
--art-album: 48px;
22
+
--art-artist: 32px;
23
+
--art-song: 16px;
25
24
--art-now-playing: 128px;
26
25
}
27
26
···
43
42
-webkit-user-select: none;
44
43
}
45
44
46
-
/* interactive elements */
45
+
/* use default cursor */
47
46
a,
48
47
button,
49
48
[role="button"] {
+4
-4
src/index.html
+4
-4
src/index.html
···
90
90
</div>
91
91
<div class="form-group">
92
92
<label
93
-
>artist art size: <span id="artist-size-display">16</span>px</label
93
+
>artist art size: <span id="artist-size-display">32</span>px</label
94
94
>
95
95
<input
96
96
type="range"
···
98
98
min="0"
99
99
max="256"
100
100
step="4"
101
-
value="16"
101
+
value="32"
102
102
/>
103
103
</div>
104
104
<div class="form-group">
105
105
<label
106
-
>album art size: <span id="album-size-display">32</span>px</label
106
+
>album art size: <span id="album-size-display">48</span>px</label
107
107
>
108
108
<input
109
109
type="range"
···
111
111
min="0"
112
112
max="256"
113
113
step="4"
114
-
value="32"
114
+
value="48"
115
115
/>
116
116
</div>
117
117
<div class="form-group">
+3
-2
src/js/library.js
+3
-2
src/js/library.js
···
223
223
const linkChildren = [];
224
224
if (coverArtId) {
225
225
const imgEl = createElement("img");
226
-
const size = state.settings[artType];
226
+
// HACK: upscale artist images 2x, since non-1:1 aspect ratios seems to make images look blurry, which is very common on artist profiles
227
+
const size = state.settings[artType] * (artType === "artArtist" ? 2 : 1);
227
228
const url1x = state.api.getCoverArtUrl(coverArtId, size);
228
229
const url2x = state.api.getCoverArtUrl(coverArtId, size * 2);
229
230
imgEl.src = url1x;
231
+
imgEl.srcset = `${url1x}, ${url2x} 2x`;
230
232
imgEl.loading = "lazy";
231
-
imgEl.srcset = `${url1x} 1x, ${url2x} 2x`;
232
233
linkChildren.push(imgEl);
233
234
}
234
235
linkChildren.push(createElement("span", { textContent: name }));
+1
-1
src/js/queue.js
+1
-1
src/js/queue.js
···
412
412
const url1x = state.api.getCoverArtUrl(artId, size);
413
413
const url2x = state.api.getCoverArtUrl(artId, size * 2);
414
414
img.src = url1x;
415
+
img.srcset = `${url1x}, ${url2x} 2x`;
415
416
img.loading = "lazy";
416
-
img.srcset = `${url1x} 1x, ${url2x} 2x`;
417
417
coverCell.appendChild(img);
418
418
}
419
419
cells.appendChild(coverCell);