forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: artwork controller improvements
+39
-32
+39
-32
src/themes/blur/artwork-controller/element.js
+39
-32
src/themes/blur/artwork-controller/element.js
···
51
51
// SIGNALS
52
52
53
53
#artwork = signal(
54
-
/** @type {{ current: Artwork | null; previous: Artwork | null }} */ ({
54
+
/** @type {{ current: (Artwork & { hash: string; loaded: boolean; url: string }) | null; previous: (Artwork & { hash: string; loaded: boolean; url: string }) | null }} */ ({
55
55
current: null,
56
56
previous: null,
57
57
}),
···
203
203
return;
204
204
}
205
205
206
-
const art = await this.$artwork.value?.artwork(request) ?? [];
206
+
const allArt = await this.$artwork.value?.artwork(request) ?? [];
207
207
208
208
const currTrack = this.$queue.value?.now();
209
209
const currCacheId = currTrack
···
211
211
: undefined;
212
212
213
213
if (cacheId === currCacheId) {
214
+
const art = allArt[0];
215
+
const blob = new Blob(
216
+
[/** @type {ArrayBuffer} */ (art.bytes.buffer)],
217
+
{ type: art.mime },
218
+
);
219
+
220
+
const url = URL.createObjectURL(blob);
221
+
214
222
this.#artwork.set({
215
223
previous: currArtwork.current,
216
-
current: art[0] ?? null,
224
+
current: art
225
+
? { ...art, hash: xxh32r(art.bytes).toString(), loaded: false, url }
226
+
: null,
217
227
});
218
228
}
219
229
}
···
273
283
artworkLoaded(event) {
274
284
if (!(event.target instanceof HTMLImageElement)) return;
275
285
286
+
const hash = event.target.getAttribute("data-hash");
287
+
if (!hash) return;
288
+
289
+
console.log("loaded", hash);
290
+
291
+
if (hash !== this.#artwork.value.current?.hash) return;
292
+
if (this.#artwork.value.current?.loaded) return;
293
+
276
294
const fac = new FastAverageColor();
277
295
const color = fac.getColor(event.target);
278
296
const rgb = color.value;
···
282
300
283
301
this.#artworkColor.value = color.rgba;
284
302
this.#artworkLightMode.value = o > 165;
285
-
286
-
event.target.style.opacity = "1";
303
+
this.#artwork.value = {
304
+
previous: this.#artwork.value.previous,
305
+
current: { ...this.#artwork.value.current, loaded: true },
306
+
};
287
307
}
288
308
289
309
fullVolume() {
···
347
367
348
368
// Artwork
349
369
const artworkArr = [
350
-
{ key: "previous", value: this.#artwork.value.previous },
351
-
{ key: "current", value: this.#artwork.value.current },
370
+
this.#artwork.value.previous,
371
+
this.#artwork.value.current,
352
372
];
353
373
354
-
const artwork = artworkArr.map(({ key, value }) => {
355
-
const art = value;
356
-
374
+
const artwork = artworkArr.map((art) => {
357
375
if (art === null) {
358
-
return html`
359
-
360
-
`;
376
+
return null;
361
377
}
362
378
363
-
const hash = xxh32r(art.bytes).toString();
364
-
const blob = new Blob(
365
-
[/** @type {ArrayBuffer} */ (art.bytes.buffer)],
366
-
{ type: art.mime },
379
+
return keyed(
380
+
art.hash,
381
+
cache(html`
382
+
<img
383
+
@load="${this.artworkLoaded}"
384
+
data-hash="${art.hash}"
385
+
src="${art.url}"
386
+
style="opacity: ${art.loaded ? `1` : `0`}"
387
+
/>
388
+
`),
367
389
);
368
-
369
-
const url = URL.createObjectURL(blob);
370
-
371
-
return guard([hash], () =>
372
-
keyed(
373
-
hash,
374
-
html`
375
-
<img
376
-
@load="${this.artworkLoaded}"
377
-
data-hash="${hash}"
378
-
src="${url}"
379
-
style="opacity: ${key === `current` ? `0` : `1`}"
380
-
/>
381
-
`,
382
-
));
383
390
});
384
391
385
392
return html`